@mediusinc/mng-commons 0.2.0 → 0.2.1-rc

package/src/lib/components/form/editor/form-editor.component.ts

@@ -0,0 +1,149 @@
+import {AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, QueryList, ViewChild} from '@angular/core';
+import {FormGroup} from '@angular/forms';
+
+import {FormlyFieldConfig, FormlyFormOptions} from '@ngx-formly/core';
+import {Message} from 'primeng/api';
+import {Observable, of, Subscription} from 'rxjs';
+import {TranslateService} from '@ngx-translate/core';
+
+import {EditorDescriptor} from '../../../descriptors';
+import {MngFormEditorSubmitEvent} from '../models';
+import {MngTemplateDirective} from '../../../directives';
+import {EditorFormlyUtil, ToastUtil} from '../../../utils';
+
+@Component({
+    selector: 'mng-form-editor',
+    templateUrl: './form-editor.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngFormEditorComponent<T> implements OnInit, AfterContentInit, OnDestroy {
+
+    // metadata and editor mode input
+    @Input() public descriptor!: EditorDescriptor<T>;
+    @Input() public submitLoading: Observable<boolean>|boolean = false;
+
+    // data source inputs;
+    @Input() public item?: T;
+
+    // extra features input
+    @Input() public isSubmitButtonVisible = false;
+    @Input() public isFormDisabled = null;
+
+    // event outputs
+    @Output('onSubmit') private submitEventEmitter = new EventEmitter<MngFormEditorSubmitEvent<T>>();
+
+    // content and view queries
+    @ContentChildren(MngTemplateDirective) templates!: QueryList<MngTemplateDirective>;
+
+    @ViewChild('submitButton')
+    public submitButtonElementRef?: ElementRef;
+
+    public form: FormGroup = new FormGroup({});
+    public formOptions: FormlyFormOptions = {
+        formState: {
+            add: false,
+            edit: false,
+            disabled: false
+        }
+    };
+    public formFields!: FormlyFieldConfig[];
+    public formOrigItem?: T;
+    public formModel: any = {};
+    public formMessages: Message[] = [];
+    public submitLoading$!: Observable<boolean>;
+
+    private subscriptions: Subscription[] = [];
+
+    constructor(private translateService: TranslateService) { }
+
+    public ngOnInit() {
+
+        this.updateFormModel(this.item);
+        this.submitLoading$ = this.submitLoading instanceof Observable ? this.submitLoading : of(this.submitLoading);
+
+        // init fields for formly
+        this.formFields = EditorFormlyUtil.createFormlyConfigFromDescriptor(this.descriptor);
+        this.updateFormState();
+    }
+
+    public ngAfterContentInit() {
+        this.templates.forEach(template => {
+            switch(template.getType()) {
+                // case 'caption':
+                //     this.captionTemplate = template.template;
+                //     break;
+            }
+        });
+    }
+
+    public ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+
+    public submit() {
+        this.submitButtonElementRef?.nativeElement.click();
+    }
+
+    public onSubmit(event: Event) {
+        this.formOptions.formState.submittedOn = Date.now();
+        this.formMessages = [];
+
+        const formSubmitItem = this.form.getRawValue() as T;
+        if (this.form.valid) {
+            this.descriptor.fields.forEach(field => {
+                if (field && field.setter) {
+                    field.setter(formSubmitItem, this.form.value[field.property]);
+                }
+            });
+
+            this.submitEventEmitter.next(new MngFormEditorSubmitEvent(formSubmitItem));
+        } else {
+            // find and mark invalid tabs
+            if (this.formFields[0].type === 'tabs' && this.formFields[0].fieldGroup) {
+                for (const tab of this.formFields[0].fieldGroup) {
+                    const isInvalid = this.isAnyFieldInvalid(tab.fieldGroup);
+                    this.formOptions.formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label) + '_invalid'] = isInvalid;
+                }
+            }
+            const event = new MngFormEditorSubmitEvent(formSubmitItem);
+            event.success = false;
+            this.formMessages.push(ToastUtil.getFormEditorWarningMessage(this.translateService, 'mngEditor.invalidFormToastTitle', 'mngEditor.invalidFormToastMessage'));
+            this.submitEventEmitter.next(event);
+        }
+    }
+
+    private isAnyFieldInvalid(fields: FormlyFieldConfig[] = []): boolean {
+        for (const field of fields) {
+            let fieldInvalid = false;
+            if (Array.isArray(field.fieldGroup)) {
+                fieldInvalid = this.isAnyFieldInvalid(field.fieldGroup);
+            } else if (typeof field.type !== 'undefined') {
+                fieldInvalid = !field.formControl?.valid;
+            }
+            if (fieldInvalid) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private updateFormModel(item?: T) {
+        this.formOrigItem = item;
+        // TODO: to check if this is ok, could be problems with dates, if so, try lodash
+        const formModel =  JSON.parse(JSON.stringify(item ?? {}));
+
+        this.descriptor.fields.forEach(field => {
+            if (field.getter && item) {
+                formModel[field.property] = field.getter(item);
+            }
+        });
+        if (typeof this.formOptions.resetModel === 'function') { // could not be initiated yet
+            this.formOptions.resetModel(this.formModel);
+        }
+        this.formModel = formModel;
+    }
+
+    private updateFormState() {
+        this.formOptions.formState.disabled = this.isFormDisabled !== null ? this.isFormDisabled === true : this.descriptor.disabled;
+    }
+}

package/src/lib/components/form/formly/fields/formly-field-autocomplete/formly-field-autocomplete.component.html

@@ -0,0 +1,7 @@
+<mng-autocomplete [id]="$any(key)"
+                  [formControl]="aFormControl"
+                  [formlyAttributes]="field"
+                  [dataProvider]="$any(descriptor.dataProvider)"
+                  [dataKeyProperty]="$any(descriptor.dataKeyProperty)"
+                  [itemsLabelProperty]="$any(descriptor.itemsLabelProperty)">
+</mng-autocomplete>

package/src/lib/components/form/formly/fields/formly-field-autocomplete/formly-field-autocomplete.component.ts

@@ -0,0 +1,21 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+import {FieldType} from '@ngx-formly/core';
+import {FieldLookupDescriptor} from '../../../../../descriptors';
+
+@Component({
+    selector: 'mng-formly-field-autocomplete',
+    templateUrl: './formly-field-autocomplete.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngFormlyFieldAutocompleteComponent<T> extends FieldType {
+
+    public aFormControl!: FormControl;
+    public descriptor!: FieldLookupDescriptor<T, any>;
+
+    public ngOnInit() {
+        this.aFormControl = this.formControl as FormControl;
+        this.descriptor = this.to['descriptor'];
+    }
+}

package/src/lib/components/form/formly/fields/formly-field-dropdown/formly-field-dropdown.component.html

@@ -0,0 +1,9 @@
+<mng-dropdown [id]="$any(key)"
+                    [formControl]="dFormControl"
+                    [formlyAttributes]="field"
+                    [placeholder]="$any(descriptor.placeholder)"
+                    [itemsLabelProperty]="$any(descriptor.itemsLabelProperty)"
+                    [itemsValueProperty]="$any(descriptor.itemsValueProperty)"
+                    [showClear]="!this.to.required"
+                    [dataKeyProperty]="$any(descriptor.dataKeyProperty)">
+</mng-dropdown>

package/src/lib/components/form/formly/fields/formly-field-dropdown/formly-field-dropdown.component.ts

@@ -0,0 +1,22 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+import {FieldType} from '@ngx-formly/core';
+
+import {FieldLookupDescriptor} from '../../../../../descriptors';
+
+@Component({
+    selector: 'mng-formly-field-dropdown',
+    templateUrl: './formly-field-dropdown.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MngFormlyFieldDropdownComponent<T> extends FieldType {
+
+    public dFormControl!: FormControl;
+    public descriptor!: FieldLookupDescriptor<T, any>;
+
+    public ngOnInit() {
+        this.dFormControl = this.formControl as FormControl;
+        this.descriptor = this.to['descriptor'];
+    }
+}

package/src/lib/components/form/formly/fields/formly-field-fieldset/formly-field-fieldset.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngFor="let group of field.fieldGroup; let i = index; let last = last;">
+    <p-fieldset *ngIf="!group.templateOptions?.['descriptor']?.default; else defaultSet" [legend]="group.templateOptions?.label! | translate">
+        <formly-field [field]="group"></formly-field>
+    </p-fieldset>
+    <ng-template #defaultSet>
+        <formly-field [field]="group"></formly-field>
+    </ng-template>
+</ng-container>

package/src/lib/components/form/formly/fields/formly-field-fieldset/formly-field-fieldset.component.ts

@@ -0,0 +1,10 @@
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+
+@Component({
+    selector: 'mng-formly-field-fieldset',
+    templateUrl: './formly-field-fieldset.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MngFormlyFieldFieldsetComponent extends FieldType {
+}

package/src/lib/components/form/formly/fields/formly-field-input/formly-field-input.component.html

@@ -0,0 +1,56 @@
+<ng-container [ngSwitch]="to.type">
+    <p-inputNumber *ngSwitchCase="'number'"
+                   [id]="$any(key)"
+                   [formControl]="iFormControl"
+                   [formlyAttributes]="field"
+                   [min]="$any(descriptor.numberMin)"
+                   [max]="$any(descriptor.numberMax)"
+                   [step]="$any(descriptor.numberStep)"
+                   [minFractionDigits]="descriptor.numberMinFractionDigits || 0"
+                   [maxFractionDigits]="descriptor.numberMaxFractionDigits || 0">
+    </p-inputNumber>
+
+    <div *ngSwitchCase="'switch'" class="flex flex-column">
+        <label [for]="key">{{ to?.label! | translate }} <span *ngIf="to.required && to['hideRequiredMarker'] !== true">*</span></label>
+        <p-inputSwitch [id]="$any(key)"
+                       [formControl]="iFormControl"
+                       [formlyAttributes]="field">
+        </p-inputSwitch>
+        <small *ngIf="showError" class="p-error">
+            <formly-validation-message [field]="field"></formly-validation-message>
+        </small>
+    </div>
+
+    <ng-container *ngSwitchCase="'radio'">
+        <div *ngFor="let category of descriptor.radioOptions" [id]="$any(key)" class="p-field-radiobutton">
+            <p-radioButton [value]="category" [formControl]="iFormControl" [formlyAttributes]="field"></p-radioButton>
+            <label [for]="category" class="mng-radio-button-label">{{category}}</label>
+        </div>
+    </ng-container>
+
+    <textarea *ngSwitchCase="'textarea'"
+              [id]="$any(key)"
+              [formControl]="iFormControl"
+              [formlyAttributes]="field"
+              [rows]="descriptor.rows ?? 3"
+              pInputTextarea>
+    </textarea>
+
+    <p-calendar *ngSwitchCase="'datepicker'"
+                [formControl]="iFormControl"
+                [formlyAttributes]="field"
+                [dateFormat]="$any(descriptor.datePickerFormat)"
+                [minDate]="$any(descriptor.datePickerMin)"
+                [maxDate]="$any(descriptor.datePickerMax)"
+                [showTime]="descriptor.datePickerShowTime"
+                [showIcon]="true">
+    </p-calendar>
+
+    <input *ngSwitchDefault
+           pInputText
+           [id]="$any(key)"
+           [type]="to.type || 'text'"
+           [formControl]="iFormControl"
+           [formlyAttributes]="field"
+    />
+</ng-container>

package/src/lib/components/form/formly/fields/formly-field-input/formly-field-input.component.ts

@@ -0,0 +1,22 @@
+import {Component, ChangeDetectionStrategy, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+import { FieldType } from '@ngx-formly/core';
+
+import {FieldInputDescriptor} from '../../../../../descriptors';
+
+@Component({
+    selector: 'mng-formly-field-input',
+    templateUrl: './formly-field-input.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MngFormlyFieldInputComponent extends FieldType implements OnInit {
+
+    public iFormControl!: FormControl;
+    public descriptor!: FieldInputDescriptor<any>;
+
+    ngOnInit(): void {
+        this.iFormControl = this.formControl as FormControl;
+        this.descriptor = this.to['descriptor'];
+    }
+}

package/src/lib/components/form/formly/fields/formly-field-table-dialog-form/formly-field-table-dialog-form.component.html

@@ -0,0 +1,13 @@
+<mng-table [descriptor]="descriptor.tableDescriptor" [items]="items$">
+    <ng-template mngTemplate="caption">
+        <div class="flex flex-column md:flex-row md:justify-content-end table-header">
+            <label class="mng-datatable-form-label p-m-0" [for]="key">{{ to?.label! | translate }} <span *ngIf="to.required && to['hideRequiredMarker'] !== true">*</span></label>
+            <mng-action *ngFor="let action of toolbarActions" [action]="action"></mng-action>
+        </div>
+    </ng-template>
+    <ng-template mngTemplate="columnAction" let-item="rowItem" let-idx="rowIndex">
+        <mng-action *ngFor="let action of rowActions"
+                    [action]="action" [item]="item" [itemId]="descriptor.tableviewDescriptor.model.idPropertyName ? item[descriptor.tableviewDescriptor.model.idPropertyName] : undefined" [actionData]="{ itemIndex: idx }">
+        </mng-action>
+    </ng-template>
+</mng-table>

package/src/lib/components/form/formly/fields/formly-field-table-dialog-form/formly-field-table-dialog-form.component.scss

@@ -0,0 +1,4 @@
+.submit-button {
+    display: none !important;
+    visibility: hidden;
+}

package/src/lib/components/form/formly/fields/formly-field-table-dialog-form/formly-field-table-dialog-form.component.ts

@@ -0,0 +1,114 @@
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+
+import {FieldType} from '@ngx-formly/core';
+import {Observable, of, ReplaySubject, Subject, Subscription} from 'rxjs';
+import {startWith} from 'rxjs/operators';
+
+import {FieldManyEditorDescriptor, ActionDescriptor, ActionEditorDescriptor, ActionLevelEnum} from '../../../../../descriptors';
+
+@Component({
+    selector: 'mng-formly-table-dialog-form-field',
+    templateUrl: './formly-field-table-dialog-form.component.html',
+    styleUrls: ['./formly-field-table-dialog-form.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngFormlyFieldTableDialogFormComponent<T, ET> extends FieldType implements OnInit, OnDestroy {
+
+    public descriptor!: FieldManyEditorDescriptor<T, ET>;
+
+    public itemsSubject: Subject<Array<T>> = new ReplaySubject(1);
+    public items$: Observable<Array<T>> = this.itemsSubject.asObservable();
+
+    public toolbarActions: Array<ActionDescriptor<T>> = [];
+    public rowActions: Array<ActionDescriptor<T>> = [];
+
+    private subscriptions: Subscription[] = [];
+
+    public ngOnInit() {
+
+        this.descriptor = this.to['descriptor'];
+        const hasAddAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Add);
+        const hasEditAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Edit);
+        const hasDeleteAction = this.descriptor.actions.some(a => a === FieldManyEditorDescriptor.ActionEnum.Delete);
+
+        if (hasAddAction) {
+            console.log(this.descriptor.tableviewDescriptor.addEditor);
+            const addAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.addEditor, 'add', this.descriptor.editor.model.type, this.descriptor.property)
+                .withTitle(null)
+                .withIcon('pi pi-plus')
+                .withClassName('mng-formly-field-table-form-dialog')
+                .withSubmitFunction(ctx => {
+                    if (!ctx.data?.item) {
+                        throw new Error(`No item was provided in context, edit cannot be done.`);
+                    }
+                    this.formState.submittedOn = Date.now();
+                    let value = this.formControl.value;
+                    value = [...value, ctx.data.item];
+                    this.formControl.patchValue(value);
+                    return of(ctx.data.item);
+                })
+                .withIsVisibleFunction(ctx => of(!this.options?.formState.disabled));
+            this.toolbarActions.push(addAction as ActionDescriptor<T>);
+        }
+        if (hasEditAction) {
+            const editAction = new ActionEditorDescriptor(this.descriptor.tableviewDescriptor.editEditor, 'edit', this.descriptor.editor.model.type, this.descriptor.property)
+                .withTitle(null)
+                .withIcon('pi pi-pencil')
+                .withClassName('mng-formly-field-table-form-dialog')
+                .withSubmitFunction(ctx => {
+                    if (!ctx.data?.item) {
+                        throw new Error(`No item was provided in context, edit cannot be done.`);
+                    }
+                    this.formState.submittedOn = Date.now();
+                    let formControlValue = this.formControl.value;
+                    formControlValue[ctx.data.actionData?.['itemIndex']] = ctx.data.item;
+                    this.formControl.patchValue(formControlValue);
+                    return of(ctx.data.item);
+                })
+                .withIsVisibleFunction(ctx => of(!this.options?.formState.disabled));
+            this.rowActions.push(editAction as ActionDescriptor<T>);
+        }
+        if (hasDeleteAction) {
+            const deleteAction = new ActionDescriptor(this.descriptor.tableviewDescriptor.model, 'delete', this.descriptor.editor.model.type, this.descriptor.property)
+                .withLevel(ActionLevelEnum.Danger)
+                .withTitle(null)
+                .withIcon('pi pi-trash')
+                .withRunFunction(ctx => {
+                    if (!ctx.data?.item) {
+                        throw new Error(`No item was provided in context, delete cannot be done.`);
+                    }
+                    let formControlValue = this.formControl.value;
+                    const compareProperty = this.descriptor.tableDescriptor.dataKeyProperty ? this.descriptor.tableDescriptor.dataKeyProperty : this.descriptor.tableDescriptor.model.idPropertyName;
+                    if (!compareProperty) {
+                        throw new Error('Cannot compare items, please provide main table data key property or model id property.');
+                    }
+                    const ctxItem: any = ctx.data.item;
+                    if (!ctxItem?.[compareProperty]) {
+                        return formControlValue;
+                    }
+                    formControlValue = formControlValue.filter((i: any) => i[compareProperty] !== ctxItem[compareProperty]);
+                    this.formControl.patchValue(formControlValue);
+                    return of(ctx.data.item);
+                })
+                .withIsVisibleFunction(ctx => of(!this.options?.formState.disabled));
+            this.rowActions.push(deleteAction);
+        }
+
+        // init values
+        if (typeof this.formControl.value === 'undefined' || this.formControl.value === null) {
+            this.formControl.patchValue([]);
+        }
+        const subscription = this.formControl.valueChanges
+            .pipe(
+                startWith(this.formControl.value)
+            )
+            .subscribe(v => {
+                this.itemsSubject.next(v);
+            });
+        this.subscriptions.push(subscription);
+    }
+
+    public ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+}

package/src/lib/components/form/formly/fields/formly-field-table-dialog-multiselect/formly-field-table-dialog-multiselect.component.html

@@ -0,0 +1,37 @@
+<mng-table [descriptor]="descriptor.mainTableDescriptor" [items]="itemsAsync">
+    <ng-template mngTemplate="caption">
+        <div class="flex flex-column md:flex-row md:justify-content-end table-header">
+            <label class="mng-datatable-form-label p-m-0" [for]="key">{{ to?.label! | translate }} <span *ngIf="to.required && to['hideRequiredMarker'] !== true">*</span></label>
+            <button *ngIf="hasAddAction && !formControl.disabled" pButton pRipple type="button" icon="pi pi-plus" class="p-button-rounded p-button-success"
+                    (click)="openAddDialog()">
+            </button>
+        </div>
+    </ng-template>
+    <ng-template mngTemplate="columnAction" let-item="rowItem">
+        <button *ngIf="hasDeleteAction && !formControl.disabled" pButton pRipple type="button" icon="pi pi-trash" class="p-button-rounded p-button-danger"
+                (click)="removeItem(item)">
+        </button>
+    </ng-template>
+</mng-table>
+
+<p-dialog *ngIf="hasAddAction" [(visible)]="isDialogVisible"
+          [draggable]="false"
+          [header]="'general.addItem' | translate: {item: to?.label!}"
+          [modal]="true"
+          appendTo="body"
+          styleClass="p-fluid mng-formly-field-table-multiselect-dialog">
+    <ng-template pTemplate="content">
+        <mng-table [descriptor]="descriptor.mainTableDescriptor"
+                   [queryResult]="addItemsAsync"
+                   [selectionEnabled]="true"
+                   [loading]="dialogIsLoading$"
+                   (onSelectionChange)="onSelectionChange($event)">
+        </mng-table>
+        <p-messages [value]="dialogMessages"></p-messages>
+    </ng-template>
+
+    <ng-template pTemplate="footer">
+        <button pButton pRipple type="button" [label]="'general.cancel' | translate" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"></button>
+        <button pButton pRipple type="button" [label]="'general.add' | translate" icon="pi pi-check" class="p-button-text" (click)="addItems()" [loading]="(dialogIsLoading$ | async) ?? false" [disabled]="form.disabled"></button>
+    </ng-template>
+</p-dialog>

package/src/lib/components/form/formly/fields/formly-field-table-dialog-multiselect/formly-field-table-dialog-multiselect.component.ts

@@ -0,0 +1,133 @@
+import {ChangeDetectionStrategy, Component, Injector, OnDestroy, OnInit} from '@angular/core';
+
+import {FieldType} from '@ngx-formly/core';
+import {Message} from 'primeng/api';
+import {finalize, first, startWith} from 'rxjs/operators';
+import {Observable, ReplaySubject, Subject, Subscription} from 'rxjs';
+
+import {MediusFilterMatchType, MediusQueryParamBuilder, MediusQueryResult} from '../../../../../api/models';
+import {FieldManyToManyEditorDescriptor} from '../../../../../descriptors';
+
+@Component({
+    selector: 'mng-formly-table-multiselect-add-field',
+    templateUrl: './formly-field-table-dialog-multiselect.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngFormlyFieldTableDialogMultiselectComponent<T, ET> extends FieldType implements OnInit, OnDestroy {
+
+    public descriptor!: FieldManyToManyEditorDescriptor<T, ET>;
+
+    public itemsSubject: Subject<Array<T>> = new ReplaySubject(1);
+    public itemsAsync: Observable<Array<T>> = this.itemsSubject.asObservable();
+    public addItemsSubject: Subject<MediusQueryResult<T>> = new ReplaySubject(1);
+    public addItemsAsync: Observable<MediusQueryResult<T>> = this.addItemsSubject.asObservable();
+
+    public dialogUseDataProvider: boolean = false;
+    private dialogDataProviderService: any = null;
+    private dialogIsLoadingSubject = new ReplaySubject<boolean>(1);
+
+    public isDialogVisible = false;
+    public dialogAreItemsLoaded = false;
+    public dialogSelectedAddItems: Array<any> = [];
+    public dialogMessages: Message[] = [];
+    public dialogIsLoading$ = this.dialogIsLoadingSubject.asObservable();
+
+    public hasAddAction: boolean = false;
+    public hasDeleteAction: boolean = false;
+
+    private subscriptions: Subscription[] = [];
+
+    constructor(private injector: Injector) {
+        super();
+    }
+
+    public ngOnInit() {
+
+        this.descriptor = this.to['descriptor'];
+        if (this.descriptor.lookupTableDataProvider?.serviceType) {
+            this.dialogUseDataProvider = true;
+            this.dialogDataProviderService = this.injector.get<any>(this.descriptor.lookupTableDataProvider.serviceType);
+        }
+        this.hasAddAction = this.descriptor.actions.some(a => a === FieldManyToManyEditorDescriptor.ActionEnum.Add);
+        this.hasDeleteAction = this.descriptor.actions.some(a => a === FieldManyToManyEditorDescriptor.ActionEnum.Delete);
+
+        // init values
+        if (typeof this.formControl.value === 'undefined' || this.formControl.value === null) {
+            this.formControl.patchValue([]);
+        }
+        const subscription = this.formControl.valueChanges
+            .pipe(
+                startWith(this.formControl.value)
+            )
+            .subscribe(v => {
+                this.itemsSubject.next(v);
+            });
+        this.subscriptions.push(subscription);
+    }
+
+    public ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+
+    openAddDialog() {
+        if (!this.dialogAreItemsLoaded && this.dialogUseDataProvider) {
+            this.dialogIsLoadingSubject.next(true);
+            const queryParamBuilder = MediusQueryParamBuilder.create(50);
+            if (this.descriptor.lookupTableDescriptor.hasDefaultSort) {
+                this.descriptor.lookupTableDescriptor.defaultSortProperty.forEach((p, idx) => queryParamBuilder.withSort(p, this.descriptor.lookupTableDescriptor.defaultSortAsc[idx]));
+            }
+            if (this.descriptor.hasLookupExcludeValues) {
+                const filterValues = this.formControl.value.map((i: any) => i[this.descriptor.excludeValueProperty])
+                queryParamBuilder.withFilter(this.descriptor.excludeFilterProperty, filterValues, undefined, MediusFilterMatchType.NotIn);
+            }
+            this.descriptor.lookupTableDataProvider?.getAll(queryParamBuilder.build(), this.dialogDataProviderService)
+                .pipe(
+                    first(),
+                    finalize(() => this.dialogIsLoadingSubject.next(false))
+                )
+                .subscribe(res => {
+                    this.addItemsSubject.next(res);
+                    this.dialogAreItemsLoaded = true;
+                });
+        }
+        this.dialogSelectedAddItems = [];
+        this.isDialogVisible = true;
+    }
+
+    onSelectionChange(items: Array<any>) {
+        this.dialogSelectedAddItems = items;
+    }
+
+    hideDialog() {
+        this.isDialogVisible = false;
+    }
+
+    addItems() {
+        let value = this.formControl.value;
+        if (Array.isArray(value)) {
+            value = [...value, ...this.dialogSelectedAddItems];
+            this.formControl.patchValue(value);
+            this.dialogSelectedAddItems = [];
+            this.dialogAreItemsLoaded = false;
+            this.hideDialog();
+        } else {
+            console.error("Values are not an valid array, cannot add selected items to array");
+            this.dialogMessages = [{ severity: 'error', summary: 'Error', detail: 'Selected items could not be added' }];
+        }
+    }
+
+    removeItem(item: any) {
+        let value = this.formControl.value;
+        if (Array.isArray(value)) {
+            const compareProperty = this.descriptor.mainTableDescriptor.dataKeyProperty ? this.descriptor.mainTableDescriptor.dataKeyProperty : this.descriptor.mainTableDescriptor.model.idPropertyName;
+            if (!compareProperty) {
+                throw new Error('Cannot compare items, please provide main table data key property or model id property.');
+            }
+            value = value.filter(i => i[compareProperty] !== item[compareProperty]);
+            this.formControl.patchValue(value);
+            this.dialogAreItemsLoaded = false;
+        } else {
+            console.error("Values are not an valid array, cannot delete selected item from array");
+        }
+    }
+}

package/src/lib/components/form/formly/fields/formly-field-tabs/formly-field-tabs.component.html

@@ -0,0 +1,10 @@
+<p-tabView>
+    <p-tabPanel *ngFor="let tab of field.fieldGroup; let i = index; let last = last;"
+                [header]="tab.templateOptions?.label!"
+                [headerStyleClass]="formControl.valid ? 'p-tabview-title' : 'bla'">
+        <ng-template pTemplate="header">
+            <span class="p-tabview-title" [class.p-tabview-title-error]="formState.submittedOn && formState['tab_' + (tab.id ? tab.id : tab.templateOptions?.label!) + '_invalid']">{{ tab.templateOptions?.label! | translate }}</span>
+        </ng-template>
+        <formly-field [field]="tab"></formly-field>
+    </p-tabPanel>
+</p-tabView>

package/src/lib/components/form/formly/fields/formly-field-tabs/formly-field-tabs.component.ts

@@ -0,0 +1,10 @@
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import { FieldType } from '@ngx-formly/core';
+
+@Component({
+    selector: 'mng-formly-field-tabs',
+    templateUrl: './formly-field-tabs.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MngFormlyFieldTabsComponent extends FieldType {
+}