Showing Script Documentation

package-lock.json

@@ -7365,7 +7365,8 @@
     },
     "ini": {
       "version": "1.3.5",
-      "resolved": "",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
       "dev": true
     },
     "inquirer": {

src/app/_dialogs/script-doc-dialog/script-doc-dialog.component.html

@@ -0,0 +1,8 @@
+
+    <p mat-dialog-title>{{data.name}}</p>
+
+    <p display-2>{{data.description}}</p>
+
+    <div mat-dialog-actions>
+        <button mat-button [mat-dialog-close]="">Exit</button>
+    </div>

src/app/_dialogs/script-doc-dialog/script-doc-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScriptDocDialogComponent } from './script-doc-dialog.component';
+
+describe('ScriptDocDialogComponent', () => {
+  let component: ScriptDocDialogComponent;
+  let fixture: ComponentFixture<ScriptDocDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ScriptDocDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScriptDocDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_dialogs/script-doc-dialog/script-doc-dialog.component.ts

@@ -0,0 +1,17 @@
+
+import { Component, Inject, OnInit, ViewChild } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-script-doc-dialog',
+  templateUrl: './script-doc-dialog.component.html',
+  styleUrls: ['./script-doc-dialog.component.scss']
+})
+export class ScriptDocDialogComponent {
+  
+  constructor(
+    public dialogRef: MatDialogRef<ScriptDocDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: string
+  ) {
+  }
+}

src/app/_dialogs/test-email-dialog/test-email-dialog.component.html

@@ -0,0 +1,25 @@
+<mat-card fxLayoutGap>
+    <p>
+        <mat-form-field appearance="fill">
+            <mat-label>Send To:</mat-label>
+            <input matInput>
+        </mat-form-field>
+    </p>
+
+    <p>
+        <mat-form-field appearance="fill">
+            <mat-label>Subject</mat-label>
+            <input matInput>
+        </mat-form-field>
+    </p>
+    <p>
+        <mat-form-field appearance="fill">
+            <mat-label>Textarea</mat-label>
+            <textarea matInput></textarea>
+        </mat-form-field>
+    </p>
+    <div mat-dialog-actions>
+        <button mat-button [mat-dialog-close]="">Exit</button>
+        <button mat-raised-button color=" primary" (click)="onConfirm()">Send</button>
+    </div>
+</mat-card>

src/app/_dialogs/test-email-dialog/test-email-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestEmailDialogComponent } from './test-email-dialog.component';
+
+describe('TestEmailDialogComponent', () => {
+  let component: TestEmailDialogComponent;
+  let fixture: ComponentFixture<TestEmailDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestEmailDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestEmailDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_dialogs/test-email-dialog/test-email-dialog.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-test-email-dialog',
+  templateUrl: './test-email-dialog.component.html',
+  styleUrls: ['./test-email-dialog.component.scss']
+})
+export class TestEmailDialogComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/_dialogs/test-markdown-dialog/test-markdown-dialog.component.html

@@ -0,0 +1,11 @@
+<mat-card fxLayoutGap>
+    <p>
+        <mat-form-field appearance="fill">
+            <mat-label>Textarea</mat-label>
+            <textarea matInput></textarea>
+        </mat-form-field>
+    </p>
+    <div mat-dialog-actions>
+        <button mat-button [mat-dialog-close]="">Exit</button>
+    </div>
+</mat-card>

src/app/_dialogs/test-markdown-dialog/test-markdown-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestMarkdownDialogComponent } from './test-markdown-dialog.component';
+
+describe('TestMarkdownDialogComponent', () => {
+  let component: TestMarkdownDialogComponent;
+  let fixture: ComponentFixture<TestMarkdownDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestMarkdownDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestMarkdownDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_dialogs/test-markdown-dialog/test-markdown-dialog.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-test-markdown-dialog',
+  templateUrl: './test-markdown-dialog.component.html',
+  styleUrls: ['./test-markdown-dialog.component.scss']
+})
+export class TestMarkdownDialogComponent{
+
+  constructor() { }
+
+}

src/app/app.module.ts

@@ -53,6 +53,9 @@ import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list
 import {MatSidenavModule} from '@angular/material/sidenav';
 import { ConfirmDialogComponent } from './_dialogs/confirm-dialog/confirm-dialog.component';
 import {MatExpansionModule} from '@angular/material/expansion';
