split date and time components

greenbone · Jul 19, 2024 · 6ce68be · 6ce68be
1 parent 00bc82e
commit 6ce68be
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 76 deletions.
diff --git a/src/gmp/models/event.js b/src/gmp/models/event.js
@@ -254,14 +254,13 @@ class Event {
       startDate,
       summary,
       weekdays,
-      isUseUTC = true,
     },
     timezone,
   ) {
     const event = new ical.Event();
 
     event.uid = uuid();
-    event.startDate = ical.Time.fromJSDate(startDate.toDate(), isUseUTC);
+    event.startDate = ical.Time.fromJSDate(startDate.toDate(), true);
 
     if (isDefined(duration)) {
       const eventDuration = new ical.Duration();

diff --git a/src/web/components/form/DatePicker.jsx b/src/web/components/form/DatePicker.jsx
@@ -17,7 +17,7 @@
  */
 import React, {useCallback} from 'react';
 
-import {DateTimePicker} from '@greenbone/opensight-ui-components';
+import {DatePickerOnly} from '@greenbone/opensight-ui-components';
 
 import {isDefined} from 'gmp/utils/identity';
 
@@ -31,7 +31,6 @@ const DatePickerComponent = ({
   disabled,
   minDate = date(),
   name,
-  width = '100%',
   value = date(),
   onChange,
   label = '',
@@ -47,7 +46,7 @@ const DatePickerComponent = ({
   );
 
   return (
-    <DateTimePicker
+    <DatePickerOnly
       disabled={disabled}
       locale={getLocale()}
       value={value.toDate()}
@@ -56,8 +55,6 @@ const DatePickerComponent = ({
         minDate === false || !isDefined(minDate) ? undefined : minDate.toDate()
       }
       maxDate={date().add(3, 'years').toDate()}
-      style={{width}}
-      withSeconds={false}
       label={label}
     />
   );
@@ -66,9 +63,8 @@ const DatePickerComponent = ({
 DatePickerComponent.propTypes = {
   disabled: PropTypes.bool,
   minDate: PropTypes.oneOfType([PropTypes.date, PropTypes.oneOf([false])]),
-  name: PropTypes.arrayOf(PropTypes.string),
+  name: PropTypes.string,
   value: PropTypes.date.isRequired,
-  width: PropTypes.string,
   onChange: PropTypes.func,
   label: PropTypes.string,
 };

diff --git a/src/web/pages/performance/startendtimeselection.jsx b/src/web/pages/performance/startendtimeselection.jsx
@@ -24,6 +24,7 @@ import PropTypes from 'web/utils/proptypes';
 import Button from 'web/components/form/button';
 import DatePicker from 'web/components/form/DatePicker';
 import FormGroup from 'web/components/form/formgroup';
+import {TimePicker} from '@greenbone/opensight-ui-components';
 
 import Column from 'web/components/layout/column';
 import Row from 'web/components/layout/row';
@@ -37,17 +38,30 @@ const StartTimeSelection = props => {
   } = props;
   const [startDate, setStartDate] = useState(initialStartDate);
   const [endDate, setEndDate] = useState(initialEndDate);
+  const [startTime, setStartTime] = useState(
+    `${startDate.hours().toString().padStart(2, '0')}:${startDate.minutes().toString().padStart(2, '0')}`,
+  );
+
+  const [endTime, setEndTime] = useState(
+    `${endDate.hours().toString().padStart(2, '0')}:${endDate.minutes().toString().padStart(2, '0')}`,
+  );
 
   useEffect(() => {
     setStartDate(initialStartDate);
     setEndDate(initialEndDate);
   }, [initialStartDate, initialEndDate]);
 
-  const handleValueChange = (value, name) => {
-    if (name === 'startDate') {
-      setStartDate(value);
-    } else if (name === 'endDate') {
-      setEndDate(value);
+  const handleTimeChange = (selectedTime, type) => {
+    const [hour, minute] = selectedTime.split(':').map(Number);
+
+    if (type === 'startTime') {
+      const newStartDate = startDate.clone().hours(hour).minutes(minute);
+      setStartDate(newStartDate);
+      setStartTime(selectedTime);
+    } else if (type === 'endTime') {
+      const newEndDate = endDate.clone().hours(hour).minutes(minute);
+      setEndDate(newEndDate);
+      setEndTime(selectedTime);
     }
   };
 
@@ -67,24 +81,42 @@ const StartTimeSelection = props => {
         <DatePicker
           value={startDate}
           name="startDate"
-          minDate={false}
-          onChange={handleValueChange}
+          onChange={setStartDate}
+          label={_('Start Date')}
+          maxDate={endDate}
+        />
+        <TimePicker
           label={_('Start Time')}
+          name="startTime"
+          value={startTime}
+          onChange={newStartTime => handleTimeChange(newStartTime, 'startTime')}
         />
       </FormGroup>
 
       <FormGroup direction="row">
         <DatePicker
           value={endDate}
           name="endDate"
-          minDate={false}
-          onChange={handleValueChange}
+          minDate={startDate}
+          onChange={setEndDate}
+          label={_('End Date')}
+        />
+        <TimePicker
           label={_('End Time')}
+          name="endTime"
+          value={endTime}
+          onChange={newEndTime => handleTimeChange(newEndTime, 'endTime')}
         />
       </FormGroup>
 
       <Row>
-        <Button data-testid="update-button" onClick={handleUpdate}>
+        <Button
+          disabled={
+            startDate.isSameOrAfter(endDate) || startDate.isSame(endDate)
+          }
+          data-testid="update-button"
+          onClick={handleUpdate}
+        >
           {_('Update')}
         </Button>
       </Row>

diff --git a/src/web/pages/schedules/dialog.jsx b/src/web/pages/schedules/dialog.jsx
@@ -32,6 +32,7 @@ import Spinner from 'web/components/form/spinner';
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 import DatePicker from 'web/components/form/DatePicker';
+import {TimePicker} from '@greenbone/opensight-ui-components';
 
 import TimeZoneSelect from 'web/components/form/timezoneselect';
 import CheckBox from 'web/components/form/checkbox';
@@ -82,14 +83,26 @@ const ScheduleDialog = ({
   onSave,
 }) => {
   const [_] = useTranslation();
-  const [timezone, setTimezone] = useState(initialTimezone);
+
+  const [startDate, setStartDate] = useState(initialStartDate);
+
+  const [startTime, setStartTime] = useState(
+    `${startDate.hours().toString().padStart(2, '0')}:${startDate.minutes().toString().padStart(2, '0')}`,
+  );
+
+  const [endOpen, setEndOpen] = useState(!isDefined(duration));
   const [endDate, setEndDate] = useState(
     isDefined(duration)
       ? initialStartDate.clone().add(duration)
       : initialStartDate.clone().add(1, 'hour'),
   );
-  const [startDate, setStartDate] = useState(initialStartDate);
-  const [endOpen, setEndOpen] = useState(!isDefined(duration));
+
+  const [endTime, setEndTime] = useState(
+    `${endDate.hours().toString().padStart(2, '0')}:${endDate.minutes().toString().padStart(2, '0')}`,
+  );
+
+  const [timezone, setTimezone] = useState(initialTimezone);
+
   const [freq, setFreq] = useState(
     isDefined(initialFrequency) ? initialFrequency : ReccurenceFrequency.WEEKLY,
   );
@@ -214,6 +227,20 @@ const ScheduleDialog = ({
     setTimezone(value);
   };
 
+  const handleTimeChange = (selectedTime, type) => {
+    const [hour, minute] = selectedTime.split(':').map(Number);
+
+    if (type === 'startTime') {
+      const newStartDate = startDate.clone().hours(hour).minutes(minute);
+      setStartDate(newStartDate);
+      setStartTime(selectedTime);
+    } else if (type === 'endTime') {
+      const newEndDate = endDate.clone().hours(hour).minutes(minute);
+      setEndDate(newEndDate);
+      setEndTime(selectedTime);
+    }
+  };
+
   const handleSave = ({
     comment,
     endDate,
@@ -307,7 +334,6 @@ const ScheduleDialog = ({
         // when name is just numbers.
         summary: `${name}`,
         startDate,
-        isUseUTC: false,
       },
       timezone,
     );
@@ -367,6 +393,21 @@ const ScheduleDialog = ({
               onChange={onValueChange}
             />
           </FormGroup>
+          <DatePicker
+            timezone={timezone}
+            name="startDate"
+            value={startDate}
+            onChange={setStartDate}
+            label={_('Start Date')}
+          />
+          <TimePicker
+            label={_('Start Time')}
+            name="startDate"
+            value={startTime}
+            onChange={newStartTime =>
+              handleTimeChange(newStartTime, 'startTime')
+            }
+          />
 
           <FormGroup title={_('Timezone')}>
             <TimeZoneSelect
@@ -376,15 +417,6 @@ const ScheduleDialog = ({
             />
           </FormGroup>
 
-          <Row>
-            <DatePicker
-              timezone={timezone}
-              name="startDate"
-              value={startDate}
-              onChange={setStartDate}
-              label={_('First Run')}
-            />
-          </Row>
           <Button title={_('Now')} onClick={handleNowButtonClick} />
 
           <FormGroup title={_('Run Until')}>
@@ -394,15 +426,22 @@ const ScheduleDialog = ({
               checked={state.endOpen}
               onChange={setEndOpen}
             />
-            <Row>
-              <DatePicker
-                disabled={state.endOpen}
-                name="endDate"
-                value={state.endDate}
-                onChange={setEndDate}
-                label={_('End Run')}
-              />
-            </Row>
+
+            <DatePicker
+              disabled={state.endOpen}
+              name="endDate"
+              value={state.endDate}
+              onChange={setEndDate}
+              label={_('End Date')}
+            />
+
+            <TimePicker
+              disabled={state.endOpen}
+              label={_('End Time')}
+              name="endTime"
+              value={endTime}
+              onChange={newEndTime => handleTimeChange(newEndTime, 'endTime')}
+            />
           </FormGroup>
 
           <FormGroup title={_('Duration')}>

diff --git a/src/web/utils/formatSplitTime.js b/src/web/utils/formatSplitTime.js
@@ -0,0 +1,5 @@
+export const formatSplitTime = (start_hour, start_minute) => {
+  const formattedStartHour = start_hour.toString().padStart(2, '0');
+  const formattedStartMinute = start_minute.toString().padStart(2, '0');
+  return `${formattedStartHour}:${formattedStartMinute}`;
+};
diff --git a/src/web/wizard/advancedtaskwizard.jsx b/src/web/wizard/advancedtaskwizard.jsx
@@ -36,6 +36,8 @@ import TextField from 'web/components/form/textfield';
 import Radio from 'web/components/form/radio';
 import DatePicker from 'web/components/form/DatePicker';
 import TimeZoneSelect from 'web/components/form/timezoneselect';
+import {TimePicker} from '@greenbone/opensight-ui-components';
+import {formatSplitTime} from 'web/utils/formatSplitTime';
 
 import Layout from 'web/components/layout/layout';
 import Column from 'web/components/layout/column';
@@ -78,7 +80,10 @@ const AdvancedTaskWizard = ({
   const [_] = useTranslation();
   const capabilities = useCapabilities();
   const configItems = renderSelectItems(scan_configs);
-  const [datePickerValue, setDatePickerValue] = useState(start_date);
+
+  const [timePickerValue, setTimePickerValue] = useState(
+    formatSplitTime(start_hour, start_minute),
+  );
   const sshCredentialItems = renderSelectItems(
     credentials.filter(ssh_credential_filter),
     '',
@@ -111,18 +116,11 @@ const AdvancedTaskWizard = ({
     ...DEFAULTS,
   };
 
-  const handleDateChange = (selectedDate, onValueChange) => {
-    const properties = [
-      {name: 'start_date', value: selectedDate},
-      {name: 'start_hour', value: selectedDate.hours()},
-      {name: 'start_minute', value: selectedDate.minutes()},
-    ];
-
-    properties.forEach(({name, value}) => {
-      onValueChange(value, name);
-    });
-
-    setDatePickerValue(selectedDate);
+  const handleTimeChange = (selectedValue, onValueChange) => {
+    const [start_hour, start_minute] = selectedValue.split(':');
+    setTimePickerValue(selectedValue);
+    onValueChange(parseInt(start_hour), 'start_hour');
+    onValueChange(parseInt(start_minute), 'start_minute');
   };
 
   return (
@@ -249,15 +247,21 @@ const AdvancedTaskWizard = ({
                         />
                         <DatePicker
                           name={'start_date'}
-                          value={datePickerValue}
-                          onChange={selectedDate =>
-                            handleDateChange(selectedDate, onValueChange)
-                          }
+                          value={state.start_date}
+                          onChange={onValueChange}
                           label={_('Start Date')}
                         />
+                        <TimePicker
+                          name="startTime"
+                          label={_('Start Time')}
+                          value={timePickerValue}
+                          onChange={selectedTime =>
+                            handleTimeChange(selectedTime, onValueChange)
+                          }
+                        />
                       </Column>
                       <TimeZoneSelect
-                        name="start_timezone"
+                        label={_('Timezone')}
                         value={state.start_timezone}
                         onChange={onValueChange}
                       />