From 5d2977a16d151d45b405930e1552c4833c69cd24 Mon Sep 17 00:00:00 2001 From: Toni Prieto Date: Mon, 12 Feb 2024 22:57:28 +0100 Subject: [PATCH] Add a new mode to AuthorityConfidenceStateDirective to configure use fontawesome icons instead of class defined in style property --- config/config.example.yml | 30 ++++++++++-- .../dso-edit-metadata-value.component.html | 9 +++- .../authority-confidence-state.directive.ts | 45 +++++++++++++++-- src/assets/i18n/en.json5 | 18 +++++++ src/config/default-app-config.ts | 48 +++++++++++++++---- src/config/submission-config.interface.ts | 1 + src/environments/environment.test.ts | 12 +++-- 7 files changed, 143 insertions(+), 20 deletions(-) diff --git a/config/config.example.yml b/config/config.example.yml index 69a9ffd320f..92162ef33ad 100644 --- a/config/config.example.yml +++ b/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 diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html index 5ff1c5f4eda..8a2840a82c3 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html @@ -20,15 +20,22 @@
{{ dsoType + '.edit.metadata.authority.label' | translate }} {{ mdValue.newValue.authority }}
+ diff --git a/src/app/shared/form/directives/authority-confidence-state.directive.ts b/src/app/shared/form/directives/authority-confidence-state.directive.ts index 70e3a052e92..a20ab49c4f6 100644 --- a/src/app/shared/form/directives/authority-confidence-state.directive.ts +++ b/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'; + } } } diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 14caf1fc89d..7ea6f542608 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2444,6 +2444,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", diff --git a/src/config/default-app-config.ts b/src/config/default-app-config.ts index fc03038fdad..a8258eec450 100644 --- a/src/config/default-app-config.ts +++ b/src/config/default-app-config.ts @@ -162,7 +162,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' * } */ @@ -182,27 +182,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' } ] diff --git a/src/config/submission-config.interface.ts b/src/config/submission-config.interface.ts index a63af45e38a..b0d1df900fa 100644 --- a/src/config/submission-config.interface.ts +++ b/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 { diff --git a/src/environments/environment.test.ts b/src/environments/environment.test.ts index 8b906764620..29d9d30d829 100644 --- a/src/environments/environment.test.ts +++ b/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' }, ] }