Merge pull request #98 from sartography/410-collapse-libraries

410 collapse libraries

angular.json

@@ -53,6 +53,15 @@
             "scripts": []
           },
           "configurations": {
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+
             "production": {
               "optimization": {
                 "scripts": true,
@@ -144,7 +153,11 @@
           "configurations": {
             "production": {
               "browserTarget": "cr-connect-bpmn:build:production"
+            },
+            "development": {
+              "browserTarget": "cr-connect-bpmn:build:development"
             }
+
           }
         },
         "extract-i18n": {

package.json

@@ -7,9 +7,11 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start:dev": "ng serve --configuration development",
     "build": "ng build",
     "build:prod": "ng build --configuration=production --configuration production --base-href=__REPLACE_ME_WITH_BASE_HREF__  --deploy-url=__REPLACE_ME_WITH_DEPLOY_URL__",
     "build:staging": "ng build --configuration=staging --configuration production --base-href=__REPLACE_ME_WITH_BASE_HREF__  --deploy-url=__REPLACE_ME_WITH_DEPLOY_URL__",
+    "build:dev": "ng build --configuration=development",
     "build:test": "ng build --configuration=test",
     "test": "ng test",
     "test:coverage": "ng test --codeCoverage=true --watch=false --browsers=ChromeHeadless",

src/app/_forms/validators/formly.validator.ts

@@ -4,23 +4,15 @@ import EMAIL_REGEX from './email.regex';
 import PHONE_REGEX from './phone.regex';
 import URL_REGEX from './url.regex';
 
-export const EmailValidator = (control: FormControl): ValidationErrors => {
+export const EmailValidator = (control: FormControl): ValidationErrors => !control.value || EMAIL_REGEX.test(control.value) ? null : {email: true};
-  return !control.value || EMAIL_REGEX.test(control.value) ? null : {email: true};
-};
 
 export const EmailValidatorMessage = (err, field: FormlyFieldConfig) => `"${field.formControl.value}" is not a valid email address`;
 
-export const UrlValidator = (control: FormControl): ValidationErrors => {
+export const UrlValidator = (control: FormControl): ValidationErrors => !control.value || URL_REGEX.test(control.value) ? null : {url: true};
-  return !control.value || URL_REGEX.test(control.value) ? null : {url: true};
-};
 
-export const UrlValidatorMessage = (err, field: FormlyFieldConfig) => {
+export const UrlValidatorMessage = (err, field: FormlyFieldConfig) => `We cannot save "${field.formControl.value}". Please provide the full path, including http:// or https://`;
-  return `We cannot save "${field.formControl.value}". Please provide the full path, including http:// or https://`;
-};
 
-export const PhoneValidator = (control: FormControl): ValidationErrors => {
+export const PhoneValidator = (control: FormControl): ValidationErrors => !control.value || PHONE_REGEX.test(control.value) ? null : {phone: true};
-  return !control.value || PHONE_REGEX.test(control.value) ? null : {phone: true};
-};
 
 export const PhoneValidatorMessage = (err, field: FormlyFieldConfig) => `"${field.formControl.value}" is not a valid phone number`;
 
@@ -42,9 +34,9 @@ export const MinValidationMessage = (err, field) => `This value should be more t
 export const MaxValidationMessage = (err, field) => `This value should be less than ${field.templateOptions.max}`;
 
 export const ShowError = (field: FieldType) => field.formControl &&
-    field.formControl.invalid &&
+  field.formControl.invalid &&
-    (
+  (
-      field.formControl.dirty ||
+    field.formControl.dirty ||
-      (field.options && field.options.parentForm && field.options.parentForm.submitted) ||
+    (field.options && field.options.parentForm && field.options.parentForm.submitted) ||
-      (field.field && field.field.validation && field.field.validation.show)
+    (field.field && field.field.validation && field.field.validation.show)
-    );
+  );

src/app/_util/diagram-type.ts

@@ -1,5 +1,3 @@
 import { FileType } from 'sartography-workflow-lib';
 
-export const getDiagramTypeFromXml = (xml: string): FileType => {
+export const getDiagramTypeFromXml = (xml: string): FileType =>(xml && /dmn\.xsd|dmndi:DMNDiagram/.test(xml) ? FileType.DMN : FileType.BPMN);
-  return (xml && /dmn\.xsd|dmndi:DMNDiagram/.test(xml) ? FileType.DMN : FileType.BPMN);
-};

src/app/library-list/library-list.component.html

@@ -1,9 +1,10 @@
 <div class="file-list">
   <mat-list>
     <mat-list-item
-      *ngFor="let fm of workflowLibraries"
+      *ngFor="let fm of getCurrentItems()"
     >
-      <mat-checkbox (click)="updateItem(fm,isChecked(fm))" [checked]="isChecked(fm)">{{fm.display_name}}</mat-checkbox>
+
+      <mat-checkbox  (click)="updateItem(fm,isChecked(fm))" [checked]="isChecked(fm)">{{fm.display_name}}</mat-checkbox>
     </mat-list-item>
   </mat-list>
 </div>

src/app/library-list/library-list.component.ts

@@ -11,11 +11,14 @@ import {
 })
 export class LibraryListComponent implements OnInit, OnChanges {
   @Input() workflowSpecId: string;
+  @Input() showAll: boolean;
   workflowLibraries: WorkflowSpec[];
 
   constructor(
     private api: ApiService,
   ) {
+    this.showAll = false;
+    this.workflowLibraries =[];
   }
 
   ngOnInit() {
@@ -35,6 +38,10 @@ export class LibraryListComponent implements OnInit, OnChanges {
     return checked;
   }
 
+  getCurrentItems(){
+    return this.workflowLibraries.filter((item)=> this.isChecked(item) || this.showAll)
+  }
+
   updateItem(library: WorkflowSpec , checked: boolean) {
     if (checked) {
       this.api.deleteWorkflowLibrary(this.workflowSpecId, library.id).subscribe(() => {

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

@@ -26,8 +26,11 @@
     <h4>Workflow Spec Files</h4>
     <app-file-list [workflowSpec]="workflowSpec"></app-file-list>
     <div *ngIf="!workflowSpec.library">
-      <h4>Included Libraries</h4>
+      <h4 class="library-list">
-      <app-library-list [workflowSpecId]="workflowSpec.id"></app-library-list>
+        <mat-icon (click)="expandToggle()" class="expand" *ngIf="!showAll">chevron_right</mat-icon>
+        <mat-icon (click)="expandToggle()" class="expand" *ngIf="showAll">expand_more</mat-icon>
+        Included Libraries</h4>
+      <app-library-list [showAll]="showAll"   [workflowSpecId]="workflowSpec.id"></app-library-list>
     </div>
   </mat-card-content>
   <mat-card-actions>

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

@@ -48,3 +48,11 @@ mat-card {
   }
 
 }
+
+.library-list{
+  margin-top: 2rem;
+}
+
+.expand{
+  margin-right: 5px;
+}

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

@@ -1,5 +1,6 @@
 import {Component, Input, TemplateRef} from '@angular/core';
-import {ApiService, WorkflowSpec} from 'sartography-workflow-lib';
+import { WorkflowSpec} from 'sartography-workflow-lib';
+
 
 @Component({
   selector: 'app-workflow-spec-card',
@@ -9,9 +10,11 @@ import {ApiService, WorkflowSpec} from 'sartography-workflow-lib';
 export class WorkflowSpecCardComponent {
   @Input() workflowSpec: WorkflowSpec;
   @Input() actionButtons: TemplateRef<any>;
-
+  showAll: boolean;
   constructor(
-    private api: ApiService
   ) {
   }
+  expandToggle() {
+    this.showAll = !this.showAll;
+  }
 }

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

@@ -10,7 +10,7 @@
       Add category
     </button>
       <mat-form-field class="search-field">
-        <input matInput type="search" placeholder="Search Workflows" class="form-control" [formControl]="searchField">
+        <label><input matInput type="search" placeholder="Search Workflows" class="form-control" [formControl]="searchField"></label>
       </mat-form-field>
   </div>
   <mat-drawer-container class="example-container" autosize>
@@ -26,38 +26,30 @@
         </div>
       </ng-container>
       <mat-divider></mat-divider>
+
       <ng-container>
         <div class="category">
-          <h4>Libraries</h4>
+          <mat-accordion class="example-headers-align">
-          <mat-list>
+            <mat-expansion-panel>
-            <mat-list-item *ngFor="let wfs of workflowLibraries" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+            <mat-expansion-panel-header>
-              <span [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</span>
+              <mat-panel-title>
-              <span class="spec-actions" fxLayout="row" fxLayoutGap="10px">
+              <h4>Libraries</h4>
-                <button
+              </mat-panel-title>
-                  mat-icon-button
+            </mat-expansion-panel-header>
-                  title="Move up"
+              <mat-list>
-                  color="primary"
+              <mat-list-item *ngFor="let wfs of workflowLibraries" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
-                >
+               <div>
-                  <mat-icon>arrow_upward</mat-icon>
+                 <span [ngClass]="{'library_item':true, 'spec_menu_item':true, 'library-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</span>
-                </button>
+               </div>
-                <button
+              </mat-list-item>
-
+              </mat-list>
-                  mat-icon-button
+            </mat-expansion-panel>
-                  title="Move down"
+          </mat-accordion>
-                  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>

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

@@ -54,6 +54,10 @@
     cursor: pointer;
   }
 
+  .library_item {
+    padding: 10px;
+  }
+
   .spec_menu_item {
     flex-flow: row;
     display: inline-block;
@@ -74,6 +78,10 @@
   }
 }
 
+.library-selected {
+  font-weight: bold;
+}
+
 
 .workflow-spec-actions {
   button {