fix(editor): translations on formly/primeng components

Co-Authored-by: Bertrand Zuchuat <[email protected]>

Author: Garfield-fr

projects/ng-core-tester/src/app/record/editor/recordData.json

@@ -17,7 +17,6 @@
       "readonly_changeable": "Value 1",
       "hide_with_required_expression_control": "Optional",
       "treeSelect": "node5",
-      "selectMultiple": ["value2", "value3"],
       "markdown": "Hello **world**.\nGreat day.",
       "array_with_multicheckbox": ["checkbox1", "checkbox2"],
       "input_with_default_value": "slrofar6uh",

projects/ng-core-tester/src/app/record/editor/schema.json

@@ -1034,10 +1034,6 @@
       "type": "array",
       "minItems": 1,
       "uniqueItems": true,
-      "default": [
-        "value2",
-        "value3"
-      ],
       "items": {
         "type": "string",
         "enum": [
@@ -1077,12 +1073,12 @@
       "items": {
         "type": "string",
         "enum": [
-          "Epicea",
-          "Baobab",
-          "Foxglove",
-          "Crocus",
-          "Heather",
-          "Daffodil"
+          "epicea",
+          "baobab",
+          "foxglove",
+          "crocus",
+          "heather",
+          "daffodil"
         ]
       },
       "widget": {
@@ -1097,7 +1093,7 @@
                 "items": [
                   {
                     "label": "Epicea",
-                    "value": "Epicea"
+                    "value": "epicea"
                   },
                   {
                     "label": "Baobab",
@@ -1280,7 +1276,8 @@
         "formlyConfig": {
           "type": "passwordGenerator",
           "props": {
-            "enabledEditMode": true
+            "enabledEditMode": true,
+            "styleClass": "surface-100"
           }
         }
       }

projects/ng-core-tester/src/app/record/editor/simple-record-data.json

@@ -8,6 +8,7 @@
       "$schema": "https://bib.rero.ch/schemas/demo/demo.json",
       "pid": "normal",
       "required": "value required",
-      "textarea": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker."
+      "textarea": "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.",
+      "select": "car"
   }
 }

projects/ng-core-tester/src/app/record/editor/simple-schema.json

@@ -10,7 +10,8 @@
     "optional",
     "required",
     "essential",
-    "textarea"
+    "textarea",
+    "select"
   ],
   "properties": {
     "$schema": {
@@ -72,6 +73,22 @@
           }
         }
       }
+    },
+    "select": {
+      "title": "Product",
+      "type": "string",
+      "widget": {
+        "formlyConfig": {
+          "type": "select",
+          "props": {
+            "options": [
+              { "label": "House", "value": "house" },
+              { "label": "Car", "value": "car" },
+              { "label": "Window", "value": "window" }
+            ]
+          }
+        }
+      }
     }
   }
 }

projects/ng-core-tester/src/assets/i18n/de.json

@@ -26,5 +26,29 @@
   "Add mode": "hinzufügenmodus",
   "Please select a type": "Bitte wählen Sie einen Typ",
   "Full-text": "Volltext",
-  "Main title": "Haupttitel"
+  "Main title": "Haupttitel",
+  "House": "Haus",
+  "Car": "Auto",
+  "Window": "Fenster",
+  "Product": "Produkt",
+  "Property 1": "Eigentum 1",
+  "Property 2": "Eigentum 2",
+  "Value 1": "Wert 1",
+  "Value 2": "Wert 2",
+  "Value 3": "Wert 3",
+  "Select…": "Wählen…",
+  "Default": "Standard",
+  "group-preferred": "Bevorzugt",
+  "English": "Englisch",
+  "Node 1": "Knoten 1",
+  "Node 2": "Knoten 2",
+  "Node 3": "Knoten 3",
+  "Node 4": "Knoten 4",
+  "Node 5": "Knoten 5",
+  "Node 6": "Knoten 6",
+  "Node 7": "Knoten 7",
+  "Checkbox 1": "Checkbox 1",
+  "Checkbox 2": "Checkbox 2",
+  "Checkbox 3": "Checkbox 3",
+  "Checkbox 4": "Checkbox 4"
 }

projects/ng-core-tester/src/assets/i18n/en.json

@@ -6,5 +6,29 @@
   "info": "Info",
   "success": "Success",
   "error": "Error",
