Add a new mode to AuthorityConfidenceStateDirective to configure use fontawesome icons instead of class defined in style property

Author: toniprieto

config/config.example.yml

@@ -136,7 +136,7 @@ submission:
       # NOTE: example of configuration
       #   # NOTE: metadata name
       # - name: dc.author
-      #   # NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used
+      #   # NOTE: fontawesome (v6.x) icon classes and bootstrap utility classes can be used
       #   style: fas fa-user
       - name: dc.author
         style: fas fa-user
@@ -147,18 +147,40 @@ submission:
       confidence:
         # NOTE: example of configuration
         #   # NOTE: confidence value
-        # - name: dc.author
-        #   # NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used
-        #   style: fa-user
+        # - value: 600
+        #   # NOTE: fontawesome (v6.x) icon classes and bootstrap utility classes can be used
+        #   style: text-success
+        #   icon: fa-circle-check
+        #   # NOTE: the class configured in property style is used by default, the icon property could be used in component
+        #           configured to use a 'icon mode' display (mainly in edit-item page)
         - value: 600
           style: text-success
+          icon: fa-circle-check
         - value: 500
           style: text-info
+          icon: fa-gear
         - value: 400
           style: text-warning
+          icon: fa-circle-question
+        - value: 300
+          style: text-muted
+          icon: fa-thumbs-down
+        - value: 200
+          style: text-muted
+          icon: fa-circle-exclamation
+        - value: 100
+          style: text-muted
+          icon: fa-circle-stop
+        - value: 0
+          style: text-muted
+          icon: fa-ban
+        - value: -1
+          style: text-muted
+          icon: fa-circle-xmark
         # default configuration
         - value: default
           style: text-muted
+          icon: fa-circle-xmark
 
 #  Default Language in which the UI will be rendered if the user's browser language is not an active language
 defaultLanguage: en

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html

@@ -20,15 +20,22 @@
     <div *ngIf="!isVirtual && !mdValue.editing && mdValue.newValue.authority && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_UNSET && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_NOVALUE">
       <span class="badge badge-light border" >
         <i dsAuthorityConfidenceState
-           class="far fa-circle fa-fw p-0"
+           class="fas fa-fw p-0"
            aria-hidden="true"
            [authorityValue]="mdValue.newValue"
+           [iconMode]="true"
         ></i>
         {{ dsoType + '.edit.metadata.authority.label' | translate }} {{ mdValue.newValue.authority }}
       </span>
     </div>
     <div class="mt-2" *ngIf=" mdValue.editing && (isAuthorityControlled() | async) && (isSuggesterVocabulary() | async)">
       <div class="btn-group w-75">
+        <i dsAuthorityConfidenceState
+          class="fas fa-fw p-0 mr-1 mt-auto mb-auto"
+          aria-hidden="true"
+          [authorityValue]="mdValue.newValue.confidence"
+          [iconMode]="true"
+      ></i>
         <input class="form-control form-outline" [(ngModel)]="mdValue.newValue.authority" [disabled]="!editingAuthority"
               [attr.aria-label]="(dsoType + '.edit.metadata.edit.authority.key') | translate"
               (change)="onChangeAuthorityKey()" />

src/app/shared/form/directives/authority-confidence-state.directive.ts

@@ -29,6 +29,7 @@ import { ConfidenceIconConfig } from '../../../../config/submission-config.inter
 import { environment } from '../../../../environments/environment';
 import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { MetadataValue } from '../../../core/shared/metadata.models';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Directive to add to the element a bootstrap utility class based on metadata confidence value
@@ -48,6 +49,12 @@ export class AuthorityConfidenceStateDirective implements OnChanges, AfterViewIn
    */
   @Input() visibleWhenAuthorityEmpty = true;
 
