Skip to content

Commit

Permalink
reworked device filtering; fix #SNRGY-3008, #SNRGY-3021
Browse files Browse the repository at this point in the history
  • Loading branch information
@hahahannes
hahahannes committed Dec 11, 2023
1 parent 7a90c5d commit 01d3da9
Show file tree
Hide file tree
Showing 13 changed files with 405 additions and 228 deletions.
4 changes: 2 additions & 2 deletions src/app/core/model/permissions/permissions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ interface Condition {
ref?: string;
}

interface Selection {
export interface Selection {
and?: Selection[];
or?: Selection[];
not?: Selection;
condition: Condition;
condition?: Condition;
}

interface QueryFind extends QueryListCommons {
Expand Down
12 changes: 6 additions & 6 deletions src/app/modules/data/operator-repo/operator/operator.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ <h3>Shared by {{shareUser}}</h3>
</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button *ngIf="operator.editable">
<mat-icon (click)="deleteInput(item)" color="warn">
<button mat-icon-button *ngIf="operator.editable" (click)="deleteInput(item)">
<mat-icon color="warn">
delete
</mat-icon>
</button>
Expand All @@ -83,8 +83,8 @@ <h3>Shared by {{shareUser}}</h3>
</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button *ngIf="operator.editable">
<mat-icon (click)="deleteOutput(item)" color="warn">
<button mat-icon-button *ngIf="operator.editable" (click)="deleteOutput(item)">
<mat-icon color="warn">
delete
</mat-icon>
</button>
Expand All @@ -104,8 +104,8 @@ <h3>Shared by {{shareUser}}</h3>
</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button *ngIf="operator.editable">
<mat-icon (click)="deleteConfig(item)" color="warn">
<button mat-icon-button *ngIf="operator.editable" (click)="deleteConfig(item)">
<mat-icon color="warn">
delete
</mat-icon>
</button>
Expand Down
1 change: 1 addition & 0 deletions src/app/modules/data/operator-repo/operator/operator.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export class OperatorComponent implements OnInit {
}

deleteInput(input: IOModel) {
console.log(input)
if (this.operator.inputs !== undefined) {
const index = this.operator.inputs.indexOf(input);
if (index > -1) {
Expand Down
27 changes: 2 additions & 25 deletions src/app/modules/devices/device-instances/device-instances.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,15 @@
<div class="device-instance-container layout-margin" fxLayout="column">
<span fxLayout="row" class="search-button-container">
<senergy-searchbar></senergy-searchbar>
<button mat-icon-button [matMenuTriggerFor]="filterMain" matTooltip="Filter" color="accent" class="suffix-button">
<button mat-icon-button (click)="openFilterDialog()" matTooltip="Filter" color="accent" class="suffix-button">
<mat-icon>filter_alt</mat-icon>
</button>
<mat-menu #filterMain="matMenu">
<button mat-menu-item [matMenuTriggerFor]="filterDeviceType">Device-Type</button>
<button mat-menu-item [matMenuTriggerFor]="filterLocation">Location</button>
<button mat-menu-item [matMenuTriggerFor]="filterNetwork">Network</button>
</mat-menu>
<mat-menu #filterDeviceType="matMenu">
<button mat-menu-item *ngFor="let dt of deviceTypeOptions"
(click)="filterByDeviceType(dt)">{{dt.name}}</button>
</mat-menu>
<mat-menu #filterLocation="matMenu">
<button mat-menu-item *ngFor="let location of locationOptions"
(click)="filterByLocation(location)">{{location.name}}</button>
</mat-menu>
<mat-menu #filterNetwork="matMenu">
<button mat-menu-item *ngFor="let network of networkOptions"
(click)="filterByNetwork(network)">{{network.name}}</button>
</mat-menu>
</span>
<mat-chip-listbox class="offset" *ngIf="selectedTagTransformed !== ''">
<mat-chip-option [removable]="true" (removed)="tagRemoved()" color="accent"
selected>{{selectedTagTransformed}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip-option>
</mat-chip-listbox>

<div *ngIf="dataSource.data.length === 0 && ready">No devices found.</div>
<senergy-spinner [show]="!ready"></senergy-spinner>

<div class="mat-elevation-z1" [hidden]="!ready || dataSource.data.length === 0" [ngClass]="{'height-chips': selectedTagTransformed !== ''}">
<div class="mat-elevation-z1" [hidden]="!ready || dataSource.data.length === 0">
<div class="table-container">
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="matSortChange($event)" [matSortActive]="sortBy" [matSortDirection]="sortDirection">
<ng-container matColumnDef="select">
Expand Down
174 changes: 40 additions & 134 deletions src/app/modules/devices/device-instances/device-instances.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';

import {DeviceInstancesService} from './shared/device-instances.service';
import {DeviceInstancesModel} from './shared/device-instances.model';
import {DeviceConnectionState, DeviceInstancesModel, FilterSelection, SelectedTag} from './shared/device-instances.model';
import {PermissionsDialogService} from '../../permissions/shared/permissions-dialog.service';
import {DialogsService} from '../../../core/services/dialogs.service';
import { MatSnackBar } from '@angular/material/snack-bar';
Expand Down Expand Up @@ -88,17 +88,13 @@ export class DeviceInstancesComponent implements OnInit, AfterViewInit {
ready = false;
searchText = '';

selectedTag = '';
selectedTagTransformed = '';
@ViewChild('paginator', { static: false }) paginator!: MatPaginator;

locationOptions: LocationModel[] = [];
networkOptions: NetworksModel[] = [];
deviceTypeOptions: DeviceTypeBaseModel[] = [];
routerNetwork: NetworksModel | null = null;
routerDeviceType: DeviceTypeBaseModel | null = null;
routerLocation: LocationModel | null = null;
routerDeviceIds: string[] | null = null;
routerNetwork: string | undefined = undefined;
routerDeviceType: string[] | undefined = undefined;
routerLocation: string | undefined = undefined;
routerDeviceIds: string[] | undefined = undefined;
routerConnectionState: boolean | undefined = undefined;

private searchSub: Subscription = new Subscription();
sortBy: string = "display_name"
Expand All @@ -108,7 +104,6 @@ export class DeviceInstancesComponent implements OnInit, AfterViewInit {
userHasDeleteAuthorization: boolean = false

ngOnInit(): void {
this.loadFilterOptions();
this.initSearch(); // does automatically load data on first page load
this.checkAuthorization()
}
Expand Down Expand Up @@ -164,53 +159,8 @@ export class DeviceInstancesComponent implements OnInit, AfterViewInit {
this.reload();
}

private loadDevicesOfNetwork(): Observable<DeviceInstancesModel[]> {
if(this.routerNetwork) {
this.selectedTag = this.routerNetwork.name;
this.selectedTagTransformed = this.routerNetwork.name;
return this.deviceInstancesService
.getDeviceInstancesByHub(
this.routerNetwork.id,
this.pageSize,
this.offset,
this.sortBy,
this.sortDirection == "desc",
)
.pipe(
map((deviceInstances: DeviceInstancesModel[]) => {
this.setDevices(deviceInstances)
return deviceInstances
})
)
}
return of([])

}

private loadDevicesOfDeviceType(): Observable<DeviceInstancesModel[]> {
if(this.routerDeviceType) {
this.selectedTag = this.routerDeviceType.name;
this.selectedTagTransformed = this.routerDeviceType.name;
return this.deviceInstancesService
.getDeviceInstancesByDeviceTypes(
[this.routerDeviceType.id],
this.pageSize,
this.offset,
this.sortBy,
this.sortDirection == "desc"
)
.pipe(
map(deviceInstances => {
this.setDevices(deviceInstances);
return deviceInstances
})
)
}
return of([])

}

private loadDevicesByIds(): Observable<DeviceInstancesModel[]> {
// Only called when beeing redirected from device group page
if(this.routerDeviceIds) {
return this.deviceInstancesService.getDeviceInstancesByIds(this.routerDeviceIds, this.pageSize, this.offset).pipe(
map(deviceInstances => {
Expand All @@ -223,29 +173,30 @@ export class DeviceInstancesComponent implements OnInit, AfterViewInit {

}

private loadDevicesByLocation(): Observable<DeviceInstancesModel[]> {
if(this.routerLocation !== null) {
this.selectedTag = this.routerLocation.id;
this.selectedTagTransformed = this.routerLocation.name;
return this.deviceInstancesService.getDeviceInstancesByLocation(this.routerLocation.id, this.pageSize, this.offset, this.sortBy, this.sortDirection == "desc").pipe(
map(deviceInstances => {
this.setDevices(deviceInstances);
return deviceInstances
})
)
openFilterDialog() {
var filterSelection: FilterSelection = {
connectionState: this.routerConnectionState,
network: this.routerNetwork,
deviceTypes: this.routerDeviceType,
location: this.routerLocation
}
return of([])
}

this.deviceInstancesService.openFilterDialog(filterSelection).subscribe({
next: (filterSelection: FilterSelection) => {
if(filterSelection != null) {
this.routerConnectionState = filterSelection.connectionState
this.routerDeviceType = filterSelection.deviceTypes
this.routerNetwork = filterSelection.network
this.routerLocation = filterSelection.location
}
this.reload()
}
})
}

private load(): Observable<DeviceInstancesModel[]> {
if (this.routerNetwork !== null) {
return this.loadDevicesOfNetwork()
} else if (this.routerDeviceType !== null) {
return this.loadDevicesOfDeviceType()
} else if (this.routerDeviceIds !== null) {
if (this.routerDeviceIds !== undefined) {
return this.loadDevicesByIds()
} else if (this.routerLocation !== null) {
return this.loadDevicesByLocation()
} else {
return this.deviceInstancesService
.getDeviceInstances(
Expand All @@ -254,6 +205,10 @@ export class DeviceInstancesComponent implements OnInit, AfterViewInit {
this.sortBy,
this.sortDirection == "desc",
this.searchText,
this.routerLocation,
this.routerNetwork,
this.routerDeviceType,
this.routerConnectionState
)
.pipe(
map((deviceInstances: DeviceInstancesModel[]) => {
Expand All @@ -268,67 +223,18 @@ export class DeviceInstancesComponent implements OnInit, AfterViewInit {
this.dataSource.data = instances;
}

tagRemoved(): void {
this.routerNetwork = null;
this.routerDeviceType = null;
this.routerLocation = null;
this.resetTag();
this.load().subscribe();
}

private resetTag() {
this.selectedTag = '';
this.selectedTagTransformed = '';
}

private loadFilterOptions() {
this.locationsService.listLocations(100, 0, "name", this.sortDirection).subscribe((value) => {
this.locationOptions = value;
});
this.networksService.listNetworks(100, 0, "name", this.sortDirection).subscribe((value) => {
this.networkOptions = value;
});
this.deviceInstancesService.listUsedDeviceTypeIds().subscribe((deviceTypeIds) => {
this.deviceTypesService.getDeviceTypeListByIds(deviceTypeIds).subscribe((deviceTypes) => {
this.deviceTypeOptions = deviceTypes;
});
});
}

filterByDeviceType(dt: DeviceTypeBaseModel) {
this.routerLocation = null;
this.routerNetwork = null;
this.routerDeviceType = null;

this.routerDeviceType = dt;
this.reload();
}

filterByLocation(location: LocationModel) {
this.routerLocation = null;
this.routerNetwork = null;
this.routerDeviceType = null;

this.routerLocation = location;
this.reload();
}

filterByNetwork(network: NetworksModel) {
this.routerLocation = null;
this.routerNetwork = null;
this.routerDeviceType = null;

this.routerNetwork = network;
this.reload();
}

reload() {
this.offset = 0;
this.ready = false;
this.pageSize = 20;
this.selectionClear();

forkJoin(this.load(), this.getTotalCount()).subscribe(_ => this.ready = true)
forkJoin(this.load(), this.getTotalCount()).subscribe({
next: (_) => this.ready = true,
error: (err) => {
console.log(err)
}
})
}

showInfoOfDevice(device: DeviceInstancesModel): void {
Expand Down Expand Up @@ -373,13 +279,13 @@ export class DeviceInstancesComponent implements OnInit, AfterViewInit {
const state = navigation.extras.state as DeviceInstancesRouterState;
switch (state.type) {
case DeviceInstancesRouterStateTypesEnum.DEVICE_TYPE:
this.routerDeviceType = state.value as DeviceTypeBaseModel;
this.routerDeviceType = [(state.value as DeviceTypeBaseModel).id];
break;
case DeviceInstancesRouterStateTypesEnum.NETWORK:
this.routerNetwork = state.value as NetworksModel;
this.routerNetwork = (state.value as NetworksModel).id;
break;
case DeviceInstancesRouterStateTypesEnum.LOCATION:
this.routerLocation = state.value as LocationModel;
this.routerLocation = (state.value as LocationModel).id;
break;
case DeviceInstancesRouterStateTypesEnum.DEVICE_GROUP:
this.routerDeviceIds = state.value as string[];
Expand Down
4 changes: 4 additions & 0 deletions ...ances/dialogs/device-instances-filter-dialog/device-instances-filter-dialog.component.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#filter-container {
margin-top: 20px;
width: 50vh;
}
Loading

0 comments on commit 01d3da9

Please sign in to comment.