Make a separate area to show the workflow-specs that are marked as 'Libraries'

package.json

@@ -55,7 +55,7 @@
     "ngx-markdown": "^9.1.1",
     "protractor": "^7.0.0",
     "rxjs": "~6.5.4",
-    "sartography-workflow-lib": "0.0.522",
+    "sartography-workflow-lib": "0.0.532",
     "tslib": "^1.13.0",
     "uuid": "^7.0.2",
     "zone.js": "^0.10.3"

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

@@ -101,6 +101,17 @@ export class WorkflowSpecDialogComponent {
             indeterminate: false,
           },
         },
+        {
+          key: 'library',
+          type: 'checkbox',
+          defaultValue: this.data.library,
+          templateOptions: {
+            label: 'Library',
+            description: 'Is this a library workflow?',
+            required: true,
+            indeterminate: false,
+          },
+        },
       ];
     });
   }

src/app/_interfaces/dialog-data.ts

@@ -26,6 +26,7 @@ export interface WorkflowSpecDialogData {
   category_id: number;
   display_order: number;
   standalone: boolean;
+  library: boolean;
 }
 
 export interface WorkflowSpecCategoryDialogData {

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

@@ -26,7 +26,45 @@
         </div>
       </ng-container>
       <mat-divider></mat-divider>
+      <ng-container>
+        <div class="category">
+          <h4>Libraries</h4>
+          <mat-list>
+            <mat-list-item *ngFor="let wfs of workflowLibraries" 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">
+                <button
+                  mat-icon-button
+                  title="Move up"
+                  color="primary"
+                >
+                  <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button
 
+                  mat-icon-button
+                  title="Move down"
+                  color="primary"
+
+                >
+                  <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>
+      </ng-container>
+      <mat-divider></mat-divider>
+
+      <ng-container>
+        <div class="category">
+          <h4>Categories</h4>
+        </div>
+        <mat-divider></mat-divider>
 
       <mat-accordion class="example-headers-align" multi="false">
       <ng-container *ngFor="let cat of workflowSpecsByCategory">
@@ -108,6 +146,7 @@
         </div>
       </ng-container>
       </mat-accordion>
+      </ng-container>
     </mat-drawer>
 
     <div class="content">

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

@@ -141,7 +141,8 @@ describe('WorkflowSpecListComponent', () => {
       description: '',
       category_id: 0,
       display_order: 0,
-      standalone: false
+      standalone: false,
+      library: false
     };
 
     const _upsertWorkflowSpecificationSpy = spyOn((component as any), '_upsertWorkflowSpecification')

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

@@ -44,6 +44,7 @@ export interface WorkflowSpecCategoryGroup {
 })
 export class WorkflowSpecListComponent implements OnInit {
   workflowSpecs: WorkflowSpec[] = [];
+  workflowLibraries: WorkflowSpec[] = [];
   selectedSpec: WorkflowSpec;
   masterStatusSpec: WorkflowSpec;
   selectedCat: WorkflowSpecCategory;
@@ -72,6 +73,7 @@ export class WorkflowSpecListComponent implements OnInit {
         this._loadWorkflowSpecCategories();
       }
     });
+    this._loadWorkflowLibraries();
     this.searchField = new FormControl();
     this.searchField.valueChanges.subscribe(value => {
       this._loadWorkflowSpecs(null, value);
@@ -118,6 +120,7 @@ export class WorkflowSpecListComponent implements OnInit {
       category_id: selectedSpec ? selectedSpec.category_id : null,
       display_order: hasDisplayOrder ? selectedSpec.display_order : 0,
       standalone: selectedSpec ? selectedSpec.standalone : null,
+      library: selectedSpec ? selectedSpec.library : null,
     };
 
 
@@ -221,8 +224,17 @@ export class WorkflowSpecListComponent implements OnInit {
         this.workflowSpecsByCategory[i + 1].workflow_specs = [];
       });
       this._loadWorkflowSpecs(selectedSpecName);
+      this._loadWorkflowLibraries();
     });
   }
+  private _loadWorkflowLibraries() {
+
+    this.api.getWorkflowSpecificationLibraries().subscribe(wfs => {
+      this.workflowLibraries = wfs;
+    });
+  }
+
+
   private _loadWorkflowSpecs(selectedSpecName: String = null, searchSpecName: String = null) {
 
     this.api.getWorkflowSpecList().subscribe(wfs => {
@@ -269,7 +281,8 @@ export class WorkflowSpecListComponent implements OnInit {
         description: data.description,
         category_id: data.category_id,
         display_order: data.display_order,
-        standalone: data.standalone
+        standalone: data.standalone,
+        library: data.library
       };
 
       if (isNew) {
@@ -304,6 +317,7 @@ export class WorkflowSpecListComponent implements OnInit {
 
   private _updateWorkflowSpec(specId: string, newSpec: WorkflowSpec) {
     this.api.updateWorkflowSpecification(specId, newSpec).subscribe(_ => {
+      this._loadWorkflowLibraries();
       this._loadWorkflowSpecs();
       this._displayMessage('Saved changes to workflow spec.');
     });