+  /**
+   * A boolean to configure the display of icons instead of default style configuration
+   * When true, the class configured in {@link ConfidenceIconConfig.icon} will be used, by default {@link ConfidenceIconConfig.style} is used
+   */
+  @Input() iconMode = false;
+
   /**
    * The css class applied before directive changes
    */
@@ -80,7 +87,8 @@ export class AuthorityConfidenceStateDirective implements OnChanges, AfterViewIn
    */
   constructor(
     private elem: ElementRef,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    private translate: TranslateService
   ) {
   }
 
@@ -94,12 +102,19 @@ export class AuthorityConfidenceStateDirective implements OnChanges, AfterViewIn
       this.previousClass = this.getClassByConfidence(this.getConfidenceByValue(changes.authorityValue.previousValue));
     }
     this.newClass = this.getClassByConfidence(this.getConfidenceByValue(changes.authorityValue.currentValue));
+    let confidenceName = this.getNameByConfidence(this.getConfidenceByValue(changes.authorityValue.currentValue));
 
     if (isNull(this.previousClass)) {
       this.renderer.addClass(this.elem.nativeElement, this.newClass);
+      if (this.iconMode) {
+        this.renderer.setAttribute(this.elem.nativeElement, 'title', this.translate.instant(`confidence.indicator.help-text.${confidenceName}`));
+      }
     } else if (this.previousClass !== this.newClass) {
       this.renderer.removeClass(this.elem.nativeElement, this.previousClass);
       this.renderer.addClass(this.elem.nativeElement, this.newClass);
+      if (this.iconMode) {
+        this.renderer.setAttribute(this.elem.nativeElement, 'title', this.translate.instant(`confidence.indicator.help-text.${confidenceName}`));
+      }
     }
   }
 
@@ -136,6 +151,10 @@ export class AuthorityConfidenceStateDirective implements OnChanges, AfterViewIn
       confidence = value.confidence;
     }
 
+    if (isNotEmpty(value) && Object.values(ConfidenceType).includes(value)) {
+      confidence = value;
+    }
+
     return confidence;
   }
 
@@ -154,9 +173,29 @@ export class AuthorityConfidenceStateDirective implements OnChanges, AfterViewIn
     const confidenceIndex: number = findIndex(confidenceIcons, {value: confidence});
 
     const defaultconfidenceIndex: number = findIndex(confidenceIcons, {value: 'default' as  any});
-    const defaultClass: string = (defaultconfidenceIndex !== -1) ? confidenceIcons[defaultconfidenceIndex].style : '';
 
-    return (confidenceIndex !== -1) ? confidenceIcons[confidenceIndex].style : defaultClass;
+    if (this.iconMode) {
+      const defaultClass: string = (defaultconfidenceIndex !== -1) ? confidenceIcons[defaultconfidenceIndex].icon : '';
+      return (confidenceIndex !== -1) ? confidenceIcons[confidenceIndex].icon : defaultClass;
+    } else {
+      const defaultClass: string = (defaultconfidenceIndex !== -1) ? confidenceIcons[defaultconfidenceIndex].style : '';
+      return (confidenceIndex !== -1) ? confidenceIcons[confidenceIndex].style : defaultClass;
+    }
+  }
+
+  /**
+   * Return the confidence value name
+   *
+   * @param confidence
+   * @returns
+   */
+  private getNameByConfidence(confidence: any): string {
+    let confidenceText = ConfidenceType[confidence];
+    if (isNotEmpty(confidenceText)) {
+      return confidenceText.replace('CF_', '').toLowerCase();
+    } else {
+      return 'unknown';
+    }
   }
 
 }

src/assets/i18n/en.json5

@@ -2448,6 +2448,24 @@
 
   "workflow-item.search.result.list.element.supervised.remove-tooltip": "Remove supervision group",
 
