Refactor date filter templates, try to reach fixed build

frontend/src/app/features/work-packages/components/filters/filter-date-time-value/filter-date-time-value.component.html

@@ -1,20 +1,18 @@
-<div class="inline-label" id="div-values-{{filter.id}}">
-  <op-single-date-picker
-    (changed)="value = isoDateParser($event)"
-    [value]="isoDateFormatter(value)"
-    [opAutofocus]="shouldFocus"
-    required="true"
-    [id]="'values-' + filter.id"
-    [name]="'v[' + filter.id + ']'"
-    classes="advanced-filters--date-field"
-    size="10"
-  ></op-single-date-picker>
+<!--op-single-date-picker
+  (changed)="value = isoDateParser($event)"
+  [value]="isoDateFormatter(value)"
+  [opAutofocus]="shouldFocus"
+  required="true"
+  [id]="'values-' + filter.id"
+  [name]="'v[' + filter.id + ']'"
+  classes="advanced-filters--date-field"
+  size="10"
+></op-single-date-picker-->
 
-  <span
-    class="advanced-filters--tooltip-trigger -multiline"
-    [attr.data-tooltip]="timeZoneText"
-    *ngIf="isTimeZoneDifferent"
-  >
-    <span class="spot-icon spot-icon_warning"></span>
-  </span>
-</div>
+<span
+  class="advanced-filters--tooltip-trigger -multiline"
+  [attr.data-tooltip]="timeZoneText"
+  *ngIf="isTimeZoneDifferent"
+>
+  <span class="spot-icon spot-icon_warning"></span>
+</span>

frontend/src/app/features/work-packages/components/filters/filter-date-time-value/filter-date-time-value.component.ts

@@ -27,7 +27,11 @@
 //++
 
 import {
-  Component, Input, OnInit, Output,
+  Component,
+  Input,
+  HostBinding,
+  OnInit,
+  Output,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
@@ -43,6 +47,12 @@ import { AbstractDateTimeValueController } from '../abstract-filter-date-time-va
   templateUrl: './filter-date-time-value.component.html',
 })
 export class FilterDateTimeValueComponent extends AbstractDateTimeValueController implements OnInit {
+  @HostBinding('id') get id() {
+    return `div-values-${this.filter.id}`;
+  }
+
+  @HostBinding('class.inline-label') className = true;
+
   @Input() public shouldFocus = false;
 
   @Input() public filter:QueryFilterInstanceResource;

frontend/src/app/features/work-packages/components/filters/filter-date-times-value/filter-date-times-value.component.html

@@ -1,29 +1,31 @@
-<div id="div-values-{{filter.id}}" class="inline-label">
-  <op-single-date-picker
-    (changed)="begin = isoDateParser($event)"
-    [value]="isoDateFormatter(begin)"
-    [opAutofocus]="shouldFocus"
-    required="true"
-    [id]="'values-' + filter.id + '-begin'"
-    [name]="'v[' + filter.id + ']-begin'"
-    classes="advanced-filters--date-field"
-    size="10"
-  ></op-single-date-picker>
+<!--op-single-date-picker
+  (changed)="begin = isoDateParser($event)"
+  [value]="isoDateFormatter(begin)"
+  [opAutofocus]="shouldFocus"
+  required="true"
+  [id]="'values-' + filter.id + '-begin'"
+  [name]="'v[' + filter.id + ']-begin'"
+  classes="advanced-filters--date-field"
+  size="10"
+></op-single-date-picker-->
 
-  <span class="advanced-filters--affix" [textContent]="text.spacer">
-  </span>
+<span
+  class="advanced-filters--affix"
+  [textContent]="text.spacer"
+></span>
 
-  <op-single-date-picker
-    (changed)="end = isoDateParser($event)"
-    [value]="isoDateFormatter(end)"
-    [id]="'values-' + filter.id + '-end'"
-    [name]="'v[' + filter.id + ']-end'"
-    classes="advanced-filters--date-field"
-    size="10"
-  ></op-single-date-picker>
-  <span class="advanced-filters--tooltip-trigger -multiline"
-        *ngIf="isTimeZoneDifferent"
-        [attr.data-tooltip]="timeZoneText">
-    <op-icon icon-classes="icon icon-warning"></op-icon>
-  </span>
-</div>
+<!--op-single-date-picker
+  (changed)="end = isoDateParser($event)"
+  [value]="isoDateFormatter(end)"
+  [id]="'values-' + filter.id + '-end'"
+  [name]="'v[' + filter.id + ']-end'"
+  classes="advanced-filters--date-field"
+  size="10"
+></op-single-date-picker-->
+<span
+  class="advanced-filters--tooltip-trigger -multiline"
+  *ngIf="isTimeZoneDifferent"
+  [attr.data-tooltip]="timeZoneText"
+>
+  <span class="spot-icon spot-icon_warning"></span>
+</span>

frontend/src/app/features/work-packages/components/filters/filter-date-times-value/filter-date-times-value.component.ts

@@ -29,7 +29,11 @@
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { Moment } from 'moment';
 import {
-  Component, Input, OnInit, Output,
+  HostBinding,
+  Component,
+  Input,
+  OnInit,
+  Output,
 } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { DebouncedEventEmitter } from 'core-app/shared/helpers/rxjs/debounced-event-emitter';
@@ -43,6 +47,12 @@ import { AbstractDateTimeValueController } from '../abstract-filter-date-time-va
   templateUrl: './filter-date-times-value.component.html',
 })
 export class FilterDateTimesValueComponent extends AbstractDateTimeValueController implements OnInit {
+  @HostBinding('id') get id() {
+    return `div-values-${this.filter.id}`;
+  }
+
+  @HostBinding('class.inline-label') className = true;
+
   @Input() public shouldFocus = false;
 
   @Input() public filter:QueryFilterInstanceResource;

frontend/src/app/features/work-packages/components/filters/filter-date-value/filter-date-value.component.html

@@ -1,12 +1,10 @@
-<div id="div-values-{{filter.id}}">
-  <op-single-date-picker
-    (changed)="value = parser($event)"
-    [value]="formatter(value)"
-    [opAutofocus]="shouldFocus"
-    required="true"
-    [id]="'values-' + filter.id"
-    [name]="'v[' + filter.id + ']'"
-    classes="advanced-filters--date-field"
-    size="10"
-  ></op-single-date-picker>
-</div>
+<!--op-single-date-picker
+  (changed)="value = parser($event)"
+  [value]="formatter(value)"
+  [opAutofocus]="shouldFocus"
+  required="true"
+  [id]="'values-' + filter.id"
+  [name]="'v[' + filter.id + ']'"
+  classes="advanced-filters--date-field"
+  size="10"
+></op-single-date-picker-->

frontend/src/app/features/work-packages/components/filters/filter-date-value/filter-date-value.component.ts

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, Input, Output } from '@angular/core';
+import { Component, HostBinding, Input, Output } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
 import { DebouncedEventEmitter } from 'core-app/shared/helpers/rxjs/debounced-event-emitter';
