@anglr/grid
Version:
Angular module displaying grid
177 lines • 6.48 kB
JavaScript
import { Component, ChangeDetectionStrategy, ElementRef, Inject, Optional, signal, inject, Injector } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { isBlank } from '@jscrpt/common';
import { extend } from '@jscrpt/common/extend';
import { GRID_PLUGIN_INSTANCES, ROW_SELECTOR_OPTIONS } from '../../../misc/tokens';
import { GridPluginType } from '../../../misc/enums';
import * as i0 from "@angular/core";
/**
* Default options for row selector
*/
const defaultOptions = {
getRowId: null,
autoResetOnDataChange: false,
multiSelection: true,
getRowData: data => data
};
/**
* Component used for handling row selection
*
* This component requires `ContentRenderer` which supports row selection, one possible use is with `TableContentRendererComponent` with `AdvancedTableBodyContentRendererComponent`, any
* other `ContentRenderer` that supports row selection can be used
*
* Working with `BasicRowSelectorComponent` from code should be done using extensions methods
*/
export class BasicRowSelectorComponent {
/**
* @inheritdoc
*/
get options() {
return this.ɵoptions;
}
set options(options) {
this.ɵoptions = extend(true, this.ɵoptions, options);
}
/**
* @inheritdoc
*/
get selectedIds() {
return this.ɵselectedIds.asReadonly();
}
/**
* @inheritdoc
*/
get selectedData() {
return this.ɵselectedData.asReadonly();
}
//######################### constructor #########################
constructor(options) {
/**
* Array of currently selected row ids
*/
this.ɵselectedIds = signal([]);
/**
* Array of currently selected row data
*/
this.ɵselectedData = signal([]);
/**
* Angular injector used for injecting dependencies
*/
this.injector = inject(Injector);
//######################### public properties - implementation of RowSelector #########################
/**
* @inheritdoc
*/
this.pluginElement = inject((ElementRef));
/**
* @inheritdoc
*/
this.gridPlugins = inject(GRID_PLUGIN_INSTANCES, { optional: true });
this.ɵoptions = extend(true, {}, defaultOptions, options);
}
//######################### public methods - implementation of OnDestroy #########################
/**
* Called when component is destroyed
*/
ngOnDestroy() {
this.dataChangedSubscription?.unsubscribe();
this.dataChangedSubscription = null;
}
//######################### public methods - implementation of RowSelector #########################
/**
* @inheritdoc
*/
resetSelection() {
this.ɵselectedIds.set([]);
this.ɵselectedData.set([]);
}
/**
* @inheritdoc
*/
selectItem(item, select = true) {
if (isBlank(this.options.getRowId)) {
throw new Error('BasicRowSelectorComponent: Missing "getRowId" method in options before first use!');
}
if (!this.options.multiSelection) {
this.resetSelection();
}
const id = this.options.getRowId(item);
const index = this.selectedIds().indexOf(id);
//select if not selected
if (select && index < 0) {
this.ɵselectedIds.update(ids => [...ids, id]);
this.ɵselectedData.update(data => [...data, this.options.getRowData(item)]);
}
//remove from selection if selected
else if (!select && index >= 0) {
this.ɵselectedIds.update(ids => {
ids.splice(index, 1);
return [...ids];
});
this.ɵselectedData.update(data => {
data.splice(index, 1);
return [...data];
});
}
}
/**
* @inheritdoc
*/
isSelected(item) {
if (isBlank(this.options.getRowId)) {
throw new Error('BasicRowSelectorComponent: Missing "getRowId" method in options before first use!');
}
const id = this.options.getRowId(item);
return this.selectedIds().indexOf(id) > -1;
}
/**
* @inheritdoc
*/
initialize(force) {
if (!this.gridPlugins) {
throw new Error('BasicRowSelectorComponent: missing gridPlugins!');
}
const dataLoader = this.gridPlugins[GridPluginType.DataLoader];
//data loader obtained and its different instance
if (force || (this.dataLoader && this.dataLoader != dataLoader)) {
this.dataChangedSubscription?.unsubscribe();
this.dataChangedSubscription = null;
this.dataLoader = null;
}
//no data loader obtained
if (!this.dataLoader) {
this.dataLoader = dataLoader;
this.dataChangedSubscription = toObservable(this.dataLoader.result, { injector: this.injector }).subscribe(() => {
if (this.options.autoResetOnDataChange) {
this.resetSelection();
}
});
}
}
/**
* @inheritdoc
*/
initOptions() {
}
/**
* @inheritdoc
*/
invalidateVisuals() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: BasicRowSelectorComponent, deps: [{ token: ROW_SELECTOR_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0", type: BasicRowSelectorComponent, isStandalone: true, selector: "ng-basic-row-selector", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: BasicRowSelectorComponent, decorators: [{
type: Component,
args: [{
selector: 'ng-basic-row-selector',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [ROW_SELECTOR_OPTIONS]
}, {
type: Optional
}] }] });
//# sourceMappingURL=basicRowSelector.component.js.map