feat(editor): add multiselect type

* Adds a new multi select type. * Updates dependencies. * Changes link on documentation. Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · May 23, 2024 · 9ae6721 · 9ae6721
1 parent 0ede8c8
commit 9ae6721
Show file tree

Hide file tree

Showing 15 changed files with 527 additions and 13 deletions.
diff --git a/angular.json b/angular.json
@@ -67,7 +67,7 @@
             ],
             "styles": [
               "projects/ng-core-tester/src/styles.scss",
-              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeflex/primeflex.min.css",
               "node_modules/primeicons/primeicons.css",

diff --git a/projects/ng-core-tester/src/app/record/editor/schema.json b/projects/ng-core-tester/src/app/record/editor/schema.json
@@ -44,7 +44,10 @@
     "name_with_definition",
     "field_expressions",
     "field_with_addon_left_right",
-    "field_radio_button_inline"
+    "field_radio_button_inline",
+    "multiSelect",
+    "multiSelect_preferred",
+    "multiSelect_with_group"
   ],
   "properties": {
     "$schema": {
@@ -1168,6 +1171,164 @@
           }
         }
       }
+    },
+    "multiSelect": {
+      "title": "Multiple select",
+      "type": "array",
+      "minItems": 2,
+      "uniqueItems": true,
+      "default": [
+        "value2",
+        "value3"
+      ],
+      "items": {
+        "type": "string",
+        "enum": [
+          "value1",
+          "value2",
+          "value3",
+          "value4",
+          "value5"
+        ]
+      },
+      "widget": {
+        "formlyConfig": {
+          "type": "multiSelect",
+          "props": {
+            "placeholder": "Select a value…",
+            "filterPlaceHolder": "Enter a term",
+            "options": [
+              {
+                "label": "Value 1",
+                "value": "value1"
+              },
+              {
+                "label": "Value 2",
+                "value": "value2"
+              },
+              {
+                "label": "Value 3",
+                "value": "value3"
+              },
+              {
+                "label": "Value 4",
+                "value": "value4"
+              },
+              {
+                "label": "Value 5",
+                "value": "value5"
+              }
+            ]
+          }
+        }
+      }
+    },
+    "multiSelect_preferred": {
+      "title": "Multiple select with preferred values",
+      "type": "array",
+      "minItems": 2,
+      "uniqueItems": true,
+      "default": [
+        "value2",
+        "value3"
+      ],
+      "items": {
+        "type": "string",
+        "enum": [
+          "value1",
+          "value2",
+          "value3",
+          "value4",
+          "value5"
+        ]
+      },
+      "widget": {
+        "formlyConfig": {
+          "type": "multiSelect",
+          "props": {
+            "placeholder": "Select a value…",
+            "filterPlaceHolder": "Enter a term",
+            "options": [
+              {
+                "label": "Value 1",
+                "value": "value1",
+                "preferred": true
+              },
+              {
+                "label": "Value 2",
+                "value": "value2",
+                "preferred": true
+              },
+              {
+                "label": "Value 3",
+                "value": "value3"
+              },
+              {
+                "label": "Value 4",
+                "value": "value4"
+              },
+              {
+                "label": "Value 5",
+                "value": "value5"
+              }
+            ]
+          }
+        }
+      }
+    },
+    "multiSelect_with_group": {
+      "title": "Multiple select with group",
+      "type": "array",
+      "minItems": 1,
+      "uniqueItems": true,
+      "default": [
+        "value1"
+      ],
+      "items": {
+        "type": "string",
+        "enum": [
+          "value1",
+          "value2",
+          "value3",
+          "value4",
+          "value5"
+        ]
+      },
+      "widget": {
+        "formlyConfig": {
+          "type": "multiSelect",
+          "props": {
+            "placeholder": "Select a value…",
+            "filterPlaceHolder": "Enter a term",
+            "options": [
+              {
+                "label": "Value 1",
+                "value": "value1",
+                "group": "multiselect_group_a"
+              },
+              {
+                "label": "Value 2",
+                "value": "value2",
+                "group": "multiselect_group_a"
+              },
+              {
+                "label": "Value 3",
+                "value": "value3",
+                "group": "multiselect_group_b"
+              },
+              {
+                "label": "Value 4",
+                "value": "value4",
+                "group": "multiselect_group_b"
+              },
+              {
+                "label": "Value 5",
+                "value": "value5"
+              }
+            ]
+          }
+        }
+      }
     }
   },
   "definitions": {

diff --git a/projects/ng-core-tester/src/assets/i18n/de.json b/projects/ng-core-tester/src/assets/i18n/de.json
@@ -3,7 +3,12 @@
   "location": "Standort",
   "created year": "Erstellungsjahr",
   "library": "Bibliothek",
+  "multiselect_group_a": "MultiSelect Group A",
+  "multiselect_group_b": "MultiSelect Group B",
   "German": "Deutsch",
   "from": "Von",
-  "day(s)": "Tag(e)"
+  "day(s)": "Tag(e)",
+  "Other": "Andere",
+  "Preferred value": "Bevorzugter Wert",
+  "Preferred values": "Bevorzugte Werte"
 }
