Skip to content

Commit

Permalink
Add: opensight date picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@daniele-mng @timopollmeier
daniele-mng authored and timopollmeier committed Jul 22, 2024
1 parent 7810a80 commit d856dc5
Show file tree
Hide file tree
Showing 7 changed files with 336 additions and 518 deletions.
2 changes: 1 addition & 1 deletion src/gmp/commands/wizard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ class WizardCommand extends HttpCommand {
event_data_quick_task_fields,
);

event_data['event_data:start_day'] = start_date.day();
event_data['event_data:start_day'] = start_date.date();
event_data['event_data:start_month'] = start_date.month() + 1;
event_data['event_data:start_year'] = start_date.year();

Expand Down
6 changes: 4 additions & 2 deletions src/gmp/models/event.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,13 +254,14 @@ class Event {
startDate,
summary,
weekdays,
isUseUTC = true,
},
timezone,
) {
const event = new ical.Event();

event.uid = uuid();
event.startDate = ical.Time.fromJSDate(startDate.toDate(), true);
event.startDate = ical.Time.fromJSDate(startDate.toDate(), isUseUTC);

if (isDefined(duration)) {
const eventDuration = new ical.Duration();
Expand Down Expand Up @@ -317,7 +318,8 @@ class Event {
}

get duration() {
return createDuration({...this.event.duration});
const {weeks, ...durationWithoutWeeks} = this.event.duration;
return createDuration(durationWithoutWeeks);
}

get durationInSeconds() {
Expand Down
87 changes: 20 additions & 67 deletions src/web/components/form/datepicker.jsx → src/web/components/form/DatePicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,107 +17,60 @@
*/
import React, {useCallback} from 'react';

import styled from 'styled-components';

import DatePicker from 'react-datepicker';

import _ from 'gmp/locale';

import {getLocale} from 'gmp/locale/lang';
import {DateTimePicker} from '@greenbone/opensight-ui-components';

import {isDefined} from 'gmp/utils/identity';

import date from 'gmp/models/date';

import PropTypes from 'web/utils/proptypes';

import Theme from 'web/utils/theme';

import CalendarIcon from 'web/components/icon/calendaricon';

import 'react-datepicker/dist/react-datepicker.css';

const StyledCalendarIcon = styled(CalendarIcon)`
margin-left: 5px;
:hover {
cursor: ${props => (props.disabled ? 'not-allowed ' : 'pointer')};
}
`;

const StyledDiv = styled.div`
display: flex;
margin-right: 5px;
width: ${props => props.width};
color: ${props => (props.disabled ? Theme.lightGray : undefined)};
`;

// InputField must be a Class to work correctly with Datepicker :-/
// eslint-disable-next-line react/prefer-stateless-function
class InputField extends React.Component {
render() {
const {disabled, onClick, value, width = 'auto', ...props} = this.props;

return (
<StyledDiv {...props} disabled={disabled} width={width} onClick={onClick}>
{value}
<StyledCalendarIcon disabled={disabled} />
</StyledDiv>
);
}
}
import {getLocale} from 'gmp/locale/lang';

InputField.propTypes = {
disabled: PropTypes.bool,
value: PropTypes.string,
width: PropTypes.string,
onClick: PropTypes.func,
};
import PropTypes from 'web/utils/proptypes';

const DatePickerComponent = ({
disabled,
timezone,
minDate = date().tz(timezone),
minDate = date(),
name,
width,
value = date().tz(timezone),
width = '100%',
value = date(),
onChange,
...restProps
label = '',
}) => {
const handleChange = useCallback(
newValue => {
if (isDefined(onChange)) {
onChange(date(newValue).tz(timezone), name);
const valueToPass = date(newValue);
onChange(valueToPass, name);
}
},
[name, onChange, timezone],
[name, onChange],
);

return (
<DatePicker
{...restProps}
<DateTimePicker
disabled={disabled}
customInput={<InputField width={width} disabled={disabled} />}
locale={getLocale()}
value={value.toDate()}
onChange={handleChange}
minDate={
minDate === false || !isDefined(minDate) ? undefined : minDate.toDate()
}
maxDate={date().add(3, 'years').toDate()}
selected={value.toDate()}
todayButton={_('Today')}
locale={getLocale()}
onChange={handleChange}
style={{width}}
withSeconds={false}
label={label}
/>
);
};

DatePickerComponent.propTypes = {
disabled: PropTypes.bool,
minDate: PropTypes.oneOfType([PropTypes.date, PropTypes.oneOf([false])]),
name: PropTypes.string,
timezone: PropTypes.string.isRequired,
name: PropTypes.arrayOf(PropTypes.string),
value: PropTypes.date.isRequired,
width: PropTypes.string,
onChange: PropTypes.func,
label: PropTypes.string,
};

export default DatePickerComponent;

// vim: set ts=2 sw=2 tw=80:
193 changes: 61 additions & 132 deletions src/web/pages/performance/startendtimeselection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,151 +15,82 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react';
import {useState, useEffect} from 'react';

import _ from 'gmp/locale';

import {isDefined} from 'gmp/utils/identity';

import PropTypes from 'web/utils/proptypes';

import Button from 'web/components/form/button';
import Datepicker from 'web/components/form/datepicker';
import DatePicker from 'web/components/form/DatePicker';
import FormGroup from 'web/components/form/formgroup';
import Spinner from 'web/components/form/spinner';

import Column from 'web/components/layout/column';
import Row from 'web/components/layout/row';

class StartTimeSelection extends React.Component {
constructor(...args) {
super(...args);

const {startDate, endDate} = this.props;

this.state = {
startDate,
startHour: startDate.hour(),
startMinute: startDate.minute(),
endDate,
endHour: endDate.hour(),
endMinute: endDate.minute(),
};

this.handleValueChange = this.handleValueChange.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
}

static getDerivedStateFromProps(props, state) {
const {startDate, endDate} = props;

if (
(isDefined(startDate) && startDate !== state.prevStartDate) ||
(isDefined(endDate) && props.endDate !== state.prevEndDate)
) {
return {
startDate,
endDate,
endHour: endDate.hour(),
endMinute: endDate.minute(),
prevStartDate: startDate,
prevEndDate: endDate,
startHour: startDate.hour(),
startMinute: startDate.minute(),
};
const StartTimeSelection = props => {
const {
startDate: initialStartDate,
endDate: initialEndDate,
timezone,
onChanged,
} = props;
const [startDate, setStartDate] = useState(initialStartDate);
const [endDate, setEndDate] = useState(initialEndDate);

useEffect(() => {
setStartDate(initialStartDate);
setEndDate(initialEndDate);
}, [initialStartDate, initialEndDate]);

const handleValueChange = (value, name) => {
if (name === 'startDate') {
setStartDate(value);
} else if (name === 'endDate') {
setEndDate(value);
}
return null;
}

handleValueChange(value, name) {
this.setState({[name]: value});
}

handleUpdate() {
const {onChanged} = this.props;
const {startDate, endDate, startHour, startMinute, endHour, endMinute} =
this.state;
};

const handleUpdate = () => {
onChanged({
startDate: startDate.clone().hour(startHour).minute(startMinute),
endDate: endDate.clone().hour(endHour).minute(endMinute),
startDate: startDate.clone(),
endDate: endDate.clone(),
});
}

render() {
const {timezone} = this.props;
const {endDate, startDate, startHour, startMinute, endHour, endMinute} =
this.state;
return (
<Column>
<FormGroup data-testid="timezone" title={_('Timezone')}>
{timezone}
</FormGroup>
<FormGroup title={_('Start Time')} direction="row">
<Datepicker
value={startDate}
name="startDate"
timezone={timezone}
minDate={false}
onChange={this.handleValueChange}
/>
<Spinner
name="startHour"
value={startHour}
min="0"
max="23"
type="int"
onChange={this.handleValueChange}
/>{' '}
h
<Spinner
name="startMinute"
value={startMinute}
min="0"
max="59"
type="int"
onChange={this.handleValueChange}
/>{' '}
m
</FormGroup>

<FormGroup title={_('End Time')} direction="row">
<Datepicker
value={endDate}
name="endDate"
timezone={timezone}
minDate={false}
onChange={this.handleValueChange}
/>
<Spinner
name="endHour"
value={endHour}
min="0"
max="23"
type="int"
onChange={this.handleValueChange}
/>{' '}
h
<Spinner
name="endMinute"
value={endMinute}
min="0"
max="59"
type="int"
onChange={this.handleValueChange}
/>{' '}
m
</FormGroup>

<Row>
<Button data-testid="update-button" onClick={this.handleUpdate}>
{_('Update')}
</Button>
</Row>
</Column>
);
}
}
};

return (
<Column>
<FormGroup data-testid="timezone" title={_('Timezone')}>
{timezone}
</FormGroup>
<FormGroup direction="row">
<DatePicker
value={startDate}
name="startDate"
minDate={false}
onChange={handleValueChange}
label={_('Start Time')}
/>
</FormGroup>

<FormGroup direction="row">
<DatePicker
value={endDate}
name="endDate"
minDate={false}
onChange={handleValueChange}
label={_('End Time')}
/>
</FormGroup>

<Row>
<Button data-testid="update-button" onClick={handleUpdate}>
{_('Update')}
</Button>
</Row>
</Column>
);
};

StartTimeSelection.propTypes = {
endDate: PropTypes.date.isRequired,
Expand All @@ -169,5 +100,3 @@ StartTimeSelection.propTypes = {
};

export default StartTimeSelection;

// vim: set ts=2 sw=2 tw=80:
Loading

0 comments on commit d856dc5

Please # to comment.