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

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);
+    }
+}

package/{lib/components/action/index.d.ts → src/lib/components/action/index.ts}

@@ -1,3 +1,3 @@
-export * from './action.component';
-export * from './route/action-route.component';
-export * from './dialog/action-dialog.component';
+export * from './action.component';
+export * from './route/action-route.component';
+export * from './dialog/action-dialog.component';

package/src/lib/components/action/models/action-confirmation-service.model.ts

@@ -0,0 +1,7 @@
+import {ConfirmationService} from 'primeng/api';
+import {ActionDescriptor} from '../../../descriptors';
+
+export interface IActionConfirmationService {
+    getConfirmationService(): ConfirmationService;
+    getConfirmationServiceInstanceKey(action: ActionDescriptor<any>): string;
+}

package/src/lib/components/action/models/action-execution.model.ts

@@ -0,0 +1,81 @@
+import {DynamicDialogRef} from 'primeng/dynamicdialog';
+import {Observable} from 'rxjs';
+
+import {IdType} from '../../../types';
+import {IDataProvider} from '../../../data-providers';
+import {TableviewComponentService} from '../../tableview/services';
+
+export class ActionExecContext<T, S, DP extends IDataProvider<T, S>> {
+    constructor(
+        public readonly dataProvider?: DP,
+        public readonly serviceInstance?: S,
+        public readonly data?: {
+            item?: T;
+            itemId?: IdType;
+            actionData?: ActionData;
+        },
+        public readonly sourceComponent: any = null,
+        public readonly tableview: TableviewComponentService<T, S>|null = null
+    ) {}
+}
+
+export class ActionError {
+    constructor(
+        public readonly error: any,  // error details
+        public readonly dismissed: boolean = false // by user
+    ) {}
+}
+
+export class ActionRunResult<T, S, DP extends IDataProvider<T, S>> {
+    constructor(
+        public readonly context?: ActionExecContext<T, S, DP>,
+        public readonly result?: T,
+        public readonly error?: ActionError
+    ) {}
+}
+
+export class ActionActivationResult<T, S, DP extends IDataProvider<T, S>> {
+    constructor(
+        public readonly runResult?: ActionRunResult<T, S, DP>,
+        public readonly dialogRef?: DynamicDialogRef
+    ) {}
+
+    public get runContext() {
+        return this.runResult ? this.runResult.context : null;
+    }
+
+    public get result() {
+        return this.runResult ? this.runResult.result : null;
+    }
+
+    public get error() {
+        return this.runResult ? this.runResult.error : null;
+    }
+}
+
+export class ActionTriggerResult<T, S, DP extends IDataProvider<T, S>> {
+    constructor(
+        public readonly activationResult?: ActionActivationResult<T, S, DP>,
+        public readonly routerNavigation?: Observable<boolean>
+    ) {}
+
+    public get runContext() {
+        return this.activationResult ? this.activationResult.runResult : null;
+    }
+
+    public get result() {
+        return this.activationResult ? this.activationResult.result : null;
+    }
+
+    public get error() {
+        return this.activationResult ? this.activationResult.error : null;
+    }
+
+    public get dialogRef() {
+        return this.activationResult ? this.activationResult.dialogRef : null;
+    }
+}
+
+export type ActionData = {
+    [key: string]: any;
+};

package/src/lib/components/action/models/index.ts

@@ -0,0 +1,2 @@
+export * from './action-confirmation-service.model';
+export * from './action-execution.model';

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

@@ -0,0 +1 @@
+<p-confirmDialog [key]="'actionRoute_' + cmpId" [baseZIndex]="50" appendTo="body"></p-confirmDialog>

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

