wip frontend changes

src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.scss

@@ -1,3 +1,3 @@
 ::ng-deep formly-field mat-form-field {
-  margin-bottom: 40px;
+
 }

src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.ts

@@ -64,6 +64,7 @@ export class WorkflowSpecDialogComponent {
             required: true,
             options: this.categories
           },
+          hideExpression: this.data.library,
         },
         {
           key: 'display_name',

src/app/workflow-spec-card/workflow-spec-card.component.html

@@ -19,9 +19,6 @@
       <dt>ID</dt><dd>{{workflowSpec.id}}</dd>
       <dt>Name</dt><dd>{{workflowSpec.name}}</dd>
       <dt>Description</dt><dd>{{workflowSpec.description}}</dd>
-      <dt>Standalone</dt><dd *ngIf="workflowSpec.standalone; then thenBlock else elseBlock"></dd>
-      <ng-template #thenBlock><dd>True</dd></ng-template>
-      <ng-template #elseBlock><dd>False</dd></ng-template>
     </dl>
     <h4>Workflow Spec Files</h4>
     <app-file-list [workflowSpec]="workflowSpec"></app-file-list>

src/app/workflow-spec-list/workflow-spec-list.component.html

@@ -1,6 +1,6 @@
 <div class="workflow-specs" fxLayout="column" fxLayoutGap="10px">
-  <h1>Workflow Specifications</h1>
-  <div class="buttons" fxLayout="row" fxLayoutGap="10px">
+  <div class="buttons" fxLayout="row" fxLayoutGap="20px">
+    <h1>Workflow Specifications</h1>
       <mat-form-field class="search-field">
         <label><input matInput type="search" placeholder="Search Workflows" fxLayoutAlign="start" class="form-control" [formControl]="searchField"></label>
       </mat-form-field>
@@ -8,7 +8,7 @@
   <mat-drawer-container class="example-container" autosize>
     <mat-drawer #drawer class="example-sidenav" mode="side" opened="true">
       <ng-container *ngIf="masterStatusSpec">
-        <div class="category">
+        <div class="category-top">
           <h4>Master Specification</h4>
           <mat-list>
             <mat-list-item class="workflow-spec" fxLayout="row">
@@ -23,7 +23,7 @@
       <ng-container>
         <div class="category" fxLayout="row">
           <h4>Library Specs</h4>
-          <button id="add_spec" title="Add new Library" mat-flat-button color="primary" (click)="editWorkflowSpec()" fxLayoutAlign="start">
+          <button id="add_spec" title="Add new Library" mat-flat-button color="primary" (click)="editWorkflowSpec('library')" fxLayoutAlign="start">
             <mat-icon>library_add</mat-icon>
 
           </button>
@@ -56,7 +56,7 @@
             <mat-icon>post_add</mat-icon>
 
           </button>
-          <button id="add_library" title="Add new Study Spec" mat-flat-button color="primary" (click)="editWorkflowSpec()" fxLayoutAlign="start">
+          <button id="add_library" title="Add new Study Spec" mat-flat-button color="primary" (click)="editWorkflowSpec('study')" fxLayoutAlign="start">
             <mat-icon>library_add</mat-icon>
 
           </button>
@@ -165,7 +165,7 @@
                 (click)="validateWorkflowSpec(wfs)">
           <mat-icon>verified_user</mat-icon>
         </button>
-        <button mat-mini-fab title="Edit this workflow specification" color="primary" (click)="editWorkflowSpec(wfs)">
+        <button mat-mini-fab title="Edit this workflow specification" color="primary" (click)="editWorkflowSpec(this.selectedSpec.library ? 'library' : 'study', wfs)">
           <mat-icon>edit</mat-icon>
         </button>
         <button mat-icon-button title="Delete this workflow specification" color="warn"

src/app/workflow-spec-list/workflow-spec-list.component.scss

@@ -16,6 +16,29 @@
   min-height: 600px;
 }
 
+.category-top {
+  padding: 0 1rem 1rem 0;
+
+  h4 {
+    margin: 1rem 1rem 0 0;
+  }
+
+  .category-actions {
+    opacity: 0;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    .category-actions {
+      opacity: 1;
+    }
+  }
+
+}
+
 .category {
   padding: 2rem 1rem 1rem 0;
 
@@ -78,6 +101,12 @@
   }
 }
 
+.search-field  {
+  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+    padding: .5em;
+  }
+}
+
 .library-selected {
   font-weight: bold;
 }

src/app/workflow-spec-list/workflow-spec-list.component.ts

@@ -112,6 +112,7 @@ export class WorkflowSpecListComponent implements OnInit {
   }
 
   canSaveWorkflowSpec(proposed: WorkflowSpecDialogData){
+    console.log('prop', proposed);
     if ((this.selectedSpec.parents.length > 0) && (!proposed.library)){
       this.snackBar.open('This Workflow Specification is still being used as a Library. Please remove references first!', 'Ok', { duration: 5000 });
       return false;
@@ -123,7 +124,7 @@ export class WorkflowSpecListComponent implements OnInit {
     return true;
   }
 
-  editWorkflowSpec(selectedSpec?: WorkflowSpec) {
+  editWorkflowSpec(state: String, selectedSpec?: WorkflowSpec) {
 
     const hasDisplayOrder = selectedSpec && isNumberDefined(selectedSpec.display_order);
     const dialogData: WorkflowSpecDialogData = {
@@ -136,6 +137,9 @@ export class WorkflowSpecListComponent implements OnInit {
       standalone: selectedSpec ? selectedSpec.standalone : null,
       library: selectedSpec ? selectedSpec.library : null,
     };
+    if (state === 'library') {
+      dialogData.library = true;
+    }
 
     // Open new filename/workflow spec dialog
     const dialogRef = this.dialog.open(WorkflowSpecDialogComponent, {