a little cleanup on the navigation for the workflow specs.

This commit is contained in:
Dan 2021-02-23 16:20:42 -05:00
parent 77031ffe82
commit a199b1c3f7
3 changed files with 82 additions and 62 deletions

View File

@ -52,6 +52,7 @@ import {WorkflowSpecCardComponent} from './workflow-spec-card/workflow-spec-card
import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list.component';
import {MatSidenavModule} from '@angular/material/sidenav';
import { ConfirmDialogComponent } from './_dialogs/confirm-dialog/confirm-dialog.component';
import {MatExpansionModule} from '@angular/material/expansion';
@Injectable()
export class ThisEnvironment implements AppEnvironment {
@ -103,34 +104,35 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
ReferenceFilesComponent,
ConfirmDialogComponent,
],
imports: [
BrowserAnimationsModule,
BrowserModule,
FlexLayoutModule,
FormlyModule,
FormsModule,
HttpClientModule,
MatBottomSheetModule,
MatButtonModule,
MatCardModule,
MatDialogModule,
MatDividerModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatSnackBarModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
ReactiveFormsModule,
SartographyFormsModule,
SartographyPipesModule,
SartographyWorkflowLibModule,
AppRoutingModule,
MatSidenavModule,
// <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
],
imports: [
BrowserAnimationsModule,
BrowserModule,
FlexLayoutModule,
FormlyModule,
FormsModule,
HttpClientModule,
MatBottomSheetModule,
MatButtonModule,
MatCardModule,
MatDialogModule,
MatDividerModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatSnackBarModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
ReactiveFormsModule,
SartographyFormsModule,
SartographyPipesModule,
SartographyWorkflowLibModule,
AppRoutingModule,
MatSidenavModule,
MatExpansionModule,
// <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
],
bootstrap: [AppComponent],
entryComponents: [
DeleteFileDialogComponent,

View File

@ -24,11 +24,50 @@
</ng-container>
<mat-divider></mat-divider>
<mat-accordion class="example-headers-align" multi="false">
<ng-container *ngFor="let cat of workflowSpecsByCategory">
<ng-container *ngIf="!(cat.id === null && cat.workflow_specs.length === 0)">
<div class="category" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
<h4>{{cat.display_name}} ({{cat.name}})</h4>
<div class="category-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
<mat-expansion-panel hideToggle [expanded]="selectedSpec.category_id == cat.id">
<mat-expansion-panel-header>
<mat-panel-title>
{{cat.display_name}}
</mat-panel-title>
<mat-panel-description>
({{cat.name}})
</mat-panel-description>
</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">
<a [ngClass]="{'spec_menu_item':true, 'spec-selected': wfs.id == selectedSpec.id}" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
<span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
<button
*ngIf="cat && cat.workflow_specs.length > 0 && wfs.display_order !== 0"
mat-icon-button
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-icon-button
title="Move down"
color="primary"
(click)="editSpecDisplayOrder(wfs.id, 1, cat.workflow_specs)"
>
<mat-icon>arrow_downward</mat-icon>
</button>
</span>
<!--
<ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
-->
</mat-list-item>
</mat-list>
<div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
<mat-action-row>
<button mat-mini-fab color="primary" (click)="editWorkflowSpecCategory(cat)">
<mat-icon>edit</mat-icon>
</button>
@ -54,40 +93,12 @@
(click)="confirmDeleteWorkflowSpecCategory(cat)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<mat-list>
<mat-list-item *ngFor="let wfs of cat.workflow_specs" class="workflow-spec" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
<a class="spec_menu_item" (click)="selectSpec(wfs)">{{wfs.display_name}}</a>
<span class="spec-actions" fxLayout="row" fxLayoutGap="10px" *ngIf="cat.id !== null">
<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>
</span>
<!--
<ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs, cat: cat}"></ng-container>
-->
</mat-list-item>
</mat-list>
</mat-action-row>
</mat-expansion-panel>
<div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
</ng-container>
</ng-container>
</mat-accordion>
</mat-drawer>
<div class="content">

View File

@ -32,9 +32,13 @@
}
.mat-list-base .mat-list-item, .mat-list-base .mat-list-option {
height: auto;
}
.workflow-spec {
border-left: 4px solid $brand-gray-light;
font-size: 1em;
&:hover {
border-left: 4px solid $brand-primary;
background-color: $brand-primary-tint-4;
@ -48,6 +52,9 @@
width: 300px;
margin-left: 20px;
}
.spec-selected {
font-weight: bold;
}
.spec-actions {
width: 100px;
opacity: 0;