@mediusinc/mng-commons 0.2.0 → 0.2.1-rc

package/src/lib/api/utils/medius-rest.util.ts

@@ -0,0 +1,146 @@
+import {Params} from '@angular/router';
+
+import {FilterMetadata, LazyLoadEvent} from 'primeng/api';
+
+import {MediusFilterMatchType, MediusQueryParam, MediusQueryParamBuilder} from '../models';
+import {FilterDescriptor} from '../../descriptors';
+
+export class MediusRestUtil {
+
+    // first value is from primeNG, second is for use in query params
+    public static readonly matchModeMapping: Array<[string, string, MediusFilterMatchType]> = [
+        ['contains', 'c', MediusFilterMatchType.Contains],
+        ['endsWith', 'ew', MediusFilterMatchType.EndsWith],
+        ['equals', 'eq', MediusFilterMatchType.Equals],
+        ['gte', 'gte', MediusFilterMatchType.GreaterThan],
+        ['leq', 'leq', MediusFilterMatchType.SmallerThan],
+        ['startsWith', 'sw', MediusFilterMatchType.StartsWith],
+        ['in', 'in', MediusFilterMatchType.In],
+        ['notEquals', 'neq', MediusFilterMatchType.NotEquals]
+    ];
+
+    public static fromAngularQueryParamsToMediusQueryParams(params: Params, filterDescriptors: Array<FilterDescriptor<any>>, defaultItemsPerPage = 10, defaultOffset= 0): MediusQueryParam {
+        const offset = params['first'] ? parseInt(params['first']) : defaultOffset;
+        const itemsPerPage = params['rows'] ? parseInt(params['rows']) : defaultItemsPerPage;
+
+        const mediusParamsBuilder = MediusQueryParamBuilder.create(itemsPerPage, offset);
+
+        if (params['sort']) {
+            for (const sort of params['sort'].split(',')) {
+                const qpSortSplit = sort.split(':');
+                const field = qpSortSplit[0];
+                const asc = qpSortSplit.length > 1 ? qpSortSplit[1] === 'asc' : true;
+                mediusParamsBuilder.withSort(field, asc);
+            }
+        }
+        if (params['filter']) {
+            const filterSplit = params['filter'].split(',');
+            for (const filterField of filterSplit) {
+                const filterFieldSplit = filterField.split(':');
+                const field = filterFieldSplit[0];
+                const operator = filterFieldSplit.length > 1 ? filterFieldSplit[1] : 'eq';
+
+                // prepare value
+                let value: any = filterFieldSplit.length > 2 ? filterFieldSplit[2] : '';
+                let valueTo: any = undefined;
+                if (value.startsWith('\'')) {
+                    value = value.substring(1, value.length - 1);
+                }
+                if (value.startsWith('[') && value.endsWith(']')) {
+                    value = value.substring(1, value.length - 1).split(',').map((v: string)  => v.startsWith('\'') ? v.substring(1, v.length - 1) : v);
+                }
+
+                const operatorMapping = MediusRestUtil.matchModeMapping.find(mapping => mapping[1] === operator);
+                const filterDescriptor = filterDescriptors.find(f => f.property === field);
+                if (operatorMapping && filterDescriptor) {
+                    const fieldFilterProperty = filterDescriptor.filterProperty ?? filterDescriptor.property;
+                    mediusParamsBuilder.withFilter(fieldFilterProperty, value, valueTo, MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode(operatorMapping[0]));
+                }
+            }
+        }
+
+        return mediusParamsBuilder.build();
+    }
+
+    public static fromPrimeLazyLoadEventToAngularQueryParams(event: LazyLoadEvent, defaultItemsPerPage = 10, defaultOffset= 0): Params {
+        const params: Params = {
+            first: null,
+            rows: null,
+            sort: null,
+            filter: null
+        };
+
+        if (event.first && event.first !== defaultOffset && event.first > 0) {
+            params['first'] = event.first;
+        }
+        if (event.rows && event.rows !== defaultItemsPerPage && event.rows > 0) {
+            params['rows'] = event.rows;
+        }
+
+        if (event.multiSortMeta?.length ?? 0 > 0) {
+            params['sort'] = event.multiSortMeta?.map(s => `${s.field}${s.order === 1 ? '' : ':desc'}`).join(',');
+        }
+
+        if (event.filters) {
+            const filters = [];
+            for (const field in event.filters) {
+                const primeOperator = event.filters[field].matchMode;
+                let value = event.filters[field].value;
+                const operatorMapping = MediusRestUtil.matchModeMapping.find(mapping => mapping[0] === primeOperator);
+                if (operatorMapping && typeof value !== 'undefined' && value !== null &&
+                    ((typeof value === 'string' && value.length > 0) || (Array.isArray(value) && value.length > 0))) {
+
+                    if (Array.isArray(value)) {
+                        value = `[${value.map(v => `'${v}'`).join(',')}]`;
+                    } else {
+                        value = `'${value}'`;
+                    }
+
+                    filters.push(`${field}:${operatorMapping[1]}:${value}`);
+                }
+            }
+            if (filters.length > 0) {
+                params['filter'] = filters.join(',');
+            }
+        }
+
+        return params;
+    }
+
+    public static fromPrimeLazyLoadEventToMediusQueryParams(event: LazyLoadEvent): MediusQueryParam {
+
+        const queryParamBuilder = MediusQueryParamBuilder.create(event.rows, event.first);
+
+        // apply sorting
+        if (event.multiSortMeta) {
+            event.multiSortMeta.forEach(msm => queryParamBuilder.withSort(msm.field, msm.order === 1));
+        }
+
+        // apply filtering
+        if (event.filters) {
+            for (const key of Object.keys(event.filters)) {
+                const filterEvent = event.filters[key];
+                if (Array.isArray(filterEvent)) {
+                    (filterEvent as FilterMetadata[]).filter(e => e.value)
+                        .forEach(e => MediusRestUtil.addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, key, e));
+                } else if (typeof filterEvent === 'object') {
+                    if (filterEvent.value) {
+                        MediusRestUtil.addMediusFilterFromPrimeFilterMetadata(queryParamBuilder, key, filterEvent);
+                    }
+                }
+            }
+        }
+
+        return queryParamBuilder.build();
+    }
+
+    public static addMediusFilterFromPrimeFilterMetadata(queryParamBuilder: MediusQueryParamBuilder, property: string, filterMetadata: FilterMetadata) {
+        const matchType: MediusFilterMatchType = MediusRestUtil.getMediusFilterMatchTypeFromPrimeMatchMode(filterMetadata.matchMode ?? 'contains');
+        queryParamBuilder.withFilter(property, filterMetadata.value, undefined, matchType);
+    }
+
+    public static getMediusFilterMatchTypeFromPrimeMatchMode(matchMode: string): MediusFilterMatchType {
+        const mapping = MediusRestUtil.matchModeMapping.find(m => m[0] === matchMode);
+        return mapping?.[2] ?? MediusFilterMatchType.Contains;
+    }
+}

