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

410 collapse libraries
2021-08-25 15:15:05 -04:00 · 2021-08-25 15:15:05 -04:00 · 948486dc02
parent 59c080e0f9 f0207540ee
commit 948486dc02
12 changed files with 868 additions and 1016 deletions
--- a/angular.json
+++ b/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": {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/src/app/_forms/validators/formly.validator.ts
+++ b/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 => {
-  return !control.value || EMAIL_REGEX.test(control.value) ? null : {email: true};
-};
+export const EmailValidator = (control: FormControl): ValidationErrors => !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 => {
-  return !control.value || URL_REGEX.test(control.value) ? null : {url: true};
-};
+export const UrlValidator = (control: FormControl): ValidationErrors => !control.value || URL_REGEX.test(control.value) ? null : {url: true};

-export const UrlValidatorMessage = (err, field: FormlyFieldConfig) => {
-  return `We cannot save "${field.formControl.value}". Please provide the full path, including http:// or https://`;
-};
+export const UrlValidatorMessage = (err, field: FormlyFieldConfig) => `We cannot save "${field.formControl.value}". Please provide the full path, including http:// or https://`;

-export const PhoneValidator = (control: FormControl): ValidationErrors => {
-  return !control.value || PHONE_REGEX.test(control.value) ? null : {phone: true};
-};
+export const PhoneValidator = (control: FormControl): ValidationErrors => !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.dirty ||
-      (field.options && field.options.parentForm && field.options.parentForm.submitted) ||
-      (field.field && field.field.validation && field.field.validation.show)
-    );
+  field.formControl.invalid &&
+  (
+    field.formControl.dirty ||
+    (field.options && field.options.parentForm && field.options.parentForm.submitted) ||
+    (field.field && field.field.validation && field.field.validation.show)
+  );
--- a/src/app/_util/diagram-type.ts
+++ b/src/app/_util/diagram-type.ts
@ -1,5 +1,3 @@
 import { FileType } from 'sartography-workflow-lib';

-export const getDiagramTypeFromXml = (xml: string): FileType => {
-  return (xml && /dmn\.xsd|dmndi:DMNDiagram/.test(xml) ? FileType.DMN : FileType.BPMN);
-};
+export const getDiagramTypeFromXml = (xml: string): FileType =>(xml && /dmn\.xsd|dmndi:DMNDiagram/.test(xml) ? FileType.DMN : FileType.BPMN);
--- a/src/app/library-list/library-list.component.html
+++ b/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>
--- a/src/app/library-list/library-list.component.ts
+++ b/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(() => {
--- a/src/app/workflow-spec-card/workflow-spec-card.component.html
+++ b/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>
-      <app-library-list [workflowSpecId]="workflowSpec.id"></app-library-list>
+      <h4 class="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>
--- a/src/app/workflow-spec-card/workflow-spec-card.component.scss
+++ b/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;
+}
--- a/src/app/workflow-spec-card/workflow-spec-card.component.ts
+++ b/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;
+  }
 }
--- a/src/app/workflow-spec-list/workflow-spec-list.component.html
+++ b/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-list>
-            <mat-list-item *ngFor="let wfs of workflowLibraries" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
-              <span [ngClass]="{'spec_menu_item':true, 'spec-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</span>
-              <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>
+          <mat-accordion class="example-headers-align">
+            <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+              <h4>Libraries</h4>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+              <mat-list>
+              <mat-list-item *ngFor="let wfs of workflowLibraries" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
+               <div>
+                 <span [ngClass]="{'library_item':true, 'spec_menu_item':true, 'library-selected': selectedSpec && wfs.id === selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</span>
+               </div>
+              </mat-list-item>
+              </mat-list>
+            </mat-expansion-panel>
+          </mat-accordion>

        </div>
      </ng-container>
+
+
      <mat-divider></mat-divider>

      <ng-container>
--- a/src/app/workflow-spec-list/workflow-spec-list.component.scss
+++ b/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 {