[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
This commit is contained in:
Silviu Popa
2019-02-25 12:27:32 +02:00
committed by Maurizio Vitale
parent ae1fbd523a
commit 687257e45e
3 changed files with 28 additions and 15 deletions

View File

@@ -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>

View File

@@ -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;
if (typeof newDateValue === 'string') {
momentDate = moment(newDateValue, this.FORMAT_DATE, true);
} else {
momentDate = newDateValue;
}
let momentDate = moment(newDateValue, this.FORMAT_DATE, true);
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});
}
}
}

View File

@@ -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
]