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(