Metadata editor / validation report improvements (#8395)

* Metadata editor / validation report improvements: - Update buttons to display success and errors to use text instead of an icon. - Add style to display the display buttons greyed when the related rules are not displayed. - Show separate messages for success and errors. - If not success or errors reported don't show the expander to show the results in the validation rules. - Group the success and error messages. * Metadata editor / validation report improvements: - Fix the display of the expander. - Improve the a bit the layout of the error / success messages. - Improve the tooltips for the buttons to hide / show the messages.
geonetwork · Oct 8, 2024 · bb9c861 · bb9c861
1 parent e030fce
commit bb9c861
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 12 deletions.
diff --git a/...rc/main/resources/catalog/components/edit/validationreport/partials/validationreport.html b/...rc/main/resources/catalog/components/edit/validationreport/partials/validationreport.html
@@ -23,26 +23,30 @@
           <button
             type="button"
             class="btn btn-default btn-xs"
-            data-ng-class="showSuccess ? 'active' : ''"
+            data-ng-class="showSuccess ? 'active' : 'inactive'"
             data-ng-click="toggleShowSuccess();$event.stopPropagation();"
             data-ng-show="hasSuccess"
             data-toggle="tooltip"
             data-placement="top"
-            title="{{'showHideSuccess' | translate}}"
+            data-ng-attr-title="{{showSuccess ? ('hideSuccess' | translate): ('showSuccess' | translate)}}"
           >
-            <span class="fa fa-thumbs-up text-success" aria-hidden="true"></span>
+            <span class="text-success" aria-hidden="true"
+              >{{'validationSuccessLabel' | translate}}</span
+            >
           </button>
           <button
             type="button"
             class="btn btn-default btn-xs"
-            data-ng-class="showErrors ? 'active' : ''"
+            data-ng-class="showErrors ? 'active' : 'inactive'"
             data-ng-click="toggleShowErrors();$event.stopPropagation();"
             data-ng-show="hasErrors"
             data-toggle="tooltip"
             data-placement="top"
-            title="{{'showHideErrors' | translate}}"
+            data-ng-attr-title="{{showErrors ? ('hideErrors' | translate): ('showErrors' | translate)}}"
           >
-            <span class="fa fa-thumbs-down text-danger" aria-hidden="true"></span>
+            <span class="text-danger" aria-hidden="true"
+              >{{'validationErrorLabel' | translate}}</span
+            >
           </button>
         </div>
       </div>
@@ -54,7 +58,67 @@
         data-ng-repeat="type in ruleTypes"
         data-ng-class="'schematron-result-list-' + labelImportanceClass(type)"
       >
+        <!-- No success or failed validation rules to display -->
+        <div
+          data-ng-if="(type.error == 0 || type.error === '?') && (type.success == 0 || type.success === '?')"
+          class="panel-heading clearfix"
+        >
+          <div class="col-md-9">
+            <h2 class="gn-schematron-title">
+              <span data-ng-if="type.schematronVerificationError">
+                <i class="fa fa-exclamation-triangle fa-fw text-danger"></i>&nbsp;</span
+              >{{(type.label || type.id) | translate}}
+            </h2>
+          </div>
+
+          <div
+            class="col-md-3 gn-nopadding-right"
+            data-ng-if="!type.schematronVerificationError"
+          >
+            <span
+              class="label pull-right col-md-12"
+              data-ng-class="labelImportanceClass(type)"
+              data-ng-if="type.total === '?'"
+            >
+              <ng-pluralize
+                count="type.error"
+                when="{'0': '0 ' + ('error' | translate),
+                            '1': '1 ' +  ('error' | translate),
+                            'other': '{} ' +  ('errors' | translate)}"
+              >
+              </ng-pluralize>
+            </span>
+            <span
+              class="label pull-right label-success gn-margin-bottom-sm col-md-12"
+              data-ng-if="type.total !== '?' && type.success !== '?'"
+            >
+              <ng-pluralize
+                count="type.success"
+                when="{'0': '0 ' + ('success' | translate),
+                            '1': '1 ' +  ('success' | translate),
+                            'other': '{} ' +  ('successes' | translate)}"
+              >
+              </ng-pluralize>
+            </span>
+            <span
+              class="label pull-right gn-margin-bottom-sm col-md-12"
+              data-ng-class="labelImportanceClass(type)"
+              data-ng-if="type.total !== '?' && type.error !== '?'"
+            >
+              <ng-pluralize
+                count="type.error"
+                when="{'0': '0 ' + ('error' | translate),
+                            '1': '1 ' +  ('error' | translate),
+                            'other': '{} ' +  ('errors' | translate)}"
+              >
+              </ng-pluralize>
+            </span>
+          </div>
+        </div>
+
+        <!-- Success or failed validation rules to display -->
         <div
