Updated Css to align with buttons

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

View File

@ -9,14 +9,9 @@
<mat-icon>post_add</mat-icon>
Add category
</button>
<form class="form-inline">
<div class="form-group">
<input type="search"
class="form-control"
placeholder="Enter search string"
[formControl]="searchField">
</div>
</form>
<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">
@ -24,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>

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;
}
@ -32,7 +35,6 @@
}
.workflow-spec {
border-left: 4px solid $brand-gray-light;
&:hover {

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,21 @@ 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 {debounceTime, distinctUntilChanged, map, switchMap, tap} 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';
@ -73,7 +73,7 @@ export class WorkflowSpecListComponent implements OnInit {
});
this.searchField = new FormControl();
this.searchField.valueChanges.subscribe(value => {
this._loadWorkflowSpecs(null,value);
this._loadWorkflowSpecs(null, value);
console.log(value);
});
}
@ -81,9 +81,9 @@ 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});
this.snackBar.open('Workflow specification is valid!', 'Ok', { duration: 5000 });
}
});
}
@ -203,8 +203,7 @@ export class WorkflowSpecListComponent implements OnInit {
this._loadWorkflowSpecs(selectedSpecName);
});
}
}
private _loadWorkflowSpecs(selectedSpecName: String = null, searchSpecName: String = null) {
this.api.getWorkflowSpecList().subscribe(wfs => {
@ -216,12 +215,11 @@ export class WorkflowSpecListComponent implements OnInit {
if (wf.is_master_spec) {
this.masterStatusSpec = wf;
} else {
if (searchSpecName){
if (searchSpecName) {
return (wf.category_id === cat.id) && wf.display_name.toLowerCase().includes(searchSpecName.toLowerCase());
}
else {
} else {
return wf.category_id === cat.id;
}
}
}
})
.sort(this.sortByDisplayOrder);
@ -330,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) {
@ -358,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;
@ -375,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++;