sartography
/
cr-connect-bpmn
mirror of https://github.com/sartography/cr-connect-bpmn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds buttons to change display_order of workflow specs and categories

This commit is contained in:
Aaron Louie 2020-04-10 10:07:39 -04:00
parent 49b74e25d5
commit f9b0e42115
8 changed files with 177 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -12171,9 +12171,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"sartography-workflow-lib": {
"version": "0.0.100",
"resolved": "https://registry.npmjs.org/sartography-workflow-lib/-/sartography-workflow-lib-0.0.100.tgz",
"integrity": "sha512-4jpjcK8wkbjTujIcsCBco00wUquND3cRMx29GdtuzT5pvBlXy9DWUskhi6tVjNUIVNptmjrQjUbE/7QLNISwdw=="
"version": "0.0.102",
"resolved": "https://registry.npmjs.org/sartography-workflow-lib/-/sartography-workflow-lib-0.0.102.tgz",
"integrity": "sha512-XsRht/O/WX7/d9xXlPGjpDjknpkbz6tB+VLyvgPAwquhrpYtJbEQnC0RkLiatrPbhxR5QN6m/gWxvgyPhNvb+g=="
},
"sass": {
"version": "1.23.3",

2
package.json
View File

@ -49,7 +49,7 @@
"ngx-file-drop": "^8.0.8",
"ngx-markdown": "^9.0.0",
"rxjs": "~6.5.4",
"sartography-workflow-lib": "^0.0.100",
"sartography-workflow-lib": "^0.0.102",
"tslib": "^1.11.1",
"uuid": "^7.0.2",
"zone.js": "^0.10.3"

12
src/app/_dialogs/workflow-spec-dialog/workflow-spec-dialog.component.ts
View File

@ -90,6 +90,18 @@ export class WorkflowSpecDialogComponent {
required: true,
},
},
{
key: 'display_order',
type: 'input',
defaultValue: this.data.display_order,
templateOptions: {
type: 'number',
label: 'Display Order',
placeholder: 'Order in which spec will be displayed',
description: 'Sort order that the spec should appear in within its category. Lower numbers will appear first.',
required: true,
},
},
];
});
}

1
src/app/_interfaces/dialog-data.ts
View File