package/src/lib/api/utils/object-serializer.util.ts

@@ -0,0 +1,227 @@
+import {AttributeDef, enumsMapBase, SerializableTypeMap, typeMapBase} from '../models';
+import {ClassType} from '../../types';
+import {TypeUtil} from '../../utils';
+
+export class ObjectSerializer {
+
+    private readonly _primitives: string[] = [
+        'string',
+        'boolean',
+        'double',
+        'integer',
+        'long',
+        'float',
+        'number',
+        'any'
+    ];
+    private readonly _typeMap: SerializableTypeMap = {
+        ...typeMapBase
+    }
+    private readonly _enumMap: SerializableTypeMap = {
+        ...enumsMapBase
+    }
+
+    private static _instance: ObjectSerializer = new ObjectSerializer();
+
+    /**
+     * Only use one instance of object (out of Angular context)
+     */
+    public static get(): ObjectSerializer {
+        return ObjectSerializer._instance;
+    }
+
+    public get primitives() { return this._primitives }
+    public get typeMap() { return this._typeMap }
+    public get enumMap() { return this._enumMap }
+
+    public findAttributeDefinitionByClassType(type: ClassType<any>, attributeName: string): AttributeDef|null {
+        return this.findAttributeDefinition(TypeUtil.findTypeName(type), attributeName);
+    }
+    public findAttributeDefinition(typeName: string, attributeName: string): AttributeDef|null {
+        const attributeDefs = this.findAttributesDefinition(typeName);
+        if (!attributeDefs) {
+            return null;
+        }
+        for (let attribute of attributeDefs) {
+            if (attribute.name === attributeName) {
+                return attribute;
+            }
+        }
+        return null;
+    }
+    public findAttributesDefinitionByClassType(type: ClassType<any>): Array<AttributeDef>|null {
+        return this.findAttributesDefinition(TypeUtil.findTypeName(type));
+    }
+    public findAttributesDefinition(typeName: string): Array<AttributeDef>|null {
+        const typeDef = this.findType(typeName);
+        if (!typeDef) {
+            return null;
+        }
+        return typeDef.getAttributeTypeMap() as Array<AttributeDef>;
+    }
+    public findByClassType(type: ClassType<any>): any {
+        return this.findType(TypeUtil.findTypeName(type));
+    }
+    public findType(typeName: string): any {
+        return this._typeMap[typeName];
+    }
+    public findEnum(enumName: string): any {
+        return this._enumMap[enumName];
+    }
+
+    public registerTypes(types: SerializableTypeMap) {
+        for (const key in types) {
+            this.registerType(types[key], key);
+        }
+    }
+
+    public registerType(type: ClassType<any>, optTypeName?: string) {
+        // try to find name from decorator
+        let typeName = TypeUtil.getDecoratorTypeName(type);
+        if (!typeName) {
+            // defined name from optional type name
+            typeName = optTypeName;
+            if (!typeName) {
+                console.warn(`Registering type ${type} failed, because typeName could not be determined and optional name was not provided.`);
+                return;
+            }
+        }
+        if (typeof this._typeMap[typeName] !== 'undefined') {
+            console.warn(`Registering type ${type} under key ${typeName} skipped, because type already exists for this key.`);
+        } else {
+            TypeUtil.defineReflectTypeName(type, typeName);
+            this._typeMap[typeName] = type;
+        }
+    }
+
+    public registerEnums(enums: SerializableTypeMap) {
+        for (const key in enums) {
+            if (typeof this._enumMap[key] !== 'undefined') {
+                console.warn(`Registering enum ${key} skipped, because enum already exists.`);
+            } else {
+                this._enumMap[key] = enums[key];
+            }
+        }
+    }
+
+    public findCorrectType(data: any, expectedType: string) {
+        if (data == undefined) {
+            return expectedType;
+        } else if (this._primitives.indexOf(expectedType.toLowerCase()) !== -1) {
+            return expectedType;
+        } else if (expectedType === 'Date') {
+            return expectedType;
+        } else {
+            if (this._enumMap[expectedType]) {
+                return expectedType;
+            }
+
+            if (!this._typeMap[expectedType]) {
+                return expectedType; // w/e we don't know the type
+            }
+
+            // Check the discriminator
+            const discriminatorProperty = this._typeMap[expectedType].discriminator;
+            if (discriminatorProperty == null) {
+                return expectedType; // the type does not have a discriminator. use it.
+            } else {
+                if (data[discriminatorProperty]) {
+                    const discriminatorType = data[discriminatorProperty];
+                    if (this._typeMap[discriminatorType]) {
+                        return discriminatorType; // use the type given in the discriminator
+                    } else {
+                        return expectedType; // discriminator did not map to a type
+                    }
+                } else {
+                    return expectedType; // discriminator was not present (or an empty string)
+                }
+            }
+        }
+    }
+
+    public serializeClass<T>(data: any, type: ClassType<T>) {
+        return this.serialize(data, TypeUtil.findTypeName(type));
+    }
+    public serialize(data: any, type: string) {
+        if (data == undefined) {
+            return data;
+        } else if (this._primitives.indexOf(type.toLowerCase()) !== -1) {
+            return data;
+        } else if (type.lastIndexOf('Array<', 0) === 0) { // string.startsWith pre es6
+            let subType: string = type.replace('Array<', ''); // Array<Type> => Type>
+            subType = subType.substring(0, subType.length - 1); // Type> => Type
+            const transformedData: any[] = [];
+            // tslint:disable-next-line:prefer-for-of
+            for (let index = 0; index < data.length; index++) {
+                const datum = data[index];
+                transformedData.push(this.serialize(datum, subType));
+            }
+            return transformedData;
+        } else if (type === 'Date') {
+            return data.toISOString();
+        } else {
+            if (this._enumMap[type]) {
+                return data;
+            }
+            if (!this._typeMap[type]) { // in case we dont know the type
+                return data;
+            }
+
+            // Get the actual type of this object
+            type = this.findCorrectType(data, type);
+
+            // get the map for the correct type.
+            const attributeTypes = this._typeMap[type].getAttributeTypeMap() as Array<AttributeDef>;
+            const instance: {[index: string]: any} = {};
+            // tslint:disable-next-line:prefer-for-of
+            for (let index = 0; index < attributeTypes.length; index++) {
+                const attributeType = attributeTypes[index];
+                instance[attributeType.baseName] = this.serialize(data[attributeType.name],
+                    attributeType.type);
+            }
+            return instance;
+        }
+    }
+
+    public deserializeClass<T>(data: any, type: ClassType<T>) {
+        return this.deserialize(data, TypeUtil.findTypeName(type));
+    }
+    public deserialize(data: any, type: string) {
+        // polymorphism may change the actual type.
+        type = this.findCorrectType(data, type);
+        if (data == undefined) {
+            return data;
+        } else if (this._primitives.indexOf(type.toLowerCase()) !== -1) {
+            return data;
+        } else if (type.lastIndexOf('Array<', 0) === 0) { // string.startsWith pre es6
+            let subType: string = type.replace('Array<', ''); // Array<Type> => Type>
+            subType = subType.substring(0, subType.length - 1); // Type> => Type
+            const transformedData: any[] = [];
+            // tslint:disable-next-line:prefer-for-of
+            for (let index = 0; index < data.length; index++) {
+                const datum = data[index];
+                transformedData.push(this.deserialize(datum, subType));
+            }
+            return transformedData;
+        } else if (type === 'Date') {
+            return new Date(data);
+        } else {
+            if (this._enumMap[type]) {// is Enum
+                return data;
+            }
+
+            if (!this._typeMap[type]) { // dont know the type
+                return data;
+            }
+            const instance = new this._typeMap[type]();
+            const attributeTypes = this._typeMap[type].getAttributeTypeMap() as Array<AttributeDef>;
+            // tslint:disable-next-line:prefer-for-of
+            for (let index = 0; index < attributeTypes.length; index++) {
+                const attributeType = attributeTypes[index];
+                instance[attributeType.name] = this.deserialize(data[attributeType.baseName],
+                    attributeType.type);
+            }
+            return instance;
+        }
+    }
+}

