UNPKG

ontimize-web-ngx

Version:
1,121 lines 575 kB
import { __decorate, __metadata } from "tslib"; import { animate, state, style, transition, trigger } from '@angular/animations'; import { SelectionModel } from '@angular/cdk/collections'; import { moveItemInArray } from '@angular/cdk/drag-drop'; import { DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal'; import { CdkVirtualScrollViewport, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling'; import { ApplicationRef, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, forwardRef, HostListener, Inject, Injector, NgZone, Optional, QueryList, ViewChild, ViewChildren, ViewContainerRef, ViewEncapsulation } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatTab, MatTabGroup } from '@angular/material/tabs'; import { MatTooltip } from '@angular/material/tooltip'; import moment from 'moment'; import { BehaviorSubject, combineLatest, Observable, of, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators'; import { BooleanConverter, BooleanInputConverter } from '../../decorators/input-converter'; import { ComponentStateServiceProvider, OntimizeServiceProvider } from '../../services/factories'; import { SnackBarService } from '../../services/snackbar.service'; import { OTableComponentStateService } from '../../services/state/o-table-component-state.service'; import { ColumnValueFilterOperator } from '../../types/table/o-column-value-filter.type'; import { TableFilterByColumnDialogResult } from '../../types/table/o-table-filter-by-column-data.type'; import { ObservableWrapper } from '../../util/async'; import { Codes } from '../../util/codes'; import { FilterExpressionUtils } from '../../util/filter-expression.utils'; import { PermissionsUtils } from '../../util/permissions'; import { ServiceUtils } from '../../util/service.utils'; import { SQLTypes } from '../../util/sqltypes'; import { Util } from '../../util/util'; import { OFormComponent } from '../form/o-form.component'; import { AbstractOServiceComponent } from '../o-service-component.class'; import { OColumn } from './column/o-column.class'; import { OTableExportButtonComponent } from './extensions'; import { OTableContextMenuComponent } from './extensions/contextmenu/o-table-context-menu.component'; import { DefaultOTableOptions } from './extensions/default-o-table-options.class'; import { OTableFilterByColumnDataDialogComponent } from './extensions/dialog/filter-by-column/o-table-filter-by-column-data-dialog.component'; import { OBaseTablePaginator } from './extensions/footer/paginator/o-base-table-paginator.class'; import { OTableButtonComponent } from './extensions/header/table-button/o-table-button.component'; import { OTableColumnSelectAllDirective } from './extensions/header/table-column-select-all/o-table-column-select-all.directive'; import { OTableColumnsFilterComponent } from './extensions/header/table-columns-filter/o-table-columns-filter.component'; import { OTableOptionComponent } from './extensions/header/table-option/o-table-option.component'; import { OTableDataSourceService } from './extensions/o-table-datasource.service'; import { OTableVirtualScrollStrategy } from './extensions/o-table-strategy.service'; import { OTableDao } from './extensions/o-table.dao'; import { OTableGroupedRow } from './extensions/row/o-table-row-group.class'; import { OTableRowExpandableComponent, OTableRowExpandedChange } from './extensions/row/table-row-expandable/o-table-row-expandable.component'; import { OMatSort } from './extensions/sort/o-mat-sort'; import { OTableBase } from './o-table-base.class'; import { O_TABLE_GLOBAL_CONFIG } from './utils/o-table.tokens'; import { O_COMPONENT_STATE_SERVICE } from '../../injection-tokens'; import { MatRow, MatTable } from '@angular/material/table'; import { OTableFilterByColumnService } from './extensions/dialog/filter-by-column/o-table-filter-by-column.service'; import { OTableLoadingService } from './o-table-loading.service'; import * as i0 from "@angular/core"; import * as i1 from "@angular/material/dialog"; import * as i2 from "@angular/common"; import * as i3 from "@angular/flex-layout/flex"; import * as i4 from "@angular/flex-layout/extended"; import * as i5 from "@angular/forms"; import * as i6 from "../../directives/o-mat-error.directive"; import * as i7 from "@angular/material/button"; import * as i8 from "@angular/material/checkbox"; import * as i9 from "@angular/material/icon"; import * as i10 from "@angular/material/input"; import * as i11 from "@angular/material/form-field"; import * as i12 from "@angular/material/menu"; import * as i13 from "@angular/material/tooltip"; import * as i14 from "@angular/material/table"; import * as i15 from "@angular/material/paginator"; import * as i16 from "@angular/cdk/scrolling"; import * as i17 from "../contextmenu/o-context-menu.directive"; import * as i18 from "@angular/cdk/observers"; import * as i19 from "./extensions/sort/o-mat-sort"; import * as i20 from "../o-data-toolbar/o-data-toolbar.component"; import * as i21 from "./extensions/contextmenu/o-table-context-menu.component"; import * as i22 from "./extensions/row/o-table-row.directive"; import * as i23 from "./extensions/footer/expanded/o-table-expanded-footer.directive"; import * as i24 from "./extensions/header/table-buttons/o-table-buttons.component"; import * as i25 from "./extensions/header/table-menu/o-table-menu.component"; import * as i26 from "./extensions/header/table-quickfilter/o-table-quickfilter.component"; import * as i27 from "./extensions/header/table-header/o-table-header.component"; import * as i28 from "./extensions/header/table-header-select-all/o-table-header-select-all.component"; import * as i29 from "./extensions/skeleton/o-table-skeleton.component"; import * as i30 from "../../pipes/o-translate.pipe"; import * as i31 from "./extensions/pipes/o-table-row-class.pipe"; import * as i32 from "../form/o-form.component"; import * as i33 from "./extensions/o-table-strategy.service"; export const DEFAULT_INPUTS_O_TABLE = [ 'visibleColumns: visible-columns', 'defaultVisibleColumns: default-visible-columns', 'sortColumns: sort-columns', 'quickFilterCallback: quick-filter-function', 'deleteButton: delete-button', 'refreshButton: refresh-button', 'columnsVisibilityButton: columns-visibility-button', 'exportButton: export-button', 'showConfigurationOption: show-configuration-option', 'showButtonsText: show-buttons-text', 'selectAllCheckbox: select-all-checkbox', 'paginationControls: pagination-controls', 'fixedHeader: fixed-header', 'showTitle: show-title', 'editionMode: edition-mode', 'selectionMode: selection-mode', 'horizontalScroll: horizontal-scroll', 'showPaginatorFirstLastButtons: show-paginator-first-last-buttons', 'autoAlignTitles: auto-align-titles', 'multipleSort: multiple-sort', 'selectAllCheckboxVisible: select-all-checkbox-visible', 'orderable', 'resizable', 'keepSelectedItems: keep-selected-items', 'exportMode: export-mode', 'exportServiceType: export-service-type', 'autoAdjust: auto-adjust', 'showFilterOption: show-filter-option', 'visibleExportDialogButtons: visible-export-dialog-buttons', 'rowClass: row-class', 'filterColumnActiveByDefault:filter-column-active-by-default', 'groupedColumns: grouped-columns', 'groupable', 'expandGroupsSameLevel: expand-groups-same-level', 'collapseGroupedColumns: collapse-grouped-columns', 'virtualScroll: virtual-scroll', 'contextMenu: context-menu', 'showExpandableIconFunction: show-expandable-icon-function', 'showReportOnDemandOption: show-report-on-demand-option', 'showChartsOnDemandOption: show-charts-on-demand-option', 'showResetWidthOption: show-reset-width-option', 'disableSelectionFunction: disable-selection-function', 'nonHidableColumns: non-hidable-columns', 'readOnly: read-only', 'readOnlyConfiguration: read-only-configuration', 'showNotificationOfReadOnly: show-notification-of-read-only', 'selectionOnRowClick: selection-on-row-click', 'showHeaderTooltip: show-header-tooltip', ]; export const DEFAULT_OUTPUTS_O_TABLE = [ 'onRowSelected', 'onRowDeselected', 'onRowDeleted', 'onFilterByColumnChange', 'onSortChange', 'onSearch' ]; const stickyHeaderSelector = '.mat-mdc-header-row .mat-mdc-table-sticky'; const stickyFooterSelector = '.mat-mdc-footer-row .mat-mdc-table-sticky'; const rowSelector = '.mat-mdc-row'; const headerSelector = '.mat-mdc-header-row'; const footerSelector = '.mat-mdc-header-row'; export class OTableComponent extends AbstractOServiceComponent { set oMatSort(_sort) { if (Util.isDefined(_sort) && (!Util.isDefined(this.sort) || (Util.isDefined(this.sort) && Util.stringify(this.sort) !== Util.stringify(_sort)))) { this.sort = _sort; this.setDatasource(); } } ; set cdkVirtualScrollViewport(value) { if (value != this.virtualScrollViewport) { this.virtualScrollViewport = value; this.updateHeaderAndFooterStickyPositions(); if (this.checkViewportSizeSubscription) { this.checkViewportSizeSubscription.unsubscribe(); } if (this.virtualScrollViewport) { this.checkViewportSizeSubscription = this.checkViewPortSubject.subscribe(x => { if (x) { this.checkViewportSize(); } }); } } } isComponentReadOnly(selector, attr) { return this.readOnlyConfiguration?.[selector]?.[attr]; } get oTableOptions() { return this._oTableOptions; } set oTableOptions(value) { this._oTableOptions = value; } set quickFilter(value) { value = Util.parseBoolean(String(value)); this._quickFilter = value; this._oTableOptions.filter = value; } get quickFilter() { return this._quickFilter; } set filterCaseSensitive(value) { this._filterCaseSensitive = BooleanConverter(value); if (this._oTableOptions) { this._oTableOptions.filterCaseSensitive = this._filterCaseSensitive; } } get filterCaseSensitive() { return this._filterCaseSensitive; } set horizontalScroll(value) { this._horizontalScroll = BooleanConverter(value); this.refreshColumnsWidthFromOriginalDefinition(); } get horizontalScroll() { return this._horizontalScroll; } get enabled() { return this.oenabled; } set selectAllCheckboxVisible(value) { this._selectAllCheckboxVisible = BooleanConverter(value); if (this.state) { this._selectAllCheckboxVisible = BooleanConverter(this.state.selectColumnVisible); } this._oTableOptions.selectColumn.visible = this._selectAllCheckboxVisible; this.initializeCheckboxColumn(); } get selectAllCheckboxVisible() { return this._selectAllCheckboxVisible; } get visibleColArray() { return this._visibleColArray; } set visibleColArray(arg) { const permissionsBlocked = this.permissions?.columns?.filter(col => col.visible === false).map(col => col.attr) ?? []; const permissionsChecked = arg.filter(value => permissionsBlocked.indexOf(value) === -1); this._visibleColArray = permissionsChecked; if (this._oTableOptions) { const containsSelectionCol = this._oTableOptions.visibleColumns.indexOf(Codes.NAME_COLUMN_SELECT) !== -1; const containsExpandableCol = this._oTableOptions.visibleColumns.indexOf(Codes.NAME_COLUMN_EXPANDABLE) !== -1; if (containsSelectionCol) { this._visibleColArray.unshift(Codes.NAME_COLUMN_SELECT); } if (containsSelectionCol && containsExpandableCol) { this._visibleColArray = [this._visibleColArray[0]].concat(Codes.NAME_COLUMN_EXPANDABLE, this._visibleColArray.splice(1)); } else { if (containsExpandableCol) { this._visibleColArray.unshift(Codes.NAME_COLUMN_EXPANDABLE); } } this._oTableOptions.visibleColumns = this._visibleColArray; this.groupingHeadersRows = this._oTableOptions.visibleColumns.map(visibleCol => 'groupHeader-' + visibleCol); } } set currentPage(val) { this._currentPage = val; if (this.paginator) { this.paginator.pageIndex = val; if (this.matpaginator) { this.matpaginator.pageIndex = val; } } } get currentPage() { return this._currentPage; } updateScrolledState() { if (this.horizontalScroll) { setTimeout(() => { const bodyWidth = this.tableBodyEl.nativeElement.clientWidth; const scrollWidth = this.tableBodyEl.nativeElement.scrollWidth; const previousState = this.horizontalScrolled; this.horizontalScrolled = scrollWidth > bodyWidth; if (previousState !== this.horizontalScrolled) { this.onUpdateScrolledState.emit(this.horizontalScrolled); } }, 0); } this.checkViewportSize(); } get isColumnFiltersActive() { return this._isColumnFiltersActive; } set isColumnFiltersActive(val) { this._isColumnFiltersActive = val; } constructor(injector, elRef, dialog, _viewContainerRef, appRef, form, scrollStrategy) { super(injector, elRef, form); this.injector = injector; this.dialog = dialog; this._viewContainerRef = _viewContainerRef; this.appRef = appRef; this.scrollStrategy = scrollStrategy; this.DETAIL_MODE_NONE = Codes.DETAIL_MODE_NONE; this.EDIT_MODE_NONE = Codes.EDITION_MODE_NONE; this.clickSubject = new Subject(); this.dblclickSubject = new Subject(); this.refreshExpandableRowState = false; this.tableHeaders = []; this.portalHost = []; this.selectAllCheckbox = false; this.exportButton = true; this.showConfigurationOption = true; this.columnsVisibilityButton = true; this.showFilterOption = true; this.showReportOnDemandOption = true; this.showChartsOnDemandOption = true; this.showButtonsText = true; this.filterColumnActiveByDefault = true; this.showResetWidthOption = true; this.readOnly = false; this.showNotificationOfReadOnly = false; this.selectionOnRowClick = true; this.insertButton = true; this.refreshButton = true; this.deleteButton = true; this.fixedHeader = true; this.showTitle = false; this.editionMode = Codes.EDITION_MODE_NONE; this.selectionMode = Codes.SELECTION_MODE_MULTIPLE; this._horizontalScroll = false; this.showPaginatorFirstLastButtons = true; this.autoAlignTitles = true; this.multipleSort = true; this.orderable = true; this.resizable = true; this.autoAdjust = true; this.groupable = true; this.expandGroupsSameLevel = true; this.collapseGroupedColumns = false; this.virtualScroll = true; this.contextMenu = true; this.keepSelectedItems = true; this.showHeaderTooltip = false; this.exportMode = Codes.EXPORT_MODE_VISIBLE; this.searcheableColumns = []; this.groupedColumnTypes = []; this._visibleColArray = []; this.sortColArray = []; this.pendingQuery = false; this.pendingQueryFilter = undefined; this.setStaticData = false; this.avoidQueryColumns = []; this.asyncLoadColumns = []; this.asyncLoadSubscriptions = {}; this.finishQuerySubscription = false; this.onRowSelected = new EventEmitter(); this.onRowDeselected = new EventEmitter(); this.onRowDeleted = new EventEmitter(); this.onReinitialize = new EventEmitter(); this.onContentChange = new EventEmitter(); this.onFilterByColumnChange = new EventEmitter(); this.onSortChange = new EventEmitter(); this.showTotalsSubject = new BehaviorSubject(false); this.showTotals = this.showTotalsSubject.asObservable(); this.loadingSortingSubject = new BehaviorSubject(false); this.loadingSorting = this.loadingSortingSubject.asObservable(); this.loadingScrollSubject = new BehaviorSubject(false); this.loadingScroll = this.loadingScrollSubject.asObservable(); this.showFirstInsertableRow = false; this.showLastInsertableRow = false; this.clickDelay = 200; this.clickPrevent = false; this.onUpdateScrolledState = new EventEmitter(); this.storePaginationState = false; this.pageScrollVirtual = 1; this.columnFiltersSubject = new BehaviorSubject([]); this.columnFilters$ = this.columnFiltersSubject.asObservable(); this.originalRegisteredColumns = []; this.groupedColumnsArray = []; this._isColumnFiltersActive = false; this.groupingHeadersRows = []; this.triggerSelectionEvents = true; this.loadingService = this.injector.get(OTableLoadingService); this.loadingSubject.subscribe((loading) => { this.loadingService.setLoading(loading); }); this.showLoading = this.loadingService.showLoading$; this._oTableOptions = new DefaultOTableOptions(); try { this.tabGroupContainer = this.injector.get(MatTabGroup); this.tabContainer = this.injector.get(MatTab); } catch (error) { } this.snackBarService = this.injector.get(SnackBarService); this.getInjectionTokenConfig(); this.subscribeToFilterChanges(); } subscribeToFilterChanges() { this.subscriptionOnFilterChanges = this.onFilterByColumnChange.subscribe(event => { this.updateColumnFiltersSubject(event); }); } updateColumnFiltersSubject(event) { const newFilters = [...this.dataSource.getColumnValueFilters()]; this.columnFiltersSubject.next(newFilters); this.cd.detectChanges(); } getInjectionTokenConfig() { try { const oTableGlobalConfig = this.injector.get(O_TABLE_GLOBAL_CONFIG); if (Util.isDefined(oTableGlobalConfig.autoAdjust)) { this.autoAdjust = oTableGlobalConfig.autoAdjust; } ; if (Util.isDefined(oTableGlobalConfig.autoAlignTitles)) { this.autoAlignTitles = oTableGlobalConfig.autoAlignTitles; } if (Util.isDefined(oTableGlobalConfig.filterColumnActiveByDefault)) { this.filterColumnActiveByDefault = oTableGlobalConfig.filterColumnActiveByDefault; } if (Util.isDefined(oTableGlobalConfig.editionMode) && Codes.isValidEditionMode(oTableGlobalConfig.editionMode)) { this.editionMode = oTableGlobalConfig.editionMode; } if (Util.isDefined(oTableGlobalConfig.detailMode && Codes.isValidDetailMode(oTableGlobalConfig.detailMode))) { this.detailMode = oTableGlobalConfig.detailMode; } if (Util.isDefined(oTableGlobalConfig.rowHeight) && Codes.isValidRowHeight(oTableGlobalConfig.rowHeight)) { this.rowHeight = oTableGlobalConfig.rowHeight; } ; if (Util.isDefined(oTableGlobalConfig.showChartsOnDemandOption)) { this.showChartsOnDemandOption = oTableGlobalConfig.showChartsOnDemandOption; } ; if (Util.isDefined(oTableGlobalConfig.showReportOnDemandOption)) { this.showReportOnDemandOption = oTableGlobalConfig.showReportOnDemandOption; } ; if (Util.isDefined(oTableGlobalConfig.selectionOnRowClick)) { this.selectionOnRowClick = oTableGlobalConfig.selectionOnRowClick; } if (Util.isDefined(oTableGlobalConfig.horizontalScroll)) { this.horizontalScroll = oTableGlobalConfig.horizontalScroll; } if (Util.isDefined(oTableGlobalConfig.showHeaderTooltip)) { this.showHeaderTooltip = oTableGlobalConfig.showHeaderTooltip; } } catch (error) { } } get state() { return this.componentStateService.state; } ngOnInit() { this.initialize(); if (this.oTableButtons && this.tableButtons && this.tableButtons.length > 0) { this.oTableButtons.registerButtons(this.tableButtons.toArray()); } } ngAfterViewInit() { super.afterViewInit(); this.initTableAfterViewInit(); if (this.oTableMenu) { this.matMenu = this.oTableMenu.matMenu; this.oTableMenu.registerOptions(this.tableOptions.toArray()); } if (this.tableRowExpandable) { this.expandableItem = new SelectionModel(this.tableRowExpandable.multiple, [], true, this.compareRow()); this.createExpandableColumn(); this.expandableItem.changed.subscribe((change) => { this.saveRowExpandState(change.added, change.removed); }); } this.rowChangeSubscription = this.rows.changes.subscribe(() => { this.handleTableDataChange(); }); } ngAfterContentInit() { if (this.tableColumnSelectAllContentChild) { this.setCustomDefinitionInSelectColumn(this.tableColumnSelectAllContentChild); } } handleTableDataChange() { this.restoreExpandableRowState(); } setCustomDefinitionInSelectColumn(definition) { if (definition.title) { this._oTableOptions.selectColumn.title = definition.title; } if (definition.width) { this._oTableOptions.selectColumn.width = definition.width; } if (definition.minWidth) { this._oTableOptions.selectColumn.minWidth = definition.minWidth; } if (definition.maxWidth) { this._oTableOptions.selectColumn.maxWidth = definition.maxWidth; } if (definition.resizable) { this._oTableOptions.selectColumn.resizable = definition.resizable; } } ngAfterViewChecked() { this.cd.detectChanges(); } ngOnChanges(changes) { super.ngOnChanges(changes); if (Util.isDefined(changes.autoAdjust) && changes.autoAdjust.currentValue !== changes.autoAdjust.previousValue) { this.autoAdjust = changes.autoAdjust.currentValue; } } updateHeaderAndFooterStickyPositions() { if (this.virtualScrollSubscription) { this.virtualScrollSubscription.unsubscribe(); } if (this.virtualScrollViewport) { const zone = this.injector.get(NgZone); this.virtualScrollSubscription = this.scrollStrategy.stickyChange.pipe(distinctUntilChanged(), filter(() => this.fixedHeader || this.hasInsertableRow())).subscribe(x => { zone.run(() => { this.elRef.nativeElement.querySelectorAll(stickyHeaderSelector).forEach((el) => { el.style.top = -x + 'px'; }); this.elRef.nativeElement.querySelectorAll(stickyFooterSelector).forEach((el) => { el.style.bottom = x + 'px'; }); }); }); } } createExpandableColumn() { this._oTableOptions.expandableColumn = new OColumn(); this._oTableOptions.expandableColumn.visible = this.tableRowExpandable && this.tableRowExpandable.expandableColumnVisible; this.updateStateExpandedColumn(); } ngOnDestroy() { if (this.portalHost) { this.portalHost.forEach(x => x.detach()); } this.destroy(); if (this.loadingService) { this.loadingService.ngOnDestroy?.(); } this.columnFiltersSubject.complete(); } getSuffixColumnInsertable() { return Codes.SUFFIX_COLUMN_INSERTABLE; } getActionsPermissions() { return this.permissions ? (this.permissions.actions || []) : []; } getMenuPermissions() { const result = this.permissions ? this.permissions.menu : undefined; return result ? result : { visible: true, enabled: true, items: [] }; } getOColumnPermissions(attr) { const columns = this.permissions ? (this.permissions.columns || []) : []; return columns.find(comp => comp.attr === attr) || { attr: attr, enabled: true, visible: true }; } getActionPermissions(attr) { const actionsPerm = this.permissions ? (this.permissions.actions || []) : []; const permissions = actionsPerm.find(p => p.attr === attr); return permissions || { attr: attr, visible: true, enabled: true }; } checkEnabledActionPermission(attr) { const actionsPerm = this.permissions ? (this.permissions.actions || []) : []; const permissions = actionsPerm.find(p => p.attr === attr); const enabledPermision = PermissionsUtils.checkEnabledPermission(permissions); if (!enabledPermision) { this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_PERMISSION'); } return enabledPermision; } initialize() { super.initialize(); this.originalNonHidableColumns = this.nonHidableColumns; this._oTableOptions = new DefaultOTableOptions(); if (this.tabGroupContainer && this.tabContainer) { this.registerTabListener(); } this.registerClickListener(); this.registerDblClickListener(); this.initializeParams(); this.initializeDao(); this.permissions = this.permissionsService.getTablePermissions(this.oattr, this.actRoute); } initializeLoadingSubject() { this.loadingService.setLoading(true); } registerClickListener() { if (this.clickSubjectSubscription) { this.clickSubjectSubscription.unsubscribe(); } this.clickSubjectSubscription = this.clickSubject .pipe(debounceTime(this.clickDelay)) .subscribe(({ row, column, cellRef, rowIndex, event }) => { if (this.oenabled && !this.readOnly && column.editor && (this.detailMode !== Codes.DETAIL_MODE_CLICK) && (this.editionMode === Codes.EDITION_MODE_CLICK)) { this.activateColumnEdition(column, row, cellRef); } else { this.doHandleClick(row, column.attr, rowIndex, event); } }); } registerDblClickListener() { if (this.dbClickSubjectSubscription) { this.dbClickSubjectSubscription.unsubscribe(); } this.dbClickSubjectSubscription = this.dblclickSubject .pipe(debounceTime(this.clickDelay)) .subscribe(({ row, column, cellRef, rowIndex, event }) => { if (this.readOnly) { if (this.showNotificationOfReadOnly) { this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY'); } return; } if (this.oenabled && column.editor && (!Codes.isDoubleClickMode(this.detailMode)) && (Codes.isDoubleClickMode(this.editionMode))) { this.activateColumnEdition(column, row, cellRef); } else { this.onDoubleClick.emit({ row: row, rowIndex: rowIndex, mouseEvent: event, columnName: column.attr, cell: row[column.attr] }); if (this.oenabled && Codes.isDoubleClickMode(this.detailMode)) { this.saveDataNavigationInLocalStorage(); this.viewDetail(row); } } }); } initializeDao() { const queryMethodName = this.pageable ? this.paginatedQueryMethod : this.queryMethod; const methods = { query: queryMethodName, update: this.updateMethod, delete: this.deleteMethod, insert: this.insertMethod }; if (this.staticData) { this.queryOnBind = false; this.queryOnInit = false; this.daoTable = new OTableDao(undefined, this.entity, methods); this.setDataArray(this.staticData); } else { this.configureService(); this.daoTable = new OTableDao(this.dataService, this.entity, methods); } } reinitialize(options) { if (options) { const clonedOpts = Object.assign({}, options); if (clonedOpts.hasOwnProperty('entity')) { this.entity = clonedOpts.entity; } if (clonedOpts.hasOwnProperty('service')) { this.service = clonedOpts.service; } if (clonedOpts.hasOwnProperty('columns')) { this.columns = clonedOpts.columns; } if (clonedOpts.hasOwnProperty('visibleColumns')) { this.visibleColumns = clonedOpts.visibleColumns; } if (clonedOpts.hasOwnProperty('defaultVisibleColumns')) { this.defaultVisibleColumns = clonedOpts.defaultVisibleColumns; } if (clonedOpts.hasOwnProperty('keys')) { this.keys = clonedOpts.keys; } if (clonedOpts.hasOwnProperty('sortColumns')) { this.sortColumns = clonedOpts.sortColumns; } if (clonedOpts.hasOwnProperty('parentKeys')) { this.parentKeys = clonedOpts.parentKeys; } if (clonedOpts.hasOwnProperty('filterColumns')) { if (!this.oTableColumnsFilterComponent) { this.oTableColumnsFilterComponent = new OTableColumnsFilterComponent(this.injector, this); this.oTableMenu.onVisibleFilterOptionChange.next(this.filterColumnActiveByDefault); this.oTableColumnsFilterComponent.columns = clonedOpts.filterColumns; } else { this.oTableColumnsFilterComponent.columns = this.searcheableColumns.join(";"); } } } this.destroy(); this.initialize(); this.initTableAfterViewInit(); this.state.reset(this.pageable); if (options?.data) { this.setData(options.data.data, options.data?.sqlTypes); this.updatePaginationInfo(options.data.data); this.currentPage = 0; } if (options?.paginationData) { this.reinitializePaginationInfo(options.paginationData); } this.onReinitialize.emit(null); } reinitializePaginationInfo(paginationData) { this.currentPage = paginationData.pageNumber; this.queryRows = paginationData.pageSize; if (this.pageable) { if (paginationData.startRecordIndex !== undefined) { const resultEndIndex = paginationData.startRecordIndex + (this.getDataArray() ? this.getDataArray().length : 0); this.state.queryRecordOffset = resultEndIndex; } if (paginationData.totalQueryRecordsNumber !== undefined) { this.state.totalQueryRecordsNumber = paginationData.totalQueryRecordsNumber; } const pageNumber = this.state.queryRecordOffset == 0 ? 0 : this.dataService?.getPaginationContext().pageNumber; super.updatePaginationContext({ pageNumber: pageNumber, offset: this.state.queryRecordOffset, totalSize: this.state.totalQueryRecordsNumber, pageSize: this.state.queryRows }); } else { this.updatePaginationContext({ totalSize: this.getDataArray().length }); } } initTableAfterViewInit() { this.parseVisibleColumns(); this.parseSearcheableColumns(); this.setDatasource(); if (!this.queryOnInit || this.staticData) { this.dataSource.initializeRenderedData(); } this.parseGroupedColumns(); this.parseGroupedColumnTypes(); this.parseSortColumns(); this.setFiltersConfiguration(); this.addDefaultRowButtons(); if (Util.isDefined(this.oTableColumnsGroupingComponent)) { this.setGroupColumns(this.oTableColumnsGroupingComponent.columnsArray); } if (this.queryOnInit) { this.queryData(); } } parseSearcheableColumns() { this.searcheableColumns = this.visibleColArray.filter(col => { const oCol = this.getOColumn(col); return oCol && oCol.searchable; }); } destroy() { super.destroy(); if (this.tabGroupChangeSubscription) { this.tabGroupChangeSubscription.unsubscribe(); } if (this.selectionChangeSubscription) { this.selectionChangeSubscription.unsubscribe(); } if (this.sortSubscription) { this.sortSubscription.unsubscribe(); } if (this.onRenderedDataChange) { this.onRenderedDataChange.unsubscribe(); } if (this.contextMenuSubscription) { this.contextMenuSubscription.unsubscribe(); } if (this.virtualScrollSubscription) { this.virtualScrollSubscription.unsubscribe(); } if (this.checkViewportSizeSubscription) { this.checkViewportSizeSubscription.unsubscribe(); } if (this.scrollStrategy) { this.scrollStrategy.destroy(); } if (this.clickSubjectSubscription) { this.clickSubjectSubscription.unsubscribe(); } if (this.dbClickSubjectSubscription) { this.dbClickSubjectSubscription.unsubscribe(); } if (this.rowChangeSubscription) { this.rowChangeSubscription.unsubscribe(); } Object.keys(this.asyncLoadSubscriptions).forEach(idx => { if (this.asyncLoadSubscriptions[idx]) { this.asyncLoadSubscriptions[idx].unsubscribe(); } }); this.subscriptionOnFilterChanges?.unsubscribe(); } getDataToStore() { return this.componentStateService.getDataToStore(); } registerQuickFilter(arg) { const quickFilter = arg; this.quickFilterComponent = undefined; this.oTableQuickFilterComponent = quickFilter; if (Util.isDefined(this.oTableQuickFilterComponent)) { this.oTableQuickFilterComponent.setValue(this.state.quickFilterValue, false); this.quickFilterSubscription = this.oTableQuickFilterComponent.onChange.subscribe(val => { this.onSearch.emit(val); }); } } registerPagination(value) { this.paginationControls = true; this.paginator = value; } registerContextMenu(value) { this.tableContextMenu = value; this.contextMenuSubscription = this.tableContextMenu.onShow.subscribe((params) => { params.class = 'o-table-context-menu ' + this.rowHeight; if (params.data && !this.isRowSelected(params.data.rowValue)) { this.clearSelection(); this.selectedRow(params.data.rowValue); } }); } registerDefaultColumn(column) { if (Util.isDefined(this.getOColumn(column))) { return; } const colDef = this.createOColumn(column, this); this.pushOColumnDefinition(colDef); } registerColumn(column) { const columnAttr = (typeof column === 'string') ? column : column.attr; const columnPermissions = this.getOColumnPermissions(columnAttr); if (!columnPermissions.visible) { return; } if (typeof column === 'string') { this.registerDefaultColumn(column); return; } const columnDef = this.getOColumn(column.attr); if (Util.isDefined(columnDef) && Util.isDefined(columnDef.definition)) { return; } const colDef = this.createOColumn(column.attr, this, column); let columnWidth = this.getColumnWidthFromState(colDef); if (Util.isDefined(columnWidth)) { colDef.width = columnWidth; } if (column && (column.asyncLoad || column.type === 'action')) { this.avoidQueryColumns.push(column.attr); if (column.asyncLoad) { this.asyncLoadColumns.push(column.attr); } } this.pushOColumnDefinition(colDef); } pushOColumnDefinition(colDef) { colDef.visible = this.visibleColArray.includes(colDef.attr); const alreadyExisting = this.getOColumn(colDef.attr); if (alreadyExisting !== undefined) { const replacingIndex = this._oTableOptions.columns.indexOf(alreadyExisting); this._oTableOptions.columns[replacingIndex] = colDef; } else { this._oTableOptions.columns.push(colDef); this.originalRegisteredColumns.push(colDef); } this.ensureColumnsOrder(); this.refreshEditionModeWarn(); } refreshEditionModeWarn() { if (this.editionMode !== Codes.EDITION_MODE_NONE) { return; } const editableColumns = this._oTableOptions.columns.filter(col => { return Util.isDefined(col.editor); }); setTimeout(() => { if (editableColumns.length > 0 && !this.hasInsertableRow()) { console.warn('Using a column with a editor but there is no edition-mode defined'); } }, 100); } registerColumnAggregate(column) { this.showTotalsSubject.next(true); const alreadyExisting = this.getOColumn(column.attr); if (alreadyExisting !== undefined) { const replacingIndex = this._oTableOptions.columns.indexOf(alreadyExisting); this._oTableOptions.columns[replacingIndex].aggregate = column; } } registerTableHeaders(tableHeader) { if (this.tableHeaders.findIndex(header => header.column.attr === tableHeader.column.attr) === -1) { this.tableHeaders.push(tableHeader); } } parseVisibleColumns(defaultConfiguration = false) { if (defaultConfiguration) { this.state.columnsDisplay = undefined; const originalColumns = this.originalRegisteredColumns.map(col => col.attr); this.visibleColArray = this.originalRegisteredColumns.filter(item => item.visible).map(item => item.attr); this._oTableOptions.columns.sort((a, b) => originalColumns.indexOf(a.attr) - originalColumns.indexOf(b.attr)); return; } if (this.state.columnsDisplay) { let stateCols = []; this.state.columnsDisplay.forEach((oCol, index) => { const isVisibleColInColumns = this._oTableOptions.columns.find(col => col.attr === oCol.attr) !== undefined; if (isVisibleColInColumns) { stateCols.push(oCol); } else { console.warn('Unable to load the column ' + oCol.attr + ' from the localstorage'); } }); stateCols = this.checkChangesVisibleColummnsInInitialConfiguration(stateCols); this._oTableOptions.columns.sort((a, b) => { const indexA = stateCols.findIndex(col => col.attr === a.attr); const indexB = stateCols.findIndex(col => col.attr === b.attr); return indexA - indexB; }); this.visibleColArray = stateCols.filter(item => item.visible).map(item => item.attr); } else { this.visibleColArray = Util.parseArray(this.defaultVisibleColumns ? this.defaultVisibleColumns : this.visibleColumns, true); } } checkChangesVisibleColummnsInInitialConfiguration(stateCols) { if (!this.state.initialConfiguration.columnsDisplay) { return stateCols; } const originalVisibleColArray = this.state.initialConfiguration.columnsDisplay.filter(x => x.visible).map(x => x.attr); const currentVisibleColArray = Util.parseArray(this.visibleColumns, true); const colToAddInVisibleCol = Util.differenceArrays(currentVisibleColArray, originalVisibleColArray); for (const newColAttr of colToAddInVisibleCol) { const columnExists = this._oTableOptions.columns.some(col => col.attr === newColAttr); if (columnExists) { let indexCol = stateCols.findIndex(col => col.attr === newColAttr); if (indexCol > -1) { stateCols[indexCol].visible = true; } else { stateCols.push({ attr: newColAttr, visible: true, width: undefined }); } } stateCols.sort((a, b) => currentVisibleColArray.indexOf(a.attr) - currentVisibleColArray.indexOf(b.attr)); } const colToDeleteInVisibleCol = Util.differenceArrays(originalVisibleColArray, currentVisibleColArray); if (colToDeleteInVisibleCol.length > 0) { stateCols = stateCols.filter(col => colToDeleteInVisibleCol.indexOf(col.attr) === -1); } const changeSortVisibleColumns = JSON.stringify(currentVisibleColArray) !== JSON.stringify(originalVisibleColArray); if (changeSortVisibleColumns && currentVisibleColArray.length === originalVisibleColArray.length) { for (const [toIndex, col] of currentVisibleColArray.entries()) { const fromIndexToChange = stateCols.findIndex(stateCol => stateCol.attr === col); moveItemInArray(stateCols, fromIndexToChange, toIndex); } } return stateCols; } parseSortColumns() { const sortColumnsParam = this.state.sortColumns || this.sortColumns; this.sortColArray = ServiceUtils.parseSortColumns(sortColumnsParam); if (this.state.sortColumns && this.state.initialConfiguration.sortColumns) { const initialConfigSortColumnsArray = ServiceUtils.parseSortColumns(this.state.initialConfiguration.sortColumns); const originalSortColumnsArray = ServiceUtils.parseSortColumns(this.sortColumns); const colToAddInVisibleCol = Util.differenceArrays(originalSortColumnsArray, initialConfigSortColumnsArray); if (colToAddInVisibleCol.length > 0) { colToAddInVisibleCol.forEach(colAdd => { this.sortColArray.push(colAdd); }); } const colToDelInVisibleCol = Util.differenceArrays(initialConfigSortColumnsArray, originalSortColumnsArray); if (colToDelInVisibleCol.length > 0) { colToDelInVisibleCol.forEach((colDel) => { this.sortColArray.forEach((col, i) => { if (col.columnName === colDel.columnName) { this.sortColArray.splice(i, 1); } }); }); } } for (let i = this.sortColArray.length - 1; i >= 0; i--) { const colName = this.sortColArray[i].columnName; const oCol = this.getOColumn(colName); if (!Util.isDefined(oCol) || !oCol.orderable) { this.sortColArray.splice(i, 1); } } } ensureColumnsOrder() { let columnsOrder = []; if (!this.state.columnsDisplay) { return; } columnsOrder = this.state.columnsDisplay.map(item => item.attr); this._oTableOptions.columns.sort((a, b) => { if (columnsOrder.indexOf(a.attr) === -1) { return 0; } else { return columnsOrder.indexOf(a.attr) - columnsOrder.indexOf(b.attr); } }); } initializeParams() { if (!this.visibleColumns) { this.visibleColumns = this.columns; } this.visibleColArray = Util.parseArray(this.visibleColumns, true); if (this.colArray.length) { this.colArray.forEach((x) => this.registerColumn(x)); this.ensureColumnsOrder(); } this._oTableOptions.filter = this.quickFilter; if (this.state.currentPage) { this.currentPage = this.state.currentPage; } if (!this.paginator && this.paginationControls) { this.paginator = new OBaseTablePaginator(); this.paginator.pageSize = this.queryRows; this.paginator.pageIndex = this.currentPage; this.paginator.showFirstLastButtons = this.showPaginatorFirstLastButtons; } if (!Util.isDefined(this.selectAllCheckboxVisible)) { this._oTableOptions.selectColumn.visible = !!this.state.selectColumnVisible; } else { if (Util.isDefined(this.state.initialConfiguration.selectColumnVisible) && this.selectAllCheckboxVisible === this.state.initialConfiguration.selectColumnVisible) { this._oTableOptions.selectColumn.visible = !!this.state.selectColumnVisible; } else { this._oTableOptions.selectColumn.visible = this.selectAllCheckboxVisible; } } this.isColumnFiltersActive = this.filterColumnActiveByDefault; this.initializeCheckboxColumn(); if (this.storeState) { if (Util.isDefined(this.state.queryRows) && Util.isDefined(this.state.initialConfiguration.queryRows) && this.state.initialConfiguration.queryRows === this.originalQueryRows) { this.queryRows = this.state.queryRows; } } } get selection() { if (!Util.isDefined(this._selection)) { this._selection = new SelectionModel(this.isSelectionModeMultiple(), [], true, this.compareRow()); } return this._selection; } updateStateExpandedColumn() { if (!this.tableRowExpandable?.expandableColumnVisible) { return; } if (this._oTableOptions.visibleColumns[0] === Codes.NAME_COLUMN_SELECT && this._oTableOptions.visibleColumns[1] !== Codes.NAME_COLUMN_EXPANDABLE) { this._oTableOptions.visibleColumns.splice(1, 0, Codes.NAME_COLUMN_EXPANDABLE); } else if (this._oTableOptions.visibleColumns[0] !== Codes.NAME_COLUMN_EXPANDABLE) { this._oTableOptions.visibleColumns.unshift(Codes.NAME_COLUMN_EXPANDABLE); } } registerTabListener() { this.tabGroupChangeSubscription = this.tabGroupContainer.selectedTabChange.subscribe((evt) => { let interval; const timerCallback = (tab) => { if (tab && tab.content.isAttached) { clearInterval(interval); if (tab === this.tabContainer) { this.insideTabBugWorkaround(); if (this.pendingQuery) { this.queryData(this.pendingQueryFilter); } this.checkViewportSize(); } } }; interval = setInterval(() => { timerCallback(evt.tab); }, 100); }); } insideTabBugWorkaround() { this.refreshSortHeaders(); } registerSortListener() { if (Util.isDefined(this.sort)) { this.sortSubscription?.unsubscribe(); this.sortSubscription = this.sort.oSortChange.subscribe(this.handleSortChange.bind(this)); this.sort.setMultipleSort(this.multipleSort); } } get currentColumnFilters() { return this.dataSource?.getColumnValueFilters() || []; } handleSortChange(sortArray) { this.sortColArray = []; sortArray.forEach((sort) => { if (sort.direction !== '') { this.sortColArray.push({ columnName: sort.id, ascendent: sort.direction === Codes.ASC_SORT }); } }); this.onSortChange.emit(this.sortColArray); if (this.pageable) { this.reloadData(false); } } setDatasource() { delete this.dataSource; if (this.onRenderedDataChange) this.onRenderedDataChange.unsubscribe(); const dataSourceService = this.injector.get(OTableDataSourceService); this.dataSource = dataSourceService.getInstance(this); this.registerDataSourceListeners(); this.registerSortListener(); } registerDataSourceListeners() { this.onRenderedDataChange = this.dataSource.onRenderedDataChange.subscribe(() => { this.stopEdition(); this.checkSelectedItemData(); }); } getExpandedRowContainerClass(rowIndex) { return OTableComponent.EXPANDED_ROW_CONTAINER_CLASS + rowIndex; } getExpandableItems() { return this.expandableItem.selected; } toggleRowExpandable(item