Start transforming multi date modal

frontend/src/app/shared/components/datepicker/banner/datepicker-banner.component.ts

@@ -64,9 +64,13 @@ export class OpDatePickerBannerComponent {
       map((relations) => relations?.length > 0),
     );
 
-  isParent = this.dateModalRelations.isParent;
+  get isParent() {
+    return this.dateModalRelations.isParent;
+  }
 
-  isChild = this.dateModalRelations.isChild;
+  get isChild() {
+    return this.dateModalRelations.isChild;
+  }
 
   text = {
     automatically_scheduled_parent: this.I18n.t('js.work_packages.datepicker_modal.automatically_scheduled_parent'),

frontend/src/app/shared/components/datepicker/multi-date-form/multi-date-form.component.ts

@@ -33,19 +33,15 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Inject,
+  Input,
   Injector,
   ViewChild,
   ViewEncapsulation,
+  OnInit,
 } from '@angular/core';
-import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { OpModalComponent } from 'core-app/shared/components/modal/modal.component';
-import { OpModalLocalsMap } from 'core-app/shared/components/modal/modal.types';
-import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
 import { HalResourceEditingService } from 'core-app/shared/components/fields/edit/services/hal-resource-editing.service';
 import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
-import { ConfigurationService } from 'core-app/core/config/configuration.service';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { DayElement } from 'flatpickr/dist/types/instance';
 import flatpickr from 'flatpickr';
@@ -81,6 +77,7 @@ import { DatePicker } from '../datepicker';
 
 import DateOption = flatpickr.Options.DateOption;
 import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
+import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 
 export type DateKeys = 'start'|'end';
 export type DateFields = DateKeys|'duration';
