chore: improvement

* Adds sort options. * Removes translate module on tree-select. * Adds new examples on editor. Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Sep 10, 2024 · a2b9a8a · a2b9a8a
1 parent 45c779b
commit a2b9a8a
Show file tree

Hide file tree

Showing 6 changed files with 229 additions and 44 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
@@ -31,7 +31,10 @@
     "array_of_objects_with_sub_objects",
     "treeSelect",
     "selectGroup",
+    "selectWithSort",
+    "selectGroupWithSort",
     "selectMultiple",
+    "selectMultipleWithGroup",
     "selectMultipleWithLabelTranslation",
     "markdown",
     "textarea",
@@ -809,6 +812,7 @@
         "formlyConfig": {
           "type": "tree-select",
           "props": {
+            "placeholder": "Select an option…",
             "options": [
               {
                 "label": "Node 1",
@@ -858,6 +862,7 @@
       "widget": {
         "formlyConfig": {
           "props": {
+            "placeholder": "Select an option…",
             "group": true,
             "options": [
               {
@@ -887,6 +892,105 @@
         }
       }
     },
+    "selectWithSort": {
+      "title": "Select with sort",
+      "type": "string",
+      "enum": [
+        "baobab",
+        "cypress",
+        "epicea",
+        "larch",
+        "tree"
+      ],
+      "widget": {
+        "formlyConfig": {
+          "props": {
+            "placeholder": "Select an option…",
+            "sort": true,
+            "sortOrder": "asc",
+            "options": [
+              {
+                "label": "Tree",
+                "value": "tree"
+              },
+              {
+                "label": "Baobab",
+                "value": "baobab"
+              },
+              {
+                "label": "Cypress",
+                "value": "cypress"
+              },
+              {
+                "label": "Epicea",
+                "value": "epicea"
+              },
+              {
+                "label": "Larch",
+                "value": "larch"
+              }
+            ]
+          }
+        }
+      }
+    },
+    "selectGroupWithSort": {
+      "title": "Select with group and sort",
+      "type": "string",
+      "enum": [
+        "Epicea",
+        "Baobab",
+        "Foxglove",
+        "Crocus",
+        "Heather",
+        "Daffodil"
+      ],
+      "widget": {
+        "formlyConfig": {
+          "props": {
+            "placeholder": "Select an option…",
+            "group": true,
+            "sort": true,
+            "options": [
+              {
+                "label": "Tree",
+                "items": [
+                  {
+                    "label": "Epicea",
+                    "value": "Epicea"
+                  },
+                  {
+                    "label": "Baobab",
+                    "value": "baobab"
+                  }
+                ]
+              },
+              {
+                "label": "Flower",
+                "items": [
+                  {
+                    "label": "Foxglove",
+                    "value": "foxglove"
+                  },
+                  {
+                    "label": "Crocus",
+                    "value": "crocus"
+                  },
+                  {
+                    "label": "Heather",
+                    "value": "heather"
+                  },
+                  {
+                    "label": "Daffodil",
+                    "value": "daffodil"
+                  }
+                ]
+              }
+            ]
+          }
+        }
+      }
+    },
     "selectMultiple": {
       "title": "Select Multiple",
       "type": "array",
@@ -908,15 +1012,16 @@
         "formlyConfig": {
           "type": "multi-select",
           "props": {
+            "sort": true,
             "options": [
-              {
-                "label": "Value 1",
-                "value": "value1"
-              },
               {
                 "label": "Value 2",
                 "value": "value2"
               },
+              {
+                "label": "Value 1",
+                "value": "value1"
+              },
               {
                 "label": "Value 3",
                 "value": "value3"
@@ -926,6 +1031,69 @@
         }
       }
     },
+    "selectMultipleWithGroup": {
+      "title": "Select Multiple with group",
+      "type": "array",
+      "minItems": 1,
+      "uniqueItems": true,
+      "items": {
+        "type": "string",
+        "enum": [
+          "Epicea",
+          "Baobab",
+          "Foxglove",
+          "Crocus",
+          "Heather",
+          "Daffodil"
+        ]
+      },
+      "widget": {
+        "formlyConfig": {
+          "type": "multi-select",
+          "props": {
+            "placeholder": "Select an option…",
+            "group": true,
+            "sort": true,
+            "options": [
+              {
+                "label": "Tree",
+                "items": [
+                  {
+                    "label": "Epicea",
+                    "value": "Epicea"
+                  },
+                  {
+                    "label": "Baobab",
+                    "value": "baobab"
+                  }
+                ]
+              },
+              {
+                "label": "Flower",
+                "items": [
+                  {
+                    "label": "Foxglove",
+                    "value": "foxglove"
+                  },
+                  {
+                    "label": "Crocus",
+                    "value": "crocus"
+                  },
+                  {
+                    "label": "Heather",
+                    "value": "heather"
+                  },
+                  {
+                    "label": "Daffodil",
+                    "value": "daffodil"
+                  }
+                ]
+              }
+            ]
+          }
+        }
+      }
+    },
     "selectMultipleWithLabelTranslation": {
       "title": "Multiple select with label translation",
       "type": "array",
@@ -944,6 +1112,7 @@
         "formlyConfig": {
           "type": "multi-select",
           "props": {
+            "placeholder": "Select an option…",
             "options": [
               {
                 "label": "library",

diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-select/multi-select.spec.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-select/multi-select.spec.ts
@@ -47,12 +47,11 @@ describe('MultiSelectComponent', () => {
         filterMatchMode: 'contains',
         group: false,
         options: [],
-        optionGroupChildren: 'items',
-        optionGroupLabel: 'label',
         panelStyleClass: 'w-full',
         required: false,
         scrollHeight: '250px',
         showClear: false,
+        sort: false,
         styleClass: 'w-full mb-1',
         tooltipPosition: 'top',
         tooltipPositionStyle: 'absolute',

diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-select/multi-select.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-select/multi-select.ts
@@ -34,15 +34,12 @@ export interface IMultiSelectProps extends FormlyFieldProps, FormlyFieldSelectPr
   filterMatchMode: 'endsWith' | 'startsWith' | 'contains' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte';
   group: boolean;
   loadingIcon?: string;
-  optionDisabled?: string;
-  optionGroupChildren: string;
-  optionGroupLabel: string;
-  optionLabel?: string;
-  optionValue?: string;
   panelStyleClass?: string;
+  placeholder?: string;
   required: boolean;
   scrollHeight: string;
   showClear?: boolean;
+  sort: boolean;
   styleClass?: string;
   tooltip?: string;
   tooltipPosition: 'left' | 'top' | 'bottom' | 'right';
@@ -66,16 +63,14 @@ export interface FormlyMultiSelectFieldConfig extends FormlyFieldConfig<IMultiSe
       [emptyFilterMessage]="props.emptyFilterMessage"
       [emptyMessage]="props.emptyMessage"
       [filter]="props.filter"
+      filterBy="label"
       [formControl]="formControl"
       [formlyAttributes]="field"
       [group]="props.group"
       [loadingIcon]="props.loadingIcon"
       [options]="selectOptions"
-      [optionDisabled]="props.optionDisabled"
-      [optionGroupChildren]="props.optionGroupChildren"
-      [optionGroupLabel]="props.optionGroupLabel"
-      [optionLabel]="props.optionLabel"
-      [optionValue]="props.optionValue"
+      optionLabel="label"
+      optionValue="value"
       [panelStyleClass]="props.panelStyleClass"
       [placeholder]="props.placeholder"
       [required]="props.required"
@@ -100,12 +95,11 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
       filter: true,
       filterMatchMode: 'contains',
       group: false,
-      optionGroupChildren: 'items',
-      optionGroupLabel: 'label',
       panelStyleClass: 'w-full',
       required: false,
       scrollHeight: '250px',
       showClear: false,
+      sort: false,
       styleClass: 'w-full mb-1',
       tooltipPosition: 'top',
       tooltipPositionStyle: 'absolute',
@@ -119,7 +113,23 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
     if (!isObservable(this.props.options)) {
       this.props.options = of(this.props.options);
     }
-    this.props.options.subscribe((options: any) => this.selectOptions = options);
+    this.props.options.subscribe((options: any) => this.selectOptions = this.props.sort
+      ? this.sortOptions(options)
+      : options
+    );
+  }
+
+  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;
   }
 }
 

diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.spec.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.spec.ts
@@ -43,18 +43,18 @@ describe('SelectComponent', () => {
         class: 'w-full',
         editable: false,
         filter: false,
+        filterBy: 'label',
         filterMatchMode: 'contains',
         group: false,
         options: [
           { label: 'Foo', value: 'foo' },
           { label: 'Bar', value: 'bar' },
         ],
-        optionGroupChildren: 'items',
-        optionGroupLabel: 'label',
         panelStyleClass: 'w-full',
         required: false,
         scrollHeight: '250px',
         showClear: false,
+        sort: false,
         styleClass: 'w-full mb-1',
         tooltipPosition: 'top',
         tooltipPositionStyle: 'absolute'