#1527-changed columns to be objects

udmif/web/src/app/devices/devices.component.html

@@ -23,18 +23,21 @@
   (matSortChange)="sortData($event)"
   aria-label="List of devices"
 >
-  <ng-container *ngFor="let columnName of displayedColumns" matColumnDef="{{ columnName }}">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{
-      columnName.replace('Count', '') | capitalize
-    }}</mat-header-cell>
-    <ng-container [ngSwitch]="columnName">
+  <ng-container *ngFor="let column of columns" matColumnDef="{{ column.value }}">
+    <ng-container *ngIf="column.isSortable">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.label }}</mat-header-cell>
+    </ng-container>
+    <ng-container *ngIf="!column.isSortable">
+      <mat-header-cell *matHeaderCellDef>{{ column.label }}</mat-header-cell>
+    </ng-container>
+    <ng-container [ngSwitch]="column.value">
       <ng-container *ngSwitchCase="'name'">
         <mat-cell *matCellDef="let element"
           ><a [routerLink]="'/devices/' + element.id">{{ element.name }}</a></mat-cell
         >
       </ng-container>
       <ng-container *ngSwitchCase="'lastPayload' || 'lastSeen'">
-        <mat-cell *matCellDef="let element">{{ element[columnName] | date: 'MM/dd/yy h:mm a' }}</mat-cell>
+        <mat-cell *matCellDef="let element">{{ element[column.value] | date: 'MM/dd/yy h:mm a' }}</mat-cell>
       </ng-container>
       <ng-container *ngSwitchCase="'operational'">
         <mat-cell *matCellDef="let element">
@@ -58,7 +61,7 @@
         </mat-cell>
       </ng-container>
       <ng-container *ngSwitchDefault>
-        <mat-cell *matCellDef="let element">{{ element[columnName] }}</mat-cell>
+        <mat-cell *matCellDef="let element">{{ element[column.value] }}</mat-cell>
       </ng-container>
     </ng-container>
   </ng-container>

udmif/web/src/app/devices/devices.component.ts

@@ -3,13 +3,14 @@ import { PageEvent } from '@angular/material/paginator';
 import { Sort } from '@angular/material/sort';
 import { SearchFilterItem } from '../search-filter/search-filter';
 import { Device, DeviceModel } from '../device/device';
-import { DevicesQueryResponse, DevicesQueryVariables, SortOptions } from './devices';
+import { DeviceColumn, DevicesQueryResponse, DevicesQueryVariables, SortOptions } from './devices';
 import { DevicesService } from './devices.service';
 import { QueryRef } from 'apollo-angular';
 import { Subscription } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 import { compact, union } from 'lodash-es';
 import { animate, state, style, transition, trigger } from '@angular/animations';