@@ -40,6 +40,10 @@ import { QueryFilterInstanceResource } from 'core-app/features/hal/resources/que
   templateUrl: './filter-date-value.component.html',
 })
 export class FilterDateValueComponent extends UntilDestroyedMixin {
+  @HostBinding('id') get id() {
+    return `div-values-${this.filter.id}`;
+  }
+
   @Input() public shouldFocus = false;
 
   @Input() public filter:QueryFilterInstanceResource;

frontend/src/app/features/work-packages/components/filters/filter-dates-value/filter-dates-value.component.html

@@ -1,26 +1,25 @@
-<div id="div-values-{{filter.id}}"
-  class="inline-label">
-  <op-single-date-picker
-    (changed)="begin = parser($event)"
-    [value]="formatter(begin)"
-    [opAutofocus]="shouldFocus"
-    required="true"
-    [id]="'values-' + filter.id + '-begin'"
-    [name]="'v[' + filter.id + ']-begin'"
-    classes="advanced-filters--date-field"
-    size="10"
-  ></op-single-date-picker>
+<!--op-single-date-picker
+  (changed)="begin = parser($event)"
+  [value]="formatter(begin)"
+  [opAutofocus]="shouldFocus"
+  required="true"
+  [id]="'values-' + filter.id + '-begin'"
+  [name]="'v[' + filter.id + ']-begin'"
+  classes="advanced-filters--date-field"
+  size="10"
+></op-single-date-picker-->
 
-  <span class="advanced-filters--affix" [textContent]="text.spacer">
-  </span>
+<span
+  class="advanced-filters--affix"
+  [textContent]="text.spacer"
+></span>
 
-  <op-single-date-picker
-    (changed)="end = parser($event)"
-    [value]="formatter(end)"
-    required="true"
-    [id]="'values-' + filter.id + '-end'"
-    [name]="'v[' + filter.id + ']-end'"
-    classes="advanced-filters--date-field"
-    size="10"
-  ></op-single-date-picker>
-</div>
+<!--op-single-date-picker
+  (changed)="end = parser($event)"
+  [value]="formatter(end)"
+  required="true"
+  [id]="'values-' + filter.id + '-end'"
+  [name]="'v[' + filter.id + ']-end'"
+  classes="advanced-filters--date-field"
+  size="10"
+></op-single-date-picker-->

frontend/src/app/features/work-packages/components/filters/filter-dates-value/filter-dates-value.component.ts

@@ -27,7 +27,7 @@
 //++
 
 import { HalResource } from 'core-app/features/hal/resources/hal-resource';
-import { Component, Input, Output } from '@angular/core';
+import { Component, HostBinding, Input, Output } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { DebouncedEventEmitter } from 'core-app/shared/helpers/rxjs/debounced-event-emitter';
 import * as moment from 'moment';
@@ -41,6 +41,12 @@ import { QueryFilterInstanceResource } from 'core-app/features/hal/resources/que
   templateUrl: './filter-dates-value.component.html',
 })
 export class FilterDatesValueComponent extends UntilDestroyedMixin {
+  @HostBinding('id') get id() {
+    return `div-values-${this.filter.id}`;
+  }
+
+  @HostBinding('class.inline-label') className = true;
+
   @Input() public shouldFocus = false;
 
   @Input() public filter:QueryFilterInstanceResource;

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

@@ -26,7 +26,7 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { DatePicker } from 'core-app/shared/components/op-date-picker/datepicker';
+import { DatePicker } from 'core-app/shared/components/datepicker/datepicker';
 import { DateOption } from 'flatpickr/dist/types/options';
 import { DayElement } from 'flatpickr/dist/types/instance';
 

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

@@ -82,7 +82,7 @@ import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destr
     DateModalRelationsService,
   ],
 })
