in progress

- Adds default placeholder in the tree select. - Translates the placeholder in the tree select. - Translates options children for the editor select components. - Copies legacy value options property to the new data property. - fixes record is a signal - fixes editor save button - add dropdown in the add field editor component Co-Authored-by: Johnny Mariéthoz <[email protected]>
rero · Aug 28, 2024 · 45c779b · 45c779b
1 parent a02274e
commit 45c779b
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 86 deletions.
diff --git a/projects/rero/ng-core/src/lib/record/detail/detail-button/detail-button.component.html b/projects/rero/ng-core/src/lib/record/detail/detail-button/detail-button.component.html
@@ -26,7 +26,7 @@
   </div>
   <div class="flex align-items-center justify-content-end w-full">
     <ng-content select="[beforeButton]"></ng-content>
-    @if (record && adminMode().can) {
+    @if (record() && adminMode().can) {
       @if (useStatus && useStatus.can && useStatus.url) {
         <p-button id="detail-use-button"
           class="ml-1"
@@ -43,7 +43,7 @@
           icon="fa fa-pencil"
           [label]="'Edit'|translate"
           [outlined]="!isPrimaryAction('use')"
-          (click)="updateRecord(record)"
+          (click)="updateRecord(record())"
           translate
         />
       }
@@ -54,7 +54,7 @@
           [outlined]="true"
           severity="danger"
           [label]="'Delete'|translate"
-          (click)="deleteRecord(record)"
+          (click)="deleteRecord(record())"
         />
       } @else {
         @if (deleteStatus().message) {

diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.html b/projects/rero/ng-core/src/lib/record/editor/editor.component.html
@@ -54,6 +54,7 @@
           [label]="'Save' | translate"
           size="small"
           styleClass="ml-1"
+          (click)="submit()"
           [disabled]="isSaveButtonDisabled"
         />
         } @else {

diff --git a/projects/rero/ng-core/src/lib/record/editor/extensions.ts b/projects/rero/ng-core/src/lib/record/editor/extensions.ts
@@ -37,7 +37,7 @@ export class NgCoreFormlyExtension {
     'multi-checkbox',
     'multi-select',
     'remoteAutoComplete',
-    'tree-select'
+    'tree-select',
   ];
 
   // Types to apply field wrapper on
@@ -47,8 +47,7 @@ export class NgCoreFormlyExtension {
    * Constructor
    * @params _recordService - ng core record service
    */
-  constructor(private _recordService: RecordService) {
-  }
+  constructor(private _recordService: RecordService) {}
   /**
    * prePopulate Formly hook
    * @param field - FormlyFieldConfig
@@ -85,8 +84,8 @@ export class NgCoreFormlyExtension {
           changes.type === 'expressionChanges' &&
           changes.property === 'props.required' &&
           changes.value === true &&
-          changes.field.hide === true)
-        {
+          changes.field.hide === true
+        ) {
           changes.field.hide = false;
         }
       });
@@ -100,18 +99,15 @@ export class NgCoreFormlyExtension {
   private _setWrappers(field: FormlyFieldConfig): void {
     // get wrappers from the props (JSONSchema)
     if (field.props) {
-      field.wrappers = [
-        ...(field.props.wrappers || []),
-        ...(field.wrappers || []),
-      ];
+      field.wrappers = [...(field.props.wrappers || []), ...(field.wrappers || [])];
     }
 
     if (field?.props?.editorConfig?.longMode) {
       // add automatically a card wrapper for the first level fields
       const { parent } = field;
       if (parent && parent.props && parent.props.isRoot === true && !field.wrappers.includes('card')) {
         field.wrappers.unshift('card');
-            // field.wrappers.push('card');
+        // field.wrappers.push('card');
       }
       // Add an horizontal wrapper for all given field types
       // if (this._horizontalWrapperTypes.some((elem) => elem === field.type)) {
@@ -212,21 +208,21 @@ export class NgCoreFormlyExtension {
     if (!field.props?.editorConfig) {
       return;
     }
-    const {pid, longMode} = field.props?.editorConfig;
+    const { pid, longMode } = field.props?.editorConfig;
     if (
       // only in longMode else it will not be possible to unhide a field
-      !longMode
+      !longMode ||
       // system field has not key
-      || !field?.key
+      !field?.key ||
       // ignore array item which as key of the form "0"
       // TODO: find a better way to identify this case
-      || !isNaN(Number(field.key))
+      !isNaN(Number(field.key)) ||
       // ignore field that has hide expression
-      || ('hide' in field?.expressions)
+      'hide' in field?.expressions ||
       // do not hide a field containing a 'hide' wrapper
-      || this._hasHideWrapper(field)
+      this._hasHideWrapper(field) ||
       // do not hide a field that has a parent marked as hidden and a model is empty
-      || (this._hasHiddenParent(field?.parent) && field.props.hide !== true)
+      (this._hasHiddenParent(field?.parent) && field.props.hide !== true)
     ) {
       return;
     }
@@ -235,21 +231,21 @@ export class NgCoreFormlyExtension {
     const modelEmpty = this._modelIsEmpty(field);
     if (
       // do not hide field which has value in the model
-      modelEmpty
+      modelEmpty &&
       // do not hide required fields
-      && !field.props.initialRequired
+      !field.props.initialRequired
     ) {
       if (
         // hide field marked as hide
-        (field.props.hide === true
+        (field.props.hide === true &&
           // do not hide field has been already manipulated
-          && field.hide === undefined)
+          field.hide === undefined) ||
         // in edition empty fields should be hidden
-        || (pid != null
+        (pid != null &&
           // only during the editor initialization
-          && !field?.props?.getRoot()?.formControl?.touched)
+          !field?.props?.getRoot()?.formControl?.touched)
       ) {
-        field.props.setHide ? field.props.setHide(field, true): field.hide = true;
+        field.props.setHide ? field.props.setHide(field, true) : (field.hide = true);
       }
     }
   }
@@ -418,7 +414,7 @@ export class TranslateExtension implements FormlyExtension {
    */
 
   prePopulate(field: FormlyFieldConfig): void {
-    const props = field.props || {};
+    const props: any = field.props || {};
 
     // translate only once
     if (props._translated) {
@@ -466,42 +462,43 @@ export class TranslateExtension implements FormlyExtension {
       if (isObservable(props.options) || props.options.some((o: any) => 'label' in o && 'value' in o)) {
         props.options = isObservable(props.options) ? props.options : of(props.options);
         props.options = props.options.pipe(
-          switchMap((opts: any) => {
-            const labels = [];
-            const options = [];
-            opts.forEach((opt: any) => {
-              labels.push(opt.label);
-              options.push(opt);
-            });
-            return this._translate.stream(labels).pipe(
-              map((translations: any) => {
-                const output = [];
-                options.forEach((opt: any) => {
-                  const data = cloneDeep(opt);
-                  data.label = translations[opt.label];
-                  output.push(data);
-                });
-                return output;
-              })
-            );
+          map((options: any[]) => {
+            if (options?.length > 0) {
+              options.map((opt) => this.translateOptionsLabel(opt));
+            }
+            return options;
           })
         );
       }
     }
   }
 
+  private translateOptionsLabel(node) {
+    if (node?.label) {
+      node.label = this._translate.instant(node.label);
+    }
+    if (node?.children?.length > 0) {
+      node.children.map((child) => this.translateOptionsLabel(child));
+    }
+    if (node?.items?.length > 0) {
+      node.items.map((child) => this.translateOptionsLabel(child));
+    }
+    if (node?.value && !node?.data) {
+      node.data = node.value;
+    }
+  }
+
   private processAllAddon(props: any): void {
     if (props.addonLeft) {
       props.addonLeft = this.processAddon(props.addonLeftUntranslated);
-
     }
     if (props.addonRight) {
       props.addonRight = this.processAddon(props.addonRightUntranslated);
     }
   }
 
   private processAddon(addon: string[]): any {
-    return addon.map((label: string) => label.startsWith('<') ? label : this._translate.instant(label));
+    return addon.map((label: string) => (label.startsWith('<') ? label : this._translate.instant(label)));
   }
 }
 
@@ -512,10 +509,7 @@ export class TranslateExtension implements FormlyExtension {
  * @param recordService - ng core record service
  * @returns FormlyConfig object configuration
  */
-export function registerNgCoreFormlyExtension(
-  translate: TranslateService,
-  recordService: RecordService
-) {
+export function registerNgCoreFormlyExtension(translate: TranslateService, recordService: RecordService) {
   return {
     // translate the default validators messages
     // widely inspired from ngx-formly example
@@ -649,8 +643,8 @@ export function registerNgCoreFormlyExtension(
         extension: new NgCoreFormlyExtension(recordService),
         // Execute Core Formly extension after formly processing (priority low)
         // https://main.formly.dev/docs/guide/custom-formly-extension#extension-priority
-        priority: 10
-      }
+        priority: 10,
+      },
     ],
   };
 }
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
@@ -31,6 +31,7 @@ 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;
@@ -65,6 +66,7 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps
       [emptyFilterMessage]="props.emptyFilterMessage"
       [emptyMessage]="props.emptyMessage"
       [filter]="props.filter"
+      [filterBy]="props.filterBy"
       [filterMatchMode]="props.filterMatchMode"
       [formControl]="formControl"
       [formlyAttributes]="field"
@@ -97,6 +99,7 @@ export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>>
       class: 'w-full',
       editable: false,
       filter: false,
+      filterBy: 'label',
       filterMatchMode: 'contains',
       group: false,
       optionGroupChildren: 'items',
@@ -107,7 +110,8 @@ export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>>
       showClear: false,
       styleClass: 'w-full mb-1',
       tooltipPosition: 'top',
-      tooltipPositionStyle: 'absolute'
+      tooltipPositionStyle: 'absolute',
+      placeholder: 'Select an option...'
     }
   };
 

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
@@ -15,9 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { CommonModule } from '@angular/common';
-import { Component, NgModule, OnInit, Type } from '@angular/core';
+import { Component, NgModule, OnInit, Type, inject } 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';
@@ -58,7 +59,7 @@ export interface FormlyTreeSelectFieldConfig extends FormlyFieldConfig<ITreeSele
       [options]="selectOptions"
       [panelClass]="props.panelClass"
       [panelStyleClass]="props.panelStyleClass"
-      [placeholder]="props.placeholder"
+      [placeholder]="props.placeholder | translate"
       [showClear]="props.showClear"
       [variant]="props.variant"
       (onNodeSelect)="onNodeSelect($event)"
@@ -79,12 +80,13 @@ export class TreeSelectComponent extends FieldType<FormlyFieldConfig<ITreeSelect
       panelStyleClass: 'w-full',
       scrollHeight: '400px',
       showClear: false,
-      variant: 'outlined'
+      variant: 'outlined',
+      placeholder: 'Select an option…'
     }
   };
 
   nodeSelected: any = undefined;
-
+  // translateService = inject(TranslateService);
   // Doc for TreeNode https://primeng.org/treeselect#api.treeselect.interfaces.TreeNode
   selectOptions: TreeNode<any>[] = [];
 
@@ -104,7 +106,7 @@ export class TreeSelectComponent extends FieldType<FormlyFieldConfig<ITreeSelect
   }
 
   onNodeSelect(event: TreeNodeSelectEvent): void {
-    this.formControl.patchValue(event.node.data);
+    this.formControl.setValue(event.node.data);
   }
 
   onNodeUnselect(): void {
@@ -132,6 +134,7 @@ export class TreeSelectComponent extends FieldType<FormlyFieldConfig<ITreeSelect
   imports: [
     CommonModule,
     FormsModule,
+    TranslateModule,
     PrimeNgTreeSelectModule,
     FormlyModule.forChild({
       types: [

diff --git a/.../rero/ng-core/src/lib/record/editor/type/remote-typeahead/remote-typeahead.component.html b/.../rero/ng-core/src/lib/record/editor/type/remote-typeahead/remote-typeahead.component.html
@@ -31,8 +31,12 @@
           </select>
         </div>
       }
-      <input class="form-control" [(ngModel)]="search" autocomplete="off" [typeaheadAsync]="true"
-        [typeahead]="suggestions$" (typeaheadLoading)="changeTypeaheadLoading($event)"
+      <input class="form-control"
+        [(ngModel)]="search"
+        autocomplete="off"
+        [typeaheadAsync]="true"
+        [typeahead]="suggestions$"
+        (typeaheadLoading)="changeTypeaheadLoading($event)"
         (typeaheadOnSelect)="typeaheadOnSelect($event)" [typeaheadWaitMs]="300" [typeaheadMinLength]="2"
         [typeaheadLatinize]="true" [typeaheadGroupField]="groupField" typeaheadOptionField="label"
         [class.is-invalid]="showError" [optionsListTemplate]="customListTemplate" />

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
@@ -15,24 +15,18 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (hiddenFields$ | async; as hiddenFields) {
-  <div class="w-100">
-    <label for="addField" translate>Add field</label>
-    <div>
       <p-autoComplete
+        styleClass="mb-2"
         id="addField"
         optionLabel="props.label"
         [(ngModel)]="currentValue"
         [suggestions]="suggestions"
+        [dropdown]="true"
+        [placeholder]="'Add field' | translate"
         (completeMethod)="search($event)"
         (onSelect)="onSelect($event)"
         [disabled]="hiddenFields.length < 1"
       />
-    </div>
-    <div class="add-field-info">
-      <small id="addFieldHelp" class="form-text text-muted" translate>
-        Press * for all.
-      </small>
-    </div>
     <ul class="list-unstyled essential-fields">
       @for ( field of essentialFields$ | async; track field; let i = $index) {
         <li class="mb-1">
@@ -48,5 +42,4 @@
         </li>
       }
     </ul>
-  </div>
 }