src/lib/record/sz-entity-record-viewer.component.ts
A component for displaying the result(s) of the sz-search-by-id component
when the results are of type SzEntityRecord. The fragment only displays information
that was present in the record itself. The easiest way to use this component is to pair it
with the
<!-- (Angular) -->
<sz-search-by-id #searchBox
[dataSource]="'COMPANIES'"
(resultChange)="formResult = $event"></sz-search-by-id>
<sz-entity-record-viewer *ngIf="formResult" [record]="formResult"></sz-entity-record-viewer><!-- (WC) -->
<sz-wc-search-by-id id="formInput"
data-source="COMPANIES"></sz-wc-search-by-id>
<sz-wc-entity-record-viewer id="formResult"></sz-wc-entity-record-viewer>
<script>
document.getElementById('formInput').addEventListener('resultChange', function(evt) {
document.getElementById('formResult').record = evt.detail;
});
</script>| selector | sz-entity-record-viewer |
| styleUrls | ./sz-entity-record-viewer.component.scss |
| templateUrl | ./sz-entity-record-viewer.component.html |
Properties |
|
Methods |
Inputs |
Accessors |
constructor()
|
| forceLayout |
Type : boolean
|
Default value : false
|
|
whether or not to force to a layout and ignore responsiveness |
| layoutClasses |
Type : [] | string
|
|
setter for _layoutClasses |
| record |
Type : SzEntityRecord | string
|
|
set the record to display |
| showJSON |
Type : boolean
|
Default value : true
|
|
show the JSON data for this.record |
| showNoResultMessage |
Type : boolean
|
Default value : true
|
|
show a message when a search has 0 results |
| showTab | ||||||
showTab(activeView: string)
|
||||||
|
activate a tab. 'json' | 'overview' | 'summary'
Parameters :
Returns :
void
|
| Public _layoutClasses |
Type : string[]
|
Default value : []
|
|
the css classes being applied. layout-wide | layout-medium | layout-narrow | layout-rail |
| record | ||||||
getrecord()
|
||||||
|
return the record data |
||||||
setrecord(value: SzEntityRecord | string)
|
||||||
|
set the record to display
Parameters :
Returns :
void
|
| layoutClasses | ||||||
getlayoutClasses()
|
||||||
|
getter for _layoutClasses |
||||||
setlayoutClasses(value: string[] | string)
|
||||||
|
setter for _layoutClasses
Parameters :
Returns :
void
|
| overViewActive |
getoverViewActive()
|
|
is the "Overview" tab the actively focused tab
Returns :
boolean
|
| jsonViewActive |
getjsonViewActive()
|
|
is the "JSON" tab the actively focused tab
Returns :
boolean
|
<!-- start json record viewer for sz-search-by-id -->
<div *ngIf="record">
<div class="tabset"
[class.overview]="overViewActive"
[class.json]="jsonViewActive"
>
<ul class="tabs">
<li class="overview" (click)="showTab('overview')">Summary</li>
<li class="json" (click)="showTab('json')">JSON</li>
</ul>
<div class="tabset-view">
<sz-entity-record-card-content
[showOtherData]="true"
[ignorePrefOtherDataChanges]="true"
[entity]="record"
[parentEntity]="record"
[layoutClasses]="layoutClasses"
[ngClass]="{'open': true, 'no-shade': true}"
[truncateResults]="false"
[truncatedTooltip]="'click to expand.'"
></sz-entity-record-card-content>
<ngx-json-viewer *ngIf="showJSON" [json]="record"></ngx-json-viewer>
</div>
</div>
</div>
<!-- start json record viewer for sz-search-by-id -->
./sz-entity-record-viewer.component.scss
:host {
display: block;
--active-tab-color: #f7f7f7;
--inactive-tab-color: #999;
ngx-json-viewer, .ngx-json-viewer {
display: block;
}
sz-entity-record-card-content, .sz-entity-record-card-content {
display: block;
}
.tabset {
ul {
list-style-type:none; padding: 0; margin: 0;
li {
display: inline-block;
padding: .5em 2em;
background-color: var(--inactive-tab-color);
border-right: 1px solid #909090;
cursor: pointer;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid #717171;
&:last-child {
border-right: 1px solid #717171;
}
}
}
.tabset-view {
display: block;
padding: 1em 1em;
background-color: var(--active-tab-color);
}
}
.tabset.overview {
/* hide json view */
ngx-json-viewer, .ngx-json-viewer {
display: none;
}
li.overview {
border-top: 1px solid #e7e0e0;
border-bottom: 1px solid transparent;
background-color: var(--active-tab-color);
font-weight: bold;
cursor: default;
}
}
.tabset.json {
/* hide summary view */
sz-entity-record-card-content, .sz-entity-record-card-content {
display: none;
}
li.json {
border-top: 1px solid #e7e0e0;
border-bottom: 1px solid transparent;
background-color: var(--active-tab-color);
font-weight: bold;
cursor: default;
&:last-child {
border-right: 1px solid #ccc;
}
}
}
}