diff --git a/frontend/src/app/features/work-packages/openproject-work-packages.module.ts b/frontend/src/app/features/work-packages/openproject-work-packages.module.ts index 36912208d7..f62cda3d6f 100644 --- a/frontend/src/app/features/work-packages/openproject-work-packages.module.ts +++ b/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, diff --git a/frontend/src/app/shared/components/datepicker/multi-date-modal/multi-date.modal.html b/frontend/src/app/shared/components/datepicker/multi-date-modal/multi-date.modal.html index 30d83e7ffb..b18fd8eaea 100644 --- a/frontend/src/app/shared/components/datepicker/multi-date-modal/multi-date.modal.html +++ b/frontend/src/app/shared/components/datepicker/multi-date-modal/multi-date.modal.html @@ -10,37 +10,16 @@
-
- -
- -
-
- -
- -
- -
-
+ +
diff --git a/frontend/src/app/shared/components/datepicker/multi-date-modal/multi-date.modal.ts b/frontend/src/app/shared/components/datepicker/multi-date-modal/multi-date.modal.ts index 1d4f3fcdd8..64d317c28f 100644 --- a/frontend/src/app/shared/components/datepicker/multi-date-modal/multi-date.modal.ts +++ b/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; diff --git a/frontend/src/app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component.html b/frontend/src/app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component.html new file mode 100644 index 0000000000..167c6756d1 --- /dev/null +++ b/frontend/src/app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component.html @@ -0,0 +1,15 @@ +
+ +
+ +
+
diff --git a/frontend/src/app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component.ts b/frontend/src/app/shared/components/datepicker/scheduling-mode/datepicker-scheduling-toggle.component.ts new file mode 100644 index 0000000000..36868c92c1 --- /dev/null +++ b/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); + } +} diff --git a/frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.html b/frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.html index fcdb6fefb8..adde31a5f5 100644 --- a/frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.html +++ b/frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.html @@ -10,37 +10,16 @@
-
- -
- -
-
- -
- -
- -
-
+ +
diff --git a/frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.ts b/frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.ts index 74911b987f..87297b0765 100644 --- a/frontend/src/app/shared/components/datepicker/single-date-modal/single-date.modal.ts +++ b/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; diff --git a/frontend/src/app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component.html b/frontend/src/app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component.html new file mode 100644 index 0000000000..57c429cf6a --- /dev/null +++ b/frontend/src/app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component.html @@ -0,0 +1,15 @@ +
+ +
+ +
+
diff --git a/frontend/src/app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component.ts b/frontend/src/app/shared/components/datepicker/toggle/datepicker-working-days-toggle.component.ts new file mode 100644 index 0000000000..cea4209070 --- /dev/null +++ b/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(); + } +} diff --git a/frontend/src/app/spot/components/toggle/toggle.component.ts b/frontend/src/app/spot/components/toggle/toggle.component.ts index faf86ae4ef..4e7a4bf708 100644 --- a/frontend/src/app/spot/components/toggle/toggle.component.ts +++ b/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 implements ControlValueAccessor { @Input() public value:T; + constructor( + private cdRef:ChangeDetectorRef, + ) {} + writeValue(value:T):void { this.value = value; + this.cdRef.markForCheck(); } onToggle(value:T):void {