@anglr/grid
Version:
Angular module displaying grid
193 lines • 7.14 kB
JavaScript
import { ChangeDetectionStrategy, Component, ElementRef, Inject, Injector, Optional, inject, signal } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { OrderByDirection } from '@jscrpt/common';
import { extend } from '@jscrpt/common/extend';
import { GRID_PLUGIN_INSTANCES, ORDERING_OPTIONS } from '../../../misc/tokens';
import { DefaultOrderableIndicatorRenderer } from '../misc/services';
import * as i0 from "@angular/core";
/**
* Default options for ordering
*/
const defaultOptions = {
indicatorRenderer: DefaultOrderableIndicatorRenderer,
cssClasses: {
asc: 'fa fa-sort-up',
desc: 'fa fa-sort-down',
none: 'fa fa-sort',
orderable: 'header-orderable',
},
};
/**
* Component used for single ordering, used for ordering using single column
*/
export class SingleOrderingComponent {
//######################### public properties - implementation of SimpleOrdering #########################
/**
* @inheritdoc
*/
get ordering() {
return this.orderingValue.asReadonly();
}
/**
* @inheritdoc
*/
get options() {
return this.ɵoptions;
}
set options(options) {
this.ɵoptions = extend(true, this.ɵoptions, options);
}
//######################### constructor #########################
constructor(options) {
//######################### protected fields #########################
/**
* Current ordering value
*/
this.orderingValue = signal(undefined);
/**
* Instance of injector used for DI
*/
this.injector = inject(Injector);
/**
* @inheritdoc
*/
this.gridPlugins = inject(GRID_PLUGIN_INSTANCES, { optional: true });
/**
* @inheritdoc
*/
this.pluginElement = inject((ElementRef));
this.ɵoptions = extend(true, {}, defaultOptions, options);
}
//######################### public methods - implementation of OnDestroy #########################
/**
* Called when component is destroyed
*/
ngOnDestroy() {
this.metadataChangeSubscription?.unsubscribe();
this.metadataChangeSubscription = null;
}
//######################### public methods - implementation of SimpleOrdering #########################
/**
* @inheritdoc
*/
setOrdering(ordering) {
this.orderingValue.set(ordering);
this.gridInitializer?.setOrdering(this.orderingValue());
}
/**
* @inheritdoc
*/
orderByColumn(columnId) {
//no ordering, or ordering different column
const ordering = this.orderingValue();
let newOrdering;
if (!ordering || ordering.orderBy != columnId) {
newOrdering =
{
orderByDirection: OrderByDirection.Ascending,
orderBy: columnId,
};
this.orderingValue.set(newOrdering);
}
else if (ordering.orderByDirection == OrderByDirection.Ascending) {
newOrdering =
{
orderByDirection: OrderByDirection.Descending,
orderBy: columnId
};
this.orderingValue.set(newOrdering);
}
else {
newOrdering = null;
this.orderingValue.set(newOrdering);
}
this.gridInitializer?.setOrdering(newOrdering);
}
/**
* @inheritdoc
*/
getCssClassesForColumn(columnId) {
const ordering = this.orderingValue();
if (ordering?.orderBy == columnId) {
return [
ordering.orderByDirection == OrderByDirection.Ascending
? this.ɵoptions.cssClasses.asc
: this.ɵoptions.cssClasses.desc
];
}
return [this.ɵoptions.cssClasses.none];
}
/**
* @inheritdoc
*/
async initialize(force) {
if (!this.gridPlugins) {
throw new Error('SingleOrderingComponent: missing gridPlugins!');
}
const gridInitializer = this.gridPlugins.gridInitializer;
//grid initializer obtained and its different instance
if (force || (this.gridInitializer && this.gridInitializer != gridInitializer)) {
this.gridInitializer = null;
}
//no grid initializer obtained
if (!this.gridInitializer) {
this.gridInitializer = gridInitializer;
}
const metadataSelector = this.gridPlugins.metadataSelector;
//metadata selector obtained and its different instance
if (force || (this.metadataSelector && this.metadataSelector != metadataSelector)) {
this.metadataChangeSubscription?.unsubscribe();
this.metadataChangeSubscription = null;
this.metadataSelector = null;
}
//no metadata selector obtained
if (!this.metadataSelector) {
this.metadataSelector = metadataSelector;
this.metadataChangeSubscription = toObservable(this.metadataSelector.metadata, { injector: this.injector }).subscribe(() => this.checkColumns());
}
this.orderingValue.set(await this.gridInitializer.getOrdering());
}
/**
* @inheritdoc
*/
initOptions() {
}
/**
* @inheritdoc
*/
invalidateVisuals() {
}
//######################### protected methods #########################
/**
* Checks columns
*/
checkColumns() {
if (!this.metadataSelector) {
throw new Error('SingleOrderingComponent: metadata selector is missing!');
}
const ordering = this.ordering();
if (!ordering) {
return;
}
//ordering column is not visible
if (!this.metadataSelector.metadata()?.columns.find(itm => itm.id == ordering.orderBy)) {
this.setOrdering(null);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: SingleOrderingComponent, deps: [{ token: ORDERING_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.0", type: SingleOrderingComponent, isStandalone: true, selector: "ng-single-ordering", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: SingleOrderingComponent, decorators: [{
type: Component,
args: [{
selector: 'ng-single-ordering',
template: '',
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Inject,
args: [ORDERING_OPTIONS]
}, {
type: Optional
}] }] });
//# sourceMappingURL=singleOrdering.component.js.map