@@ -0,0 +1,159 @@
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Params, Router} from '@angular/router';
+
+import {ConfirmationService, MessageService} from 'primeng/api';
+import {DynamicDialogRef} from 'primeng/dynamicdialog';
+import {Subscription} from 'rxjs';
+import {first} from 'rxjs/operators';
+
+import {ActionDescriptor, ActionActivationTriggerEnum} from '../../../descriptors';
+import {IActionConfirmationService, ActionData, ActionRunResult} from '../models';
+import {MngActionService, MngNavigationService} from '../../../services';
+import {TableviewComponentService} from '../../tableview/services';
+
+@Component({
+    selector: 'mng-action-route',
+    templateUrl: './action-route.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [MessageService, ConfirmationService]
+})
+export class MngActionRouteComponent<T, S> implements OnInit, OnDestroy, IActionConfirmationService {
+
+    private actions: Array<ActionDescriptor<T>> = [];
+    private activeAction?: ActionDescriptor<T>;
+
+    private dialogRef?: DynamicDialogRef;
+    private dialogCloseSubscription?: Subscription;
+
+    private subscriptions: Array<Subscription> = [];
+
+    public cmpId: string = Math.random().toString(36).substring(2);
+
+    constructor(
+        private router: Router,
+        private route: ActivatedRoute,
+        private confirmationService: ConfirmationService,
+        private navigationService: MngNavigationService,
+        private actionService: MngActionService,
+        private tableviewService: TableviewComponentService<T, S>
+    ) {}
+
+    public ngOnInit() {
+
+        this.actions = this.tableviewService?.actions.filter(a => a.activationTrigger === ActionActivationTriggerEnum.OnRoute) ?? [];
+        const subscription = this.route.params.subscribe(p => {
+            const action = this.findActiveAction(p);
+            if (action) {
+                this.activateAction(action, p, this.route.snapshot.queryParams);
+            }
+        });
+        this.subscriptions.push(subscription);
+    }
+
+    public ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+    }
+
+    public getConfirmationService() {
+        return this.confirmationService;
+    }
+
+    public getConfirmationServiceInstanceKey(action: ActionDescriptor<any>) {
+        return `actionRoute_${this.cmpId}`;
+    }
+
+    private activateAction(action: ActionDescriptor<T>, p: Params, qp: Params) {
+        this.activeAction = action;
+        const itemId = p['itemId'];
+        const actionData: ActionData = {};
+        for (let key in p) {
+            if (key === 'itemId') {
+                continue;
+            }
+            actionData[key] = p[key];
+        }
+        for (let key in qp) {
+            actionData[key] = p[key];
+        }
+        this.actionService.activateAction(action, itemId, undefined, actionData, this.tableviewService, this)
+            .pipe(first())
+            .subscribe(res => {
+                if (res.dialogRef) {
+                    this.dialogRef = res.dialogRef;
+                    this.dialogCloseSubscription = this.dialogRef?.onClose.subscribe(e => {
+                        const actionEv = e as ActionRunResult<T, S, any>;
+                        if (!actionEv?.error || !actionEv?.error?.dismissed) {
+                            this.tableviewService.reloadTable(); // reload only if no error in action and
+                        }
+                        this.deactivateAction();
+                    });
+                }
+            });
+    }
+
+    private deactivateAction() {
+        if (this.dialogCloseSubscription) {
+            this.dialogCloseSubscription.unsubscribe();
+            this.dialogCloseSubscription = undefined;
+        }
+        if (this.navigationService.getPreviousLocation()) {
+            // there are internal history records, so back can be normally called
+            this.navigationService.back();
+        } else {
+            // there is no internal history records, figure out the base url by eliminating action specific url
+            let url = this.navigationService.getCurrentLocation();
+            if (!url) {
+                this.navigationService.back();
+            } else {
+                if (url.startsWith('/')) {
+                    url = url.substring(1);
+                }
+                const urlPathSegments = url.split('?')[0].split('#')[0].split('/');
+                let actionUrl = this.activeAction?.routeUrl ?? '';
+                if (actionUrl.startsWith('/')) {
+                    actionUrl = actionUrl.substring(1);
+                }
+                const actionUrlSegments = actionUrl.split('/');
+                const redirectUrl = urlPathSegments.slice(0, urlPathSegments.length - actionUrlSegments.length).join('/');
+                this.router.navigateByUrl(`/${redirectUrl}`, { replaceUrl: true });
+            }
+        }
+        this.activeAction = undefined;
+        this.dialogRef = undefined;
+    }
+
+    private findActiveAction(params: Params): ActionDescriptor<T>|null {
+        const urlSegments = this.route.snapshot.url;
+        for (const action of this.actions) {
+            let actionUrl = action.routeUrl ?? '';
+            // TODO: dont strip '/', but use it accordingly with Angular's router patterns (/, ./, ../)
+            if (actionUrl.startsWith('/')) {
+                actionUrl = actionUrl.substring(1);
+            }
+            const actionUrlSegments = actionUrl.split('/');
+            if (actionUrlSegments.length !== urlSegments.length) {
+                continue;
+            }
+            let isMatch = true;
+            for (let i = 0; i < actionUrlSegments.length; i++) {
+                if (actionUrlSegments[i].startsWith(':')) {
+                    const paramName = actionUrlSegments[i].substring(1);
+                    if (!params[paramName]) {
+                        isMatch = false;
+                        break;
+                    }
+                } else if (actionUrlSegments[i] !== urlSegments[i].path) {
+                    isMatch = false;
+                    break;
+                }
+            }
+            if (isMatch) {
+                return action;
+            }
+        }
+        return null;
+    }
+}