package/src/lib/components/action/action.component.html

@@ -0,0 +1,30 @@
+<ng-container *ngIf="$isVisible | async">
+    <button *ngIf="action.icon && action.title === null; else noIcon" type="button"
+            pButton pRipple
+            [icon]="action.icon"
+            [loading]="($loading | async) ?? false"
+            [disabled]="!($isEnabled | async)"
+            [pTooltip]="$any($tooltip | async)"
+            (click)="triggerAction($event)"
+            class="mng-action-button mng-action-button-icon p-button-rounded"
+            [class.p-button-primary]="action.level === 1"
+            [class.p-button-success]="action.level === 5"
+            [class.p-button-danger]="action.level === 7">
+    </button>
+    <ng-template #noIcon>
+        <button type="button"
+                pButton pRipple
+                [icon]="$any(action.icon)"
+                [label]="($label | async) ?? ''"
+                [loading]="($loading | async) ?? false"
+                [disabled]="!($isEnabled | async)"
+                [pTooltip]="$any($tooltip | async)"
+                (click)="triggerAction($event)"
+                class="mng-action-button p-button-text"
+                [class.p-button-primary]="action.level === 1"
+                [class.p-button-success]="action.level === 5"
+                [class.p-button-danger]="action.level === 7">
+        </button>
+    </ng-template>
+    <p-confirmDialog *ngIf="action.hasRunConfirmation" [key]="action.actionName + '_' + cmpId" [baseZIndex]="50" appendTo="body"></p-confirmDialog>
+</ng-container>

