diff --git a/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.html b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.html new file mode 100644 index 0000000..f3f5106 --- /dev/null +++ b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.html @@ -0,0 +1,16 @@ +
+ Delete file {{data.fileMeta.name}}? + +
+
+
+ + +
+
diff --git a/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.scss b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.scss new file mode 100644 index 0000000..44d0938 --- /dev/null +++ b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.scss @@ -0,0 +1,9 @@ +.select-mode { + width: 100%; + height: 100%; + + ::ng-deep button { + padding: 1em 2em; + margin: 1em; + } +} diff --git a/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.spec.ts b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.spec.ts new file mode 100644 index 0000000..be7c281 --- /dev/null +++ b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeleteFileDialogComponent } from './delete-file-dialog.component'; + +describe('DeleteFileDialogComponent', () => { + let component: DeleteFileDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DeleteFileDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DeleteFileDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.ts b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.ts new file mode 100644 index 0000000..35875c7 --- /dev/null +++ b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.ts @@ -0,0 +1,30 @@ +import {Component, Inject, OnInit} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; +import {DeleteFileDialogData} from '../../_interfaces/dialog-data'; + +@Component({ + selector: 'app-delete-file-dialog', + templateUrl: './delete-file-dialog.component.html', + styleUrls: ['./delete-file-dialog.component.scss'] +}) +export class DeleteFileDialogComponent { + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: DeleteFileDialogData + ) { + } + + onNoClick() { + this.dialogRef.close(); + } + + onSubmit() { + const data: DeleteFileDialogData = { + confirm: true, + fileMeta: this.data.fileMeta, + }; + this.dialogRef.close(data); + } + +} diff --git a/src/app/file-meta-dialog/file-meta-dialog.component.html b/src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.html similarity index 100% rename from src/app/file-meta-dialog/file-meta-dialog.component.html rename to src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.html diff --git a/src/app/file-meta-dialog/file-meta-dialog.component.scss b/src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.scss similarity index 100% rename from src/app/file-meta-dialog/file-meta-dialog.component.scss rename to src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.scss diff --git a/src/app/file-meta-dialog/file-meta-dialog.component.spec.ts b/src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.spec.ts similarity index 97% rename from src/app/file-meta-dialog/file-meta-dialog.component.spec.ts rename to src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.spec.ts index 5b6d646..df897da 100644 --- a/src/app/file-meta-dialog/file-meta-dialog.component.spec.ts +++ b/src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.spec.ts @@ -5,7 +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/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/_dialogs/file-meta-dialog/file-meta-dialog.component.ts similarity index 84% rename from src/app/file-meta-dialog/file-meta-dialog.component.ts rename to src/app/_dialogs/file-meta-dialog/file-meta-dialog.component.ts index f04e0e7..9ec4b66 100644 --- a/src/app/file-meta-dialog/file-meta-dialog.component.ts +++ b/src/app/_dialogs/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/dialog-data'; -import {cleanUpFilename} 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/new-file-dialog/new-file-dialog.component.html b/src/app/_dialogs/new-file-dialog/new-file-dialog.component.html similarity index 92% rename from src/app/new-file-dialog/new-file-dialog.component.html rename to src/app/_dialogs/new-file-dialog/new-file-dialog.component.html index cf4d8c0..21ba7db 100644 --- a/src/app/new-file-dialog/new-file-dialog.component.html +++ b/src/app/_dialogs/new-file-dialog/new-file-dialog.component.html @@ -1,4 +1,6 @@
+ Select diagram type +
diff --git a/src/app/new-file-dialog/new-file-dialog.component.scss b/src/app/_dialogs/new-file-dialog/new-file-dialog.component.scss similarity index 100% rename from src/app/new-file-dialog/new-file-dialog.component.scss rename to src/app/_dialogs/new-file-dialog/new-file-dialog.component.scss diff --git a/src/app/new-file-dialog/new-file-dialog.component.spec.ts b/src/app/_dialogs/new-file-dialog/new-file-dialog.component.spec.ts similarity index 100% rename from src/app/new-file-dialog/new-file-dialog.component.spec.ts rename to src/app/_dialogs/new-file-dialog/new-file-dialog.component.spec.ts diff --git a/src/app/new-file-dialog/new-file-dialog.component.ts b/src/app/_dialogs/new-file-dialog/new-file-dialog.component.ts similarity index 90% rename from src/app/new-file-dialog/new-file-dialog.component.ts rename to src/app/_dialogs/new-file-dialog/new-file-dialog.component.ts index dcf3188..a2c392a 100644 --- a/src/app/new-file-dialog/new-file-dialog.component.ts +++ b/src/app/_dialogs/new-file-dialog/new-file-dialog.component.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; import {MatDialogRef} from '@angular/material/dialog'; import {FileType} from 'sartography-workflow-lib'; -import {NewFileDialogData} from '../_interfaces/dialog-data'; +import {NewFileDialogData} from '../../_interfaces/dialog-data'; @Component({ selector: 'app-new-file-dialog', diff --git a/src/app/open-file-dialog/open-file-dialog.component.html b/src/app/_dialogs/open-file-dialog/open-file-dialog.component.html similarity index 67% rename from src/app/open-file-dialog/open-file-dialog.component.html rename to src/app/_dialogs/open-file-dialog/open-file-dialog.component.html index 21e8fa0..21b3e35 100644 --- a/src/app/open-file-dialog/open-file-dialog.component.html +++ b/src/app/_dialogs/open-file-dialog/open-file-dialog.component.html @@ -1,3 +1,10 @@ +
+ Where is your file? + Upload a local BPMN/DMN file + Open a BPMN/DMN file from URL + + +
-

Upload a local file

- folder_open + folder_open  
-

Open a file from a URL

- + link   + diff --git a/src/app/open-file-dialog/open-file-dialog.component.scss b/src/app/_dialogs/open-file-dialog/open-file-dialog.component.scss similarity index 100% rename from src/app/open-file-dialog/open-file-dialog.component.scss rename to src/app/_dialogs/open-file-dialog/open-file-dialog.component.scss diff --git a/src/app/open-file-dialog/open-file-dialog.component.spec.ts b/src/app/_dialogs/open-file-dialog/open-file-dialog.component.spec.ts similarity index 100% rename from src/app/open-file-dialog/open-file-dialog.component.spec.ts rename to src/app/_dialogs/open-file-dialog/open-file-dialog.component.spec.ts diff --git a/src/app/open-file-dialog/open-file-dialog.component.ts b/src/app/_dialogs/open-file-dialog/open-file-dialog.component.ts similarity index 89% rename from src/app/open-file-dialog/open-file-dialog.component.ts rename to src/app/_dialogs/open-file-dialog/open-file-dialog.component.ts index 98819ec..ec239a5 100644 --- a/src/app/open-file-dialog/open-file-dialog.component.ts +++ b/src/app/_dialogs/open-file-dialog/open-file-dialog.component.ts @@ -1,8 +1,8 @@ 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'; +import {getDiagramTypeFromXml} from '../../_util/diagram-type'; +import {cleanUpFilename} from '../../_util/string-clean'; @Component({ selector: 'app-open-file-dialog', @@ -33,7 +33,7 @@ export class OpenFileDialogComponent { } getFileName() { - return this.diagramFile ? this.diagramFile.name : 'No file selected'; + return this.diagramFile ? this.diagramFile.name : 'Click to select a file'; } onSubmitUrl() { diff --git a/src/app/workflow-spec-dialog/workflow-spec-dialog.component.html b/src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.html similarity index 100% rename from src/app/workflow-spec-dialog/workflow-spec-dialog.component.html rename to src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.html diff --git a/src/app/workflow-spec-dialog/workflow-spec-dialog.component.scss b/src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.scss similarity index 100% rename from src/app/workflow-spec-dialog/workflow-spec-dialog.component.scss rename to src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.scss diff --git a/src/app/workflow-spec-dialog/workflow-spec-dialog.component.spec.ts b/src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.spec.ts similarity index 100% rename from src/app/workflow-spec-dialog/workflow-spec-dialog.component.spec.ts rename to src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.spec.ts diff --git a/src/app/workflow-spec-dialog/workflow-spec-dialog.component.ts b/src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.ts similarity index 95% rename from src/app/workflow-spec-dialog/workflow-spec-dialog.component.ts rename to src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.ts index cf23025..7413e68 100644 --- a/src/app/workflow-spec-dialog/workflow-spec-dialog.component.ts +++ b/src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.ts @@ -3,8 +3,8 @@ 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/dialog-data'; -import {toSnakeCase} from '../_util/string-clean'; +import {WorkflowSpecDialogData} from '../../_interfaces/dialog-data'; +import {toSnakeCase} from '../../_util/string-clean'; @Component({ selector: 'app-workflow-spec-dialog', diff --git a/src/app/_interfaces/dialog-data.ts b/src/app/_interfaces/dialog-data.ts index c787ce6..dc586d3 100644 --- a/src/app/_interfaces/dialog-data.ts +++ b/src/app/_interfaces/dialog-data.ts @@ -1,4 +1,4 @@ -import {FileType} from 'sartography-workflow-lib'; +import {FileMeta, FileType} from 'sartography-workflow-lib'; export interface FileMetaDialogData { fileName: string; @@ -19,3 +19,8 @@ export interface WorkflowSpecDialogData { display_name: string; description: string; } + +export interface DeleteFileDialogData { + confirm: boolean; + fileMeta: FileMeta; +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1541465..4218db7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,13 +24,14 @@ import {AppRoutingModule} from './app-routing.module'; import {AppComponent} from './app.component'; import {DiagramComponent} from './diagram/diagram.component'; import {FileListComponent} from './file-list/file-list.component'; -import {FileMetaDialogComponent} from './file-meta-dialog/file-meta-dialog.component'; +import {FileMetaDialogComponent} from './_dialogs/file-meta-dialog/file-meta-dialog.component'; import {ModelerComponent} from './modeler/modeler.component'; -import {WorkflowSpecDialogComponent} from './workflow-spec-dialog/workflow-spec-dialog.component'; +import {WorkflowSpecDialogComponent} from './_dialogs/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'; +import { NewFileDialogComponent } from './_dialogs/new-file-dialog/new-file-dialog.component'; +import { OpenFileDialogComponent } from './_dialogs/open-file-dialog/open-file-dialog.component'; +import { DeleteFileDialogComponent } from './_dialogs/delete-file-dialog/delete-file-dialog.component'; export class ThisEnvironment implements AppEnvironment { production = environment.production; @@ -51,6 +52,7 @@ export class ThisEnvironment implements AppEnvironment { GetIconCodePipe, NewFileDialogComponent, OpenFileDialogComponent, + DeleteFileDialogComponent, ], imports: [ BrowserAnimationsModule, @@ -81,6 +83,7 @@ export class ThisEnvironment implements AppEnvironment { ], bootstrap: [AppComponent], entryComponents: [ + DeleteFileDialogComponent, FileMetaDialogComponent, NewFileDialogComponent, OpenFileDialogComponent, diff --git a/src/app/file-list/file-list.component.html b/src/app/file-list/file-list.component.html index e04c853..d9d3345 100644 --- a/src/app/file-list/file-list.component.html +++ b/src/app/file-list/file-list.component.html @@ -1,9 +1,9 @@ - - {{fm.type | getIconCode}} -

{{fm.name}}

-

{{fm.last_updated | date}}

+ + {{fm.type | getIconCode}} +

{{fm.name}}

+

{{fm.last_updated | date}}

- +
diff --git a/src/app/file-list/file-list.component.ts b/src/app/file-list/file-list.component.ts index bb42d60..a3295cc 100644 --- a/src/app/file-list/file-list.component.ts +++ b/src/app/file-list/file-list.component.ts @@ -1,6 +1,10 @@ import {Component, Input, OnInit} from '@angular/core'; +import {MatDialog} from '@angular/material/dialog'; +import {MatSnackBar} from '@angular/material/snack-bar'; import {Router} from '@angular/router'; import {ApiService, FileMeta, FileType, WorkflowSpec} from 'sartography-workflow-lib'; +import {DeleteFileDialogData} from '../_interfaces/dialog-data'; +import {DeleteFileDialogComponent} from '../_dialogs/delete-file-dialog/delete-file-dialog.component'; @Component({ selector: 'app-file-list', @@ -13,7 +17,9 @@ export class FileListComponent implements OnInit { constructor( private api: ApiService, - private router: Router + public dialog: MatDialog, + private router: Router, + private snackBar: MatSnackBar, ) { } @@ -21,8 +27,11 @@ export class FileListComponent implements OnInit { this.loadFileMetas(); } - deleteFile(fileMetaId: number) { - this.api.deleteFileMeta(fileMetaId).subscribe(() => this.loadFileMetas()); + deleteFile(fileMeta: FileMeta) { + this.api.deleteFileMeta(fileMeta.id).subscribe(() => { + this.loadFileMetas(); + this.snackBar.open(`Deleted file ${fileMeta.name}.`, 'Ok', {duration: 3000}); + }); } private loadFileMetas() { @@ -32,4 +41,19 @@ export class FileListComponent implements OnInit { editFile(fileMetaId: number) { this.router.navigate([`/modeler/${this.workflowSpec.id}/${fileMetaId}`]); } + + confirmDelete(fm: FileMeta) { + const dialogRef = this.dialog.open(DeleteFileDialogComponent, { + data: { + confirm: false, + fileMeta: fm, + } + }); + + dialogRef.afterClosed().subscribe((data: DeleteFileDialogData) => { + if (data && data.confirm && data.fileMeta) { + this.deleteFile(data.fileMeta); + } + }); + } } diff --git a/src/app/modeler/modeler.component.html b/src/app/modeler/modeler.component.html index e41f395..5309e3c 100644 --- a/src/app/modeler/modeler.component.html +++ b/src/app/modeler/modeler.component.html @@ -80,13 +80,14 @@ - folder_open + folder_open   + link   diff --git a/src/app/modeler/modeler.component.spec.ts b/src/app/modeler/modeler.component.spec.ts index 4fd53b0..63706a1 100644 --- a/src/app/modeler/modeler.component.spec.ts +++ b/src/app/modeler/modeler.component.spec.ts @@ -31,7 +31,7 @@ import {BpmnWarning} from '../_interfaces/bpmn-warning'; import {FileMetaDialogData} from '../_interfaces/dialog-data'; import {GetIconCodePipe} from '../_pipes/get-icon-code.pipe'; import {DiagramComponent} from '../diagram/diagram.component'; -import {FileMetaDialogComponent} from '../file-meta-dialog/file-meta-dialog.component'; +import {FileMetaDialogComponent} from '../_dialogs/file-meta-dialog/file-meta-dialog.component'; import {ModelerComponent} from './modeler.component'; diff --git a/src/app/modeler/modeler.component.ts b/src/app/modeler/modeler.component.ts index 00ee1ec..ee3788f 100644 --- a/src/app/modeler/modeler.component.ts +++ b/src/app/modeler/modeler.component.ts @@ -9,9 +9,9 @@ import {FileMetaDialogData, NewFileDialogData, OpenFileDialogData} from '../_int import {ImportEvent} from '../_interfaces/import-event'; import {getDiagramTypeFromXml} from '../_util/diagram-type'; import {DiagramComponent} from '../diagram/diagram.component'; -import {FileMetaDialogComponent} from '../file-meta-dialog/file-meta-dialog.component'; -import {NewFileDialogComponent} from '../new-file-dialog/new-file-dialog.component'; -import {OpenFileDialogComponent} from '../open-file-dialog/open-file-dialog.component'; +import {FileMetaDialogComponent} from '../_dialogs/file-meta-dialog/file-meta-dialog.component'; +import {NewFileDialogComponent} from '../_dialogs/new-file-dialog/new-file-dialog.component'; +import {OpenFileDialogComponent} from '../_dialogs/open-file-dialog/open-file-dialog.component'; @Component({ selector: 'app-modeler', 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 0fc13b8..625ccc1 100644 --- a/src/app/workflow-spec-list/workflow-spec-list.component.ts +++ b/src/app/workflow-spec-list/workflow-spec-list.component.ts @@ -3,7 +3,7 @@ import {MatDialog} from '@angular/material/dialog'; import {MatSnackBar} from '@angular/material/snack-bar'; import {ApiService, WorkflowSpec} from 'sartography-workflow-lib'; import {WorkflowSpecDialogData} from '../_interfaces/dialog-data'; -import {WorkflowSpecDialogComponent} from '../workflow-spec-dialog/workflow-spec-dialog.component'; +import {WorkflowSpecDialogComponent} from '../_dialogs/workflow-spec-dialog/workflow-spec-dialog.component'; @Component({ selector: 'app-workflow-spec-list',