103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
ChangeDetectorRef,
|
|
Component,
|
|
EventEmitter,
|
|
forwardRef,
|
|
Inject,
|
|
Input,
|
|
OnChanges,
|
|
Output,
|
|
SimpleChanges,
|
|
TemplateRef,
|
|
ViewChild,
|
|
ViewContainerRef,
|
|
} from '@angular/core';
|
|
import { AutoUnsubscribe } from '../../utils';
|
|
import { IListable, ListingModes, TableColumnConfig } from '../models';
|
|
import { ListingComponent } from '../listing-component.directive';
|
|
import { EntitiesService } from '../services';
|
|
import { TableContentComponent } from '../table-content/table-content.component';
|
|
|
|
const SCROLLBAR_WIDTH = 11;
|
|
|
|
@Component({
|
|
selector: 'iqser-table [tableColumnConfigs] [itemSize]',
|
|
templateUrl: './table.component.html',
|
|
styleUrls: ['./table.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class TableComponent<T extends IListable> extends AutoUnsubscribe implements OnChanges {
|
|
readonly listingModes = ListingModes;
|
|
|
|
@Input() tableColumnConfigs!: readonly TableColumnConfig<T>[];
|
|
@Input() bulkActions?: TemplateRef<unknown>;
|
|
@Input() headerTemplate?: TemplateRef<unknown>;
|
|
@Input() itemSize!: number;
|
|
@Input() selectionEnabled = false;
|
|
@Input() hasScrollButton = false;
|
|
@Input() emptyColumnWidth?: string;
|
|
@Input() totalSize?: number;
|
|
@Input() classes?: string;
|
|
@Input() noDataText?: string;
|
|
@Input() noDataIcon?: string;
|
|
@Input() noDataButtonIcon?: string;
|
|
@Input() noDataButtonLabel?: string;
|
|
@Input() showNoDataButton = false;
|
|
@Input() noMatchText?: string;
|
|
@Input() tableItemClasses?: Record<string, (e: T) => boolean>;
|
|
@Input() itemMouseEnterFn?: (entity: T) => void;
|
|
@Input() itemMouseLeaveFn?: (entity: T) => void;
|
|
@Output() readonly noDataAction = new EventEmitter<void>();
|
|
@ViewChild(TableContentComponent, { static: true }) private readonly _tableContent!: TableContentComponent<T>;
|
|
|
|
constructor(
|
|
@Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
|
|
private readonly _hostRef: ViewContainerRef,
|
|
private readonly _changeRef: ChangeDetectorRef,
|
|
readonly entitiesService: EntitiesService<T>,
|
|
) {
|
|
super();
|
|
}
|
|
|
|
get tableHeaderLabel(): string | undefined {
|
|
return this.listingComponent.tableHeaderLabel;
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
if (changes.tableColumnConfigs) {
|
|
this._setStyles();
|
|
}
|
|
}
|
|
|
|
scrollToLastIndex(): void {
|
|
this._tableContent.scrollToLastIndex();
|
|
}
|
|
|
|
private _setStyles(): void {
|
|
const element = this._hostRef.element.nativeElement as HTMLElement;
|
|
this._setColumnsWidth(element);
|
|
this._setItemSize(element);
|
|
this._changeRef.markForCheck();
|
|
}
|
|
|
|
private _setColumnsWidth(element: HTMLElement) {
|
|
let gridTemplateColumnsHover = '';
|
|
if (this.selectionEnabled) {
|
|
gridTemplateColumnsHover += '30px ';
|
|
}
|
|
for (const config of this.tableColumnConfigs) {
|
|
gridTemplateColumnsHover += `${config.width || '1fr'} `;
|
|
}
|
|
gridTemplateColumnsHover += this.emptyColumnWidth || '';
|
|
const gridTemplateColumns = `${gridTemplateColumnsHover} ${SCROLLBAR_WIDTH}px`;
|
|
|
|
element.style.setProperty('--gridTemplateColumns', gridTemplateColumns);
|
|
element.style.setProperty('--gridTemplateColumnsHover', gridTemplateColumnsHover);
|
|
}
|
|
|
|
private _setItemSize(element: HTMLElement) {
|
|
element.style.setProperty('--itemSize', `${this.itemSize}px`);
|
|
}
|
|
}
|