package/src/lib/components/action/action.component.ts

@@ -0,0 +1,77 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+
+import {TranslateService} from '@ngx-translate/core';
+
+import {Observable, of, ReplaySubject} from 'rxjs';
+import {finalize, first} from 'rxjs/operators';
+import {ConfirmationService, MessageService} from 'primeng/api';
+
+import {IdType} from '../../types';
+import {ActionDescriptor} from '../../descriptors';
+import {IActionConfirmationService, ActionData} from './models';
+import {MngActionService} from '../../services';
+import {I18nUtil} from '../../utils';
+import {TableviewComponentService} from '../tableview/services';
+
+@Component({
+    selector: 'mng-action',
+    templateUrl: './action.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [MessageService, ConfirmationService]
+})
+export class MngActionComponent<T, S> implements OnInit, IActionConfirmationService {
+
+    // metadata and editor mode input
+    @Input() public action!: ActionDescriptor<T>;
+    @Input() public item?: T;
+    @Input() public itemId?: IdType;
+    @Input() public actionData?: ActionData;
+
+    private loadingSubject = new ReplaySubject<boolean>(1);
+    public $loading: Observable<boolean> = this.loadingSubject.asObservable();
+
+    public cmpId: string = Math.random().toString(36).substring(2);
+    public $isVisible!: Observable<boolean>;
+    public $isEnabled!: Observable<boolean>;
+    public $label!: Observable<string|null>;
+    public $tooltip!: Observable<string|null>;
+
+    constructor(
+        private route: ActivatedRoute,
+        private translate: TranslateService,
+        private actionService: MngActionService,
+        private confirmationService: ConfirmationService,
+        private tableviewService: TableviewComponentService<T, S>
+    ) {
+        this.loadingSubject.next(false);
+    }
+
+    public ngOnInit() {
+        const context = this.actionService.getActionExecContext(this.action, this.itemId, this.item, this.tableviewService?.dataProvider ?? undefined, this.tableviewService, this, this.actionData);
+        this.$isVisible = typeof this.action.isVisibleFunction === 'function' ? this.action.isVisibleFunction(context) : of(true);
+        this.$isEnabled = typeof this.action.isEnabledFunction === 'function' ? this.action.isEnabledFunction(context) : of(true);
+        this.$label = I18nUtil.streamActionTranslation(this.translate, this.action, 'title', this.action?.title ?? undefined, this.item);
+        this.$tooltip = I18nUtil.streamActionTranslation(this.translate, this.action, 'tooltip', this.action?.tooltip ?? undefined, this.item);
+    }
+
+    public triggerAction(event: Event) {
+        this.loadingSubject.next(true);
+        const actionData = this.actionData ? this.actionData : {};
+        actionData['cmpId'] = this.cmpId;
+        this.actionService.triggerAction(this.action, this.itemId, this.item, actionData, this.route, this.tableviewService, this)
+            .pipe(
+                first(),
+                finalize(() => this.loadingSubject.next(false))
+            )
+            .subscribe(res => {});
+    }
+
+    public getConfirmationService() {
+        return this.confirmationService;
+    }
+
+    public getConfirmationServiceInstanceKey(action: ActionDescriptor<any>) {
+        return `${action.actionName}_${this.cmpId}`;
+    }
+}

