From 211b0f5ac577a3064715725b1b80c1468dccbf40 Mon Sep 17 00:00:00 2001
From: Francois Prunayre <fx.prunayre@gmail.com>
Date: Fri, 6 Dec 2024 09:43:19 +0100
Subject: [PATCH] Facet / Add meta property to customize label.

Add also documentation on how to configure labels when the key used for
the facet is not known.
---
 .../configuring-faceted-search.md               | 17 +++++++++++++++++
 .../elasticsearch/directives/FacetDirective.js  | 17 ++++++++++++++++-
 .../directives/partials/facets.html             |  2 +-
 .../main/resources/catalog/js/CatController.js  |  6 +++++-
 .../catalog/views/default/templates/home.html   |  4 ++--
 5 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/docs/manual/docs/customizing-application/configuring-faceted-search.md b/docs/manual/docs/customizing-application/configuring-faceted-search.md
index 292739175bc..15a35e166ec 100644
--- a/docs/manual/docs/customizing-application/configuring-faceted-search.md
+++ b/docs/manual/docs/customizing-application/configuring-faceted-search.md
@@ -338,6 +338,23 @@ When using a generic field like `tag.default` and including only a subset of key
 },
 ```
 
+To translate the label `IDP_TOPICS`, 2 options:
+
+* Use the translation API to add your custom translation in the database for the facet key `facet-IDP_TOPICS` (see the Admin console --> Settings --> Languages).
+* Or declare a meta property `labels` in the facet configuration:
+
+``` js
+"IDP_TOPICS": {
+  "terms": {
+    ...
+  "meta": {
+      "labels": {
+        "eng": "IDP topics",
+        "fre": "Thèmes IDP"
+      },
+```
+
+
 ## Decorate aggregations {#configuring-facet-decorator}
 
 All aggregations can be decorated by an icon or an image in the home page or in other pages. The decorator is configured in the `meta` properties of the facet:
diff --git a/web-ui/src/main/resources/catalog/components/elasticsearch/directives/FacetDirective.js b/web-ui/src/main/resources/catalog/components/elasticsearch/directives/FacetDirective.js
index 1f35bc45010..923e0bea582 100644
--- a/web-ui/src/main/resources/catalog/components/elasticsearch/directives/FacetDirective.js
+++ b/web-ui/src/main/resources/catalog/components/elasticsearch/directives/FacetDirective.js
@@ -187,6 +187,19 @@
     }
   ]);
 
+  module.service("gnFacetMetaLabel", [
+    "$translate",
+    function ($translate) {
+      this.getFacetLabel = function (facet) {
+        if (!facet || !facet.meta || !facet.meta.labels) {
+          return null;
+        }
+        var currentLang = $translate.use();
+        return facet.meta.labels[currentLang] || null;
+      };
+    }
+  ]);
+
   module.filter("facetTooltip", [
     "$translate",
     "$filter",
@@ -266,7 +279,8 @@
   module.directive("esFacets", [
     "gnFacetSorter",
     "gnSearchSettings",
-    function (gnFacetSorter, gnSearchSettings) {
+    "gnFacetMetaLabel",
+    function (gnFacetSorter, gnSearchSettings, gnFacetMetaLabel) {
       return {
         restrict: "A",
         controllerAs: "ctrl",
@@ -291,6 +305,7 @@
           // Directive tab field property
           scope.isTabMode = scope.ctrl.tabField !== undefined;
           scope.facetSorter = gnFacetSorter.sortByTranslation;
+          scope.getFacetLabel = gnFacetMetaLabel.getFacetLabel;
         }
       };
     }
diff --git a/web-ui/src/main/resources/catalog/components/elasticsearch/directives/partials/facets.html b/web-ui/src/main/resources/catalog/components/elasticsearch/directives/partials/facets.html
index aa7645dd73d..79f7cbfc23d 100644
--- a/web-ui/src/main/resources/catalog/components/elasticsearch/directives/partials/facets.html
+++ b/web-ui/src/main/resources/catalog/components/elasticsearch/directives/partials/facets.html
@@ -54,7 +54,7 @@
         gn-collapsible="::ctrl.fLvlCollapse[facet.key]"
       >
         <span class="flex-shrink text-ellipsis"
-          >{{('facet-' + facet.key) | facetKeyTranslator}}</span
+          >{{getFacetLabel(facet) || (('facet-' + facet.key) | facetKeyTranslator)}}</span
         >
         <span
           class="fa fa-fw"
diff --git a/web-ui/src/main/resources/catalog/js/CatController.js b/web-ui/src/main/resources/catalog/js/CatController.js
index 65b8d949d76..37b471c313f 100644
--- a/web-ui/src/main/resources/catalog/js/CatController.js
+++ b/web-ui/src/main/resources/catalog/js/CatController.js
@@ -1608,6 +1608,7 @@
     "gnExternalViewer",
     "gnAlertService",
     "gnESFacet",
+    "gnFacetMetaLabel",
     function (
       $scope,
       $http,
@@ -1628,7 +1629,8 @@
       $cookies,
       gnExternalViewer,
       gnAlertService,
-      gnESFacet
+      gnESFacet,
+      gnFacetMetaLabel
     ) {
       $scope.version = "0.0.1";
       var defaultNode = "srv";
@@ -1753,6 +1755,8 @@
       $scope.isExternalViewerEnabled = gnExternalViewer.isEnabled();
       $scope.externalViewerUrl = gnExternalViewer.getBaseUrl();
       $scope.publicationOptions = [];
+      $scope.getFacetLabel = gnFacetMetaLabel.getFacetLabel;
+
 
       $http.get("../api/records/sharing/options").then(function (response) {
         $scope.publicationOptions = response.data;
diff --git a/web-ui/src/main/resources/catalog/views/default/templates/home.html b/web-ui/src/main/resources/catalog/views/default/templates/home.html
index b68a0d79cef..38f53f4af31 100644
--- a/web-ui/src/main/resources/catalog/views/default/templates/home.html
+++ b/web-ui/src/main/resources/catalog/views/default/templates/home.html
@@ -139,7 +139,7 @@ <h1 class="col-md-12">
               data-ng-model="homeFacet.key"
               data-ng-value="facetKey"
             />
-            <span data-translate="">{{::('facet-' + facetKey) | facetKeyTranslator}}</span
+            <span data-translate="">{{::getFacetLabel(agg) ||  (('facet-' + facetKey) | facetKeyTranslator)}}</span
             >&nbsp;
           </label>
         </div>
@@ -157,7 +157,7 @@ <h1 class="col-md-12">
     <div data-ng-show="searchInfo.aggregations[homeFacet.lastKey].buckets.length > 0">
       <div class="row">
         <h1 class="col-md-12" data-translate="">
-          {{('facet-' + homeFacet.lastKey) | facetKeyTranslator}}
+          {{getFacetLabel(searchInfo.aggregations[homeFacet.lastKey]) ||  (('facet-' + homeFacet.lastKey) | facetKeyTranslator)}}
         </h1>
       </div>
       <div class="row">