@ -25,6 +25,7 @@ export interface WorkflowSpecDialogData {
display_name: string;
description: string;
category_id: number;
display_order: number;
}
export interface WorkflowSpecCategoryDialogData {

5
src/app/modeler/modeler.component.ts
View File

@ -208,8 +208,6 @@ export class ModelerComponent implements AfterViewInit {
}
getFileMetaDisplayString(fileMeta: FileMeta) {
console.log(fileMeta);
if (fileMeta) {
const lastUpdated = new DatePipe('en-us').transform(fileMeta.file.lastModified);
return fileMeta.name +
@ -224,10 +222,7 @@ export class ModelerComponent implements AfterViewInit {
const spec = this.workflowSpec;
if (spec) {
console.log('fileMeta.file.lastModified', fileMeta.file.lastModified);
const lastUpdatedDate = new Date(fileMeta.file.lastModified);
console.log('lastUpdatedDate', lastUpdatedDate);
const lastUpdated = new DatePipe('en-us').transform(lastUpdatedDate);
return `
Workflow spec ID: ${spec.id}

42
src/app/workflow-spec-list/workflow-spec-list.component.html
View File

@ -19,13 +19,31 @@
<button mat-mini-fab color="primary" (click)="editWorkflowSpecCategory(cat)">
<mat-icon>edit</mat-icon>
</button>
<button
*ngIf="cat.display_order > 0"
mat-mini-fab
title="Move up"
color="primary"
(click)="editCategoryDisplayOrder(cat.id, -1, workflowSpecsByCategory)"
>
<mat-icon>arrow_upward</mat-icon>
</button>
<button
*ngIf="cat.display_order < workflowSpecsByCategory.length - 2"
mat-mini-fab
title="Move down"
color="primary"
(click)="editCategoryDisplayOrder(cat.id, 1, workflowSpecsByCategory)"
>
<mat-icon>arrow_downward</mat-icon>
</button>
<button mat-icon-button title="Delete this category" color="warn" (click)="confirmDeleteWorkflowSpecCategory(cat)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<div *ngFor="let wfs of cat.workflow_specs" class="workflow-spec">
<ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs}"></ng-container>
<ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
</div>
<div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
</ng-container>
@ -33,11 +51,11 @@
<mat-divider></mat-divider>
<ng-container *ngIf="masterStatusSpec">
<h1>Master Status Specification</h1>
<ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: masterStatusSpec}"></ng-container>
<ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: masterStatusSpec, cat: null}"></ng-container>
</ng-container>
</div>
<ng-template #workflowSpecCard let-wfs="wfs">
<ng-template #workflowSpecCard let-wfs="wfs" let-cat="cat">
<app-workflow-spec-card
[workflowSpec]="wfs"
[actionButtons]="actionButtons"
@ -48,6 +66,24 @@
<button mat-mini-fab title="Check for errors in this workflow specification" color="accent" (click)="validateWorkflowSpec(wfs)">
<mat-icon>verified_user</mat-icon>
</button>
<button
*ngIf="cat && cat.workflow_specs.length > 0 && wfs.display_order !== 0"
mat-mini-fab
title="Move up"
color="primary"
(click)="editSpecDisplayOrder(wfs.id, -1, cat.workflow_specs)"
>
<mat-icon>arrow_upward</mat-icon>
</button>
<button
*ngIf="cat && cat.workflow_specs.length > 0 && (wfs.display_order < cat.workflow_specs.length - 1)"
mat-mini-fab
title="Move down"
color="primary"
(click)="editSpecDisplayOrder(wfs.id, 1, cat.workflow_specs)"
>
<mat-icon>arrow_downward</mat-icon>
</button>
<button mat-mini-fab title="Edit this workflow specification" color="primary" (click)="editWorkflowSpec(wfs)">
<mat-icon>edit</mat-icon>
</button>

7
src/app/workflow-spec-list/workflow-spec-list.component.spec.ts
View File

@ -119,6 +119,7 @@ describe('WorkflowSpecListComponent', () => {
display_name: '',
description: '',
category_id: 0,
display_order: 0,
};
const _upsertWorkflowSpecificationSpy = spyOn((component as any), '_upsertWorkflowSpecification')
@ -306,4 +307,10 @@ describe('WorkflowSpecListComponent', () => {
expect(_loadWorkflowSpecCategoriesSpy).toHaveBeenCalled();
});
it('should test validateWorkflowSpec');
it('should test onWorkflowUpdated');
it('should test editCategoryDisplayOrder');
it('should test editSpecDisplayOrder');
it('should test _loadWorkflowSpecs with is_master_spec');
});

151
src/app/workflow-spec-list/workflow-spec-list.component.ts
View File

@ -2,7 +2,15 @@ import {Component, OnInit} from '@angular/core';
import {MatBottomSheet} from '@angular/material/bottom-sheet';
import {MatDialog} from '@angular/material/dialog';
import {MatSnackBar} from '@angular/material/snack-bar';
import {ApiService, isNumberDefined, WorkflowSpec, WorkflowSpecCategory} from 'sartography-workflow-lib';
import createClone from 'rfdc';
import {
ApiService,
isNumberDefined,
moveArrayElementDown,
moveArrayElementUp,
WorkflowSpec,
WorkflowSpecCategory
} from 'sartography-workflow-lib';
import {DeleteWorkflowSpecCategoryDialogComponent} from '../_dialogs/delete-workflow-spec-category-dialog/delete-workflow-spec-category-dialog.component';
import {DeleteWorkflowSpecDialogComponent} from '../_dialogs/delete-workflow-spec-dialog/delete-workflow-spec-dialog.component';
import {WorkflowSpecCategoryDialogComponent} from '../_dialogs/workflow-spec-category-dialog/workflow-spec-category-dialog.component';
@ -15,11 +23,13 @@ import {
} from '../_interfaces/dialog-data';
import {ApiErrorsComponent} from '../api-errors/api-errors.component';
interface WorklflowSpecCategoryGroup {
interface WorkflowSpecCategoryGroup {
id: number;
name: string;
display_name: string;
workflow_specs?: WorkflowSpec[];
display_order: number;
}
@Component({
@ -32,7 +42,7 @@ export class WorkflowSpecListComponent implements OnInit {
selectedSpec: WorkflowSpec;
masterStatusSpec: WorkflowSpec;
selectedCat: WorkflowSpecCategory;
workflowSpecsByCategory: WorklflowSpecCategoryGroup[] = [];
workflowSpecsByCategory: WorkflowSpecCategoryGroup[] = [];
categories: WorkflowSpecCategory[];
constructor(
@ -50,7 +60,7 @@ export class WorkflowSpecListComponent implements OnInit {
validateWorkflowSpec(wfs: WorkflowSpec) {
this.api.validateWorkflowSpecification(wfs.id).subscribe(apiErrors => {
if (apiErrors && apiErrors.length > 0) {
this.bottomSheet.open(ApiErrorsComponent, {data: {apiErrors: apiErrors}});
this.bottomSheet.open(ApiErrorsComponent, {data: {apiErrors: apiErrors}});
} else {
this.snackBar.open('Workflow specification is valid!', 'Ok', {duration: 5000});
}
@ -59,12 +69,14 @@ export class WorkflowSpecListComponent implements OnInit {
editWorkflowSpec(selectedSpec?: WorkflowSpec) {
this.selectedSpec = selectedSpec;
const hasDisplayOrder = this.selectedSpec && isNumberDefined(this.selectedSpec.display_order);
const dialogData: WorkflowSpecDialogData = {
id: this.selectedSpec ? this.selectedSpec.id : '',
name: this.selectedSpec ? this.selectedSpec.name || this.selectedSpec.id : '',
display_name: this.selectedSpec ? this.selectedSpec.display_name : '',
description: this.selectedSpec ? this.selectedSpec.description : '',
category_id: this.selectedSpec ? this.selectedSpec.category_id : null,
id: this.selectedSpec ? this.selectedSpec.id : '',
name: this.selectedSpec ? this.selectedSpec.name || this.selectedSpec.id : '',
display_name: this.selectedSpec ? this.selectedSpec.display_name : '',
description: this.selectedSpec ? this.selectedSpec.description : '',
category_id: this.selectedSpec ? this.selectedSpec.category_id : null,
display_order: hasDisplayOrder ? this.selectedSpec.display_order : 0,
};
// Open new filename/workflow spec dialog
@ -81,7 +93,7 @@ export class WorkflowSpecListComponent implements OnInit {
});
}
editWorkflowSpecCategory(selectedCat?: WorkflowSpecCategory) {
editWorkflowSpecCategory(selectedCat?: WorkflowSpecCategoryGroup) {
this.selectedCat = selectedCat;
// Open new filename/workflow spec dialog
@ -133,14 +145,95 @@ export class WorkflowSpecListComponent implements OnInit {
});
}
onWorkflowUpdated(spec: WorkflowSpec) {
if (spec.is_master_spec) {
// Mark all other specs as not is_master_spec
let numUpdated = this.workflowSpecs.length - 1;
this.workflowSpecs.forEach(wfs => {
if (wfs.id !== spec.id) {
wfs.is_master_spec = false;
this.api.updateWorkflowSpecification(wfs.id, wfs).subscribe(() => {
numUpdated--;
if (numUpdated === 0) {
this._loadWorkflowSpecCategories();
}
});
}
});
}
this._loadWorkflowSpecCategories();
}
editCategoryDisplayOrder(catId: number, direction: number, cats: WorkflowSpecCategoryGroup[]) {
// Remove the fake category with category-less specs
const realCats = cats.filter(cat => isNumberDefined(cat.id));
const i = realCats.findIndex(spec => spec.id === catId);
if (i !== -1) {
if (direction === 1) {
moveArrayElementDown(realCats, i);
} else if (direction === -1) {
moveArrayElementUp(realCats, i);
}
} else {
this.snackBar.open('Category not found. Reload the page and try again.');
return;
}
let numUpdated = 0;
realCats.forEach((cat, j) => {
if (isNumberDefined(cat.id)) {
const newCat: WorkflowSpecCategoryGroup = createClone()(cat);
delete newCat.workflow_specs;
newCat.display_order = j;
this.api.updateWorkflowSpecCategory(cat.id, newCat as WorkflowSpecCategory).subscribe(() => {
numUpdated++;
if (numUpdated === realCats.length) {
this._loadWorkflowSpecCategories();
}
});
}
});
}
editSpecDisplayOrder(specId: string, direction: number, specs: WorkflowSpec[]) {
const i = specs.findIndex(spec => spec.id === specId);
if (i !== -1) {
if (direction === 1) {
moveArrayElementDown(specs, i);
} else if (direction === -1) {
moveArrayElementUp(specs, i);
}
} else {
this.snackBar.open('Spec not found. Reload the page and try again.');
return;
}
let numUpdated = 0;
specs.forEach((spec, j) => {
spec.display_order = j;
this.api.updateWorkflowSpecification(spec.id, spec).subscribe(() => {
numUpdated++;
if (numUpdated === specs.length) {
this._loadWorkflowSpecCategories();
}
});
});
}
sortByDisplayOrder = (a, b) => (a.display_order < b.display_order) ? -1 : 1;
private _loadWorkflowSpecCategories() {
this.api.getWorkflowSpecCategoryList().subscribe(cats => {
this.categories = cats.sort((a, b) => (a.display_order < b.display_order) ? -1 : 1);
this.categories = cats.sort(this.sortByDisplayOrder);
// Add a container for specs without a category
this.workflowSpecsByCategory = [{
id: null,
name: 'none',
display_name: 'No category',
workflow_specs: [],
display_order: -1, // Display it at the top
}];
this.categories.forEach((cat, i) => {
@ -156,13 +249,15 @@ export class WorkflowSpecListComponent implements OnInit {
this.api.getWorkflowSpecList().subscribe(wfs => {
this.workflowSpecs = wfs;
this.workflowSpecsByCategory.forEach(cat => {
cat.workflow_specs = this.workflowSpecs.filter(wf => {
if (wf.is_master_spec) {
this.masterStatusSpec = wf;
} else {
return wf.category_id === cat.id;
}
});
cat.workflow_specs = this.workflowSpecs
.filter(wf => {
if (wf.is_master_spec) {
this.masterStatusSpec = wf;
} else {
return wf.category_id === cat.id;
}
})
.sort(this.sortByDisplayOrder);
});
});
}
@ -179,6 +274,7 @@ export class WorkflowSpecListComponent implements OnInit {
display_name: data.display_name,
description: data.description,
category_id: data.category_id,
display_order: data.display_order,
};
if (specId) {
@ -255,24 +351,5 @@ export class WorkflowSpecListComponent implements OnInit {
private _displayMessage(message: string) {
this.snackBar.open(message, 'Ok', {duration: 3000});
}
onWorkflowUpdated(spec: WorkflowSpec) {
if (spec.is_master_spec) {
// Mark all other specs as not is_master_spec
let numUpdated = this.workflowSpecs.length - 1;
this.workflowSpecs.forEach(wfs => {
if (wfs.id !== spec.id) {
wfs.is_master_spec = false;
this.api.updateWorkflowSpecification(wfs.id, wfs).subscribe(() => {
numUpdated--;
if (numUpdated === 0) {
this._loadWorkflowSpecCategories();
}
});
}
});
}
this._loadWorkflowSpecCategories();
}
}