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 index f6d50e0b4..3e9320bb2 100644 --- 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,6 +12,7 @@ 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]]. @@ -19,6 +20,10 @@ import {i18n} from '../../../util/Messages'; 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 index a724fd53b..23436a94e 100644 --- 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 index 248c34ce4..84ea6d98d 100644 --- 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 index 1956c973e..b362624d0 100644 --- 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 index 42824bb7d..f4ac82bda 100644 --- 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 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 this.input.resetBaseValues(); } + public setHandleReset(handleReset?: Function) { + this.handleReset = handleReset; + } + getTextInput(): TextInput { return this.input; } @@ -187,13 +199,27 @@ export class Picker } } + 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 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 index b7f08089f..03581fc7e 100644 --- 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 index d495e660a..257c2bc80 100644 --- 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 index 41b30f6d4..1eef5f990 100644 --- 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) {