From 4909af2c270e3ef374f8a6b69f68cce90af6e0f4 Mon Sep 17 00:00:00 2001
From: Petr Jasek <jasekpetr@gmail.com>
Date: Fri, 15 Nov 2024 19:59:35 +0100
Subject: [PATCH] save

---
 .../UI/Form/DateTimeInput/index.tsx           |  1 +
 .../UI/Form/TimeInput/TimeInputPopup.tsx      | 77 ++++++++++++-------
 client/components/UI/Form/TimeInput/index.tsx |  6 +-
 .../components/fields/editor/EndDateTime.tsx  |  1 +
 .../fields/editor/EventSchedule.tsx           | 45 ++++++-----
 .../fields/editor/StartDateTime.tsx           |  1 +
 .../fields/editor/base/dateTime.tsx           |  5 +-
 client/validators/events.ts                   | 21 ++---
 client/validators/index.ts                    |  4 +-
 9 files changed, 98 insertions(+), 63 deletions(-)

diff --git a/client/components/UI/Form/DateTimeInput/index.tsx b/client/components/UI/Form/DateTimeInput/index.tsx
index 48243929a..df0d94970 100644
--- a/client/components/UI/Form/DateTimeInput/index.tsx
+++ b/client/components/UI/Form/DateTimeInput/index.tsx
@@ -102,6 +102,7 @@ export const DateTimeInput = ({
                 showToBeConfirmed={showToBeConfirmed}
                 onToBeConfirmed={onToBeConfirmed}
                 toBeConfirmed={toBeConfirmed}
+                required={false}
             />
         )}
         {canClear && (
diff --git a/client/components/UI/Form/TimeInput/TimeInputPopup.tsx b/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
index a8b52bd0b..48ad2ea2c 100644
--- a/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
+++ b/client/components/UI/Form/TimeInput/TimeInputPopup.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
 import {range} from 'lodash';
 
@@ -10,12 +9,34 @@ import {Button} from '../../';
 
 import './style.scss';
 
+interface IProps {
+    value: any;
+    onChange(value: string): void;
+    close(): void;
+    target: string;
+    popupContainer(): void;
+    onPopupOpen(): void;
+    onPopupClose(): void;
+    showToBeConfirmed: boolean;
+    onToBeConfirmed(): void;
+    toBeConfirmedText: string;
+}
+
+interface IState {
+    currentTime: moment.Moment;
+    selectedHourIndex: number;
+    selectedMinuteIndex: number;
+}
+
 /**
  * @ngdoc react
  * @name TimeInputPopup
  * @description Main Popup Component of TimePicker
  */
-export class TimeInputPopup extends React.Component {
+export class TimeInputPopup extends React.Component<IProps, IState> {
+    hours = range(0, 24);
+    minutes = range(0, 60, 5);
+
     constructor(props) {
         super(props);
         this.state = {
@@ -23,9 +44,6 @@ export class TimeInputPopup extends React.Component {
             selectedMinuteIndex: 0,
             currentTime: moment(),
         };
-
-        this.hours = range(0, 24);
-        this.minutes = range(0, 60, 5);
     }
 
     componentWillMount() {
@@ -64,7 +82,7 @@ export class TimeInputPopup extends React.Component {
         const {onChange, close} = this.props;
 
         if (addMinutes) {
-            let newTime = moment.clone(this.state.currentTime);
+            let newTime = moment(this.state.currentTime);
 
             newTime.add(addMinutes, 'm');
             onChange(newTime.format('HH:mm'));
@@ -77,6 +95,13 @@ export class TimeInputPopup extends React.Component {
         close();
     }
 
+    handleClear() {
+        const {onChange, close} = this.props;
+
+        onChange(null);
+        close();
+    }
+
     render() {
         return (
             <Popup
@@ -89,23 +114,22 @@ export class TimeInputPopup extends React.Component {
                 onPopupClose={this.props.onPopupClose}
             >
                 <Header noBorder={true}>
-                    {!this.props.showToBeConfirmed && (
+                    {!this.props.showToBeConfirmed ? (
                         <div className="time-popup__header-row">
                             <Button
-                                onClick={this.handleConfirm.bind(this, 30)}
+                                onClick={() => this.handleConfirm(30)}
                                 text={gettext('in 30 min')}
                             />
                             <Button
-                                onClick={this.handleConfirm.bind(this, 60)}
+                                onClick={() => this.handleConfirm(60)}
                                 text={gettext('in 1 hr')}
                             />
                             <Button
-                                onClick={this.handleConfirm.bind(this, 120)}
+                                onClick={() => this.handleConfirm(120)}
                                 text={gettext('in 2 hrs')}
                             />
                         </div>
-                    )}
-                    {this.props.showToBeConfirmed && (
+                    ) : (
                         <div className="time-popup__header-row">
                             <Button
                                 onClick={() => {
@@ -126,7 +150,7 @@ export class TimeInputPopup extends React.Component {
                                 <li
                                     key={index}
                                     className={index === this.state.selectedHourIndex ? 'active' : ''}
-                                    onClick={this.setselectedHourIndex.bind(this, index)}
+                                    onClick={() => this.setselectedHourIndex(index)}
                                 >
                                     {hour < 10 ? '0' + hour : hour}
                                 </li>
@@ -140,7 +164,7 @@ export class TimeInputPopup extends React.Component {
                                 <li
                                     key={index}
                                     className={index === this.state.selectedMinuteIndex ? 'active' : ''}
-                                    onClick={this.setselectedMinuteIndex.bind(this, index)}
+                                    onClick={() => this.setselectedMinuteIndex(index)}
                                 >
                                     {minute < 10 ? '0' + minute : minute}
                                 </li>
@@ -150,12 +174,19 @@ export class TimeInputPopup extends React.Component {
                 </Content>
 
                 <Footer className="time-popup__footer">
+                    <Button
+                        text={gettext('Clear')}
+                        hollow
+                        size="small"
+                        pullRight
+                        onClick={() => this.handleClear()}
+                    />
                     <Button
                         text={gettext('Confirm')}
                         color="primary"
                         size="small"
                         pullRight={true}
-                        onClick={this.handleConfirm.bind(this, 0)}
+                        onClick={() => this.handleConfirm(0)}
                     />
                     <Button
                         text={gettext('Cancel')}
@@ -163,21 +194,9 @@ export class TimeInputPopup extends React.Component {
                         pullRight={true}
                         onClick={this.props.close}
                     />
+                    
                 </Footer>
             </Popup>
         );
     }
-}
-
-TimeInputPopup.propTypes = {
-    value: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    close: PropTypes.func.isRequired,
-    target: PropTypes.string.isRequired,
-    popupContainer: PropTypes.func,
-    onPopupOpen: PropTypes.func,
-    onPopupClose: PropTypes.func,
-    showToBeConfirmed: PropTypes.bool,
-    onToBeConfirmed: PropTypes.func,
-    toBeConfirmedText: PropTypes.string,
-};
+}
\ No newline at end of file
diff --git a/client/components/UI/Form/TimeInput/index.tsx b/client/components/UI/Form/TimeInput/index.tsx
index 7a3e72af7..301950cf9 100644
--- a/client/components/UI/Form/TimeInput/index.tsx
+++ b/client/components/UI/Form/TimeInput/index.tsx
@@ -21,6 +21,10 @@ import './style.scss';
  * @description Component to pick time in hours and minutes
  */
 export class TimeInput extends React.Component {
+    dom: {
+        inputField: HTMLInputElement;
+    };
+
     constructor(props) {
         super(props);
         this.state = {
@@ -90,7 +94,7 @@ export class TimeInput extends React.Component {
     }
 
     isValidInput(val) {
-        return moment(val, appConfig.planning.timeformat, true)
+        return val == null || moment(val, appConfig.planning.timeformat, true)
             .isValid();
     }
 
diff --git a/client/components/fields/editor/EndDateTime.tsx b/client/components/fields/editor/EndDateTime.tsx
index f498a5cc6..5e5f06288 100644
--- a/client/components/fields/editor/EndDateTime.tsx
+++ b/client/components/fields/editor/EndDateTime.tsx
@@ -12,6 +12,7 @@ interface IProps extends IEditorFieldProps {
     isLocalTimeZoneDifferent?: boolean;
     remoteTimeZone?: string;
     onToBeConfirmed?(field: string): void;
+    isUTC?: boolean;
 }
 
 export class EditorFieldEndDateTime extends React.PureComponent<IProps> {
diff --git a/client/components/fields/editor/EventSchedule.tsx b/client/components/fields/editor/EventSchedule.tsx
index 371d5d543..7cb78490c 100644
--- a/client/components/fields/editor/EventSchedule.tsx
+++ b/client/components/fields/editor/EventSchedule.tsx
@@ -51,33 +51,49 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
             null;
         const changes = {'dates.start': value};
 
+        console.info("VALUE", value, startDate);
+
         if (!startDate) {
             value
                 .hour(0)
-                .minute(0);
+                .minute(0)
+                .second()
         } else {
             value
                 .hour(startDate.hour())
                 .minute(startDate.minute());
         }
 
+        if (this.props.item.dates.all_day == null) {
+            changes['dates.all_day'] = true;
+            //changes['dates.start'] = moment(value); // avoid conversion from local
+        }
+
         if (endDate == null || endDate.isBefore(value)) {
             // If we have an end date set, and the end date is before the new start date
             // then set the end date to be the same as this new start date
             changes['dates.end'] = (endDate || value).clone().add(value.diff(startDate));
         }
 
+        console.info("CHANGES", changes);
+
         this.props.onChange(changes, null);
     }
 
     changeStartTime(value?: moment.Moment) {
+        const startDate = this.props.item?.dates?.start;
+        const endDate = this.props.item?.dates?.end;
+
         if (!value) {
-            this.props.onChange('_startTime', null);
+            const changes = {
+                '_startTime': null,
+                'dates.start': startDate ? moment.utc(startDate).hour(0).minute(0).second(0) : null,
+                'dates.all_day': true,
+            };
+            this.props.onChange(changes, null);
             return;
         }
 
-        const startDate = this.props.item?.dates?.start;
-        const endDate = this.props.item?.dates?.end;
         const _startTime = this.props.item?._startTime;
         const defaultDurationOnChange = this.props.profile?.editor?.dates?.default_duration_on_change ?? 1;
         const isAllDay = eventUtils.isEventAllDay(startDate, endDate, true);
@@ -89,7 +105,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                 .minute(value.minute())
                 .second(value.second());
 
-        const changes = {'dates.start': newStartDate};
+        const changes = {'dates.start': newStartDate, 'dates.all_day': false};
 
         if (((_startTime && isAllDay) || !_startTime) &&
             defaultDurationOnChange > 0 &&
@@ -216,11 +232,6 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         const field = this.props.field ?? 'dates';
         const value = this.props.item?.dates ?? this.props.defaultValue ?? {};
         const eventRepeats = value?.recurring_rule != null;
-        const isAllDay = eventUtils.isEventAllDay(
-            this.props.item.dates?.start,
-            this.props.item.dates?.end,
-            true
-        );
         const isLocalTimeZoneDifferent = timeUtils.isEventInDifferentTimeZone(this.props.item);
         const {
             refNode,
@@ -247,6 +258,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                     toBeConfirmed={this.props.item[TO_BE_CONFIRMED_FIELD] === true}
                     isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
                     remoteTimeZone={this.props.item.dates?.tz}
+                    isUTC={this.props.item.dates?.all_day}
                 />
                 <EditorFieldEndDateTime
                     {...props}
@@ -265,22 +277,13 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
                     toBeConfirmed={this.props.item[TO_BE_CONFIRMED_FIELD] === true}
                     isLocalTimeZoneDifferent={isLocalTimeZoneDifferent}
                     remoteTimeZone={this.props.item.dates?.tz}
+                    isUTC={this.props.item.dates?.no_end_time || this.props.item.dates?.all_day}
                 />
                 <Row
                     flex={true}
                     noPadding={true}
                 >
-                    {!this.props.showAllDay ? null : (
-                        <div data-test-id={`${this.props.testId}_all_day`}>
-                            <Switch
-                                label={{content: gettext('All Day')}}
-                                value={isAllDay}
-                                onChange={this.onAllDayChange}
-                            />
-                        </div>
-                    )}
-
-                    {!this.props.showTimeZone ? null : (
+                    {this.props.showTimeZone && this.props.item._startTime && (
                         <TimeZoneInput
                             testId={`${this.props.testId}_timezone`}
                             field="dates.tz"
diff --git a/client/components/fields/editor/StartDateTime.tsx b/client/components/fields/editor/StartDateTime.tsx
index 94207e156..61e41a015 100644
--- a/client/components/fields/editor/StartDateTime.tsx
+++ b/client/components/fields/editor/StartDateTime.tsx
@@ -12,6 +12,7 @@ interface IProps extends IEditorFieldProps {
     isLocalTimeZoneDifferent?: boolean;
     remoteTimeZone?: string;
     onToBeConfirmed?(field: string): void;
+    isUTC?: boolean;
 }
 
 export class EditorFieldStartDateTime extends React.PureComponent<IProps> {
diff --git a/client/components/fields/editor/base/dateTime.tsx b/client/components/fields/editor/base/dateTime.tsx
index 2dab13dde..f6d3ab114 100644
--- a/client/components/fields/editor/base/dateTime.tsx
+++ b/client/components/fields/editor/base/dateTime.tsx
@@ -13,6 +13,7 @@ interface IProps extends IEditorFieldProps {
     remoteTimeZone?: string;
     singleValue?: boolean;
     onToBeConfirmed?(field: string): void;
+    isUTC?: boolean;
 }
 
 export class EditorFieldDateTime extends React.PureComponent<IProps> {
@@ -44,10 +45,12 @@ export class EditorFieldDateTime extends React.PureComponent<IProps> {
         const field = this.props.field;
         const value = get(this.props.item, field, this.props.defaultValue);
         const momentValue = value != null ?
-            moment(value) :
+            (this.props.isUTC ? moment.utc(value) : moment(value)) :
             null;
         const error = get(this.props.errors ?? {}, field);
 
+        console.info("WAT", value, momentValue, this.props.isUTC);
+
         return (
             <DateTimeInput
                 {...this.props}
diff --git a/client/validators/events.ts b/client/validators/events.ts
index 2d8caf0c4..27c9d2bde 100644
--- a/client/validators/events.ts
+++ b/client/validators/events.ts
@@ -26,12 +26,13 @@ const validateRequiredDates = ({value, errors, messages, diff}) => {
     }
 
     if (!get(diff, TO_BE_CONFIRMED_FIELD)) {
-        if (!get(value, '_startTime')) {
+        if (!value._startTime && value.all_day !== true) {
             set(errors, '_startTime', gettext('This field is required'));
+            console.info("IN", value, diff);
             messages.push(gettext('START TIME is a required field'));
         }
 
-        if (!get(value, '_endTime')) {
+        if (!value._endTime && value.all_day !== true && value.no_end_time !== true) {
             set(errors, '_endTime', gettext('This field is required'));
             messages.push(gettext('END TIME is a required field'));
         }
@@ -42,11 +43,11 @@ const validateDateRange = ({value, errors, messages}) => {
     let startDate = moment(value.start);
     let endDate = moment(value.end);
 
-    if (!self.valdiateStartEndDateValues(value, startDate, endDate)) {
+    if (!self.validateStartEndDateValues(value, startDate, endDate)) {
         return;
     }
 
-    if (endDate.isSameOrBefore(startDate, 'minutes')) {
+    if (endDate.isSameOrBefore(startDate, 'minutes') && !value.all_day && !value.no_end_time) {
         if (isSameDay(value.start, value.end)) {
             set(errors, '_endTime', gettext('End time should be after start time'));
             messages.push(gettext('END TIME should be after START TIME'));
@@ -136,7 +137,7 @@ const validateMultiDayDuration = ({value, errors, messages}) => {
     let startDate = moment(value.start);
     let endDate = moment(value.end);
 
-    if (!self.valdiateStartEndDateValues(value, startDate, endDate)) {
+    if (!self.validateStartEndDateValues(value, startDate, endDate)) {
         return;
     }
 
@@ -292,10 +293,12 @@ const validateLinks = ({dispatch, getState, field, value, profile, errors, messa
     }
 };
 
-const valdiateStartEndDateValues = (value, startDate, endDate) => {
+const validStartTime = (value) => value.all_day || (value._startTime && moment.isMoment(value._startTime));
+const validEndTime = (value) => value.all_day || value.no_end_time || (value._endTime && moment.isMoment(value._endTime));
+
+const validateStartEndDateValues = (value, startDate, endDate) => {
     if (!get(value, 'start') || !get(value, 'end') || !moment.isMoment(value.start) || !moment.isMoment(value.end) ||
-        !get(value, '_startTime') || !get(value, '_endTime') || !moment.isMoment(value._startTime) ||
-        !moment.isMoment(value._endTime)) {
+        !validStartTime(value) || !validEndTime(value)) { 
         return false;
     }
 
@@ -320,7 +323,7 @@ const self = {
     validateFiles,
     validateLinks,
     validateMultiDayDuration,
-    valdiateStartEndDateValues,
+    validateStartEndDateValues,
 };
 
 export default self;
diff --git a/client/validators/index.ts b/client/validators/index.ts
index 0d77b7797..8f05df611 100644
--- a/client/validators/index.ts
+++ b/client/validators/index.ts
@@ -58,8 +58,8 @@ export const validateItem = ({
         const getValue = (key) => (
             key !== 'dates' ? get(diff, key) : {
                 ...get(diff, key),
-                _startTime: get(diff, '_startTime'),
-                _endTime: get(diff, '_endTime'),
+                _startTime: diff._startTime,
+                _endTime: diff._endTime,
             }
         );