fix(editor): clear button on primeng components

* 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 Mariéthoz <[email protected]>
Co-Authored-by: Bertrand Zuchuat <[email protected]>

Author: jma

package-lock.json

@@ -935,7 +935,13 @@
     "selectWithPreferredOptions": {
       "title": "Select with preferred options",
       "type": "string",
-      "enum": [],
+      "enum": [
+        "fre",
+        "ita",
+        "eng",
+        "por",
+        "jpn"
+      ],
       "widget": {
         "formlyConfig": {
           "props": {
@@ -977,12 +983,12 @@
       "title": "Select with group and sort",
       "type": "string",
       "enum": [
-        "Epicea",
-        "Baobab",
-        "Foxglove",
-        "Crocus",
-        "Heather",
-        "Daffodil"
+        "epicea",
+        "baobab",
+        "foxglove",
+        "crocus",
+        "heather",
+        "daffodil"
       ],
       "widget": {
         "formlyConfig": {
@@ -995,7 +1001,7 @@
                 "items": [
                   {
                     "label": "Epicea",
-                    "value": "Epicea"
+                    "value": "epicea"
                   },
                   {
                     "label": "Baobab",

projects/ng-core-tester/src/app/record/editor/schema.json

@@ -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,

projects/rero/ng-core/src/lib/prime-ng-core-module.ts

@@ -82,6 +82,7 @@ export interface FormlyMultiSelectFieldConfig extends FormlyFieldConfig<IMultiSe
       [tooltipPositionStyle]="props.tooltipPositionStyle"
       [tooltipStyleClass]="props.tooltipStyleClass"
       (onChange)="props.change && props.change(field, $event)"
+      (onClear)="clearValidators()"
     >
       <ng-template let-items pTemplate="selectedItems">
         @for(option of items; track items; let last = $last) {
@@ -122,8 +123,8 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
       styleClass: 'w-full mb-1',
       tooltipPosition: 'top',
       tooltipPositionStyle: 'absolute',
-      variant: 'outlined'
-    }
+      variant: 'outlined',
+    },
   };
 
   ngOnInit(): void {
@@ -133,12 +134,17 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
     }));
   }
 
+  // Clear all validators except required.
+  clearValidators() {
+    const errors = this.formControl.errors;
+    this.formControl.setErrors(errors.required ? { required: true } : null);
+  }
+
   ngOnDestroy(): void {
     this.subscription.unsubscribe();
   }
 }
 
-
 @NgModule({
   declarations: [MultiSelectComponent],
   imports: [
@@ -157,6 +163,6 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
       ],
     }),
   ],
-  exports: [MultiSelectComponent]
+  exports: [MultiSelectComponent],
 })
-export class NgCoreFormlyMultiSelectModule { }
+export class NgCoreFormlyMultiSelectModule {}

projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-select/multi-select.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;
   }
 }

projects/rero/ng-core/src/lib/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.ts

@@ -84,6 +84,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-selected pTemplate="selectedItem">
         {{ selected.label | translate }}
@@ -151,6 +152,11 @@ export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>>
   ngOnDestroy(): void {
     this.subscription.unsubscribe();
   }
+
+  clearValidators() {
+    const errors = this.formControl.errors;
+    this.formControl.setErrors(errors.required? {required: true}: null);
+  }
 }
 
 @NgModule({

projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts

@@ -23,7 +23,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TranslateLabelService } from '@rero/ng-core/src/lib/record/editor/formly/primeng/select';
 import { TreeNode } from 'primeng/api';
 import { TreeNodeSelectEvent } from 'primeng/tree';
-import { TreeSelectModule as PrimeNgTreeSelectModule } from 'primeng/treeselect';
+import { TreeSelectModule } from 'primeng/treeselect';
 import { Subscription } from 'rxjs';
 
 // Doc https://primeng.org/treeselect
@@ -64,8 +64,9 @@ export interface FormlyTreeSelectFieldConfig extends FormlyFieldConfig<ITreeSele
       [placeholder]="props.placeholder | translate"
       [showClear]="!props.required"
       [variant]="props.variant"
-      (onNodeSelect)="onNodeSelect($event)"
-      (onNodeUnselect)="onNodeUnselect()"
+      (onNodeSelect)="setFormValue($event)"
+      (onNodeUnselect)="clearFormValue()"
+      (onClear)="clearFormValue()"
     />
   `,
 })
@@ -104,12 +105,14 @@ export class TreeSelectComponent extends FieldType<FormlyFieldConfig<ITreeSelect
     this.subscription.unsubscribe();
   }
 
-  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 {
@@ -134,8 +137,8 @@ export class TreeSelectComponent extends FieldType<FormlyFieldConfig<ITreeSelect
     CommonModule,
     FormsModule,
     FormlySelectModule,
-    PrimeNgTreeSelectModule,
     TranslateModule.forRoot(),
+    TreeSelectModule,
     FormlyModule.forChild({
       types: [
         {

projects/rero/ng-core/src/lib/record/editor/formly/primeng/tree-select/tree-select.ts

@@ -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>
+}

projects/rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.html

@@ -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 }
           });
 
       })