reset button on date pickers #2316

enonic · Dec 29, 2021 · c948a93 · c948a93
1 parent 30f0b26
commit c948a93
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 10 deletions.
diff --git a/src/main/resources/assets/admin/common/js/form/inputtype/time/Date.ts b/src/main/resources/assets/admin/common/js/form/inputtype/time/Date.ts
@@ -12,13 +12,18 @@ import {Class} from '../../../Class';
 import {ValueTypeConverter} from '../../../data/ValueTypeConverter';
 import {AdditionalValidationRecord} from '../../AdditionalValidationRecord';
 import {i18n} from '../../../util/Messages';
+import {InputTypeViewContext} from '../InputTypeViewContext';
 
 /**
  * Uses [[ValueType]] [[ValueTypeLocalDate]].
  */
 export class Date
     extends BaseInputTypeNotManagingAdd {
 
+    getDefaultDate(): globalThis.Date {
+        return this.getContext().input.getDefaultValue()?.getDateTime().toDate();
+    }
+
     getValueType(): ValueType {
         return ValueTypes.LOCAL_DATE;
     }
@@ -29,6 +34,7 @@ export class Date
         }
 
         const datePickerBuilder: DatePickerBuilder = new DatePickerBuilder();
+        datePickerBuilder.setDefaultDate(this.getDefaultDate());
 
         if (!property.hasNullValue()) {
             const date: LocalDate = property.getLocalDate();

diff --git a/src/main/resources/assets/admin/common/js/form/inputtype/time/DateTime.ts b/src/main/resources/assets/admin/common/js/form/inputtype/time/DateTime.ts
@@ -26,9 +26,14 @@ export class DateTime
 
     constructor(config: InputTypeViewContext) {
         super(config);
+
         this.readConfig(config.inputConfig);
     }
 
+    getDefaultDate(): Date {
+        return this.getContext().input.getDefaultValue()?.getDateTime()?.toDate();
+    }
+
     getValueType(): ValueType {
         return this.valueType;
     }
@@ -91,6 +96,7 @@ export class DateTime
 
     private createInputAsLocalDateTime(property: Property) {
         const dateTimeBuilder: DateTimePickerBuilder = new DateTimePickerBuilder();
+        dateTimeBuilder.setDefaultDate(this.getDefaultDate());
 
         if (!ValueTypes.LOCAL_DATE_TIME.equals(property.getType())) {
             ValueTypeConverter.convertPropertyValueType(property, ValueTypes.LOCAL_DATE_TIME);
@@ -119,6 +125,7 @@ export class DateTime
     private createInputAsDateTime(property: Property) {
         const dateTimeBuilder: DateTimePickerBuilder = new DateTimePickerBuilder();
         dateTimeBuilder.setUseLocalTimezoneIfNotPresent(true);
+        dateTimeBuilder.setDefaultDate(this.getDefaultDate());
 
         if (!ValueTypes.DATE_TIME.equals(property.getType())) {
             ValueTypeConverter.convertPropertyValueType(property, ValueTypes.DATE_TIME);
@@ -129,7 +136,7 @@ export class DateTime
             dateTimeBuilder.setDate(date.toDate()).setTimezone(date.getTimezone());
         }
 
-        const dateTimePicker: DateTimePicker = new DateTimePicker(dateTimeBuilder);
+        const dateTimePicker: DateTimePicker = dateTimeBuilder.build();
 
         dateTimePicker.onSelectedDateTimeChanged((event: SelectedDateChangedEvent) => {
             this.handleOccurrenceInputValueChanged(dateTimePicker, event);

diff --git a/src/main/resources/assets/admin/common/js/ui/time/DatePicker.ts b/src/main/resources/assets/admin/common/js/ui/time/DatePicker.ts
@@ -14,10 +14,17 @@ export class DatePickerBuilder {
 
     date: Date;
 
+    defaultDate: Date;
+
     startingDayOfWeek: DayOfWeek = DaysOfWeek.MONDAY;
 
     closeOnSelect: boolean = true;
 
+    setDefaultDate(value: Date): DatePickerBuilder {
+        this.defaultDate = value;
+        return this;
+    }
+
     setDate(value: Date): DatePickerBuilder {
         this.date = value;
         return this;
@@ -34,6 +41,8 @@ export class DatePicker
 
     constructor(builder: DatePickerBuilder) {
         super(builder, 'date-picker');
+
+        this.showResetButton = true;
     }
 
     setSelectedDate(date: Date) {
@@ -45,6 +54,13 @@ export class DatePicker
         if (builder.date) {
             this.setDate(builder.date);
         }
+
+        if (builder.defaultDate) {
+            this.setHandleReset(() => {
+                console.log('handleReset', builder.defaultDate);
+                this.setSelectedDate(builder.defaultDate);
+            });
+        }
     }
 
     protected handleShownEvent() {

diff --git a/src/main/resources/assets/admin/common/js/ui/time/DateTimePicker.ts b/src/main/resources/assets/admin/common/js/ui/time/DateTimePicker.ts
@@ -16,6 +16,8 @@ export class DateTimePickerBuilder {
 
     date: Date;
 
+    defaultDate: Date;
+
     startingDayOfWeek: DayOfWeek = DaysOfWeek.MONDAY;
 
     closeOnSelect: boolean = false;
@@ -25,6 +27,11 @@ export class DateTimePickerBuilder {
     // use local timezone if timezone value is not initialized
     useLocalTimezoneIfNotPresent: boolean = false;
 
+    setDefaultDate(value: Date): DateTimePickerBuilder {
+        this.defaultDate = value;
+        return this;
+    }
+
     setDate(value: Date): DateTimePickerBuilder {
         this.date = value;
         return this;
@@ -61,6 +68,8 @@ export class DateTimePicker
 
     constructor(builder: DateTimePickerBuilder) {
         super(builder, 'date-time-picker');
+
+        this.showResetButton = true;
     }
 
     public setSelectedDateTime(date: Date, userInput?: boolean) {
@@ -72,6 +81,12 @@ export class DateTimePicker
         if (builder.date) {
             this.setDate(builder.date);
         }
+
+        if (builder.defaultDate) {
+            this.setHandleReset(() => {
+                this.setSelectedDateTime(builder.defaultDate);
+            });
+        }
     }
 
     protected handleShownEvent() {
@@ -86,8 +101,10 @@ export class DateTimePicker
     }
 
     protected initPopup(builder: DateTimePickerBuilder) {
-        let popupBuilder = new DateTimePickerPopupBuilder().setDate(this.selectedDate).setTimezone(
-            builder.timezone).setUseLocalTimezoneIfNotPresent(builder.useLocalTimezoneIfNotPresent);
+        let popupBuilder = new DateTimePickerPopupBuilder()
+            .setDate(this.selectedDate)
+            .setTimezone(builder.timezone)
+            .setUseLocalTimezoneIfNotPresent(builder.useLocalTimezoneIfNotPresent);
 
         this.popup = new DateTimePickerPopup(popupBuilder);
         this.popup.onShown(() => {

diff --git a/src/main/resources/assets/admin/common/js/ui/time/Picker.ts b/src/main/resources/assets/admin/common/js/ui/time/Picker.ts
@@ -12,16 +12,24 @@ import {SelectedDateChangedEvent} from './SelectedDateChangedEvent';
 export class Picker<T extends Element>
     extends DivEl {
 
+    showResetButton: Boolean;
+
     protected popup: T;
 
     protected popupOkButton: Button;
 
+    protected popupResetButton: Button;
+
     protected selectedDate: Date;
 
     protected input: TextInput;
 
+    protected defaultDate: Date;
+
     protected validUserInput: boolean;
 
+    private handleReset: Function;
+
     private builder: any;
 
     private selectedDateTimeChangedListeners: { (event: SelectedDateChangedEvent): void }[] = [];
@@ -47,6 +55,10 @@ export class Picker<T extends Element>
         this.input.resetBaseValues();
     }
 
+    public setHandleReset(handleReset?: Function) {
+        this.handleReset = handleReset;
+    }
+
     getTextInput(): TextInput {
         return this.input;
     }
@@ -187,13 +199,27 @@ export class Picker<T extends Element>
         }
     }
 
+    private initResetButton() {
+        this.popupResetButton = new Button(i18n('action.reset'));
+        this.popupResetButton.addClass('reset-button');
+        this.popupResetButton.onClicked(() => {
+            if (!this.handleReset) {
+                this.input.reset();
+            } else {
+                this.handleReset();
+            }
+        });
+        return this.popupResetButton;
+    }
+
     private initCloseButton() {
         this.popupOkButton = new Button(i18n('action.ok'));
         this.popupOkButton.addClass('ok-button');
         this.popupOkButton.onClicked(() => {
             this.hidePopup();
         });
-        this.popup.appendChild(this.popupOkButton);
+
+        return this.popupOkButton;
     }
 
     private createPopup() {
@@ -203,7 +229,17 @@ export class Picker<T extends Element>
 
         this.initPopup(this.builder);
         this.setupPopupListeners(this.builder);
-        this.initCloseButton();
+        const buttonContainer = new DivEl('btn-container');
+
+        if (this.showResetButton) {
+            const resetButton = this.initResetButton();
+            buttonContainer.appendChild(resetButton);
+        }
+
+        const okButton = this.initCloseButton();
+        buttonContainer.appendChild(okButton);
+
+        this.popup.appendChild(buttonContainer);
 
         this.popup.insertAfterEl(this.input);
     }

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/time/date-picker.less b/src/main/resources/assets/admin/common/styles/api/ui/time/date-picker.less
@@ -6,7 +6,12 @@
     .picker-icon();
 
     .date-picker-dialog {
-      .picker-dialog-button(10px 10px 9px auto);
+      .picker-dialog-button(5px 10px);
+
+      .btn-container {
+        display: flex;
+        justify-content: flex-end;
+      }
 
       .year-container,
       .month-container {

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/time/date-time-picker.less b/src/main/resources/assets/admin/common/styles/api/ui/time/date-time-picker.less
@@ -6,14 +6,18 @@
 
     .date-time-dialog {
       .picker-dialog(100%, 10px 0);
+      .picker-dialog-button(5px 10px);
+      .notSelectable();
+      .date-picker-mixin(auto, 10px);
+      .time-picker-mixin();
 
       box-sizing: border-box;
       text-align: center;
 
-      .picker-dialog-button(10px 20px 9px auto);
-      .notSelectable();
-      .date-picker-mixin(auto, 10px);
-      .time-picker-mixin();
+      .btn-container {
+        display: flex;
+        justify-content: flex-end;
+      }
 
       .date-picker-dialog,
       .time-picker-dialog {

diff --git a/src/main/resources/assets/admin/common/styles/mixins.less b/src/main/resources/assets/admin/common/styles/mixins.less
@@ -24,6 +24,10 @@
     display: @display;
     margin: @margin;
   }
+
+  .reset-button {
+    .ok-button();
+  }
 }
 
 .date-picker-mixin(@width: 100%, @padding: 10px) {