diff --git a/projects/ng-core-tester/src/assets/i18n/en.json b/projects/ng-core-tester/src/assets/i18n/en.json
@@ -2,5 +2,7 @@
   "location": "Location",
   "created year": "Creation year",
   "library": "Library",
+  "multiselect_group_a": "MultiSelect Group A",
+  "multiselect_group_b": "MultiSelect Group B",
   "German": "German"
 }
diff --git a/projects/ng-core-tester/src/assets/i18n/fr.json b/projects/ng-core-tester/src/assets/i18n/fr.json
@@ -8,13 +8,18 @@
   "[issue] Hidden with default": "[problème] Caché par défaut",
   "created year": "Année de création",
   "library": "Bibliothèque",
+  "multiselect_group_a": "MultiSelect Groupe A",
+  "multiselect_group_b": "MultiSelect Groupe B",
   "German": "Allemand",
   "from": "De",
   "day(s)": "jour(s)",
   "Example: Müller, Hans": "Exemple: Müller, Hans",
   "Example: 1955": "Exemple: 1955",
   "Example: 2012": "Exemple: 2012",
   "Example: physicist": "Exemple: physicien",
+  "Other": "Autres",
+  "Preferred value": "Valeur préférée",
+  "Preferred values": "Valeurs préférées",
   "Record only years.": "Enregistrement année seulement.",
   "Record only a number.": "Numéro de l'enregistrement seulement.",
   "Not present in the form, not present in the model.": "Non présent dans le formulaire, non présent dans le modèle.",

diff --git a/projects/ng-core-tester/src/assets/i18n/it.json b/projects/ng-core-tester/src/assets/i18n/it.json
@@ -3,7 +3,12 @@
   "location": "Localizzazione",
   "created year": "Anno di creazione",
   "library": "Biblioteca",
+  "multiselect_group_a": "MultiSelect Gruppo A",
+  "multiselect_group_b": "MultiSelect Gruppo B",
   "German": "Tedesco",
   "from": "Da",
-  "day(s)": "giorni"
+  "day(s)": "giorni",
+  "Other": "Altro",
+  "Preferred value": "Valore preferenziale",
+  "Preferred values": "Valori preferiti"
 }
diff --git a/projects/rero/ng-core/package.json b/projects/rero/ng-core/package.json
@@ -20,8 +20,8 @@
     "@angular/common": "^17.1.0",
     "@angular/core": "^17.1.0",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@ngx-formly/primeng": "^6.2.2",
