Datepickers default value resets onSelect #2316

enonic · Jan 17, 2022 · 2c5edde · 2c5edde
1 parent 6c4d47c
commit 2c5edde
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 27 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
@@ -35,7 +35,7 @@ export class Date
         const datePickerBuilder: DatePickerBuilder = new DatePickerBuilder();
         const defaultDate = this.getDefaultDate();
         if (defaultDate) {
-            datePickerBuilder.setDefaultDate(defaultDate);
+            datePickerBuilder.setDefaultValue(defaultDate);
         }
 
         if (!property.hasNullValue()) {

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
@@ -98,7 +98,7 @@ export class DateTime
         const dateTimeBuilder: DateTimePickerBuilder = new DateTimePickerBuilder();
         const defaultDate = this.getDefaultDate();
         if (defaultDate) {
-            dateTimeBuilder.setDefaultDate(defaultDate);
+            dateTimeBuilder.setDefaultValue(defaultDate);
         }
 
         if (!ValueTypes.LOCAL_DATE_TIME.equals(property.getType())) {
@@ -128,7 +128,7 @@ export class DateTime
     private createInputAsDateTime(property: Property) {
         const dateTimeBuilder: DateTimePickerBuilder = new DateTimePickerBuilder();
         dateTimeBuilder.setUseLocalTimezoneIfNotPresent(true);
-        dateTimeBuilder.setDefaultDate(this.getDefaultDate());
+        dateTimeBuilder.setDefaultValue(this.getDefaultDate());
 
         if (!ValueTypes.DATE_TIME.equals(property.getType())) {
             ValueTypeConverter.convertPropertyValueType(property, ValueTypes.DATE_TIME);

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
@@ -5,26 +5,19 @@ import {DateHelper} from '../../util/DateHelper';
 import {Event} from '../../event/Event';
 import {ClassHelper} from '../../ClassHelper';
 import {DayOfWeek} from './DayOfWeek';
-import {Picker} from './Picker';
+import {DefaultValuePickerBuilder, Picker} from './Picker';
 import {DaysOfWeek} from './DaysOfWeek';
 import {DatePickerPopup, DatePickerPopupBuilder} from './DatePickerPopup';
 import {SelectedDateChangedEvent} from './SelectedDateChangedEvent';
 
-export class DatePickerBuilder {
+export class DatePickerBuilder extends DefaultValuePickerBuilder {
 
     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;
@@ -53,8 +46,8 @@ export class DatePicker
             this.setDate(builder.date);
         }
 
-        if (builder.defaultDate) {
-            this.setDefaultValueHandler(() => this.setSelectedDate(builder.defaultDate));
+        if (builder.defaultValue) {
+            this.setDefaultValueHandler(() => this.setSelectedDate(builder.defaultValue));
         }
     }
 
@@ -91,6 +84,8 @@ export class DatePicker
             this.input.setValue(this.formatDate(e.getDate()), false, true);
             this.notifySelectedDateTimeChanged(e);
             this.updateInputStyling();
+
+            this.getDefaultValueButton().setEnabled(true);
         });
     }
 

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
@@ -5,19 +5,17 @@ import {StringHelper} from '../../util/StringHelper';
 import {DateHelper} from '../../util/DateHelper';
 import {Event} from '../../event/Event';
 import {ClassHelper} from '../../ClassHelper';
-import {Picker} from './Picker';
+import {DefaultValuePickerBuilder, Picker} from './Picker';
 import {DateTimePickerPopup, DateTimePickerPopupBuilder} from './DateTimePickerPopup';
 import {DatePickerBuilder} from './DatePicker';
 import {SelectedDateChangedEvent} from './SelectedDateChangedEvent';
 import {DayOfWeek} from './DayOfWeek';
 import {DaysOfWeek} from './DaysOfWeek';
 
-export class DateTimePickerBuilder {
+export class DateTimePickerBuilder extends DefaultValuePickerBuilder {
 
     date: Date;
 
-    defaultDate: Date;
-
     startingDayOfWeek: DayOfWeek = DaysOfWeek.MONDAY;
 
     closeOnSelect: boolean = false;
@@ -27,11 +25,6 @@ export class DateTimePickerBuilder {
     // use local timezone if timezone value is not initialized
     useLocalTimezoneIfNotPresent: boolean = false;
 
-    setDefaultDate(value: Date | undefined): DateTimePickerBuilder {
-        this.defaultDate = value;
-        return this;
-    }
-
     setDate(value: Date): DateTimePickerBuilder {
         this.date = value;
         return this;
@@ -80,8 +73,8 @@ export class DateTimePicker
             this.setDate(builder.date);
         }
 
-        if (builder.defaultDate) {
-            this.setDefaultValueHandler(() => this.setSelectedDateTime(builder.defaultDate));
+        if (builder.defaultValue) {
+            this.setDefaultValueHandler(() => this.setSelectedDateTime(builder.defaultValue));
         }
     }
 
@@ -94,6 +87,9 @@ export class DateTimePicker
     protected initInput() {
         this.input = TextInput.middle(undefined, this.formatDateTime(this.selectedDate));
         this.input.setPlaceholder('YYYY-MM-DD hh:mm');
+        this.input.onInput(() => {
+            this.handleDefaultValueButtonState();
+        });
     }
 
     protected initPopup(builder: DateTimePickerBuilder) {
@@ -117,11 +113,15 @@ export class DateTimePicker
             }
             this.setDate(e.getDate());
             this.setInputValue(true);
+            this.handleDefaultValueButtonState();
         });
 
+
+
         this.popup.onSelectedTimeChanged((hours: number, minutes: number) => {
             this.setTime(hours, minutes);
             this.setInputValue(true);
+            this.handleDefaultValueButtonState();
         });
     }
 
@@ -154,6 +154,10 @@ export class DateTimePicker
         });
     }
 
