@mediusinc/mng-commons 0.2.0 → 0.2.1-rc

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/{lib/components/action/models/action-confirmation-service.model.d.ts → src/lib/components/action/models/action-confirmation-service.model.ts}

@@ -1,6 +1,7 @@
-import { ConfirmationService } from 'primeng/api';
-import { ActionDescriptor } from '../../../descriptors';
-export interface IActionConfirmationService {
-    getConfirmationService(): ConfirmationService;
-    getConfirmationServiceInstanceKey(action: ActionDescriptor<any>): string;
-}
+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/{lib/components/action/models/index.d.ts → src/lib/components/action/models/index.ts}

@@ -1,2 +1,2 @@
-export * from './action-confirmation-service.model';
-export * from './action-execution.model';
+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>

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

@@ -0,0 +1,109 @@
+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, ReplaySubject, Subject} from 'rxjs';
+import {first} from 'rxjs/operators';
+import {Dropdown} from 'primeng/dropdown';
+
+import {ILookupDataProvider} from '../../../data-providers';
+import {MediusQueryParamBuilder} from '../../../api/models';
+
+export const MNG_DROPDOWN_VALUE_ACCESSOR: ExistingProvider = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MngDropdownComponent),
+    multi: true
+};
+
+@Component({
+    selector: 'mng-dropdown',
+    templateUrl: './dropdown.component.html',
+    providers: [MNG_DROPDOWN_VALUE_ACCESSOR],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngDropdownComponent implements OnInit, ControlValueAccessor {
+
+    @Input() dataProvider?: ILookupDataProvider<any, any>;
+    @Input() dataKeyProperty?: string;
+    @Input() itemsLabelProperty?: string;
+    @Input() itemsValueProperty?: string;
+    @Input() multiselect: boolean = false;
+    @Input() placeholder?: string;
+    @Input() showClear = true;
+    @Input() className: string|null = null;
+    @Input() dropdownClassName: string|null = null;
+
+    @Output() onChange = new EventEmitter();
+
+    @ViewChild(Dropdown) private primeDropdown?: Dropdown;
+
+    private itemsSubject: Subject<Array<any>> = new ReplaySubject<Array<any>>(1);
+    private dataProviderService: any = null;
+    private onChangeFn: any = () => { };
+    private onTouchedFn: any = () => { };
+
+    public dropdownFormControl: FormControl = new FormControl();
+    public items$: Observable<Array<any>> = this.itemsSubject.asObservable();
+
+    constructor(private injector: Injector) {
+    }
+
+    ngOnInit(): void {
+
+        this.dropdownFormControl.valueChanges
+            .subscribe(v => {
+                this.onChangeFn(v);
+                this.onChange.next(v);
+            });
+
+        if (this.dataProvider) {
+            this.dataProviderService = this.dataProvider.serviceType
+                ? this.injector.get<any>(this.dataProvider.serviceType)
+                : null;
+
+            const queryParamBuilder = MediusQueryParamBuilder.create();
+            this.dataProvider.lookup(queryParamBuilder.build(), this.dataProviderService)
+                .pipe(
+                    first()
+                )
+                .subscribe(res => {
+                    this.itemsSubject.next(res);
+                });
+
+            if (!this.dropdownFormControl?.value) {
+                this.items$.pipe(first()).subscribe(res => {
+                    // TODO: check if really only way
+                    if (res.length === 1) {
+                        const value = this.itemsValueProperty ? res[0][this.itemsValueProperty] : res[0];
+                        this.dropdownFormControl?.patchValue(value);
+                        console.log('patched dropdown form value with', value);
+                    }
+                });
+            }
+        } else {
+            console.warn(`Data provider should be provided for MngDropdownComponent.`);
+        }
+    }
+
+    registerOnChange(fn: any): void {
+        this.onChangeFn = fn;
+    }
+
+    registerOnTouched(fn: any): void {
+        this.onTouchedFn = fn;
+    }
+
+    setDisabledState(isDisabled: boolean): void {
+        if (isDisabled) {
+            this.dropdownFormControl.disable();
+        } else {
+            this.dropdownFormControl.enable();
+        }
+    }
+
+    writeValue(obj: any): void {
+        this.dropdownFormControl.setValue(obj, { emitEvent: false });
+        if (this.primeDropdown) {
+            this.primeDropdown.writeValue(obj);
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+<form [formGroup]="form" (ngSubmit)="onSubmit($event)">
+    <formly-form [form]="form" [fields]="formFields" [options]="formOptions" [model]="formModel"></formly-form>
+    <button #submitButton pButton type="submit" [class.hidden]="!isSubmitButtonVisible" [disabled]="form.disabled" [loading]="(submitLoading$ | async) ?? false"></button>
+</form>
+<p-messages [value]="formMessages" [enableService]="false"></p-messages>