Skip to content

Commit

Permalink
in progress
Browse files Browse the repository at this point in the history 
- 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.

Co-Authored-by: Johnny Mariéthoz <[email protected]>
  • Loading branch information
@jma
jma committed Aug 27, 2024
1 parent a02274e commit 0efec99
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 57 deletions.
93 changes: 42 additions & 51 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 @@ -37,7 +37,7 @@ export class NgCoreFormlyExtension {
'multi-checkbox',
'multi-select',
'remoteAutoComplete',
'tree-select'
'tree-select',
];

// Types to apply field wrapper on
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
});
Expand All @@ -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)) {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -466,42 +462,40 @@ 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?.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)));
}
}

Expand All @@ -512,10 +506,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
Expand Down Expand Up @@ -649,8 +640,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,
},
],
};
}
3 changes: 2 additions & 1 deletion 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 @@ -107,7 +107,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...'
}
};

Expand Down
13 changes: 8 additions & 5 deletions projects/rero/ng-core/src/lib/record/editor/formly/primeng/tree-select/tree-select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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)"
Expand All @@ -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>[] = [];

Expand All @@ -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 {
Expand Down Expand Up @@ -132,6 +134,7 @@ export class TreeSelectComponent extends FieldType<FormlyFieldConfig<ITreeSelect
imports: [
CommonModule,
FormsModule,
TranslateModule,
PrimeNgTreeSelectModule,
FormlyModule.forChild({
types: [
Expand Down

0 comments on commit 0efec99

Please sign in to comment.