@mediusinc/mng-commons 0.2.0 → 0.2.1-rc

package/src/lib/components/tableview/table/table.component.html

@@ -0,0 +1,110 @@
+<div [style.height]="scrollHeight === 'flex' ? 'calc(100vh - ' + descriptor.tableFullHeightOffset + 'px)' : null">
+    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->
+    <p-table *ngIf="!useQueryParams || useQueryParamsInitialized"
+             [value]="infiniteScroll ? dataProviderInfiniteScrollItems : ((queryResult$ | async)?.pageData ?? [])"
+             [dataKey]="$any(descriptor.dataKeyProperty)"
+             [lazy]="useDataProvider"
+             [loading]="(loading$ | async) ?? false"
+             [paginator]="useDataProvider && !infiniteScroll"
+             [rows]="$any(infiniteScroll ? 20 : rows)"
+             [first]="$any(infiniteScroll ? 0 : offset)"
+             [totalRecords]="$any(infiniteScroll ? null : (queryResult$ | async)?.allDataCount ?? 0)"
+             [rowsPerPageOptions]="$any(infiniteScroll ? null : rowsPerPageOptions)"
+             [showCurrentPageReport]="!infiniteScroll"
+             [currentPageReportTemplate]="'mngTable.paginationMsg' | translate"
+             [multiSortMeta]="$any(multiSortMeta)"
+             [filters]="filterMetadata"
+             [(selection)]="selection"
+             (selectionChange)="onSelectionChange($event)"
+             [scrollable]="infiniteScroll"
+             [virtualScroll]="infiniteScroll"
+             [virtualRowHeight]="$any(rowHeight)"
+             [scrollHeight]="$any(scrollHeight)"
+             [rowHover]="true"
+             (onLazyLoad)="onTableLazyLoad($event)"
+             (onSort)="onTableSort($event)"
+             (onFilter)="onTableFilter($event)"
+             sortMode="multiple"
+             responsiveLayout="scroll">
+
+        <ng-template *ngIf="captionTemplate || descriptor.title" pTemplate="caption">
+            <ng-container *ngIf="captionTemplate; else defaultCaption">
+                <ng-container *ngTemplateOutlet="captionTemplate"></ng-container>
+            </ng-container>
+            <ng-template #defaultCaption>
+                <h5 class="p-m-0">{{ descriptor.title }}</h5>
+            </ng-template>
+        </ng-template>
+
+        <ng-template pTemplate="header">
+            <tr>
+                <th *ngIf="selectionEnabled">
+                    <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                </th>
+                <ng-container *ngFor="let col of descriptor.columns">
+                    <th *ngIf="col.isSortEnabled" [pSortableColumn]="col.property">
+                        <div class="flex justify-content-between align-items-center">
+                            {{ descriptor.model.typeName + ".properties." + col.property | translate }}
+                            <p-sortIcon [field]="col.property"></p-sortIcon>
+                            <mng-table-column-filter *ngIf="col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu"
+                                                     class="ml-auto"
+                                                     [display]="descriptor.filterDisplay"
+                                                     [descriptor]="col.filterDescriptor">
+                            </mng-table-column-filter>
+                        </div>
+                    </th>
+                    <th *ngIf="!col.isSortEnabled">
+                        {{ descriptor.model.typeName + ".properties." + col.property | translate }}
+                        <ng-container>
+                            <mng-table-column-filter *ngIf="col.filterDescriptor && descriptor.filterDisplay === filterDisplayMenu"
+                                                     class="ml-auto"
+                                                     [display]="descriptor.filterDisplay"
+                                                     [descriptor]="col.filterDescriptor">
+                            </mng-table-column-filter>
+                        </ng-container>
+                    </th>
+                </ng-container>
+                <th *ngIf="columnActionTemplate"></th>
+            </tr>
+            <tr *ngIf="descriptor.filterDisplay === filterDisplayRow">
+                <th *ngFor="let col of descriptor.columns">
+                    <div class="flex" *ngIf="col.filterDescriptor">
+                        <mng-table-column-filter [display]="descriptor.filterDisplay" [descriptor]="col.filterDescriptor"></mng-table-column-filter>
+                    </div>
+                </th>
+                <th *ngIf="columnActionTemplate"></th>
+            </tr>
+        </ng-template>
+
+        <ng-template pTemplate="body" let-item let-idx="rowIndex">
+            <tr [style.height.px]="descriptor.rowHeight">
+                <td *ngIf="selectionEnabled">
+                    <p-tableCheckbox [value]="item"></p-tableCheckbox>
+                </td>
+                <td *ngFor="let col of descriptor.columns" (click)="onCellClick(col, item, idx)" class="clickable">
+                    <mng-table-column-value [descriptor]="col" [item]="item"></mng-table-column-value>
+                </td>
+                <td *ngIf="columnActionTemplate" class="text-right">
+                    <ng-container *ngTemplateOutlet="columnActionTemplate; context: { rowItem: item, rowIndex: idx }"></ng-container>
+                </td>
+            </tr>
+        </ng-template>
+
+        <ng-template pTemplate="loadingbody">
+            <tr [style.height.px]="descriptor.rowHeight">
+                <td [attr.colspan]="descriptor.columns.length + (columnActionTemplate ? 1 : 0) + (selectionEnabled ? 1 : 0)">
+                    <div class="loading-text"></div>
+                    <p-skeleton [ngStyle]="{'width': '100%'}"></p-skeleton>
+                </td>
+            </tr>
+        </ng-template>
+
+        <ng-template pTemplate="emptymessage">
+            <tr [style.height.px]="rowHeight">
+                <td [attr.colspan]="descriptor.columns.length + (columnActionTemplate ? 1 : 0) + (selectionEnabled ? 1 : 0)">
+                    {{ 'mngTable.noItems' | translate }}
+                </td>
+            </tr>
+        </ng-template>
+    </p-table>
+</div>

