IOT-1403: Implemented application table column selection (#149)

* Fixed routing of gateway list + fixed memory leak by unsubscribing properly from gateway fetches * Fixed routing errors in gateway list * Changed mqtt datatarget topic placeholder + added tooltip * Added additional text changes from Product Owner * Removed maxLenght from device AND gateway EUI, now removes non-hex digits on submit * Added sticky to name column on gateway status table * Implemented application table column selection * Removed unused controller name from select
OS2iot · Dec 5, 2023 · ae520ae · ae520ae
1 parent 8743af2
commit ae520ae
Show file tree

Hide file tree

Showing 8 changed files with 368 additions and 32 deletions.
diff --git a/src/app/applications/application.model.ts b/src/app/applications/application.model.ts
@@ -6,6 +6,7 @@ import { ApplicationStatus } from './enums/status.enum';
 import { IotDevice } from './iot-devices/iot-device.model';
 import { ApplicationDeviceType } from './models/application-device-type.model';
 import { PermissionResponse } from '@app/admin/permission/permission.model';
+import { Datatarget } from '@applications/datatarget/datatarget.model';
 
 export class Application {
   public id: number;
@@ -33,6 +34,7 @@ export class Application {
   public deviceTypes?: ApplicationDeviceType[];
   public permissions: PermissionResponse[];
   public permissionIds: number[];
+  public dataTargets: Datatarget[];
 }
 
 export class ApplicationRequest {

diff --git a/src/app/applications/applications-list/applications-table/applications-table.component.html b/src/app/applications/applications-list/applications-table/applications-table.component.html
@@ -1,3 +1,31 @@
+<div class="select-container">
+  <mat-select
+    class="form-control table-select"
+    multiple="true"
+    [(value)]="optionalColumnsSelected"
+    (selectionChange)="handleColumnSelection($event)"
+    panelClass="tall"
+  >
+    <mat-option disabled>
+      <button
+        mat-raised-button
+        class="mat-primary fill text-sm"
+        (click)="selectAll()">
+        {{'QUESTION.DATATARGET.SELECTALLDEVICES' | translate}}
+      </button>
+      <button
+        mat-raised-button
+        class="mat-primary fill text-sm"
+        (click)="deSelectAll()">
+        {{'QUESTION.DATATARGET.DESELECTALLDEVICES' | translate}}
+      </button>
+    </mat-option>
+    <mat-option *ngFor="let option of optionalColumnOptions" [value]="option.id">
+      {{option.display | translate}}
+    </mat-option>
+  </mat-select>
+</div>
+
 <div class="mat-elevation-z8">
   <div class="loading-shade" *ngIf="isLoadingResults">
     <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
@@ -8,16 +36,34 @@
     </div>
 
     <table mat-table [dataSource]="data" class="example-table" matSort matSortActive="name" matSortDisableClear
-      matSortDirection="asc">
+           matSortDirection="asc">
 
       <!-- Name Column -->
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-6">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-2">
           {{ 'APPLICATION-TABLE.NAME' | translate }}
         </th>
         <td mat-cell *matCellDef="let element">
           <a [routerLink]="['/applications', element.id]" routerLinkActive="active"
-            class="application-link">{{element.name}}</a>
+             class="application-link">{{element.name}}</a>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="owner">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+          {{'APPLICATION-TABLE.OWNER' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{application.owner ?? '-'}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="contactPerson">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+          {{'APPLICATION-TABLE.CONTACT-PERSON' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{application.contactPerson ?? '-'}}
         </td>
       </ng-container>
 
@@ -26,7 +72,89 @@
         <th mat-header-cell *matHeaderCellDef class="col-2">
           {{ 'APPLICATION-TABLE.IOT-DEVICES' | translate }}</th>
         <td mat-cell *matCellDef="let element">
-          {{element ?.iotDevices?.length ? element?.iotDevices?.length : 0}}
+          {{element?.iotDevices?.length ?? 0}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="dataTargets">
+        <th mat-header-cell *matHeaderCellDef class="col-1">
+          {{ 'APPLICATION-TABLE.DATA-TARGETS' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{application?.dataTargets?.length ?? 0}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="openDataDkEnabled">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+          {{ 'APPLICATION-TABLE.OPEN-DATA-DK' | translate }}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{isOpenDataDK(application.dataTargets) | yesNo}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+          {{'APPLICATION-TABLE.STATUS' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{'APPLICATION.STATUS.' + application.status | translate}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="personalData">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+          {{'APPLICATION-TABLE.PERSONAL-DATA' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          <fa-icon *ngIf="application.personalData" [icon]="faFlagIcon" class="flag-icon"></fa-icon>
+          {{!application.personalData ? '-' : ''}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="startDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+          {{'APPLICATION-TABLE.START-DATE' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{(application.startDate | dateOnly) ?? '-'}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="endDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
+          {{'APPLICATION-TABLE.END-DATE' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{(application.endDate | dateOnly) ?? '-'}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="category">
+        <th mat-header-cell *matHeaderCellDef class="col-1">
+          {{'APPLICATION-TABLE.CATEGORY' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{application.category ?? '-'}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="controlledProperties">
+        <th mat-header-cell *matHeaderCellDef class="col-1">
+          {{'APPLICATION-TABLE.CONTROLLED-PROPERTIES' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{mapControlledProperties(application.controlledProperties) ?? '-'}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="deviceTypes">
+        <th mat-header-cell *matHeaderCellDef class="col-1">
+          {{'APPLICATION-TABLE.DEVICE-TYPES' | translate}}
+        </th>
+        <td mat-cell *matCellDef="let application">
+          {{mapDeviceTypes(application.deviceTypes) ?? '-'}}
         </td>
       </ng-container>
 
@@ -36,26 +164,28 @@
         <td mat-cell *matCellDef="let element">
           <div class="dropdown" *ngIf="element?.id | canEditApplication">
             <a href="#" role="button" id="tableRowDropdown-{{element.id}}" class="applicationRow__edit dropdown-toggle"
-              data-toggle="dropdown" aria-expanded="false"
-              [attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"></a>
+               data-toggle="dropdown" aria-expanded="false"
+               [attr.aria-label]="'APPLICATION-TABLE-ROW.SHOW-OPTIONS' | translate"></a>
             <ul class="dropdown-menu dropdown-menu--table" attr.aria-labelledby="tableRowDropdown-{{element.id}}">
               <li class="dropdown-item">
                 <a (click)="navigateToEditPage(element.id)"
-                  routerLinkActive="active">{{ 'APPLICATION-TABLE-ROW.EDIT' | translate }}</a>
+                   routerLinkActive="active">{{ 'APPLICATION-TABLE-ROW.EDIT' | translate }}</a>
               </li>
               <li class="dropdown-item">
                 <a (click)="deleteApplication(element.id)"
-                  [routerLink]="[]">{{ 'APPLICATION-TABLE-ROW.DELETE' | translate }}</a>
+                   [routerLink]="[]">{{ 'APPLICATION-TABLE-ROW.DELETE' | translate }}</a>
               </li>
             </ul>
           </div>
         </td>
       </ng-container>
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>
 
-  <mat-paginator [length]="resultsLength" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize" showFirstLastButtons>
+  <mat-paginator [length]="resultsLength" [pageSizeOptions]="pageSizeOptions" [pageSize]="pageSize"
+                 showFirstLastButtons>
   </mat-paginator>
 </div>
diff --git a/src/app/applications/applications-list/applications-table/applications-table.component.scss b/src/app/applications/applications-list/applications-table/applications-table.component.scss
@@ -1,12 +1,15 @@
-// .example-loading-shade {
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-//   bottom: 0;
-//   right: 0;
-//   background: rgba(0, 0, 0, 0.15);
-//   z-index: 1;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-// }
+.table-select {
+  width: 180px;
+  margin: 5px;
+
+}
+
+.select-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.flag-icon {
+  color: red;
+}