+    private handleDefaultValueButtonState = () => {
+        this.getDefaultValueButton().setEnabled(true);
+    };
+
     private onDateTimePickerShown(event: DateTimePickerShownEvent) {
         if (event.getDateTimePicker() !== this) {
             this.hidePopup();

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
@@ -9,6 +9,19 @@ import {FormEl} from '../../dom/FormEl';
 import {StyleHelper} from '../../StyleHelper';
 import {SelectedDateChangedEvent} from './SelectedDateChangedEvent';
 
+/**
+ * Not required for pickers
+ * Should only be used when th default value is needed in children
+ */
+export class DefaultValuePickerBuilder {
+    defaultValue: any;
+
+    setDefaultValue(value: any): DefaultValuePickerBuilder {
+        this.defaultValue = value;
+        return this;
+    }
+}
+
 export class Picker<T extends Element>
     extends DivEl {
 
@@ -26,6 +39,8 @@ export class Picker<T extends Element>
 
     private selectedDateTimeChangedListeners: { (event: SelectedDateChangedEvent): void }[] = [];
 
+    private defaultValueButton : Button;
+
     constructor(builder: any, className?: string) {
         super(className);
 
@@ -51,6 +66,10 @@ export class Picker<T extends Element>
         this.defaultValueHandler = handler;
     }
 
+    public getDefaultValueButton(): Button {
+        return this.defaultValueButton;
+    }
+
     getTextInput(): TextInput {
         return this.input;
     }
@@ -194,9 +213,17 @@ export class Picker<T extends Element>
     private initDefaultValueButton(): Button {
         const popupDefaultValueButton = new Button(i18n('action.setDefault'));
         popupDefaultValueButton.addClass('default-button');
-        popupDefaultValueButton.onClicked(() => {
-            this.defaultValueHandler();
+        popupDefaultValueButton.onClicked((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (popupDefaultValueButton.isEnabled) {
+                popupDefaultValueButton.setEnabled(false);
+                this.defaultValueHandler();
+            }
         });
+
+        this.defaultValueButton = popupDefaultValueButton;
         return popupDefaultValueButton;
     }