+          data-ng-if="(type.error != 0 && type.error !== '?') || (type.success != 0 && type.success !== '?')"
           data-gn-slide-toggle="{{initialSectionsClosed}}"
           class="panel-heading clearfix"
         >
@@ -70,7 +134,7 @@ <h2 class="gn-schematron-title">
             data-ng-if="!type.schematronVerificationError"
           >
             <span
-              class="label pull-right"
+              class="label pull-right col-md-12"
               data-ng-class="labelImportanceClass(type)"
               data-ng-if="type.total === '?'"
             >
@@ -83,11 +147,30 @@ <h2 class="gn-schematron-title">
               </ng-pluralize>
             </span>
             <span
-              class="label pull-right"
+              class="label pull-right label-success gn-margin-bottom-sm col-md-12"
+              data-ng-if="type.total !== '?' && type.success !== '?'"
+            >
+              <ng-pluralize
+                count="type.success"
+                when="{'0': '0 ' + ('success' | translate),
+                            '1': '1 ' +  ('success' | translate),
+                            'other': '{} ' +  ('successes' | translate)}"
+              >
+              </ng-pluralize>
+            </span>
+            <span
+              class="label pull-right gn-margin-bottom-sm col-md-12"
               data-ng-class="labelImportanceClass(type)"
-              data-ng-if="type.total !== '?'"
-              >{{type.success}} / {{type.total}}</span
+              data-ng-if="type.total !== '?' && type.error !== '?'"
             >
+              <ng-pluralize
+                count="type.error"
+                when="{'0': '0 ' + ('error' | translate),
+                            '1': '1 ' +  ('error' | translate),
+                            'other': '{} ' +  ('errors' | translate)}"
+              >
+              </ng-pluralize>
+            </span>
           </div>
           <div
             class="col-md-3 gn-nopadding-right"
@@ -107,7 +190,10 @@ <h2 class="gn-schematron-title">
           </ul>
         </div>
         <div class="panel-body" data-ng-if="!type.schematronVerificationError">
-          <ul class="list-group" data-ng-repeat="pattern in type.patterns.pattern">
+          <ul
+            class="list-group"
+            data-ng-repeat="pattern in type.patterns.pattern | orderBy: 'type'"
+          >
             <li
               class="list-group-item"
               data-ng-repeat="rule in pattern.rules.rule"

diff --git a/web-ui/src/main/resources/catalog/locales/en-editor.json b/web-ui/src/main/resources/catalog/locales/en-editor.json
@@ -454,5 +454,7 @@
     "associated-fcats": "Feature catalog",
     "associated-siblings": "Associated resources",
     "associated-hasfeaturecats": "Using this feature catalog",
-    "associatedResourcesPanel": "Associated resources"
+    "associatedResourcesPanel": "Associated resources",
+    "validationSuccessLabel": "success",
+    "validationErrorLabel": "errors"
 }
diff --git a/web-ui/src/main/resources/catalog/style/gn_editor.less b/web-ui/src/main/resources/catalog/style/gn_editor.less
@@ -1024,3 +1024,9 @@ gn-bounding-polygon {
     border-radius: 50% !important;
   }
 }
+
+#gn-editor-validation-panel {
+  button.inactive {
+    opacity: 0.65;
+  }
+}