Displays master status spec separately from other specs.
This commit is contained in:
parent
8ee71da70c
commit
e1240912bc
|
@ -5,17 +5,13 @@
|
|||
<div class="action-buttons">
|
||||
<ng-container *ngTemplateOutlet="actionButtons"></ng-container>
|
||||
</div>
|
||||
<span fxFlex></span>
|
||||
<ng-container>
|
||||
<button (click)="makeMasterStatus()" *ngIf="!workflowSpec.is_master_spec" mat-button color="accent">
|
||||
<mat-icon>radio_button_unchecked</mat-icon>
|
||||
Master status spec
|
||||
</button>
|
||||
<button *ngIf="workflowSpec.is_master_spec" (click)="makeMasterStatus()" mat-button color="accent">
|
||||
<mat-icon>radio_button_checked</mat-icon>
|
||||
Master status spec
|
||||
</button>
|
||||
</ng-container>
|
||||
<div
|
||||
*ngIf="workflowSpec.is_master_spec"
|
||||
class="master-status-label"
|
||||
matTooltip="This workflow specification controls the availability of the other workflow specifications"
|
||||
>
|
||||
Master status spec
|
||||
</div>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
|
|
|
@ -5,7 +5,23 @@ mat-card {
|
|||
border: 1px solid $brand-gray;
|
||||
|
||||
&.master-status {
|
||||
border: 2px dashed $brand-accent;
|
||||
position: relative;
|
||||
border: 4px solid $brand-accent;
|
||||
overflow: hidden;
|
||||
|
||||
.master-status-label {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
top: 55px;
|
||||
right: -90px;
|
||||
background-color: $brand-accent;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
transform: rotate(45deg);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
mat-card-title {
|
||||
|
|
|
@ -25,27 +25,36 @@
|
|||
</div>
|
||||
</div>
|
||||
<div *ngFor="let wfs of cat.workflow_specs" class="workflow-spec">
|
||||
<app-workflow-spec-card
|
||||
[workflowSpec]="wfs"
|
||||
[actionButtons]="actionButtons"
|
||||
(workflowUpdated)="onWorkflowUpdated($event)">
|
||||
</app-workflow-spec-card>
|
||||
<ng-template #actionButtons>
|
||||
<div class="workflow-spec-actions">
|
||||
<button mat-mini-fab title="Check for errors in this workflow specification" color="accent" (click)="validateWorkflowSpec(wfs)">
|
||||
<mat-icon>verified_user</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab title="Edit this workflow specification" color="primary" (click)="editWorkflowSpec(wfs)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button title="Delete this workflow specification" color="warn" (click)="confirmDeleteWorkflowSpec(wfs)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: wfs}"></ng-container>
|
||||
</div>
|
||||
<div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<mat-divider></mat-divider>
|
||||
<ng-container *ngIf="masterStatusSpec">
|
||||
<h1>Master Status Specification</h1>
|
||||
<ng-container *ngTemplateOutlet="workflowSpecCard; context: {wfs: masterStatusSpec}"></ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<ng-template #workflowSpecCard let-wfs="wfs">
|
||||
<app-workflow-spec-card
|
||||
[workflowSpec]="wfs"
|
||||
[actionButtons]="actionButtons"
|
||||
(workflowUpdated)="onWorkflowUpdated($event)"
|
||||
></app-workflow-spec-card>
|
||||
<ng-template #actionButtons>
|
||||
<div class="workflow-spec-actions">
|
||||
<button mat-mini-fab title="Check for errors in this workflow specification" color="accent" (click)="validateWorkflowSpec(wfs)">
|
||||
<mat-icon>verified_user</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab title="Edit this workflow specification" color="primary" (click)="editWorkflowSpec(wfs)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button title="Delete this workflow specification" color="warn" (click)="confirmDeleteWorkflowSpec(wfs)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
|
|
|
@ -30,6 +30,7 @@ interface WorklflowSpecCategoryGroup {
|
|||
export class WorkflowSpecListComponent implements OnInit {
|
||||
workflowSpecs: WorkflowSpec[] = [];
|
||||
selectedSpec: WorkflowSpec;
|
||||
masterStatusSpec: WorkflowSpec;
|
||||
selectedCat: WorkflowSpecCategory;
|
||||
workflowSpecsByCategory: WorklflowSpecCategoryGroup[] = [];
|
||||
categories: WorkflowSpecCategory[];
|
||||
|
@ -155,7 +156,13 @@ export class WorkflowSpecListComponent implements OnInit {
|
|||
this.api.getWorkflowSpecList().subscribe(wfs => {
|
||||
this.workflowSpecs = wfs;
|
||||
this.workflowSpecsByCategory.forEach(cat => {
|
||||
cat.workflow_specs = this.workflowSpecs.filter(wf => wf.category_id === cat.id);
|
||||
cat.workflow_specs = this.workflowSpecs.filter(wf => {
|
||||
if (wf.is_master_spec) {
|
||||
this.masterStatusSpec = wf;
|
||||
} else {
|
||||
return wf.category_id === cat.id;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -169,6 +169,10 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
.mat-tooltip {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.pad-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue