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

Updated Css to align with buttons

Browse Source
This commit is contained in:
Nile Walker 2021-02-24 00:01:54 -05:00
parent 5b6a18668e
commit 384f80994e
3 changed files with 35 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,14 +9,9 @@
<mat-icon>post_add</mat-icon> <mat-icon>post_add</mat-icon>
Add category Add category
</button> </button>
<form class="form-inline"> <mat-form-field class="search-field">
<div class="form-group"> <input matInput type="search" placeholder="Search Workflows" class="form-control" [formControl]="searchField">
<input type="search" </mat-form-field>
class="form-control"
placeholder="Enter search string"
[formControl]="searchField">
</div>
</form>
</div> </div>
<mat-drawer-container class="example-container" autosize> <mat-drawer-container class="example-container" autosize>
<mat-drawer #drawer class="example-sidenav" mode="side" opened="true"> <mat-drawer #drawer class="example-sidenav" mode="side" opened="true">
@ -24,7 +19,7 @@
<div class="category"> <div class="category">
<h4>Master Specification</h4> <h4>Master Specification</h4>
<mat-list> <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> <a class="spec_menu_item" (click)="selectSpec(masterStatusSpec)">{{masterStatusSpec.display_name}}</a>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>

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

@ -1,6 +1,9 @@
@import "../../config"; @import "../../config";
::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
margin: 0;
max-height: 40px;
}
.container { .container {
padding: 3rem; padding: 3rem;
} }
@ -32,7 +35,6 @@
} }
.workflow-spec { .workflow-spec {
border-left: 4px solid $brand-gray-light; border-left: 4px solid $brand-gray-light;
&:hover { &:hover {

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

@ -1,7 +1,7 @@
import {Component, OnInit} from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {MatBottomSheet} from '@angular/material/bottom-sheet'; import { MatBottomSheet } from '@angular/material/bottom-sheet';
import {MatDialog} from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import {MatSnackBar} from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import createClone from 'rfdc'; import createClone from 'rfdc';
import { import {
ApiService, ApiService,
@ -11,21 +11,21 @@ import {
WorkflowSpec, WorkflowSpec,
WorkflowSpecCategory WorkflowSpecCategory
} from 'sartography-workflow-lib'; } from 'sartography-workflow-lib';
import {DeleteWorkflowSpecCategoryDialogComponent} from '../_dialogs/delete-workflow-spec-category-dialog/delete-workflow-spec-category-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 { 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 { WorkflowSpecCategoryDialogComponent } from '../_dialogs/workflow-spec-category-dialog/workflow-spec-category-dialog.component';
import {WorkflowSpecDialogComponent} from '../_dialogs/workflow-spec-dialog/workflow-spec-dialog.component'; import { WorkflowSpecDialogComponent } from '../_dialogs/workflow-spec-dialog/workflow-spec-dialog.component';
import { import {
DeleteWorkflowSpecCategoryDialogData, DeleteWorkflowSpecCategoryDialogData,
DeleteWorkflowSpecDialogData, DeleteWorkflowSpecDialogData,
WorkflowSpecCategoryDialogData, WorkflowSpecCategoryDialogData,
WorkflowSpecDialogData WorkflowSpecDialogData
} from '../_interfaces/dialog-data'; } from '../_interfaces/dialog-data';
import {ApiErrorsComponent} from 'sartography-workflow-lib'; import { ApiErrorsComponent } from 'sartography-workflow-lib';
import {ActivatedRoute} from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import {debounceTime, distinctUntilChanged, map, switchMap, tap} from 'rxjs/operators'; import { debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
import {Location} from '@angular/common'; import { Location } from '@angular/common';
import {environment} from '../../environments/environment.runtime'; import { environment } from '../../environments/environment.runtime';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
@ -73,7 +73,7 @@ export class WorkflowSpecListComponent implements OnInit {
}); });
this.searchField = new FormControl(); this.searchField = new FormControl();
this.searchField.valueChanges.subscribe(value => { this.searchField.valueChanges.subscribe(value => {
this._loadWorkflowSpecs(null,value); this._loadWorkflowSpecs(null, value);
console.log(value); console.log(value);
}); });
} }
@ -81,9 +81,9 @@ export class WorkflowSpecListComponent implements OnInit {
validateWorkflowSpec(wfs: WorkflowSpec) { validateWorkflowSpec(wfs: WorkflowSpec) {
this.api.validateWorkflowSpecification(wfs.id).subscribe(apiErrors => { this.api.validateWorkflowSpecification(wfs.id).subscribe(apiErrors => {
if (apiErrors && apiErrors.length > 0) { if (apiErrors && apiErrors.length > 0) {
this.bottomSheet.open(ApiErrorsComponent, {data: {apiErrors: apiErrors}}); this.bottomSheet.open(ApiErrorsComponent, { data: { apiErrors: apiErrors } });
} else { } else {
this.snackBar.open('Workflow specification is valid!', 'Ok', {duration: 5000}); this.snackBar.open('Workflow specification is valid!', 'Ok', { duration: 5000 });
} }
}); });
} }
@ -204,7 +204,6 @@ export class WorkflowSpecListComponent implements OnInit {
this._loadWorkflowSpecs(selectedSpecName); this._loadWorkflowSpecs(selectedSpecName);
}); });
} }
private _loadWorkflowSpecs(selectedSpecName: String = null, searchSpecName: String = null) { private _loadWorkflowSpecs(selectedSpecName: String = null, searchSpecName: String = null) {
this.api.getWorkflowSpecList().subscribe(wfs => { this.api.getWorkflowSpecList().subscribe(wfs => {
@ -216,10 +215,9 @@ export class WorkflowSpecListComponent implements OnInit {
if (wf.is_master_spec) { if (wf.is_master_spec) {
this.masterStatusSpec = wf; this.masterStatusSpec = wf;
} else { } else {
if (searchSpecName){ if (searchSpecName) {
return (wf.category_id === cat.id) && wf.display_name.toLowerCase().includes(searchSpecName.toLowerCase()); return (wf.category_id === cat.id) && wf.display_name.toLowerCase().includes(searchSpecName.toLowerCase());
} } else {
else {
return wf.category_id === cat.id; return wf.category_id === cat.id;
} }
} }
@ -330,14 +328,14 @@ export class WorkflowSpecListComponent implements OnInit {
} }
private _displayMessage(message: string) { private _displayMessage(message: string) {
this.snackBar.open(message, 'Ok', {duration: 3000}); this.snackBar.open(message, 'Ok', { duration: 3000 });
} }
private _reorder( private _reorder(
id: number|string, direction: number, id: number | string, direction: number,
list: Array<WorkflowSpecCategoryGroup|WorkflowSpec> list: Array<WorkflowSpecCategoryGroup | WorkflowSpec>
): Array<WorkflowSpecCategoryGroup|WorkflowSpec> { ): Array<WorkflowSpecCategoryGroup | WorkflowSpec> {
const listClone = createClone({circles: true})(list); const listClone = createClone({ circles: true })(list);
const reorderedList = listClone.filter(item => item.id !== null && item.id !== undefined); const reorderedList = listClone.filter(item => item.id !== null && item.id !== undefined);
const i = reorderedList.findIndex(spec => spec.id === id); const i = reorderedList.findIndex(spec => spec.id === id);
if (i !== -1) { if (i !== -1) {
@ -358,7 +356,7 @@ export class WorkflowSpecListComponent implements OnInit {
let numUpdated = 0; let numUpdated = 0;
cats.forEach((cat, j) => { cats.forEach((cat, j) => {
if (isNumberDefined(cat.id)) { if (isNumberDefined(cat.id)) {
const newCat: WorkflowSpecCategoryGroup = createClone({circles: true})(cat); const newCat: WorkflowSpecCategoryGroup = createClone({ circles: true })(cat);
delete newCat.workflow_specs; delete newCat.workflow_specs;
newCat.display_order = j; newCat.display_order = j;
@ -375,7 +373,7 @@ export class WorkflowSpecListComponent implements OnInit {
private _updateSpecDisplayOrders(specs: WorkflowSpec[]) { private _updateSpecDisplayOrders(specs: WorkflowSpec[]) {
let numUpdated = 0; let numUpdated = 0;
specs.forEach((spec, j) => { specs.forEach((spec, j) => {
const newSpec = createClone({circles: true})(spec); const newSpec = createClone({ circles: true })(spec);
newSpec.display_order = j; newSpec.display_order = j;
this.api.updateWorkflowSpecification(newSpec.id, newSpec).subscribe(() => { this.api.updateWorkflowSpecification(newSpec.id, newSpec).subscribe(() => {
numUpdated++; numUpdated++;