search : add customizable areas into search result page

Adds some areas into the default `record-search` component (used to render a search result) to allow content injection : - top-result - top-facets - bottom-result Co-authored-by: Renaud Michotte <renaud.michotte@gmail.com>
rero · Nov 13, 2022 · bb04fba · bb04fba
1 parent 7dd3454
commit bb04fba
Show file tree

Hide file tree

Showing 3 changed files with 252 additions and 393 deletions.
diff --git a/...cts/rero/ng-core/src/lib/record/search/aggregation/list-filters/list-filters.component.ts b/...cts/rero/ng-core/src/lib/record/search/aggregation/list-filters/list-filters.component.ts
@@ -115,10 +115,9 @@ export class ListFiltersComponent implements OnChanges {
    * @param buckets - Bucket to get the name from.
    */
   getFilterNames(buckets: any) {
-    if (buckets.length === 0) {
+    if (!buckets || buckets.length === 0) {
       return;
     }
-
     buckets.map((bucket: any) => {
       for (const k in bucket) {
         if (bucket[k].buckets) {

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.html b/projects/rero/ng-core/src/lib/record/search/record-search.component.html
@@ -43,16 +43,15 @@ <h5 *ngIf="typesInTabs.length === 1 && showLabel">
     </ng-container>
     <ng-template #results>
       <div class="row align-items-start my-3">
-        <div class="col-sm-3 mb-3 mb-sm-0" *ngIf="showSearchInput">
-          <ng-core-search-input
-            [placeholder]="'search' | translate | ucfirst"
-            [searchText]="q"
-            [displayLabel]="false"
-            (search)="searchByQuery($event)"
-            [focus]="true"
-          >
-          </ng-core-search-input>
-        </div>
+        <ng-core-search-input
+          *ngIf="showSearchInput"
+          class="col-sm-3 mb-3 mb-sm-0"
+          [placeholder]="'search' | translate | ucfirst"
+          [searchText]="q"
+          [displayLabel]="false"
+          (search)="searchByQuery($event)"
+          [focus]="true"
+        ></ng-core-search-input>
         <div *ngIf="resultsText$ | async as resultsText" class="col-6 col-sm-3">
           <strong>{{ resultsText }}</strong>
         </div>
@@ -111,7 +110,7 @@ <h5 *ngIf="typesInTabs.length === 1 && showLabel">
           [searchFilters]="searchFilters"
           >
         </ng-core-list-filters>
-
+        <ng-content select="[top-search-result]"></ng-content>
         <div *ngIf="(aggregations && aggregations.length) || searchFields.length > 0  || searchFilters.length > 0"
             class="col-sm-12 col-md-5 col-lg-3 order-2 order-md-1">
           <div *ngIf="searchFields.length > 0 && q"
@@ -191,8 +190,10 @@ <h5 *ngIf="typesInTabs.length === 1 && showLabel">
             </div>
           </ng-container>
           <ng-container *ngIf="!showEmptySearchMessage || q">
+            <ng-content select="[top-facets]"></ng-content>
             <div *ngFor="let item of aggregations">
               <ng-core-record-search-aggregation
+                *ngIf="!aggregationsToHide.includes(item.key)"
                 [aggregation]="item"
                 [aggregationsFilters]="aggregationsFilters"
                 (aggregationClicked)="loadAggregationBuckets($event)"
@@ -206,6 +207,7 @@ <h5 *ngIf="typesInTabs.length === 1 && showLabel">
             <i class="fa fa-info-circle"></i>
             {{ 'Enter a query to get results.' | translate }}
           </div>
+          <ng-content select="[top-result]"></ng-content>
           <ul class="list-group list-group-flush">
             <li class="list-group-item px-0 py-4" *ngFor="let record of records">
               <ng-core-record-search-result
@@ -237,9 +239,11 @@ <h5 *ngIf="typesInTabs.length === 1 && showLabel">
             lastText="&raquo;"
           >
           </pagination>
+          <ng-content select="[footer-result]"></ng-content>
           <ng-content></ng-content>
         </div>
       </div>
+      <ng-content select="[footer-search-result]"></ng-content>
     </ng-template>
   </div>
 </ng-template>