Extract scheduling and NWD toggle into components

This was planned for the initial breakup of single and multi modal,

but was forgotten.

Fixes https://community.openproject.org/wp/44119

frontend/src/app/features/work-packages/openproject-work-packages.module.ts

@@ -183,6 +183,8 @@ import { StoragesResourceService } from 'core-app/core/state/storages/storages.s
 import { DatepickerBannerComponent } from 'core-app/shared/components/datepicker/banner/datepicker-banner.component';
 import { SingleDateModalComponent } from 'core-app/shared/components/datepicker/single-date-modal/single-date.modal';
 import { MultiDateModalComponent } from 'core-app/shared/components/datepicker/multi-date-modal/multi-date.modal';
+import { DatepickerWorkingDaysToggleComponent } from 'core-app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component';
+import { DatepickerSchedulingToggleComponent } from 'core-app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component';
 
 @NgModule({
   imports: [
@@ -394,6 +396,8 @@ import { MultiDateModalComponent } from 'core-app/shared/components/datepicker/m
     MultiDateModalComponent,
     SingleDateModalComponent,
     DatepickerBannerComponent,
+    DatepickerWorkingDaysToggleComponent,
+    DatepickerSchedulingToggleComponent,
 
     // CustomActions
     WpCustomActionComponent,

frontend/src/app/shared/components/datepicker/multi-date-modal/multi-date.modal.html

@@ -10,37 +10,16 @@
 
   <div class="spot-modal--body form -vertical">
     <div class="op-datepicker-modal--toggle-actions-container">
-      <div class="form--field">
-        <label class="form--label">
-          {{text.scheduling.title}}
-        </label>
-        <div class="form--field-container">
-          <spot-toggle
-            [options]="schedulingOptions"
-            [value]="scheduleManually"
-            [name]="'scheduling'"
-            [(ngModel)]="scheduleManually"
-            (ngModelChange)="changeSchedulingMode()"
-            data-qa-selector="op-datepicker-modal--scheduling-action"
-          ></spot-toggle>
-        </div>
-      </div>
-
-      <div class="form--field">
-        <label class="form--label">
-          {{ text.ignoreNonWorkingDays.title }}
-        </label>
-        <div class="form--field-container">
-          <spot-toggle
-            [options]="ignoreNonWorkingDaysOptions"
-            [value]="ignoreNonWorkingDays"
-            [name]="'include-non-working-days'"
-            [(ngModel)]="ignoreNonWorkingDays"
-            (ngModelChange)="changeNonWorkingDays()"
-            data-qa-selector="op-datepicker-modal--include-non-working-days"
-          ></spot-toggle>
-        </div>
-      </div>
+      <op-datepicker-scheduling-toggle
+        name="scheduleManually"
+        [(ngModel)]="scheduleManually"
+        (ngModelChange)="changeSchedulingMode()"
+      ></op-datepicker-scheduling-toggle>
+      <op-datepicker-working-days-toggle
+        name="ignoreNonWorkingDays"
+        [(ngModel)]="ignoreNonWorkingDays"
+        (ngModelChange)="changeNonWorkingDays()"
+      ></op-datepicker-working-days-toggle>
     </div>
 
     <div class="op-datepicker-modal--dates-container">

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

@@ -151,18 +151,8 @@ export class MultiDateModalComponent extends OpModalComponent implements AfterVi
 
   scheduleManually = false;
 
-  schedulingOptions = [
-    { value: false, title: this.text.scheduling.default },
-    { value: true, title: this.text.scheduling.manual },
-  ];
-
   ignoreNonWorkingDays = false;
 
-  ignoreNonWorkingDaysOptions = [
-    { value: false, title: this.text.ignoreNonWorkingDays.no },
-    { value: true, title: this.text.ignoreNonWorkingDays.yes },
-  ];
-
   duration:number|null;
 
   currentlyActivatedDateField:DateFields;

frontend/src/app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component.html

@@ -0,0 +1,15 @@
+<div class="form--field">
+  <label class="form--label">
+    {{text.scheduling.title}}
+  </label>
+  <div class="form--field-container">
+    <spot-toggle
+      [options]="schedulingOptions"
+      [value]="scheduleManually"
+      [name]="'scheduling'"
+      [ngModel]="scheduleManually"
+      (ngModelChange)="onToggle($event)"
+      data-qa-selector="op-datepicker-modal--scheduling-action"
+    ></spot-toggle>
+  </div>
+</div>

frontend/src/app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component.ts

@@ -0,0 +1,67 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  Input,
+} from '@angular/core';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+
+@Component({
+  selector: 'op-datepicker-scheduling-toggle',
+  templateUrl: './datepicker-scheduling-toggle.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DatepickerSchedulingToggleComponent),
+    multi: true,
+  }],
+})
+export class DatepickerSchedulingToggleComponent implements ControlValueAccessor {
+  text = {
+    scheduling: {
+      title: this.I18n.t('js.scheduling.title'),
+      manual: this.I18n.t('js.scheduling.manual'),
+      default: this.I18n.t('js.scheduling.default'),
+    },
+  };
+
+  @Input() scheduleManually:boolean;
+
+  schedulingOptions = [
+    { value: false, title: this.text.scheduling.default },
+    { value: true, title: this.text.scheduling.manual },
+  ];
+
+  constructor(
+    private I18n:I18nService,
+    private cdRef:ChangeDetectorRef,
+  ) { }
+
+  onChange = (_:boolean):void => {};
+
+  onTouched = (_:boolean):void => {};
+
+  registerOnChange(fn:(_:boolean) => void):void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn:(_:boolean) => void):void {
+    this.onTouched = fn;
+  }
+
+  writeValue(val:boolean):void {
+    this.scheduleManually = val;
+    this.cdRef.markForCheck();
+  }
+
+  onToggle(value:boolean):void {
+    this.writeValue(value);
+    this.onChange(value);
+    this.onTouched(value);
+  }
+}

frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.html

@@ -10,37 +10,16 @@
 
   <div class="spot-modal--body form -vertical">
     <div class="op-datepicker-modal--toggle-actions-container">
-      <div class="form--field">
-        <label class="form--label">
-          {{text.scheduling.title}}
-        </label>
-        <div class="form--field-container">
-          <spot-toggle
-            [options]="schedulingOptions"
-            [value]="scheduleManually"
-            [name]="'scheduling'"
-            [(ngModel)]="scheduleManually"
-            (ngModelChange)="changeSchedulingMode()"
-            data-qa-selector="op-datepicker-modal--scheduling-action"
-          ></spot-toggle>
-        </div>
-      </div>
-
-      <div class="form--field">
-        <label class="form--label">
-          {{ text.ignoreNonWorkingDays.title }}
-        </label>
-        <div class="form--field-container">
-          <spot-toggle
-            [options]="ignoreNonWorkingDaysOptions"
-            [value]="ignoreNonWorkingDays"
-            [name]="'include-non-working-days'"
-            [(ngModel)]="ignoreNonWorkingDays"
-            (ngModelChange)="changeNonWorkingDays()"
-            data-qa-selector="op-datepicker-modal--include-non-working-days"
-          ></spot-toggle>
-        </div>
-      </div>
+      <op-datepicker-scheduling-toggle
+        name="scheduleManually"
+        [(ngModel)]="scheduleManually"
+        (ngModelChange)="changeSchedulingMode()"
+      ></op-datepicker-scheduling-toggle>
+      <op-datepicker-working-days-toggle
+        name="ignoreNonWorkingDays"
+        [(ngModel)]="ignoreNonWorkingDays"
+        (ngModelChange)="changeNonWorkingDays()"
+      ></op-datepicker-working-days-toggle>
     </div>
 
     <div class="op-datepicker-modal--dates-container">

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

@@ -126,11 +126,6 @@ export class SingleDateModalComponent extends OpModalComponent implements AfterV
 
   ignoreNonWorkingDays = false;
 
-  ignoreNonWorkingDaysOptions = [
-    { value: true, title: this.text.ignoreNonWorkingDays.yes },
-    { value: false, title: this.text.ignoreNonWorkingDays.no },
-  ];
-
   htmlId = '';
 
   date:string|null = null;

frontend/src/app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component.html

@@ -0,0 +1,15 @@
+<div class="form--field">
+  <label class="form--label">
+    {{ text.ignoreNonWorkingDays.title }}
+  </label>
+  <div class="form--field-container">
+    <spot-toggle
+      [options]="ignoreNonWorkingDaysOptions"
+      [value]="ignoreNonWorkingDays"
+      [name]="'include-non-working-days'"
+      [ngModel]="ignoreNonWorkingDays"
+      (ngModelChange)="onToggle($event)"
+      data-qa-selector="op-datepicker-modal--include-non-working-days"
+    ></spot-toggle>
+  </div>
+</div>

frontend/src/app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component.ts

@@ -0,0 +1,67 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  Input,
+} from '@angular/core';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+
+@Component({
+  selector: 'op-datepicker-working-days-toggle',
+  templateUrl: './datepicker-working-days-toggle.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DatepickerWorkingDaysToggleComponent),
+    multi: true,
+  }],
+})
+export class DatepickerWorkingDaysToggleComponent implements ControlValueAccessor {
+  @Input() ignoreNonWorkingDays:boolean;
+
+  text = {
+    ignoreNonWorkingDays: {
+      title: this.I18n.t('js.work_packages.datepicker_modal.ignore_non_working_days.title'),
+      yes: this.I18n.t('js.work_packages.datepicker_modal.ignore_non_working_days.true'),
+      no: this.I18n.t('js.work_packages.datepicker_modal.ignore_non_working_days.false'),
+    },
+  };
+
+  ignoreNonWorkingDaysOptions = [
+    { value: false, title: this.text.ignoreNonWorkingDays.no },
+    { value: true, title: this.text.ignoreNonWorkingDays.yes },
+  ];
+
+  constructor(
+    private I18n:I18nService,
+    private cdRef:ChangeDetectorRef,
+  ) {}
+
+  onChange = (_:boolean):void => {};
+
+  onTouched = (_:boolean):void => {};
+
+  registerOnChange(fn:(_:boolean) => void):void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn:(_:boolean) => void):void {
+    this.onTouched = fn;
+  }
+
+  onToggle(value:boolean):void {
+    this.writeValue(value);
+    this.onChange(value);
+    this.onTouched(value);
+  }
+
+  writeValue(val:boolean):void {
+    this.ignoreNonWorkingDays = val;
+    this.cdRef.markForCheck();
+  }
+}

frontend/src/app/spot/components/toggle/toggle.component.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   forwardRef,
@@ -36,8 +37,13 @@ export class SpotToggleComponent<T> implements ControlValueAccessor {
 
   @Input() public value:T;
 
+  constructor(
+    private cdRef:ChangeDetectorRef,
+  ) {}
+
   writeValue(value:T):void {
     this.value = value;
+    this.cdRef.markForCheck();
   }
 
   onToggle(value:T):void {