File
Implements
Metadata
| selector |
all-search |
| styleUrls |
./all-search.component.scss |
| templateUrl |
./all-search.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
Public
selectTab
|
selectTab(tab)
|
|
|
Switches to the selected tab and perform a search on it.
|
|
facets
|
Type : []
|
Default value : []
|
|
|
|
noResult
|
Default value : false
|
|
|
|
search
|
Type : SearchService
|
|
|
|
Public
searchFactory
|
Type : SearchFactory
|
|
|
|
topProductsLabel
|
Type : string
|
|
|
|
vsmResultsTextIntro
|
Type : string
|
|
|
|
vsmResultsTextRegionEuropean
|
Type : string
|
|
|
import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
import { SearchService, SearchFactory } from 'skf-search-angular-service';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { AppConfig } from '../../../app.config';
@Component ({
selector: 'all-search',
templateUrl: './all-search.component.html',
styleUrls: ['./all-search.component.scss']
})
export class AllSearchComponent implements OnInit, OnChanges {
@Input() result;
pagination;
facets = [];
stats;
noResult = false;
searchId: string;
vsmDocumentsList;
productsDocuments;
libraryDocuments;
newsDocuments;
restDocuments;
alternativeProducts;
keymatchDocuments;
search: SearchService;
// Labels;
topProductsLabel: string;
topLibraryLabel: string;
topNewsLabel: string;
seeMoreLabel: string;
vsmResultsTextIntro: string;
vsmResultsTextRegionEuropean:string;
constructor(
public searchFactory: SearchFactory,
public loadingService: LoadingIndicatorService,
private labelService: LabelService,
private idGenerator: IdGeneratorService
) {
this.search = this.searchFactory.get(`site-search-v2-${AppConfig.settings.searchEnvironment.name}`);
this.searchId = this.idGenerator.getId(); // Id for pagination to scroll to top of component
}
ngOnInit() {
this.labelService.getLabel('topResultsTitleProducts').then(res => this.topProductsLabel = res);
this.labelService.getLabel('topResultsTitleLibrary').then(res => this.topLibraryLabel = res);
this.labelService.getLabel('topResultsTitleNews').then(res => this.topNewsLabel = res);
this.labelService.getLabel('seeMoreAllTab').then(res => this.seeMoreLabel = res);
this.labelService.getLabel('vsmResultsTextIntro').then(res => this.vsmResultsTextIntro = res);
this.labelService.getLabel('vsmResultsTextRegionEuropean').then(res => this.vsmResultsTextRegionEuropean = res);
}
ngOnChanges(changes: SimpleChanges) {
// Update search result values
if (changes) {
this.vsmDocumentsList = this.result.vsmDocumentsList ? this.result.vsmDocumentsList.documents : [];
this.productsDocuments = this.result.productsDocumentList ? this.result.productsDocumentList.documents : [];
this.libraryDocuments = this.result.libraryDocumentList ? this.result.libraryDocumentList.documents : [];
this.newsDocuments = this.result.newsDocumentList ? this.result.newsDocumentList.documents : [];
this.alternativeProducts = this.result.alternativeProductsDocumentList ? this.result.alternativeProductsDocumentList.documents : [];
this.keymatchDocuments = this.result.quicklinksDocumentList ? this.result.quicklinksDocumentList.documents : []; // DEV
this.restDocuments = this.result.mainDocumentList ? this.result.mainDocumentList.documents : [];
this.pagination = this.result.mainDocumentList ? this.result.mainDocumentList.pagination : [];
this.stats = this.result.stats;
// If no documents in any of the tabs, show no result view
if (this.vsmDocumentsList.length === 0 &&
this.productsDocuments.length === 0 &&
this.libraryDocuments.length === 0 &&
this.newsDocuments.length === 0 &&
this.restDocuments.length === 0 &&
this.alternativeProducts.length === 0
// this.keymatchDocuments.length === 0
) { this.noResult = true; }
else { this.noResult = false; }
}
}
/** Switches to the selected tab and perform a search on it. */
public selectTab(tab) {
const searcher = this.search.searchers.find(x => x.name === tab);
this.loadingService.show();
searcher.select();
}
}
<div class="container vsm-result" *ngIf="vsmDocumentsList.length">
<div><i class="fas fa-info-circle"></i></div>
<div class="result">{{vsmDocumentsList[0].title}}<div> {{vsmResultsTextIntro}}
<a target="_blank" [href]="vsmDocumentsList[0].vsm_url"
title="{{vsmDocumentsList[0].title}}">{{vsmResultsTextRegionEuropean}}</a></div></div>
</div>
<div [id]="'result-' + searchId" class="all-results">
<div class="container" *ngIf="!noResult">
<div class="row">
<div class="col-md-12">
<div *ngFor="let product of alternativeProducts">
<alternative-document [product]="product"></alternative-document>
</div>
<div *ngFor="let keymatch of keymatchDocuments">
<keymatch-document [keymatch]="keymatch"></keymatch-document>
</div>
<div *ngIf="productsDocuments?.length > 0">
<div class="tab-result">
<h2>{{ topProductsLabel }}</h2>
<div class="see-more" (click)="selectTab('products')">
<span class="more-text">{{ seeMoreLabel | uppercase }}</span>
<span><i class="fas fa-chevron-right"></i></span>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-xl-3 doc-card"
*ngFor="let document of productsDocuments">
<product-document *ngIf="document?.source === 'pim'" [document]="document">
</product-document>
<tridion-document *ngIf="document?.source === 'tridion'" [document]="document">
</tridion-document>
</div>
</div>
<hr>
</div>
<div *ngIf="libraryDocuments?.length > 0">
<div class="tab-result">
<h2>{{ topLibraryLabel }}</h2>
<div class="see-more" (click)="selectTab('library')">
<span class="more-text">{{ seeMoreLabel | uppercase }}</span>
<span><i class="fas fa-chevron-right"></i></span>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-xl-3 doc-card"
*ngFor="let document of libraryDocuments">
<library-document [document]="document"></library-document>
</div>
</div>
<hr>
</div>
<div *ngIf="newsDocuments?.length > 0">
<div class="tab-result">
<h2>{{ topNewsLabel }}</h2>
<div class="see-more" (click)="selectTab('news')">
<span class="more-text">{{ seeMoreLabel | uppercase }}</span>
<span><i class="fas fa-chevron-right"></i></span>
</div>
</div>
<div class="row">
<div class="col-12 news-doc" *ngFor="let document of newsDocuments">
<div news-document [newsDocument]="document" [type]="'LIST'" [theme]="'dark'"></div>
</div>
</div>
<hr>
</div>
<div *ngIf="restDocuments?.length > 0">
<div class="row no-gutters">
<div class="col-12" *ngFor="let document of restDocuments">
<other-document [document]="document"></other-document>
</div>
</div>
<app-pagination *ngIf="pagination" [pagination]="pagination" [id]="searchId"></app-pagination>
</div>
</div>
</div>
</div>
<no-search-result *ngIf="noResult"></no-search-result>
</div>
@import "src/app/styles/helpers";
.vsm-result {
margin-top: 1rem;
display: flex;
justify-content: flex-start;
i {
margin: 2rem 1rem 0 0;
}
.result{
font-weight: bold;
}
}
.all-results {
position: relative;
background-color: white;
margin: calc-rem(50) 0;
min-height: 100vh;
.tab-result {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: calc-rem(20);
.see-more {
cursor: pointer;
.more-text {
margin-right: calc-rem(5);
}
}
}
.doc-card {
margin-bottom: calc-rem(20);
}
hr {
margin: calc-rem(40) 0;
}
.news-doc {
margin-bottom: calc-rem(30);
}
}
Legend
Html element with directive