-  "warn": "Warn"
+  "warn": "Warn",
+  "House": "House",
+  "Car": "Car",
+  "Window": "Window",
+  "Product": "Product",
+  "Property 1": "Property 1",
+  "Property 2": "Property 2",
+  "Value 1": "Value 1",
+  "Value 2": "Value 2",
+  "Value 3": "Value 3",
+  "Select…": "Select…",
+  "Default": "Default",
+  "group-preferred": "Preferred",
+  "English": "English",
+  "Node 1": "Node 1",
+  "Node 2": "Node 2",
+  "Node 3": "Node 3",
+  "Node 4": "Node 4",
+  "Node 5": "Node 5",
+  "Node 6": "Node 6",
+  "Node 7": "Node 7",
+  "Checkbox 1": "Checkbox 1",
+  "Checkbox 2": "Checkbox 2",
+  "Checkbox 3": "Checkbox 3",
+  "Checkbox 4": "Checkbox 4"
 }

projects/ng-core-tester/src/assets/i18n/fr.json

@@ -42,5 +42,29 @@
   "Add mode": "Mode ajout",
   "Please select a type": "Veuillez sélectionner un type",
   "Full-text": "Texte complet",
-  "Main title": "Titre principal"
+  "Main title": "Titre principal",
+  "House": "Maison",
+  "Car": "Voiture",
+  "Window": "Fenêtre",
+  "Product": "Produit",
+  "Property 1": "Propriété 1",
+  "Property 2": "Propriété 2",
+  "Value 1": "Valeur 1",
+  "Value 2": "Valeur 2",
+  "Value 3": "Valeur 3",
+  "Select…": "Sélectionner…",
+  "Default": "Défaut",
+  "group-preferred": "Préféré",
+  "English": "Anglais",
+  "Node 1": "Nœud 1",
+  "Node 2": "Nœud 2",
+  "Node 3": "Nœud 3",
+  "Node 4": "Nœud 4",
+  "Node 5": "Nœud 5",
+  "Node 6": "Nœud 6",
+  "Node 7": "Nœud 7",
+  "Checkbox 1": "Case à cocher 1",
+  "Checkbox 2": "Case à cocher 2",
+  "Checkbox 3": "Case à cocher 3",
+  "Checkbox 4": "Case à cocher 4"
 }

projects/ng-core-tester/src/assets/i18n/it.json

@@ -26,5 +26,29 @@
   "Add mode": "Aggiungi modalità",
   "Please select a type": "Selezionare un tipo",
   "Full-text": "Testo integrale",
-  "Main title": "Titolo principale"
+  "Main title": "Titolo principale",
+  "House": "Casa",
+  "Car": "Auto",
+  "Window": "Finestra",
+  "Product": "Prodotto",
+  "Property 1": "Proprietà 1",
+  "Property 2": "Proprietà 2",
+  "Value 1": "Valore 1",
+  "Value 2": "Valore 2",
+  "Value 3": "Valore 3",
+  "Select…": "Selezionare…",
+  "Default": "Predefinito",
+  "group-preferred": "Preferito",
+  "English": "Inglese",
+  "Node 1": "Nodo 1",
+  "Node 2": "Nodo 2",
+  "Node 3": "Nodo 3",
+  "Node 4": "Nodo 4",
+  "Node 5": "Nodo 5",
+  "Node 6": "Nodo 6",
+  "Node 7": "Nodo 7",
+  "Checkbox 1": "Casella 1",
+  "Checkbox 2": "Casella 2",
+  "Checkbox 3": "Casella 3",
+  "Checkbox 4": "Casella 4"
 }

projects/rero/ng-core/src/lib/record/editor/extensions.ts

@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020-2024 RERO
+ * Copyright (C) 2020-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,13 +17,12 @@
 import { inject } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { FormlyExtension, FormlyFieldConfig } from '@ngx-formly/core';
+import { FormlyExtension, FormlyFieldConfig, FormlyFieldProps } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
-import { isObservable, of } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { isObservable } from 'rxjs';
+import { Validators } from '../../validator/validators';
 import { RecordService } from '../record.service';
 import { isEmpty, removeEmptyValues } from './utils';
