Facet / Add meta property to customize label. (#8536)

* 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.

* Facet / Add meta property to customize label.

* Facet / Add meta property to customize label. Apply translation key filter in getFacetLabel

---------

Co-authored-by: Jose García <josegar74@gmail.com>

Author: fxprunayre

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:

web-ui/src/main/resources/catalog/components/elasticsearch/directives/FacetDirective.js

@@ -187,6 +187,55 @@
     }
   ]);
 
+  module.service("gnFacetMetaLabel", [
+    "$translate",
+    "$filter",
+    function ($translate, $filter) {
+      var translateKey = function (key) {
+        try {
+          var facetKeyTranslatorFilter = $filter("facetKeyTranslator");
+          var t = facetKeyTranslatorFilter(key);
+          return t;
+        } catch (e) {
+          return key;
+        }
+      };
+
+      /**
+       * Retrieves the facet label.
+       *
+       * If the facet has a meta-property label defined with the current UI language, retrieves the translation
+       * from the facet configuration; otherwise it uses the provided translation key to retrieve the translation
+       * from the application translation files.
+       *
+       * {
+       *   "facetConfig": {
+       *     "resourceType": {
+       *       "terms": {
+       *         "field": "resourceType"
+       *       },
+       *       "meta": {
+       *         "labels": {
+       *           "eng": "Hierarchy level",
+       *           "spa": "Nivel jerárquico",
+       *           ...
+       *         },
+       *         ...
+       *
+       * @param facet facet configuration.
+       * @param key   translation key.
+       * @returns {*|null}
+       */
+      this.getFacetLabel = function (facet, key) {
+        if (!facet || !facet.meta || !facet.meta.labels) {
+          return translateKey(key);
+        }
+        var currentLang = $translate.use();
+        return facet.meta.labels[currentLang] || translateKey(key);
+      };
+    }
+  ]);
+
   module.filter("facetTooltip", [
     "$translate",
     "$filter",
@@ -266,7 +315,8 @@
   module.directive("esFacets", [
     "gnFacetSorter",
     "gnSearchSettings",
-    function (gnFacetSorter, gnSearchSettings) {
+    "gnFacetMetaLabel",
+    function (gnFacetSorter, gnSearchSettings, gnFacetMetaLabel) {
       return {
         restrict: "A",
         controllerAs: "ctrl",
@@ -291,6 +341,7 @@
           // Directive tab field property
           scope.isTabMode = scope.ctrl.tabField !== undefined;
           scope.facetSorter = gnFacetSorter.sortByTranslation;
+          scope.getFacetLabel = gnFacetMetaLabel.getFacetLabel;
         }
       };
     }

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)}}</span
         >
         <span
           class="fa fa-fw"

web-ui/src/main/resources/catalog/components/metadataactions/RelatedDirective.js

@@ -889,7 +889,8 @@
   module.directive("gnRecordsFilters", [
     "$rootScope",
     "gnGlobalSettings",
-    function ($rootScope, gnGlobalSettings) {
+    "gnFacetMetaLabel",
+    function ($rootScope, gnGlobalSettings, gnFacetMetaLabel) {
       return {
         restrict: "A",
         templateUrl: function (elem, attrs) {
@@ -911,6 +912,7 @@
           scope.criteria = { p: {} };
           scope.relatedFacetConfig =
             gnGlobalSettings.gnCfg.mods.recordview.relatedFacetConfig;
+          scope.getFacetLabel = gnFacetMetaLabel.getFacetLabel;
 
           function removeEmptyFilters(filters, agg) {
             var cleanFilterPos = [];

web-ui/src/main/resources/catalog/components/metadataactions/partials/recordsFilters.html

@@ -2,7 +2,7 @@
   <h2>{{title}}</h2>
   <p class="text-muted" translate="">filterHelp</p>
   <div data-ng-repeat="filter in filtersToProcess">
-    <label>{{('facet-' + filter) | facetKeyTranslator}}</label>
+    <label>{{getFacetLabel(agg[filter], 'facet-' + filter)}}</label>
     <div>
       <button
         data-ng-repeat="(key, b) in agg[filter].buckets"

web-ui/src/main/resources/catalog/components/search/searchfiltertag/SearchFilterTagsDirective.js

@@ -45,7 +45,8 @@
 
   module.directive("searchFilterTags", [
     "$location",
-    function ($location) {
+    "gnFacetMetaLabel",
+    function ($location, gnFacetMetaLabel) {
       return {
         restrict: "EA",
         require: "^ngSearchForm",
@@ -61,6 +62,12 @@
 
           // key is the raw facet path, value is a valid filter object
           scope.facetFilterCache = {};
+          scope.getFacetLabel = gnFacetMetaLabel.getFacetLabel;
+          scope.dimensionList = {};
+          for (var i = 0; i < scope.dimensions.length; i++) {
+            var dimension = scope.dimensions[i];
+            scope.dimensionList[dimension.key] = dimension;
+          }
 
           function getSearchParams() {
             if (scope.useLocationParameters) {

web-ui/src/main/resources/catalog/components/search/searchfiltertag/partials/searchFilterTagsTemplate.html

@@ -21,7 +21,9 @@
       ng-click="removeFilter(filter)"
     >
       <strong class="text-no-wrap">
-        <span ng-if="::!specific">{{('facet-' + filter.key) | facetKeyTranslator}}</span>
+        <span ng-if="::!specific"
+          >{{getFacetLabel(dimensionList[filter.key], 'facet-' + filter.key)}}</span
+        >
         <span ng-if="::specific">{{filter.key}}</span>
       </strong>
       <div class="flex-spacer"></div>

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;

web-ui/src/main/resources/catalog/views/default/templates/home.html

@@ -123,7 +123,8 @@ <h1 data-translate="">topMaps</h1>
         <h1 class="col-md-12">
           <span data-translate="" data-ng-if="homeFacet.list.length > 2">browseBy</span>
           <span data-ng-if="homeFacet.list.length < 3" data-translate="">
-            {{::('facet-' + homeFacet.list[0]) | facetKeyTranslator}}
+            {{::getFacetLabel(searchInfo.aggregations[homeFacet.list[0]], 'facet-' +
+            homeFacet.list[0])}}
           </span>
         </h1>
         <div class="gn-topic-select col-md-12" data-ng-if="homeFacet.list.length > 2">
@@ -139,7 +140,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)}}</span
             >&nbsp;
           </label>
         </div>
@@ -157,7 +158,8 @@ <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)}}
         </h1>
       </div>
       <div class="row">