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); } }) );