Merge pull request #87 from sartography/feature/script-editor

Feature/script editor

package-lock.json

@@ -4477,9 +4477,9 @@
       }
     },
     "codemirror": {
-      "version": "5.61.1",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.61.1.tgz",
-      "integrity": "sha512-+D1NZjAucuzE93vJGbAaXzvoBHwp9nJZWWWF9utjv25+5AZUiah6CIlfb4ikG4MoDsFsCG8niiJH5++OO2LgIQ=="
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz",
+      "integrity": "sha512-Xnl3304iCc8nyVZuRkzDVVwc794uc9QNX0UcPGeNic1fbzkSrO4l4GVXho9tRNKBgPYZXgocUqXyfIv3BILhCQ=="
     },
     "collection-visit": {
       "version": "1.0.0",
@@ -5560,9 +5560,9 @@
       }
     },
     "diagram-js-code-editor": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/diagram-js-code-editor/-/diagram-js-code-editor-1.0.4.tgz",
-      "integrity": "sha512-Mez70gLxG+XYQ+mVd2D88qH/tgXqFwsiCS0hncOc+B02X6HVNJtn10GyLsr5418+O/1Sal0pEgFitQCZoiTceA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/diagram-js-code-editor/-/diagram-js-code-editor-1.1.1.tgz",
+      "integrity": "sha512-zAF4Z/EBfB4HZy3kpxPFIwg7Siod00LP7UelJU4/G+6zpZOb7HAFIFeGLWc3KIIO1QEO6hQlmET5+i1ojP5mGg==",
       "requires": {
         "ace": "^1.3.0",
         "ace-builds": "^1.4.12",
@@ -9721,12 +9721,6 @@
         }
       }
     },
-    "node-releases": {
-      "version": "1.1.59",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.59.tgz",
-      "integrity": "sha512-H3JrdUczbdiwxN5FuJPyCHnGHIFqQ0wWxo+9j1kAXAzqNMAHlo+4I/sYYxpyK0irQ73HgdiyzD32oqQDcU2Osw==",
-      "dev": true
-    },
     "node-status-codes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz",
@@ -9746,8 +9740,7 @@
         "hosted-git-info": {
           "version": "2.8.9",
           "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-          "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-          "dev": true
+          "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
         },
         "semver": {
           "version": "5.7.1",
@@ -12447,9 +12440,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sartography-workflow-lib": {
-      "version": "0.0.469",
-      "resolved": "https://registry.npmjs.org/sartography-workflow-lib/-/sartography-workflow-lib-0.0.469.tgz",
-      "integrity": "sha512-enqTBvU829XGjCpW7kvnWOYj4caslc86cozrCgeTqZhiJhDfzpYlBaP0BXqx+j2BQ4hXq4q12wzZmY2lZYJXDA=="
+      "version": "0.0.517",
+      "resolved": "https://registry.npmjs.org/sartography-workflow-lib/-/sartography-workflow-lib-0.0.517.tgz",
+      "integrity": "sha512-BYkfE0iWDtVOZ/9Z4xZyBRQ4zUNG2rlBCAAHPvEGz/SqyHZ35futrcX7rfJVdT7V20xA+tb/iYWq6zrZivNI2Q=="
     },
     "sass": {
       "version": "1.26.3",

package.json

@@ -42,7 +42,7 @@
     "camunda-bpmn-moddle": "^4.4.0",
     "camunda-dmn-moddle": "^1.0.0",
     "diagram-js": "^6.6.1",
-    "diagram-js-code-editor": "^1.0.4",
+    "diagram-js-code-editor": "^1.1.1",
     "diagram-js-minimap": "^2.0.3",
     "dmn-js": "^7.5.1",
     "dmn-js-properties-panel": "^0.3.5",
@@ -55,7 +55,7 @@
     "ngx-markdown": "^9.1.1",
     "protractor": "^7.0.0",
     "rxjs": "~6.5.4",
-    "sartography-workflow-lib": "0.0.469",
+    "sartography-workflow-lib": "0.0.517",
     "tslib": "^1.13.0",
     "uuid": "^7.0.2",
     "zone.js": "^0.10.3"

src/app/diagram/diagram.component.ts

@@ -1,6 +1,6 @@
 import { formatDate } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import {AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, Output, ViewChild} from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import BpmnModeler from 'bpmn-js/lib/Modeler';
 import DmnModeler from 'dmn-js/lib/Modeler';
@@ -10,7 +10,8 @@ import {
   BPMN_DIAGRAM_DEFAULT,
   DMN_DIAGRAM_DEFAULT,
   FileType,
-  getDiagramTypeFromXml
+  getDiagramTypeFromXml,
+  CameltoSnakeCase
 } from 'sartography-workflow-lib';
 import { v4 as uuidv4 } from 'uuid';
 import { BpmnWarning } from '../_interfaces/bpmn-warning';
@@ -23,16 +24,20 @@ import {dmnModelerConfig} from './dmn-modeler-config';
   templateUrl: 'diagram.component.html',
   styleUrls: ['diagram.component.scss'],
 })
-export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
+export class DiagramComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
   @Input() fileName: string;
+  @Input() validation_data: Object = {};
   @ViewChild('containerRef', { static: true }) containerRef: ElementRef;
   @ViewChild('propertiesRef', { static: true }) propertiesRef: ElementRef;
   @Output() private importDone: EventEmitter<ImportEvent> = new EventEmitter();
