File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
checkbox-facet |
| styleUrls |
./facet-checkbox.component.scss |
| templateUrl |
./facet-checkbox.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
Public
compare
|
compare(a, b)
|
|
|
|
Returns : 1 | -1 | 0
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Public
search
|
search(index)
|
|
|
Performing a search on selected filter
|
|
Public
trackFilters
|
trackFilters(index, filter)
|
|
|
Parameters :
| Name |
Optional |
| index |
No
|
| filter |
No
|
|
|
displayedFilters
|
Type : []
|
Default value : []
|
|
|
|
facetId
|
Default value : this.idGenerator.getId()
|
|
|
|
resolvedFilters
|
Type : []
|
Default value : []
|
|
|
|
showMoreButton
|
Default value : true
|
|
|
import { Component, OnInit, Input, ChangeDetectionStrategy, SimpleChanges, ChangeDetectorRef, OnChanges, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';
import { TcmResolverService } from 'src/app/core/services/tcmResolver.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
@Component ({
selector: 'checkbox-facet',
templateUrl: './facet-checkbox.component.html',
styleUrls: ['./facet-checkbox.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CheckboxFacetComponent implements OnInit, OnChanges, OnDestroy {
@Input() facet;
facetId = this.idGenerator.getId(); // Id for the accordion
showMoreButton = true;
displayedFilters = [];
resolvedFilters = [];
resolvedIds;
subscription: any;
// Labels
showMoreLabel: string;
showLessLabel: string;
facetNameLabel: string;
constructor(
public loadingService: LoadingIndicatorService,
public changeRef: ChangeDetectorRef,
public activatedRoute: ActivatedRoute,
private labelService: LabelService,
private tcmResolver: TcmResolverService,
private idGenerator: IdGeneratorService
) { }
ngOnInit() {
this.labelService.getLabel('show_more').then(res => this.showMoreLabel = res);
this.labelService.getLabel('show_less').then(res => this.showLessLabel = res);
this.labelService.getLabel(this.facet.displayName).then(res => {
this.facetNameLabel = res;
this.changeRef.markForCheck();
});
}
ngOnChanges (changes: SimpleChanges): void {
if (changes) {
// Translate displayName of filters if they are tcm-ids.
const tcmIds = [];
this.facet.filters.forEach(filter => {
const isTcm = filter.displayName.match(/\d+-\d+/);
if (isTcm) { tcmIds.push(isTcm.input); }
});
// If tcm-ids were found in filter names, get their real names from tcmResolver
if (tcmIds.length > 0 ) {
const resolvedIds = this.tcmResolver.resolveTcmIds(tcmIds);
this.subscription = resolvedIds.subscribe(ids => {
this.resolvedIds = ids;
this.facet.filters.forEach(filterObj => {
if (filterObj.displayName in this.resolvedIds) { filterObj.resolvedName = this.resolvedIds[filterObj.displayName]; }
else { filterObj.resolvedName = filterObj.displayName; }
});
// Sort list of resolved names alphabetically
this.facet.filters.sort(this.compare.bind(this));
this.displayedFilters = this.facet.filters;
this.changeRef.detectChanges();
});
} else { // If no tcm-ids were found, use normal input values
this.displayedFilters = this.facet.filters;
}
}
}
ngOnDestroy(): void {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
public compare(a, b) {
if (a.resolvedName.toLowerCase() < b.resolvedName.toLowerCase()) { return -1; }
else if ( b.resolvedName.toLowerCase() < a.resolvedName.toLowerCase()) { return 1; }
else { return 0; }
}
/** Performing a search on selected filter */
public search(index) {
this.loadingService.show();
this.displayedFilters[index].select();
}
public trackFilters(index, filter) {
return filter ? filter.displayName : {};
}
}
<div class="accordion facet" [id]="'checkbox-facet' + facetId">
<div class="card">
<div class="card-header" [id]="facetNameLabel">
<a class="toggler" data-toggle="collapse" [href]="'#checkbox-' + facetId" role="button" aria-expanded="true"
[attr.aria-controls]="'checkbox-' + facetId">
<span>{{facetNameLabel | uppercase}}</span>
<i class="closed icon-chevronUp"></i>
<i class="open icon-chevronDown"></i>
</a>
</div>
<div class="collapse show" [id]="'checkbox-' + facetId" [attr.aria-labelledby]="facetNameLabel"
[attr.data-parent]="'#checkbox-facet' + facetId">
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"
*ngFor="let filter of displayedFilters; let i=index; trackBy: trackFilters">
<label class="filter-input" [for]="'facet-' + facetId + '-' + filter.displayName + '-' + i" (click)="search(i)">
<input class="custom-control-input" type="checkbox" value=""
[id]="'facet-' + facetId + '-' + filter.displayName + '-' + i" [checked]="filter.selected">
<i class="far fa-check-square checkbox"
*ngIf="filter.selected && facet.selectionType != 'SINGLE'"></i>
<i class="far fa-square checkbox"
*ngIf="!filter.selected && facet.selectionType != 'SINGLE'"></i>
<i class="far fa-circle checkbox"
*ngIf="!filter.selected && facet.selectionType == 'SINGLE'"></i>
<i class="far fa-check-circle checkbox"
*ngIf="filter.selected && facet.selectionType == 'SINGLE'"></i>
{{filter.resolvedName || filter.displayName}}
</label>
<span class="badge badge-pill filter-number">{{filter.count}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
@import "src/app/styles/helpers";
.facet {
margin-bottom: calc-rem(2);
color: white;
background-color: $cool-grey;
.card {
background-color: inherit;
border: none;
&-header {
border: none;
background: transparent;
padding: calc-rem(20);
.toggler {
display: flex;
justify-content: space-between;
align-items: center;
color: $light-blue;
@include font-scale(14, uppercase);
letter-spacing: calc-rem(2);
&:hover { text-decoration: none; }
i { @include font-size(8); }
&[aria-expanded=true] .open {
display: none;
}
&[aria-expanded=false] .closed {
display: none;
}
}
}
&-body {
padding-top: 0;
.list-group {
&-item {
background-color: transparent;
display: flex;
justify-content: space-between;
@include font-size(16);
padding: calc-rem(10) 0;
align-items: center;
border: none !important;
i {
margin-top: 0.3rem;
margin-right: calc-rem(10);
}
.filter-input {
display: flex;
flex-grow: 1;
align-items: center;
padding-right: calc-rem(10);
margin: 0;
color: white;
cursor: pointer;
&:hover {
color: $light-blue;
}
}
.filter-number {
@include font-size(14);
text-align: right;
margin-bottom: 0;
padding: 0;
font-weight: 500;
color: $light-blue;
}
}
}
}
}
}
Legend
Html element with directive