385169773: (feat) add devices input form

modules/ui/src/app/components/list-layout/list-layout.component.html

@@ -39,6 +39,12 @@
         >
       </mat-toolbar>
       <section class="entity-list">
+        <div
+          *ngIf="isOpenDeviceForm() && !initialDevice()"
+          class="fake-list-item">
+          <mat-icon svgIcon="draft" class="profile-draft-icon"></mat-icon>
+          New device
+        </div>
         <ng-container *ngFor="let entity of filtered(); index as i">
           <app-list-item
             [actions]="actions()"

modules/ui/src/app/components/list-layout/list-layout.component.scss

@@ -17,6 +17,12 @@
 @use 'colors';
 @use 'variables';
 
+.entity-list app-list-item:has(.selected) {
+  ::ng-deep .list-item {
+    background-color: colors.$primary-container;
+  }
+}
+
 .content {
   height: 100%;
 }
@@ -106,3 +112,18 @@
   color: colors.$on-secondary-container;
   background-color: colors.$secondary-container;
 }
+
+.fake-list-item {
+  border-radius: 16px;
+  background-color: colors.$primary-container;
+  height: 92px;
+  padding: 0 24px 0 32px;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  color: colors.$on-surface;
+  font-weight: 500;
+  font-family: variables.$font-text;
+  font-size: 16px;
+  letter-spacing: 0;
+}

modules/ui/src/app/components/list-layout/list-layout.component.ts

@@ -28,6 +28,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { ListItemComponent } from '../list-item/list-item.component';
 import { EntityAction, EntityActionResult } from '../../model/entity-action';
