@mediusinc/mng-commons 0.0.1-rc.3 → 0.2.1-rc

package/{lib/api/models/serialization.model.d.ts → src/lib/api/models/serialization.model.ts}

@@ -1,8 +1,9 @@
-export interface AttributeDef {
-    name: string;
-    baseName: string;
-    type: string;
-}
-export interface SerializableTypeMap {
-    [index: string]: any;
-}
+export interface AttributeDef {
+    name: string;
+    baseName: string;
+    type: string;
+}
+
+export interface SerializableTypeMap {
+    [index: string]: any;
+}

package/src/lib/api/services/crud-api.abstract.service.ts

@@ -0,0 +1,113 @@
+import {HttpClient} from '@angular/common/http';
+
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+import {MediusQueryParam, MediusQueryResult} from '../models';
+import {ObjectSerializer} from '../utils';
+import {ClassType} from '../../types';
+
+export abstract class AMngCrudApiService<T, QRT extends MediusQueryResult<T>> {
+
+    private readonly objectSerializer: ObjectSerializer = ObjectSerializer.get();
+
+    protected constructor(
+        protected type: ClassType<T>,
+        protected queryResultType: ClassType<QRT>,
+        protected http: HttpClient
+    ) {
+    }
+
+    protected abstract getBasePath(): string;
+    protected abstract getServiceBasePath(): string;
+
+    protected getGetAllPostPath(): string {
+        return '/get-all';
+    }
+    protected getCreatePostPath(): string {
+        return '';
+    }
+    protected getUpdatePutPath(id: any, item: T): string {
+        return `/${id}`;
+    }
+    protected getGetByIdGetPath(id: any): string {
+        return `/${id}`;
+    }
+    protected getRemoveDeletePath(id: any, item: T) {
+        return `/${id}`;
+    }
+
+    public createPost(item: T): Observable<T> {
+
+        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getCreatePostPath()}`;
+        return this.http.post<T>(url,
+            this.objectSerializer.serializeClass(item, this.type),
+            {
+                withCredentials: true,
+                observe: 'body',
+                reportProgress: false
+            })
+            .pipe(
+                map(res => this.objectSerializer.deserializeClass(res, this.type))
+            );
+    }
+
+    public getAllPost(queryParam?: MediusQueryParam): Observable<QRT> {
+
+        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getGetAllPostPath()}`;
+        return this.http.post<QRT>(url,
+            this.objectSerializer.serialize(queryParam, 'QueryParam'),
+            {
+                withCredentials: true,
+                observe: 'body',
+                reportProgress: false
+            })
+            .pipe(
+                map(res => this.objectSerializer.deserializeClass(res, this.queryResultType))
+            );
+    }
+
+    public getByIdGet(id: any): Observable<T> {
+
+        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getGetByIdGetPath(id)}`;
+        return this.http.get<T>(url,
+            {
+                withCredentials: true,
+                observe: 'body',
+                reportProgress: false
+            })
+            .pipe(
+                map(res => this.objectSerializer.deserializeClass(res, this.type))
+            );
+    }
+
+    public updatePut(id: any, item: T): Observable<T> {
+
+        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getUpdatePutPath(id, item)}`;
+        return this.http.put<T>(url,
+            this.objectSerializer.serializeClass(item, this.type),
+            {
+                withCredentials: true,
+                observe: 'body',
+                reportProgress: false
+            })
+            .pipe(
+                map(res => this.objectSerializer.deserializeClass(res, this.type))
+            );
+    }
+
+    public removeDelete(id: any, item: T): Observable<any> {
+
+        const url = `${this.getBasePath()}/${this.getServiceBasePath()}${this.getRemoveDeletePath(id, item)}`;
+        return this.http.request<any>('delete', url,
+            {
+                withCredentials: true,
+                observe: 'body',
+                reportProgress: false,
+                body: this.objectSerializer.serializeClass(item, this.type)
+            })
+            .pipe(
+                map(res => this.objectSerializer.deserializeClass(res, this.type))
+            );
+    }
+}

package/src/lib/api/services/index.ts

@@ -0,0 +1 @@
+export * from './crud-api.abstract.service';

package/{lib/api/utils/index.d.ts → src/lib/api/utils/index.ts}

@@ -1,2 +1,2 @@
-export * from './object-serializer.util';
-export * from './medius-rest.util';
+export * from './object-serializer.util';
+export * from './medius-rest.util';

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>