+  @Input() validationState: string;
+  @Output() validationStart: EventEmitter<string> = new EventEmitter();
   private diagramType: FileType;
   private modeler: BpmnModeler | DmnModeler;
   private xml = '';
   private svg;
   private disabled = false;
+  public eventBus;
 
   // Hack so we can spy on this function
   private _formatDate = formatDate;
@@ -60,6 +65,15 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
     console.log('DiagramComponent default onChange');
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.validation_data) {
+      this.validation_data = changes.validation_data.currentValue;
+      if (this.modeler) {
+        this.modeler.get('eventBus').fire('editor.objects.response', { objects: this.validation_data });
+      }
+    }
+  }
+
   onTouched() {
   }
 
@@ -203,10 +217,23 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
         });
       }
     });
+    const eventBus = this.modeler.get('eventBus');
+
+    eventBus.on('editor.scripts.request', () => {
+      this.api.listScripts().subscribe((data) => {
+        data.forEach(element => {element.name = CameltoSnakeCase(element.name); });
+        this.modeler.get('eventBus').fire('editor.scripts.response', { scripts: data });
+      });
+    });
+
+    eventBus.on('editor.validate.request', (request) => {
+      this.validationStart.emit(request.task_name);
+    });
 
     return this.modeler as BpmnModeler;
   }
 
+
   private initializeDMNModeler(): DmnModeler {
     this.modeler = new DmnModeler({
       container: this.containerRef.nativeElement,

src/app/modeler/modeler.component.html

@@ -73,7 +73,7 @@
 
 <div fxLayout="column">
   <div class="diagram-parent">
-    <app-diagram #diagram (importDone)="handleImported($event)" [fileName]="getFileName()"></app-diagram>
+    <app-diagram #diagram (importDone)="handleImported($event)" [fileName]="getFileName()" [validation_data]="validationData" (validationStart)="partially_validate($event)" ></app-diagram>
 
     <div *ngIf="importError" class="import-error">
       <strong>Failed to render diagram: </strong>

src/app/modeler/modeler.component.ts

@@ -66,6 +66,8 @@ export class ModelerComponent implements AfterViewInit {
   @ViewChild(DiagramComponent) private diagramComponent: DiagramComponent;
   @ViewChild('fileInput', { static: true }) fileInput: ElementRef;
   private diagramType: FileType;
+  private validationState: boolean;
+  private validationData: Object = {};
   private workflowSpecId: string;
   private fileMetaId: number;
   private isNew = false;
@@ -89,6 +91,7 @@ export class ModelerComponent implements AfterViewInit {
       }
       this.svg = newSvgValue;
     });
+
     if (this.requestFileClick) {
       this.fileInput.nativeElement.click();
       this.requestFileClick = false;
@@ -155,7 +158,8 @@ export class ModelerComponent implements AfterViewInit {
       dialogRef.afterClosed().subscribe(dialogResult => {
         if (dialogResult) {
           this.router.navigate(['/home', this.workflowSpec.name]);
-        }});
+        }
+      });
     } else {
       this.router.navigate(['/home', this.workflowSpec.name]);
     }
@@ -193,7 +197,28 @@ export class ModelerComponent implements AfterViewInit {
     }
   }
 
+  partially_validate(until_task: string) {
+    this.saveChanges();
+    this.api.validateWorkflowSpecification(this.diagramFileMeta.workflow_spec_id, until_task).subscribe(apiErrors => {
+      this.validationState = true;
+      this.validationData = { 'required_only': undefined, 'all_fields': undefined };
+      if (apiErrors && apiErrors.length === 2) {
+        if (apiErrors[0].code === 'validation_break') {
+          this.validationData['all_fields'] = apiErrors[0].task_data;
+        } else { this.validationState = false; }
+        if (apiErrors[1].code === 'validation_break') {
+          this.validationData['required_only'] = apiErrors[1].task_data;
+        } else { this.validationState = false; }
+      } else { this.validationState = false; }
+
+      if (this.validationState === false) {
+        this.bottomSheet.open(ApiErrorsComponent, { data: { apiErrors: apiErrors } });
+      }
+    });
+  }
+
   validate() {
+    this.saveChanges();
     this.api.validateWorkflowSpecification(this.diagramFileMeta.workflow_spec_id).subscribe(apiErrors => {
       if (apiErrors && apiErrors.length > 0) {
         this.bottomSheet.open(ApiErrorsComponent, { data: { apiErrors: apiErrors } });
@@ -351,12 +376,6 @@ export class ModelerComponent implements AfterViewInit {
     this.xml = this.draftXml;
     this.diagramFile = new File([this.xml], this.diagramFileMeta.name, { type: 'text/xml' });
 
-    // Propose removal
-    // if (this.svg && this.svg !== '') {
-    //   const svgFile = new File([this.svg], this.diagramFileMeta.name, {type: 'text/xml'});
-    //   // this.api.updateFileData();
-    // }
-
     this.api.updateFileData(this.diagramFileMeta, this.diagramFile).subscribe(newFileMeta => {
       this.diagramFileMeta = newFileMeta;
       this.snackBar.open(`Saved changes to file metadata ${this.diagramFileMeta.name}.`, 'Ok', { duration: 5000 });