sartography/cr-connect-bpmn
1
0
Fork 0
mirror of https://github.com/sartography/cr-connect-bpmn.git synced 2025-01-27 09:05:02 +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

9
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">
@ -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;
}

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

@ -23,9 +23,10 @@ import {
} from '../_interfaces/dialog-data';
import { ApiErrorsComponent } from 'sartography-workflow-lib';
import { ActivatedRoute } from '@angular/router';
import {map} from 'rxjs/operators';
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,6 +71,11 @@ 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) {
@ -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;
@ -208,9 +214,13 @@ export class WorkflowSpecListComponent implements OnInit {
.filter(wf => {
if (wf.is_master_spec) {
this.masterStatusSpec = wf;
} else {
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);
});