From 5d53350adc895539167d45778802910f11f2cc32 Mon Sep 17 00:00:00 2001 From: Aaron Louie Date: Tue, 28 Jan 2020 16:43:51 -0500 Subject: [PATCH] Refactors dialogs --- src/app/_interfaces/dialog-data.ts | 21 ++++ src/app/_interfaces/file-meta-dialog-data.ts | 6 -- .../_interfaces/workflow-spec-dialog-data.ts | 6 -- src/app/_pipes/get-icon-code.pipe.spec.ts | 4 +- src/app/app-routing.module.ts | 3 +- src/app/app.module.ts | 8 +- src/app/diagram/diagram.component.ts | 2 +- .../file-meta-dialog.component.spec.ts | 3 +- .../file-meta-dialog.component.ts | 4 +- src/app/modeler/modeler.component.html | 6 +- src/app/modeler/modeler.component.spec.ts | 8 +- src/app/modeler/modeler.component.ts | 102 ++++++++++-------- .../new-file-dialog.component.html | 15 +++ .../new-file-dialog.component.scss | 9 ++ .../new-file-dialog.component.spec.ts | 25 +++++ .../new-file-dialog.component.ts | 29 +++++ .../open-file-dialog.component.html | 33 ++++++ .../open-file-dialog.component.scss | 17 +++ .../open-file-dialog.component.spec.ts | 25 +++++ .../open-file-dialog.component.ts | 57 ++++++++++ .../workflow-spec-dialog.component.ts | 2 +- .../workflow-spec-list.component.ts | 2 +- 22 files changed, 314 insertions(+), 73 deletions(-) create mode 100644 src/app/_interfaces/dialog-data.ts delete mode 100644 src/app/_interfaces/file-meta-dialog-data.ts delete mode 100644 src/app/_interfaces/workflow-spec-dialog-data.ts create mode 100644 src/app/new-file-dialog/new-file-dialog.component.html create mode 100644 src/app/new-file-dialog/new-file-dialog.component.scss create mode 100644 src/app/new-file-dialog/new-file-dialog.component.spec.ts create mode 100644 src/app/new-file-dialog/new-file-dialog.component.ts create mode 100644 src/app/open-file-dialog/open-file-dialog.component.html create mode 100644 src/app/open-file-dialog/open-file-dialog.component.scss create mode 100644 src/app/open-file-dialog/open-file-dialog.component.spec.ts create mode 100644 src/app/open-file-dialog/open-file-dialog.component.ts diff --git a/src/app/_interfaces/dialog-data.ts b/src/app/_interfaces/dialog-data.ts new file mode 100644 index 0000000..c787ce6 --- /dev/null +++ b/src/app/_interfaces/dialog-data.ts @@ -0,0 +1,21 @@ +import {FileType} from 'sartography-workflow-lib'; + +export interface FileMetaDialogData { + fileName: string; + fileType: FileType; +} + +export interface NewFileDialogData { + fileType: FileType; +} + +export interface OpenFileDialogData { + file: File; +} + +export interface WorkflowSpecDialogData { + id: string; + name: string; + display_name: string; + description: string; +} diff --git a/src/app/_interfaces/file-meta-dialog-data.ts b/src/app/_interfaces/file-meta-dialog-data.ts deleted file mode 100644 index 3cbe984..0000000 --- a/src/app/_interfaces/file-meta-dialog-data.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {FileType} from 'sartography-workflow-lib'; - -export interface FileMetaDialogData { - fileName: string; - fileType: FileType; -} diff --git a/src/app/_interfaces/workflow-spec-dialog-data.ts b/src/app/_interfaces/workflow-spec-dialog-data.ts deleted file mode 100644 index 041c9f8..0000000 --- a/src/app/_interfaces/workflow-spec-dialog-data.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface WorkflowSpecDialogData { - id: string; - name: string; - display_name: string; - description: string; -} diff --git a/src/app/_pipes/get-icon-code.pipe.spec.ts b/src/app/_pipes/get-icon-code.pipe.spec.ts index ebfc8e5..1428992 100644 --- a/src/app/_pipes/get-icon-code.pipe.spec.ts +++ b/src/app/_pipes/get-icon-code.pipe.spec.ts @@ -6,10 +6,10 @@ describe('GetIconCodePipe', () => { beforeEach(() => { pipe = new GetIconCodePipe(); - }) + }); it('create an instance', () => { - expect(pipe).toBeTruthy() + expect(pipe).toBeTruthy(); }); it('should get an icon code for each file type', () => { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index fd22a10..9f2844c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,8 +8,7 @@ import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list const appRoutes: Routes = [ { path: 'modeler/:workflowSpecId', component: ModelerComponent }, { path: 'modeler/:workflowSpecId/:fileMetaId', component: ModelerComponent }, - { path: 'workflow-specs', component: WorkflowSpecListComponent }, - { path: '', redirectTo: '/workflow-specs', pathMatch: 'full' }, + { path: '', component: WorkflowSpecListComponent }, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bda161f..1541465 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -29,6 +29,8 @@ import {ModelerComponent} from './modeler/modeler.component'; import {WorkflowSpecDialogComponent} from './workflow-spec-dialog/workflow-spec-dialog.component'; import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list.component'; import { GetIconCodePipe } from './_pipes/get-icon-code.pipe'; +import { NewFileDialogComponent } from './new-file-dialog/new-file-dialog.component'; +import { OpenFileDialogComponent } from './open-file-dialog/open-file-dialog.component'; export class ThisEnvironment implements AppEnvironment { production = environment.production; @@ -47,6 +49,8 @@ export class ThisEnvironment implements AppEnvironment { FileListComponent, WorkflowSpecDialogComponent, GetIconCodePipe, + NewFileDialogComponent, + OpenFileDialogComponent, ], imports: [ BrowserAnimationsModule, @@ -78,7 +82,9 @@ export class ThisEnvironment implements AppEnvironment { bootstrap: [AppComponent], entryComponents: [ FileMetaDialogComponent, - WorkflowSpecDialogComponent + NewFileDialogComponent, + OpenFileDialogComponent, + WorkflowSpecDialogComponent, ], providers: [{provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment}] }) diff --git a/src/app/diagram/diagram.component.ts b/src/app/diagram/diagram.component.ts index b3b49d5..d7a4302 100644 --- a/src/app/diagram/diagram.component.ts +++ b/src/app/diagram/diagram.component.ts @@ -21,7 +21,7 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit { @ViewChild('containerRef', {static: true}) containerRef: ElementRef; @ViewChild('propertiesRef', {static: true}) propertiesRef: ElementRef; @Output() private importDone: EventEmitter = new EventEmitter(); - private diagramType: FileType = FileType.BPMN; + private diagramType: FileType; private modeler: BpmnModeler | DmnModeler; private xml = ''; private disabled = false; diff --git a/src/app/file-meta-dialog/file-meta-dialog.component.spec.ts b/src/app/file-meta-dialog/file-meta-dialog.component.spec.ts index 88e26ce..5b6d646 100644 --- a/src/app/file-meta-dialog/file-meta-dialog.component.spec.ts +++ b/src/app/file-meta-dialog/file-meta-dialog.component.spec.ts @@ -5,8 +5,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations'; import {FileType} from 'sartography-workflow-lib'; -import {FileMetaDialogData} from '../_interfaces/file-meta-dialog-data'; - +import {FileMetaDialogData} from '../_interfaces/dialog-data'; import {FileMetaDialogComponent} from './file-meta-dialog.component'; describe('EditFileMetaDialogComponent', () => { diff --git a/src/app/file-meta-dialog/file-meta-dialog.component.ts b/src/app/file-meta-dialog/file-meta-dialog.component.ts index 173c647..f04e0e7 100644 --- a/src/app/file-meta-dialog/file-meta-dialog.component.ts +++ b/src/app/file-meta-dialog/file-meta-dialog.component.ts @@ -1,7 +1,7 @@ import {Component, Inject} from '@angular/core'; import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; -import {FileMetaDialogData} from '../_interfaces/file-meta-dialog-data'; -import {cleanUpFilename, toSnakeCase, trimString} from '../_util/string-clean'; +import {FileMetaDialogData} from '../_interfaces/dialog-data'; +import {cleanUpFilename} from '../_util/string-clean'; @Component({ selector: 'app-new-file-dialog', diff --git a/src/app/modeler/modeler.component.html b/src/app/modeler/modeler.component.html index 5c0d73f..6f10e82 100644 --- a/src/app/modeler/modeler.component.html +++ b/src/app/modeler/modeler.component.html @@ -8,7 +8,7 @@ ({{workflowSpec.name}}) - @@ -23,7 +23,7 @@ - @@ -36,7 +36,7 @@ + +
+
+ + +
+
diff --git a/src/app/new-file-dialog/new-file-dialog.component.scss b/src/app/new-file-dialog/new-file-dialog.component.scss new file mode 100644 index 0000000..c7fc6da --- /dev/null +++ b/src/app/new-file-dialog/new-file-dialog.component.scss @@ -0,0 +1,9 @@ +.select-mode { + width: 100%; + height: 100%; + + button { + padding: 1em; + margin: 1em; + } +} diff --git a/src/app/new-file-dialog/new-file-dialog.component.spec.ts b/src/app/new-file-dialog/new-file-dialog.component.spec.ts new file mode 100644 index 0000000..7c830d2 --- /dev/null +++ b/src/app/new-file-dialog/new-file-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NewFileDialogComponent } from './new-file-dialog.component'; + +describe('NewFileDialogComponent', () => { + let component: NewFileDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NewFileDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NewFileDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/new-file-dialog/new-file-dialog.component.ts b/src/app/new-file-dialog/new-file-dialog.component.ts new file mode 100644 index 0000000..dcf3188 --- /dev/null +++ b/src/app/new-file-dialog/new-file-dialog.component.ts @@ -0,0 +1,29 @@ +import {Component} from '@angular/core'; +import {MatDialogRef} from '@angular/material/dialog'; +import {FileType} from 'sartography-workflow-lib'; +import {NewFileDialogData} from '../_interfaces/dialog-data'; + +@Component({ + selector: 'app-new-file-dialog', + templateUrl: './new-file-dialog.component.html', + styleUrls: ['./new-file-dialog.component.scss'] +}) +export class NewFileDialogComponent { + mode: string; + fileType = FileType; + + constructor( + public dialogRef: MatDialogRef + ) { + } + + onNoClick() { + this.dialogRef.close(); + } + + onSubmit(fileType: FileType) { + const data: NewFileDialogData = {fileType: fileType}; + this.dialogRef.close(data); + } + +} diff --git a/src/app/open-file-dialog/open-file-dialog.component.html b/src/app/open-file-dialog/open-file-dialog.component.html new file mode 100644 index 0000000..21e8fa0 --- /dev/null +++ b/src/app/open-file-dialog/open-file-dialog.component.html @@ -0,0 +1,33 @@ +
+
+ + +
+ +
+

Upload a local file

+ + folder_open + + + + + +
+ +
+

Open a file from a URL

+ + + + + +
+
diff --git a/src/app/open-file-dialog/open-file-dialog.component.scss b/src/app/open-file-dialog/open-file-dialog.component.scss new file mode 100644 index 0000000..e8e272c --- /dev/null +++ b/src/app/open-file-dialog/open-file-dialog.component.scss @@ -0,0 +1,17 @@ +.select-mode { + width: 100%; + height: 100%; + + button { + padding: 1rem; + margin: 1rem; + } +} + +.mat-dialog-content { + padding: 2rem; +} + +mat-form-field { + width: 100%; +} diff --git a/src/app/open-file-dialog/open-file-dialog.component.spec.ts b/src/app/open-file-dialog/open-file-dialog.component.spec.ts new file mode 100644 index 0000000..da8f50a --- /dev/null +++ b/src/app/open-file-dialog/open-file-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OpenFileDialogComponent } from './open-file-dialog.component'; + +describe('OpenFileDialogComponent', () => { + let component: OpenFileDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OpenFileDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OpenFileDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/open-file-dialog/open-file-dialog.component.ts b/src/app/open-file-dialog/open-file-dialog.component.ts new file mode 100644 index 0000000..98819ec --- /dev/null +++ b/src/app/open-file-dialog/open-file-dialog.component.ts @@ -0,0 +1,57 @@ +import { Component, OnInit } from '@angular/core'; +import {MatDialogRef} from '@angular/material/dialog'; +import {ApiService} from 'sartography-workflow-lib'; +import {getDiagramTypeFromXml} from '../_util/diagram-type'; +import {cleanUpFilename} from '../_util/string-clean'; + +@Component({ + selector: 'app-open-file-dialog', + templateUrl: './open-file-dialog.component.html', + styleUrls: ['./open-file-dialog.component.scss'] +}) +export class OpenFileDialogComponent { + mode: string; + diagramFile: File; + url: string; + + constructor( + public dialogRef: MatDialogRef, + private api: ApiService + ) { + } + + onNoClick() { + this.dialogRef.close(); + } + + onSubmit() { + this.dialogRef.close({file: this.diagramFile}); + } + + onFileSelected($event: Event) { + this.diagramFile = ($event.target as HTMLFormElement).files[0]; + } + + getFileName() { + return this.diagramFile ? this.diagramFile.name : 'No file selected'; + } + + onSubmitUrl() { + if (this.url) { + this.api.getStringFromUrl(this.url).subscribe(s => { + const fileArray = this.url.split('/'); + const fileName = fileArray[fileArray.length - 1]; + const fileType = getDiagramTypeFromXml(s); + const name = cleanUpFilename(fileName, fileType); + this.diagramFile = new File([s], name, {type: 'text/xml'}); + this.onSubmit(); + }); + } + } + + isValidUrl() { + // tslint:disable-next-line:max-line-length + const re = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.​\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[​6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1​,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00​a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u​00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/i; + return re.test(this.url); + } +} diff --git a/src/app/workflow-spec-dialog/workflow-spec-dialog.component.ts b/src/app/workflow-spec-dialog/workflow-spec-dialog.component.ts index 6ca51e0..cf23025 100644 --- a/src/app/workflow-spec-dialog/workflow-spec-dialog.component.ts +++ b/src/app/workflow-spec-dialog/workflow-spec-dialog.component.ts @@ -3,7 +3,7 @@ import {FormGroup} from '@angular/forms'; import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import {FormlyFieldConfig, FormlyFormOptions} from '@ngx-formly/core'; import {v4 as uuidv4} from 'uuid'; -import {WorkflowSpecDialogData} from '../_interfaces/workflow-spec-dialog-data'; +import {WorkflowSpecDialogData} from '../_interfaces/dialog-data'; import {toSnakeCase} from '../_util/string-clean'; @Component({ diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.ts b/src/app/workflow-spec-list/workflow-spec-list.component.ts index c5928f0..0fc13b8 100644 --- a/src/app/workflow-spec-list/workflow-spec-list.component.ts +++ b/src/app/workflow-spec-list/workflow-spec-list.component.ts @@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core'; import {MatDialog} from '@angular/material/dialog'; import {MatSnackBar} from '@angular/material/snack-bar'; import {ApiService, WorkflowSpec} from 'sartography-workflow-lib'; -import {WorkflowSpecDialogData} from '../_interfaces/workflow-spec-dialog-data'; +import {WorkflowSpecDialogData} from '../_interfaces/dialog-data'; import {WorkflowSpecDialogComponent} from '../workflow-spec-dialog/workflow-spec-dialog.component'; @Component({