Merge pull request #96 from sartography/chore/change_files_318

Fixes #318 - Improvements to the ability to switch files in Workflow …

src/app/modeler/modeler.component.html

@@ -28,15 +28,20 @@
       <mat-icon>arrow_drop_down</mat-icon>
     </button>
     <mat-menu #importMenu="matMenu">
-      <button mat-menu-item (click)="openMethod = 'db'" [matMenuTriggerFor]="dbMenu" title="Open diagram from database">
+      <button
+              mat-menu-item
+              [disabled]="bpmnFilesNoSelf.length === 0"
+              (click)="openMethod = 'db'"
+              [matMenuTriggerFor]="dbMenu"
+              title="Open diagram from database">
         <mat-icon>cloud</mat-icon>
         Open related BPMN/DMN File ...
       </button>
       <mat-menu #dbMenu="matMenu">
         <a
           mat-menu-item
-          *ngFor="let bf of bpmnFiles"
-          [routerLink]="['/modeler', workflowSpec.id, bf.id]"
+          *ngFor="let bf of bpmnFilesNoSelf"
+          (click)="checkChangeBPMN(bf)"
           [matTooltip]="getFileMetaTooltipText(bf)"
           matTooltipClass="tooltip-text"
           matTooltipPosition="right"

src/app/modeler/modeler.component.ts

@@ -30,7 +30,6 @@ import { getDiagramTypeFromXml } from '../_util/diagram-type';
 })
 export class ModelerComponent implements AfterViewInit {
   @ViewChild('fileInput', {static: true}) fileInput: ElementRef;
-  @ViewChild(DiagramComponent) private diagramComponent: DiagramComponent;
   title = 'bpmn-js-angular';
   diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
   importError?: Error;
@@ -45,6 +44,7 @@ export class ModelerComponent implements AfterViewInit {
   fileTypes = FileType;
   validationState: string;
   validationData: { [key: string]: any } = {};
+  @ViewChild(DiagramComponent) private diagramComponent: DiagramComponent;
   private xml = '';
   private draftXml = '';
   private svg = '';
@@ -74,6 +74,10 @@ export class ModelerComponent implements AfterViewInit {
     });
   }
 
+  get bpmnFilesNoSelf(): FileMeta[] {
+    return this.bpmnFiles.filter(f => f.id !== this.fileMetaId);
+  }
+
   static isXmlFile(file: File) {
     return file.type.toLowerCase() === 'text/xml' ||
       file.type.toLowerCase() === 'application/xml' ||
@@ -166,6 +170,25 @@ export class ModelerComponent implements AfterViewInit {
     }
   }
 
+  checkChangeBPMN(b: FileMeta) {
+    if (this.hasChanged()) {
+      const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+        maxWidth: '300px',
+        data: {
+          title: 'Unsaved Changes!',
+          message: 'Are you sure you want to abandon changes?',
+        },
+      });
+      dialogRef.afterClosed().subscribe(dialogResult => {
+        if (dialogResult) {
+          this.router.navigate(['/modeler', this.workflowSpecId, b.id]);
+        }
+      });
+    } else {
+      this.router.navigate(['/modeler', this.workflowSpecId, b.id])
+    }
+  }
+
   onFileSelected($event: Event) {
     this.diagramFile = ($event.target as HTMLFormElement).files[0];
     this.onSubmitFileToOpen();