Skip to content

Commit

Permalink
fix(editor): change props options to obervable
Browse files Browse the repository at this point in the history 
Co-Authored-by: Bertrand Zuchuat <[email protected]>
  • Loading branch information
@Garfield-fr
Garfield-fr committed Feb 20, 2025
1 parent f68faae commit 6ccab63
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 26 deletions.
4 changes: 2 additions & 2 deletions projects/rero/ng-core/src/lib/record/editor/extensions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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));
}
}

Expand Down
24 changes: 16 additions & 8 deletions projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-checkbox/multi-checkbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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();

Expand All @@ -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 {
Expand Down
25 changes: 17 additions & 8 deletions projects/rero/ng-core/src/lib/record/editor/formly/primeng/multi-select/multi-select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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> {
Expand All @@ -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"
Expand Down Expand Up @@ -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();

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

Expand Down
25 changes: 17 additions & 8 deletions projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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> {
Expand All @@ -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"
Expand Down Expand Up @@ -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();

Expand All @@ -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);
}
}
Expand Down
3 changes: 3 additions & 0 deletions projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/translate-label.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 6ccab63

Please sign in to comment.