-    "@ngx-formly/core": "^6.2.2",
+    "@ngx-formly/primeng": "^6.3.0",
+    "@ngx-formly/core": "^6.3.0",
     "@ngx-translate/core": "^15.0.0",
     "crypto-js": "^4.2.0",
     "font-awesome": "^4.7.0",
@@ -30,7 +30,10 @@
     "ngx-toastr": "^18.0.0",
     "easymde": "^2.18.0",
     "marked": "^10.0.0",
-    "@types/marked": "^4.0.8"
+    "@types/marked": "^4.0.8",
+    "primeflex": "^3.3.1",
+    "primeicons": "^6.0.1",
+    "primeng": "^17.15.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/projects/rero/ng-core/src/lib/manual_translations.ts b/projects/rero/ng-core/src/lib/manual_translations.ts
@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 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
@@ -21,3 +21,7 @@ _('de');
 _('en');
 _('fr');
 _('it');
+
+// Multi select
+_('Preferred value');
+_('Preferred values');
diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.scss b/projects/rero/ng-core/src/lib/record/editor/editor.component.scss
@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 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
@@ -200,4 +200,8 @@
     margin-bottom: 0 !important;
     margin-right: 4px;
   }
+
+  .p-multiselect {
+    width: 100%;
+  }
 }
diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.ts b/projects/rero/ng-core/src/lib/record/editor/editor.component.ts
@@ -466,7 +466,12 @@ export class EditorComponent extends AbstractCanDeactivateComponent implements O
 
           // initial population of arrays with a minItems constraints
           if (jsonSchema.minItems && !jsonSchema.hasOwnProperty('default')) {
-            field.defaultValue = new Array(jsonSchema.minItems);
+            const type = jsonSchema.widget?.formlyConfig?.type;
+            if(['multiSelect'].includes(type)) {
+              field.defaultValue = null;
+            } else {
+              field.defaultValue = new Array(jsonSchema.minItems);
+            }
           }
           // If 'format' is defined into the jsonSchema, use it as props to try a validation on this field.
           // See: `email.validator.ts` file

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/date-time-picker-type.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/date-time-picker-type.component.ts
@@ -19,7 +19,7 @@ import { Component, OnInit } from "@angular/core";
 import { FieldType, FormlyFieldConfig } from "@ngx-formly/core";
 import { FormlyFieldProps } from "@ngx-formly/primeng/form-field";
 
-// Calendar options: https://www.primefaces.org/primeng/calendar
+// Calendar options: https://primeng.org/calendar
 interface DateTimePickerProps extends FormlyFieldProps {
   styleClass?: string;
   inputStyleClass?: string;

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/multi-select/multi-select.component.html b/projects/rero/ng-core/src/lib/record/editor/type/multi-select/multi-select.component.html
@@ -0,0 +1,47 @@
+<!--
+  RERO angular core
+  Copyright (C) 2021-2024 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
+  the Free Software Foundation, version 3 of the License.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<p-multiSelect
+  [disabled]="props.disabled"
+  [display]="props.display"
+  [filter]="props.filter"
+  [filterPlaceHolder]="props.filterPlaceHolder"
+  [group]="isGroup"
+  [options]="optionsList"
+  [placeholder]="props.placeholder"
+  [readonly]="props.readonly"
+  [resetFilterOnHide]="props.resetFilterOnHide"
+  [showClear]="props.showClear"
+  [showHeader]="props.showHeader"
+  [scrollHeight]="props.scrollHeight"
+  [styleClass]="props.styleClass"
+  [class]="invalidClass"
+  [(ngModel)]="model"
+>
+  @if (isGroup) {
+    <ng-template let-group pTemplate="group">
+      <div class="flex align-items-center">
+          <span>{{ group.label }}</span>
+      </div>
+    </ng-template>
+  }
+</p-multiSelect>
+@if (showError && formControl.errors) {
+  <div class="p-error mt-2" role="alert">
+    <formly-validation-message [field]="field"></formly-validation-message>
+  </div>
+}