File
Implements
Metadata
| selector |
app-cut-off-list |
| styleUrls |
./cut-off-list.component.css |
| templateUrl |
./cut-off-list.component.html |
Methods
|
applyFilter
|
applyFilter(filterValue: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| filterValue |
string
|
No
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
colors
|
colors:
|
Default value : colors
|
|
|
|
searchText
|
searchText: string
|
Type : string
|
Default value : ''
|
|
|
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { ProcessingInfo } from '../models/i-processing-info';
import { colors } from '../providers/healtch-check-color.service';
import { ProcessingService } from '../providers/processing.service';
@Component({
selector: 'app-cut-off-list',
templateUrl: './cut-off-list.component.html',
styleUrls: ['./cut-off-list.component.css']
})
export class CutOffListComponent implements OnInit, OnDestroy {
colors = colors;
info$: Observable<ProcessingInfo>;
searchText = '';
constructor(private service: ProcessingService, private route: ActivatedRoute) {}
ngOnInit() {
this.info$ = this.service.info$;
this.route.params
.pipe(
filter(params => params !== null && params !== undefined),
map(params => params['date'])
)
.subscribe(param => {
const date = param ? param : new Date();
this.service.getProcessingInfo(date);
});
}
ngOnDestroy(): void {
// this.subscription.unsubscribe();
}
applyFilter(filterValue: string) {
console.log({ filterValue });
this.searchText = filterValue;
}
}
<section>
<button mat-button class="button action-background-color float-right">Accept Selected Runs</button>
<h3 class="component-title">Processing Today</h3>
<mat-form-field class="search-batch-form">
<span matPrefix>
<mat-icon class="material-icons input-prefix-icon neutral-color">search</mat-icon>
</span>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search For A Run" />
<button
mat-button
*ngIf="searchText"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="searchText = ''"
>
<mat-icon>close</mat-icon>
</button>
<mat-hint><strong>Example: 2:00:00 or Status</strong> </mat-hint>
</mat-form-field>
<mat-card *ngIf="!(info$ | async)" fxFill fxLayoutAlign="center center">
<mat-progress-spinner color="accent" mode="indeterminate" diameter="48" strokeWidth="4">
</mat-progress-spinner>
</mat-card>
<mat-accordion *ngIf="(info$ | async) as info">
<mat-expansion-panel *ngFor="let entry of info.entries">
<mat-expansion-panel-header>
<mat-panel-title>{{ entry.cutOff }}</mat-panel-title>
<mat-panel-description>
<app-processing-color-by-healthcheck
[runs]="entry.ProcessingRunInfo"
></app-processing-color-by-healthcheck>
</mat-panel-description>
</mat-expansion-panel-header>
<div fxFill fxLayout="column" fxLayoutAlign="center start">
<div *ngFor="let run of entry.ProcessingRunInfo">
<p>{{ run.Name }}</p>
<p>{{ run.HealthCheckSummary.HealthCheckStatus }}</p>
<p>{{ run.HealthCheckSummary.HealthCheckDescription }}</p>
</div>
</div>
<mat-action-row>
<button mat-button color="primary" [routerLink]="['cutoff', entry.cutOff]">View Details</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
</section>
.accept-all-button {
margin-top: 25px;
}
.search-batch-form {
margin-top: -5px;
width: 100%;
}
.status {
font-size: 12px;
}
.neutral-td {
width: 20%;
}
.checkmark-td {
width: 10%;
}
.batch-td {
width: 10%;
}
.status-td {
width: 20%;
}
@media only screen and (max-width: 500px) {
.neutral-td {
display: none !important;
}
.checkmark-td {
width: 20%;
}
.batch-td {
width: 20%;
}
.status-td {
width: 60%;
}
}
Legend
Html element with directive