+  "confidence.indicator.help-text.accepted": "This authority value has been confirmed as accurate by an interactive user",
+
+  "confidence.indicator.help-text.uncertain": "Value is singular and valid but has not been seen and accepted by a human so it is still uncertain",
+
+  "confidence.indicator.help-text.ambiguous": "There are multiple matching authority values of equal validity",
+
+  "confidence.indicator.help-text.notfound": "There are no matching answers in the authority",
+
+  "confidence.indicator.help-text.failed": "The authority encountered an internal failure",
+
+  "confidence.indicator.help-text.rejected": "The authority recommends this submission be rejected",
+
+  "confidence.indicator.help-text.novalue": "No reasonable confidence value was returned from the authority",
+
+  "confidence.indicator.help-text.unset": "Confidence was never recorded for this value",
+
+  "confidence.indicator.help-text.unknown": "Unknown confidence value",
+
   "item.page.abstract": "Abstract",
 
   "item.page.author": "Authors",

src/config/default-app-config.ts

@@ -164,7 +164,7 @@ export class DefaultAppConfig implements AppConfig {
          * {
          *    // NOTE: metadata name
          *    name: 'dc.author',
-         *    // NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used
+         *    // NOTE: fontawesome (v6.x) icon classes and bootstrap utility classes can be used
          *    style: 'fa-user'
          * }
          */
@@ -184,27 +184,59 @@ export class DefaultAppConfig implements AppConfig {
            * NOTE: example of configuration
            * {
            *    // NOTE: confidence value
-           *    value: 'dc.author',
-           *    // NOTE: fontawesome (v4.x) icon classes and bootstrap utility classes can be used
-           *    style: 'fa-user'
+           *    value: 100,
+           *    // NOTE: fontawesome (v6.x) icon classes and bootstrap utility classes can be used
+           *    style: 'text-success',
+           *    icon: 'fa-circle-check'
+           *    // NOTE: the class configured in property style is used by default, the icon property could be used in component
+           *    //      configured to use a 'icon mode' display (mainly in edit-item page)
            * }
            */
           {
             value: 600,
-            style: 'text-success'
+            style: 'text-success',
+            icon: 'fa-circle-check'
           },
           {
             value: 500,
-            style: 'text-info'
+            style: 'text-info',
+            icon: 'fa-gear'
           },
           {
             value: 400,
-            style: 'text-warning'
+            style: 'text-warning',
+            icon: 'fa-circle-question'
+          },
+          {
+            value: 300,
+            style: 'text-muted',
+            icon: 'fa-circle-question'
+          },
+          {
+            value: 200,
+            style: 'text-muted',
+            icon: 'fa-circle-exclamation'
+          },
+          {
+            value: 100,
+            style: 'text-muted',
+            icon: 'fa-circle-stop'
+          },
+          {
+            value: 0,
+            style: 'text-muted',
+            icon: 'fa-ban'
+          },
+          {
+            value: -1,
+            style: 'text-muted',
+            icon: 'fa-circle-xmark'
           },
           // default configuration
           {
             value: 'default',
-            style: 'text-muted'
+            style: 'text-muted',
+            icon: 'fa-circle-xmark'
           }
 
         ]

src/config/submission-config.interface.ts

@@ -24,6 +24,7 @@ export interface MetadataIconConfig extends Config {
 export interface ConfidenceIconConfig extends Config {
   value: any;
   style: string;
+  icon: string;
 }
 
 export interface SubmissionConfig extends Config {

src/environments/environment.test.ts

@@ -147,19 +147,23 @@ export const environment: BuildConfig = {
         confidence: [
           {
             value: 600,
-            style: 'text-success'
+            style: 'text-success',
+            icon: 'fa-circle-check'
           },
           {
             value: 500,
-            style: 'text-info'
+            style: 'text-info',
+            icon: 'fa-gear'
           },
           {
             value: 400,
-            style: 'text-warning'
+            style: 'text-warning',
+            icon: 'fa-circle-question'
           },
           {
             value: 'default',
-            style: 'text-muted'
+            style: 'text-muted',
+            icon: 'fa-circle-xmark'
           },
         ]
       }