package/src/lib/components/tableview/table/table.component.ts

@@ -0,0 +1,327 @@
+import {AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, Injector, Input, OnDestroy, OnInit, Optional, Output, QueryList, TemplateRef, ViewChild} from '@angular/core';
+import {ActivatedRoute, Params, Router} from '@angular/router';
+
+import {Table} from 'primeng/table';
+import {LazyLoadEvent, SortMeta} from 'primeng/api';
+import {FilterMetadata} from 'primeng/api/filtermetadata';
+import {Observable, of, ReplaySubject, Subscription} from 'rxjs';
+import {finalize, first, map} from 'rxjs/operators';
+import {TranslateService} from '@ngx-translate/core';
+
+import {MediusQueryParam, MediusQueryParamBuilder, MediusQueryResult} from '../../../api/models';
+import {MediusRestUtil} from '../../../api/utils';
+import {ColumnDescriptor, FilterDescriptor, TableDescriptor} from '../../../descriptors';
+import {ITableDataProvider} from '../../../data-providers';
+import {MngTableCellClickEvent, MngTableLoadEvent} from '../models';
+import {MngTemplateDirective} from '../../../directives';
+import {ToastUtil} from '../../../utils';
+import {TableviewComponentService} from '../services';
+
+import TypeEnum = FilterDescriptor.TypeEnum;
+import PaginationModeEnum = TableDescriptor.PaginationModeEnum;
+
+@Component({
+    selector: 'mng-table',
+    templateUrl: './table.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MngTableComponent<T, S> implements OnInit, AfterContentInit, OnDestroy {
+
+    public readonly filterDisplayRow: TableDescriptor.FilterDisplayEnum = TableDescriptor.FilterDisplayEnum.Row;
+    public readonly filterDisplayMenu: TableDescriptor.FilterDisplayEnum = TableDescriptor.FilterDisplayEnum.Menu;
+
+    // metadata input
+    @Input() public descriptor!: TableDescriptor<T>;
+
+    // data source inputs
+    @Input() public items?: Observable<Array<T>>|Array<T>;
+    @Input() public queryResult?: Observable<MediusQueryResult<T>>|MediusQueryResult<T>;
+    @Input() public loading?: Observable<boolean>|boolean;
+    @Input() public dataProvider?: ITableDataProvider<T, any>;
+    @Input() public useQueryParams = false;
+
+    // extra features input
+    @Input() public selectionEnabled: boolean = false;
+
+    // event outputs
+    @Output('onLoad') private loadEventEmitter = new EventEmitter<MngTableLoadEvent>();
+    @Output('onCellClick') private cellClickEventEmitter = new EventEmitter<MngTableCellClickEvent<T>>();
+    @Output('onSelectionChange') private selectionChangeEventEmitter = new EventEmitter<Array<T>>();
+
+    // content and view queries
+    @ContentChildren(MngTemplateDirective) templates!: QueryList<MngTemplateDirective>;
+    @ViewChild(Table) private primeTable!: Table;
+
+    // templates
+    public captionTemplate?: TemplateRef<any>;
+    public columnActionTemplate?: TemplateRef<any>;
+
+    // data provider and items
+    public useDataProvider: boolean = false;
+    public useQueryParamsInitialized: boolean = false;
+    public queryResult$?: Observable<MediusQueryResult<T>>;
+    public loading$?: Observable<boolean>;
+    public dataProviderInfiniteScrollItems: Array<T> = [];
+    private dataProviderService: any = null;
+    private dataProviderQueryResultSubject = new ReplaySubject<MediusQueryResult<T>>(1);
+    private dataProviderLoadingSubject = new ReplaySubject<boolean>(1);
+    private dataProviderLatestLazyLoadEvent?: LazyLoadEvent;
+    private dataProviderLatestLazyLoadEventVersion: number = 0;
+    private dataProviderLatestQueryParam?: MediusQueryParam;
+    private dataProviderLatestQueryParamVersion: number = 0;
+    private dataProviderSubscription?: Subscription;
+
+    // pagination, sort and filters
+    public readonly rowsPerPageOptions = [25, 50, 100];
+    public rows = this.rowsPerPageOptions[0];
+    public offset = 0;
+    public multiSortMeta: SortMeta[]|null = null;
+    public filterMetadata: { [s: string]: FilterMetadata | FilterMetadata[] } = {};
+    private isFilterChanged = false;
+    private isSortChanged = false;
+
+    // infinite scroll
+    public infiniteScroll = false;
+    public scrollHeight: 'flex'|null = null;
+    public rowHeight: number|null = null;
+
+    public selection: Array<T> = [];
+    private subscriptions: Subscription[] = [];
+    private filterDescriptors: Array<FilterDescriptor<any>> = [];
+
+    constructor(private injector: Injector,
+                private router: Router,
+                private activatedRoute: ActivatedRoute,
+                private translate: TranslateService,
+                @Optional() private tableviewService: TableviewComponentService<T, S>
+    ) { }
+
+    public ngOnInit() {
+
+        // @ts-ignore
+        this.filterDescriptors = this.descriptor.columns.filter(c => typeof c.filterDescriptor !== 'undefined').map(c => c.filterDescriptor);
+
+        if (this.descriptor.paginationMode === PaginationModeEnum.InfiniteScroll) {
+            this.infiniteScroll = true;
+            this.scrollHeight = 'flex';
+            this.rowHeight = this.descriptor.rowHeight;
+            this.useQueryParams = false;
+        }
+
+        // check if data provider is supplied, if is, use it primarily
+        if (this.dataProvider) {
+            // map subjects to observables and initiate data
+            this.useDataProvider = true;
+            this.queryResult$ = this.dataProviderQueryResultSubject.asObservable();
+            this.loading$ = this.dataProviderLoadingSubject.asObservable();
+            const emptyQueryResult = new MediusQueryResult<T>();
+            emptyQueryResult.pageData = [];
+            emptyQueryResult.allDataCount = 0;
+            this.dataProviderLoadingSubject.next(false);
+            this.dataProviderQueryResultSubject.next(emptyQueryResult)
+
+            // inject service
+            if (this.dataProvider.serviceType) {
+                this.dataProviderService = this.injector.get<any>(this.dataProvider.serviceType);
+            }
+        } else {
+            // if query result is provided, use it as secondary source or else try to use items
+            if (this.queryResult) {
+                this.queryResult$ = this.queryResult instanceof Observable ? this.queryResult : of(this.queryResult);
+            } else if (!this.queryResult && this.items) {
+                this.queryResult$ = (this.items instanceof Observable ? this.items : of(this.items)).pipe(
+                    // distinctUntilChanged((v1, v2) => v1.length === v2.length &&
+                    //     v1.every((v1i, idx) => v1i[this.descriptor.dataKeyProperty] === v2[idx][this.descriptor.dataKeyProperty])),
+                    map(items => {
+                        const queryResult = new MediusQueryResult<T>();
+                        queryResult.pageData = items;
+                        queryResult.allDataCount = items.length;
+                        return queryResult;
+                    }));
+            }
+            if (typeof this.loading !== 'undefined') {
+                this.loading$ = this.loading instanceof Observable ? this.loading : of(this.loading);
+            }
+        }
+
+        if (this.useQueryParams) {
+            const subscription = this.activatedRoute.queryParams.subscribe(qp => {
+                this.loadTableFromRouteUpdate(qp);
+            });
+            this.subscriptions.push(subscription);
+        } else {
+            // initialize default sort if present
+            const defaultSort = this.getDefaultSortMeta();
+            if (defaultSort.length > 0) {
+                this.multiSortMeta = defaultSort;
+            }
+        }
+    }
+
+    public ngAfterContentInit() {
+        this.templates.forEach(template => {
+            switch(template.getType()) {
+                case 'caption':
+                    this.captionTemplate = template.template;
+                    break;
+                case 'columnAction':
+                    this.columnActionTemplate = template.template;
+                    break;
+            }
+        });
+    }
+
+    public ngOnDestroy() {
+        this.subscriptions.forEach(s => s.unsubscribe());
+    }
+
+    public reload(emitEvent: boolean = false, resetParams: boolean = false) {
+        this.loadTableWithDataProvider(resetParams
+            ? MediusQueryParamBuilder.create(this.rowsPerPageOptions[0], 0).build()
+            : (this.dataProviderLatestQueryParam ?? new MediusQueryParam()), emitEvent);
+    }
+
+    public onTableLazyLoad(event: LazyLoadEvent) {
+        this.dataProviderLatestLazyLoadEvent = event;
+        this.dataProviderLatestLazyLoadEventVersion++;
+
+        if (this.useQueryParams) {
+            if (!event.multiSortMeta || event.multiSortMeta.length === 0) {
+                // add default sort meta to event if not multisort meta is present
+                event.multiSortMeta = this.getDefaultSortMeta();
+            }
+            this.router.navigate([], {
+                relativeTo: this.activatedRoute,
+                replaceUrl: true,
+                queryParams: MediusRestUtil.fromPrimeLazyLoadEventToAngularQueryParams(event, this.rowsPerPageOptions[0])
+            });
+        } else {
+            const mediusQueryParams = event ? MediusRestUtil.fromPrimeLazyLoadEventToMediusQueryParams(event) : new MediusQueryParam();
+            this.loadTableWithDataProvider(mediusQueryParams);
+        }
+    }
+
+    public onTableSort(event: any) {
+        this.isSortChanged = true;
+    }
+
+    public onTableFilter(event: any) {
+        this.isFilterChanged = true;
+    }
+
+    public onCellClick(col: ColumnDescriptor<any, T>, item: T, idx: number) {
+        const mngEvent = new MngTableCellClickEvent<T>(col, item, idx);
+        this.cellClickEventEmitter.next(mngEvent);
+    }
+
+    public onSelectionChange(event: Array<T>) {
+        this.selectionChangeEventEmitter.emit(event);
+    }
+
+    private loadTableWithDataProvider(queryParam: MediusQueryParam|null = null, emitEvent: boolean = true) {
+        if (!this.useDataProvider) {
+            return;
+        }
+        if (this.dataProviderSubscription) {
+            this.dataProviderSubscription.unsubscribe();
+        }
+
+        this.dataProviderLoadingSubject.next(true);
+
+        if (!queryParam) {
+            queryParam = MediusQueryParamBuilder.create(this.rowsPerPageOptions[0]).build();
+        }
+        this.dataProviderLatestQueryParam = queryParam;
+        this.dataProviderLatestQueryParamVersion++;
+
+        this.dataProviderSubscription = this.dataProvider?.getAll(queryParam, this.dataProviderService)
+            .pipe(
+                first(),
+                finalize(() => this.dataProviderLoadingSubject.next(false))
+            )
+            .subscribe((res) => {
+                if (this.infiniteScroll) {
+                    if (this.isFilterChanged || this.isSortChanged) {
+                        this.dataProviderInfiniteScrollItems = [];
+                    }
+                    // @ts-ignore
+                    this.dataProviderInfiniteScrollItems.splice(queryParam.itemsOffset ?? 0, queryParam.itemsPerPage ?? this.rows, ...res.pageData)
+                    this.dataProviderInfiniteScrollItems = [...this.dataProviderInfiniteScrollItems];
+                } else {
+                    this.dataProviderQueryResultSubject.next(res);
+                }
+                this.isFilterChanged = false;
+                this.isSortChanged = false;
+            }, err => {
+                ToastUtil.tableNotificationError(this.translate, this.descriptor, err, this.tableviewService);
+                const emptyQueryResult = new MediusQueryResult<T>();
+                emptyQueryResult.pageData = [];
+                emptyQueryResult.allDataCount = 0;
+                this.dataProviderQueryResultSubject.next(emptyQueryResult);
+            });
+
+        if (emitEvent) {
+            const mngEvent = new MngTableLoadEvent();
+            mngEvent.originalEvent = this.dataProviderLatestLazyLoadEvent ?? undefined;
+            mngEvent.queryParam = queryParam;
+            this.loadEventEmitter.next(mngEvent);
+        }
+    }
+
+    private loadTableFromRouteUpdate(params: Params) {
+        const mediusQueryParam = MediusRestUtil.fromAngularQueryParamsToMediusQueryParams(params, this.filterDescriptors, this.rowsPerPageOptions[0]);
+        if (this.dataProviderLatestLazyLoadEventVersion < this.dataProviderLatestQueryParamVersion + 1) {
+            // update only if new version from query params will be higher
+            this.updatePrimeSortAndFilter(mediusQueryParam);
+        }
+        this.useQueryParamsInitialized = true;
+        this.loadTableWithDataProvider(mediusQueryParam);
+    }
+
+    private updatePrimeSortAndFilter(mediusQueryParam: MediusQueryParam) {
+        const primeSortMeta: SortMeta[] = [];
+        const primeFilterMeta: { [s: string]: FilterMetadata | FilterMetadata[] } = {};
+
+        this.filterDescriptors.forEach(f => {
+            // @ts-ignore
+            primeFilterMeta[f.property] = {
+                value: null,
+                matchMode: f.filterType === TypeEnum.String ? 'contains' : 'equals'
+            };
+        });
+
+        mediusQueryParam?.sortProperty?.forEach((s, idx) => {
+            primeSortMeta.push({
+                field: s,
+                order: (mediusQueryParam?.sortAsc?.[idx] ?? true) ? 1 : -1
+            });
+        });
+
+        mediusQueryParam?.filterParams?.forEach((f, idx) => {
+            const descriptor = this.filterDescriptors.find(fd => fd.filterProperty === f.property || fd.property === f.property);
+            const operator = MediusRestUtil.matchModeMapping.find(mapping => mapping[2] === f.filterMatchType);
+            if (descriptor && operator) {
+                primeFilterMeta[descriptor.property] = {
+                    value: f.filterValue,
+                    matchMode: operator[0]
+                };
+            }
+        });
+
+        this.multiSortMeta = primeSortMeta;
+        this.filterMetadata = primeFilterMeta;
+        this.rows = mediusQueryParam?.itemsPerPage ?? this.rowsPerPageOptions[0];
+        this.offset = mediusQueryParam?.itemsOffset ?? 0;
+    }
+
+    private getDefaultSortMeta(): SortMeta[] {
+        if (this.descriptor.hasDefaultSort) {
+            return this.descriptor.defaultSortProperty.map((p, idx) => <SortMeta>{
+                field: p,
+                order: this.descriptor.defaultSortAsc[idx] ? 1 : -1
+            });
+        } else {
+            return [];
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+<div class="mng-tableview">
+	<p-toast></p-toast>
+
+	<div class="card">
+		<p-toolbar styleClass="mb-4" *ngIf="toolbarLeftActions.length > 0 || toolbarRightActions.length > 0">
+			<ng-template pTemplate="left">
+				<mng-action *ngFor="let action of toolbarLeftActions"
+							[action]="action">
+				</mng-action>
+			</ng-template>
+
+			<ng-template pTemplate="right">
+				<mng-action *ngFor="let action of toolbarRightActions"
+							[action]="action">
+				</mng-action>
+			</ng-template>
+		</p-toolbar>
+
+		<mng-table [descriptor]="descriptor.table"
+				   [dataProvider]="dataProvider"
+				   [useQueryParams]="true"
+				   (onCellClick)="onTableCellClick($event)">
+			<ng-template mngTemplate="caption">
+				<div class="flex flex-column md:flex-row md:justify-content-between table-header">
+					<h5 class="p-m-0">{{ descriptor.tableTitle | translate }}</h5>
+				</div>
+			</ng-template>
+			<ng-template mngTemplate="columnAction" let-item="rowItem">
+				<mng-action *ngFor="let action of rowInlineActions"
+							[action]="action" [item]="item" [itemId]="descriptor.model.idPropertyName ? item[descriptor.model.idPropertyName] : null">
+				</mng-action>
+			</ng-template>
+		</mng-table>
+	</div>
+
+	<router-outlet></router-outlet>
+</div>

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

@@ -0,0 +1,78 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+
+import {TranslateService} from '@ngx-translate/core';
+import {ConfirmationService, MessageService} from 'primeng/api';
+import {DialogService} from 'primeng/dynamicdialog';
+
+import {MngActionService} from '../../services';
+import {TableviewDescriptor, ActionDescriptor, ActionPositionEnum} from '../../descriptors';
+import {ITableviewDataProvider} from '../../data-providers';
+import {MngTableCellClickEvent} from './models';
+import {TableviewComponentService} from './services';
+import {MngTableComponent} from './table/table.component';
+
+@Component({
+    selector: 'mng-tableview',
+    templateUrl: './tableview.component.html',
+    providers: [MessageService, ConfirmationService, TableviewComponentService]
+})
+export class MngTableviewComponent<T, S> implements OnInit {
+
+    @Input() descriptor!: TableviewDescriptor<T>;
+    @Input() dataProvider?: ITableviewDataProvider<T, S>;
+    @Input() actions: Array<ActionDescriptor<T>> = [];
+
+    @ViewChild(MngTableComponent) tableComponent: MngTableComponent<T, S>|null = null;
+
+    public rowClickActions: ActionDescriptor<T>[] = [];
+    public rowInlineActions: ActionDescriptor<T>[] = [];
+    public toolbarLeftActions: ActionDescriptor<T>[] = [];
+    public toolbarRightActions: ActionDescriptor<T>[] = [];
+
+    constructor(
+        private route: ActivatedRoute,
+        private messageService: MessageService,
+        private translateService: TranslateService,
+        private dialogService: DialogService,
+        private confirmationService: ConfirmationService,
+        private actionService: MngActionService,
+        private tableviewService: TableviewComponentService<T, S>
+    ) {
+    }
+
+    ngOnInit() {
+
+        this.tableviewService.actions = this.actions;
+        this.tableviewService.dataProvider = this.dataProvider;
+        this.tableviewService.messageService = this.messageService;
+        for (const action of this.actions) {
+            switch (action.position) {
+                case ActionPositionEnum.RowClick:
+                    this.rowClickActions.push(action);
+                    break;
+                case ActionPositionEnum.RowInline:
+                    this.rowInlineActions.push(action);
+                    break;
+                case ActionPositionEnum.ToolbarLeft:
+                    this.toolbarLeftActions.push(action);
+                    break;
+                case ActionPositionEnum.ToolbarRight:
+                    this.toolbarRightActions.push(action);
+                    break;
+            }
+        }
+    }
+
+    public reloadTable() {
+        this.tableComponent?.reload();
+    }
+
+    public onTableCellClick(event: MngTableCellClickEvent<T>) {
+        if (this.rowClickActions.length) {
+            for (const action of this.rowClickActions) {
+                this.actionService.triggerRowClickAction(action, event, this.route);
+            }
+        }
+    }
+}