[ADF-4143] EditTaskFilterComponent - change date format (#4342)

* [ADF-4143] EditTaskFilterComponent - change date format

* [ADF-4143] EditTaskFilter - fix date filtering

* [ADF-4143] - lint

* [ADF-4143] - refractor

* [ADF-4143] - fix failing unit test

* [ADF-4143] EditTaskFilter - replace datepicker form-control with ngModel

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.html

@@ -47,7 +47,8 @@
                             (dateChange)="onDateChanged($event.value, taskFilterProperty)"
                             [matDatepicker]="dateController"
                             placeholder="{{taskFilterProperty.label | translate}}"
-                            [formControlName]="taskFilterProperty.key"
+                            [(ngModel)]="dateFilter[taskFilterProperty.key]"
+                            [ngModelOptions]="{standalone: true}"
                             [attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key">
                     <mat-datepicker-toggle matSuffix [for]="dateController" [attr.data-automation-id]="'adf-cloud-edit-task-property-date-toggle' + taskFilterProperty.key"></mat-datepicker-toggle>
                     <mat-datepicker #dateController [attr.data-automation-id]="'adf-cloud-edit-task-property-date-picker' + taskFilterProperty.key"></mat-datepicker>

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.ts

@@ -15,24 +15,25 @@
  * limitations under the License.
  */
 
-import { Component, OnChanges, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
+import { Component, OnChanges, Input, Output, EventEmitter, SimpleChanges, OnInit } from '@angular/core';
 import { AbstractControl, FormGroup, FormBuilder } from '@angular/forms';
 import { TaskFilterCloudModel, FilterActionType, TaskFilterProperties } from './../models/filter-cloud.model';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
-import { MatDialog } from '@angular/material';
+import { MatDialog, DateAdapter } from '@angular/material';
 import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
-import { TranslationService } from '@alfresco/adf-core';
+import { TranslationService, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
 import { debounceTime, filter } from 'rxjs/operators';
 import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
 import { ApplicationInstanceModel } from '../../../app/models/application-instance.model';
 import moment from 'moment-es6';
+import { Moment } from 'moment';
 
 @Component({
     selector: 'adf-cloud-edit-task-filter',
     templateUrl: './edit-task-filter-cloud.component.html',
     styleUrls: ['./edit-task-filter-cloud.component.scss']
 })
-export class EditTaskFilterCloudComponent implements OnChanges {
+export class EditTaskFilterCloudComponent implements OnInit, OnChanges {
 
     public static ACTION_SAVE = 'SAVE';
     public static ACTION_SAVE_AS = 'SAVE_AS';
@@ -98,6 +99,7 @@ export class EditTaskFilterCloudComponent implements OnChanges {
     ];
 
     applicationNames: any[] = [];
+    dateFilter: any[] = [];
     formHasBeenChanged = false;
     editTaskFilterForm: FormGroup;
     taskFilterProperties: any[] = [];
@@ -108,9 +110,17 @@ export class EditTaskFilterCloudComponent implements OnChanges {
         public dialog: MatDialog,
         private translateService: TranslationService,
         private taskFilterCloudService: TaskFilterCloudService,
+        private dateAdapter: DateAdapter<Moment>,
+        private userPreferencesService: UserPreferencesService,
         private appsProcessCloudService: AppsProcessCloudService) {
     }
 
+    ngOnInit() {
+        this.userPreferencesService.select(UserPreferenceValues.Locale).subscribe((locale) => {
+            this.dateAdapter.setLocale(locale);
+        });
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         const id = changes['id'];
         if (id && id.currentValue !== id.previousValue) {
@@ -185,18 +195,13 @@ export class EditTaskFilterCloudComponent implements OnChanges {
 
     onDateChanged(newDateValue: any, dateProperty: TaskFilterProperties) {
         if (newDateValue) {
-            let momentDate;
+            let momentDate = moment(newDateValue, this.FORMAT_DATE, true);
-
-            if (typeof newDateValue === 'string') {
-                momentDate = moment(newDateValue, this.FORMAT_DATE, true);
-            } else {
-                momentDate = newDateValue;
-            }
 
             if (momentDate.isValid()) {
                 this.getPropertyController(dateProperty).setValue(momentDate.toDate());
+                this.getPropertyController(dateProperty).setErrors(null);
             } else {
-                this.getPropertyController(dateProperty).setErrors({ invalid: true });
+                this.getPropertyController(dateProperty).setErrors({invalid: true});
             }
         }
     }

lib/process-services-cloud/src/lib/task/task-filters/task-filters-cloud.module.ts

@@ -21,12 +21,13 @@ import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { TaskFiltersCloudComponent } from './components/task-filters-cloud.component';
 import { MaterialModule } from '../../material.module';
-import { LogService, StorageService, CoreModule } from '@alfresco/adf-core';
+import { LogService, StorageService, CoreModule, MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
 import { TaskFilterCloudService } from './services/task-filter-cloud.service';
 import { HttpClientModule } from '@angular/common/http';
 import { EditTaskFilterCloudComponent } from './components/edit-task-filter-cloud.component';
 import { TaskFilterDialogCloudComponent } from './components/task-filter-dialog-cloud.component';
 import { AppListCloudModule } from './../../app/app-list-cloud.module';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 
 @NgModule({
     imports: [
@@ -41,7 +42,13 @@ import { AppListCloudModule } from './../../app/app-list-cloud.module';
     ],
     declarations: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent, TaskFilterDialogCloudComponent],
     exports: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent],
-    providers: [TaskFilterCloudService, LogService, StorageService],
+    providers: [
+        TaskFilterCloudService,
+        LogService,
+        StorageService,
+        { provide: DateAdapter, useClass: MomentDateAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }
+    ],
     entryComponents: [
         TaskFilterDialogCloudComponent
     ]