feat: inspection display components (#1188)

Co-authored-by: faustin <[email protected]>
Co-authored-by: ngruelaneo <[email protected]>

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

@@ -0,0 +1,3 @@
+<mat-card>
+  <app-inspection [fields]="fields" [optionsFields]="optionsFields" [data]="data" [statuses]="statuses" />
+</mat-card>

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

@@ -0,0 +1,81 @@
+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 data: TaskRaw = {
+    id: 'taskId',
+    options: {
+      applicationName: 'string',
+    }
+  } as TaskRaw;
+
+  const fields: Field<TaskRaw>[] = [
+    {
+      key: 'id',
+      type: 'link',
+      link: 'tasks'
+    },
+    {
+      key: 'sessionId',
+      type: 'link',
+      link: 'sessions'
+    },
+    {
+      key: 'options',
+      type: 'object'
+    },
+    {
+      key: 'createdAt',
+      type: 'date'
+    }
+  ];
+
+  const optionsFields: Field<TaskOptions>[] = [
+    {
+      key: 'applicationName',
+    },
+    {
+      key: 'options',
+      type: 'object'
+    }
+  ];
+
+  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', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('initialisation', () => {
+    it('should init fields', () => {
+      expect(component.fields).toEqual(fields);
+    });
+
+    it('should init options fields', () => {
+      expect(component.optionsFields).toEqual(optionsFields);
+    });
+
+    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

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { TaskOptions } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
+import { DataRaw, Status } from '@app/types/data';
+import { InspectionComponent } from './inspection.component';
+
+@Component({
+  selector: 'app-inspection-card',
+  templateUrl: 'inspection-card.component.html',
+  standalone: true,
+  imports: [
+    MatCardModule,
+    InspectionComponent
+  ],
+  styleUrl: '../../../inspections.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InspectionCardComponent<T extends DataRaw, S extends Status, 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.component.html

@@ -0,0 +1,11 @@
+<app-inspection-object [fields]="fields" [statuses]="statuses" [data]="data" />
+@if(optionsFields) {
+  <mat-accordion>
+    <mat-expansion-panel id="options">
+      <mat-expansion-panel-header>
+        <strong>Options</strong>
+      </mat-expansion-panel-header>
+      <app-inspection-object [fields]="optionsFields" [statuses]="statuses" [data]="options" />
+    </mat-expansion-panel>
+  </mat-accordion>
+}

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

@@ -0,0 +1,80 @@
+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 data: TaskRaw = {
+    id: 'taskId',
+    options: {
+      applicationName: 'string',
+    }
+  } as TaskRaw;
+
+  const optionsFields: Field<TaskOptions>[] = [
+    {
+      key: 'applicationName',
+    },
+    {
+      key: 'options',
+      type: 'object'
+    }
+  ];
+
+  const fields: Field<TaskRaw>[] = [
+    {
+      key: 'id',
+      type: 'link',
+      link: 'tasks'
+    },
+    {
+      key: 'sessionId',
+      type: 'link',
+      link: 'sessions'
+    },
+    {
+      key: 'options',
+      type: 'object'
+    },
+    {
+      key: 'createdAt',
+      type: 'date'
+    }
+  ];
+
+  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', () => {
+    it('should set fields without options fields', () => {
+      expect(component.fields).toEqual(fields);
+    });
+
+    it('should set optionsFields', () => {
+      expect(component.optionsFields).toEqual(optionsFields);
+    });
+
+    it('should set data', () => {
+      expect(component.data).toEqual(data);
+    });
+
+    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

@@ -0,0 +1,52 @@
+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 } from '@app/types/data';
+import { InspectionObjectComponent } from './inspection-object.component';
+
+@Component({
+  selector: 'app-inspection',
+  templateUrl: 'inspection.component.html',
+  standalone: true,
+  imports: [
+    InspectionObjectComponent,
+    MatExpansionModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrl: '../../../inspections.css',
+})
+export class InspectionComponent<T extends DataRaw, S extends Status, O extends TaskOptions | null = null> {
+  private _data: T = {} as T;
+  private _options: NonNullable<O> = {} as NonNullable<O>;
+
+  /**
+   * Displayed fields and their types.
+   * If none are provided, every field will be displayed as a "string".
+   */
+  @Input({ required: false }) fields: Field<T>[] | undefined;
+
+  @Input({ required: false }) optionsFields: Field<O>[] | undefined;
+
+  @Input({ required: true }) set data(entry: T | null) {
+    if (entry) {
+      this._data = entry;
+      if (entry['options' as keyof (T | O)]) {
+        this._options = entry['options' as keyof (T | O)] as NonNullable<O>;
+      }
+    }
+  }
+
+  /**
+   * Required to display a status label.
+   */
+  @Input({ required: false }) statuses: Record<S, string>;
+
+  get data(): T {
+    return this._data;
+  }
+
+  get options() {
+    return this._options;
+  }
+}