feat: colored statuses chips (#1272)

src/app/components/filters/filters-dialog-or.component.spec.ts

@@ -36,7 +36,7 @@ describe('FiltersDialogOrComponent', () => {
   });
 
   it('should get icon', () => {
-    expect(component.getIcon('add')).toEqual('add');
+    expect(component.getIcon('add')).toEqual('add_circle');
     expect(component.getIcon('more')).toEqual('more_vert');
     expect(component.getIcon('delete')).toEqual('delete');
   });

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

@@ -101,6 +101,6 @@ describe('FiltersDialogComponent', () => {
   });
 
   it('should get icon', () => {
-    expect(component.getIcon('add')).toEqual('add');
+    expect(component.getIcon('heart')).toEqual('favorite');
   });
 });

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

@@ -78,7 +78,7 @@ describe('FiltersToolbarComponent', () => {
   });
 
   it('should get icon', () => {
-    expect(component.getIcon('add')).toEqual('add');
+    expect(component.getIcon('heart')).toEqual('favorite');
   });
 
   describe('toggleShow', () => {

src/app/components/inspection-header.component.html

@@ -5,8 +5,6 @@
     <mat-icon aria-hidden="true" [fontIcon]="getIcon('copy')" />
   </button>
   @if(status) {
-    <mat-chip color="accent" highlighted right>
-      <span id="status">{{ status }}</span>
-    </mat-chip>
+    <app-status-chip [status]="status" right />
   }
 </app-page-header>

src/app/components/inspection-header.component.spec.ts

@@ -45,7 +45,11 @@ describe('InspectionHeaderComponent', () => {
   });
 
   it('should set "status"', () => {
-    const status = 'Completed';
+    const status = {
+      label: 'Completed',
+      color: 'darkgreen',
+      icon: 'success',
+    };
     component.status = status;
     expect(component.status).toEqual(status);
   });

src/app/components/inspection-header.component.ts

@@ -5,9 +5,11 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { StatusLabelColor } from '@app/types/status';
 import { IconsService } from '@services/icons.service';
 import { NotificationService } from '@services/notification.service';
 import { PageHeaderComponent } from './page-header.component';
+import { StatusChipComponent } from './status-chip.component';
 
 @Component({
   selector: 'app-inspection-header',
@@ -21,6 +23,7 @@ import { PageHeaderComponent } from './page-header.component';
     CdkCopyToClipboard,
     MatTooltipModule,
     MatChipsModule,
+    StatusChipComponent,
   ],
   providers: [
     IconsService,
@@ -46,15 +49,15 @@ export class InspectionHeaderComponent {
     }
   }
 
-  @Input({ required: false }) status: string | undefined;
+  @Input({ required: false }) status: StatusLabelColor | undefined;
   @Input({ required: false }) sharableURL: string | null;
 
   get id() {
     return this._id;
   }
 
-  getIcon(name: string) {
-    return this.iconsService.getIcon(name);
+  getIcon(name: string | undefined) {
+    return name ? this.iconsService.getIcon(name) : '';
   }
 
   onCopyId() {

src/app/components/inspection/field-content.component.spec.ts

@@ -3,7 +3,7 @@ import { Clipboard } from '@angular/cdk/clipboard';
 import { TestBed } from '@angular/core/testing';
 import { TaskOptions, TaskRaw } from '@app/tasks/types';
 import { Field } from '@app/types/column.type';
-import { Status } from '@app/types/data';
+import { Status } from '@app/types/status';
 import { Duration, Timestamp } from '@ngx-grpc/well-known-types';
 import { DurationPipe } from '@pipes/duration.pipe';
 import { IconsService } from '@services/icons.service';

src/app/components/inspection/field-content.component.ts

@@ -8,7 +8,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterLink } from '@angular/router';
 import { TaskOptions } from '@app/tasks/types';
 import { ColumnType, Field } from '@app/types/column.type';
-import { DataRaw, Status } from '@app/types/data';
+import { DataRaw } from '@app/types/data';
+import { Status } from '@app/types/status';
 import { Duration, Timestamp } from '@ngx-grpc/well-known-types';
 import { DurationPipe } from '@pipes/duration.pipe';
 import { EmptyCellPipe } from '@pipes/empty-cell.pipe';

src/app/components/inspection/inspection-card.component.html

@@ -4,5 +4,5 @@
 </mat-toolbar>
 }
 <mat-card>
-  <app-inspection [fields]="fields" [optionsFields]="optionsFields" [data]="data" [statuses]="statuses" />
+  <app-inspection [fields]="fields" [optionsFields]="optionsFields" [data]="data" />
 </mat-card>

src/app/components/inspection/inspection-card.component.spec.ts

@@ -1,11 +1,9 @@
-import { TaskStatus } from '@aneoconsultingfr/armonik.api.angular';
 import { TaskOptions, TaskRaw } from '@app/tasks/types';
 import { Field } from '@app/types/column.type';
-import { Status } from '@app/types/data';
 import { InspectionCardComponent } from './inspection-card.component';
 
 describe('InspectionCardComponent', () => {
-  const component = new InspectionCardComponent<TaskRaw, TaskStatus, TaskOptions>();
+  const component = new InspectionCardComponent<TaskRaw, TaskOptions>();
 
   const data: TaskRaw = {
     id: 'taskId',
@@ -45,16 +43,10 @@ describe('InspectionCardComponent', () => {
     }
   ];
 
-  const statuses = {
-    [TaskStatus.TASK_STATUS_COMPLETED]: 'Completed',
-    [TaskStatus.TASK_STATUS_CANCELLING]: 'Cancelling',
-  } as Record<Status, string>;
-
   beforeEach(() => {
     component.fields = fields;
     component.optionsFields = optionsFields;
     component.data = data;
-    component.statuses = statuses;
   });
 
   it('should run', () => {
@@ -73,9 +65,5 @@ describe('InspectionCardComponent', () => {
     it('should init data', () => {
       expect(component.data).toEqual(data);
     });
-
-    it('should init statuses', () => {
-      expect(component.statuses).toEqual(statuses);
-    });
   });
 });

src/app/components/inspection/inspection-card.component.ts

@@ -3,7 +3,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { TaskOptions } from '@app/tasks/types';
 import { Field } from '@app/types/column.type';
-import { DataRaw, Status } from '@app/types/data';
+import { DataRaw } from '@app/types/data';
 import { InspectionComponent } from './inspection.component';
 
 @Component({
@@ -18,9 +18,8 @@ import { InspectionComponent } from './inspection.component';
   styleUrl: '../../../inspections.css',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class InspectionCardComponent<T extends DataRaw, S extends Status, O extends TaskOptions | null = null> {
+export class InspectionCardComponent<T extends DataRaw, O extends TaskOptions | null = null> {
   @Input({ required: false }) fields: Field<T>[];
   @Input({ required: false }) optionsFields: Field<O>[];
-  @Input({ required: false }) statuses: Record<S, string>;
   @Input({ required: true }) data: T | null;
 }

src/app/components/inspection/inspection-object.component.ts

@@ -2,7 +2,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { TaskOptions } from '@app/tasks/types';
 import { Field } from '@app/types/column.type';
-import { DataRaw, Status, TaskOutput } from '@app/types/data';
+import { DataRaw, TaskOutput } from '@app/types/data';
+import { Status } from '@app/types/status';
 import { PrettyPipe } from '@pipes/pretty.pipe';
 import { FieldContentComponent } from './field-content.component';
 import { MessageComponent } from './message.component';

src/app/components/inspection/inspection.component.html

@@ -1,6 +1,6 @@
 @if (fields) {
-  <app-inspection-object [fields]="fields" [statuses]="statuses" [data]="data" />
+  <app-inspection-object [fields]="fields" [data]="data" />
 }
 @if(optionsFields) {
-  <app-inspection-object [fields]="optionsFields" [statuses]="statuses" [data]="options" />
+  <app-inspection-object [fields]="optionsFields" [data]="options" />
 }

src/app/components/inspection/inspection.component.spec.ts

@@ -1,10 +1,9 @@
-import { TaskStatus } from '@aneoconsultingfr/armonik.api.angular';
 import { TaskOptions, TaskRaw } from '@app/tasks/types';
 import { Field } from '@app/types/column.type';
 import { InspectionComponent } from './inspection.component';
 
 describe('InspectionComponent', () => {
-  const component = new InspectionComponent<TaskRaw, TaskStatus, TaskOptions>();
+  const component = new InspectionComponent<TaskRaw, TaskOptions>();
 
   const data: TaskRaw = {
     id: 'taskId',
@@ -44,16 +43,10 @@ describe('InspectionComponent', () => {
     }
   ];
 
-  const statuses: Record<TaskStatus, string> = {
-    0: 'Undefined',
-    1: 'completed'
-  } as Record<TaskStatus, string>;
-
   beforeEach(() => {
     component.fields = fields;
     component.optionsFields = optionsFields;
     component.data = data;
-    component.statuses = statuses;
   });
 
   describe('initialisation', () => {
@@ -72,9 +65,5 @@ describe('InspectionComponent', () => {
     it('should set "options" object', () => {
       expect(component.options).toEqual(data.options);
     });
-
-    it('should set statuses', () => {
-      expect(component.statuses).toEqual(statuses);
-    });
   });
 });

src/app/components/inspection/inspection.component.ts

@@ -3,7 +3,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { TaskOptions } from '@app/tasks/types';
 import { Field } from '@app/types/column.type';
-import { DataRaw, Status } from '@app/types/data';
+import { DataRaw } from '@app/types/data';
 import { InspectionObjectComponent } from './inspection-object.component';
 
 @Component({
@@ -18,7 +18,7 @@ import { InspectionObjectComponent } from './inspection-object.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrl: '../../../inspections.css',
 })
-export class InspectionComponent<T extends DataRaw, S extends Status, O extends TaskOptions | null = null> {
+export class InspectionComponent<T extends DataRaw, O extends TaskOptions | null = null> {
   private _data: T = {} as T;
   private _options: NonNullable<O> = {} as NonNullable<O>;
 
@@ -39,11 +39,6 @@ export class InspectionComponent<T extends DataRaw, S extends Status, O extends
     }
   }
 
-  /**
-   * Required to display a status label.
-   */
-  @Input({ required: false }) statuses: Record<S, string>;
-
   get data(): T {
     return this._data;
   }

src/app/components/show-card-content.component.html

@@ -5,9 +5,7 @@
         <!-- Key -->
         <span class="key">{{ key | pretty }}: </span>
         <!-- Value -->
-        @if (isStatus(key)) {  
-          <span>{{ statusToLabel(key) | emptyCell }}</span>
-        } @else if (isString(key) || isNumber(key)) {
+        @if (isString(key) || isNumber(key)) {
           <span>{{ data[key] | emptyCell }}</span>
         } @else if (isTimestamp(key)) {
           <span>{{ toDate(key) | date: 'yyyy-MM-dd &nbsp;HH:mm:ss' | emptyCell}}</span>
@@ -28,7 +26,7 @@
     } @else {
       <!-- Object -->
       <span class="key">{{ key | pretty }}:</span>
-      <app-show-card-content [data]="findObject(key)" [statuses]="statuses"/>
+      <app-show-card-content [data]="findObject(key)"/>
     }
   }
 } @else if (isArray(data) && hasLength(data)) {

src/app/components/show-card-content.component.spec.ts

@@ -91,20 +91,6 @@ describe('ShowCardContentComponent', () => {
     });
   });
 
-  describe('isStatus', () => {
-    it('Should return true when a string contains "status"', () => {
-      expect(component.isStatus('status')).toBeTruthy();
-    });
-
-    it('Should return false when the given string does not have "status"', () => {
-      expect(component.isStatus('string')).toBeFalsy();
-    });
-
-    it('Should return false when the given parameter is an empty string', () => {
-      expect(component.isStatus('empty')).toBeFalsy();
-    });
-  });
-
   describe('isArray', () => {
     it('Should return true when an array is provided', () => {
       expect(component.isArray(data['array'])).toBeTruthy();
@@ -295,58 +281,6 @@ describe('ShowCardContentComponent', () => {
     });
   });
 
-  describe('statusToLabel', () => {
-    it('Should return a label if the key and data are correct', () => {
-
-      component.statuses = {1: 'first_label', 2: 'second_label'};
-
-      component.data = {
-        first_key: '1',
-        second_key: 2, 
-        third_key: ['45', '62']
-      };
-      expect(component.statusToLabel('first_key')).toEqual('first_label');
-      expect(component.statusToLabel('second_key')).toEqual('second_label');
-    });
-
-    it('Should return "null" if no data is provided', () => {
-      component.statuses = {1: 'first_label', 2: 'second_label'};
-      expect(component.statusToLabel('first_key')).toBeNull();
-    });
-
-    it('Should return "null" if no statuses are provided', () => {
-      component.data = {
-        first_key: '1',
-        second_key: 2, 
-        third_key: ['45', '62']
-      };
-      expect(component.statusToLabel('first_key')).toBeNull();
-    });
-
-    it('Should return "null" if the data key is invalid', () => {
-      component.statuses = {1: 'first_label', 2: 'second_label'};
-
-      component.data = {
-        first_key: '1',
-        second_key: 2, 
-        third_key: ['45', '62']
-      };
-      expect(component.statusToLabel('some_random_key')).toBeNull();
-    });
-
-    it('Should return "null" if the data value is invalid', () => {
-      component.statuses = {1: 'first_label', 2: 'second_label'};
-
-      component.data = {
-        first_key: 'invalid data',
-        second_key: 3, 
-        third_key: ['45', '62']
-      };
-      expect(component.statusToLabel('first_key')).toBeNull();
-      expect(component.statusToLabel('second_key')).toBeNull();
-    });
-  });
-
   describe('toDate', () => {
     it ('should return a date from a timestamp', () => {
       expect(component.toDate('time')).toEqual(new Date(179543301000));