package/src/lib/components/form/autocomplete/autocomplete.component.html

@@ -0,0 +1,16 @@
+<p-autoComplete [formControl]="autocompleteFormControl"
+                [placeholder]="$any(placeholder)"
+                [dropdown]="true"
+                [dataKey]="$any(dataKeyProperty)"
+                [field]="$any(itemsLabelProperty)"
+                [suggestions]="(suggestions$ | async) ?? []"
+                [multiple]="multiselect"
+                [showEmptyMessage]="true"
+                [emptyMessage]="'mngAutcomplete.noMatches' | translate"
+                [styleClass]="$any(className)"
+                [panelStyleClass]="$any(dropdownClassName)"
+                (completeMethod)="onSearch($event)"
+                (onSelect)="onSelect($event)"
+                appendTo="body"
+                dropdownMode="current">
+</p-autoComplete>

package/src/lib/components/form/autocomplete/autocomplete.component.ts

@@ -0,0 +1,113 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, ExistingProvider, forwardRef, Injector, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {ControlValueAccessor,  FormControl, NG_VALUE_ACCESSOR} from '@angular/forms';
+
+import {Observable, Subject, Subscription} from 'rxjs';
+import {finalize, first} from 'rxjs/operators';
+import {AutoComplete} from 'primeng/autocomplete';
+
+import {MediusFilterMatchType, MediusQueryParamBuilder} from '../../../api/models';
+import {ILookupDataProvider} from '../../../data-providers';
+
+export const MNG_AUTOCOMPLETE_VALUE_ACCESSOR: ExistingProvider = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MngAutocompleteComponent),
+    multi: true
+};
+
+@Component({
+    selector: 'mng-autocomplete',
+    templateUrl: './autocomplete.component.html',
+    providers: [MNG_AUTOCOMPLETE_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngAutocompleteComponent implements OnInit, ControlValueAccessor {
+
+    @Input() dataProvider?: ILookupDataProvider<any, any>;
+    @Input() dataKeyProperty?: string;
+    @Input() itemsLabelProperty?: string;
+    @Input() multiselect: boolean = false;
+    @Input() placeholder?: string;
+    @Input() className: string|null = null;
+    @Input() dropdownClassName: string|null = null;
+
+    @Output() onChange = new EventEmitter();
+
+    @ViewChild(AutoComplete) private primeAutocomplete?: AutoComplete;
+
+    private suggestionsSubject: Subject<Array<any>> = new Subject<Array<any>>();
+    private searchSubscription: Subscription|null = null;
+    private dataProviderService: any = null;
+    private onChangeFn: any = () => { };
+    private onTouchedFn: any = () => { };
+
+    public autocompleteFormControl: FormControl = new FormControl();
+    public suggestions$: Observable<Array<any>> = this.suggestionsSubject.asObservable();
+    public isLoading = false;
+
+    constructor(private injector: Injector) {
+    }
+
+    ngOnInit() {
+        if (this.dataProvider) {
+            this.dataProviderService = this.dataProvider.serviceType
+                ? this.injector.get<any>(this.dataProvider.serviceType)
+                : null;
+        } else {
+            console.warn(`Data provider should be provided for MngAutocompleteComponent.`);
+        }
+    }
+
+    onSearch(event: any) {
+        if (this.searchSubscription) {
+            // try to cancel existing HTTP request subscription
+            this.searchSubscription.unsubscribe();
+        }
+
+        if (this.dataProvider) {
+            this.isLoading = true;
+            const queryParamBuilder = MediusQueryParamBuilder.create();
+            if (this.itemsLabelProperty) {
+                queryParamBuilder.withSort(this.itemsLabelProperty);
+            }
+            if (event.query && event.query.length > 0 && this.itemsLabelProperty) {
+                queryParamBuilder.withFilter(this.itemsLabelProperty, event.query, undefined, MediusFilterMatchType.StartsWith)
+            }
+            this.searchSubscription = this.dataProvider.lookup(queryParamBuilder.build(), this.dataProviderService, event.query)
+                .pipe(
+                    first(),
+                    finalize(() => this.isLoading = false)
+                )
+                .subscribe((res: any) => {
+                    this.suggestionsSubject.next(res);
+                });
+        }
+    }
+
+    onSelect(value: any) {
+        this.onChangeFn(value);
+        this.onChange.next(value);
+    }
+
+    registerOnChange(fn: any): void {
+        this.onChangeFn = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this.onTouchedFn = fn;
+    }
+
+    setDisabledState(isDisabled: boolean): void {
+        if (isDisabled) {
+            this.autocompleteFormControl.disable();
+        } else {
+            this.autocompleteFormControl.enable();
+        }
+    }
+
+    writeValue(obj: any): void {
+        this.autocompleteFormControl.setValue(obj, { emitEvent: false });
+        if (this.primeAutocomplete) {
+            this.primeAutocomplete.writeValue(obj);
+        }
+    }
+}

package/src/lib/components/form/dropdown/dropdown.component.html

@@ -0,0 +1,29 @@
+<p-dropdown *ngIf="!multiselect; else pMultiselect"
+            [formControl]="dropdownFormControl"
+            [placeholder]="$any(placeholder)"
+            [dataKey]="$any(dataKeyProperty)"
+            [optionLabel]="$any(itemsLabelProperty)"
+            [optionValue]="$any(itemsValueProperty)"
+            [options]="(items$ | async) ?? []"
+            [showClear]="showClear"
+            [autoDisplayFirst]="false"
+            [styleClass]="$any(className)"
+            [panelStyleClass]="$any(dropdownClassName)"
+            (onChange)="onChange.emit($event.value)"
+            appendTo="body">
+</p-dropdown>
+<ng-template #pMultiselect>
+    <p-multiSelect display="chip"
+                   [formControl]="dropdownFormControl"
+                   [defaultLabel]="$any(placeholder)"
+                   [dataKey]="$any(dataKeyProperty)"
+                   [optionLabel]="$any(itemsLabelProperty)"
+                   [optionValue]="$any(itemsValueProperty)"
+                   [options]="(items$ | async) ?? []"
+                   [styleClass]="$any(className)"
+                   [panelStyleClass]="$any(dropdownClassName)"
+                   [filter]="false"
+                   (onChange)="onChange.emit($event.value)"
+                   appendTo="body">
+    </p-multiSelect>
+</ng-template>