Open-ILS/src/eg2/src/app/staff/catalog/result/facets.component.html

   1 <div *ngIf="searchContext.result.facetData">
   2   <h2 class="visually-hidden" i18n>Facets</h2>
   3   <div *ngFor="let facetConf of facetConfig.display">
   4     <div *ngIf="searchContext.result.facetData[facetConf.facetClass]">
   5       <div *ngFor="let name of facetConf.facetOrder">
   6         <div class="row"
   7           *ngIf="searchContext.result.facetData[facetConf.facetClass][name]">
   8           <div class="card mb-2 p-0" [ngClass]="{'list-truncate': this.displayFullFacets.indexOf(facetConf.facetClass+'-'+name) < 0}">
   9             <div class="card-header d-flex align-items-start justify-content-between">
  10               <h3>{{searchContext.result.facetData[facetConf.facetClass][name].cmfLabel}}</h3>
  11               <button type="button" *ngIf="searchContext.result.facetData[facetConf.facetClass][name].valueList.length > 5"
  12                 (click)="facetToggle(name, facetConf.facetClass)" i18n-title
  13                 title="Show {{displayFullFacets.indexOf(facetConf.facetClass+'-'+name) < 0 ? searchContext.result.facetData[facetConf.facetClass][name].valueList.length : 5}}"
  14                 class="btn btn-link p-0" i18n>
  15                 {{displayFullFacets.indexOf(facetConf.facetClass+'-'+name) < 0 ? 'More' : 'Less'}}
  16               </button>
  17             </div>
  18             <ul class="list-group list-group-flush">
  19               <li class="list-group-item"
  20                 [ngClass]="{'facet-selected' :
  21                   facetIsApplied(facetConf.facetClass, name, value.value)}"
  22                 *ngFor="
  23                   let value of searchContext.result.facetData[facetConf.facetClass][name].valueList">
  24                 <div class="row">
  25                   <div class="col-lg-9">
  26                     <a class="card-link"
  27                       routerLink="/staff/catalog/search"
  28                       [queryParams]="getFacetUrlParams(facetConf.facetClass, name, value.value)">
  29                       {{value.value}}
  30                     </a>
  31                   </div>
  32                   <div class="col-lg-3 text-end">{{value.count}}</div>
  33                 </div>
  34               </li>
  35             </ul>
  36           </div>
  37         </div>
  38       </div>
  39     </div>
  40   </div>
  41 </div>