File
Implements
Metadata
| selector |
app-cut-off-detail |
| styleUrls |
./cut-off-detail.component.css |
| templateUrl |
./cut-off-detail.component.html |
Methods
|
closeDetail
|
closeDetail()
|
|
|
|
|
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { InfoEntry, ProcessingRunInfo } from '../models/i-processing-info';
import { ProcessingService } from '../providers/processing.service';
@Component({
selector: 'app-cut-off-detail',
templateUrl: './cut-off-detail.component.html',
styleUrls: ['./cut-off-detail.component.css']
})
export class CutOffDetailComponent implements OnInit {
selectedRun: ProcessingRunInfo;
entry$: Observable<InfoEntry>;
constructor(private route: ActivatedRoute, private service: ProcessingService) {}
name(run: ProcessingRunInfo) {
return run.Name.split(')')
.pop()
.split('.')
.shift();
}
ngOnInit() {
this.entry$ = this.service.entry$;
this.route.params.subscribe(params => {
const cutoff: string = params['cutoff'];
console.log({ cutoff });
this.service.getCutOff(cutoff);
});
}
showDetail(run: ProcessingRunInfo) {
console.log({ run });
this.selectedRun = run;
}
closeDetail() {
this.selectedRun = null;
}
}
<div class="overlay" *ngIf="selectedRun"><app-run-detail [run]="selectedRun"></app-run-detail></div>
<mat-card *ngIf="!(entry$ | async)" fxFill fxLayoutAlign="center center">
<mat-progress-spinner color="accent" mode="indeterminate" diameter="48" strokeWidth="4">
</mat-progress-spinner>
</mat-card>
<section *ngIf="(entry$ | async) as model">
<div fxLayout="row">
<span fxFlex="33">
<button mat-icon-button class="back-button" [routerLink]="['/processing']">
<mat-icon class="header-color">keyboard_arrow_left</mat-icon> Back
</button>
</span>
<span class="batch-option" fxFlex="66">
<h3 class="component-title">{{ model.cutOff }}</h3>
</span>
</div>
<mat-card>
<mat-card-header> </mat-card-header>
<mat-card-content>
<mat-list>
<h3 mat-subheader>Files</h3>
<mat-list-item *ngFor="let run of model.ProcessingRunInfo">
<mat-icon mat-list-icon>note</mat-icon>
<h4 mat-line>{{ name(run) }}</h4>
<p mat-line fxLayout="row" fxLayoutAlign="space-evenly center">
{{ run.HealthCheckSummary.HealthCheckDescription }}
<app-processing-color-by-healthcheck [run]="run"></app-processing-color-by-healthcheck>
<mat-icon>keyboard_arrow_right</mat-icon>
</p>
</mat-list-item>
</mat-list>
</mat-card-content>
<mat-card-actions fxLayout="row" fxLayoutAlign="end center">
<button mat-raised-button color="accent">Rerun</button>
<button mat-raised-button color="warn">Reject Run</button>
<button mat-raised-button color="primary">Approve Run</button>
</mat-card-actions>
</mat-card>
</section>
.component-title {
display: inline-block;
vertical-align: middle;
}
.back-button {
margin-left: -12px;
}
.back-button .mat-icon {
font-size: 30px;
width: 30px;
height: 30px;
line-height: 30px;
}
.mat-badge-content {
background-color: #f5f5f5;
color: #707173;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 20px;
}
.mat-badge-medium.mat-badge-above .mat-badge-content {
top: -1px;
}
.mat-badge-medium.mat-badge-after .mat-badge-content {
right: -25px;
}
.batch-option button {
border: 1px solid #fff;
margin-left: 5px;
line-height: 30px;
}
.tabs-ctn button {
padding: 0px 42px 0px 15px;
}
.status-ctn {
margin: 8px 0px 25px 0px;
font-size: 14px;
}
.run-status {
padding: 5px 10px;
border-radius: 3px;
color: #fff;
font-size: 12px;
margin-right: 8px;
}
.overlay {
z-index: 100;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
width: 100vw;
height: 100vh;
}
Legend
Html element with directive