From 948817010d5268122e57a6986812601a90071966 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Wed, 18 Dec 2024 08:59:29 +0100 Subject: [PATCH] Hack some roundtrip between the datpicker and the fields above (wip) --- .../dialog_content_component.html.erb | 5 +- .../wp-modal-date-picker.component.ts | 60 +++++++++++-------- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/app/components/work_packages/date_picker/dialog_content_component.html.erb b/app/components/work_packages/date_picker/dialog_content_component.html.erb index 4f935d071a92..1dbb88764764 100644 --- a/app/components/work_packages/date_picker/dialog_content_component.html.erb +++ b/app/components/work_packages/date_picker/dialog_content_component.html.erb @@ -87,7 +87,10 @@ due_date: work_package.due_date, ignore_non_working_days: work_package.ignore_non_working_days, schedule_manually:, - is_schedulable: !disabled? + is_schedulable: !disabled?, + field_name: focused_field, + start_date_field_id: "work_package_start_date", + due_date_field_id: "work_package_due_date" } end end diff --git a/frontend/src/app/shared/components/datepicker/wp-modal-date-picker/wp-modal-date-picker.component.ts b/frontend/src/app/shared/components/datepicker/wp-modal-date-picker/wp-modal-date-picker.component.ts index 89213384deea..b6a8a2f29442 100644 --- a/frontend/src/app/shared/components/datepicker/wp-modal-date-picker/wp-modal-date-picker.component.ts +++ b/frontend/src/app/shared/components/datepicker/wp-modal-date-picker/wp-modal-date-picker.component.ts @@ -34,7 +34,6 @@ import { ElementRef, Injector, Input, - OnInit, ViewChild, } from '@angular/core'; import { I18nService } from 'core-app/core/i18n/i18n.service'; @@ -42,10 +41,7 @@ import { TimezoneService } from 'core-app/core/datetime/timezone.service'; import { DayElement } from 'flatpickr/dist/types/instance'; import flatpickr from 'flatpickr'; import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service'; -import { DateModalRelationsService } from 'core-app/shared/components/datepicker/services/date-modal-relations.service'; import { onDayCreate } from 'core-app/shared/components/datepicker/helpers/date-modal.helpers'; -import { WeekdayService } from 'core-app/core/days/weekday.service'; -import { FocusHelperService } from 'core-app/shared/directives/focus/focus-helper'; import { DeviceService } from 'core-app/core/browser/device.service'; import { DatePicker } from '../datepicker'; import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin'; @@ -67,7 +63,7 @@ import { filter } from 'rxjs/operators'; '../styles/datepicker.modal.sass', ], }) -export class OpWpModalDatePickerComponent extends UntilDestroyedMixin implements AfterViewInit, OnInit { +export class OpWpModalDatePickerComponent extends UntilDestroyedMixin implements AfterViewInit { @Input() public ignoreNonWorkingDays:boolean; @Input() public scheduleManually:boolean; @@ -77,7 +73,9 @@ export class OpWpModalDatePickerComponent extends UntilDestroyedMixin implements @Input() public isSchedulable:boolean = true; @Input() public minimalSchedulingDate:Date|null; - @Input() fieldName:string = ''; + @Input() fieldName:'start_date'|'due_date' = 'start_date'; + @Input() startDateFieldId:string; + @Input() dueDateFieldId:string; @ViewChild('flatpickrTarget') flatpickrTarget:ElementRef; @@ -90,8 +88,6 @@ export class OpWpModalDatePickerComponent extends UntilDestroyedMixin implements readonly I18n:I18nService, readonly timezoneService:TimezoneService, readonly deviceService:DeviceService, - readonly weekdayService:WeekdayService, - readonly focusHelper:FocusHelperService, readonly pathHelper:PathHelperService, readonly elementRef:ElementRef, ) { @@ -99,10 +95,6 @@ export class OpWpModalDatePickerComponent extends UntilDestroyedMixin implements populateInputsFromDataset(this); } - ngOnInit():void { - //this.setCurrentActivatedField(this.initialActivatedField); - } - ngAfterViewInit():void { this.initializeDatepicker(); @@ -152,22 +144,38 @@ export class OpWpModalDatePickerComponent extends UntilDestroyedMixin implements this.ensureHoveredSelection(instance.calendarContainer); }, onChange: (dates:Date[], _datestr, instance) => { - this.startDate = dates[0]; - this.dueDate = dates[1]; - - /*const activeField = this.currentlyActivatedDateField; - - // When two values are passed from datepicker and we don't have duration set, - // just take the range provided by them - if (dates.length === 2 && !this.duration) { - this.setDatesAndDeriveDuration(dates[0], dates[1]); - this.toggleCurrentActivatedField(); - return; + // Todo: Make code better + if (this.fieldName === 'due_date') { + this.dueDate = dates[0]; + + if (this.dueDateFieldId) { + const dueDateField = document.getElementById(this.dueDateFieldId) as HTMLInputElement; + dueDateField.value = this.timezoneService.formattedISODate(this.dueDate); + dueDateField.dispatchEvent(new Event('input')); + } + + // Toggle the active field + if (this.startDateFieldId) { + document.getElementById(this.startDateFieldId)?.focus(); + } + this.fieldName = 'start_date'; + } else { + this.startDate = dates[0]; + + if (this.startDateFieldId) { + const dueDateField = document.getElementById(this.startDateFieldId) as HTMLInputElement; + dueDateField.value = this.timezoneService.formattedISODate(this.startDate); + dueDateField.dispatchEvent(new Event('input')); + } + + // Toggle the active field + if (this.dueDateFieldId) { + document.getElementById(this.dueDateFieldId)?.focus(); + } + this.fieldName = 'due_date'; } - // Update with the same flow as entering a value - const { latestSelectedDateObj } = instance as { latestSelectedDateObj:Date }; - this.datepickerChanged$.next([activeField, latestSelectedDateObj]);*/ + instance.setDate([this.startDate, this.dueDate]); }, // eslint-disable-next-line @typescript-eslint/no-misused-promises onDayCreate: async (dObj:Date[], dStr:string, fp:flatpickr.Instance, dayElem:DayElement) => {