app/opc/content-block/content-block.component.ts
| selector | content-block |
| styleUrls | ./content-block.component.scss |
| templateUrl | ./content-block.component.html |
Methods |
Inputs |
constructor(opcService: OpcService, util: UtilService)
|
|||||||||
|
data.type specifices which type of block we should render. PDP04A - Normal content block with illustration PDP04B - Normal content block without illustration PDP04C - Appropriate products content block
Parameters :
|
| data | |
| generateReferenceUrl | ||||||
generateReferenceUrl(feature: any)
|
||||||
|
Parameters :
Returns :
void
|
| hasReference | ||||||
hasReference(feature: any)
|
||||||
|
Parameters :
Returns :
boolean
|
| isNote | ||||||
isNote(renderingType: string)
|
||||||
|
Parameters :
Returns :
boolean
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { OnInit, Input, Component } from '@angular/core';
import { OpcService } from 'src/app/core/services/opc-service/opc-service.service';
import { UtilService } from 'src/app/core/services/util-service/util.service';
@Component({
selector: 'content-block',
templateUrl: './content-block.component.html',
styleUrls: ['./content-block.component.scss']
})
export class ContentBlockComponent implements OnInit {
@Input() data;
/** data.type specifices which type of block we should render.
* PDP04A - Normal content block with illustration
* PDP04B - Normal content block without illustration
* PDP04C - Appropriate products content block
*/
constructor(private opcService: OpcService, private util: UtilService) {}
ngOnInit() {
/*
If the search result include reference object it means that we should insert a link to the approprite webpim PDP
For the 4A and 4B block the reference object is contained in the tables array, for the 4C blocks it is in the entires object
*/
const tables = this.util.extract(this.data, 'tables') || this.util.extract(this.data, 'entries') || [];
const features = tables.map(e => e.features ? e.features : [e] ).flat();
features.forEach(feature => {
if (this.hasReference(feature)) {
this.generateReferenceUrl(feature);
}
});
}
hasReference(feature: any): boolean {
return !!feature.reference;
}
generateReferenceUrl(feature: any): void {
const tableId = this.util.extract(feature, 'reference', 'structure_group_id');
const designation = this.util.extract(feature, 'reference', 'designation');
feature.detailUrl = '';
this.opcService.getPGPUrl(tableId).then(url => feature.detailUrl = `${url}/productid-${designation}`);
}
isNote(renderingType: string) {
return renderingType !== 'DEFAULT';
}
}
<div class="content-block" *ngIf="data">
<div class="row">
<div class="col-sm-12 col-md-6 spec-images" *ngIf="data.illustrations && !(data.type==='PDP04C')">
<img *ngFor="let illustration of data.illustrations" [src]="illustration">
</div>
<div [ngClass]="{'col-sm-12 col-md-6': data.illustrations, 'col-md-12 full-row': !data.illustrations}"
*ngIf="!(data.type==='PDP04C')">
<h3 class="h6 pb-4 pdf-title"> {{data.category | uppercase}} </h3>
<ng-container *ngFor="let block of data.tables">
<table class="table">
<caption *ngIf="block.subcategory" class='caption'>{{block.subcategory | uppercase}}</caption>
<ng-container *ngFor="let feat of block.features">
<tr [ngClass]="{'notes-row': isNote(feat.rendering_type)}">
<th *ngIf="!isNote(feat.rendering_type)">
<span [innerHTML]="feat.name" *ngIf="feat.name"></span>
<span [innerHTML]="feat.symbol" *ngIf="feat.symbol && !feat.name"></span>
</th>
<td colspan="3" *ngIf="isNote(feat.rendering_type)">
<div *ngIf="feat.rendering_type === 'PLAIN_NOTES'">
<ng-content *ngTemplateOutlet="value"></ng-content>
</div>
<ul *ngIf="feat.rendering_type === 'UNORDERED_NOTES'" >
<li>
<ng-content *ngTemplateOutlet="value"></ng-content>
</li>
</ul>
<ol *ngIf="feat.rendering_type === 'ORDERED_NOTES'">
<li>
<ng-content *ngTemplateOutlet="value"></ng-content>
</li>
</ol>
</td>
<td *ngIf="feat.name">
<span [innerHTML]="feat.symbol" ></span>
</td>
<td *ngIf="feat.rendering_type === 'DEFAULT'">
<a *ngIf="feat.detailUrl" [routerLink]="feat.detailUrl">
<ng-content *ngTemplateOutlet="value"></ng-content>
</a>
<div *ngIf="!feat.detailUrl">
<ng-content *ngTemplateOutlet="value"></ng-content>
</div>
</td>
<ng-template #value>
<span class="mr-1" *ngIf="feat.data_type === 'Character string' || feat.data_type === 'Logical value'"
[innerHTML]="feat.string_values"></span>
<span class="mr-1" *ngIf="feat.data_type === 'Floating point'" [innerHTML]="feat.real_value"></span>
<span *ngIf="feat.data_type === 'Floating point' && feat.unit"> {{ feat.unit }}</span>
</ng-template>
</tr>
</ng-container>
</table>
</ng-container>
</div>
<div class="col-md-12 appropriates" *ngIf="data.type=='PDP04C'">
<h3 class="h6 pb-4">{{data.category | uppercase}}</h3>
<div class="card-deck">
<ng-container *ngFor="let block of data.entries">
<div class="card">
<img class="card-img-top" [src]="block.url" *ngIf="block.url" crossorigin="anonymous">
<div class="card-body">
<a *ngIf="block.detailUrl" [routerLink]="block.detailUrl">
<div class="card-title" *ngIf="block.display_designation">
<span class="mr-1" *ngIf="block.amount && block.amount > 1">{{block.amount}} x </span>
{{block.display_designation}}
</div>
</a>
<div class="card-title" *ngIf="block.display_designation">
<span class="mr-1" *ngIf="block.amount && block.amount > 1">{{block.amount}} x </span>
{{block.display_designation}}
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
</div>
./content-block.component.scss
@import "src/app/styles/helpers";
.content-block {
padding: calc-rem(30) 0;
caption {
@include font-scale(14, uppercase);
color: $cool-grey;
margin-bottom: calc-rem(20);
caption-side: top;
}
.notes-row {
border-top: none;
td {
padding-top: 0;
text-align: left;
}
}
th {
padding-left: 0;
font-weight: 500;
@include media-breakpoint-up(md) {
width: 50%;
}
}
tr {
border-top: 1px solid $cool-grey;
&:first-child { border-top: 2px solid $cool-grey; }
}
td {
font-family: 'SKF Chevin OT Light';
&:last-child {
text-align: right;
padding-right: 0;
}
ul, ol {
margin-bottom: 0;
}
}
th, td {
color: $cool-grey;
line-height: 1.5;
border-top: none;
}
.spec-images {
display: flex;
flex-direction: column;
justify-content: space-evenly;
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(30);
}
img {
max-height: 100%;
max-width: 100%;
margin-bottom: calc-rem(30);
}
}
.appropriates {
.card {
padding-top: 1.25rem;
margin-bottom: calc-rem(20);
border: none;
@include media-breakpoint-up(sm) {
flex: 0 0 calc(50% - 30px);
}
@include media-breakpoint-up(md) {
flex: 0 0 calc(33% - 30px);
}
@include media-breakpoint-up(lg) {
flex: 0 0 calc(25% - 30px);
}
@include media-breakpoint-up(xl) {
flex: 0 0 calc(16.666% - 30px);
}
&-img-top {
width: unset;
}
&-body {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
&-title {
display: flex;
justify-content: center;
}
}
}
}