Edits existing file and workflow spec metadata

src/app/_services/api.service.ts

@@ -29,11 +29,12 @@ export class ApiService {
       .pipe(catchError(this._handleError));
   }
 
-  addWorkflowSpecification(newSpec: WorkflowSpec): Observable<WorkflowSpec> {
+  upsertWorkflowSpecification(specId: string, newSpec: WorkflowSpec): Observable<WorkflowSpec> {
     const url = this.apiUrl + '/workflow-specification';
+    const params = new HttpParams().set('spec_id', specId);
 
     return this.httpClient
-      .post<WorkflowSpec>(url, newSpec)
+      .post<WorkflowSpec>(url, newSpec, {params: params})
       .pipe(catchError(this._handleError));
   }
 
@@ -54,9 +55,9 @@ export class ApiService {
       .pipe(catchError(this._handleError));
   }
 
-  addFileMeta(fileMeta: FileMeta): Observable<FileMeta> {
+  upsertFileMeta(specId: string, fileMeta: FileMeta): Observable<FileMeta> {
     const url = this.apiUrl + '/file';
-    const params = new HttpParams().set('spec_id', fileMeta.workflow_spec_id);
+    const params = new HttpParams().set('spec_id', specId);
     const formData = new FormData();
     formData.append('workflow_spec_id', fileMeta.workflow_spec_id);
     formData.append('file', fileMeta.file);

src/app/app.component.html

@@ -13,7 +13,7 @@
       </button>
       <mat-menu #dbMenu="matMenu">
         <button mat-menu-item *ngFor="let bf of bpmnFiles" (click)="loadDbFile(bf)">
-            {{bf.name}} - v{{bf.version}} ({{bf.last_updated | date}})
+          {{getFileMetaDisplayString(bf)}}
         </button>
       </mat-menu>
 
@@ -37,6 +37,11 @@
       <button mat-menu-item (click)="diagram.saveSVG()"><mat-icon>image</mat-icon> Download SVG Image</button>
       <button mat-menu-item (click)="diagram.saveXML()"><mat-icon>code</mat-icon> Download XML File</button>
     </mat-menu>
+
+    <button mat-button *ngIf="diagramFileMeta" (click)="editFileMeta()">
+      <mat-icon>edit</mat-icon>
+      {{getFileMetaDisplayString(diagramFileMeta)}}
+    </button>
   </mat-toolbar-row>
   <mat-toolbar-row *ngIf="expandToolbar">
     <ng-container *ngIf="!openMethod">

src/app/app.component.ts

@@ -1,3 +1,4 @@
+import {DatePipe} from '@angular/common';
 import {AfterViewInit, Component, ViewChild} from '@angular/core';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {MatSnackBar} from '@angular/material/snack-bar';
@@ -23,6 +24,7 @@ export class AppComponent implements AfterViewInit {
   openMethod: string;
   diagramFile: File;
   workflowSpecs: WorkflowSpec[] = [];
+  workflowSpec: WorkflowSpec;
   bpmnFiles: FileMeta[] = [];
   diagramFileMeta: FileMeta;
   fileName: string;
@@ -119,49 +121,7 @@ export class AppComponent implements AfterViewInit {
           this.snackBar.open('Saved changes.', 'Ok', {duration: 5000});
         });
       } else {
-
+        this.editFileMeta();
-        // Open new filename/workflow spec dialog
-        const dialogRef = this.dialog.open(NewFileDialogComponent, {
-          height: '400px',
-          width: '400px',
-          data: {
-            fileName: '',
-            workflowSpecId: '',
-          },
-        });
-
-        dialogRef.afterClosed().subscribe((data: NewFileDialogData) => {
-          console.log('dialog afterClosed result', data);
-
-          if (data.fileName && data.workflowSpecId) {
-            this.xml = this.draftXml;
-
-            // New fileMeta
-            this.diagramFileMeta = {
-              content_type: 'text/xml',
-              name: data.fileName,
-              type: FileType.BPMN,
-              file: new File([this.xml], data.fileName, {type: 'text/xml'}),
-              workflow_spec_id: data.workflowSpecId,
-            };
-
-            const newSpec: WorkflowSpec = {
-              id: data.workflowSpecId,
-              display_name: data.displayName,
-              description: data.description,
-            };
-
-            // New workflow spec
-            this.api.addWorkflowSpecification(newSpec).subscribe(spec => {
-              console.log('spec', spec);
-              this.api.addFileMeta(this.diagramFileMeta).subscribe(fileMeta => {
-                this.loadFilesFromDb();
-                this.snackBar.open('Saved changes to new workflow spec and file.', 'Ok', {duration: 5000});
-              });
-            });
-          }
-        });
-
       }
     }
   }
@@ -173,6 +133,7 @@ export class AppComponent implements AfterViewInit {
   loadDbFile(bf: FileMeta) {
     this.diagramFile = bf.file;
     this.diagramFileMeta = bf;
+    this.workflowSpec = this.workflowSpecs.find(wfs => wfs.id === bf.workflow_spec_id);
     this.onSubmitFileToOpen();
   }
 
@@ -201,6 +162,71 @@ export class AppComponent implements AfterViewInit {
         });
       });
     });
+  }
 
