Association type / Consistent labels (geonetwork#8077)

* Associated resource / Consistent labels

Create one directive to display associated resources labels with icon.

The directive is used in all places:
* Record view (list and card layout)
* Editor side panel
* Editor popup

Add the possibility to customize an association label by adding custom translation key in `${lang}-custom.json`

eg.
```json
{
  "crossReference-study": "Publication",
  "crossReference-campaign": "Campaign",
  "crossReference-reuse": "Reuse"
}
```

* Editor / Associated resource popup / Fix element using same DOM id.
* Record view / Improve alignement of source datasets

* Update UtilityDirective.js

* Update related.html

* Associated resource / Consistent labels / Missing template.

* Record view / Associated / Fallback on URL if no title. Do not display twice the list

web-ui/src/main/resources/catalog/components/common/popup/partials/popup.html

@@ -4,7 +4,7 @@
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
         &times;
       </button>
-      <h4 class="modal-title" id="myModalLabel">
+      <h4 class="modal-title" id="modal-{{options.title}}">
         <span data-translate="">{{options.title}}</span>
       </h4>
     </div>

web-ui/src/main/resources/catalog/components/edit/onlinesrc/OnlineSrcService.js

@@ -362,7 +362,11 @@
          * @param {string} type of the directive that calls it.
          */
         onOpenPopup: function (type, additionalParams) {
-          if (type === "parent" && additionalParams.fields.associationType) {
+          if (
+            type === "parent" &&
+            additionalParams.fields &&
+            additionalParams.fields.associationType
+          ) {
             // In ISO19115-3, parents are usually encoded using the association records
             // Configured in config/associated-panel/default.json
             type = "siblings";

web-ui/src/main/resources/catalog/components/edit/onlinesrc/partials/linktosibling.html

@@ -2,38 +2,56 @@
   <form class="form-horizontal" role="form" data-ng-search-form="">
     <input type="hidden" name="_csrf" value="{{csrf}}" />
     <div class="onlinesrc-container">
-      <div class="form-group gn-required" ng-show="::ctrl.associationTypes.length">
-        <label class="col-sm-2 control-label">
-          <span data-translate="">associationType</span>
-        </label>
-        <div class="col-sm-10">
-          <div
-            data-schema-info-combo="codelist"
-            data-schema-info-combo-values="ctrl.associationTypes"
-            data-allow-blank="false"
-            data-selected-info="config.associationType"
-            data-gn-schema-info="associationType"
-            data-ng-disabled="config.associationTypeForced"
-            lang="lang"
-          ></div>
-        </div>
+      <div class="row">
+        <div class="col-sm-offset-2 col-sm-10"></div>
       </div>
-      <div class="form-group" ng-show="::ctrl.initiativeTypes.length">
-        <label class="col-sm-2 control-label">
-          <span data-translate="">initiativeType</span>
+
+      <div class="form-group">
+        <label class="col-sm-2 control-label gn-required">
+          <span data-translate="">associationType</span>
         </label>
         <div class="col-sm-10">
-          <div
-            data-schema-info-combo="codelist"
-            data-schema-info-combo-values="ctrl.initiativeTypes"
-            data-selected-info="config.initiativeType"
-            data-gn-schema-info="initiativeType"
-            lang="lang"
-            data-allow-blank="true"
-            data-ng-disabled="config.initiativeTypeForced"
-          ></div>
+          <div class="row">
+            <div
+              class="col-sm-6 gn-required"
+              ng-show="!config.associationTypeForced && ctrl.associationTypes.length"
+              title="{{'associationType' | translate}}"
+            >
+              <div
+                data-schema-info-combo="codelist"
+                data-schema-info-combo-values="ctrl.associationTypes"
+                data-allow-blank="false"
+                data-selected-info="config.associationType"
+                data-gn-schema-info="associationType"
+                data-ng-disabled="config.associationTypeForced"
+                lang="lang"
+              ></div>
+            </div>
+            <div
+              class="col-sm-6 form-group"
+              ng-show="!config.initiativeTypeForced && ctrl.initiativeTypes.length"
+              title="{{'initiativeType' | translate}}"
+            >
+              <div
+                data-schema-info-combo="codelist"
+                data-schema-info-combo-values="ctrl.initiativeTypes"
+                data-selected-info="config.initiativeType"
+                data-gn-schema-info="initiativeType"
+                lang="lang"
+                data-allow-blank="true"
+                data-ng-disabled="config.initiativeTypeForced"
+              ></div>
+            </div>
+          </div>
+          <label
+            class="col-sm-4 control-label"
+            style="text-align: left"
+            data-gn-associated-record-label="config"
+          >
+          </label>
         </div>
       </div>
+
       <div
         class="form-group gn-nomargin-bottom"
         data-ng-show="config.sources['metadataStore']"
@@ -117,27 +135,19 @@
           <table class="table table-striped table-bordered">
             <thead>
               <tr>
-                <th data-translate="">metadata</th>
                 <th data-translate="">associationType</th>
-                <th data-translate="">initiativeType</th>
+                <th data-translate="">metadata</th>
                 <th></th>
               </tr>
             </thead>
             <tbody>
               <tr data-ng-repeat="obj in selection">
-                <td>{{obj.md.resourceTitle}}</td>
-                <td>
-                  <i
-                    class="fa fa-fw gn-icon-association-{{obj.associationType}} gn-margin-right-sm"
-                  ></i
-                  >{{obj.associationType | translate}}
-                </td>
                 <td>
-                  <i
-                    class="fa fa-fw gn-icon-initiative-{{obj.initiativeType}} gn-margin-right-sm"
-                  ></i
-                  >{{obj.initiativeType | translate}}
+                  <span
+                    data-gn-associated-record-label="{associationType: obj.associationType, initiativeType: obj.initiativeType}"
+                  ></span>
                 </td>
+                <td>{{obj.md.resourceTitle}}</td>
                 <td class="text-center">
                   <a
                     title="{{'removeFromSelection' | translate}}"

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

@@ -785,14 +785,21 @@
                   scope.relations.siblings = [];
                   siblings
                     .map(function (r) {
-                      return (r.properties && r.properties.initiativeType) || "";
+                      return r.properties
+                        ? r.properties.associationType + "-" + r.properties.initiativeType
+                        : "";
                     })
                     .filter(function (value, index, self) {
                       return self.indexOf(value) === index;
                     })
                     .forEach(function (type) {
                       scope.relations["siblings" + type] = siblings.filter(function (r) {
-                        return r.properties && r.properties.initiativeType === type;
+                        var key = r.properties
+                          ? r.properties.associationType +
+                            "-" +
+                            r.properties.initiativeType
+                          : "";
+                        return key === type;
                       });
                       siblingsCount += scope.relations["siblings" + type].length;
                     });

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

@@ -23,9 +23,11 @@ <h2 class="onlinesrc-title gn-relation-type-{{config.type}}">
         data-ng-if="config.relations.length > 0"
         data-ng-repeat-start="(key, records) in config.relations | groupBy:'[properties.associationType,properties.initiativeType]'"
       >
-        <strong data-ng-if="key" data-ng-init="keyToken = key.split(',')">
-          {{keyToken[0] | translate}}
-          <span data-ng-if="keyToken[1] !== ''">({{keyToken[1] | translate}})</span>
+        <strong
+          data-ng-if="key && key !== ','"
+          data-ng-init="keyToken = key.split(',')"
+          data-gn-associated-record-label="{associationType: keyToken[0], initiativeType: keyToken[1]}"
+        >
         </strong>
         <ul class="list-group">
           <li
@@ -61,16 +63,6 @@ <h2 class="onlinesrc-title gn-relation-type-{{config.type}}">
                     title="{{'remoteRecord' | translate}}"
                   ></i>
                 </a>
-                <span
-                  data-ng-if="record.properties && record.properties.associationType != ''"
-                >
-                  - {{record.properties.associationType | translate}}
-                </span>
-                <span
-                  data-ng-if="record.properties && record.properties.initiativeType != ''"
-                >
-                  ({{record.properties.initiativeType | translate}})
-                </span>
               </div>
               <div class="col-md-1 text-right">
                 <a

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

@@ -15,7 +15,7 @@
         gn-formatter="formatter.defaultUrl"
       >
         <h1>
-          <span class="clamp-2">{{md.resourceTitle}}</span>
+          <span class="clamp-2"> {{md.resourceTitle}} </span>
         </h1>
       </a>
       <a
@@ -26,7 +26,14 @@ <h1>
         title="{{md.resourceTitle}}"
       >
         <h1>
-          <span class="clamp-2">{{md.resourceTitle || md.remoteUrl}}</span>
+          <span class="clamp-2">
+            {{md.resourceTitle || md.remoteUrl}}
+            <i
+              data-ng-if="md.origin === 'remote'"
+              class="fa fa-external-link"
+              title="{{'remoteRecord' | translate}}"
+            ></i>
+          </span>
         </h1>
       </a>
     </div>

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

@@ -178,10 +178,11 @@ <h3>
                     badge = config.getBadgeLabel(mainType, md);
                     icon = config.getClassIcon(mainType);"
   >
-    <h3 data-ng-if="groupSiblingsByType && items.length > 0" class="gn-related-title">
-      <i class="fa fa-fw {{icon}}"></i>
-      {{type.replace('siblings', '') | translate}}
-    </h3>
+    <h3
+      data-ng-if="groupSiblingsByType && items.length > 0"
+      data-ng-init="keyToken = type.replace('siblings', '').split('-')"
+      data-gn-associated-record-label="{associationType: keyToken[0], initiativeType: keyToken[1]}"
+    ></h3>
 
     <ul class="gn-related-list list-group">
       <li class="list-group-item" data-ng-repeat="md in items | orderBy:getOrderBy">
@@ -201,7 +202,7 @@ <h3 data-ng-if="groupSiblingsByType && items.length > 0" class="gn-related-title
           target="_blank"
           title="{{md.resourceTitle}}"
         >
-          {{md.resourceTitle}}
+          {{md.resourceTitle || md.remoteUrl}}
           <i
             data-ng-if="md.origin === 'remote'"
             class="fa fa-external-link"
@@ -220,60 +221,19 @@ <h3 data-ng-if="groupSiblingsByType && items.length > 0" class="gn-related-title
                     badge = config.getBadgeLabel(mainType, md);
                     icon = config.getClassIcon(mainType);"
   >
-    <h3 data-ng-if="groupSiblingsByType && items.length > 0">
-      {{type.replace('siblings', '') | translate}}
-    </h3>
+    <h3
+      data-ng-if="groupSiblingsByType && items.length > 0"
+      data-ng-init="keyToken = type.replace('siblings', '').split('-')"
+      data-gn-associated-record-label="{associationType: keyToken[0], initiativeType: keyToken[1]}"
+    ></h3>
+
     <ul class="row list-group gn-info-list">
       <gn-metadata-card
         data-ng-repeat="md in items | orderBy:getOrderBy"
         data-ng-if="!size || $index < sizeConfig[type]"
         md="md"
         formatter-url="formatter.defaultUrl"
       >
-        <span
-          class="gn-card-badge"
-          data-ng-class="{
-            'gn-card-series': type === 'parent',
-            'gn-card-nonGeographicDataset': type === 'nonGeographicDataset',
-            'gn-card-service': type === 'services' || type === 'application',
-            'gn-card-dataset': type !== 'parent' && type !== 'services' && type !== 'application' && type !== 'nonGeographicDataset'
-            }"
-        >
-          <span>
-            <span
-              data-ng-if="!md.properties || (md.properties && md.properties.associationType == '')"
-            >
-              {{(config.getLabel(mainType, type)) | translate}}</span
-            >
-            <span
-              data-ng-if="md.properties && md.properties.associationType"
-              data-ng-show="md.properties && md.properties.associationType"
-              title="{{(config.getLabel(mainType, type)) | translate}}"
-            >
-              {{'associatedTo' | translate}}
-              <b title="{{'associationType' | translate}}">
-                <i
-                  class="fa fa-fw {{icon}} gn-icon-association-{{md.properties.associationType}}"
-                ></i>
-                {{md.properties.associationType | translate}}
-              </b>
-              <span data-ng-if="md.properties && md.properties.initiativeType">
-                >
-                <b title="{{'initiativeType' | translate}}">
-                  <i
-                    class="fa fa-fw {{icon}} gn-icon-initiative-{{md.properties.initiativeType}}"
-                  ></i>
-                  {{md.properties.initiativeType | translate}}
-                </b>
-              </span>
-            </span>
-          </span>
-          <i
-            data-ng-if="md.origin === 'remote'"
-            class="fa fa-fw fa-external-link"
-            title="{{'remoteRecord' | translate}}"
-          ></i>
-        </span>
       </gn-metadata-card>
       <button
         class="btn btn-link"