a little cleanup on the navigation for the workflow specs.
This commit is contained in:
parent
77031ffe82
commit
a199b1c3f7
|
@ -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,
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue