@anglr/grid
Version:
Angular module displaying grid
97 lines • 4.39 kB
JavaScript
import { Component, ChangeDetectionStrategy, Inject, Optional, signal } from '@angular/core';
import { OrderByDirection } from '@jscrpt/common';
import { lastValueFrom } from '@jscrpt/common/rxjs';
import { from } from 'rxjs';
import { skip, take, toArray } from 'rxjs/operators';
import { DataLoaderAbstractComponent } from '../dataLoaderAbstract.component';
import { DATA_LOADER_OPTIONS } from '../../../misc/tokens';
import { DataLoaderState } from '../../../misc/enums';
import * as i0 from "@angular/core";
/**
* Default options for sync data loader
*/
const defaultOptions = {
autoLoadData: true,
accumulateData: false,
debounceDataCallback: 30,
data: [],
orderData: (data, ordering) => {
if (!ordering) {
return data;
}
return data.sort((a, b) => {
if (a[ordering.orderBy] < b[ordering.orderBy]) {
return ordering.orderByDirection == OrderByDirection.Ascending ? -1 : 1;
}
else if (a[ordering.orderBy] > b[ordering.orderBy]) {
return ordering.orderByDirection == OrderByDirection.Ascending ? 1 : -1;
}
return 0;
});
}
};
/**
* Data loader that allows synchronous data loading
*
* You must set options before end of sync call of `ngOnInit`, if you set it later you have to disable auto initialization of grid and initialize it manualy
*/
export class SyncDataLoaderComponent extends DataLoaderAbstractComponent {
//######################### public properties #########################
/**
* @inheritdoc
*/
get result() {
return this.ɵresult.asReadonly();
}
//######################### constructor #########################
constructor(options) {
super(defaultOptions, options);
//######################### protected fields #########################
/**
* Current result of data loader
*/
this.ɵresult = signal({
data: [],
totalCount: 0
});
}
//######################### protected methodes - implements DataLoaderAbstractComponent #########################
/**
* @inheritdoc
*/
async loadGridData(force) {
if (!force && !this.checkChanges()) {
return;
}
let data = [...this.ɵoptions.data];
this.ɵstate.set((data && data.length) ? DataLoaderState.DataLoading : DataLoaderState.NoDataLoading);
if (this.ɵoptions.orderData) {
data = this.ɵoptions.orderData(data, this.ordering?.ordering() ?? undefined);
}
const page = this.paging?.page() ?? 1;
const itemsPerPage = this.paging?.itemsPerPage() ?? 0;
data = await lastValueFrom(from(data)
.pipe(skip((page - 1) * (isNaN(itemsPerPage) ? 0 : itemsPerPage)), isNaN(itemsPerPage) ? ((source) => source) : take(itemsPerPage), toArray()));
this.ɵstate.set((data && data.length) ? DataLoaderState.Loaded : DataLoaderState.NoData);
this.ɵresult.set({
data: this.ɵoptions.accumulateData ? [...this.ɵresult().data, ...data] : data,
totalCount: this.ɵoptions.data.length
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: SyncDataLoaderComponent, deps: [{ token: DATA_LOADER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0", type: SyncDataLoaderComponent, isStandalone: true, selector: "ng-sync-data-loader", usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: SyncDataLoaderComponent, decorators: [{
type: Component,
args: [{
selector: 'ng-sync-data-loader',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [DATA_LOADER_OPTIONS]
}, {
type: Optional
}] }] });
//# sourceMappingURL=syncDataLoader.component.js.map