From a199b1c3f73d6d6a32777b2ecf5e2f0a0c75d348 Mon Sep 17 00:00:00 2001
From: Dan <daniel.h.funk@gmail.com>
Date: Tue, 23 Feb 2021 16:20:42 -0500
Subject: [PATCH] a little cleanup on the navigation for the workflow specs.

---
 src/app/app.module.ts                         | 58 +++++++-------
 .../workflow-spec-list.component.html         | 79 +++++++++++--------
 .../workflow-spec-list.component.scss         |  7 ++
 3 files changed, 82 insertions(+), 62 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f255d93..64586a5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -52,6 +52,7 @@ import {WorkflowSpecCardComponent} from './workflow-spec-card/workflow-spec-card
 import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list.component';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import { ConfirmDialogComponent } from './_dialogs/confirm-dialog/confirm-dialog.component';
+import {MatExpansionModule} from '@angular/material/expansion';
 
 @Injectable()
 export class ThisEnvironment implements AppEnvironment {
@@ -103,34 +104,35 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     ReferenceFilesComponent,
     ConfirmDialogComponent,
   ],
-  imports: [
-    BrowserAnimationsModule,
-    BrowserModule,
-    FlexLayoutModule,
-    FormlyModule,
-    FormsModule,
-    HttpClientModule,
-    MatBottomSheetModule,
-    MatButtonModule,
-    MatCardModule,
-    MatDialogModule,
-    MatDividerModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatSnackBarModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatTooltipModule,
-    ReactiveFormsModule,
-    SartographyFormsModule,
-    SartographyPipesModule,
-    SartographyWorkflowLibModule,
-    AppRoutingModule,
-    MatSidenavModule,
-    // <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
-  ],
+    imports: [
+        BrowserAnimationsModule,
+        BrowserModule,
+        FlexLayoutModule,
+        FormlyModule,
+        FormsModule,
+        HttpClientModule,
+        MatBottomSheetModule,
+        MatButtonModule,
+        MatCardModule,
+        MatDialogModule,
+        MatDividerModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatSnackBarModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatTooltipModule,
+        ReactiveFormsModule,
+        SartographyFormsModule,
+        SartographyPipesModule,
+        SartographyWorkflowLibModule,
+        AppRoutingModule,
+        MatSidenavModule,
+        MatExpansionModule,
+        // <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
+    ],
   bootstrap: [AppComponent],
   entryComponents: [
     DeleteFileDialogComponent,
diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.html b/src/app/workflow-spec-list/workflow-spec-list.component.html
index 90ab1d2..6a98abe 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.html
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.html
@@ -24,11 +24,50 @@
       </ng-container>
       <mat-divider></mat-divider>
 
+
+      <mat-accordion class="example-headers-align" multi="false">
       <ng-container *ngFor="let cat of workflowSpecsByCategory">
         <ng-container *ngIf="!(cat.id === null && cat.workflow_specs.length === 0)">
-          <div class="category" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
-            <h4>{{cat.display_name}} ({{cat.name}})</h4>
-            <div class="category-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
+          <mat-expansion-panel hideToggle [expanded]="selectedSpec.category_id == cat.id">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                {{cat.display_name}}
+              </mat-panel-title>
+              <mat-panel-description>
+                ({{cat.name}})
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+            <mat-list>
+              <mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+                <a [ngClass]="{'spec_menu_item':true, 'spec-selected': wfs.id == selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
+                <span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
+                <button
+                  *ngIf="cat && cat.workflow_specs.length > 0 && wfs.display_order !== 0"
+                  mat-icon-button
+                  title="Move up"
+                  color="primary"
+                  (click)="editSpecDisplayOrder(wfs.id, -1, cat.workflow_specs)"
+                >
+                  <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button
+                  *ngIf="cat && cat.workflow_specs.length > 0 && (wfs.display_order < cat.workflow_specs.length - 1)"
+                  mat-icon-button
+                  title="Move down"
+                  color="primary"
+                  (click)="editSpecDisplayOrder(wfs.id, 1, cat.workflow_specs)"
+                >
+                  <mat-icon>arrow_downward</mat-icon>
+                </button>
+              </span>
+                <!--
+                <ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
+                -->
+              </mat-list-item>
+            </mat-list>
+
+            <div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
+            <mat-action-row>
               <button mat-mini-fab color="primary" (click)="editWorkflowSpecCategory(cat)">
                 <mat-icon>edit</mat-icon>
               </button>
@@ -54,40 +93,12 @@
                       (click)="confirmDeleteWorkflowSpecCategory(cat)">
                 <mat-icon>delete</mat-icon>
               </button>
-            </div>
-          </div>
-          <mat-list>
-            <mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
-              <a class="spec_menu_item" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
-              <span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
-                <button
-                  *ngIf="cat && cat.workflow_specs.length > 0 && wfs.display_order !== 0"
-                  mat-mini-fab
-                  title="Move up"
-                  color="primary"
-                  (click)="editSpecDisplayOrder(wfs.id, -1, cat.workflow_specs)"
-                >
-                  <mat-icon>arrow_upward</mat-icon>
-                </button>
-                <button
-                  *ngIf="cat && cat.workflow_specs.length > 0 && (wfs.display_order < cat.workflow_specs.length - 1)"
-                  mat-mini-fab
-                  title="Move down"
-                  color="primary"
-                  (click)="editSpecDisplayOrder(wfs.id, 1, cat.workflow_specs)"
-                >
-                  <mat-icon>arrow_downward</mat-icon>
-                </button>
-              </span>
-              <!--
-              <ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
-              -->
-            </mat-list-item>
-          </mat-list>
+            </mat-action-row>
+          </mat-expansion-panel>
 
-          <div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
         </ng-container>
       </ng-container>
+      </mat-accordion>
     </mat-drawer>
 
     <div class="content">
diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.scss b/src/app/workflow-spec-list/workflow-spec-list.component.scss
index 7f38d29..2dd4f58 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.scss
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.scss
@@ -32,9 +32,13 @@
 
 }
 
+.mat-list-base .mat-list-item, .mat-list-base .mat-list-option {
+  height: auto;
+}
 
 .workflow-spec {
   border-left: 4px solid $brand-gray-light;
+  font-size: 1em;
   &:hover {
     border-left: 4px solid $brand-primary;
     background-color: $brand-primary-tint-4;
@@ -48,6 +52,9 @@
     width: 300px;
     margin-left: 20px;
   }
+  .spec-selected {
+    font-weight: bold;
+  }
   .spec-actions {
     width: 100px;
     opacity: 0;