src/lib/why/sz-why-entity.component.ts
Display the "Why" information for entity
Example :<!-- (Angular) --><br/>
<sz-why-entity entityId="5"></sz-why-entity><br/><br/><!-- (WC) -->
<sz-wc-why-entity entityId="5"></sz-wc-why-entity>
OnInit
OnDestroy
| selector | sz-why-entity |
| styleUrls | ./sz-why-entity.component.scss |
| templateUrl | ./sz-why-entity.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(configDataService: SzConfigDataService, entityData: EntityDataService)
|
|||||||||
|
Parameters :
|
| entityId |
Type : SzEntityIdentifier
|
|
the entity id to display the why report for. |
| recordsToShow |
Type : SzRecordId[] | undefined
|
|
if more than two records the view can be limited to just explicitly listed ones |
| onResult |
Type : EventEmitter<[] | SzWhyEntitiesResult>
|
|
when the respone from the server is returned this event is emitted |
| loading |
Type : EventEmitter<boolean>
|
|
returns true when waiting for network requests to complete |
| onRowsChanged |
Type : EventEmitter<SzWhyFeatureRow[]>
|
|
when the row definitions(that list all the fields that will be displayed) have been pulled from the results this even is emitted |
| getData |
getData()
|
|
call the /why api endpoint and return a observeable
Returns :
Observable<SzWhyEntityResponse>
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Protected onDataResponse | ||||||
onDataResponse(results: [SzWhyEntityResponse, string[]])
|
||||||
|
when the api requests respond this method properly sets up all the properties that get set/generated from some part of those requests
Parameters :
Returns :
void
|
| Protected getOrderedFeatures |
getOrderedFeatures()
|
|
get the features in the order found in the server config
Returns :
any
|
| Public getRowValuesForData | |||||||||
getRowValuesForData(rowKey: string, data?: SzWhyEntityColumn[])
|
|||||||||
|
when iterating over each cell for the table this method is called to pull the field value from the "formattedRows" which contain html markup.
Parameters :
Returns :
{}
|
| ngOnDestroy |
ngOnDestroy()
|
|
unsubscribe when component is destroyed
Returns :
void
|
| Protected transformWhyNotResultData | |||||||||
transformWhyNotResultData(data: SzWhyEntitiesResult, entities: SzEntityData[])
|
|||||||||
|
Parameters :
Returns :
SzWhyEntityColumn[]
|
| Protected transformWhyResultData | |||||||||
transformWhyResultData(data: SzWhyEntityResult[], entities: SzEntityData[])
|
|||||||||
|
Parameters :
Returns :
SzWhyEntityColumn[]
|
| Protected _data |
Type : SzWhyEntityResult[] | SzWhyEntitiesResult
|
| Protected _featuresByDetailIds |
Type : Map<number | SzEntityFeature>
|
| Protected _formattedData |
|
data thats ready to be used for UI/UX rendering, multiple fields concatenated in to meta-fields, embedded line breaks, html tags etc. |
| Public configDataService |
Type : SzConfigDataService
|
| Public unsubscribe$ |
Default value : new Subject<void>()
|
|
subscription to notify subscribers to unbind |
<div class="table-format">
<!--<div class="thead">
<div></div>
<div *ngFor="let hRow in this.headers">{{hRow}}</div>
</div>-->
<div class="tr" [class.thead]="rI==0" *ngFor="let row of rows; let rI = index">
<!-- show the title for the row -->
<div class="col-title">{{row.title}}</div>
<!-- now loop through a cell per item in formatted data -->
<div class="td" *ngFor="let tCell of getRowValuesForData(row.key)">
<div [innerHTML]="tCell"></div>
</div>
</div>
</div>
./sz-why-entity.component.scss
:host {
/* display: inline-flex;
align-items: center;
justify-content: center;
line-height: 14px;*/
display: block;
font-size: 14px;
margin: 0px 4px;
span {
/* align-self: flex-start;*/
margin-right: 7px;
}
svg {
align-self: flex-end;
}
}
.mat-why-report-table {
width: 100%;
}
.table-format {
display: table;
min-width: 100%;
width: auto;
background-color: #f5f5f5;
border-spacing: 1px;
.thead {
display: table-row;
position: sticky;
}
.tr {
display: table-row;
width: auto;
min-height: 32px;
}
.td {
display: table-cell;
background-color:#ffffff;
padding-left: 16px;
padding-right: 16px;
/*white-space: pre;*/
font-family: monospace;
padding: 5px 10px;
border-right: 2px solid #dcdcdc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000001f;
&:last-child {
padding-right: 10px;
border-right: none;
}
}
.col-title {
display: table-cell;
padding: 5px 16px;
color: #2977a7;
font-size: 16px;
border-right: 2px solid #dcdcdc;
text-transform: uppercase;
font-family: inherit;
vertical-align: middle;
border-right: 2px solid #dcdcdc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000001f;
}
}
.mat-column-title {
padding-left: 16px;
padding-right: 16px;
color: #2977a7;
font-size: 16px;
border-right: 2px solid #dcdcdc;
background-color: #f5f5f5;
text-transform: uppercase;
font-family: inherit;
}
.mat-mdc-cell {
border-right: 2px solid #dcdcdc;
padding-left: 16px;
padding-right: 16px;
white-space: pre;
font-family: monospace;
&:last-child {
padding-right: 10px;
}
}