start of expandable rows for folder list

Author: jesselucas

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

@@ -2,33 +2,29 @@
     <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.id}}</td>
+<table mat-table class="full-width-table" matSort aria-label="Folders" multiTemplateDataRows>
+    <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
+        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+        <td mat-cell *matCellDef="let folder"> {{folder[column]}} </td>
     </ng-container>
-
-    <!-- Label Column -->
-    <ng-container matColumnDef="label">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-        <td mat-cell *matCellDef="let row">{{row.label}}</td>
-    </ng-container>
-
-    <!-- Path Column -->
-    <ng-container matColumnDef="path">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Path</th>
-        <td mat-cell *matCellDef="let row">{{row.path}}</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>
+    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+    <ng-container matColumnDef="expandedDetail">
+        <td mat-cell *matCellDef="let folder" [attr.colspan]="displayedColumns.length">
+            <div class="folder-detail" [@detailExpand]="folder == expandedFolder ? 'expanded' : 'collapsed'">
+                <div class="folder-devices">
+                    <span>Shared with: </span>
+                    <span class="device-name" *ngFor="let device of folder.devices">{{device.name}}</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 folder; columns: displayedColumns;" class="folder-row"
+        [class.example-expanded-row]="expandedFolder === folder"
+        (click)="expandedFolder = expandedFolder === folder ? null : folder">
+    </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/folder-list/folder-list.component.scss

@@ -5,4 +5,42 @@
 .mat-form-field {
     font-size: 14px;
     width: 100%;
+}
+
+tr.detail-row {
+  height: 0;
+}
+
+tr.folder-row:not(.example-expanded-row):hover {
+  background: whitesmoke;
+}
+
+tr.folder-row:not(.folder-row):active {
+  background: #efefef;
+}
+
+.folder-row td {
+  border-bottom-width: 0;
+}
+
+.folder-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.folder-devices {
+  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 {
+  content: ", ";
 }

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

@@ -8,11 +8,20 @@ import { SystemConfigService } from '../../services/system-config.service';
 import { FilterService } from 'src/app/services/filter.service';
 import { StType } from 'src/app/type';
 import { MatInput } from '@angular/material/input';
+import { FolderService } from 'src/app/services/folder.service';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
   selector: 'app-folder-list',
   templateUrl: './folder-list.component.html',
-  styleUrls: ['./folder-list.component.scss']
+  styleUrls: ['./folder-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 FolderListComponent implements AfterViewInit, OnInit, OnDestroy {
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -23,6 +32,7 @@ export class FolderListComponent implements AfterViewInit, OnInit, OnDestroy {
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'label', 'path', 'state'];
+  expandedFolder: Folder | null;
 
   constructor(
     private folderService: FolderService,