Add a new web component for displaying metadata quality scores with configurable validation criteria.

Author: OCurdy

apps/webcomponents/src/app/components/gn-metadata-quality/gn-metadata-quality.component.ts

@@ -22,9 +22,36 @@ export class GnMetadataQualityComponent extends BaseComponent {
   @Input() smaller = false
   @Input() metadataQualityDisplay = true
   @Input() popoverDisplay = true
-  @Input() propsToValidate?: ValidatorMapperKeys[] | string // Can be JSON string array
   @Input() forceComputeScore = false
 
+  private _propsToValidate?: ValidatorMapperKeys[] | string
+  public parsedPropsToValidate?: ValidatorMapperKeys[]
+
+  @Input()
+  set propsToValidate(value: ValidatorMapperKeys[] | string | undefined) {
+    this._propsToValidate = value
+    if (!value) {
+      this.parsedPropsToValidate = undefined
+      return
+    }
+    if (typeof value === 'string') {
+      try {
+        const parsed = JSON.parse(value)
+        this.parsedPropsToValidate = Array.isArray(parsed) ? parsed : undefined
+      } catch (e) {
+        console.warn('Failed to parse propsToValidate JSON:', e)
+        this.parsedPropsToValidate = undefined
+      }
+    } else if (Array.isArray(value)) {
+      this.parsedPropsToValidate = value
+    } else {
+      this.parsedPropsToValidate = undefined
+    }
+  }
+  get propsToValidate() {
+    return this._propsToValidate
+  }
+
   get parsedMetadata(): CatalogRecord | null {
     if (!this.metadata) return null
     if (typeof this.metadata === 'string') {
@@ -38,19 +65,6 @@ export class GnMetadataQualityComponent extends BaseComponent {
     return this.metadata
   }
 
-  get parsedPropsToValidate(): ValidatorMapperKeys[] | undefined {
-    if (!this.propsToValidate) return undefined
-    if (typeof this.propsToValidate === 'string') {
-      try {
-        return JSON.parse(this.propsToValidate)
-      } catch (e) {
-        console.warn('Failed to parse propsToValidate JSON:', e)
-        return undefined
-      }
-    }
-    return this.propsToValidate
-  }
-
   get parsedForceComputeScore(): boolean {
     if (typeof this.forceComputeScore === 'boolean') return this.forceComputeScore
     return this.forceComputeScore === 'true' || this.forceComputeScore === true

apps/webcomponents/src/app/webcomponents.module.ts

@@ -53,9 +53,11 @@ import { RouterModule, TitleStrategy } from '@angular/router'
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { DATAHUB_ROUTER_PROVIDERS } from '@geonetwork-ui/apps/datahub/app.providers.ts'
 import { NoopTitleStrategy } from './noop-title-strategy.service'
+import { MetadataQualityComponent } from '@geonetwork-ui/ui/elements'
+type WebComponentConstructor = new (...args: any[]) => BaseComponent | GnDatahubComponent | MetadataQualityComponent;
 
 const CUSTOM_ELEMENTS: [
-  new (...args) => BaseComponent | GnDatahubComponent,
+  WebComponentConstructor,
   string,
 ][] = [
   [GnFacetsComponent, 'gn-facets'],
@@ -68,6 +70,7 @@ const CUSTOM_ELEMENTS: [
   [GnFigureDatasetsComponent, 'gn-figure-datasets'],
   [GnDatasetViewMapComponent, 'gn-dataset-view-map'],
   [GnMetadataQualityComponent, 'gn-metadata-quality'],
+  [MetadataQualityComponent, 'gn-ui-metadata-quality'],
   [GnDatahubComponent, 'gn-datahub'],
 ]
 
@@ -114,6 +117,7 @@ const CUSTOM_ELEMENTS: [
         },
       }
     ),
+    MetadataQualityComponent,
   ],
   providers: [
     importProvidersFrom(