primeng: fix editor

* Fixes missing placeholder for grouped dropdown. * Fixes missing hidden fields in the label editor component. * Fixes display the autocomplete component on clear. Co-Authored-by: Johnny Mariéthoz <[email protected]> Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Feb 19, 2025 · 6699609 · 6699609
1 parent b575b74
commit 6699609
Show file tree

Hide file tree

Showing 9 changed files with 1,827 additions and 2,892 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/rero/ng-core/src/lib/prime-ng-core-module.ts b/projects/rero/ng-core/src/lib/prime-ng-core-module.ts
@@ -29,25 +29,26 @@ import { DialogModule } from 'primeng/dialog';
 import { DividerModule } from 'primeng/divider';
 import { DropdownModule } from "primeng/dropdown";
 import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
+import { FieldsetModule } from 'primeng/fieldset';
 import { InputGroupModule } from 'primeng/inputgroup';
 import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import { InputTextModule } from 'primeng/inputtext';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { ListboxModule } from 'primeng/listbox';
+import { MenuModule } from 'primeng/menu';
 import { MessagesModule } from 'primeng/messages';
 import { PaginatorModule } from 'primeng/paginator';
 import { PanelModule } from 'primeng/panel';
 import { RadioButtonModule } from "primeng/radiobutton";
+import { RippleModule } from 'primeng/ripple';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import { TabViewModule } from 'primeng/tabview';
 import { TagModule } from 'primeng/tag';
 import { TieredMenuModule } from 'primeng/tieredmenu';
 import { ToastModule } from 'primeng/toast';
 import { TooltipModule } from 'primeng/tooltip';
 import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
-import { FieldsetModule } from 'primeng/fieldset';
-import { MenuModule } from 'primeng/menu';
 
 
 @NgModule({
@@ -81,6 +82,7 @@ import { MenuModule } from 'primeng/menu';
     PaginatorModule,
     PanelModule,
     RadioButtonModule,
+    RippleModule,
     SplitButtonModule,
     TabViewModule,
     TagModule,

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
@@ -80,11 +80,11 @@ export interface FormlyMultiSelectFieldConfig extends FormlyFieldConfig<IMultiSe
       [tooltipPositionStyle]="props.tooltipPositionStyle"
       [tooltipStyleClass]="props.tooltipStyleClass"
       (onChange)="props.change && props.change(field, $event)"
+      (onClear)="clearValidators()"
     />
   `,
 })
 export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSelectProps>> implements OnInit {
-
   /** Default properties */
   defaultOptions: Partial<FormlyFieldConfig<IMultiSelectProps>> = {
     props: {
@@ -102,8 +102,8 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
       styleClass: 'w-full mb-1',
       tooltipPosition: 'top',
       tooltipPositionStyle: 'absolute',
-      variant: 'outlined'
-    }
+      variant: 'outlined',
+    },
   };
 
   selectOptions: any[] = [];
@@ -112,12 +112,17 @@ 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 = this.props.sort
-      ? this.sortOptions(options)
-      : options
+    this.props.options.subscribe(
+      (options: any) => (this.selectOptions = this.props.sort ? this.sortOptions(options) : options)
     );
   }
 
+  // Clear all validators except required.
+  clearValidators() {
+    const errors = this.formControl.errors;
+    this.formControl.setErrors(errors.required ? { required: true } : null);
+  }
+
   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) {
@@ -132,7 +137,6 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
   }
 }
 
-
 @NgModule({
   declarations: [MultiSelectComponent],
   imports: [
@@ -149,6 +153,6 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
       ],
     }),
   ],
-  exports: [MultiSelectComponent]
+  exports: [MultiSelectComponent],
 })
-export class NgCoreFormlyMultiSelectModule { }
+export class NgCoreFormlyMultiSelectModule {}
diff --git a/...o/ng-core/src/lib/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.ts b/...o/ng-core/src/lib/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.ts
@@ -43,20 +43,17 @@ export interface IRemoteAutoCompleteProps extends FormlyFieldProps {
 @Component({
   selector: 'ng-core-remote-autocomplete',
   template: `
-  <div class="flex w-full">
+  <div class="flex gap-1">
     @if (!field.formControl.value) {
       @if (props.filters?.options) {
-        <div class="flex">
           <p-dropdown
             [options]="props.filters.options"
             [ngModel]="props.filters.selected"
             (onChange)="changeFilter($event)"
           />
-        </div>
       }
-      <div class="flex w-full">
         <p-autoComplete
-          class="w-full"
+          class="flex-grow-1"
           styleClass="w-full"
           inputStyleClass="w-full"
           [scrollHeight]="props.scrollHeight"
@@ -83,7 +80,6 @@ export interface IRemoteAutoCompleteProps extends FormlyFieldProps {
             }
           </ng-template>
         </p-autoComplete>
-      </div>
     } @else {
       <div class="flex gap-1 align-items-center">
         <span [innerHtml]="valueSelected()"></span>
@@ -169,7 +165,6 @@ export class RemoteAutocomplete extends FieldType<FormlyFieldConfig<IRemoteAutoC
   clear(): void {
     this.value = '';
     this.formControl.reset(null);
-    this.onValueSelect.next(null);
     this.field.focus = true;
   }
 }

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
@@ -70,8 +70,8 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps
       [group]="props.group"
       [loadingIcon]="props.loadingIcon"
       [options]="selectOptions"
-      optionLabel="label"
-      optionValue="value"
+      [optionLabel]="props.group? undefined : 'label'"
+      [optionValue]="props.group? undefined :'value'"
       [panelStyleClass]="props.panelStyleClass"
       [placeholder]="props.placeholder"
       [required]="props.required"
@@ -82,6 +82,7 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps
       [tooltipPositionStyle]="props.tooltipPositionStyle"
       [tooltipStyleClass]="props.tooltipStyleClass"
       (onChange)="props.change && props.change(field, $event)"
+      (onClear)="clearValidators()"
     >
       <ng-template let-group pTemplate="group">
         @if (group.label !== 'group-preferred' && group.label !== 'group-other') {
@@ -161,6 +162,12 @@ export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>>
     });
   }
 
