@anglr/grid
Version:
Angular module displaying grid
147 lines • 8.55 kB
JavaScript
import { Component, ChangeDetectionStrategy, computed, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Paginator } from '@jscrpt/common';
import { PagingAbstractComponent } from '../pagingAbstract.component';
import { DEFAULT_OPTIONS } from '../../../misc/tokens';
import { InfinityNaNPipe } from '../../../pipes';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* Default options for paging
*/
const defaultOptions = {
initialItemsPerPage: 10,
initialPage: 1,
itemsPerPageValues: [],
cssClasses: {
pagingContainer: 'grid-flex-row',
pagingElement: 'grid-flex-row pages',
firstItemElement: 'fas fa-angle-double-left',
previousItemElement: 'fas fa-angle-left',
nextItemElement: 'fas fa-angle-right',
pagingSeparatorElement: 'grid-flex-1',
itemsPerPageElement: 'grid-flex-row items-per-page',
}
};
/**
* Component used for rendering paging with next and previous buttons
*/
export class PreviousNextPagingComponent extends PagingAbstractComponent {
//######################### public properties #########################
/**
* @inheritdoc
*/
get firstItemIndex() {
const offset = this.paginator.getOffset();
return isNaN(offset) ? 0 : offset;
}
//######################### public properties - overrides #########################
/**
* @inheritdoc
*/
get options() {
return super.options;
}
set options(options) {
super.options = options;
this.optionsValue.update(opts => {
return {
...opts,
itemsPerPageValues: options.itemsPerPageValues ?? opts.itemsPerPageValues,
};
});
}
//######################### constructor #########################
constructor() {
super();
//######################### protected fields #########################
/**
* Paginator used for getting page numbers
*/
this.paginator = new Paginator();
/**
* Indication that currently displayed page is first
*/
this.isFirst = signal(false).asReadonly();
/**
* Indication that currently displayed page is last
*/
this.isLast = signal(false).asReadonly();
this.itemsPerPageItems = computed(() => {
const itemsPerPageValues = this.optionsValue().itemsPerPageValues;
const itemsPerPage = this.itemsPerPageValue() ?? NaN;
const result = [];
for (const val of itemsPerPageValues) {
result.push({
value: val,
isActive: val == itemsPerPage || (isNaN(val) && isNaN(itemsPerPage))
});
}
return result;
});
}
//######################### public methods - overrides #########################
/**
* @inheritdoc
*/
async initialize(force) {
await super.initialize(force);
this.isFirst = computed(() => {
this.paginator.setPage(this.pageValue() ?? 1);
this.paginator.setItemsPerPage(this.itemsPerPageValue() ?? NaN);
this.paginator.setItemCount(this.totalCount());
return this.paginator.isFirst();
});
this.isLast = computed(() => {
this.paginator.setPage(this.pageValue() ?? 1);
this.paginator.setItemsPerPage(this.itemsPerPageValue() ?? NaN);
this.paginator.setItemCount(this.totalCount());
return this.paginator.isLast();
});
this.changeDetector.detectChanges();
}
//######################### protected methods - template methods #########################
/**
* Sets page for current paging
* @param page - Page index to be set
*/
setPageValue(page) {
if (this.isFirst() && page <= 1) {
return;
}
if (this.isLast() && page > (this.pageValue() ?? 1)) {
return;
}
this.setPage(page);
}
/**
* Sets items per page for current paging
* @param itemsPerPage - Number of items per page
*/
setItemsPerPageValue(itemsPerPage) {
if (itemsPerPage.isActive) {
return;
}
this.setItemsPerPage(itemsPerPage.value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: PreviousNextPagingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.0", type: PreviousNextPagingComponent, isStandalone: true, selector: "next-previous-paging", providers: [
{
provide: DEFAULT_OPTIONS,
useValue: defaultOptions,
},
], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"optionsValue().cssClasses.pagingContainer\">\r\n <div [ngClass]=\"optionsValue().cssClasses.pagingElement\">\r\n <a (click)=\"setPage(1)\" [ngClass]=\"{disabled: isFirst()}\">\r\n <span [ngClass]=\"optionsValue().cssClasses.firstItemElement\"></span>\r\n </a>\r\n\r\n <a (click)=\"setPage((pageValue() ?? 1) - 1)\" [ngClass]=\"{disabled: isFirst()}\">\r\n <span [ngClass]=\"optionsValue().cssClasses.previousItemElement\"></span>\r\n </a>\r\n\r\n <a (click)=\"setPage((pageValue() ?? 1) + 1)\" [ngClass]=\"{disabled: isLast()}\">\r\n <span [ngClass]=\"optionsValue().cssClasses.nextItemElement\"></span>\r\n </a>\r\n </div>\r\n\r\n <div [ngClass]=\"optionsValue().cssClasses.pagingSeparatorElement\"></div>\r\n\r\n @if(itemsPerPageItems().length)\r\n {\r\n <div [ngClass]=\"optionsValue().cssClasses.itemsPerPageElement\">\r\n @for (itemsPerPage of itemsPerPageItems(); track itemsPerPage)\r\n {\r\n <a (click)=\"setItemsPerPage(itemsPerPage.value)\" [ngClass]=\"{active: itemsPerPage.isActive}\">\r\n <span [innerHtml]=\"itemsPerPage.value | infinityNaN\"></span>\r\n </a>\r\n }\r\n </div>\r\n }\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: InfinityNaNPipe, name: "infinityNaN" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: PreviousNextPagingComponent, decorators: [{
type: Component,
args: [{ selector: 'next-previous-paging', imports: [
CommonModule,
InfinityNaNPipe,
], providers: [
{
provide: DEFAULT_OPTIONS,
useValue: defaultOptions,
},
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"optionsValue().cssClasses.pagingContainer\">\r\n <div [ngClass]=\"optionsValue().cssClasses.pagingElement\">\r\n <a (click)=\"setPage(1)\" [ngClass]=\"{disabled: isFirst()}\">\r\n <span [ngClass]=\"optionsValue().cssClasses.firstItemElement\"></span>\r\n </a>\r\n\r\n <a (click)=\"setPage((pageValue() ?? 1) - 1)\" [ngClass]=\"{disabled: isFirst()}\">\r\n <span [ngClass]=\"optionsValue().cssClasses.previousItemElement\"></span>\r\n </a>\r\n\r\n <a (click)=\"setPage((pageValue() ?? 1) + 1)\" [ngClass]=\"{disabled: isLast()}\">\r\n <span [ngClass]=\"optionsValue().cssClasses.nextItemElement\"></span>\r\n </a>\r\n </div>\r\n\r\n <div [ngClass]=\"optionsValue().cssClasses.pagingSeparatorElement\"></div>\r\n\r\n @if(itemsPerPageItems().length)\r\n {\r\n <div [ngClass]=\"optionsValue().cssClasses.itemsPerPageElement\">\r\n @for (itemsPerPage of itemsPerPageItems(); track itemsPerPage)\r\n {\r\n <a (click)=\"setItemsPerPage(itemsPerPage.value)\" [ngClass]=\"{active: itemsPerPage.isActive}\">\r\n <span [innerHtml]=\"itemsPerPage.value | infinityNaN\"></span>\r\n </a>\r\n }\r\n </div>\r\n }\r\n</div>" }]
}], ctorParameters: () => [] });
//# sourceMappingURL=previousNextPaging.component.js.map