Convert query-filters to ng2

frontend/app/angular4-modules.ts

@@ -111,7 +111,6 @@ import {WorkPackageTimelineButtonComponent} from 'core-components/wp-buttons/wp-
 import {WorkPackageZenModeButtonComponent} from 'core-components/wp-buttons/wp-zen-mode-toggle-button/wp-zen-mode-toggle-button.component';
 import {WorkPackageFilterContainerComponent} from 'core-components/filters/filter-container/filter-container.directive';
 import WorkPackageFiltersService from 'core-components/filters/wp-filters/wp-filters.service';
-import {Ng1QueryFiltersComponentWrapper} from 'core-components/filters/query-filters/query-filters-ng1-wrapper.component';
 import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
 import {WorkPackageSplitViewComponent} from 'core-components/routing/wp-split-view/wp-split-view.component';
 import {WorkPackageBreadcrumbComponent} from 'core-components/work-packages/wp-breadcrumb/wp-breadcrumb.component';
@@ -197,6 +196,17 @@ import {WpTableConfigurationFiltersTab} from 'core-components/wp-table/configura
 import {WpTableConfigurationService} from 'core-components/wp-table/configuration-modal/wp-table-configuration.service';
 import {WpTableConfigurationSortByTab} from 'core-components/wp-table/configuration-modal/tabs/sort-by-tab.component';
 import {WpTableConfigurationTimelinesTab} from 'core-components/wp-table/configuration-modal/tabs/timelines-tab.component';
