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

   1 <style>
   2   .facet-selected {
   3     background-color: #DDD;
   4   }
   5   .card {
   6     width: 100%;
   7   }
   8   .list-group-item {padding: .5rem .75rem .5rem .75rem}
   9 </style>
  10 <div *ngIf="searchContext.result.facetData">
  11   <div *ngFor="let facetConf of facetConfig.display">
  12     <div *ngIf="searchContext.result.facetData[facetConf.facetClass]">
  13       <div *ngFor="let name of facetConf.facetOrder">
  14         <div class="row"
  15           *ngIf="searchContext.result.facetData[facetConf.facetClass][name]">
  16           <div class="card mb-2">
  17             <h4 class="card-header">
  18               {{searchContext.result.facetData[facetConf.facetClass][name].cmfLabel}}
  19             </h4>
  20             <ul class="list-group list-group-flush">
  21               <li class="list-group-item"
  22                 [ngClass]="{'facet-selected' :
  23                   facetIsApplied(facetConf.facetClass, name, value.value)}"
  24                 *ngFor="
  25                   let value of searchContext.result.facetData[facetConf.facetClass][name].valueList | slice:0:facetConfig.displayCount">
  26                 <div class="row">
  27                   <div class="col-lg-9">
  28                     <a class="card-link"
  29                       routerLink="/staff/catalog/search"
  30                       [queryParams]="getFacetUrlParams(facetConf.facetClass, name, value.value)">
  31                       {{value.value}}
  32                     </a>
  33                   </div>
  34                   <div class="col-lg-3">{{value.count}}</div>
  35                 </div>
  36               </li>
  37             </ul>
  38           </div>
  39         </div>
  40       </div>
  41     </div>
  42   </div>
  43 </div>