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 ce61c2f24..55ffb7c1b 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
@@ -43,37 +43,40 @@
-
-
-
- {{
- title() === LayoutType.Device ? 'New device' : 'New risk profile'
- }}
-
-
-
-
-
-
-
+
+
+
+
+ {{
+ title() === LayoutType.Device ? 'New device' : 'New risk profile'
+ }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.scss b/modules/ui/src/app/components/list-layout/list-layout.component.scss
index 7f3b8549d..008e66ad0 100644
--- a/modules/ui/src/app/components/list-layout/list-layout.component.scss
+++ b/modules/ui/src/app/components/list-layout/list-layout.component.scss
@@ -110,6 +110,10 @@
outline: none;
}
+.entity-list-container {
+ overflow-y: auto;
+}
+
.entity-list {
display: grid;
grid-template-columns: 1fr;
@@ -141,3 +145,9 @@
font-size: 16px;
letter-spacing: 0;
}
+
+::ng-deep .mat-drawer-inner-container {
+ overflow: hidden;
+ display: grid;
+ grid-template-rows: max-content 1fr;
+}
diff --git a/modules/ui/src/app/pages/devices/devices.component.ts b/modules/ui/src/app/pages/devices/devices.component.ts
index 793076e38..df42cd870 100644
--- a/modules/ui/src/app/pages/devices/devices.component.ts
+++ b/modules/ui/src/app/pages/devices/devices.component.ts
@@ -181,8 +181,9 @@ export class DevicesComponent
}
save(device: Device, initialDevice: Device | null) {
- this.updateDevice(device, initialDevice, () => {
+ this.updateDevice(device, initialDevice, (index: number) => {
this.devicesStore.selectDevice(device);
+ this.focusDevice(index);
});
}
@@ -197,7 +198,7 @@ export class DevicesComponent
private updateDevice(
device: Device,
initialDevice: Device | null = null,
- callback: () => void
+ callback: (idx: number) => void
) {
if (initialDevice) {
this.devicesStore.editDevice({
@@ -269,6 +270,7 @@ export class DevicesComponent
dialogRef?.beforeClosed().subscribe(close => {
if (close) {
this.isOpenDeviceForm = false;
+ this.devicesStore.selectDevice(null);
this.focusSelectedButton();
}
});
@@ -299,9 +301,21 @@ export class DevicesComponent
}
}
+ private focusDevice(index: number) {
+ this.changeDetectorRef.detectChanges();
+ const device = this.element.nativeElement.querySelectorAll(
+ 'app-device-item .button-edit'
+ )[index];
+ device?.focus();
+ }
+
private focusAddButton(): void {
- const addButton =
+ let addButton =
this.element.nativeElement.querySelector('.add-entity-button');
+ if (!addButton) {
+ addButton =
+ this.element.nativeElement.querySelector('.device-add-button');
+ }
addButton?.focus();
}
}
diff --git a/modules/ui/src/app/pages/devices/devices.store.ts b/modules/ui/src/app/pages/devices/devices.store.ts
index 98413dd66..7b0f27cbd 100644
--- a/modules/ui/src/app/pages/devices/devices.store.ts
+++ b/modules/ui/src/app/pages/devices/devices.store.ts
@@ -99,28 +99,29 @@ export class DevicesStore extends ComponentStore {
);
});
- saveDevice = this.effect<{ device: Device; onSuccess: () => void }>(
- trigger$ => {
- return trigger$.pipe(
- exhaustMap(({ device, onSuccess }) => {
- return this.testRunService.saveDevice(device).pipe(
- withLatestFrom(this.devices$),
- tap(([added, devices]) => {
- if (added) {
- this.addDevice(device, devices);
- onSuccess();
- }
- })
- );
- })
- );
- }
- );
+ saveDevice = this.effect<{
+ device: Device;
+ onSuccess: (idx: number) => void;
+ }>(trigger$ => {
+ return trigger$.pipe(
+ exhaustMap(({ device, onSuccess }) => {
+ return this.testRunService.saveDevice(device).pipe(
+ withLatestFrom(this.devices$),
+ tap(([added, devices]) => {
+ if (added) {
+ this.addDevice(device, devices);
+ onSuccess(devices.length);
+ }
+ })
+ );
+ })
+ );
+ });
editDevice = this.effect<{
device: Device;
mac_addr: string;
- onSuccess: () => void;
+ onSuccess: (idx: number) => void;
}>(trigger$ => {
return trigger$.pipe(
exhaustMap(({ device, mac_addr, onSuccess }) => {
@@ -128,8 +129,11 @@ export class DevicesStore extends ComponentStore {
withLatestFrom(this.devices$),
tap(([edited, devices]) => {
if (edited) {
+ const idx = devices.findIndex(
+ item => device.mac_addr === item.mac_addr
+ );
this.updateDevice(device, mac_addr, devices);
- onSuccess();
+ onSuccess(idx);
}
})
);