+import { DevicesConstants } from './devices.constants';
 
 @Component({
   templateUrl: './devices.component.html',
@@ -25,7 +26,10 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 export class DevicesComponent implements OnInit, OnDestroy {
   devicesSubscription!: Subscription;
   devicesQuery!: QueryRef<DevicesQueryResponse, DevicesQueryVariables>;
-  displayedColumns: (keyof DeviceModel)[] = this.route.snapshot.data['displayedColumns'];
+  columns: DeviceColumn[] = this.devicesConstants.deviceColumns;
+  displayedColumns: (keyof DeviceModel)[] = this.columns
+    .map(({ value }) => value)
+    .filter((columnValue) => this.route.snapshot.data['displayedColumns'].includes(columnValue));
   siteId?: string = this.route.snapshot.params['siteId'];
   devices: Device[] = [];
   totalCount: number = 0;
@@ -41,7 +45,11 @@ export class DevicesComponent implements OnInit, OnDestroy {
   searchFields: Record<string, string> = this.route.snapshot.data['searchFields'];
   expandedElement: Device | null = null;
 
-  constructor(private devicesService: DevicesService, private route: ActivatedRoute) {}
+  constructor(
+    private devicesService: DevicesService,
+    private route: ActivatedRoute,
+    private devicesConstants: DevicesConstants
+  ) {}
 
   ngOnInit(): void {
     this.devicesQuery = this.devicesService.getDevices(0, this.pageSize, this.sortOptions, this.filter); // start off on first page, i.e. offset 0

udmif/web/src/app/devices/devices.constants.ts

@@ -0,0 +1,75 @@
+import { Injectable } from '@angular/core';
+import { DeviceColumn } from './devices';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DevicesConstants {
+  public deviceColumns: DeviceColumn[] = [
+    {
+      value: 'name',
+      label: 'Name',
+      isSortable: true,
+    },
+    {
+      value: 'make',
+      label: 'Make',
+      isSortable: true,
+    },
+    {
+      value: 'model',
+      label: 'Model',
+      isSortable: true,
+    },
+    {
+      value: 'site',
+      label: 'Site',
+      isSortable: true,
+    },
+    {
+      value: 'section',
+      label: 'Section',
+      isSortable: true,
+    },
+    {
+      value: 'lastPayload',
+      label: 'Last Payload',
+      isSortable: true,
+    },
+    {
+      value: 'operational',
+      label: 'Operational',
+      isSortable: true,
+    },
+    {
+      value: 'message',
+      label: 'Message',
+      isSortable: false,
+    },
+    {
+      value: 'details',
+      label: 'Details',
+      isSortable: false,
+    },
+    {
+      value: 'level',
+      label: 'Level',
+      isSortable: false,
+    },
+    {
+      value: 'state',
+      label: 'State',
+      isSortable: false,
+    },
+    {
+      value: 'lastSeen',
+      label: 'Last Seen',
+      isSortable: false,
+    },
+    {
+      value: 'errorsCount',
+      label: 'Errors',
+      isSortable: false,
+    },
+  ];
+}

udmif/web/src/app/devices/devices.d.ts

@@ -1,4 +1,4 @@
-import { Device } from '../device/device';
+import { Device, DeviceModel } from '../device/device';
 
 export interface SearchOptions {
   batchSize?: number;
@@ -69,3 +69,9 @@ export interface DeviceSectionsQueryVariables extends CommonSearchQueryVariables
 export type DeviceDistinctQueryResult = {
   values: string[];
 };
+
+export type DeviceColumn = {
+  value: keyof DeviceModel;
+  label: string;
+  isSortable: boolean;
+};

udmif/web/src/app/sites/sites.component.html

@@ -22,11 +22,14 @@
   (matSortChange)="sortData($event)"
   aria-label="List of sites"
 >
-  <ng-container *ngFor="let columnName of displayedColumns" matColumnDef="{{ columnName }}">
-    <mat-header-cell *matHeaderCellDef mat-sort-header>{{
-      columnName.replace('Count', '') | capitalize
-    }}</mat-header-cell>
-    <ng-container [ngSwitch]="columnName">
+  <ng-container *ngFor="let column of columns" matColumnDef="{{ column.value }}">
+    <ng-container *ngIf="column.isSortable">
+      <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.label }}</mat-header-cell>
+    </ng-container>
+    <ng-container *ngIf="!column.isSortable">
+      <mat-header-cell *matHeaderCellDef>{{ column.label }}</mat-header-cell>
+    </ng-container>
+    <ng-container [ngSwitch]="column.value">
       <ng-container *ngSwitchCase="'name'">
         <mat-cell *matCellDef="let element"
           ><a [routerLink]="element.name">{{ element.name }}</a></mat-cell
@@ -53,7 +56,7 @@
         </mat-cell>
       </ng-container>
       <ng-container *ngSwitchDefault>
-        <mat-cell *matCellDef="let element">{{ element[columnName] }}</mat-cell>
+        <mat-cell *matCellDef="let element">{{ element[column.value] }}</mat-cell>
       </ng-container>
     </ng-container>
   </ng-container>

udmif/web/src/app/sites/sites.component.ts

@@ -3,13 +3,14 @@ import { PageEvent } from '@angular/material/paginator';
 import { Sort } from '@angular/material/sort';
 import { SearchFilterItem } from '../search-filter/search-filter';
 import { Site, SiteModel } from '../site/site';
-import { SiteErrorSummaryItem, SitesQueryResponse, SitesQueryVariables, SortOptions } from './sites';
+import { SiteColumn, SiteErrorSummaryItem, SitesQueryResponse, SitesQueryVariables, SortOptions } from './sites';
 import { SitesService } from './sites.service';
 import { QueryRef } from 'apollo-angular';
 import { Subscription } from 'rxjs';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { DeviceError } from '../device-errors/device-errors';
 import { groupBy, orderBy, map } from 'lodash-es';
+import { SitesConstants } from './sites.constants';
 
 @Component({
   templateUrl: './sites.component.html',
@@ -25,17 +26,8 @@ import { groupBy, orderBy, map } from 'lodash-es';
 export class SitesComponent implements OnInit, OnDestroy {
   sitesSubscription!: Subscription;
   sitesQuery!: QueryRef<SitesQueryResponse, SitesQueryVariables>;
-  displayedColumns: (keyof SiteModel)[] = [
-    'name',
-    'totalDevicesCount',
-    'correctDevicesCount',
-    'missingDevicesCount',
-    'errorDevicesCount',
-    'extraDevicesCount',
-    'lastValidated',
-    'percentValidated',
-    'totalDeviceErrorsCount',
-  ];
+  columns: SiteColumn[] = this.sitesConstants.siteColumns;
+  displayedColumns: (keyof SiteModel)[] = this.columns.map(({ value }) => value);
   sites: Site[] = [];
   totalCount: number = 0;
   totalFilteredCount: number = 0;
@@ -49,7 +41,7 @@ export class SitesComponent implements OnInit, OnDestroy {
   };
   expandedElement: Site | null = null;
 
-  constructor(private sitesService: SitesService) {}
+  constructor(private sitesService: SitesService, private sitesConstants: SitesConstants) {}
 
   ngOnInit(): void {
     this.sitesQuery = this.sitesService.getSites(0, this.pageSize); // start off on first page, i.e. offset 0

udmif/web/src/app/sites/sites.constants.ts

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import { SiteColumn } from './sites';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SitesConstants {
+  public siteColumns: SiteColumn[] = [
+    {
+      value: 'name',
+      label: 'Name',
+      isSortable: true,
+    },
+    {
+      value: 'totalDevicesCount',
+      label: 'Devices',
+      isSortable: false,
+    },
+    {
+      value: 'correctDevicesCount',
+      label: 'Correct Devices',
+      isSortable: false,
+    },
+    {
+      value: 'missingDevicesCount',
+      label: 'Missing Devices',
+      isSortable: false,
+    },
+    {
+      value: 'errorDevicesCount',
+      label: 'Error Devices',
+      isSortable: false,
+    },
+    {
+      value: 'extraDevicesCount',
+      label: 'Extra Devices',
+      isSortable: false,
+    },
+    {
+      value: 'lastValidated',
+      label: 'Last Validated',
+      isSortable: false,
+    },
+    {
+      value: 'percentValidated',
+      label: '% Validated',
+      isSortable: false,
+    },
+    {
+      value: 'totalDeviceErrorsCount',
+      label: 'Device Errors',
+      isSortable: false,
+    },
+  ];
+}

udmif/web/src/app/sites/sites.d.ts

@@ -1,4 +1,4 @@
-import { Site } from '../site/site';
+import { Site, SiteModel } from '../site/site';
 
 export interface SearchOptions {
   batchSize?: number;
@@ -50,3 +50,9 @@ export type SiteErrorSummaryItem = {
   count: number;
   message: string;
 };
+
+export type SiteColumn = {
+  value: keyof SiteModel;
+  label: string;
+  isSortable: boolean;
+};