fix(editor): change props options to obervable

Garfield-fr · jma · jma · commit 12d15f2f1760 · 2025-02-24T10:37:18.000+01:00
* Fixes tooltip position.

Co-Authored-by: Bertrand Zuchuat &lt;bertrand.zuchuat@rero.ch&gt;
Co-Authored-by: Johnny Mariéthoz &lt;johnny.mariethoz@rero.ch&gt;
diff --git a/projects/rero/ng-core/assets/scss/_theme.scss b/projects/rero/ng-core/assets/scss/_theme.scss
@@ -57,11 +57,6 @@ dl.metadata {
   @extend .mb-0, .border-none, .bg-white;
 }
 
-// bootstrap patches
-label {
-  display: block;
-}
-
 legend {
   @extend .text-base;
   width: auto;
diff --git a/projects/rero/ng-core/src/lib/record/editor/extensions.ts b/projects/rero/ng-core/src/lib/record/editor/extensions.ts
@@ -19,7 +19,7 @@ import { UntypedFormControl } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FormlyExtension, FormlyFieldConfig, FormlyFieldProps } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
-import { isObservable } from 'rxjs';
+import { isObservable, of } from 'rxjs';
 import { Validators } from '../../validator/validators';
 import { RecordService } from '../record.service';
 import { isEmpty, removeEmptyValues } from './utils';