+  // Clear all validators except required.
+  clearValidators() {
+    const errors = this.formControl.errors;
+    this.formControl.setErrors(errors.required? {required: true}: null);
+  }
+
   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) {

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
@@ -20,7 +20,7 @@ import { FormsModule } from '@angular/forms';
 import { FieldType, FormlyFieldConfig, FormlyFieldProps, FormlyModule } from '@ngx-formly/core';
 import { TreeNode } from 'primeng/api';
 import { TreeNodeSelectEvent } from 'primeng/tree';
-import { TreeSelectModule as PrimeNgTreeSelectModule } from 'primeng/treeselect';
+import { TreeSelectModule } from 'primeng/treeselect';
 import { isObservable, of } from 'rxjs';
 
 // Doc https://primeng.org/treeselect
@@ -54,15 +54,15 @@ export interface FormlyTreeSelectFieldConfig extends FormlyFieldConfig<ITreeSele
       [filterBy]="props.filterBy"
       [filterPlaceholder]="props.filterPlaceholder"
       [formlyAttributes]="field"
-      [ngModel]="nodeSelected"
       [options]="selectOptions"
       [panelClass]="props.panelClass"
       [panelStyleClass]="props.panelStyleClass"
       [placeholder]="props.placeholder"
       [showClear]="!props.required"
       [variant]="props.variant"
-      (onNodeSelect)="onNodeSelect($event)"
-      (onNodeUnselect)="onNodeUnselect()"
+      (onNodeSelect)="setFormValue($event)"
+      (onNodeUnselect)="clearFormValue()"
+      (onClear)="clearFormValue()"
     />
   `,
 })
@@ -103,12 +103,14 @@ export class TreeSelectComponent extends FieldType<FormlyFieldConfig<ITreeSelect
     });
   }
 
-  onNodeSelect(event: TreeNodeSelectEvent): void {
+  setFormValue(event: TreeNodeSelectEvent): void {
     this.formControl.setValue(event.node.data);
   }
 
-  onNodeUnselect(): void {
-    this.formControl.reset();
+  clearFormValue(): void {
+    this.formControl.reset(null);
+    const errors = this.formControl.errors;
+    this.formControl.setErrors(errors.required? {required: true}: null);
   }
 
   private findNodeByValue(node: TreeNode[], value: string, data?: TreeNode): any {
@@ -132,7 +134,7 @@ export class TreeSelectComponent extends FieldType<FormlyFieldConfig<ITreeSelect
   imports: [
     CommonModule,
     FormsModule,
-    PrimeNgTreeSelectModule,
+    TreeSelectModule,
     FormlyModule.forChild({
       types: [
         {

diff --git a/...ro/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.html b/...ro/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.html
@@ -26,10 +26,15 @@
   [disabled]="items.length < 1"
 />
 
-<p-listbox
-  [options]="essentialsOptions"
-  scrollHeight=""
-  styleClass="mt-2"
-  (onChange)="onAddField($event)"
-/>
-
+@if(essentialsOptions?.length > 0) {
+  <p-listbox
+    [options]="essentialsOptions"
+    scrollHeight=""
+    styleClass="mt-2"
+    (onChange)="onAddField($event)"
+  >
+    <ng-template let-item pTemplate="item">
+      {{item.label|async}}
+    </ng-template>
+  </p-listbox>
+}
diff --git a/...rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.ts b/...rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.ts
@@ -69,7 +69,7 @@ export class AddFieldEditorComponent implements OnInit, OnDestroy {
         this.essentialsOptions = fields
           .filter(f => this.isFieldEssential(f))
           .map((field: any) => {
-            return { label: this.translateService.instant(field.props.untranslatedLabel), value: field }
+            return { label: this.translateService.stream(field.props.untranslatedLabel), value: field }
           });
 
       })