File
Implements
Metadata
| selector |
news-search |
| styleUrls |
./news-search.component.scss |
| templateUrl |
./news-search.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
Public
setView
|
setView(view)
|
|
|
|
|
|
facets
|
Type : []
|
Default value : []
|
|
|
|
viewMode
|
Type : "GRID" | "LIST"
|
Default value : 'LIST'
|
|
|
import { Component, OnInit, Input, SimpleChanges, OnChanges, Inject } from '@angular/core';
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 { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { DOCUMENT } from '@angular/common';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
@Component({
selector: 'news-search',
templateUrl: './news-search.component.html',
styleUrls: ['./news-search.component.scss']
})
export class NewsSearchComponent implements OnInit, OnChanges {
@Input() result;
documents;
pagination;
facets = [];
stats;
systems;
sortOptions;
sortData;
searchId: string;
viewMode: 'GRID' | 'LIST' = 'LIST';
// Labels
resultLabel;
constructor(
public loadingService: LoadingIndicatorService,
private labelService: LabelService,
private idGenerator: IdGeneratorService
) {}
ngOnInit() {
// Fetch labels
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.systems = this.result.systems;
this.sortOptions = this.result.documentList.sortOptions;
this.sortData = {
systems: null,
sortOptions: this.sortOptions,
};
}
}
public setView(view) {
this.viewMode = view;
}
}
<div [id]="'result-' + searchId" class="news-search" >
<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]="['LIST', 'GRID']" (view)="setView($event)"></sort-options>
</div>
</div>
</div>
<div class="col-md-3 facet-list" *ngIf="facets?.length > 0">
<app-facet-list [facets]="facets"></app-facet-list>
</div>
<div class="col-md-12 col-lg-9 result-list">
<ng-container *ngIf="documents?.length > 0">
<div class="row">
<div class="document" [ngClass]="{'col-md-12': viewMode === 'LIST', 'col-12 col-sm-6 col-xl-4': viewMode === 'GRID'}"
*ngFor="let document of documents">
<div news-document [newsDocument]="document" [type]="viewMode" [theme]="'dark'"></div>
</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";
.news-search {
position: relative;
background-color: white;
margin: calc-rem(50) 0;
min-height: 100vh;
@include media-breakpoint-up(lg) {
.facet-list {
flex: 0 0 25%;
max-width: 25%;
}
.result-list {
flex: 0 0 75%;
max-width: 75%;
}
}
.toolbelt {
margin-bottom: calc-rem(20);
}
.result-list {
.document {
margin-bottom: calc-rem(30);
}
}
}
Legend
Html element with directive