package/src/lib/components/action/dialog/action-dialog.component.html

@@ -0,0 +1,26 @@
+<div class="h-full flex flex-column">
+    <div class="flex-grow-1">
+        <div class="text-center" *ngIf="loading$ | async">
+            <p-progressSpinner [style]="{width: '3rem', height: '3rem'}" strokeWidth="3"></p-progressSpinner>
+        </div>
+        <mng-form-editor *ngIf="action.editorDescriptor && !(loading$ | async)"
+                    [descriptor]="action.editorDescriptor"
+                    [item]="item"
+                    (onSubmit)="onSubmit($event)">
+        </mng-form-editor>
+    </div>
+    <div class="flex flex-row justify-content-between">
+        <div></div>
+        <div>
+            <button type="button" pButton pRipple [label]="'general.close' | translate" icon="pi pi-times" class="p-button-text" (click)="closeDialog()" [disabled]="submitLoading$ | async"></button>
+            <button *ngIf="isSaveButton" #submitButton type="button" pButton pRipple
+                    [label]="'general.save' | translate"
+                    icon="pi pi-check"
+                    class="p-button-text"
+                    (click)="saveItem()"
+                    [loading]="(submitLoading$ | async) ?? false"
+                    [disabled]="(submitLoading$ | async) ?? false">
+            </button>
+        </div>
+    </div>
+</div>