-export class SingleDateFormComponent extends UntilDestroyedMixin implements AfterViewInit {
+export class OpSingleDateFormComponent extends UntilDestroyedMixin implements AfterViewInit {
   @Output('savedOrCancelled') savedOrCancelled = new EventEmitter();
 
   @Input('value') value = '';

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

@@ -35,7 +35,7 @@ import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 
 @Component({
   template: `
-    <op-single-date-picker
+    <!--op-single-date-picker
       tabindex="-1"
       (changed)="onValueSelected($event)"
       (canceled)="onCancel()"
@@ -46,7 +46,7 @@ import { TimezoneService } from 'core-app/core/datetime/timezone.service';
       [disabled]="inFlight"
       [id]="handler.htmlId"
       classes="inline-edit--field"
-    ></op-single-date-picker>
+    ></op-single-date-picker-->
   `,
 })
 export class DateEditFieldComponent extends EditFieldComponent implements OnInit {

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

@@ -32,13 +32,10 @@ import {
   OnInit,
 } from '@angular/core';
 import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
-import { OpModalService } from 'core-app/shared/components/modal/modal.service';
-import { take } from 'rxjs/operators';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { EditFieldComponent } from 'core-app/shared/components/fields/edit/edit-field.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 { OpModalComponent } from 'core-app/shared/components/modal/modal.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 { DeviceService } from 'core-app/core/browser/device.service';
 
 @Directive()

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

@@ -68,6 +68,7 @@ import {
 import { CopyToClipboardDirective } from './components/copy-to-clipboard/copy-to-clipboard.directive';
 import { OpDateTimeComponent } from './components/date/op-date-time.component';
 import { ToastComponent } from './components/toaster/toast.component';
+import { OpSingleDateFormComponent } from './components/datepicker/single-date-form/single-date-form.component';
 import { ToastsContainerComponent } from './components/toaster/toasts-container.component';
 import { UploadProgressComponent } from './components/toaster/upload-progress.component';
 import { ResizerComponent } from './components/resizer/resizer.component';
@@ -193,6 +194,9 @@ export function bootstrapModule(injector:Injector):void {
     OpLoadingProjectListComponent,
 
     ViewSelectComponent,
+
+    // Date pickers
+    OpSingleDateFormComponent,
   ],
   providers: [
     StaticQueriesService,
@@ -247,6 +251,9 @@ export function bootstrapModule(injector:Injector):void {
     OpProjectIncludeComponent,
     OpProjectIncludeListComponent,
     OpLoadingProjectListComponent,
+
+    // Date pickers
+    OpSingleDateFormComponent,
   ],
 })
 export class OpSharedModule {