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

Merge pull request #61 from sartography/feature/search-bar

Browse Source 
Feature/search bar
This commit is contained in:
Dan Funk 2021-03-02 14:40:48 -05:00 committed by GitHub
commit a3387be571
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,9 @@
<mat-icon>post_add</mat-icon>
Add category
</button>
<mat-form-field class="search-field">
<input matInput type="search" placeholder="Search Workflows" class="form-control" [formControl]="searchField">
</mat-form-field>
</div>
<mat-drawer-container class="example-container" autosize>
<mat-drawer #drawer class="example-sidenav" mode="side" opened="true">
@ -16,7 +19,7 @@
<div class="category">
<h4>Master Specification</h4>
<mat-list>
<mat-list-item class="workflow-spec" fxLayout="row">
<mat-list-item class="workflow-spec" fxLayout="row">
<a class="spec_menu_item" (click)="selectSpec(masterStatusSpec)">{{masterStatusSpec.display_name}}</a>
</mat-list-item>
</mat-list>
@ -27,6 +30,8 @@
<mat-accordion class="example-headers-align" multi="false">
<ng-container *ngFor="let cat of workflowSpecsByCategory">
<div *ngIf="!(searchField.value && cat.workflow_specs.length === 0)">
<ng-container *ngIf="!(cat.id === null && cat.workflow_specs.length === 0)">
<mat-expansion-panel hideToggle [expanded]="selectedSpec.category_id == cat.id">
<mat-expansion-panel-header>
@ -36,6 +41,9 @@
<mat-panel-description>
({{cat.name}})
</mat-panel-description>
<button mat-mini-fab color="primary" style="box-shadow: none">
{{cat.workflow_specs.length}}
</button>
</mat-expansion-panel-header>
<mat-list>
<mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
@ -97,6 +105,7 @@
</mat-expansion-panel>
</ng-container>
</div>
</ng-container>
</mat-accordion>
</mat-drawer>

5
src/app/workflow-spec-list/workflow-spec-list.component.scss
View File

@ -1,6 +1,9 @@
@import "../../config";
::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
margin: 0;
max-height: 40px;
}
.container {
padding: 3rem;
}

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

@ -1,7 +1,7 @@
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 { 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 createClone from 'rfdc';
import {
ApiService,
@ -11,21 +11,22 @@ import {
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';
import {WorkflowSpecDialogComponent} from '../_dialogs/workflow-spec-dialog/workflow-spec-dialog.component';
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';
import { WorkflowSpecDialogComponent } from '../_dialogs/workflow-spec-dialog/workflow-spec-dialog.component';
import {
DeleteWorkflowSpecCategoryDialogData,
DeleteWorkflowSpecDialogData,
WorkflowSpecCategoryDialogData,
WorkflowSpecDialogData
} from '../_interfaces/dialog-data';
import {ApiErrorsComponent} from 'sartography-workflow-lib';
import {ActivatedRoute} from '@angular/router';
import {map} from 'rxjs/operators';
import {Location} from '@angular/common';
import {environment} from '../../environments/environment.runtime';
import { ApiErrorsComponent } from 'sartography-workflow-lib';
import { ActivatedRoute } from '@angular/router';
import { debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
import { Location } from '@angular/common';
import { environment } from '../../environments/environment.runtime';
import { FormControl } from '@angular/forms';
export interface WorkflowSpecCategoryGroup {
@ -50,6 +51,7 @@ export class WorkflowSpecListComponent implements OnInit {
categories: WorkflowSpecCategory[];
moveUp = moveArrayElementUp;
moveDown = moveArrayElementDown;
private searchField: FormControl;
constructor(
private api: ApiService,
@ -69,14 +71,19 @@ export class WorkflowSpecListComponent implements OnInit {
this._loadWorkflowSpecCategories();
}
});
this.searchField = new FormControl();
this.searchField.valueChanges.subscribe(value => {
this._loadWorkflowSpecs(null, value);
console.log(value);
});
}
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});
this.snackBar.open('Workflow specification is valid!', 'Ok', { duration: 5000 });
}
});
}
@ -197,8 +204,7 @@ export class WorkflowSpecListComponent implements OnInit {
this._loadWorkflowSpecs(selectedSpecName);
});
}
private _loadWorkflowSpecs(selectedSpecName: String = null) {
private _loadWorkflowSpecs(selectedSpecName: String = null, searchSpecName: String = null) {
this.api.getWorkflowSpecList().subscribe(wfs => {
this.workflowSpecs = wfs;
@ -209,7 +215,11 @@ export class WorkflowSpecListComponent implements OnInit {
if (wf.is_master_spec) {
this.masterStatusSpec = wf;
} else {
return wf.category_id === cat.id;
if (searchSpecName) {
return (wf.category_id === cat.id) && wf.display_name.toLowerCase().includes(searchSpecName.toLowerCase());
} else {
return wf.category_id === cat.id;
}
}
})
.sort(this.sortByDisplayOrder);
@ -318,14 +328,14 @@ export class WorkflowSpecListComponent implements OnInit {
}
private _displayMessage(message: string) {
this.snackBar.open(message, 'Ok', {duration: 3000});
this.snackBar.open(message, 'Ok', { duration: 3000 });
}
private _reorder(
id: number|string, direction: number,
list: Array<WorkflowSpecCategoryGroup|WorkflowSpec>
): Array<WorkflowSpecCategoryGroup|WorkflowSpec> {
const listClone = createClone({circles: true})(list);
id: number | string, direction: number,
list: Array<WorkflowSpecCategoryGroup | WorkflowSpec>
): Array<WorkflowSpecCategoryGroup | WorkflowSpec> {
const listClone = createClone({ circles: true })(list);
const reorderedList = listClone.filter(item => item.id !== null && item.id !== undefined);
const i = reorderedList.findIndex(spec => spec.id === id);
if (i !== -1) {
@ -346,7 +356,7 @@ export class WorkflowSpecListComponent implements OnInit {
let numUpdated = 0;
cats.forEach((cat, j) => {
if (isNumberDefined(cat.id)) {
const newCat: WorkflowSpecCategoryGroup = createClone({circles: true})(cat);
const newCat: WorkflowSpecCategoryGroup = createClone({ circles: true })(cat);
delete newCat.workflow_specs;
newCat.display_order = j;
@ -363,7 +373,7 @@ export class WorkflowSpecListComponent implements OnInit {
private _updateSpecDisplayOrders(specs: WorkflowSpec[]) {
let numUpdated = 0;
specs.forEach((spec, j) => {
const newSpec = createClone({circles: true})(spec);
const newSpec = createClone({ circles: true })(spec);
newSpec.display_order = j;
this.api.updateWorkflowSpecification(newSpec.id, newSpec).subscribe(() => {
numUpdated++;