Sets filename of downloaded XML file

This commit is contained in:
Aaron Louie 2020-02-11 13:12:18 -05:00
parent 760d52a559
commit 60d96d5dac
5 changed files with 41 additions and 5 deletions

6
package-lock.json generated
View File

@ -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": { "moddle": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/moddle/-/moddle-4.1.0.tgz", "resolved": "https://registry.npmjs.org/moddle/-/moddle-4.1.0.tgz",

View File

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

View File

@ -3,6 +3,7 @@ import {DebugNode} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {MatIconModule} from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import * as FileSaver from 'file-saver'; import * as FileSaver from 'file-saver';
import MockDate from 'mockdate';
import {ApiService, BPMN_DIAGRAM_DEFAULT, FileType, MockEnvironment} from 'sartography-workflow-lib'; import {ApiService, BPMN_DIAGRAM_DEFAULT, FileType, MockEnvironment} from 'sartography-workflow-lib';
import { import {
BPMN_DIAGRAM, BPMN_DIAGRAM,
@ -10,7 +11,6 @@ import {
DMN_DIAGRAM, DMN_DIAGRAM,
DMN_DIAGRAM_WITH_WARNINGS DMN_DIAGRAM_WITH_WARNINGS
} from '../../testing/mocks/diagram.mocks'; } from '../../testing/mocks/diagram.mocks';
import {DiagramComponent} from './diagram.component'; import {DiagramComponent} from './diagram.component';
describe('DiagramComponent', () => { describe('DiagramComponent', () => {
@ -31,9 +31,10 @@ describe('DiagramComponent', () => {
] ]
}); });
httpMock = TestBed.get(HttpTestingController);
fixture = TestBed.createComponent(DiagramComponent); fixture = TestBed.createComponent(DiagramComponent);
component = fixture.debugElement.componentInstance; component = fixture.debugElement.componentInstance;
httpMock = TestBed.get(HttpTestingController); component.fileName = '';
fixture.detectChanges(); fixture.detectChanges();
})); }));
@ -132,6 +133,17 @@ describe('DiagramComponent', () => {
expect(fileSaverSpy).toHaveBeenCalled(); 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', () => { it('should create a new diagram', () => {
const initializeModelerSpy = spyOn(component, 'initializeModeler').and.stub(); const initializeModelerSpy = spyOn(component, 'initializeModeler').and.stub();
const importXMLSpy = spyOn(component.modeler, 'importXML').and.stub(); const importXMLSpy = spyOn(component.modeler, 'importXML').and.stub();

View File

@ -1,5 +1,6 @@
import {formatDate} from '@angular/common';
import {HttpErrorResponse} from '@angular/common/http'; 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 {ControlValueAccessor} from '@angular/forms';
import BpmnModeler from 'bpmn-js/lib/Modeler'; import BpmnModeler from 'bpmn-js/lib/Modeler';
import DmnModeler from 'dmn-js/lib/Modeler'; import DmnModeler from 'dmn-js/lib/Modeler';
@ -18,6 +19,7 @@ import {dmnModelerConfig} from './dmn-modeler-config';
styleUrls: ['diagram.component.scss'], styleUrls: ['diagram.component.scss'],
}) })
export class DiagramComponent implements ControlValueAccessor, AfterViewInit { export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
@Input() fileName: string;
@ViewChild('containerRef', {static: true}) containerRef: ElementRef; @ViewChild('containerRef', {static: true}) containerRef: ElementRef;
@ViewChild('propertiesRef', {static: true}) propertiesRef: ElementRef; @ViewChild('propertiesRef', {static: true}) propertiesRef: ElementRef;
@Output() private importDone: EventEmitter<ImportEvent> = new EventEmitter(); @Output() private importDone: EventEmitter<ImportEvent> = new EventEmitter();
@ -118,7 +120,7 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
this.saveDiagram(); this.saveDiagram();
this.modeler.saveXML({format: true}, (err, xml) => { this.modeler.saveXML({format: true}, (err, xml) => {
const blob = new Blob([xml], {type: 'text/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 { private getRandomString(len: number): string {
return uuidv4().slice(0, len); 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}`;
}
}
} }

View File

@ -104,7 +104,7 @@
</mat-toolbar> </mat-toolbar>
<div fxLayout="column"> <div fxLayout="column">
<div class="diagram-parent"> <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"> <div *ngIf="importError" class="import-error">
<strong>Failed to render diagram: </strong> <strong>Failed to render diagram: </strong>