package/src/lib/components/action/dialog/action-dialog.component.ts

@@ -0,0 +1,171 @@
+import {ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, QueryList, ViewChild} from '@angular/core';
+
+import {TranslateService} from '@ngx-translate/core';
+import {DynamicDialogConfig, DynamicDialogRef} from 'primeng/dynamicdialog';
+import {Observable, of, ReplaySubject, Subscription} from 'rxjs';
+import {catchError, finalize, first, mergeMap} from 'rxjs/operators';
+
+import {ActionData, ActionError, ActionRunResult} from '../models';
+import {ActionDescriptor, ActionEditorDescriptor} from '../../../descriptors';
+import {IdType} from '../../../types';
+import {IEditorDataProvider} from '../../../data-providers';
+import {MngFormEditorSubmitEvent} from '../../form/models';
+import {MngActionService, MngCommonsService} from '../../../services';
+import {MngTemplateDirective} from '../../../directives';
+import {MngFormEditorComponent} from '../../form';
+import {I18nUtil, ToastUtil} from '../../../utils';
+import {TableviewComponentService} from '../../tableview/services';
+
+@Component({
+    selector: 'mng-action-dialog',
+    templateUrl: './action-dialog.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngActionDialogComponent<T, S> implements OnInit, OnDestroy {
+
+    // metadata and editor mode input
+    @Input() public action!: ActionEditorDescriptor<T>;
+
+    // data source inputs
+    @Input() public itemId?: IdType;
+    @Input() public item?: T;
+    @Input() public actionData?: ActionData;
+    @Input() public dataProvider?: IEditorDataProvider<T, S>;
+
+    // content and view queries
+    @ContentChildren(MngTemplateDirective) templates!: QueryList<MngTemplateDirective>;
+
+    @ViewChild('submitButton') private submitButtonElementRef!: ElementRef;
+    @ViewChild(MngFormEditorComponent) private editorComponent!: MngFormEditorComponent<T>;
+
+    public cmpId: string = Math.random().toString(36).substring(2);
+
+    private loadingSubject = new ReplaySubject<boolean>(1);
+    private submitLoadingSubject = new ReplaySubject<boolean>(1);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    public submitLoading$: Observable<boolean> = this.submitLoadingSubject.asObservable();
+    public isSaveButton = true;
+
+    private tableviewService?: TableviewComponentService<T, S>;
+    private sourceComponent: any = this;
+    private subscriptions: Array<Subscription> = [];
+
+    constructor(
+        private injector: Injector,
+        private translate: TranslateService,
+        public dialogRef: DynamicDialogRef,
+        public dialogConfig: DynamicDialogConfig,
+        private actionService: MngActionService,
+        // private mngCommonsService: MngCommonsService
+    ) {
+    }
+
+    public ngOnInit() {
+
+        if (this.dialogConfig.data) {
+            if (this.dialogConfig.data.action) {
+                this.action = this.dialogConfig.data.action;
+            }
+            if (this.dialogConfig.data.item) {
+                this.item = this.dialogConfig.data.item;
+            }
+            if (this.dialogConfig.data.itemId) {
+                this.itemId = this.dialogConfig.data.itemId;
+            }
+            if (this.dialogConfig.data.actionData) {
+                this.actionData = this.dialogConfig.data.actionData;
+            }
+            if (this.dialogConfig.data.tableview) {
+                this.tableviewService = this.dialogConfig.data.tableview;
+                if (!this.dataProvider && this.tableviewService?.dataProvider) {
+                    this.dataProvider = this.tableviewService.dataProvider;
+                }
+            }
+            if (this.dialogConfig.data.sourceComponent) {
+                this.sourceComponent = this.dialogConfig.data.sourceComponent;
+            }
+        }
+
+        this.isSaveButton = typeof this.action.submitFunction === 'function';
+        this.setDialogHeaderTitle();
+
+        this.loadItemWithDataProvider();
+    }
+
+    public ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+
+    public onSubmit(event: MngFormEditorSubmitEvent<T>) {
+        if (event.success) {
+            if (typeof this.action.submitFunction !== 'function') {
+                return;
+            }
+            this.submitLoadingSubject.next(true);
+            this.actionService.runEditorSave(this.action, this.itemId, event.formItem, this.dataProvider, this.sourceComponent, this.tableviewService, this.actionData)
+                .pipe(
+                    first(),
+                    finalize(() => this.submitLoadingSubject.next(false))
+                )
+                .subscribe(res => {
+                    this.closeDialog(res);
+                });
+        }
+    }
+
+    public closeDialog(result?: ActionRunResult<T, any, any>) {
+        this.dialogRef.close(result ? result : new ActionRunResult(undefined, undefined, new ActionError(null, true)));
+    }
+
+    public saveItem() {
+        this.editorComponent.submit();
+    }
+
+    private loadItemWithDataProvider() {
+        if (typeof this.action.fetchFunction !== 'function') {
+            return;
+        }
+        this.loadingSubject.next(true);
+        this.actionService.runEditorFetch(this.action, this.itemId, this.dataProvider, this.sourceComponent, this.tableviewService)
+            .pipe(
+                first(),
+                catchError(err => {
+                    if (this.action.hasRunNotificationError) {
+                        ToastUtil.actionNotificationError(this.translate, this.action, err, 'fetch', this.tableviewService, this.item);
+                    }
+                    throw err;
+                }),
+                finalize(() => this.loadingSubject.next(false))
+            )
+            .subscribe(res => {
+                this.item = res.result;
+                if (this.action.hasFetchNotificationSuccess) {
+                    ToastUtil.actionNotificationSuccess(this.translate, this.action, 'fetch', this.action.fetchNotificationSuccessTitle,
+                        this.action.fetchNotificationSuccessMessage,this.tableviewService, this.item);
+                }
+                this.setDialogHeaderTitle();
+            });
+    }
+
+    private setDialogHeaderTitle() {
+        if (this.action.editorTitle === null) {
+            requestAnimationFrame(() => {
+                this.dialogConfig.header = undefined;
+            });
+            return;
+        }
+        const subscription = I18nUtil.streamActionTranslation(this.translate, this.action as ActionDescriptor<T>, 'dialog.title', undefined, this.item)
+            .pipe(
+                mergeMap(i18nDialogTitle => i18nDialogTitle === null
+                    ? I18nUtil.getActionTranslation(this.translate, this.action as ActionDescriptor<T>, 'title', this.action.editorTitle, this.item)
+                    : of(i18nDialogTitle))
+            )
+            .subscribe(t => {
+                requestAnimationFrame(() => {
+                    this.dialogConfig.header = t ?? undefined;
+                    // this.mngCommonsService.setPageTitle(t ?? undefined);
+                });
+            });
+        this.subscriptions.push(subscription);
+    }
+}