save

petrjasek · Nov 15, 2024 · 4909af2 · 4909af2
1 parent c32497e
commit 4909af2
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 63 deletions.
diff --git 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
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
 import {range} from 'lodash';
 
@@ -10,22 +9,41 @@ 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 = {
             selectedHourIndex: 0,
             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,34 +174,29 @@ 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')}
                         size="small"
                         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,
-};
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}