File
C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-liveapps-lib/src/lib/components/live-apps-case-states/live-apps-case-states.component.ts
Description
Case States/Milestone view
Extends
Implements
Example
<tcla-live-apps-case-states></tcla-live-apps-case-states>Metadata
| selector | tcla-live-apps-case-states |
| styleUrls | ./live-apps-case-states.component.css |
| templateUrl | ./live-apps-case-states.component.html |
Index
Properties |
|
Methods |
Inputs |
HostListeners |
Constructor
constructor(caseStatesService: TcCaseStatesService, durationSince: DurationSincePipe)
|
|||||||||
|
Parameters :
|
Inputs
| appId | |
Type : string
|
|
|
The LA Application Id |
|
| caseRef | |
Type : string
|
|
|
The case reference |
|
| hideTitle | |
Type : boolean
|
|
|
Hide milestone title - default false |
|
| sandboxId | |
Type : number
|
|
|
sandboxId - this comes from claims resolver |
|
| small | |
Type : boolean
|
|
|
Small rendering vs normal - defaults to normal |
|
HostListeners
| window:resize |
Arguments : '$event'
|
window:resize(event)
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:45
|
Methods
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:91
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:99
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:104
|
|
Returns :
void
|
| setupWidthObserver |
setupWidthObserver()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:70
|
|
Returns :
void
|
Properties
| Public errorMessage |
Type : string
|
| Public getToolTipText |
Default value : () => {...}
|
| Public refresh |
Default value : () => {...}
|
| Public states |
Type : CaseTypeState[]
|
| Public tracker |
Type : StateTracker
|
| Protected _destroyed$ |
Default value : new Subject()
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:39
|
| componentChildDivs |
Type : LiveAppsComponent[]
|
Decorators :
@ViewChildren('componentChildDiv')
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:36
|
| componentDiv |
Type : ElementRef
|
Decorators :
@ViewChild('componentDiv', {static: false})
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:35
|
| Protected containerChanges$ |
Type : Observable<TcComponent>
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:40
|
| Private observer |
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:42
|
| Public resize |
Default value : () => {...}
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:56
|
| Public widget |
Type : TcComponent
|
|
Inherited from
LiveAppsComponent
|
|
Defined in
LiveAppsComponent:41
|
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {CaseTypeState, CaseTypeStatesList, Metadata} from '../../models/liveappsdata';
import {Subject} from 'rxjs';
import {LiveAppsService} from '../../services/live-apps.service';
import {map, take, takeUntil} from 'rxjs/operators';
import {LiveAppsComponent} from '../live-apps-component/live-apps-component.component';
import {StateTracker, TrackerState} from '../../models/tc-case-states';
import {TcCaseStatesService} from '../../services/tc-case-states.service';
import {DurationSincePipe} from '@tibco-tcstk/tc-core-lib';
/**
* Case States/Milestone view
*
* 
*
*@example <tcla-live-apps-case-states></tcla-live-apps-case-states>
*/
@Component({
selector: 'tcla-live-apps-case-states',
templateUrl: './live-apps-case-states.component.html',
styleUrls: ['./live-apps-case-states.component.css']
})
export class LiveAppsCaseStatesComponent extends LiveAppsComponent implements OnInit {
/**
* The LA Application Id
*/
@Input() appId: string;
/**
* sandboxId - this comes from claims resolver
*/
@Input() sandboxId: number;
/**
* The case reference
*/
@Input() caseRef: string;
/**
* Small rendering vs normal - defaults to normal
*/
@Input() small: boolean;
/**
* Hide milestone title - default false
*/
@Input() hideTitle: boolean;
public states: CaseTypeState[];
public tracker: StateTracker;
public errorMessage: string;
public getToolTipText = (trackerState: TrackerState): string => {
let toolTipText = '';
if (trackerState.status !== 'pending') {
toolTipText = toolTipText + trackerState.user + ' ' + this.durationSince.transform(trackerState.changed);
}
return toolTipText;
}
public refresh = () => {
this.caseStatesService.getTracker(this.caseRef, this.sandboxId, this.appId).pipe(
take(1),
takeUntil(this._destroyed$)
).subscribe(
tracker => {
this.tracker = tracker;
if (!tracker.valid) {
console.error('Unable to create milestone trailer. Case Audit likely removed due to subscription retention period.');
}
return tracker;
}, error => { this.errorMessage = 'Error constructing state tracker: ' + error.error.errorMsg; });
}
constructor(protected caseStatesService: TcCaseStatesService, protected durationSince: DurationSincePipe) {
super();
}
ngOnInit() {
this.refresh();
}
}
<div fxFlex class="starters-case-states-container" fxLayout="row" fxLayoutAlign="start center">
<div *ngIf="tracker && tracker.valid">
<span *ngIf="!hideTitle" class="tc-milestone-title" fxLayoutAlign="start center">Milestones</span>
<div style="padding-left: 10px"></div>
<div fxFlex class="starters-milestone-trailer" fxLayout="row wrap">
<div class="starters-ms-wrapper" *ngFor="let trackerState of tracker.states; first as isFirst; last as isLast" ngclass="{'starters-milestone-first-section': isFirst, 'starters-milestone-mid-section': (!isFirst && !isLast), 'starters-milestone-end-section': isLast}">
<tcla-live-apps-milestone [small]="small" [isFirst]="isFirst" [isLast]="isLast" [isTerminal]="trackerState.isTerminal" [label]="trackerState.label" [phase]="trackerState.phase" [previousPhase]="trackerState.previousPhase" [status]="trackerState.status" [matTooltip]="getToolTipText(trackerState)" matTooltipShowDelay="1000" matTooltipPosition="below"></tcla-live-apps-milestone>
</div>
</div>
</div>
<div *ngIf="tracker && !tracker.valid">
<span class="tc-milestone-title">Milestone data not available</span>
</div>
</div>
./live-apps-case-states.component.css
.tc-milestone-title {
min-width: 150px;
font-family: Source Sans Pro;
font-size: 18px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: 0.3px;
color: black;
}
:host ::ng-deep tcla-live-apps-milestone .tc-ms-pending-bg {
fill: #DEDEDE;
}
:host ::ng-deep tcla-live-apps-milestone .tc-ms-inprogress-bg {
fill: #0081CB;
}
:host ::ng-deep tcla-live-apps-milestone .tc-ms-completed-bg {
fill: #062E79;
}
:host ::ng-deep tcla-live-apps-milestone .tc-ms-completed-terminal-bg {
fill: #04BE5B;
}
:host ::ng-deep tcla-live-apps-milestone .tc-ms-label {
color: black;
}
Legend
Html element
Component
Html element with directive