+import { TestEmailDialogComponent } from './_dialogs/test-email-dialog/test-email-dialog.component';
+import { TestMarkdownDialogComponent } from './_dialogs/test-markdown-dialog/test-markdown-dialog.component';
+import { ScriptDocDialogComponent } from './_dialogs/script-doc-dialog/script-doc-dialog.component';
 
 @Injectable()
 export class ThisEnvironment implements AppEnvironment {
@@ -103,6 +106,9 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     ProtocolBuilderComponent,
     ReferenceFilesComponent,
     ConfirmDialogComponent,
+    TestEmailDialogComponent,
+    TestMarkdownDialogComponent,
+    ScriptDocDialogComponent,
   ],
     imports: [
         BrowserAnimationsModule,

src/app/modeler/modeler.component.html

@@ -81,21 +81,20 @@
     </button>
 
     <mat-menu #toolsMenu="matMenu">
-      <button mat-menu-item (click)="diagram.saveSVG()">
+      <button mat-menu-item (click)="testEmailTemplate('df')">
         <mat-icon>email</mat-icon> Test Email Template
       </button>
-      <button mat-menu-item (click)="diagram.saveSVG()">
+      <button mat-menu-item (click)="testMarkdown('sd')">
         <mat-icon>search</mat-icon> Renderer Markdown
       </button>
       <button mat-menu-item [matMenuTriggerFor]="scripts">
         <mat-icon>description</mat-icon> Script Documentation
       </button>
     </mat-menu>
-
       <mat-menu #scripts="matMenu">
-      <div *ngFor="let script of ['# 1','# 2','# 3']">
+      <div *ngFor="let script of scriptsInfo">
         <button mat-menu-item (click)="displayScriptDocumentation(script)">
-          <mat-icon>description</mat-icon>{{script}}
+          <mat-icon>description</mat-icon>{{script.name}}
         </button>
       </div>
     </mat-menu>

src/app/modeler/modeler.component.ts

@@ -13,7 +13,8 @@ import {
   getDiagramTypeFromXml,
   isNumberDefined,
   newFileFromResponse,
-  WorkflowSpec
+  WorkflowSpec,
+  ScriptInfo
 } from 'sartography-workflow-lib';
 import { FileMetaDialogComponent } from '../_dialogs/file-meta-dialog/file-meta-dialog.component';
 import { NewFileDialogComponent } from '../_dialogs/new-file-dialog/new-file-dialog.component';
@@ -22,6 +23,7 @@ import { BpmnWarning } from '../_interfaces/bpmn-warning';
 import { FileMetaDialogData, NewFileDialogData } from '../_interfaces/dialog-data';
 import { ImportEvent } from '../_interfaces/import-event';
 import { DiagramComponent } from '../diagram/diagram.component';
+import { ScriptDocDialogComponent } from '../_dialogs/script-doc-dialog/script-doc-dialog.component';
 
 @Component({
   selector: 'app-modeler',
@@ -38,6 +40,7 @@ export class ModelerComponent implements AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
   ) {
+    this.api.listScripts().subscribe((data) => {this.scriptsInfo = data;})
     this.route.queryParams.subscribe(q => {
       this._handleAction(q);
     });
@@ -48,7 +51,7 @@ export class ModelerComponent implements AfterViewInit {
       this.loadFilesFromDb();
     });
   }
-  scripts = [1,2,3];
+  scriptsInfo: ScriptInfo[] = [];
   title = 'bpmn-js-angular';
   diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
   importError?: Error;
@@ -262,23 +265,25 @@ export class ModelerComponent implements AfterViewInit {
     });
   }
 
-  displayScriptDocumentation(documentation: string) {
+  displayScriptDocumentation(info: ScriptInfo) {
 
-    const dialogRef = this.dialog.open(FileMetaDialogComponent, {
+    const dialogRef = this.dialog.open(ScriptDocDialogComponent, {
       data: {
-        fileName: this.diagramFile ? this.diagramFile.name : this.fileName || '',
-        fileType: this.diagramType || getDiagramTypeFromXml(this.xml),
-        file: this.diagramFile || undefined,
+        name: info.name,
+        description: info.description,
       },
     });
-
-    dialogRef.afterClosed().subscribe((data: FileMetaDialogData) => {
-      if (data && data.fileName) {
-        this._upsertFileMeta(data);
-      }
-    });
   }
 
+  testEmailTemplate(documentation: string) {
+    //this.displayScriptDocumentation(documentation);
+  }
+
+  testMarkdown(documentation: string) {
+    //this.displayScriptDocumentation(documentation);
+  }
+
+
   getFileMetaDisplayString(fileMeta: FileMeta) {
     if (fileMeta) {
       const lastUpdated = new DatePipe('en-us').transform(fileMeta.file.lastModified);

tsconfig.json

@@ -29,5 +29,5 @@
   ],
   "include": [
     "src/**/*.d.ts"
-  ]
+  ],
 }