sartography/cr-connect-bpmn
1
0
Fork 0
mirror of https://github.com/sartography/cr-connect-bpmn.git synced 2025-01-24 23:59:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Displays tooltip with file and workflow spec metadata

Browse Source
This commit is contained in:
Aaron Louie 2020-01-14 14:13:43 -05:00
parent 9adb103f18
commit 60841c85b6
4 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/app.component.html
View File

@ -12,7 +12,14 @@
Open previously saved...
</button>
<mat-menu #dbMenu="matMenu">
<button mat-menu-item *ngFor="let bf of bpmnFiles" (click)="loadDbFile(bf)">
<button
mat-menu-item
*ngFor="let bf of bpmnFiles"
(click)="loadDbFile(bf)"
[matTooltip]="getFileMetaTooltipText(bf)"
matTooltipClass="tooltip-text"
matTooltipPosition="right"
>
{{getFileMetaDisplayString(bf)}}
</button>
</mat-menu>
@ -38,7 +45,7 @@
<button mat-menu-item (click)="diagram.saveXML()"><mat-icon>code</mat-icon> Download XML File</button>
</mat-menu>
<button mat-button *ngIf="diagramFileMeta" (click)="editFileMeta()">
<button mat-button *ngIf="diagramFileMeta && diagramFileMeta.workflow_spec_id" (click)="editFileMeta()">
<mat-icon>edit</mat-icon>
{{getFileMetaDisplayString(diagramFileMeta)}}
</button>

5
src/app/app.component.scss
View File

@ -28,3 +28,8 @@ mat-toolbar {
mat-toolbar.expanded {
height: 128px;
}
::ng-deep .tooltip-text {
white-space: pre-line;
font-size: 1rem;
}

22
src/app/app.component.ts
View File

@ -182,7 +182,6 @@ export class AppComponent implements AfterViewInit {
if (data && data.fileName && data.workflowSpecId) {
this._upsertSpecAndFileMeta(data);
}
this._upsertSpecAndFileMeta(data);
});
}
@ -237,9 +236,22 @@ export class AppComponent implements AfterViewInit {
return this.workflowSpecs.find(wfs => workflow_spec_id === wfs.id);
}
getFileMetaDisplayString(bf: FileMeta) {
const wfsName = this.getWorkflowSpec(bf.workflow_spec_id).display_name;
const lastUpdated = new DatePipe('en-us').transform(bf.last_updated);
return `${wfsName} (${bf.name}) - v${bf.version} (${lastUpdated})`;
getFileMetaDisplayString(fileMeta: FileMeta) {
const wfsName = this.getWorkflowSpec(fileMeta.workflow_spec_id).display_name;
const lastUpdated = new DatePipe('en-us').transform(fileMeta.last_updated);
return `${wfsName} (${fileMeta.name}) - v${fileMeta.version} (${lastUpdated})`;
}
getFileMetaTooltipText(fileMeta: FileMeta) {
const wfs = this.getWorkflowSpec(fileMeta.workflow_spec_id);
const lastUpdated = new DatePipe('en-us').transform(fileMeta.last_updated);
return `
Workflow spec ID: ${wfs.id}
Display name: ${wfs.display_name}
Description: ${wfs.description}
File name: ${fileMeta.name}
Last updated: ${lastUpdated}
Version: ${fileMeta.version}
`;
}
}

2
src/app/app.module.ts
View File

@ -11,6 +11,7 @@ import {MatMenuModule} from '@angular/material/menu';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTabsModule} from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppComponent} from './app.component';
@ -39,6 +40,7 @@ import { NewFileDialogComponent } from './new-file-dialog/new-file-dialog.compon
MatToolbarModule,
ReactiveFormsModule,
MatDividerModule,
MatTooltipModule,
],
bootstrap: [AppComponent],
entryComponents: [NewFileDialogComponent],