Merge pull request #1192 from aneoconsulting/chore/update-components-…

…for-inspection

chore: update components for inspection

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

@@ -38,8 +38,8 @@ describe('InspectionHeaderComponent', () => {
       expect(component.id).toEqual(id);
     });
 
-    it('should not change "id" if a undefined value is provided', () => {
-      component.id = undefined;
+    it('should not change "id" if a null value is provided', () => {
+      component.id = null;
       expect(component.id).toEqual(id);
     });
   });

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

@@ -40,7 +40,7 @@ export class InspectionHeaderComponent {
 
   private _id = '';
 
-  @Input({ required: true }) set id(entry: string | undefined) {
+  @Input({ required: true }) set id(entry: string | null) {
     if (entry) {
       this._id = entry;
     }

src/app/components/show-page.component.html

@@ -1,11 +1,12 @@
-<app-page-header [sharableURL]="sharableURL">
-  <ng-content></ng-content>
-  <span>{{ id }}</span> 
-  <button mat-icon-button [cdkCopyToClipboard]="id ?? ''" (cdkCopyToClipboardCopied)="onCopiedTaskId()">
-    <mat-icon aria-hidden="true" fontIcon="content_copy" />
-  </button>
-</app-page-header>
+<app-inspection-header [id]="id" [status]="status" [sharableURL]="sharableURL">
+  <ng-content title select="[title]" />
+</app-inspection-header>
 
-<app-show-actions [actionsButton]="actionsButton" (refresh)="onRefresh()" />
+<app-inspection-toolbar (refresh)="onRefresh()">
+  <ng-content select="[actions]" actions />
+  <ng-content select="[bonus-actions]" bonus-actions />
+</app-inspection-toolbar>
 
-<app-show-card [data]="data" [statuses]="statuses" />
+<app-inspection-card [data]="data" [statuses]="statuses" [fields]="fields" [optionsFields]="optionsFields"/>
+
+<app-inspection-list-grid [arrays]="arrays" [data]="data">

src/app/components/show-page.component.spec.ts

@@ -1,20 +1,14 @@
 import { TestBed } from '@angular/core/testing';
 import { DataRaw } from '@app/types/data';
-import { NotificationService } from '@services/notification.service';
 import { ShowPageComponent } from './show-page.component';
 
 describe('ShowPageComponent', () => {
   let component: ShowPageComponent<DataRaw>;
-
-  const mockNotificationService = {
-    success: jest.fn()
-  };
 
   beforeEach(() => {
     component = TestBed.configureTestingModule({
       providers: [
         ShowPageComponent,
-        {provide: NotificationService, useValue: mockNotificationService}
       ]
     }).inject(ShowPageComponent);
   });
@@ -23,11 +17,6 @@ describe('ShowPageComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should call a notification success on copy', () => {
-    component.onCopiedTaskId();
-    expect(mockNotificationService.success).toHaveBeenCalledWith('Task ID copied to clipboard');
-  });
-
   it('should emit on refresh', () => {
     const refreshSpy = jest.spyOn(component.refresh, 'emit');
     component.onRefresh();

src/app/components/show-page.component.ts

@@ -1,13 +1,12 @@
-import { ClipboardModule } from '@angular/cdk/clipboard';
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { TaskOptions } from '@app/tasks/types';
+import { Field } from '@app/types/column.type';
 import { ShowActionButton } from '@app/types/components/show';
 import { DataRaw } from '@app/types/data';
-import { NotificationService } from '@services/notification.service';
-import { PageHeaderComponent } from './page-header.component';
+import { InspectionCardComponent } from './inspection/inspection-card.component';
+import { InspectionListGridComponent } from './inspection/inspection-list-grid.component';
+import { InspectionHeaderComponent } from './inspection-header.component';
+import { InspectionToolbarComponent } from './inspection-toolbar.component';
 import { ShowActionsComponent } from './show-actions.component';
 import { ShowCardComponent } from './show-card.component';
 
@@ -20,33 +19,27 @@ span {
 }
   `],
   standalone: true,
-  providers: [
-    NotificationService,
-    MatSnackBar
-  ],
   imports: [
-    PageHeaderComponent,
     ShowCardComponent,
     ShowActionsComponent,
-    CommonModule,
-    MatIconModule,
-    ClipboardModule,
-    MatButtonModule
-  ]
+    InspectionCardComponent,
+    InspectionHeaderComponent,
+    InspectionListGridComponent,
+    InspectionToolbarComponent,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ShowPageComponent<T extends DataRaw>{
+export class ShowPageComponent<T extends DataRaw, O extends TaskOptions | null = null>{
   @Input({ required: true }) id: string | null = null;
   @Input({required: true }) data: T | null;
   @Input() statuses: Record<number, string> = [];
   @Input() sharableURL: string | null = null;
-  @Input({ required: true }) actionsButton: ShowActionButton[];
+  @Input({ required: false }) actionsButton: ShowActionButton[];
   @Output() refresh = new EventEmitter<never>();
-
-  #notificationService = inject(NotificationService);
-
-  onCopiedTaskId() {
-    this.#notificationService.success('Task ID copied to clipboard');
-  }
+  @Input({ required: false }) arrays: Field<T>[];
+  @Input({ required: false }) status: string | undefined;
+  @Input({ required: false }) fields: Field<T>[];
+  @Input({ required: false }) optionsFields: Field<O>[];
 
   onRefresh() {
     this.refresh.emit();

src/app/partitions/show.component.ts

@@ -39,7 +39,8 @@ import { PartitionRaw } from './types';
     TableStorageService,
     NotificationService,
     MatSnackBar,
-    FiltersService
+    FiltersService,
+    PartitionsInspectionService,
   ],
   imports: [
     ShowPageComponent,

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

@@ -30,7 +30,7 @@ export class SessionsFiltersService implements FiltersServiceOptionsInterface<Se
     [SessionRawEnumField.SESSION_RAW_ENUM_FIELD_WORKER_SUBMISSION]: $localize`Worker Submission`,
   };
 
-  readonly optionsField: Record<SessionTaskOptionEnumField, string> = {
+  readonly optionsFields: Record<SessionTaskOptionEnumField, string> = {
     [SessionTaskOptionEnumField.TASK_OPTION_ENUM_FIELD_UNSPECIFIED]: $localize`Unspecified`,
     [SessionTaskOptionEnumField.TASK_OPTION_ENUM_FIELD_MAX_DURATION]: $localize`Max Duration`,
     [SessionTaskOptionEnumField.TASK_OPTION_ENUM_FIELD_MAX_RETRIES]: $localize`Max Retries`,
@@ -171,7 +171,7 @@ export class SessionsFiltersService implements FiltersServiceOptionsInterface<Se
     case 'root':
       return this.rootField[filterField as SessionRawEnumField];
     case 'options':
-      return this.optionsField[filterField as SessionTaskOptionEnumField];
+      return this.optionsFields[filterField as SessionTaskOptionEnumField];
     default:
       throw new Error(`Unknown filter type: ${filterFor} ${filterField}`);
     }
@@ -189,7 +189,7 @@ export class SessionsFiltersService implements FiltersServiceOptionsInterface<Se
       return { for: 'root', index: index };
     }
 
-    const optionsValues = Object.values(this.optionsField);
+    const optionsValues = Object.values(this.optionsFields);
     index = optionsValues.findIndex(value => value.toLowerCase() === filterField.toLowerCase());
     return { for: 'options', index: index };
   }

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

@@ -38,7 +38,7 @@ export class TasksFiltersService implements FiltersServiceOptionsInterface<TaskS
     [TaskSummaryEnumField.TASK_SUMMARY_ENUM_FIELD_PAYLOAD_ID]: $localize`Payload ID`,
   };
 
-  readonly optionsField: Record<TaskOptionEnumField, string> = {
+  readonly optionsFields: Record<TaskOptionEnumField, string> = {
     [TaskOptionEnumField.TASK_OPTION_ENUM_FIELD_UNSPECIFIED]: $localize`Unspecified`,
     [TaskOptionEnumField.TASK_OPTION_ENUM_FIELD_MAX_DURATION]: $localize`Max Duration`,
     [TaskOptionEnumField.TASK_OPTION_ENUM_FIELD_MAX_RETRIES]: $localize`Max Retries`,
@@ -211,7 +211,7 @@ export class TasksFiltersService implements FiltersServiceOptionsInterface<TaskS
     case 'root':
       return this.rootField[filterField as TaskSummaryEnumField];
     case 'options':
-      return this.optionsField[filterField as TaskOptionEnumField];
+      return this.optionsFields[filterField as TaskOptionEnumField];
     default:
       throw new Error(`Unknown filter type: ${filterFor} ${filterField}`);
     }
@@ -229,7 +229,7 @@ export class TasksFiltersService implements FiltersServiceOptionsInterface<TaskS
       return { for: 'root', index: index };
     }
 
-    const optionsValues = Object.values(this.optionsField);
+    const optionsValues = Object.values(this.optionsFields);
     index = optionsValues.findIndex(value => value.toLowerCase() === filterField.toLowerCase());
     return { for: 'options', index: index };
   }

src/app/types/services/filtersService.ts

@@ -36,7 +36,7 @@ export interface FiltersServiceInterface<F extends FiltersEnums, O extends Filte
 }
 
 export interface FiltersServiceOptionsInterface<F extends FiltersEnums, O extends NonNullable<FiltersOptionsEnums>> extends FiltersServiceInterface<F, O> {
-  readonly optionsField: Record<O, string>;
+  readonly optionsFields: Record<O, string>;
 }
 
 export interface FiltersServiceStatusesInterface {