@mediusinc/mng-commons 0.2.1-rc → 0.2.4

package/src/lib/components/tableview/table/column-filter/column-filter.component.ts

@@ -1,70 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-
-import {FilterMatchMode} from 'primeng/api';
-
-import {FilterDescriptor, FilterLookupDescriptor, TableDescriptor} from '../../../../descriptors';
-
-/**
- * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
- * and these must be propagated through to this component and beyond to primeNG.
- */
-@Component({
-    selector: 'mng-table-column-filter',
-    templateUrl: './column-filter.component.html'
-})
-export class MngTableColumnFilterComponent<T> implements OnInit {
-
-    public readonly lookupTypeDropdown: FilterLookupDescriptor.LookupTypeEnum = FilterLookupDescriptor.LookupTypeEnum.Dropdown;
-    public readonly lookupTypeAutocomplete: FilterLookupDescriptor.LookupTypeEnum = FilterLookupDescriptor.LookupTypeEnum.Autocomplete;
-
-    @Input() descriptor!: FilterDescriptor<T>;
-    @Input() display!: TableDescriptor.FilterDisplayEnum;
-
-    public lookupDescriptor?: FilterLookupDescriptor<T>;
-
-    public primeField!: string;
-    public primeType: string = 'text';
-    public primeDefaultMatchMode: string = FilterMatchMode.EQUALS;
-    public primeDisplay: string = 'row';
-
-    ngOnInit() {
-        switch (this.descriptor.filterType) {
-            case FilterDescriptor.TypeEnum.Boolean:
-                this.primeType = 'boolean';
-                break;
-            case FilterDescriptor.TypeEnum.Number:
-                this.primeType = 'numeric';
-                break;
-            case FilterDescriptor.TypeEnum.Date:
-                this.primeType = 'date';
-                break;
-            case FilterDescriptor.TypeEnum.Lookup:
-                this.primeType = 'lookup';
-                this.lookupDescriptor = this.descriptor as FilterLookupDescriptor<T>;
-                this.primeField = `${this.descriptor.property}${this.lookupDescriptor.itemsValueProperty ? `.${this.lookupDescriptor.itemsValueProperty}` : ''}`;
-                break;
-            case FilterDescriptor.TypeEnum.String:
-                this.primeType = 'text';
-                this.primeDefaultMatchMode = FilterMatchMode.CONTAINS;
-                break;
-        }
-
-        switch (this.display) {
-            case TableDescriptor.FilterDisplayEnum.Menu:
-                this.primeDisplay = 'menu';
-                break;
-        }
-    }
-
-    autocompleteFilter(value: T, filterCallback: Function) {
-        if (value) {
-            let filterValue: any = value;
-            if (this.lookupDescriptor!.itemsValueProperty) {
-                filterValue = filterValue[this.lookupDescriptor!.itemsValueProperty];
-            }
-            filterCallback(filterValue);
-        } else {
-            filterCallback(value);
-        }
-    }
-}

package/src/lib/components/tableview/table/column-value/column-value.component.html

@@ -1,14 +0,0 @@
-<ng-container [ngSwitch]="descriptor.columnType">
-    <ng-container *ngSwitchCase="columnTypeString">
-        {{ descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property] }}
-    </ng-container>
-    <ng-container *ngSwitchCase="columnTypeNumber">
-        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | number: descriptor.displayFormat }}
-    </ng-container>
-    <ng-container *ngSwitchCase="columnTypeDate">
-        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | date: descriptor.displayFormat }}
-    </ng-container>
-    <ng-container *ngSwitchCase="columnTypeBoolean">
-        {{ (descriptor.displayPropertyPath ? (item | propertyPath: descriptor.displayPropertyPath) : item[descriptor.property]) | boolean }}
-    </ng-container>
-</ng-container>

package/src/lib/components/tableview/table/column-value/column-value.component.ts

@@ -1,19 +0,0 @@
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-
-import {ColumnDescriptor} from '../../../../descriptors';
-
-@Component({
-    selector: 'mng-table-column-value',
-    templateUrl: './column-value.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class MngTableColumnValueComponent<T, TT> {
-
-    public readonly columnTypeString: ColumnDescriptor.TypeEnum = ColumnDescriptor.TypeEnum.String;
-    public readonly columnTypeNumber: ColumnDescriptor.TypeEnum = ColumnDescriptor.TypeEnum.Number;
-    public readonly columnTypeBoolean: ColumnDescriptor.TypeEnum = ColumnDescriptor.TypeEnum.Boolean;
-    public readonly columnTypeDate: ColumnDescriptor.TypeEnum = ColumnDescriptor.TypeEnum.Date;
-
-    @Input() descriptor!: ColumnDescriptor<T, TT>;
-    @Input() item!: any;
-}

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

@@ -1,110 +0,0 @@
-<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

@@ -1,327 +0,0 @@
-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

@@ -1,37 +0,0 @@
-<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

@@ -1,78 +0,0 @@
-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);
-            }
-        }
-    }
-}