+  editFileMeta() {
+    // Open new filename/workflow spec dialog
+    const dialogRef = this.dialog.open(NewFileDialogComponent, {
+      height: '400px',
+      width: '400px',
+      data: {
+        fileName: this.diagramFileMeta ? this.diagramFileMeta.name : '',
+        workflowSpecId: this.diagramFileMeta ? this.diagramFileMeta.workflow_spec_id : '',
+        description: this.workflowSpec ? this.workflowSpec.description : '',
+        displayName: this.workflowSpec ? this.workflowSpec.display_name : '',
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((data: NewFileDialogData) => {
+      console.log('dialog afterClosed result', data);
+      this._upsertSpecAndFileMeta(data);
+    });
+  }
+
+  private _upsertSpecAndFileMeta(data: NewFileDialogData) {
+    if (data.fileName && data.workflowSpecId) {
+      this.xml = this.draftXml;
+
+      // Save old workflow spec id, if user wants to change it
+      const specId = this.workflowSpec ? this.workflowSpec.id : data.workflowSpecId;
+
+      this.workflowSpec = {
+        id: data.workflowSpecId,
+        display_name: data.displayName,
+        description: data.description,
+      };
+
+      this.diagramFileMeta = {
+        content_type: 'text/xml',
+        name: data.fileName,
+        type: FileType.BPMN,
+        file: new File([this.xml], data.fileName, {type: 'text/xml'}),
+        workflow_spec_id: data.workflowSpecId,
+      };
+
+      const newSpec: WorkflowSpec = {
+        id: data.workflowSpecId,
+        display_name: data.displayName,
+        description: data.description,
+      };
+
+      // New workflow spec
+      this.api.upsertWorkflowSpecification(specId, newSpec).subscribe(spec => {
+        this.api.upsertFileMeta(specId, this.diagramFileMeta).subscribe(fileMeta => {
+          this.loadFilesFromDb();
+          this.snackBar.open('Saved changes to new workflow spec and file.', 'Ok', {duration: 5000});
+        });
+      });
+    }
+  }
+
+  getWorkflowSpec(workflow_spec_id: string): WorkflowSpec {
+    return this.workflowSpecs.find(wfs => workflow_spec_id === wfs.id);
+  }
+
+  getFileMetaDisplayString(bf: FileMeta) {
+    const wfsName = this.getWorkflowSpec(bf.workflow_spec_id).display_name;
+    const lastUpdated = new DatePipe('en-us').transform(bf.last_updated);
+    return `${wfsName} (${bf.name}) - v${bf.version} (${lastUpdated})`;
   }
 }

src/app/app.module.ts

@@ -4,6 +4,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
+import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
 import {MatMenuModule} from '@angular/material/menu';
@@ -22,22 +23,23 @@ import { NewFileDialogComponent } from './new-file-dialog/new-file-dialog.compon
     DiagramComponent,
     NewFileDialogComponent
   ],
-  imports: [
+    imports: [
-    BrowserAnimationsModule,
+        BrowserAnimationsModule,
-    BrowserModule,
+        BrowserModule,
-    FlexLayoutModule,
+        FlexLayoutModule,
-    FormsModule,
+        FormsModule,
-    HttpClientModule,
+        HttpClientModule,
-    MatButtonModule,
+        MatButtonModule,
-    MatDialogModule,
+        MatDialogModule,
-    MatIconModule,
+        MatIconModule,
-    MatInputModule,
+        MatInputModule,
-    MatMenuModule,
+        MatMenuModule,
-    MatSnackBarModule,
+        MatSnackBarModule,
-    MatTabsModule,
+        MatTabsModule,
-    MatToolbarModule,
+        MatToolbarModule,
-    ReactiveFormsModule,
+        ReactiveFormsModule,
-  ],
+        MatDividerModule,
+    ],
   bootstrap: [AppComponent],
   entryComponents: [NewFileDialogComponent],
 })

src/app/new-file-dialog/new-file-dialog.component.html

@@ -1,14 +1,19 @@
-<mat-form-field>
+<div mat-dialog-content>
-  <input matInput [(ngModel)]="data.workflowSpecId" placeholder="Workflow specification id">
+  <mat-form-field>
-</mat-form-field>
+    <input [(ngModel)]="data.workflowSpecId" matInput placeholder="Workflow specification id">
-<mat-form-field>
+  </mat-form-field>
-  <input matInput [(ngModel)]="data.fileName" placeholder="File name">
+  <mat-form-field>
-</mat-form-field>
+    <input [(ngModel)]="data.fileName" matInput placeholder="File name">
-<mat-form-field>
+  </mat-form-field>
-  <input matInput [(ngModel)]="data.displayName" placeholder="Display name">
+  <mat-form-field>
-</mat-form-field>
+    <input [(ngModel)]="data.displayName" matInput placeholder="Display name">
-<mat-form-field>
+  </mat-form-field>
-  <input matInput [(ngModel)]="data.description" placeholder="Description">
+  <mat-form-field>
-</mat-form-field>
+    <textarea [(ngModel)]="data.description" matInput matTextareaAutosize placeholder="Description"></textarea>
-<button mat-flat-button color="primary" (click)="onSubmit()">Save</button>
+  </mat-form-field>
-<button mat-flat-button (click)="onNoClick()">Cancel</button>
+</div>
+
+<div mat-dialog-actions>
+  <button (click)="onSubmit()" color="primary" mat-flat-button>Save</button>
+  <button (click)="onNoClick()" mat-flat-button>Cancel</button>
+</div>

src/app/new-file-dialog/new-file-dialog.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}