File
Implements
Metadata
| selector |
product-search |
| styleUrls |
./product-search.component.scss |
| templateUrl |
./product-search.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
Public
setView
|
setView(view)
|
|
|
|
|
|
facets
|
Type : []
|
Default value : []
|
|
|
|
viewMode
|
Type : "GRID" | "TABLE"
|
Default value : 'GRID'
|
|
|
import { Component, OnInit, Input } from '@angular/core';
import { SimpleChanges, OnChanges } from '@angular/core/src/metadata/lifecycle_hooks';
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';
@Component({
selector: 'product-search',
templateUrl: './product-search.component.html',
styleUrls: ['./product-search.component.scss']
})
export class ProductSearchComponent implements OnInit, OnChanges {
@Input() result;
documents;
pagination;
facets = [];
stats;
tableData;
sortOptions;
systems;
viewMode: 'GRID' | 'TABLE' = 'GRID'; // GRID or TABLE view
sortData;
searchId: string;
tableAvailable: boolean;
tableId: string;
// Labels
resultLabel;
constructor(
public loadingService: LoadingIndicatorService,
private labelService: LabelService,
private idGenerator: IdGeneratorService
) {}
ngOnInit() {
this.labelService.getLabel('results').then(res => this.resultLabel = res );
this.searchId = this.idGenerator.getId(); // Id for pagination to scroll to top of component
}
ngOnChanges(changes: SimpleChanges) {
// Update search result values
if (changes && Object.keys(this.result).length > 0) {
this.documents = this.result.documentList.documents || [];
this.pagination = this.result.documentList.pagination;
this.facets = this.result.facets;
this.stats = this.result.stats;
this.sortOptions = this.result.documentList.sortOptions;
this.systems = this.result.systems;
// Only show table on lowest level, table_header and table_values field are only populated on lowest level.
if (this.documents.length > 0 && this.documents[0].table_values && this.documents[0].table_values.length > 0) {
this.tableAvailable = true;
this.tableId = this.documents[0].structure_group_id;
} else {
this.tableAvailable = false;
}
this.sortData = {
systems: this.systems,
sortOptions: this.sortOptions,
tableAvailable: this.tableAvailable
};
}
}
public setView(view) {
this.viewMode = view;
}
}
<div [id]="'result-' + searchId" class="search-results">
<div class="container">
<div class="row">
<div class="col-md-12 toolbelt">
<div class="row">
<div class="col-lg-3">
<h2 class="stats-query" *ngIf="stats">{{stats.totalHits}} {{ resultLabel }} </h2>
</div>
<div class="col-md-12 col-lg-9 d-flex align-items-center">
<sort-options *ngIf="documents?.length > 0" [data]="sortData" [viewOptions]="['GRID', 'TABLE']" (view)="setView($event)"></sort-options>
</div>
</div>
</div>
<div class="col-md-3 facet-list" *ngIf="facets?.length > 0">
<app-facet-list [facets]="facets" [stats]="stats"></app-facet-list>
</div>
<div class="col-md-12 col-lg-9 result-grid">
<ng-container *ngIf="documents?.length > 0">
<div class="row">
<ng-container *ngIf="viewMode == 'GRID'">
<div class="col-12 col-sm-6 col-xl-4 product-card" *ngFor="let document of documents">
<product-document *ngIf="document?.source === 'pim'" [document]="document"></product-document>
<tridion-document *ngIf="document?.source === 'tridion'" [document]="document"></tridion-document>
</div>
</ng-container>
<div class="col-12" *ngIf="viewMode === 'TABLE' && tableAvailable">
<product-table [documentList]="result.documentList" [tableId]="tableId"></product-table>
</div>
</div>
<app-pagination *ngIf="pagination" [pagination]="pagination" [id]="searchId"></app-pagination>
</ng-container>
<no-search-result *ngIf="documents?.length === 0"></no-search-result>
</div>
</div>
</div>
</div>
@import "src/app/styles/helpers";
//@import "~bootstrap/scss/dropdown";
.search-results {
position: relative;
background-color: white;
margin: 50px 0;
min-height: 100vh;
.toolbelt {
margin-bottom: calc-rem(35);
@include media-breakpoint-up(md) {
margin-bottom: calc-rem(25);
}
.view-mode {
display: flex;
margin-right: 20px;
color: #495A63;
.view-button {
position: relative;
display: inline-block;
border: 1px solid #e2e2e2;
background-color: #f8f8f8;
color: #808080;
cursor: pointer;
}
.selected {
background-color: white;
color: $blue;
}
}
.toolbelt-options {
display: flex;
.filter-toggle {
cursor: pointer;
i {
vertical-align: middle;
color: $blue;
}
.filter-toggler {
margin-right: calc-rem(15);
}
@media (min-width: 992px) {
display: none;
}
}
.systems-radio {
display: flex;
align-items: center;
min-height: 33px;
user-select: none;
margin-right: 10px;
.radio-inline {
margin-right: 10px;
display: inline-block;
margin-bottom: 0;
cursor: pointer;
user-select: none;
&:hover {
color: $dark-blue;
}
&.active {
color: $blue;
}
i {
@include font-size(17);
margin-right: 5px;
}
}
}
.sort-select {
.sort-toggle {
cursor: pointer;
.sort-mode { font-weight: 600; }
}
.dropdown-menu {
padding: 0;
background-color: $cool-grey;
.dropdown-item {
padding: 0.5rem 1.5rem;
@include font-size(14);
color: white;
&:hover {
background-color: $cool-grey;
color: $light-blue;
cursor: pointer;
}
}
}
}
}
}
.product-card {
margin-bottom: 30px;
}
}
Legend
Html element with directive