allow creation of events without start/end time

STT-40

client/components/Events/EventDateTime.tsx

@@ -82,6 +82,7 @@ export class EventDateTime extends React.PureComponent<IProps> {
                             date={start}
                             {...commonProps}
                             withTime={false}
+                            testId="event-start-date"
                         />
                     )}
                     {gettext('All day')}
@@ -95,9 +96,11 @@ export class EventDateTime extends React.PureComponent<IProps> {
                     </span>
                 )}
                 <DateTime
+                    withTime={!isFullDay}
                     withDate={showEventStartDate}
                     withYear={withYear}
                     date={start}
+                    testId="event-start-date"
                     {...commonProps}
                 />
                 {showDash && <>&ndash;</>}
@@ -106,6 +109,7 @@ export class EventDateTime extends React.PureComponent<IProps> {
                     withYear={withYear}
                     isEndEventDateTime={true}
                     date={end}
+                    testId="event-end-date"
                     {...commonProps}
                 />
                 {isRemoteTimeZone && (

client/components/Events/EventDateTimeColumn.tsx

@@ -52,6 +52,7 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                 withYear={!isThisYear}
                                 withTime={false}
                                 date={start}
+                                testId="event-start-date"
                                 {...commonProps}
                             />
                             {!multiDay ? null : (
@@ -62,13 +63,14 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                         withYear={!isThisYear}
                                         withTime={false}
                                         date={end}
+                                        testId="event-end-date"
                                         {...commonProps}
                                     />
                                 </React.Fragment>
                             )}
                             {!isRemoteTimeZone ? null : (
                                 <span className="sd-margin-l--0-5">(
-                                    <span className="EventDateTime__timezone">
+                                    <span className="EventDateTime__timezone" data-test-id="event-timezone">
                                         {tzCode}
                                     </span>
                                 )</span>
@@ -85,13 +87,15 @@ export class EventDateTimeColumn extends React.PureComponent<IProps> {
                                         withDate={false}
                                         withYear={false}
                                         date={start}
+                                        testId="event-start-date"
                                         {...commonProps}
                                     />
                                     &ndash;
                                     <DateTime
                                         withDate={false}
                                         withYear={false}
                                         date={end}
+                                        testId="event-end-date"
                                         {...commonProps}
                                     />
                                 </React.Fragment>

client/components/Events/EventEditor/index.tsx

@@ -121,6 +121,8 @@ class EventEditorComponent extends React.PureComponent<IProps> {
             start: value['dates.start'],
             end: value['dates.end'],
             tz: value['dates.tz'],
+            all_day: value['dates.all_day'],
+            no_end_time: value['dates.no_end_time'],
         });
 
         this.props.onChangeHandler(value);

client/components/UI/DateTime.tsx

@@ -19,6 +19,7 @@ interface IPropsDateTime {
     isEndEventDateTime?: boolean,
     noEndTime?: boolean,
     multiDay?: boolean,
+    testId?: string,
 }
 
 /**
@@ -37,6 +38,7 @@ function DateTime({
     isEndEventDateTime,
     noEndTime,
     multiDay,
+    testId,
 }: IPropsDateTime) {
     const {gettext} = superdeskApi.localization;
     const dateFormat = appConfig.planning.dateformat;
@@ -78,7 +80,7 @@ function DateTime({
     const tz = timeUtils.getTimeZoneAbbreviation(date.format('z')) + ' ';
 
     return (
-        <time className={!padLeft ? 'Datetime' : null} title={tz + displayDate}>
+        <time className={!padLeft ? 'Datetime' : null} title={tz + displayDate} data-test-id={testId}>
             {displayDate}
         </time>
     );

client/components/UI/Form/DateInput/DateInputPopup.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment-timezone';
 import {Popup, Content, Header, Footer} from '../../Popup';
 import {Button} from '../../';
@@ -11,14 +10,35 @@ import {gettext} from '../../utils';
 
 import './style.scss';
 
+interface IProps {
+    value?: string | moment.Moment;
+    onChange(value: moment.Moment): void;
+    close(): void;
+    target: string;
+    maxMode?: string;
+    yearRange?: number;
+    popupContainer(): HTMLElement;
+    onPopupOpen?(): void;
+    onPopupClose?(): void;
+    remoteTimeZone?: string;
+}
+
+interface IState {
+    mode: 'day' | 'month' | 'year';
+    modeTitle: string;
+    currentDate: moment.Moment;
+    selectedDate: moment.Moment;
+}
+
 /**
  * @ngdoc react
  * @name DateInputPopup
  * @description Main Popup Component of DatePicker
  */
-export class DateInputPopup extends React.Component {
+export class DateInputPopup extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
+
         const currentDate = props.remoteTimeZone ?
             moment.tz(props.remoteTimeZone) :
             moment();
@@ -27,7 +47,7 @@ export class DateInputPopup extends React.Component {
             mode: 'day',
             modeTitle: this.getModeTitle(currentDate, 'day'),
             currentDate: currentDate,
-            selectedDate: currentDate,
+            selectedDate: currentDate.clone(),
         };
 
         this.handleModeChange = this.handleModeChange.bind(this);
@@ -148,7 +168,7 @@ export class DateInputPopup extends React.Component {
     * @description handleSelectChange changes mode from days-months-year
     */
     handleSelectChange(newDate) {
-        let nextMode = '';
+        let nextMode;
 
         switch (this.state.mode) {
         case 'month':
@@ -253,20 +273,4 @@ export class DateInputPopup extends React.Component {
             </Popup>
         );
     }
-}
-
-DateInputPopup.propTypes = {
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.instanceOf(moment),
-    ]),
-    onChange: PropTypes.func.isRequired,
-    close: PropTypes.func.isRequired,
-    target: PropTypes.string.isRequired,
-    maxMode: PropTypes.string,
-    yearRange: PropTypes.number,
-    popupContainer: PropTypes.func,
-    onPopupOpen: PropTypes.func,
-    onPopupClose: PropTypes.func,
-    remoteTimeZone: PropTypes.string,
-};
+}

client/components/UI/Form/DateInput/index.tsx

@@ -31,6 +31,7 @@ interface IProps {
     remoteTimeZone?: string;
     isLocalTimeZoneDifferent?: boolean;
     inputAsLabel?: boolean;
+    dateOnly?: boolean;
 
     onChange(field: string, value: moment.Moment): void;
     popupContainer(): HTMLElement;
@@ -63,14 +64,14 @@ export class DateInput extends React.Component<IProps, IState> {
             viewValue: this.props.value != null && moment.isMoment(this.props.value) ?
                 this.props.value.format(appConfig.planning.dateformat) :
                 '',
-            previousValidValue: null,
+            previousValidValue: undefined,
         };
         this.dom = {inputField: null};
 
-        this.validateDateText = this.validateDateText.bind(this);
+        this.onInputChange = this.onInputChange.bind(this);
         this.handleInputBlur = this.handleInputBlur.bind(this);
         this.toggleOpenDatePicker = this.toggleOpenDatePicker.bind(this);
-        this.onChange = this.onChange.bind(this);
+        this.onPopupChange = this.onPopupChange.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -104,22 +105,18 @@ export class DateInput extends React.Component<IProps, IState> {
     }
 
     /**
-    * @ngdoc method
-    * @name DateInput#validateDateText
-    * @description validateDateText sets validate-state after text-input of dates
+    * sets validate-state after text-input of dates
     */
-    validateDateText(field, val) {
-        const valMoment = this.props.remoteTimeZone ?
-            moment.tz(val, appConfig.planning.dateformat, true, this.props.remoteTimeZone) :
-            moment(val, appConfig.planning.dateformat, true);
+    onInputChange(field, val) {
+        const valMoment = moment(val, appConfig.planning.dateformat, true);
 
         if (valMoment.isValid()) {
             this.setState({
                 invalid: false,
                 viewValue: valMoment.format(appConfig.planning.dateformat),
                 previousValidValue: valMoment,
             });
-            this.onChange(valMoment);
+            this.onPopupChange(valMoment);
         } else {
             this.setState({
                 invalid: true,
@@ -146,15 +143,17 @@ export class DateInput extends React.Component<IProps, IState> {
         }
     }
 
-    onChange(newValue) {
+    onPopupChange(newValue: moment.Moment) {
         const {value, onChange, field, remoteTimeZone} = this.props;
-        let newMoment = newValue;
+        const newMoment = remoteTimeZone ? moment.tz(newValue, remoteTimeZone) : moment(newValue);
 
-        if (!moment.isMoment(newMoment)) {
-            newMoment = moment.tz(newValue, remoteTimeZone);
-        }
+        this.setState({
+            invalid: false,
+            viewValue: newMoment.format(appConfig.planning.dateformat),
+            previousValidValue: newMoment,
+        });
 
-        if (newMoment.isValid() && (!newMoment.isSame(value) || !value)) {
+        if (newMoment.isValid() && (value == null || !newMoment.isSame(value))) {
             onChange(field, newMoment);
         }
     }
@@ -178,9 +177,10 @@ export class DateInput extends React.Component<IProps, IState> {
         } = this.props;
 
         let {message, invalid} = this.props;
-        const eventTimeZoneString = timeUtils.getDateInRemoteTimeZone(value, remoteTimeZone).format('z');
         let displayDateString;
 
+        const eventTimeZoneString = value ? timeUtils.getDateInRemoteTimeZone(value, remoteTimeZone).format('z') : null;
+
         if (moment.isMoment(value) && isLocalTimeZoneDifferent) {
             const displayDate = timeUtils.getDateInRemoteTimeZone(value, timeUtils.localTimeZone());
 
@@ -217,7 +217,7 @@ export class DateInput extends React.Component<IProps, IState> {
                         field={field}
                         value={this.state.viewValue}
                         placeholder={placeholder || gettext('Date')}
-                        onChange={this.validateDateText}
+                        onChange={this.onInputChange}
                         onFocus={onFocus}
                         onBlur={this.handleInputBlur}
                         type="text"
@@ -241,7 +241,7 @@ export class DateInput extends React.Component<IProps, IState> {
                 {this.state.openDatePicker && (
                     <DateInputPopup
                         value={value}
-                        onChange={this.onChange}
+                        onChange={this.onPopupChange}
                         close={this.toggleOpenDatePicker}
                         target="icon-calendar"
                         popupContainer={popupContainer}