-import { Validators } from '../../validator/validators';
 
 export class NgCoreFormlyExtension {
 
@@ -346,14 +345,7 @@ export class TranslateExtension implements FormlyExtension {
 
   protected translate: TranslateService = inject(TranslateService);
 
-  /**
-   * Translate some fields before populating the form.
-   *
-   * It translates the label, the description and the placeholder.
-   * @param field formly field config
-   */
-
-  prePopulate(field: FormlyFieldConfig): void {
+  prePopulate(field: FormlyFieldConfig<FormlyFieldProps & { [additionalProperties: string]: any; }>): void {
     const props: any = field.props || {};
 
     // translate only once
@@ -393,36 +385,11 @@ export class TranslateExtension implements FormlyExtension {
     if (props.addonRight) {
       props.addonRightUntranslated = props.addonRight;
     }
-    this.processAllAddon(props);
-    this.translate.onLangChange.subscribe(() => this.processAllAddon(props));
-
-    // Options
-    if (props.options && (isObservable(props.options) || props.options.some((o: any) => 'label' in o && 'value' in o))) {
-          props.options = isObservable(props.options) ? props.options : of(props.options);
-          props.options = props.options.pipe(
-            map((options: any[]) => {
-              if (options?.length > 0) {
-                options.map((opt) => this.translateOptionsLabel(opt));
-              }
-              return options;
-            })
-          );
-    }
-  }
 
-  private translateOptionsLabel(node) {
-    if (node?.label) {
-      node.label = this.translate.instant(node.label);
-    }
-    if (node?.children?.length > 0) {
-      node.children.map((child) => this.translateOptionsLabel(child));
-    }
-    if (node?.items?.length > 0) {
-      node.items.map((child) => this.translateOptionsLabel(child));
-    }
-    if (node?.value && !node?.data) {
-      node.data = node.value;
-    }
+    this.processAllAddon(props);
+    this.translate.onLangChange.subscribe(() => {
+      this.processAllAddon(props);
+    });
   }
 
   private processAllAddon(props: any): void {
@@ -439,6 +406,63 @@ export class TranslateExtension implements FormlyExtension {
   }
 }
 
+export class FormOptionsProcessExtension implements FormlyExtension {
+  prePopulate(field: FormlyFieldConfig<FormlyFieldProps & { [additionalProperties: string]: any; }>): void {
+    // Process options
+    if (field.props?.options && !isObservable(field.props?.options)) {
+      field.props.options = this.processOptions(field.props);
+    }
+  }
+
+  private processOptions(props: any): any[] {
+    this.processUntranslatedLabel(props.options);
+    const preferredOptions = props.options.filter((option: any) => option.preferred);
+    if (preferredOptions.length > 0) {
+      const options = [];
+      props.group = true;
+      const otherOptions = props.options.filter((option: any) => !option.preferred);
+      options.push({
+        label: 'group-preferred',
+        untranslatedLabel: 'group-preferred',
+        items: props.sort ? this.sortOptions(preferredOptions) : preferredOptions
+      });
+      options.push({
+        label: 'group-other',
+        untranslatedLabel: 'group-other',
+        items: props.sort ? this.sortOptions(otherOptions) : otherOptions
+      });
+      return options;
+    } else {
+
+      return props.sort ? this.sortOptions(props.options) : props.options
+    }
+  }
+
+  private processUntranslatedLabel(options: any[]): void {
+    options.map((option: any) => {
+      option.untranslatedLabel = option.label;
+      if (option.items) {
+        this.processUntranslatedLabel(option.items);
+      }
+      if (option.children) {
+        this.processUntranslatedLabel(option.children);
+      }
+    });
+  }
+
+  private sortOptions(options: any) {
+    options = options.sort((a: any, b: any) => a.label.localeCompare(b.label));
+    if (options.filter((option: any) => option.items).length > 0) {
+      options.forEach((option: any) => {
+        if (option.items) {
+          return this.sortOptions(option.items);
+        }
+      });
+    }
+    return options;
+  }
+}
+
 /**
  * To register an ngx-formly translations extension.
  *
@@ -566,6 +590,11 @@ export function registerNgCoreFormlyExtension(translate: TranslateService, recor
       },
     ],
     extensions: [
+      {
+        name: 'form-options',
+        extension: new FormOptionsProcessExtension(),
+        priority: 12
+      },
       {
         name: 'translate',
         extension: new TranslateExtension(),