enable expandable rows for devices list

Author: jesselucas

src/app/lists/device-list/device-list.component.html

@@ -2,27 +2,28 @@
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
 </mat-form-field>
-<table mat-table class="full-width-table" matSort aria-label="Elements">
-  <!-- Id Column -->
-  <ng-container matColumnDef="id">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
-    <td mat-cell *matCellDef="let row">{{row.deviceID}}</td>
+<table mat-table class="full-width-table" matSort aria-label="Devices" multiTemplateDataRows>
+  <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
+    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+    <td mat-cell *matCellDef="let device"> {{device[column]}} </td>
   </ng-container>
-
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-    <td mat-cell *matCellDef="let row">{{row.name}}</td>
-  </ng-container>
-
-  <!-- Status Column -->
-  <ng-container matColumnDef="state">
-    <th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
-    <td mat-cell *matCellDef="let row">{{row.state}}</td>
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let device" [attr.colspan]="displayedColumns.length">
+      <div class="device-detail" [@detailExpand]="device == expandedDevice ? 'expanded' : 'collapsed'">
+        <div class="device-folders">
+          <span>Folders: </span>
+          <span class="folder-name" *ngFor="let folder of device.folders">{{folder.label | trim}}</span>
+        </div>
+      </div>
+    </td>
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <tr mat-row *matRowDef="let device; columns: displayedColumns;" class="device-row"
+    [class.expanded-row]="expandedDevice === device"
+    (click)="expandedDevice = expandedDevice === device ? null : device">
+  </tr>
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
 </table>
 
 <mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="25"

src/app/lists/device-list/device-list.component.scss

@@ -1,8 +1,44 @@
 .full-width-table {
-  width: 100%;
+    width: 100%;
 }
-
+  
 .mat-form-field {
-  font-size: 14px;
-  width: 100%;
+    font-size: 14px;
+    width: 100%;
+}
+
+tr.detail-row {
+  height: 0;
+}
+
+tr.device-row:not(.expanded-row):hover {
+  background: whitesmoke;
+}
+
+/*
+tr.device-row:not(.device-row):active {
+  background: #efefef;
+}
+*/
+
+.device-row td {
+  border-bottom-width: 0;
+}
+
+.device-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.device-folders {
+  padding-bottom: 16px;
+}
+
+// Hide empty name
+.folder-name:empty {
+  display: none;
+}
+
+.folder-name:not(:last-child):after {
+  content: ", ";
 }

src/app/lists/device-list/device-list.component.ts

@@ -9,11 +9,19 @@ import { FilterService } from 'src/app/services/filter.service';
 import { StType } from 'src/app/type';
 import { MatInput } from '@angular/material/input';
 import { DeviceService } from 'src/app/services/device.service';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-device-list',
   templateUrl: './device-list.component.html',
-  styleUrls: ['./device-list.component.scss']
+  styleUrls: ['./device-list.component.scss'],
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed', style({ height: '0px', minHeight: '0' })),
+      state('expanded', style({ height: '*' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
 })
 export class DeviceListComponent implements AfterViewInit, OnInit, OnDestroy {
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -23,7 +31,8 @@ export class DeviceListComponent implements AfterViewInit, OnInit, OnDestroy {
   dataSource: MatTableDataSource<Device>;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['id', 'name', 'state'];
+  displayedColumns = ['deviceID', 'name', 'state'];
+  expandedDevice: Device | null;
 
   constructor(
     private deviceService: DeviceService,

src/app/lists/folder-list/folder-list.component.scss

@@ -11,13 +11,15 @@ tr.detail-row {
   height: 0;
 }
 
-tr.folder-row:not(.example-expanded-row):hover {
+tr.folder-row:not(.expanded-row):hover {
   background: whitesmoke;
 }
 
+/*
 tr.folder-row:not(.folder-row):active {
   background: #efefef;
 }
+*/
 
 .folder-row td {
   border-bottom-width: 0;
@@ -32,15 +34,11 @@ tr.folder-row:not(.folder-row):active {
   padding-bottom: 16px;
 }
 
-.device-name:not(:first-child) {
-  margin-left: -.3em;  
-}
-
 // Hide empty name
 .device-name:empty {
   display: none;
 }
 
-.device-name:not(:first-child):before {
+.device-name:not(:last-child):after {
   content: ", ";
 }

src/app/lists/folder-list/folder-list.component.ts

@@ -31,7 +31,13 @@ export class FolderListComponent implements AfterViewInit, OnInit, OnDestroy {
   dataSource: MatTableDataSource<Folder>;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['id', 'label', 'path', 'state'];
+  displayedColumns = [
+    "id",
+    "label",
+    "path",
+    "state"
+  ];
+
   expandedFolder: Folder | null;
 
   constructor(