import { Component, OnInit, Input, SimpleChanges, OnChanges } 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';

@Component({
	selector: 'library-search',
	templateUrl: './library-search.component.html',
	styleUrls: ['./library-search.component.scss']
})
export class LibrarySearchComponent implements OnInit, OnChanges {

	@Input() result;

	documents;
	pagination;
	facets = [];
	stats;
	sortOptions;
	sortData;
	searchId: string;

	// Labels
	resultLabel;

	constructor(
		public loadingService: LoadingIndicatorService,
		public labelService: LabelService,
		private idGenerator: IdGeneratorService
	) {}

	ngOnInit() {
		// Get 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.sortOptions = this.result.documentList.sortOptions;

			this.sortData = {
				systems: null,
				sortOptions: this.sortOptions,
			};
		}
	}
}

<div [id]="'result-' + searchId" class="library-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"></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">
                        <div class="col-12 col-sm-6 col-xl-4 media-card" *ngFor="let document of documents">
                            <library-document [document]="document"></library-document>
                        </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>

./library-search.component.scss

@import "src/app/styles/helpers";

.library-search { 
    position: relative;
    background-color: white;
    margin: 50px 0;
    min-height: 100vh;

    .stats-query {
        display: inline-block;
    }

    .toolbelt {
        margin-bottom: calc-rem(20);
    }

    .result-container {
        display: flex;
        justify-content: center;
    }

    .media-card {
        margin-bottom: 30px;
    }

}

Legend

Html element

Component

Html element with directive

File

Implements

Metadata

Index

Properties

Methods

Inputs

Constructor

Inputs

Methods

Properties

result-matching ""

No results matching ""