editor: fix select sort

The "Select an option…" option remains displayed when values are selected. This option is used to reset the data. * Keeps selected items in order. * Improves the select menu by always displaying the menu item "Select an option…". * Fixes missing translation. * closes #568. Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
rero · Dec 20, 2023 · 43f892b · 43f892b
1 parent d8ee92e
commit 43f892b
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 22 deletions.
diff --git a/projects/ng-core-tester/src/app/record/editor/schema.json b/projects/ng-core-tester/src/app/record/editor/schema.json
@@ -27,6 +27,7 @@
     "select",
     "selectGroup",
     "selectMultiple",
+    "selectMultipleWithLabelTranslation",
     "markdown",
     "textarea",
     "email",
@@ -798,6 +799,45 @@
         }
       }
     },
+    "selectMultipleWithLabelTranslation": {
+      "title": "Multiple select with label translation",
+      "type": "array",
+      "minItems": 1,
+      "uniqueItems": true,
+      "items": {
+        "type": "string",
+        "enum": [
+          "library",
+          "deutsch",
+          "createdYear",
+          "location"
+        ]
+      },
+      "widget": {
+        "formlyConfig": {
+          "templateOptions": {
+            "options": [
+              {
+                "label": "library",
+                "value": "library"
+              },
+              {
+                "label": "created year",
+                "value": "createdYear"
+              },
+              {
+                "label": "German",
+                "value": "deutsch"
+              },
+              {
+                "label": "location",
+                "value": "location"
+              }
+            ]
+          }
+        }
+      }
+    },
     "markdown": {
       "title": "Markdown",
       "type": "string",

diff --git a/projects/ng-core-tester/src/assets/i18n/de.json b/projects/ng-core-tester/src/assets/i18n/de.json
@@ -1,3 +1,7 @@
 {
-  "search": "Eine Ressource suchen"
+  "search": "Eine Ressource suchen",
+  "location": "Standort",
+  "created year": "Erstellungsjahr",
+  "library": "Bibliothek",
+  "German": "Deutsch"
 }
diff --git a/projects/ng-core-tester/src/assets/i18n/en.json b/projects/ng-core-tester/src/assets/i18n/en.json
@@ -1,2 +1,6 @@
 {
+  "location": "Location",
+  "created year": "Creation year",
+  "library": "Library",
+  "German": "German"
 }
diff --git a/projects/ng-core-tester/src/assets/i18n/fr.json b/projects/ng-core-tester/src/assets/i18n/fr.json
@@ -1,3 +1,7 @@
 {
-  "search": "Rechercher une ressource"
+  "search": "Rechercher une ressource",
+  "location": "Localisation",
+  "created year": "Année de création",
+  "library": "Bibliothèque",
+  "German": "Allemand"
 }
diff --git a/projects/ng-core-tester/src/assets/i18n/it.json b/projects/ng-core-tester/src/assets/i18n/it.json
@@ -1,3 +1,7 @@
 {
-  "search": "Ricerca di una risorsa"
+  "search": "Ricerca di una risorsa",
+  "location": "Localizzazione",
+  "created year": "Anno di creazione",
+  "library": "Biblioteca",
+  "German": "Tedesco"
 }
diff --git a/projects/rero/ng-core/src/lib/record/editor/extensions.ts b/projects/rero/ng-core/src/lib/record/editor/extensions.ts
@@ -542,9 +542,9 @@ export function registerNgCoreFormlyExtension(
                 ? translate.instant(_('strictly {{counter}}'), { counter: min })
                 : translate.instant(_('between {{min}} and {{max}}'), { min, max });
           } else if (min > 0) {
-            counterMessage = translate.instant('minimum {{min}}', { min });
+            counterMessage = translate.instant(_('minimum {{min}}'), { min });
           } else if (max < Infinity) {
-            counterMessage = translate.instant('maximum {{max}}', { max });
+            counterMessage = translate.instant(_('maximum {{max}}'), { max });
           }
 
           // Combine string to return a full sentence

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/custom-select/custom-select.component.html b/projects/rero/ng-core/src/lib/record/editor/type/custom-select/custom-select.component.html
@@ -19,15 +19,18 @@
     <button id="button-basic" dropdownToggle type="button"
             class="btn btn-outline-primary btn-block dropdown-toggle px-3 text-left d-flex align-items-center"
             aria-controls="dropdown-basic">
-      {{ selectedOptions.length ? selectedValuesAsString : ('Select an option' | translate) }}
+      {{ selectedOptions.length ? selectedValuesAsString : ('Select an option…' | translate) }}
       <span class="caret ml-auto"></span>
     </button>
     <div id="dropdown-basic" *dropdownMenu class="dropdown-menu w-100" role="menu" aria-labelledby="button-basic">
       <div class="px-4 py-2" *ngIf="filter || filteredOptions.length > to.minItemsToDisplaySearch">
         <input type="text" ngCoreAutofocus class="form-control form-control-sm" (input)="onFilterChange($event.target.value)"
-          [value]="filter" [placeholder]="'Filter...' | translate" />
+          [value]="filter" [placeholder]="'Filter…' | translate" />
       </div>
       <ng-container *ngIf="filteredOptions.length; else noResult">
+        <a *ngIf="selectedOptions.length" class="dropdown-item"
+          (click)="$event.preventDefault(); selectOption(); dropdown.hide()" translate
+        >Select an option…</a>
         <ng-container *ngFor="let option of filteredOptions">
           <a class="dropdown-item" [ngClass]="{ active: isOptionSelected(option), disabled: option.disabled }" href="#"
             (click)="$event.preventDefault(); selectOption(option); dropdown.hide()"

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/custom-select/custom-select.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/custom-select/custom-select.component.ts
@@ -34,7 +34,7 @@ export class CustomSelectFieldComponent extends FieldType implements OnDestroy,
   defaultOptions = {
     templateOptions: {
       minItemsToDisplaySearch: 10,
-      sort: true,
+      sort: true
     },
   };
 
@@ -54,7 +54,7 @@ export class CustomSelectFieldComponent extends FieldType implements OnDestroy,
    * Constructor
    *
    * @param _changeDetectorRef Change detector reference.
-   * @param _translateService Translate servive.
+   * @param _translateService Translate service.
    */
   constructor(private _changeDetectorRef: ChangeDetectorRef, private _translateService: TranslateService) {
     super();
@@ -140,6 +140,19 @@ export class CustomSelectFieldComponent extends FieldType implements OnDestroy,
    * @returns The selected values as string.
    */
   get selectedValuesAsString(): string {
+    if (Array.isArray(this.formControl.value)) {
+      // Keeps selected items in order
+      const data = [];
+      let selectedOption: SelectOption;
+      const selectedValue = this.formControl.value.filter((v: string) => v !== undefined);
+      selectedValue.forEach((val: string) => {
+        selectedOption = this.selectedOptions
+          .filter((option: any) => option.value === val).pop();
+        data.push(selectedOption.translatedLabel);
+      });
+      return data.join(', ');
+    }
+
     return this.selectedOptions
       .map((option: SelectOption) => option.translatedLabel)
       .filter((value: string, index: number, self) => self.indexOf(value) === index)
@@ -160,21 +173,27 @@ export class CustomSelectFieldComponent extends FieldType implements OnDestroy,
    *
    * @param option The clicked option.
    */
-  selectOption(option: SelectOption): void {
-    let value = this.formControl.value;
-
-    if (this.to.multiple === true) {
-      const index = value.indexOf(option.value, 0);
-      // Option is not yet selected, we add it.
-      if (index === -1) {
-        value.push(option.value);
-      }
-      // Option is selected, we delete it.
-      else {
-        value.splice(index, 1);
+  selectOption(option?: SelectOption): void {
+    let { value } = this.formControl;
+
+    if (option) {
+      if (this.to.multiple === true) {
+        const index = value.indexOf(option.value, 0);
+        // Option is not yet selected, we add it.
+        if (index === -1) {
+          value.push(option.value);
+        }
+        // Option is selected, we delete it.
+        else {
+          value.splice(index, 1);
+        }
+      } else {
+        value = option.value;
       }
+    } else if (this.to.multiple === true) {
+      value = [];
     } else {
-      value = option.value;
+      value = undefined;
     }
 
     this.formControl.patchValue(value);