@lucasheight/kendo-grid-state
Version:
A helper library that implements a directive to manage grid state during session or between sessions for Progress Kendo UI for Angular Grid.
235 lines (226 loc) • 9.03 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, Injectable, EventEmitter, HostListener, Output, Input, Directive, NgModule } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';
import { Subscription } from 'rxjs';
class Column {
constructor() {
this.origIdx = 0;
this.hidden = false;
this.expanded = false;
this.field = undefined;
}
}
const APP_STORAGE = new InjectionToken("App Storage", {
providedIn: "root",
factory: () => sessionStorage,
});
class StorageService {
constructor() {
this.store = inject(APP_STORAGE);
}
clear() {
this.store.clear();
}
getItem(key) {
return this.store.getItem(key);
}
key(index) {
return this.store.key(index);
}
removeItem(key) {
this.store.removeItem(key);
}
setItem(key, value) {
this.store.setItem(key, value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StorageService, providedIn: "root" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StorageService, decorators: [{
type: Injectable,
args: [{ providedIn: "root" }]
}] });
class GridStateDirective {
get expandedRows() {
return this._expandedRows;
}
set expandedRows(val) {
const _combine = [];
const existing = (this.state && this.state.expandedRows) || [];
existing.forEach((el, idx) => {
_combine[idx] = el;
});
val.forEach((el, idx) => {
_combine[idx] = el;
});
this.state = Object.assign(this.state || {}, {
expandedRows: _combine,
});
this._expandedRows = _combine;
}
constructor() {
this.grid = inject(GridComponent);
this.storageService = inject(StorageService);
this.subs = new Subscription();
this._expandedRows = [];
this.expandedRowsChange = new EventEmitter();
this.stateReady = new EventEmitter();
this.filterChange = new EventEmitter();
this.sortChange = new EventEmitter();
this.skip = 0;
this.skipChange = new EventEmitter();
this.groupChange = new EventEmitter();
this.take = 10;
this.takeChange = new EventEmitter();
this.colMapper = (cols) => cols.map((m, idx) => ({
origIdx: idx,
orderIndex: m.orderIndex,
leafIndex: m.leafIndex,
hidden: m.hidden,
width: m.width,
title: m.title,
field: m.field,
}));
this.grid.isDetailExpanded = this.expander.bind(this);
}
expander(args) {
return this._expandedRows[args.index];
}
get key() {
return this.gridState;
}
get state() {
const raw = this.storageService.getItem(this.key);
const parsed = raw ? JSON.parse(raw) : raw;
return parsed;
}
set state(val) {
this.storageService.setItem(this.key, JSON.stringify(val));
}
get initState() {
return {
group: this.group,
skip: this.skip,
sort: this.sort,
filter: this.filter,
take: this.take,
};
}
ngOnInit() {
if (this.gridState == undefined || this.gridState == "") {
throw "gridState has not been set, this is required to be unique for each grid as it is used as the storage key";
}
this._expandedRows = (this.state && this.state.expandedRows) || [];
this.expandedRowsChange.emit(this._expandedRows);
const merged = Object.assign(this.initState, this.state && this.state.state);
this.state = Object.assign(this.state || {}, {
state: merged,
});
setTimeout(() => {
this.skipChange.emit(merged.skip);
this.sortChange.emit(merged.sort);
this.takeChange.emit(merged.take);
this.groupChange.emit(merged.group);
this.filterChange.emit(merged.filter);
this.stateReady.emit(merged);
});
this.subs.add(this.grid.dataStateChange.subscribe((s) => {
this.state = Object.assign(this.state, { state: s });
}));
this.subs.add(this.grid.detailExpand.subscribe((e) => {
this.expandedRows[e.index] = true;
this.expandedRows = this._expandedRows;
this.expandedRowsChange.emit(this._expandedRows);
}));
this.subs.add(this.grid.detailCollapse.subscribe((e) => {
this._expandedRows[e.index] = false;
this.expandedRows = this._expandedRows;
this.expandedRowsChange.emit(this._expandedRows);
}));
}
ngAfterContentInit() {
const existing = this.state.columns;
if (existing) {
const cols = this.grid.columns.toArray();
existing.forEach((e, i) => {
cols[i].hidden = e.hidden;
cols[i].orderIndex = e.orderIndex;
cols[i].leafIndex = e.leafIndex;
cols[i].width = e.width;
});
this.grid.columns.reset(cols);
}
}
unload(e) {
this.saveState();
}
saveState() {
this.state = Object.assign(this.state || { state: this.initState, columns: [] }, {
columns: this.colMapper(this.grid.columns.toArray()),
});
}
ngOnDestroy() {
this.saveState();
this.subs.unsubscribe();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GridStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: GridStateDirective, isStandalone: true, selector: "kendo-grid[gridState]", inputs: { expandedRows: "expandedRows", filter: "filter", gridState: "gridState", sort: "sort", skip: "skip", group: "group", take: "take" }, outputs: { expandedRowsChange: "expandedRowsChange", stateReady: "stateReady", filterChange: "filterChange", sortChange: "sortChange", skipChange: "skipChange", groupChange: "groupChange", takeChange: "takeChange" }, host: { listeners: { "window:beforeunload": "unload($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GridStateDirective, decorators: [{
type: Directive,
args: [{
selector: "kendo-grid[gridState]",
standalone: true,
}]
}], ctorParameters: () => [], propDecorators: { expandedRows: [{
type: Input
}], expandedRowsChange: [{
type: Output
}], stateReady: [{
type: Output
}], filter: [{
type: Input
}], filterChange: [{
type: Output
}], gridState: [{
type: Input
}], sort: [{
type: Input
}], sortChange: [{
type: Output
}], skip: [{
type: Input
}], skipChange: [{
type: Output
}], group: [{
type: Input
}], groupChange: [{
type: Output
}], take: [{
type: Input
}], takeChange: [{
type: Output
}], unload: [{
type: HostListener,
args: ["window:beforeunload", ["$event"]]
}] } });
class GridStateModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GridStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: GridStateModule, imports: [GridStateDirective], exports: [GridStateDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GridStateModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GridStateModule, decorators: [{
type: NgModule,
args: [{
imports: [GridStateDirective],
exports: [GridStateDirective],
}]
}] });
/*
* Public API Surface of kendo-grid-state
*/
/**
* Generated bundle index. Do not edit.
*/
export { APP_STORAGE, Column, GridStateDirective, GridStateModule, StorageService };
//# sourceMappingURL=lucasheight-kendo-grid-state.mjs.map