diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.html b/modules/ui/src/app/components/list-layout/list-layout.component.html index 652988e27..8c2de37d4 100644 --- a/modules/ui/src/app/components/list-layout/list-layout.component.html +++ b/modules/ui/src/app/components/list-layout/list-layout.component.html @@ -39,6 +39,12 @@ >
+
+ + New device +
{ title = input(''); addEntityText = input(''); + isOpenDeviceForm = input(false); + initialDevice = input(null); // eslint-disable-next-line @typescript-eslint/no-explicit-any emptyContent = input>(); // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -60,7 +63,7 @@ export class ListLayoutComponent { addEntity = output(); menuItemClicked = output>(); updateQuery(e: Event) { - this.searchText.set((e.target as HTMLInputElement).value); + this.searchText.set((e.target as HTMLInputElement).value.trim()); } filter(searchText: string) { diff --git a/modules/ui/src/app/pages/devices/components/device-form/device.validators.ts b/modules/ui/src/app/pages/devices/components/device-form/device.validators.ts index 3ffa45802..8ef530bad 100644 --- a/modules/ui/src/app/pages/devices/components/device-form/device.validators.ts +++ b/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)) { diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html index 5d93022da..e8918d08f 100644 --- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html +++ b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html @@ -106,7 +106,9 @@ > - + @@ -148,4 +150,25 @@ [format]="format" [optionKey]="'text'">
+
+
+ + +
+ +
diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss index be86387a8..651b03429 100644 --- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss +++ b/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 { diff --git a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts b/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts index 4cb4e15f7..899266123 100644 --- a/modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts +++ b/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(); + initialDevice = input(null); + + initialDeviceEffect = effect(() => { + const device = this.initialDevice(); + if (device && device.mac_addr) { + this.fillDeviceForm(this.format, device); + } + }); + devices = input([]); testModules = input([]); isCreate = input(true); diff --git a/modules/ui/src/app/pages/devices/devices.component.html b/modules/ui/src/app/pages/devices/devices.component.html index 73c56c628..f971834e3 100644 --- a/modules/ui/src/app/pages/devices/devices.component.html +++ b/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)"> @@ -35,8 +37,9 @@ + (cancel)="discard()"> @@ -63,9 +66,10 @@ + (itemClicked)="openForm(entity)"> diff --git a/modules/ui/src/app/pages/devices/devices.component.ts b/modules/ui/src/app/pages/devices/devices.component.ts index 29f24e0f4..04390c03f 100644 --- a/modules/ui/src/app/pages/devices/devices.component.ts +++ b/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(