@@ -410,7 +410,7 @@ export class FormOptionsProcessExtension implements FormlyExtension {
   prePopulate(field: FormlyFieldConfig<FormlyFieldProps & { [additionalProperties: string]: any; }>): void {
     // Process options
     if (field.props?.options && !isObservable(field.props?.options)) {
-      field.props.options = this.processOptions(field.props);
+      field.props.options = of(this.processOptions(field.props));
     }
   }
 
diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-checkbox/multi-checkbox.spec.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-checkbox/multi-checkbox.spec.ts
@@ -17,6 +17,7 @@
 
 import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { createFieldComponent } from '@ngx-formly/core/testing';
+import { of } from 'rxjs';
 import { FormFieldWrapperComponent } from '../../../wrappers/form-field-wrapper/form-field-wrapper.component';
 import { IMultiCheckBoxProps, NgCoreFormlyMultiCheckboxModule } from './multi-checkbox';
 
@@ -41,10 +42,10 @@ describe('MultiCheckboxComponent', () => {
       type: 'multi-checkbox',
       props: {
         style: 'stacked',
-        options: [
+        options: of([
           { label: 'foo', value: 'foo', untranslatedLabel: 'foo' },
           { label: 'bar', value: 'bar', untranslatedLabel: 'bar' },
-        ],
+        ]),
       }
     });
     expect(queryAll('p-checkbox')).toHaveSize(2);
@@ -57,10 +58,10 @@ describe('MultiCheckboxComponent', () => {
       type: 'multi-checkbox',
       props: {
         style: 'inline',
-        options: [
+        options: of([
           { label: 'foo', value: 'foo', untranslatedLabel: 'foo' },
           { label: 'bar', value: 'bar', untranslatedLabel: 'bar' },
-        ],
+        ]),
       }
     });
     expect(queryAll('p-checkbox')).toHaveSize(2);
diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-checkbox/multi-checkbox.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-checkbox/multi-checkbox.ts
@@ -15,27 +15,27 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { CommonModule } from '@angular/common';
-import { Component, inject, NgModule, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, NgModule, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { FieldType, FormlyFieldConfig, FormlyFieldProps, FormlyModule } from '@ngx-formly/core';
 import { FormlySelectModule } from '@ngx-formly/core/select';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TranslateLabelService } from '@rero/ng-core/src/lib/record/editor/formly/primeng/select';
 import { CheckboxChangeEvent, CheckboxModule } from 'primeng/checkbox';
-import { Subscription } from 'rxjs';
+import { map, merge, Observable, Subscription, switchMap } from 'rxjs';
 
 export interface IMultiCheckBoxProps extends FormlyFieldProps {
   labelStyleClass?: string;
   style: 'stacked' | 'inline';
   styleClass?: string;
-  options?: any[]
+  options?: Observable<any[]>;
 }
 
 @Component({
   selector: 'ng-core-multi-checkbox',
   template: `
     <div class="flex" [ngClass]="{ 'gap-3': props.style === 'inline', 'flex-column gap-1': props.style === 'stacked' }">
-    @for (option of props.options; track option) {
+    @for (option of optionValues$|async; track option) {
       <div class="flex align-items-center">
         <p-checkbox
           [disabled]="option.disabled"
@@ -58,6 +58,7 @@ export class MultiCheckboxComponent extends FieldType<FormlyFieldConfig<IMultiCh
 
   private translateService: TranslateService = inject(TranslateService);
   private translateLabelService: TranslateLabelService = inject(TranslateLabelService);
+  private ref: ChangeDetectorRef = inject(ChangeDetectorRef);
 
   private subscription: Subscription = new Subscription();
 
@@ -68,13 +69,20 @@ export class MultiCheckboxComponent extends FieldType<FormlyFieldConfig<IMultiCh
     }
   };
 
+  optionValues$: Observable<any[]>;
+
   multiCheckBoxValue: string[] = [];
 
   ngOnInit(): void {
-    this.translateLabelService.translateLabel(this.props.options);
-    this.subscription.add(this.translateService.onLangChange.subscribe(() => {
-      this.translateLabelService.translateLabel(this.props.options);
-    }));
+    const optionsObs = this.props.options;
+    const changeObs = this.translateService.onLangChange.pipe(switchMap(() => this.optionValues$));
+    this.optionValues$ = merge(...[optionsObs, changeObs])
+    .pipe(
+      map(options => {
+        this.ref.markForCheck();
+        return this.translateLabelService.translateLabel(options);
+      })
+    );
   }
 
   ngOnDestroy(): void {
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
@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2024 RERO
+ * Copyright (C) 2024-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,6 +17,7 @@
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { createFieldComponent } from '@ngx-formly/core/testing';
+import { of } from 'rxjs';
 import { FormFieldWrapperComponent } from '../../../wrappers/form-field-wrapper/form-field-wrapper.component';
 import { IMultiSelectProps, NgCoreFormlyMultiSelectModule } from './multi-select';
 
@@ -46,7 +47,7 @@ describe('MultiSelectComponent', () => {
         filter: true,
         filterMatchMode: 'contains',
         group: false,
-        options: [],
+        options: of([]),
         panelStyleClass: 'w-full',
         required: false,
         scrollHeight: '250px',
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
@@ -15,14 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { CommonModule } from '@angular/common';
-import { Component, inject, NgModule, OnDestroy, OnInit, Type } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, NgModule, OnDestroy, OnInit, Type } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FormlyFieldConfig, FormlyFieldProps, FormlyModule } from '@ngx-formly/core';
 import { FormlyFieldSelectProps, FormlySelectModule } from '@ngx-formly/core/select';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TranslateLabelService } from '@rero/ng-core/src/lib/record/editor/formly/primeng/select';
 import { MultiSelectModule as PrimeNgMultiSelectModule } from 'primeng/multiselect';
-import { Subscription } from 'rxjs';
+import { map, merge, Observable, Subscription, switchMap } from 'rxjs';
 
 export interface IMultiSelectProps extends FormlyFieldProps, FormlyFieldSelectProps {
   appendTo?: any;
@@ -47,6 +47,7 @@ export interface IMultiSelectProps extends FormlyFieldProps, FormlyFieldSelectPr
   tooltipPositionStyle: string;
   tooltipStyleClass?: string;
   variant: 'outlined' | 'filled';
+  options?: Observable<any[]>;
 }
 
 export interface FormlyMultiSelectFieldConfig extends FormlyFieldConfig<IMultiSelectProps> {
@@ -69,7 +70,7 @@ export interface FormlyMultiSelectFieldConfig extends FormlyFieldConfig<IMultiSe
       [formlyAttributes]="field"
       [group]="props.group"
       [loadingIcon]="props.loadingIcon"
-      [options]="props.options"
+      [options]="optionValues$|async"
       optionLabel="label"
       optionValue="value"
       [panelStyleClass]="props.panelStyleClass"
@@ -103,6 +104,7 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
 
   private translateService: TranslateService = inject(TranslateService);
   private translateLabelService: TranslateLabelService = inject(TranslateLabelService);
+  private ref: ChangeDetectorRef = inject(ChangeDetectorRef);
 
   private subscription: Subscription = new Subscription();
 
@@ -127,16 +129,23 @@ export class MultiSelectComponent extends FieldType<FormlyFieldConfig<IMultiSele
     },
   };
 
+  optionValues$: Observable<any[]>;
+
   ngOnInit(): void {
-    this.translateLabelService.translateLabel(this.props.options);
-    this.subscription.add(this.translateService.onLangChange.subscribe(() => {
-      this.translateLabelService.translateLabel(this.props.options);
-    }));
+    const optionsObs = this.props.options;
+    const changeObs = this.translateService.onLangChange.pipe(switchMap(() => this.optionValues$));
+    this.optionValues$ = merge(...[optionsObs, changeObs])
+    .pipe(
+      map(options => {
+        this.ref.markForCheck();
+        return this.translateLabelService.translateLabel(options);
+      })
+    );
   }
 
   // Clear all validators except required.
   clearValidators() {
-    const errors = this.formControl.errors;
+    const {errors} = this.formControl;
     this.formControl.setErrors(errors.required ? { required: true } : null);
   }
 
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
@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2024 RERO
+ * Copyright (C) 2024-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -19,6 +19,7 @@ import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { createFieldComponent } from '@ngx-formly/core/testing';
 import { FormFieldWrapperComponent } from '../../../wrappers/form-field-wrapper/form-field-wrapper.component';
 import { ISelectProps, NgCoreFormlySelectModule } from './select';
+import { of } from 'rxjs';
 
 const renderComponent = (field: FormlyFieldConfig<ISelectProps>) => {
   return createFieldComponent(field, {
@@ -45,10 +46,10 @@ describe('SelectComponent', () => {
         filter: false,
         filterMatchMode: 'contains',
         group: false,
-        options: [
+        options: of([
           { label: 'Foo', value: 'foo', untranslatedLabel: 'foo' },
           { label: 'Bar', value: 'bar', untranslatedLabel: 'bar' },
-        ],
+        ]),
         panelStyleClass: 'w-full',
         required: false,
         scrollHeight: '250px',
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
@@ -15,14 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, NgModule, OnDestroy, OnInit, Type } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, NgModule, OnDestroy, OnInit, Type } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { FormlySelectModule as FormlyCoreSelectModule, FormlyFieldSelectProps } from '@ngx-formly/core/select';
 import { FormlyFieldProps } from '@ngx-formly/primeng/form-field';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { DropdownModule } from 'primeng/dropdown';
-import { Subscription } from 'rxjs';
+import { map, merge, Observable, Subscription, switchMap, tap } from 'rxjs';
 import { TranslateLabelService } from './translate-label.service';
 
 export interface ISelectProps extends FormlyFieldProps, FormlyFieldSelectProps {
@@ -46,6 +46,7 @@ export interface ISelectProps extends FormlyFieldProps, FormlyFieldSelectProps {
   tooltipPosition: 'left' | 'top' | 'bottom' | 'right';
   tooltipPositionStyle: string;
   tooltipStyleClass?: string;
+  options?: Observable<any[]>;
 }
 
 export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps> {
@@ -71,7 +72,7 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps
       [formlyAttributes]="field"
       [group]="props.group"
       [loadingIcon]="props.loadingIcon"
-      [options]="props.options"
+      [options]="optionValues$|async"
       [optionLabel]="props.group ? undefined : 'label'"
       [optionValue]="props.group ? undefined : 'value'"
       [panelStyleClass]="props.panelStyleClass"
@@ -120,6 +121,7 @@ export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>>
 
   private translateService: TranslateService = inject(TranslateService);
   private translateLabelService: TranslateLabelService = inject(TranslateLabelService);
+  private ref: ChangeDetectorRef = inject(ChangeDetectorRef);
 
   private subscription: Subscription = new Subscription();
 
@@ -142,19 +144,26 @@ export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>>
     }
   };
 
+  optionValues$: Observable<any[]>;
+
   ngOnInit(): void {
-    this.translateLabelService.translateLabel(this.props.options);
-    this.subscription.add(this.translateService.onLangChange.subscribe(() => {
-      this.translateLabelService.translateLabel(this.props.options);
-    }));
+    const optionsObs = this.props.options;
+    const changeObs = this.translateService.onLangChange.pipe(switchMap(() => this.optionValues$));
+    this.optionValues$ = merge(...[optionsObs, changeObs])
+    .pipe(
+      map(options => {
+        this.ref.markForCheck();
+        return this.translateLabelService.translateLabel(options);
+      })
+    );
   }
 
   ngOnDestroy(): void {
     this.subscription.unsubscribe();
   }
 
   clearValidators() {
-    const errors = this.formControl.errors;
+    const { errors } = this.formControl;
     this.formControl.setErrors(errors.required? {required: true}: null);
   }
 }
diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/translate-label.service.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/translate-label.service.ts
@@ -26,6 +26,9 @@ export class TranslateLabelService {
 
   translateLabel(options: any): any[] {
     options.map((option: any) => {
+      if (!option.untranslatedLabel) {
+        option.untranslatedLabel = option.label;
+      }
       option.label = this.translateService.instant(option.untranslatedLabel);
       if (option.items) {
         this.translateLabel(option.items);
diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/tree-select/tree-select.spec.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/tree-select/tree-select.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2024 RERO
+ * Copyright (C) 2024-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -20,6 +20,7 @@ import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { createFieldComponent } from '@ngx-formly/core/testing';
 import { FormFieldWrapperComponent } from '../../../wrappers/form-field-wrapper/form-field-wrapper.component';
 import { ITreeSelectProps, NgCoreFormlyTreeSelectModule } from './tree-select';
+import { of } from 'rxjs';
 
 const renderComponent = (field: FormlyFieldConfig<ITreeSelectProps>) => {
   return createFieldComponent(field, {
@@ -45,7 +46,7 @@ describe('TreeSelectComponent', () => {
         containerStyleClass: 'w-full',
         filter: false,
         filterBy: 'label',
-        options: [
+        options: of([
           {
             key: 'label_1',
             label: 'Tree 1',
@@ -55,7 +56,7 @@ describe('TreeSelectComponent', () => {
               { key: 'label_1_2', label: 'Subtree 2', data: 'subtree2', untranslatedLabel: 'Subtree 2' }
             ]
           }
-        ],
+        ]),
         panelClass: 'w-full',
         panelStyleClass: 'w-full',
         scrollHeight: '400px',
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
diff --git a/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts b/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts
