+
+
+{{ title() }}
+
+ search
+
{{ title() }}
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 956a7b1c4..a8b7519db 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
@@ -17,6 +17,10 @@
@use 'colors';
@use 'variables';
+.content {
+ height: 100%;
+}
+
.content-empty {
@include mixins.content-empty;
}
@@ -33,3 +37,119 @@
margin: 0;
}
}
+
+.add-entity-button {
+ font-family: variables.$font-text;
+ font-size: 16px;
+ border-radius: 16px;
+ width: fit-content;
+ height: 56px;
+ color: colors.$on-secondary-container;
+ background-color: colors.$secondary-container;
+}
+
+.layout-container {
+ height: 100%;
+}
+
+.layout-container-left-panel {
+ background-color: colors.$surface-container-low;
+ width: 435px;
+ padding-right: 16px;
+}
+
+.layout-container-left-panel-toolbar {
+ border-radius: variables.$corner-large;
+ background-color: colors.$surface;
+ padding: 12px 0 8px 16px;
+ ::ng-deep mat-toolbar-row:not(:first-child) {
+ margin-top: 32px;
+ }
+}
+
+.search-field {
+ display: flex;
+ padding: 4px 4px 4px 20px;
+ align-items: center;
+ gap: 4px;
+ flex: 1 0 0;
+ align-self: stretch;
+ border-radius: variables.$corner-extra-large;
+ background-color: colors.$surface-container-high;
+ height: 40px;
+ width: 100%;
+ input {
+ width: calc(100% - #{variables.$icon-size * 2});
+ height: 100%;
+ border: 0;
+ background: inherit;
+ font-size: 16px;
+ font-family: variables.$font-text;
+ color: colors.$on-surface-variant;
+ }
+}
+
+.entity-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 8px;
+ padding: 8px 0;
+}
+
+.add-entity-button {
+ font-family: variables.$font-text;
+ font-size: 16px;
+ border-radius: 16px;
+ width: fit-content;
+ height: 56px;
+ color: colors.$on-secondary-container;
+ background-color: colors.$secondary-container;
+}
+
+.layout-container {
+ height: 100%;
+}
+
+.layout-container-left-panel {
+ background-color: colors.$surface-container-low;
+ width: 435px;
+ padding-right: 16px;
+}
+
+.layout-container-left-panel-toolbar {
+ border-radius: variables.$corner-large;
+ background-color: colors.$surface;
+ padding: 12px 0 8px 16px;
+ ::ng-deep mat-toolbar-row:not(:first-child) {
+ margin-top: 32px;
+ }
+}
+
+.search-field {
+ display: flex;
+ padding: 4px 4px 4px 20px;
+ align-items: center;
+ gap: 4px;
+ flex: 1 0 0;
+ align-self: stretch;
+ border-radius: variables.$corner-extra-large;
+ background-color: colors.$surface-container-high;
+ height: 40px;
+ width: 100%;
+ input {
+ width: calc(100% - #{variables.$icon-size * 2});
+ height: 100%;
+ border: 0;
+ background: inherit;
+ font-size: 16px;
+ font-family: variables.$font-text;
+ color: colors.$on-surface-variant;
+ }
+}
+
+.entity-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 8px;
+ padding: 8px 0;
+}
diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts b/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts
index 14ab06cd5..02089934e 100644
--- a/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts
+++ b/modules/ui/src/app/components/list-layout/list-layout.component.spec.ts
@@ -14,24 +14,137 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
-
import { ListLayoutComponent } from './list-layout.component';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { ListItemComponent } from '../list-item/list-item.component';
+import { Component } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+interface Entity {
+ id: number;
+ name: string;
+}
+@Component({
+ selector: 'app-host-component',
+ imports: [ListLayoutComponent, ListItemComponent],
+ template: `
+
+
+
+
+
+ `,
+})
+class HostComponent {
+ title = 'Test Title';
+ addEntityText = 'Add Entity';
+ entities: Entity[] = [];
+ actions = [{ label: 'Edit', value: 'edit' }];
+ onAddEntity = jasmine.createSpy('onAddEntity');
+ onMenuItemClicked = jasmine.createSpy('onMenuItemClicked');
+}
describe('ListLayoutComponent', () => {
- let component: ListLayoutComponent;
- let fixture: ComponentFixture>;
+ let component: HostComponent;
+ let fixture: ComponentFixture;
+ let compiled: HTMLElement;
beforeEach(async () => {
await TestBed.configureTestingModule({
- imports: [ListLayoutComponent],
+ imports: [
+ HostComponent,
+ MatSidenavModule,
+ MatToolbarModule,
+ MatIconModule,
+ MatButtonModule,
+ NoopAnimationsModule,
+ ],
}).compileComponents();
- fixture = TestBed.createComponent(ListLayoutComponent);
+ fixture = TestBed.createComponent(HostComponent);
component = fixture.componentInstance;
+ compiled = fixture.nativeElement as HTMLElement;
fixture.detectChanges();
});
- it('should create', () => {
+ it('should create the component', () => {
expect(component).toBeTruthy();
});
+
+ describe('with no entities', () => {
+ beforeEach(() => {
+ component.entities = [];
+ fixture.detectChanges();
+ });
+
+ it('should display the title', () => {
+ const titleElement = compiled.querySelector('.title');
+
+ expect(titleElement?.textContent).toBe('Test Title');
+ });
+
+ it('should has empty content', () => {
+ const emptyContent = compiled.querySelector('.content-empty');
+
+ expect(emptyContent).toBeTruthy();
+ });
+ });
+
+ describe('with entities', () => {
+ beforeEach(() => {
+ component.entities = [
+ { id: 1, name: 'Entity 1' },
+ { id: 2, name: 'Entity 2' },
+ ];
+ fixture.detectChanges();
+ });
+
+ it('should display the title', () => {
+ const titleElement = compiled.querySelector('.title');
+
+ expect(titleElement?.textContent).toBe('Test Title');
+ });
+
+ it('should display add entity button', () => {
+ const buttonElement = compiled.querySelector('.add-entity-button');
+
+ expect(buttonElement?.textContent).toContain('Add Entity');
+ });
+
+ it('should display search field', () => {
+ const searchElement = compiled.querySelector('.search-field');
+
+ expect(searchElement).toBeTruthy();
+ });
+
+ it('should emit addEntity event when add entity button is clicked', () => {
+ const buttonElement = compiled.querySelector(
+ '.add-entity-button'
+ ) as HTMLButtonElement;
+
+ buttonElement.click();
+ expect(component.onAddEntity).toHaveBeenCalled();
+ });
+
+ it('should have entity list', () => {
+ const listItemComponent = compiled.querySelectorAll('app-list-item');
+
+ expect(listItemComponent.length).toEqual(2);
+ });
+ });
});
diff --git a/modules/ui/src/app/components/list-layout/list-layout.component.ts b/modules/ui/src/app/components/list-layout/list-layout.component.ts
index 3c97549b4..c66da2ec5 100644
--- a/modules/ui/src/app/components/list-layout/list-layout.component.ts
+++ b/modules/ui/src/app/components/list-layout/list-layout.component.ts
@@ -13,18 +13,71 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, input, TemplateRef } from '@angular/core';
+import {
+ Component,
+ computed,
+ input,
+ output,
+ signal,
+ TemplateRef,
+} from '@angular/core';
import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSidenavModule } from '@angular/material/sidenav';
+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';
@Component({
selector: 'app-list-layout',
- imports: [CommonModule],
+ imports: [
+ CommonModule,
+ MatButtonModule,
+ MatSidenavModule,
+ MatToolbarModule,
+ MatIconModule,
+ ListItemComponent,
+ ],
templateUrl: './list-layout.component.html',
styleUrl: './list-layout.component.scss',
})
-export class ListLayoutComponent {
+export class ListLayoutComponent {
title = input('');
+ addEntityText = input('');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
emptyContent = input>();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ content = input>();
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ itemTemplate = input>();
entities = input([]);
+ actions = input([]);
+ searchText = signal('');
+ filtered = computed(() => {
+ return this.entities().filter(this.filter(this.searchText()));
+ });
+ addEntity = output();
+ menuItemClicked = output>();
+ updateQuery(e: Event) {
+ this.searchText.set((e.target as HTMLInputElement).value);
+ }
+
+ filter(searchText: string) {
+ return (item: T) => {
+ return Object.values(item).some(value =>
+ typeof value === 'string'
+ ? value.toLowerCase().includes(searchText.toLowerCase())
+ : false
+ );
+ };
+ }
+
+ onMenuItemClick(action: string, entity: T, index: number) {
+ this.menuItemClicked.emit({
+ action,
+ entity,
+ index,
+ });
+ }
}
diff --git a/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.html b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.html
new file mode 100644
index 000000000..03556f807
--- /dev/null
+++ b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.html
@@ -0,0 +1,21 @@
+
+
diff --git a/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.scss b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.scss
new file mode 100644
index 000000000..491d24450
--- /dev/null
+++ b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.scss
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use 'colors';
+@use 'variables';
+
+:host {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-image: url(/assets/icons/cornerstone.svg);
+ position: relative;
+}
+
+.dog-image {
+ position: absolute;
+ bottom: 0;
+ right: 26px;
+}
+
+::ng-deep app-empty-message {
+ .empty-message {
+ gap: 16px !important;
+ }
+
+ .empty-message-header {
+ color: colors.$on-surface-variant !important;
+ font-family: variables.$font-secondary !important;
+ }
+}
diff --git a/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.ts b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.ts
new file mode 100644
index 000000000..3924c2aa3
--- /dev/null
+++ b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, input } from '@angular/core';
+import { EmptyMessageComponent } from '../empty-message/empty-message.component';
+@Component({
+ selector: 'app-no-entity-selected',
+ imports: [EmptyMessageComponent],
+ templateUrl: './no-entity-selected.component.html',
+ styleUrl: './no-entity-selected.component.scss',
+})
+export class NoEntitySelectedComponent {
+ image = input();
+ header = input();
+ message = input();
+}
diff --git a/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts b/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts
index 61dfb9649..449bb4225 100644
--- a/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts
+++ b/modules/ui/src/app/components/program-type-icon/program-type-icon.component.ts
@@ -25,7 +25,6 @@ import { MatIcon } from '@angular/material/icon';
:host {
display: inline-flex;
align-items: center;
- padding-right: 4px;
}
.icon {
display: flex;
diff --git a/modules/ui/src/app/model/device.ts b/modules/ui/src/app/model/device.ts
index 55d383401..5f73d3c28 100644
--- a/modules/ui/src/app/model/device.ts
+++ b/modules/ui/src/app/model/device.ts
@@ -72,3 +72,8 @@ export enum TestingType {
Pilot = 'Pilot Assessment',
Qualification = 'Device Qualification',
}
+
+export enum DeviceAction {
+ StartNewTestrun = 'Start new Testrun',
+ Delete = 'Delete',
+}
diff --git a/modules/ui/src/app/model/entity-action.ts b/modules/ui/src/app/model/entity-action.ts
new file mode 100644
index 000000000..17e3062f1
--- /dev/null
+++ b/modules/ui/src/app/model/entity-action.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface EntityAction {
+ action: string;
+ icon?: string;
+ svgIcon?: string;
+}
+
+export interface EntityActionResult {
+ action: string;
+ entity: T;
+ index: number;
+}
diff --git a/modules/ui/src/app/pages/devices/devices.component.html b/modules/ui/src/app/pages/devices/devices.component.html
index 18db165cc..28fb015db 100644
--- a/modules/ui/src/app/pages/devices/devices.component.html
+++ b/modules/ui/src/app/pages/devices/devices.component.html
@@ -14,32 +14,25 @@
limitations under the License.
-->
-
-
-
-
+
+
-
-
+
+
+
+
Devices
Create New Device
+
+
+
diff --git a/modules/ui/src/app/pages/devices/devices.component.scss b/modules/ui/src/app/pages/devices/devices.component.scss
index 4e49b90f8..65cd331c8 100644
--- a/modules/ui/src/app/pages/devices/devices.component.scss
+++ b/modules/ui/src/app/pages/devices/devices.component.scss
@@ -13,35 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-@use 'colors';
@use 'variables';
-@use 'mixins';
-
-:host {
- overflow: hidden;
- flex-direction: column;
- display: flex;
-}
-
-.device-repository-content-empty {
- @include mixins.content-empty;
-}
-
-.device-repository-toolbar {
- gap: 16px;
- background: colors.$white;
- height: 74px;
- padding: 24px 0 8px 32px;
-}
-
-.device-repository-content {
- align-content: start;
- padding: 24px 32px;
- display: grid;
- grid-template-columns: repeat(auto-fit, variables.$device-item-width);
- gap: 16px;
- overflow-y: auto;
-}
.device-add-button {
font-family: variables.$font-text;
diff --git a/modules/ui/src/app/pages/devices/devices.component.spec.ts b/modules/ui/src/app/pages/devices/devices.component.spec.ts
index 2de0b9bb4..9c46d8c81 100644
--- a/modules/ui/src/app/pages/devices/devices.component.spec.ts
+++ b/modules/ui/src/app/pages/devices/devices.component.spec.ts
@@ -20,7 +20,7 @@ import {
tick,
} from '@angular/core/testing';
import { of } from 'rxjs';
-import { Device } from '../../model/device';
+import { Device, DeviceAction } from '../../model/device';
import { DevicesComponent, FormAction } from './devices.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -95,6 +95,13 @@ describe('DevicesComponent', () => {
selectedDevice: null,
deviceInProgress: null,
testModules: [],
+ actions: [
+ {
+ action: DeviceAction.StartNewTestrun,
+ svgIcon: 'testrun_logo_small',
+ },
+ { action: DeviceAction.Delete, icon: 'delete' },
+ ],
});
mockDevicesStore.devices$ = of([]);
mockDevicesStore.testModules$ = of([]);
@@ -124,6 +131,13 @@ describe('DevicesComponent', () => {
selectedDevice: device,
deviceInProgress: device,
testModules: [],
+ actions: [
+ {
+ action: DeviceAction.StartNewTestrun,
+ svgIcon: 'testrun_logo_small',
+ },
+ { action: DeviceAction.Delete, icon: 'delete' },
+ ],
});
fixture.detectChanges();
});
@@ -141,7 +155,7 @@ describe('DevicesComponent', () => {
} as MatDialogRef);
fixture.detectChanges();
const button = compiled.querySelector(
- '.device-add-button'
+ '.add-entity-button'
) as HTMLButtonElement;
button?.click();
@@ -222,6 +236,13 @@ describe('DevicesComponent', () => {
selectedDevice: device,
deviceInProgress: null,
testModules: [],
+ actions: [
+ {
+ action: DeviceAction.StartNewTestrun,
+ svgIcon: 'testrun_logo_small',
+ },
+ { action: DeviceAction.Delete, icon: 'delete' },
+ ],
});
fixture.detectChanges();
});
@@ -281,6 +302,13 @@ describe('DevicesComponent', () => {
selectedDevice: device,
deviceInProgress: null,
testModules: [],
+ actions: [
+ {
+ action: DeviceAction.StartNewTestrun,
+ svgIcon: 'testrun_logo_small',
+ },
+ { action: DeviceAction.Delete, icon: 'delete' },
+ ],
});
fixture.detectChanges();
});
@@ -290,48 +318,13 @@ describe('DevicesComponent', () => {
beforeClosed: () => of(true),
} as MatDialogRef);
- component.openDeleteDialog(
- [device],
- MOCK_TEST_MODULES,
- device,
- device,
- false,
- 0,
- 0
- );
+ component.openDeleteDialog([device], MOCK_TEST_MODULES, device, 0);
const args = mockDevicesStore.deleteDevice.calls.argsFor(0);
// @ts-expect-error config is in object
expect(args[0].device).toEqual(device);
expect(mockDevicesStore.deleteDevice).toHaveBeenCalled();
});
-
- it('should open device dialog when dialog return null', () => {
- const openDeviceDialogSpy = spyOn(component, 'openDialog');
- spyOn(component.dialog, 'open').and.returnValue({
- beforeClosed: () => of(null),
- } as MatDialogRef);
-
- component.openDeleteDialog(
- [device],
- MOCK_TEST_MODULES,
- device,
- device,
- false,
- 0,
- 0
- );
-
- expect(openDeviceDialogSpy).toHaveBeenCalledWith(
- [device],
- MOCK_TEST_MODULES,
- device,
- device,
- false,
- 0,
- 0
- );
- });
});
describe('#openStartTestrun', () => {
diff --git a/modules/ui/src/app/pages/devices/devices.component.ts b/modules/ui/src/app/pages/devices/devices.component.ts
index 685a8ba12..c71e571db 100644
--- a/modules/ui/src/app/pages/devices/devices.component.ts
+++ b/modules/ui/src/app/pages/devices/devices.component.ts
@@ -28,6 +28,7 @@ import {
} from '@angular/material/dialog';
import {
Device,
+ DeviceAction,
DeviceStatus,
DeviceView,
TestModule,
@@ -54,6 +55,8 @@ import { MatInputModule } from '@angular/material/input';
import { DeviceItemComponent } from '../../components/device-item/device-item.component';
import { EmptyPageComponent } from '../../components/empty-page/empty-page.component';
import { ListLayoutComponent } from '../../components/list-layout/list-layout.component';
+import { EntityActionResult } from '../../model/entity-action';
+import { NoEntitySelectedComponent } from '../../components/no-entity-selected/no-entity-selected.component';
export enum FormAction {
Delete = 'Delete',
@@ -84,6 +87,7 @@ export interface FormResponse {
DeviceItemComponent,
EmptyPageComponent,
ListLayoutComponent,
+ NoEntitySelectedComponent,
],
providers: [DevicesStore],
})
@@ -134,6 +138,21 @@ export class DevicesComponent
);
}
+ menuItemClicked(
+ { action, entity, index }: EntityActionResult,
+ devices: Device[],
+ testModules: TestModule[]
+ ) {
+ switch (action) {
+ case DeviceAction.StartNewTestrun:
+ this.openStartTestrun(entity, devices, testModules);
+ break;
+ case DeviceAction.Delete:
+ this.openDeleteDialog(devices, testModules, entity, index);
+ break;
+ }
+ }
+
openStartTestrun(
selectedDevice: Device,
devices: Device[],
@@ -171,6 +190,37 @@ export class DevicesComponent
});
}
+ openDeleteDialog(
+ devices: Device[],
+ testModules: TestModule[],
+ initialDevice: Device,
+ deviceIndex: number
+ ) {
+ const dialogRef = this.dialog.open(SimpleDialogComponent, {
+ ariaLabel: 'Delete device',
+ data: {
+ title: 'Delete device?',
+ content: `You are about to delete ${
+ initialDevice.manufacturer + ' ' + initialDevice.model
+ }. Are you sure?`,
+ },
+ autoFocus: true,
+ hasBackdrop: true,
+ disableClose: true,
+ panelClass: 'simple-dialog',
+ });
+ dialogRef?.beforeClosed().subscribe(deleteDevice => {
+ if (deleteDevice) {
+ this.devicesStore.deleteDevice({
+ device: initialDevice,
+ onDelete: () => {
+ this.focusNextButton(deviceIndex);
+ },
+ });
+ }
+ });
+ }
+
openDialog(
devices: Device[] = [],
testModules: TestModule[],
@@ -228,9 +278,6 @@ export class DevicesComponent
devices,
testModules,
initialDevice,
- response.device,
- isEditDevice,
- response.index,
deviceIndex!
);
}
@@ -278,51 +325,6 @@ export class DevicesComponent
});
}
- openDeleteDialog(
- devices: Device[],
- testModules: TestModule[],
- initialDevice: Device,
- device: Device,
- isEditDevice = false,
- index = 0,
- deviceIndex: number
- ) {
- const dialogRef = this.dialog.open(SimpleDialogComponent, {
- ariaLabel: 'Delete device',
- data: {
- title: 'Delete device?',
- content: `You are about to delete ${
- initialDevice.manufacturer + ' ' + initialDevice.model
- }. Are you sure?`,
- device: device,
- },
- autoFocus: true,
- hasBackdrop: true,
- disableClose: true,
- panelClass: 'simple-dialog',
- });
- dialogRef?.beforeClosed().subscribe(deleteDevice => {
- if (deleteDevice) {
- this.devicesStore.deleteDevice({
- device: initialDevice,
- onDelete: () => {
- this.focusNextButton(deviceIndex);
- },
- });
- } else {
- this.openDialog(
- devices,
- testModules,
- initialDevice,
- device,
- isEditDevice,
- index,
- deviceIndex
- );
- }
- });
- }
-
private focusSelectedButton(index: number) {
const selected = this.element.nativeElement.querySelectorAll(
'app-device-item .button-edit'
diff --git a/modules/ui/src/app/pages/devices/devices.store.spec.ts b/modules/ui/src/app/pages/devices/devices.store.spec.ts
index 7dec601f8..e355963e6 100644
--- a/modules/ui/src/app/pages/devices/devices.store.spec.ts
+++ b/modules/ui/src/app/pages/devices/devices.store.spec.ts
@@ -33,6 +33,7 @@ import {
import { selectDevices, selectIsOpenAddDevice } from '../../store/selectors';
import { DevicesStore } from './devices.store';
import { MOCK_PROGRESS_DATA_IN_PROGRESS } from '../../mocks/testrun.mock';
+import { DeviceAction } from '../../model/device';
describe('DevicesStore', () => {
let devicesStore: DevicesStore;
@@ -92,6 +93,13 @@ describe('DevicesStore', () => {
selectedDevice: null,
deviceInProgress: device,
testModules: [],
+ actions: [
+ {
+ action: DeviceAction.StartNewTestrun,
+ svgIcon: 'testrun_logo_small',
+ },
+ { action: DeviceAction.Delete, icon: 'delete' },
+ ],
});
done();
});
diff --git a/modules/ui/src/app/pages/devices/devices.store.ts b/modules/ui/src/app/pages/devices/devices.store.ts
index 301703158..f164d643d 100644
--- a/modules/ui/src/app/pages/devices/devices.store.ts
+++ b/modules/ui/src/app/pages/devices/devices.store.ts
@@ -19,7 +19,7 @@ import { ComponentStore } from '@ngrx/component-store';
import { TestRunService } from '../../services/test-run.service';
import { exhaustMap } from 'rxjs';
import { tap, withLatestFrom } from 'rxjs/operators';
-import { Device, TestModule } from '../../model/device';
+import { Device, DeviceAction, TestModule } from '../../model/device';
import { AppState } from '../../store/state';
import { Store } from '@ngrx/store';
import {
@@ -35,12 +35,14 @@ import {
} from '../../store/actions';
import { TestrunStatus } from '../../model/testrun-status';
import { DeviceQuestionnaireSection } from '../../model/device';
+import { EntityAction } from '../../model/entity-action';
export interface DevicesComponentState {
devices: Device[];
selectedDevice: Device | null;
testModules: TestModule[];
questionnaireFormat: DeviceQuestionnaireSection[];
+ actions: EntityAction[];
}
@Injectable()
@@ -54,12 +56,14 @@ export class DevicesStore extends ComponentStore {
questionnaireFormat$ = this.select(state => state.questionnaireFormat);
private deviceInProgress$ = this.store.select(selectDeviceInProgress);
private selectedDevice$ = this.select(state => state.selectedDevice);
+ private actions$ = this.select(state => state.actions);
viewModel$ = this.select({
devices: this.devices$,
selectedDevice: this.selectedDevice$,
deviceInProgress: this.deviceInProgress$,
testModules: this.testModules$,
+ actions: this.actions$,
});
selectDevice = this.updater((state, device: Device | null) => ({
@@ -200,6 +204,10 @@ export class DevicesStore extends ComponentStore {
selectedDevice: null,
testModules: [],
questionnaireFormat: [],
+ actions: [
+ { action: DeviceAction.StartNewTestrun, svgIcon: 'testrun_logo_small' },
+ { action: DeviceAction.Delete, icon: 'delete' },
+ ],
});
}
}
diff --git a/modules/ui/src/assets/icons/cornerstone.svg b/modules/ui/src/assets/icons/cornerstone.svg
new file mode 100644
index 000000000..14e082421
--- /dev/null
+++ b/modules/ui/src/assets/icons/cornerstone.svg
@@ -0,0 +1,9 @@
+
diff --git a/modules/ui/src/assets/icons/dog.svg b/modules/ui/src/assets/icons/dog.svg
new file mode 100644
index 000000000..91347731c
--- /dev/null
+++ b/modules/ui/src/assets/icons/dog.svg
@@ -0,0 +1,15 @@
+
diff --git a/modules/ui/src/assets/icons/switch.svg b/modules/ui/src/assets/icons/switch.svg
new file mode 100644
index 000000000..24c53d4a9
--- /dev/null
+++ b/modules/ui/src/assets/icons/switch.svg
@@ -0,0 +1,30 @@
+
diff --git a/modules/ui/src/theming/variables.scss b/modules/ui/src/theming/variables.scss
index 6be3f1bcd..a9415a167 100644
--- a/modules/ui/src/theming/variables.scss
+++ b/modules/ui/src/theming/variables.scss
@@ -18,6 +18,7 @@ $profiles-drawer-width: 320px;
$form-max-width: 732px;
$icon-size: 24px;
$corner-large: 16px;
+$corner-extra-large: 28px;
$corner-medium: 12px;
$reports-table-header-size: 32px;
{{ entity.name }}
+ Empty
+
diff --git a/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.scss b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.scss
new file mode 100644
index 000000000..491d24450
--- /dev/null
+++ b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.scss
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use 'colors';
+@use 'variables';
+
+:host {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-image: url(/assets/icons/cornerstone.svg);
+ position: relative;
+}
+
+.dog-image {
+ position: absolute;
+ bottom: 0;
+ right: 26px;
+}
+
+::ng-deep app-empty-message {
+ .empty-message {
+ gap: 16px !important;
+ }
+
+ .empty-message-header {
+ color: colors.$on-surface-variant !important;
+ font-family: variables.$font-secondary !important;
+ }
+}
diff --git a/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.ts b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.ts
new file mode 100644
index 000000000..3924c2aa3
--- /dev/null
+++ b/modules/ui/src/app/components/no-entity-selected/no-entity-selected.component.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, input } from '@angular/core';
+import { EmptyMessageComponent } from '../empty-message/empty-message.component';
+@Component({
+ selector: 'app-no-entity-selected',
+ imports: [EmptyMessageComponent],
+ templateUrl: './no-entity-selected.component.html',
+ styleUrl: './no-entity-selected.component.scss',
+})
+export class NoEntitySelectedComponent {
+ image = inputDevices
-
-
-
-
-