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.
geonetwork · Dec 6, 2024 · 211b0f5 · 211b0f5
1 parent 1b6d0fb
commit 211b0f5
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">