Sets filename of downloaded XML file

package-lock.json

@@ -9706,6 +9706,12 @@
         }
       }
     },
+    "mockdate": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/mockdate/-/mockdate-2.0.5.tgz",
+      "integrity": "sha512-ST0PnThzWKcgSLyc+ugLVql45PvESt3Ul/wrdV/OPc/6Pr8dbLAIJsN1cIp41FLzbN+srVTNIRn+5Cju0nyV6A==",
+      "dev": true
+    },
     "moddle": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/moddle/-/moddle-4.1.0.tgz",

package.json

@@ -73,6 +73,7 @@
     "karma-coverage-istanbul-reporter": "^2.1.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "mockdate": "^2.0.5",
     "postcss-short": "^5.0.0",
     "protractor": "^5.4.2",
     "puppeteer": "^1.20.0",

src/app/diagram/diagram.component.spec.ts

@@ -3,6 +3,7 @@ import {DebugNode} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatIconModule} from '@angular/material/icon';
 import * as FileSaver from 'file-saver';
+import MockDate from 'mockdate';
 import {ApiService, BPMN_DIAGRAM_DEFAULT, FileType, MockEnvironment} from 'sartography-workflow-lib';
 import {
   BPMN_DIAGRAM,
@@ -10,7 +11,6 @@ import {
   DMN_DIAGRAM,
   DMN_DIAGRAM_WITH_WARNINGS
 } from '../../testing/mocks/diagram.mocks';
-
 import {DiagramComponent} from './diagram.component';
 
 describe('DiagramComponent', () => {
@@ -31,9 +31,10 @@ describe('DiagramComponent', () => {
       ]
     });
 
+    httpMock = TestBed.get(HttpTestingController);
     fixture = TestBed.createComponent(DiagramComponent);
     component = fixture.debugElement.componentInstance;
-    httpMock = TestBed.get(HttpTestingController);
+    component.fileName = '';
     fixture.detectChanges();
   }));
 
@@ -132,6 +133,17 @@ describe('DiagramComponent', () => {
     expect(fileSaverSpy).toHaveBeenCalled();
   });
 
+  it('should insert date into filename', () => {
+    MockDate.set('02/02/2020 20:20:020 GMT-0500');
+    component.fileName = 'file name with extension.bpmn';
+    component.diagramType = FileType.BPMN;
+    expect((component as any).insertDateIntoFileName()).toEqual('file name with extension_2020-02-02_20:20.bpmn');
+
+    component.fileName = 'file name with no extension';
+    component.diagramType = FileType.DMN;
+    expect((component as any).insertDateIntoFileName()).toEqual('file name with no extension_2020-02-02_20:20.dmn');
+  });
+
   it('should create a new diagram', () => {
     const initializeModelerSpy = spyOn(component, 'initializeModeler').and.stub();
     const importXMLSpy = spyOn(component.modeler, 'importXML').and.stub();

src/app/diagram/diagram.component.ts

@@ -1,5 +1,6 @@
+import {formatDate} from '@angular/common';
 import {HttpErrorResponse} from '@angular/common/http';
-import {AfterViewInit, Component, ElementRef, EventEmitter, NgZone, Output, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, Output, ViewChild} from '@angular/core';
 import {ControlValueAccessor} from '@angular/forms';
 import BpmnModeler from 'bpmn-js/lib/Modeler';
 import DmnModeler from 'dmn-js/lib/Modeler';
@@ -18,6 +19,7 @@ import {dmnModelerConfig} from './dmn-modeler-config';
   styleUrls: ['diagram.component.scss'],
 })
 export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
+  @Input() fileName: string;
   @ViewChild('containerRef', {static: true}) containerRef: ElementRef;
   @ViewChild('propertiesRef', {static: true}) propertiesRef: ElementRef;
   @Output() private importDone: EventEmitter<ImportEvent> = new EventEmitter();
@@ -118,7 +120,7 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
     this.saveDiagram();
     this.modeler.saveXML({format: true}, (err, xml) => {
       const blob = new Blob([xml], {type: 'text/xml'});
-      fileSaver.saveAs(blob, `BPMN Diagram - ${new Date().toISOString()}.xml`);
+      fileSaver.saveAs(blob, this.insertDateIntoFileName());
     });
   }
 
@@ -216,4 +218,19 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
   private getRandomString(len: number): string {
     return uuidv4().slice(0, len);
   }
+
+  private insertDateIntoFileName(): string {
+    const arr = this.fileName.split('.');
+    const dateString = formatDate(new Date(), 'yyyy-MM-dd_HH:mm', 'en-us');
+
+    if (arr.length > 1) {
+      // Insert date between file name and extension
+      const ext = arr[arr.length - 1];
+      const name = arr.slice(0, -1);
+      return `${name.join('.')}_${dateString}.${ext}`;
+    } else {
+      // No extension in file name yet. Add it, based on the diagram type.
+      return `${this.fileName}_${dateString}.${this.diagramType}`;
+    }
+  }
 }

src/app/modeler/modeler.component.html

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