From a2b9a8a48b176cdb5a7a9f866080735380384ff8 Mon Sep 17 00:00:00 2001 From: Bertrand Zuchuat Date: Tue, 10 Sep 2024 11:42:37 +0200 Subject: [PATCH] chore: improvement * Adds sort options. * Removes translate module on tree-select. * Adds new examples on editor. Co-Authored-by: Bertrand Zuchuat --- .../src/app/record/editor/schema.json | 177 +++++++++++++++++- .../primeng/multi-select/multi-select.spec.ts | 3 +- .../primeng/multi-select/multi-select.ts | 36 ++-- .../formly/primeng/select/select.spec.ts | 4 +- .../editor/formly/primeng/select/select.ts | 43 +++-- .../formly/primeng/tree-select/tree-select.ts | 10 +- 6 files changed, 229 insertions(+), 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 index a48c3357..909498e2 100644 --- 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 index 3a62b521..8345e9ed 100644 --- 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 index 9b0ecc86..c557828f 100644 --- 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 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 index fe95ee83..6f0caf44 100644 --- 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' diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts index ed030864..666c5921 100644 --- a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts +++ b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts @@ -31,19 +31,15 @@ export interface ISelectProps extends FormlyFieldProps, FormlyFieldSelectProps { emptyFilterMessage?: string; emptyMessage?: string; filter: boolean; - filterBy: string; 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'; @@ -58,6 +54,7 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig > /** Default properties */ defaultOptions: Partial> = { + defaultValue: null, props: { class: 'w-full', editable: false, filter: false, - filterBy: 'label', 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', - placeholder: 'Select an option...' } }; @@ -121,7 +113,24 @@ export class SelectComponent extends FieldType> 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/tree-select/tree-select.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/tree-select/tree-select.ts index 993b84b6..feb54847 100644 --- a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/tree-select/tree-select.ts +++ b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/tree-select/tree-select.ts @@ -15,10 +15,9 @@ * along with this program. If not, see . */ import { CommonModule } from '@angular/common'; -import { Component, NgModule, OnInit, Type, inject } from '@angular/core'; +import { Component, NgModule, OnInit, Type } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FieldType, FormlyFieldConfig, FormlyFieldProps, FormlyModule } from '@ngx-formly/core'; -import { TranslateModule, TranslateService } from '@ngx-translate/core'; import { TreeNode } from 'primeng/api'; import { TreeNodeSelectEvent } from 'primeng/tree'; import { TreeSelectModule as PrimeNgTreeSelectModule } from 'primeng/treeselect'; @@ -35,6 +34,7 @@ export interface ITreeSelectProps extends FormlyFieldProps { filterPlaceholder?: string; panelClass: string; panelStyleClass: string; + placeholder?: string; scrollHeight: string; showClear: boolean; variant: string; @@ -59,7 +59,7 @@ export interface FormlyTreeSelectFieldConfig extends FormlyFieldConfig