+import {QueryFilterComponent} from 'core-components/filters/query-filter/query-filter.component';
+import {QueryFiltersComponent} from 'core-components/filters/query-filters/query-filters.component';
+import {FilterDateValueComponent} from 'core-components/filters/filter-date-value/filter-date-value.component';
+import {FilterDateTimeValueComponent} from 'core-components/filters/filter-date-time-value/filter-date-time-value.component';
+import {FilterDateTimesValueComponent} from 'core-components/filters/filter-date-times-value/filter-date-times-value.component';
+import {FilterDatesValueComponent} from 'core-components/filters/filter-dates-value/filter-dates-value.component';
+import {FilterIntegerValueComponent} from 'core-components/filters/filter-integer-value/filter-integer-value.component';
+import {FilterToggledMultiselectValueComponent} from 'core-components/filters/filter-toggled-multiselect-value/filter-toggled-multiselect-value.component';
+import {FilterStringValueComponent} from 'core-components/filters/filter-string-value/filter-string-value.component';
+import {FilterBooleanValueComponent} from 'core-components/filters/filter-boolean-value/filter-boolean-value.component';
+import {OpDatePickerComponent} from 'core-components/wp-edit/op-date-picker/op-date-picker.component';
 
 @NgModule({
   imports: [
@@ -295,6 +305,7 @@ import {WpTableConfigurationTimelinesTab} from 'core-components/wp-table/configu
   declarations: [
     WorkPackagesListComponent,
     OpIcon,
+    OpDatePickerComponent,
     AccessibleByKeyboardDirectiveUpgraded,
     TablePaginationComponent,
     WorkPackageTablePaginationComponent,
@@ -309,14 +320,25 @@ import {WpTableConfigurationTimelinesTab} from 'core-components/wp-table/configu
     WorkPackageDetailsViewButtonComponent,
     WorkPackageTimelineButtonComponent,
     WorkPackageZenModeButtonComponent,
-    WorkPackageFilterContainerComponent,
-    Ng1QueryFiltersComponentWrapper,
     WpResizerDirectiveUpgraded,
     WpCustomActionComponent,
     WpCustomActionsComponent,
     WorkPackageTableSumsRowController,
     SortHeaderDirective,
 
+    // Query filters
+    WorkPackageFilterContainerComponent,
+    QueryFiltersComponent,
+    QueryFilterComponent,
+    FilterBooleanValueComponent,
+    FilterDateValueComponent,
+    FilterDatesValueComponent,
+    FilterDateTimeValueComponent,
+    FilterDateTimesValueComponent,
+    FilterIntegerValueComponent,
+    FilterStringValueComponent,
+    FilterToggledMultiselectValueComponent,
+
     // Add functionality to rails rendered templates
     HideSectionComponent,
     HideSectionLinkComponent,

frontend/app/components/filters/abstract-filter-date-time-value/abstract-filter-date-time-value.controller.ts

@@ -26,16 +26,13 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-
-import {filtersModule} from '../../../angular-modules';
 import {Moment} from 'moment';
 import {QueryFilterInstanceResource} from '../../api/api-v3/hal-resources/query-filter-instance-resource.service';
 
 export abstract class AbstractDateTimeValueController {
   public filter:QueryFilterInstanceResource;
 
-  constructor(protected $scope:ng.IScope,
-              protected I18n:op.I18n,
+  constructor(protected I18n:op.I18n,
               protected TimezoneService:any) {
     _.remove(this.filter.values as string[], value => !this.TimezoneService.isValidISODateTime(value));
   }
@@ -48,7 +45,23 @@ export abstract class AbstractDateTimeValueController {
         updateOn: 'default change blur',
         debounce: {'default': 400, 'change': 0, 'blur': 0}
     };
-  };
+  }
+
+  public isoDateParser(data:string) {
+    if (!this.TimezoneService.isValidISODate(data)) {
+      return '';
+    }
+    var d = this.TimezoneService.parseLocalDateTime(data);
+    return this.TimezoneService.formattedISODateTime(d);
+  }
+
+  public isoDateFormatter(data:string) {
+    if (!this.TimezoneService.isValidISODateTime(data)) {
+      return '';
+    }
+    var d = this.TimezoneService.parseISODatetime(data);
+    return this.TimezoneService.formattedISODate(d);
+  }
 
   public get isTimeZoneDifferent() {
     let value = this.lowerBoundary || this.upperBoundary;

frontend/app/components/filters/filter-boolean-value/filter-boolean-value.component.html

@@ -0,0 +1,15 @@
+<div id="div-values-{{filter.name}}">
+  <select [(ngModel)]="value"
+          class="advanced-filters--select-field"
+          id="values-{{filter.name}}"
+          name="v[{{filter.name}}]" >
+    <option value=""
+            disabled
+            [textContent]="text.placeholder"
+            *ngIf="hasNoValue">
+    </option>
+    <option *ngFor="let value of availableOptions"
+            [textContent]="text[value]"
+            [ngValue]="value"></option>
+  </select>
+</div>

frontend/app/components/filters/filter-boolean-value/filter-boolean-value.directive.ts → frontend/app/components/filters/filter-boolean-value/filter-boolean-value.component.ts

@@ -26,21 +26,25 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-import {filtersModule} from '../../../angular-modules';
 import {QueryFilterInstanceResource} from '../../api/api-v3/hal-resources/query-filter-instance-resource.service';
+import {Component, EventEmitter, Inject, Input, Output} from '@angular/core';
+import {I18nToken} from 'core-app/angular4-transition-utils';
 
-export class BooleanValueController {
-  public filter:QueryFilterInstanceResource;
+@Component({
+  selector: 'filter-boolean-value',
+  template: require('!!raw-loader!./filter-boolean-value.component.html')
+})
+export class FilterBooleanValueComponent {
+  @Input() public filter:QueryFilterInstanceResource;
+  @Output() public filterChanged:EventEmitter<QueryFilterInstanceResource>;
 
-  public text:{ [key: string]: string; };
+  public text = {
+    placeholder: this.I18n.t('js.placeholders.selection'),
+    true: this.I18n.t('js.general_text_Yes'),
+    false: this.I18n.t('js.general_text_No')
+  }
 
-  constructor(public $scope:ng.IScope,
-              private I18n:op.I18n) {
-    this.text = {
-      placeholder: I18n.t('js.placeholders.selection'),
-      true: I18n.t('js.general_text_Yes'),
-      false: I18n.t('js.general_text_No')
-    };
+  constructor(@Inject(I18nToken) readonly I18n:op.I18n) {
   }
 
   public get value() {
@@ -49,6 +53,7 @@ export class BooleanValueController {
 
   public set value(val) {
     this.filter.values[0] = val;
+    this.filterChanged.emit(this.filter);
   }
 
   public get hasNoValue() {
@@ -59,19 +64,3 @@ export class BooleanValueController {
     return [true, false];
   }
 }
-
-function booleanValue():any {
-  return {
-    restrict: 'E',
-    replace: true,
-    scope: {
-      filter: '=',
-    },
-    templateUrl: '/components/filters/filter-boolean-value/filter-boolean-value.directive.html',
-    controller: BooleanValueController,
-    bindToController: true,
-    controllerAs: '$ctrl'
-  };
-};
-
-filtersModule.directive('filterBooleanValue', booleanValue);

frontend/app/components/filters/filter-container/filter-container.directive.html

@@ -1,5 +1,5 @@
 <div class="work-packages--filters-optional-container" [hidden]="!wpFiltersService.visible">
   <div id="query_form_content" class="hide-when-print">
-    <ng1-query-filters-wrapper></ng1-query-filters-wrapper>
+    <query-filters></query-filters>
   </div>
 </div>

frontend/app/components/filters/filter-container/filter-container.directive.ts

@@ -26,10 +26,8 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {filtersModule} from '../../../angular-modules';
 import {Component} from '@angular/core';
 import WorkPackageFiltersService from 'core-components/filters/wp-filters/wp-filters.service';
-import {downgradeComponent} from '@angular/upgrade/static';
 
 @Component({
   template: require('!!raw-loader!core-components/filters/filter-container/filter-container.directive.html'),
@@ -39,9 +37,3 @@ export class WorkPackageFilterContainerComponent {
   constructor(public wpFiltersService:WorkPackageFiltersService) {
   }
 }
-
-filtersModule.directive(
-  'filterContainer',
-  downgradeComponent({ component: WorkPackageFilterContainerComponent })
-);
-

frontend/app/components/filters/filter-date-time-value/filter-date-time-value.component.html

@@ -0,0 +1,19 @@
+<div class="inline-label" id="div-values-{{filter.id}}">
+  <op-date-picker>
+    <input [ngModel]="isoDateFormatter(value)"
+           (ngModelChange)="value = isoDateParser($event)"
+           [ngModelOptions]="filterDateModelOptions"
+           required
+           id="values-{{filter.id}}"
+           name="v[{{filter.id}}]"
+           class="advanced-filters--date-field"
+           size="10"
+           transform-date-utc
+           type="text"/>
+  </op-date-picker>
+  <span class="advanced-filters--tooltip-trigger -multiline"
+        [attr.data-tooltip]="timeZoneText"
+        *ngIf="isTimeZoneDifferent">
+    <op-icon icon-classes="icon icon-warning"></op-icon>
+  </span>
+</div>

frontend/app/components/filters/filter-date-time-value/filter-date-time-value.directive.ts → frontend/app/components/filters/filter-date-time-value/filter-date-time-value.component.ts

@@ -26,17 +26,22 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-
-import {filtersModule} from '../../../angular-modules';
 import {QueryFilterInstanceResource} from '../../api/api-v3/hal-resources/query-filter-instance-resource.service';
-import {AbstractDateTimeValueController} from '../abstract-filter-date-time-value/abstract-filter-date-time-value.controller'
+import {AbstractDateTimeValueController} from '../abstract-filter-date-time-value/abstract-filter-date-time-value.controller'
+import {Component, EventEmitter, Inject, Input, Output} from '@angular/core';
+import {I18nToken, TimezoneServiceToken} from 'core-app/angular4-transition-utils';
 
-export class DateTimeValueController extends AbstractDateTimeValueController {
+@Component({
+  selector: 'filter-date-time-value',
+  template: require('!!raw-loader!./filter-date-time-value.component.html')
+})
+export class FilterDateTimeValueComponent extends AbstractDateTimeValueController {
+  @Input() public filter:QueryFilterInstanceResource;
+  @Output() public filterChanged:EventEmitter<QueryFilterInstanceResource>;
 
-  constructor(protected $scope:ng.IScope,
-              protected I18n:op.I18n,
-              protected TimezoneService:any) {
-    super($scope, I18n, TimezoneService);
+  constructor(@Inject(I18nToken) readonly I18n:op.I18n,
+              @Inject(TimezoneServiceToken) readonly TimezoneService:any) {
+    super(I18n, TimezoneService);
   }
 
   public get value() {
@@ -45,37 +50,18 @@ export class DateTimeValueController extends AbstractDateTimeValueController {
 
   public set value(val) {
     this.filter.values = [val as string];
+    this.filterChanged.emit(this.filter);
   }
 
   public get lowerBoundary() {
     if (this.value && this.TimezoneService.isValidISODateTime(this.value)) {
       return this.TimezoneService.parseDatetime(this.value);
-    } else {
-      null
     }
   }
 
   public get upperBoundary() {
     if (this.value && this.TimezoneService.isValidISODateTime(this.value)) {
       return this.TimezoneService.parseDatetime(this.value).add(24, 'hours');
-    } else {
-      null
     }
   }
 }
-
-function dateTimeValue():any {
-  return {
-    restrict: 'E',
-    replace: true,
-    scope: {
-      filter: '=',
-    },
-    templateUrl: '/components/filters/filter-date-time-value/filter-date-time-value.directive.html',
-    controller: DateTimeValueController,
-    bindToController: true,
-    controllerAs: '$ctrl'
-  };
-};
-
-filtersModule.directive('filterDateTimeValue', dateTimeValue);

frontend/app/components/filters/filter-date-times-value/filter-date-times-value.component.html

@@ -0,0 +1,33 @@
+<div id="div-values-{{filter.id}}" class="inline-label">
+  <op-date-picker>
+    <input [ngModel]="isoDateFormatter(begin)"
+           (ngModelChange)="begin = isoDateParser($event)"
+           [ngModelOptions]="filterDateModelOptions"
+           [disabled]="isLoading"
+           required
+           id="values-{{filter.id}}-begin"
+           name="v[{{filter.id}}]-begin"
+           class="advanced-filters--date-field"
+           size="10"
+           type="text"/>
+  </op-date-picker>
+
+  <span class="advanced-filters--affix" [textContent]="text.spacer">
+  </span>
+
+  <op-date-picker>
+    <input [ngModel]="isoDateFormatter(end)"
+           (ngModelChange)="end = isoDateParser($event)"
+           [ngModelOptions]="filterDateModelOptions"
+           [disabled]="isLoading"
+           id="values-{{filter.id}}-end"
+           name="v[{{filter.id}}]-end"
+           class="advanced-filters--date-field"
+           size="10">
+  </op-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>