facets: link to expand results

* Adds a link to see more or less results on the facet. * Closes #87 Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Jul 8, 2019 · b338685 · b338685
1 parent af90732
commit b338685
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 29 deletions.
diff --git a/rero_ils/config.py b/rero_ils/config.py
@@ -718,18 +718,48 @@ def _(x):
     },
 }
 
+# Number of results in facet
+RERO_ILS_AGGREGATION_SIZE = 50
+
 RECORDS_REST_FACETS = {
     'documents': dict(
         aggs=dict(
-            document_type=dict(terms=dict(field='type')),
-            library=dict(terms=dict(field='items.library_pid')),
-            author__en=dict(terms=dict(field='facet_authors_en')),
-            author__fr=dict(terms=dict(field='facet_authors_fr')),
-            author__de=dict(terms=dict(field='facet_authors_de')),
-            author__it=dict(terms=dict(field='facet_authors_it')),
-            language=dict(terms=dict(field='languages.language')),
-            subject=dict(terms=dict(field='facet_subjects')),
-            status=dict(terms=dict(field='items.status'))
+            document_type=dict(terms=dict(
+                field='type',
+                size=RERO_ILS_AGGREGATION_SIZE
+            )),
+            library=dict(terms=dict(
+                field='items.library_pid',
+                size=RERO_ILS_AGGREGATION_SIZE
+            )),
+            author__en=dict(terms=dict(
+                field='facet_authors_en',
+                size=RERO_ILS_AGGREGATION_SIZE
+            )),
+            author__fr=dict(terms=dict(
+                field='facet_authors_fr',
+                size=RERO_ILS_AGGREGATION_SIZE
+            )),
+            author__de=dict(terms=dict(
+                field='facet_authors_de',
+                size=RERO_ILS_AGGREGATION_SIZE
+            )),
+            author__it=dict(terms=dict(
+                field='facet_authors_it',
+                size=RERO_ILS_AGGREGATION_SIZE
+            )),
+            language=dict(terms=dict(
+                field='languages.language',
+                size=RERO_ILS_AGGREGATION_SIZE
+            )),
+            subject=dict(terms=dict(
+                field='facet_subjects',
+                size=RERO_ILS_AGGREGATION_SIZE
+            )),
+            status=dict(terms=dict(
+                field='items.status',
+                size=RERO_ILS_AGGREGATION_SIZE
+            ))
         ),
         filters={
             _('document_type'): terms_filter('type'),

diff --git a/ui/src/app/records/search/search.component.html b/ui/src/app/records/search/search.component.html
@@ -28,21 +28,41 @@ <h6>
 
   <aside *ngIf="aggregations && aggregations.length" class="col-md-4 col-lg-3 order-12 order-md-0">
     <div *ngFor="let item of aggregations">
-      <section class="mb-2" *ngIf="item.buckets.length" >
+      <section class="mb-2" *ngIf="item.buckets.length">
         <a class="text-muted" [ngClass]="{'collapsed': !startOpen(item.title)}"
            data-toggle="collapse" href="#{{'agg_'+item.title }}"
            aria-expanded="false" aria-controls="libraryData">
           <h6 class="mb-0 d-inline border-bottom pb-1 font-weight-bold"><i class="fa fa-caret-down" aria-hidden="true"></i> {{ item.name | translate }}</h6>
         </a>
-        <ul class="list-unstyled collapse" [ngClass]="{'show': startOpen(item.title)}" id="{{'agg_'+item.title }}">
-          <li class="form-check" *ngFor="let bucket of item.buckets">
-            <input class="form-check-input" type="checkbox" [checked]="isFiltered(item.title, bucket.key)" (click)="aggFilter(item.title, bucket.key) ">
-            <label class="form-check-label">
-              <span *ngIf="bucket.name">{{ bucket.name | translate }}</span>
-              <span *ngIf="!bucket.name">{{ bucket.key | translate }}</span> ({{ bucket.doc_count }})
-            </label>
-          </li>
-        </ul>
+        <div class="collapse" [ngClass]="{'show': startOpen(item.title)}" id="{{'agg_'+item.title }}">
+          <div *ngFor="let buckets of item.buckets; index as i">
+            <ul class="list-unstyled mb-0 ml-4" [ngClass]="{'collapse': i > 0}" id="{{'agg_'+i+'_'+item.title }}">
+              <li *ngFor="let bucket of buckets">
+                <input class="form-check-input" type="checkbox" [checked]="isFiltered(item.title, bucket.key)" (click)="aggFilter(item.title, bucket.key) ">
+                <label class="form-check-label">
+                  <span *ngIf="bucket.name">{{ bucket.name | translate }}</span>
+                  <span *ngIf="!bucket.name">{{ bucket.key | translate }}</span> ({{ bucket.doc_count }})
+                </label>
+              </li>
+            </ul>
+            <a
+              *ngIf="i > 0"
+              href="#{{'agg_1_'+item.title }}"
+              data-toggle="collapse"
+              (click)="setStateOfAgg('agg_1_'+item.title)"
+              [ngClass]="{'d-none': stateOfAgg('agg_1_'+item.title)}"
+              translate
+            >more…</a>
+            <a
+              *ngIf="i > 0"
+              href="#{{'agg_1_'+item.title }}"
+              data-toggle="collapse"
+              (click)="setStateOfAgg('agg_1_'+item.title)"
+              [ngClass]="{'d-none': !stateOfAgg('agg_1_'+item.title)}"
+              translate
+            >less…</a>
+          </div>
+        </div>
       </section>
     </div>
   </aside>

diff --git a/ui/src/app/records/search/search.component.ts b/ui/src/app/records/search/search.component.ts
@@ -125,6 +125,9 @@ export class SearchComponent implements OnInit {
   public language = null;
   public permissions = null;
   onInitDone = false;
+  public bucketSplitSize = 10;
+  private stateAgg = [];
+
   constructor(
     protected recordsService: RecordsService,
     protected route: ActivatedRoute,
@@ -186,6 +189,14 @@ export class SearchComponent implements OnInit {
           const agg_value  = data.aggregations[agg];
           agg_value.title = agg;
           agg_value.name = agg;
+          const agg_values = [];
+          if (agg_value.buckets.length > this.bucketSplitSize) {
+            agg_values.push(agg_value.buckets.slice(0, this.bucketSplitSize));
+            agg_values.push(agg_value.buckets.slice(this.bucketSplitSize));
+          } else {
+            agg_values.push(agg_value.buckets);
+          }
+          agg_value.buckets = agg_values;
           const agg_split = agg.split('__');
           if (agg_split.length === 2) {
             if (this.language === agg_split[1]) {
@@ -288,4 +299,16 @@ export class SearchComponent implements OnInit {
     }
     return true;
   }
+
+  setStateOfAgg(name: string) {
+    if (!this.stateAgg.includes(name)) {
+      this.stateAgg.push(name);
+    } else {
+      this.stateAgg.splice(this.stateAgg.indexOf(name), 1);
+    }
+  }
+
+  stateOfAgg(name: string) {
+    return this.stateAgg.includes(name);
+  }
 }
diff --git a/ui/src/assets/i18n/de.json b/ui/src/assets/i18n/de.json
@@ -243,5 +243,7 @@
   "Documents": "Documents",
   "Persons": "Persons",
   "results": "Resultate",
-  "No result found.": "Keine Resultate gefunden"
-}
+  "No result found.": "Keine Resultate gefunden",
+  "more…": "Weiteres…",
+  "less…": "Weniger…"
+}
diff --git a/ui/src/assets/i18n/en.json b/ui/src/assets/i18n/en.json
@@ -243,5 +243,7 @@
   "Documents": "Documents",
   "Persons": "Persons",
   "results": "results",
-  "No result found.": "No result found."
-}
+  "No result found.": "No result found.",
+  "more…": "more…",
+  "less…": "less…"
+}
diff --git a/ui/src/assets/i18n/en_US.json b/ui/src/assets/i18n/en_US.json
@@ -243,5 +243,7 @@
   "Documents": "Documents",
   "Persons": "Persons",
   "results": "results",
-  "No result found.": "No result found."
-}
+  "No result found.": "No result found.",
+  "more…": "more…",
+  "less…": "less…"
+}
diff --git a/ui/src/assets/i18n/fr.json b/ui/src/assets/i18n/fr.json
@@ -243,5 +243,7 @@
   "Documents": "Documents",
   "Persons": "Personnes",
   "results": "résultats",
-  "No result found.": "Aucun résultat n'a été trouvé."
-}
+  "No result found.": "Aucun résultat n'a été trouvé.",
+  "more…": "plus…",
+  "less…": "moins…"
+}
diff --git a/ui/src/assets/i18n/it.json b/ui/src/assets/i18n/it.json
@@ -243,5 +243,7 @@
   "Documents": "Documenti",
   "Persons": "Persons",
   "results": "risultati",
-  "No result found.": "Nessun risultato trovato."
-}
+  "No result found.": "Nessun risultato trovato.",
+  "more…": "di più…",
+  "less…": "di meno…"
+}