+import { Device } from '../../model/device';
 
 @Component({
   selector: 'app-list-layout',
@@ -45,6 +46,8 @@ import { EntityAction, EntityActionResult } from '../../model/entity-action';
 export class ListLayoutComponent<T extends object> {
   title = input<string>('');
   addEntityText = input<string>('');
+  isOpenDeviceForm = input<boolean>(false);
+  initialDevice = input<Device | null>(null);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   emptyContent = input<TemplateRef<any>>();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -60,7 +63,7 @@ export class ListLayoutComponent<T extends object> {
   addEntity = output<void>();
   menuItemClicked = output<EntityActionResult<T>>();
   updateQuery(e: Event) {
-    this.searchText.set((e.target as HTMLInputElement).value);
+    this.searchText.set((e.target as HTMLInputElement).value.trim());
   }
 
   filter(searchText: string) {

modules/ui/src/app/pages/devices/components/device-form/device.validators.ts

@@ -64,7 +64,10 @@ export class DeviceValidators {
     };
   }
 
-  public differentMACAddress(devices: Device[], device?: Device): ValidatorFn {
+  public differentMACAddress(
+    devices: Device[],
+    device: Device | null
+  ): ValidatorFn {
     return (control: AbstractControl): ValidationErrors | null => {
       const value = control.value?.trim();
       if (value && (!device || device?.mac_addr !== value)) {

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html

@@ -106,7 +106,9 @@
     >
     <input matInput style="display: none" />
 
-    <mat-radio-group formControlName="test_pack">
+    <mat-radio-group
+      formControlName="test_pack"
+      class="device-qualification-form-journey">
       <mat-radio-button
         [value]="TestingType.Qualification"
         class="device-qualification-form-journey-button">
@@ -148,4 +150,25 @@
       [format]="format"
       [optionKey]="'text'"></app-dynamic-form>
   </section>
+  <div class="device-qualification-form-actions">
+    <div>
+      <button mat-flat-button class="save-button" (click)="onSaveClicked()">
+        Save
+      </button>
+      <button
+        mat-raised-button
+        type="button"
+        class="close-button"
+        (click)="onCancelClicked()">
+        Cancel
+      </button>
+    </div>
+    <button
+      mat-raised-button
+      type="button"
+      class="delete-button"
+      (click)="onDeleteClick()">
+      Delete
+    </button>
+  </div>
 </form>

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss

@@ -112,7 +112,7 @@ $form-min-width: 285px;
 }
 
 .device-qualification-form-journey-button {
-  padding: 0 18px 0 24px;
+  padding: 0 18px;
 }
 
 .device-qualification-form-journey-button-info {
@@ -158,7 +158,12 @@ $form-min-width: 285px;
 .device-qualification-form-page {
   display: grid;
   align-content: start;
-  padding: 24px 16px;
+  padding: 24px 60px;
+}
+
+.device-qualification-form-journey {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
 
 .device-qualification-form-summary-container {
@@ -188,27 +193,32 @@ $form-min-width: 285px;
 }
 
 .device-qualification-form-actions {
-  width: variables.$device-item-width;
-  text-align: center;
-  padding: 8px 24px;
-  justify-self: center;
-  align-self: end;
-  &:has(.delete-button) {
-    text-align: right;
-  }
-  .close-button,
-  .delete-button {
-    border: 1px solid colors.$lighter-grey;
-  }
-  .delete-button {
-    float: left;
+  height: 80px;
+  padding: 16px;
+  width: calc(100% - 64px);
+  box-sizing: border-box;
+  position: sticky;
+  bottom: 20px;
+  left: 32px;
+  bottom: 25px;
+  background: colors.$surface;
+  border-radius: 32px;
+  box-shadow:
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  justify-content: space-between;
+
+  div {
+    display: flex;
+    gap: 12px;
   }
+
   .close-button {
     padding: 0 16px;
   }
-  .save-button {
-    margin-left: 16px;
-  }
 }
 
 .device-qualification-form-summary-info {

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts

@@ -19,6 +19,7 @@ import {
   OnInit,
   inject,
   input,
+  effect,
   output,
 } from '@angular/core';
 import {
@@ -100,7 +101,15 @@ export class DeviceQualificationFromComponent implements OnInit, OnDestroy {
   typeQuestion = 0;
   technologyQuestion = 2;
 
-  initialDevice = input<Device | undefined>();
+  initialDevice = input<Device | null>(null);
+
+  initialDeviceEffect = effect(() => {
+    const device = this.initialDevice();
+    if (device && device.mac_addr) {
+      this.fillDeviceForm(this.format, device);
+    }
+  });
+
   devices = input<Device[]>([]);
   testModules = input<TestModule[]>([]);
   isCreate = input<boolean>(true);

modules/ui/src/app/pages/devices/devices.component.html

@@ -22,6 +22,8 @@
     [itemTemplate]="itemTemplate"
     [actions]="vm.actions"
     [entities]="vm.devices"
+    [isOpenDeviceForm]="isOpenDeviceForm"
+    [initialDevice]="vm.selectedDevice"
     (addEntity)="openForm()"
     (menuItemClicked)="menuItemClicked($event, vm.devices, vm.testModules)">
   </app-list-layout>
@@ -35,8 +37,9 @@
     <app-device-qualification-from
       *ngIf="isOpenDeviceForm"
       [devices]="vm.devices"
+      [initialDevice]="vm.selectedDevice"
       [testModules]="vm.testModules"
-      (discard)="discard()"></app-device-qualification-from>
+      (cancel)="discard()"></app-device-qualification-from>
   </ng-template>
 
   <ng-template #empty>
@@ -63,9 +66,10 @@
   <ng-template #itemTemplate let-entity="entity">
     <app-device-item
       *ngIf="entity"
+      [ngClass]="{ selected: entity.mac_addr === vm.selectedDevice?.mac_addr }"
       [deviceView]="DeviceView.WithActions"
       [device]="entity"
       [disabled]="entity?.mac_addr === vm.deviceInProgress?.mac_addr"
-      (itemClicked)="openForm()"></app-device-item>
+      (itemClicked)="openForm(entity)"></app-device-item>
   </ng-template>
 </ng-container>

modules/ui/src/app/pages/devices/devices.component.ts

@@ -162,7 +162,8 @@ export class DevicesComponent implements OnInit, OnDestroy {
       });
   }
 
-  async openForm() {
+  async openForm(device: Device | null = null) {
+    this.devicesStore.selectDevice(device);
     this.isOpenDeviceForm = true;
     await this.liveAnnouncer.announce('Device qualification form');
     this.focusManagerService.focusFirstElementInContainer(