@@ -100,8 +97,12 @@ export type FieldUpdates =
   |DateUpdate;
 
 @Component({
-  templateUrl: './multi-date.modal.html',
-  styleUrls: ['../styles/datepicker.modal.sass', '../styles/datepicker_mobile.modal.sass'],
+  selector: 'op-multi-date-form',
+  templateUrl: './multi-date-form.component.html',
+  styleUrls: [
+    '../styles/datepicker.modal.sass',
+    '../styles/datepicker_mobile.modal.sass',
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   providers: [
@@ -109,27 +110,15 @@ export type FieldUpdates =
     DateModalRelationsService,
   ],
 })
-export class MultiDateModalComponent extends OpModalComponent implements AfterViewInit {
-  @InjectField() I18n!:I18nService;
-
-  @InjectField() timezoneService:TimezoneService;
-
-  @InjectField() halEditing:HalResourceEditingService;
-
-  @InjectField() dateModalScheduling:DateModalSchedulingService;
-
-  @InjectField() dateModalRelations:DateModalRelationsService;
-
-  @InjectField() deviceService:DeviceService;
-
-  @InjectField() weekdayService:WeekdayService;
-
-  @InjectField() focusHelper:FocusHelperService;
-
+export class OpMultiDateFormComponent extends UntilDestroyedMixin implements AfterViewInit, OnInit {
   @ViewChild('modalContainer') modalContainer:ElementRef<HTMLElement>;
 
   @ViewChild('durationField', { read: ElementRef }) durationField:ElementRef<HTMLElement>;
 
+  @Input() changeset:ResourceChangeset;
+
+  @Input() fieldName:string = '';
+
   text = {
     save: this.I18n.t('js.button_save'),
     cancel: this.I18n.t('js.button_cancel'),
@@ -218,48 +207,34 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
   // which is different from the highlight state...
   durationFocused = false;
 
-  private changeset:ResourceChangeset;
-
   ignoreNonWorkingDaysWritable = true;
 
   private datePickerInstance:DatePicker;
 
   private formUpdates$ = new Subject<FieldUpdates>();
 
-  private dateUpdateRequests$ = this
-    .formUpdates$
-    .pipe(
-      this.untilDestroyed(),
-      switchMap((fieldsToUpdate:FieldUpdates) => this
-        .apiV3Service
-        .work_packages
-        .withOptionalId(this.changeset.id === 'new' ? null : this.changeset.id)
-        .form
-        .forPayload({
-          ...fieldsToUpdate,
-          lockVersion: this.changeset.value<string>('lockVersion'),
-          ignoreNonWorkingDays: this.ignoreNonWorkingDays,
-          scheduleManually: this.scheduleManually,
-        })),
-    )
-    .subscribe((form) => this.updateDatesFromForm(form));
-
   constructor(
     readonly injector:Injector,
-    @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
     readonly cdRef:ChangeDetectorRef,
-    readonly elementRef:ElementRef,
-    readonly configurationService:ConfigurationService,
     readonly apiV3Service:ApiV3Service,
+    readonly I18n:I18nService,
+    readonly timezoneService:TimezoneService,
+    readonly halEditing:HalResourceEditingService,
+    readonly dateModalScheduling:DateModalSchedulingService,
+    readonly dateModalRelations:DateModalRelationsService,
+    readonly deviceService:DeviceService,
+    readonly weekdayService:WeekdayService,
+    readonly focusHelper:FocusHelperService,
   ) {
-    super(locals, cdRef, elementRef);
-    this.changeset = locals.changeset as ResourceChangeset;
+    super();
+  }
+
+  ngOnInit(): void {
+    this.htmlId = `wp-datepicker-${this.fieldName as string}`;
 
     this.dateModalScheduling.setChangeset(this.changeset as WorkPackageChangeset);
     this.dateModalRelations.setChangeset(this.changeset as WorkPackageChangeset);
 
-    this.htmlId = `wp-datepicker-${locals.fieldName as string}`;
-
     this.scheduleManually = !!this.changeset.value('scheduleManually');
     this.ignoreNonWorkingDays = !!this.changeset.value('ignoreNonWorkingDays');
 
@@ -342,11 +317,11 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
       this.changeset.setValue('duration', this.durationAsIso8601);
     }
 
-    this.closeMe();
+    // this.closeMe();
   }
 
   cancel():void {
-    this.closeMe();
+    // this.closeMe();
   }
 
   updateDate(key:DateKeys, val:string|null):void {
@@ -749,7 +724,7 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
   }
 
   private get initialActivatedField():DateFields {
-    switch (this.locals.fieldName) {
+    switch (this.fieldName) {
       case 'startDate':
         return 'start';
       case 'dueDate':

frontend/src/app/shared/components/datepicker/services/date-modal-relations.service.ts

@@ -27,11 +27,8 @@
 //++
 
 import {
-  Inject,
   Injectable,
 } from '@angular/core';
-import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
-import { OpModalLocalsMap } from 'core-app/shared/components/modal/modal.types';
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { ApiV3Filter } from 'core-app/shared/helpers/api-v3/api-v3-filter-builder';
 import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
@@ -46,7 +43,6 @@ import {
 import {
   combineLatest,
   Observable,
-  of,
   Subject,
 } from 'rxjs';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
@@ -107,7 +103,6 @@ export class DateModalRelationsService {
     );
 
   constructor(
-    @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
     private apiV3Service:ApiV3Service,
   ) {}
 

frontend/src/app/shared/components/datepicker/services/date-modal-scheduling.service.ts

@@ -27,11 +27,8 @@
 //++
 
 import {
-  Inject,
   Injectable,
 } from '@angular/core';
-import { OpModalLocalsToken } from 'core-app/shared/components/modal/modal.service';
-import { OpModalLocalsMap } from 'core-app/shared/components/modal/modal.types';
 import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
 import { DateModalRelationsService } from 'core-app/shared/components/datepicker/services/date-modal-relations.service';
 import { DayElement } from 'flatpickr/dist/types/instance';
@@ -43,7 +40,6 @@ export class DateModalSchedulingService {
   scheduleManually = false;
 
   constructor(
-    @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
     readonly dateModalRelations:DateModalRelationsService,
   ) {}
 

frontend/src/app/shared/components/datepicker/single-date-form/single-date-form.component.ts

@@ -33,12 +33,13 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  forwardRef,
+  OnInit,
   Injector,
   Input,
   Output,
   ViewChild,
   ViewEncapsulation,
+  HostBinding,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { DatePicker } from 'core-app/shared/components/datepicker/datepicker';
@@ -80,11 +81,15 @@ import { WorkPackageChangeset } from 'core-app/features/work-packages/components
     DateModalRelationsService,
   ],
 })
-export class OpSingleDateFormComponent extends UntilDestroyedMixin implements AfterViewInit {
+export class OpSingleDateFormComponent extends UntilDestroyedMixin implements AfterViewInit, OnInit {
+  @HostBinding('class.op-datepicker-modal') className = true;
+
   @Output('savedOrCancelled') savedOrCancelled = new EventEmitter();
 
   @Input('value') value = '';
 
+  @Input() changeset:ResourceChangeset;
+
   @ViewChild('modalContainer') modalContainer:ElementRef<HTMLElement>;
 
   text = {
@@ -107,8 +112,6 @@ export class OpSingleDateFormComponent extends UntilDestroyedMixin implements Af
 
   private debounceDelay = 0; // will change after initial render
 
-  private changeset:ResourceChangeset;
-
   private datePickerInstance:DatePicker;
 
   constructor(
@@ -124,9 +127,11 @@ export class OpSingleDateFormComponent extends UntilDestroyedMixin implements Af
     readonly deviceService:DeviceService,
   ) {
     super();
-
-    dateModalRelations.setChangeset(this.changeset as WorkPackageChangeset);
-    dateModalScheduling.setChangeset(this.changeset as WorkPackageChangeset);
+  }
+  
+  ngOnInit():void {
+    this.dateModalRelations.setChangeset(this.changeset as WorkPackageChangeset);
+    this.dateModalScheduling.setChangeset(this.changeset as WorkPackageChangeset);
   }
 
   ngAfterViewInit():void {

frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.html

@@ -10,7 +10,16 @@
   >{{ dates }}</button>
 
   <op-single-date-form
-    value="dates"
+    *ngIf="!isMultiDate"
+    [value]="dates"
+    [changeset]="change"
     slot="body"
-  >body</op-single-date-form>
+  ></op-single-date-form>
+  <op-multi-date-form
+    *ngIf="isMultiDate"
+    [value]="dates"
+    [changeset]="change"
+    [fieldName]="name"
+    slot="body"
+  ></op-multi-date-form>
 </spot-drop-modal>

frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.ts

@@ -46,11 +46,10 @@ export class CombinedDateEditFieldComponent extends DatePickerEditFieldComponent
     },
   };
 
-  public showDatePickerModal():void {
-    this.isOpened = true;
-    /*
-    super.showDatePickerModal();
+  get isMultiDate():boolean {
+    return  this.change.schema.isMilestone;
 
+    /*
     this
       .modal
       ?.onDataUpdated

frontend/src/app/shared/shared.module.ts

@@ -71,8 +71,8 @@ import { ToastComponent } from './components/toaster/toast.component';
 
 import { OpSingleDateFormComponent } from './components/datepicker/single-date-form/single-date-form.component';
 import { OpSingleDatePickerComponent } from './components/datepicker/single-date-picker/single-date-picker.component';
+import { OpMultiDateFormComponent } from 'core-app/shared/components/datepicker/multi-date-form/multi-date-form.component';
 import { OpDatePickerBannerComponent } from './components/datepicker/banner/datepicker-banner.component';
-import { MultiDateModalComponent } from 'core-app/shared/components/datepicker/multi-date-modal/multi-date.modal';
 import { OpDatePickerWorkingDaysToggleComponent } from 'core-app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component';
 import { OpDatePickerSchedulingToggleComponent } from 'core-app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component';
 
@@ -206,7 +206,7 @@ export function bootstrapModule(injector:Injector):void {
     OpSingleDateFormComponent,
     OpSingleDatePickerComponent,
     OpDatePickerBannerComponent,
-    MultiDateModalComponent,
+    OpMultiDateFormComponent,
     OpDatePickerWorkingDaysToggleComponent,
     OpDatePickerSchedulingToggleComponent,
   ],
@@ -268,7 +268,7 @@ export function bootstrapModule(injector:Injector):void {
     OpSingleDateFormComponent,
     OpSingleDatePickerComponent,
     OpDatePickerBannerComponent,
-    MultiDateModalComponent,
+    OpMultiDateFormComponent,
     OpDatePickerWorkingDaysToggleComponent,
     OpDatePickerSchedulingToggleComponent,
   ],