chore: optimize filters (#1269)

src/app/applications/index.component.ts

@@ -8,8 +8,8 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { DashboardIndexService } from '@app/dashboard/services/dashboard-index.service';
 import { DashboardStorageService } from '@app/dashboard/services/dashboard-storage.service';
 import { TasksStatusesService } from '@app/tasks/services/tasks-statuses.service';
-import { DATA_FILTERS_SERVICE } from '@app/tokens/filters.token';
 import { TableHandler } from '@app/types/components';
+import { DataFilterService } from '@app/types/services/data-filter.service';
 import { TableType } from '@app/types/table';
 import { FiltersToolbarComponent } from '@components/filters/filters-toolbar.component';
 import { PageHeaderComponent } from '@components/page-header.component';
@@ -52,7 +52,7 @@ import { ApplicationRaw } from './types';
     TasksStatusesService,
     ApplicationsFiltersService,
     {
-      provide: DATA_FILTERS_SERVICE,
+      provide: DataFilterService,
       useExisting: ApplicationsFiltersService
     },
     DashboardIndexService,

src/app/applications/services/applications-filters.service.ts

@@ -2,13 +2,13 @@ import { ApplicationRawEnumField } from '@aneoconsultingfr/armonik.api.angular';
 import { Injectable } from '@angular/core';
 import { Scope } from '@app/types/config';
 import { FilterFor } from '@app/types/filter-definition';
-import { AbstractFilterService } from '@app/types/services/filtersService';
+import { DataFilterService } from '@app/types/services/data-filter.service';
 import { ApplicationFilterField, ApplicationRawFilters, ApplicationsFiltersDefinition } from '../types';
 
 @Injectable({
   providedIn: 'root'
 })
-export class ApplicationsFiltersService extends AbstractFilterService<ApplicationRawEnumField> {
+export class ApplicationsFiltersService extends DataFilterService<ApplicationRawEnumField> {
   protected readonly scope: Scope = 'applications';
   readonly rootField: Record<ApplicationRawEnumField, string> = {
     [ApplicationRawEnumField.APPLICATION_RAW_ENUM_FIELD_NAME]: $localize`Name`,

src/app/components/filters/filters-chips.component.html

@@ -1,11 +1,7 @@
 <mat-chip-listbox>
-  @for(filter of filtersAnd; track filter.field) {
+  @for(filter of filters(); track $index) {
     <mat-chip class="mat-mdc-standard-chip mat-primary mat-mdc-chip-selected">
-      @if(filter.field) {
-        <span>{{ content(filter) }}</span>
-      } @else {
-        <span i18n>No field</span>
-      }
+      <span>{{ filter }}</span>
     </mat-chip>
     @if(!$last) {
       <span class="text" i18n>AND</span>

src/app/components/filters/filters-chips.component.spec.ts

@@ -1,28 +1,32 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DATA_FILTERS_SERVICE } from '@app/tokens/filters.token';
+import { FilterDateOperator, FilterDurationOperator, FilterStatusOperator, FilterStringOperator, TaskOptionEnumField, TaskSummaryEnumField } from '@aneoconsultingfr/armonik.api.angular';
+import { TestBed } from '@angular/core/testing';
 import { FilterDefinition } from '@app/types/filter-definition';
-import { Filter } from '@app/types/filters';
+import { DataFilterService } from '@app/types/services/data-filter.service';
 import { FiltersService } from '@services/filters.service';
 import { UtilsService } from '@services/utils.service';
 import { FiltersChipsComponent } from './filters-chips.component';
 
 describe('FiltersChipsComponent', () => {
   let component: FiltersChipsComponent<number, number | null>;
-  let fixture: ComponentFixture<FiltersChipsComponent<number, number | null>>;
-  const mockDataFilterService = {
-    retrieveFiltersDefinitions: jest.fn(() => {
-      return filterDefinitions;
-    }),
-    retrieveLabel: jest.fn()
-  };
-  const filterDefinitions: FilterDefinition<number, number>[] = [
+
+  const labels = {
+    [TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_TASK_ID]: 'TaskId',
+    [TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_STATUS]: 'Status',
+    [TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_CREATED_AT]: 'CreatedAt',
+  } as Record<TaskSummaryEnumField, string>;
+
+  const optionsLabels = {
+    [TaskOptionEnumField.TASK_OPTION_ENUM_FIELD_MAX_DURATION]: 'Max Duration',
+  } as Record<TaskOptionEnumField, string>;
+
+  const filtersDefinitions: FilterDefinition<TaskSummaryEnumField, TaskOptionEnumField>[] = [
     {
-      field: 4,
-      type: 'number',
+      field: TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_TASK_ID,
+      type: 'string',
       for: 'root'
     },
     {
-      field: 1,
+      field: TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_STATUS,
       type: 'status',
       for: 'root',
       statuses: [
@@ -31,127 +35,134 @@ describe('FiltersChipsComponent', () => {
       ]
     },
     {
-      field: 2,
-      type: 'string',
+      field: TaskOptionEnumField.TASK_OPTION_ENUM_FIELD_MAX_DURATION,
+      type: 'duration',
       for: 'options'
     },
     {
-      field: 3,
-      type: 'array',
-      for: 'root'
-    },
-    {
-      field: 6,
+      field: TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_CREATED_AT,
       type: 'date',
       for: 'root'
-    },
-    ({
-      field: 5,
-      type: 'unknownType',
-      for: 'root'
-    } as unknown as FilterDefinition<number, number>),
-    {
-      field: 1,
-      type: 'duration',
-      for: 'options'
     }
   ];
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  const mockDataFilterService = {
+    filtersDefinitions: filtersDefinitions,
+    retrieveLabel: jest.fn((for_: string, field: TaskSummaryEnumField | TaskOptionEnumField) => {
+      if (for_ === 'root') {
+        return labels[field as TaskSummaryEnumField];
+      } else {
+        return optionsLabels[field as TaskOptionEnumField];
+      }
+    })
+  };
+
+  beforeAll(() => {
+    component = TestBed.configureTestingModule({
       providers: [
         FiltersChipsComponent,
         FiltersService,
         UtilsService,
-        { provide: DATA_FILTERS_SERVICE, useValue: mockDataFilterService }
+        { provide: DataFilterService, useValue: mockDataFilterService }
       ]
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FiltersChipsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-
-    mockDataFilterService.retrieveLabel.mockImplementation((for_: string, field: number) => {
-      if (for_ === 'root' && field === 4) return 'number';
-      else if (for_ === 'root' && field === 1) return 'status';
-      else if (for_ === 'root' && field === 6) return 'date';
-      else return 'other';
-    });
+    }).inject(FiltersChipsComponent);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should create the content of the component', () => {
-    const filter: Filter<number, number> = {
-      field: 4,
-      for: 'root',
-      operator: 1,
-      value: 2
-    };
-    expect(component.content(filter)).toEqual('number Not Equal 2');
-  });
-
-  it('should create the content of the component with statuses', () => {
-    const filter: Filter<number, number> = {
-      field: 1,
-      for: 'root',
-      operator: 0,
-      value: 'status1'
-    };
-    expect(component.content(filter)).toEqual('status Equal dispatched');
-  });
-
-  it('should create the label of the date filter', () => {
-    const filter: Filter<number, number> = {
-      field: 6,
-      for: 'root',
-      operator: 0,
-      value: 0
-    };
-    expect(component.content(filter)).toEqual('date Equal Thu, 01 Jan 1970 00:00:00 GMT');
+  describe('Filters cases', () => {
+    it('should create the label of a filter', () => {
+      component.filtersAnd = [{
+        field: TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_TASK_ID,
+        for: 'root',
+        operator: FilterStringOperator.FILTER_STRING_OPERATOR_EQUAL,
+        value: '0',
+      }];
+      expect(component.filters()).toEqual(['TaskId Equal 0']);
+    });
+
+    it('should create the label of a status filter', () => {
+      component.filtersAnd = [{
+        field: TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_STATUS,
+        for: 'root',
+        operator: FilterStatusOperator.FILTER_STATUS_OPERATOR_NOT_EQUAL,
+        value: 'status1',
+      }];
+      expect(component.filters()).toEqual(['Status Not Equal dispatched']);
+    });
+
+    it('should create the label of a date filter', () => {
+      component.filtersAnd = [{
+        field: TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_CREATED_AT,
+        for: 'root',
+        operator: FilterDateOperator.FILTER_DATE_OPERATOR_AFTER_OR_EQUAL,
+        value: '0',
+      }];
+      expect(component.filters()).toEqual(['CreatedAt After or Equal Thu, 01 Jan 1970 00:00:00 GMT']);
+    });
+
+    it('should create the label of a duration filter', () => {
+      component.filtersAnd = [{
+        field: TaskOptionEnumField.TASK_OPTION_ENUM_FIELD_MAX_DURATION,
+        for: 'options',
+        operator: FilterDurationOperator.FILTER_DURATION_OPERATOR_LONGER_THAN_OR_EQUAL,
+        value: '94350',
+      }];
+      expect(component.filters()).toEqual(['Max Duration Longer or Equal 26h 12m 30s']);
+    });
+
+    it('should create the label of a custom filter', () => {
+      component.filtersAnd = [{
+        field: 'CustomField',
+        for: 'custom',
+        operator: FilterStringOperator.FILTER_STRING_OPERATOR_CONTAINS,
+        value: 'a'
+      }];
+      expect(component.filters()).toEqual(['CustomField Contains a']);
+    });
   });
 
-  it('should create the content of the component even with no for', () => {
-    const filter: Filter<number, number> = {
-      field: 1,
-      for: null,
-      operator: 0,
-      value: 'status1'
-    };
-    expect(component.content(filter)).toEqual('status Equal dispatched');
-  });
+  describe('Error cases', () => {
+    it('should create the label if there is no field', () => {
+      component.filtersAnd = [{
+        field: null,
+        for: 'root',
+        operator: FilterDateOperator.FILTER_DATE_OPERATOR_BEFORE_OR_EQUAL,
+        value: 'abc'
+      }];
+      expect(component.filters()).toEqual(['No field']);
+    });
 
-  it('should create the content of the component with a custom filter', () => {
-    const filter: Filter<number, number> = {
-      field: 'test',
-      operator: 0,
-      for: 'custom',
-      value: 'True'
-    };
-    expect(component.content(filter)).toEqual('test Equal True');
-  });
+    it('should create the label if there is no operator', () => {
+      component.filtersAnd = [{
+        field: TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_TASK_ID,
+        for: 'root',
+        operator: null,
+        value: 'a'
+      }];
+      expect(component.filters()).toEqual(['No operator']);
+    });
 
-  it('should not create the content if there is no values', () => {
-    const filter: Filter<number, number> = {
-      field: 2,
-      for: 'options',
-      operator: 1,
-      value: null
-    };
-    expect(component.content(filter)).toEqual('other has no value');
-  });
+    it('should create the label if there is no value', () => {
+      component.filtersAnd = [{
+        field: TaskOptionEnumField.TASK_OPTION_ENUM_FIELD_MAX_DURATION,
+        for: 'options',
+        operator: FilterDurationOperator.FILTER_DURATION_OPERATOR_EQUAL,
+        value: null
+      }];
+      expect(component.filters()).toEqual(['Max Duration has no value']);
+    });
 
-  it('should show a duration appropriately', () => {
-    const filter: Filter<number, number> = {
-      field: 1,
-      for: 'options',
-      operator: 1,
-      value: 94350
-    };
-    expect(component.content(filter)).toEqual('other Not Equal 26h 12m 30s');
+    it('should create the label if the field is invalid', () => {
+      component.filtersAnd = [{
+        field: TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_FETCHED_AT,
+        for: 'root',
+        operator: FilterDateOperator.FILTER_DATE_OPERATOR_BEFORE_OR_EQUAL,
+        value: '12349000'
+      }];
+      expect(component.filters()).toEqual(['Invalid Filter Field']);
+    });
   });
 });