@codecabinet.online/codecabinet.online-sni-custom-grid-library
Version:
codecabinet.online created an astonishing grid library
723 lines (714 loc) • 211 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, Injectable, Directive, HostListener, Pipe, ElementRef, ContentChildren, ViewChild, NgModule } from '@angular/core';
import * as i8 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import { FloatingLabelModule, LabelModule } from '@progress/kendo-angular-label';
import * as i11 from '@ng-bootstrap/ng-bootstrap';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import * as i4 from '@progress/kendo-angular-dropdowns';
import { DropDownsModule, ComboBoxModule } from '@progress/kendo-angular-dropdowns';
import * as i6 from '@progress/kendo-angular-inputs';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { Subject, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import * as i1$1 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i1 from 'ngx-toastr';
import { ToastrModule } from 'ngx-toastr';
import * as i5 from '@progress/kendo-angular-dateinputs';
import { DateInputsModule, MultiViewCalendarModule } from '@progress/kendo-angular-dateinputs';
import * as i7 from 'ng-apexcharts';
import { NgApexchartsModule } from 'ng-apexcharts';
import * as i9 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i1$2 from '@angular/platform-browser';
import { BrowserModule } from '@angular/platform-browser';
import { IntlModule } from '@progress/kendo-angular-intl';
import { LayoutModule } from '@progress/kendo-angular-layout';
const emptyGuid = "00000000-0000-0000-0000-000000000000";
const defaultDebounceTime = 1000;
const ONE_DAY = 86400000;
const isNotEmpty$1 = (value) => {
return value !== undefined && value !== null && value !== "" && value !== "00000000-0000-0000-0000-000000000000";
};
const gridSettings = {
pageSize: "pageSize"
};
const filterMethod = {
local: "local",
server: "server-side"
};
const detailsLoadMethod = {
local: "local",
server: "server-side"
};
const columnTypes = {
text: "text",
dropdown: "dropdown",
switch: "switch",
date: "date",
number: "number",
list: "list",
modal: "modal",
icon: "icon",
daterange: "daterange",
button: "button",
textnumber: "text-number"
};
const customDetailTypes = {
text: "text",
button: "button",
warningText: "text-warning",
piechart: "piechart"
};
const isNotEmpty = (value) => {
return value !== undefined && value !== null && value !== "" && value !== "00000000-0000-0000-0000-000000000000";
};
class CustomGridColumnComponent {
constructor(_translate) {
this._translate = _translate;
this.startDate = null;
this.endDate = null;
this.filterKey = undefined;
this.props = { readonly: false, rendered: true };
this.colTemplate = null;
this.iconHoverText = null;
this.filterDataSource = null;
this.isRedirectActive = null;
this.columnType = columnTypes.text;
this.disabled = "false";
this.hasFilter = true;
this.displayedItems = [];
this.hiddenContent = "false";
this.textAlign = "inherit";
//---------Local properties
this.iconClickHandler = new EventEmitter();
this.action = new EventEmitter();
}
ngOnInit() {
}
getColumn() {
return this.field;
}
}
CustomGridColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomGridColumnComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
CustomGridColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomGridColumnComponent, selector: "custom-grid-column", inputs: { title: "title", field: "field", data: "data", tooltipList: "tooltipList", startDate: "startDate", endDate: "endDate", filterKey: "filterKey", props: "props", colTemplate: "colTemplate", iconHoverText: "iconHoverText", filterDataSource: "filterDataSource", isRedirectActive: "isRedirectActive", highlightedAnchorKey: "highlightedAnchorKey", hoverIcon: "hoverIcon", redirectLink: "redirectLink", columnType: "columnType", disabled: "disabled", hasFilter: "hasFilter", displayedItems: "displayedItems", missingText: "missingText", disabledTooltipList: "disabledTooltipList", hiddenContent: "hiddenContent", textAlign: "textAlign", width: "width", background: "background", stateClasses: "stateClasses", columnClasses: "columnClasses" }, outputs: { iconClickHandler: "iconClickHandler", action: "action" }, ngImport: i0, template: "", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomGridColumnComponent, decorators: [{
type: Component,
args: [{ selector: 'custom-grid-column', template: "", styles: [""] }]
}], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { title: [{
type: Input
}], field: [{
type: Input
}], data: [{
type: Input
}], tooltipList: [{
type: Input
}], startDate: [{
type: Input
}], endDate: [{
type: Input
}], filterKey: [{
type: Input
}], props: [{
type: Input
}], colTemplate: [{
type: Input
}], iconHoverText: [{
type: Input
}], filterDataSource: [{
type: Input
}], isRedirectActive: [{
type: Input
}], highlightedAnchorKey: [{
type: Input
}], hoverIcon: [{
type: Input
}], redirectLink: [{
type: Input
}], columnType: [{
type: Input
}], disabled: [{
type: Input
}], hasFilter: [{
type: Input
}], displayedItems: [{
type: Input
}], missingText: [{
type: Input
}], disabledTooltipList: [{
type: Input
}], hiddenContent: [{
type: Input
}], textAlign: [{
type: Input
}], width: [{
type: Input
}], background: [{
type: Input
}], stateClasses: [{
type: Input
}], columnClasses: [{
type: Input
}], iconClickHandler: [{
type: Output
}], action: [{
type: Output
}] } });
class NotificationService {
constructor(toastr, translate) {
this.toastr = toastr;
this.translate = translate;
}
showSuccess(message, title, url) {
this.toastr.success(message, title)
.onTap
.subscribe(() => this.toasterClickedHandler(url));
}
showError(message, title, url) {
this.toastr.error(message, title)
.onTap
.subscribe(() => this.toasterClickedHandler(url));
}
showInfo(message, title, url, disableTimeOut = false) {
this.toastr.info(message, title, { disableTimeOut: disableTimeOut })
.onTap
.subscribe(() => this.toasterClickedHandler(url));
}
showWarning(message, title, url) {
this.toastr.warning(message, title)
.onTap
.subscribe(() => this.toasterClickedHandler(url));
}
toasterClickedHandler(url) {
if (url) {
window.location.href = url;
}
}
}
NotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationService, deps: [{ token: i1.ToastrService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
NotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NotificationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i1.ToastrService }, { type: i3.TranslateService }]; } });
class ZipCodeDirective {
constructor(el) {
this.el = el;
this.navigationKeys = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
}
onKeyDown(e) {
if (this.navigationKeys.indexOf(e.key) > -1 ||
(e.key === 'a' && e.ctrlKey === true) ||
(e.key === 'c' && e.ctrlKey === true) ||
(e.key === 'x' && e.ctrlKey === true) ||
(e.key === 'a' && e.metaKey === true) ||
(e.key === 'c' && e.metaKey === true) ||
(e.key === 'x' && e.metaKey === true)) {
return;
}
if (e.key === ' ' || isNaN(Number(e.key))) {
e.preventDefault();
}
}
}
ZipCodeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZipCodeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ZipCodeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ZipCodeDirective, selector: "[zipcodedirective]", host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ZipCodeDirective, decorators: [{
type: Directive,
args: [{
selector: '[zipcodedirective]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class RouteTransformerDirective {
constructor(el, router) {
this.el = el;
this.router = router;
}
onClick(event) {
if (event.target.tagName === 'A') {
this.router.navigate([event.target.getAttribute('href')]);
event.preventDefault();
}
else {
return;
}
}
}
RouteTransformerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RouteTransformerDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Directive });
RouteTransformerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: RouteTransformerDirective, selector: "[routeTransformer]", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RouteTransformerDirective, decorators: [{
type: Directive,
args: [{
selector: '[routeTransformer]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.Router }]; }, propDecorators: { onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
;
class SanitizeHtmlPipe {
constructor(sanitizer) {
this.sanitizer = sanitizer;
}
transform(v) {
return this.sanitizer.bypassSecurityTrustHtml(v);
}
}
SanitizeHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
SanitizeHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizeHtmlPipe, name: "sanitizeHtml" });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SanitizeHtmlPipe, decorators: [{
type: Pipe,
args: [{
name: 'sanitizeHtml'
}]
}], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; } });
class CustomGridComponent {
constructor(renderer, _router, _toastService, _translate) {
this.renderer = renderer;
this._router = _router;
this._toastService = _toastService;
this._translate = _translate;
this.rowHasDetails = false;
this.hasGridDetails = false;
this.hasFilters = false;
this.rowDetails = [];
this.disabledRows = [];
this.disabledReasons = [];
this.gridDetails = [];
this.gridDetailsOrder = [];
/*height of the table*/
this.overflowX = "";
/*overflow style - types : scroll,hidden,auto*/
this.overflowY = "";
/*if set, ignores default grid template*/
this.rowClass = [];
/*if set, ignores default grid noRecords*/
this.noRecordsInnerHTML = null;
/* Customization properties */
/*-------------------------------------------------------*/
this.popoverConfiguration = null;
this.rowCheckable = false;
this.checkedRows = [];
this.customDetails = [];
this.detailsTitle = "";
this.toggleDetailsText = null;
this.translationKey = "";
this.gridDetailsTrasnlationKey = "";
this.hasNumbering = false;
this.hasStockInputIcon = false;
this.dataLoaded = false;
this.displayedDetails = [];
this.popOverReturnOption = "id";
this.filters = [];
this.filtersChange = new Subject();
/* Output */
/*-------------------------------------------------------*/
this.triggerFilters = new EventEmitter();
this.popOver = new EventEmitter();
this.scroll = new EventEmitter();
this.detailsToggled = new EventEmitter();
this.toggleChanged = new EventEmitter();
this.imageEnlarge = new EventEmitter();
this.customDetailsAction = new EventEmitter();
this.tooltipHover = new EventEmitter();
this.modalClickHandler = new EventEmitter();
this.mapHandler = new EventEmitter();
this.checkedRowsChange = new EventEmitter();
/* Local properties */
/*-------------------------------------------------------*/
this.pageable = true;
this.hasPageSizeSelection = false;
this.pageSizes = [10, 20, 50, 100];
/* Local properties */
/*-------------------------------------------------------*/
this.dataSourceColumns = [];
this.columnsDefinition = [];
this.grid = [];
this.norecords = false;
this.columnTypes = columnTypes;
this.init = true;
this.allSelected = false;
this.hasSelected = false;
this.localCheckedRows = [];
this.customDetailTypes = customDetailTypes;
this.tooltipList = [];
this._periodRange = { start: null, end: null };
this.showDateRangePopup = false;
this.objectKeys = Object.keys;
this.filterSubscription = this.filtersChange.pipe(debounceTime(defaultDebounceTime)).subscribe(x => {
let filterEvent = { filters: this.filters, filterMethod: this.filterMethod };
this.triggerFilters.emit(filterEvent);
});
this.chartOptions = {
chart: {
height: 200,
type: "radialBar"
},
series: [67],
plotOptions: {
radialBar: {
hollow: {
margin: 15,
size: "65%",
},
dataLabels: {
value: {
offsetY: -7,
color: "#000",
fontSize: "16px",
show: true
}
},
}
},
labels: [""],
fill: {
colors: ["#5ec12d"],
}
};
}
ngOnDestroy() {
if (this.filterSubscription) {
this.filterSubscription.unsubscribe();
}
if (this.scrollWindow) {
this.scrollWindow.unsubscribe();
}
}
ngOnInit() {
let ls_page = localStorage.getItem(gridSettings.pageSize);
if (ls_page) {
this.pageSize = JSON.parse(ls_page);
}
}
ngOnChanges() {
this.norecords = this.dataSource && this.dataSource.length == 0;
if (this.dataSource && this.init) {
this.init = false;
this.dataSource.forEach(element => {
element.isExpanded = false;
// element.isSelected = false;
element.isDisabled = false;
if (this.detailsLoadMethod == detailsLoadMethod.server) {
element.isDetailLoaded = false;
}
});
}
var columnsDef = this.columns?.toArray().map(x => {
return {
field: isNotEmpty$1(x.filterKey) ? x.filterKey : x.field,
title: x.title,
};
});
var columnLabels = this.columns?.toArray().map(x => x.filterDataSource);
this.datasourcesDef = columnLabels ? this.renameKeys(columnLabels, this.dataSourceColumns) : null;
}
ngAfterViewInit() {
setTimeout(() => {
var columns = this.columns.toArray();
this.dataSourceColumns = columns.map(x => {
return {
field: isNotEmpty$1(x.filterKey) ? x.filterKey : x.field,
title: x.title,
filterKey: isNotEmpty$1(x.filterKey) ? x.filterKey : x.field,
highlightedAnchorKey: x.highlightedAnchorKey
};
});
let colProperties = columns.map(x => {
return {
width: x.width,
background: x.background,
redirectLink: x.redirectLink,
columnType: x.columnType,
disabled: x.disabled,
hasFilter: x.hasFilter,
stateClasses: x.stateClasses,
tooltipList: x.tooltipList,
filterKey: x.filterKey,
displayedItems: x.displayedItems,
missingText: x.missingText,
disabledTooltipList: x.disabledTooltipList,
hiddenContent: x.hiddenContent,
textAlign: x.textAlign,
props: x.props,
colTemplate: x.colTemplate,
iconHoverText: x.iconHoverText,
isRedirectActive: x.isRedirectActive,
columnClasses: x.columnClasses
};
});
this.columnsDefinition = this.renameKeys(colProperties, this.dataSourceColumns);
var columnLabels = this.columns?.toArray().map(x => x.filterDataSource);
this.datasourcesDef = columnLabels ? this.renameKeys(columnLabels, this.dataSourceColumns) : null;
// var filters = columns.map(x => this.filters[x.field]);
// this.filters = this.renameKeys(filters, this.dataSourceColumns);//not needed anymore
}, 0);
const SCROLLABLE_AREA = this.height && this.height.search("%") == -1 ? this.elementRef.nativeElement : window;
this.scrollWindow = fromEvent(SCROLLABLE_AREA, 'scroll').subscribe((event) => {
this.scrollHandler(event);
});
}
generateDynamicHtml(htmlTemplateProvided, row, stateClasses) {
// console.log("[DEBUG]: GenerateDynamicHtml" + htmlTemplateProvided);
// console.log(row);
const regex = /\{{(.*?)\}}/;
var matched = regex.exec(htmlTemplateProvided);
while (matched) {
htmlTemplateProvided = htmlTemplateProvided.replace(matched[0], row[matched[1]]);
matched = regex.exec(htmlTemplateProvided);
}
if (stateClasses?.length > 0) {
const regexClass = /\{#(.*?)\#}/;
var matchedClass = regexClass.exec(htmlTemplateProvided);
while (matchedClass) {
htmlTemplateProvided = htmlTemplateProvided.replace(matchedClass[0], this.selectClass(stateClasses, row, matchedClass[1]));
matchedClass = regexClass.exec(htmlTemplateProvided);
}
}
return htmlTemplateProvided;
}
renameKeys(obj, newKeys) {
const keyValues = Object.keys(obj).map(key => {
const newKey = newKeys[key] || key;
return { [newKey.field]: obj[key] };
});
return Object.assign({}, ...keyValues);
}
checkRedirectIsActive(isRedirectActive, row) {
return isRedirectActive != null && eval(isRedirectActive);
}
redirectRoute(route = null, id, isRedirectActive, row) {
if (isNotEmpty$1(route) && this.checkRedirectIsActive(isRedirectActive, row)) {
if (isNotEmpty$1(id)) {
this._router.navigate([route + '/' + id]);
}
else {
this._router.navigate([route]);
}
}
}
redirectUrl(link, row) {
if (this.checkDisabledRow(row)) {
return;
}
if (link.isExternal) {
window.location.href = link.url;
}
else {
this._router.navigate([link.url], { queryParams: link.queryParams });
}
}
/* Details */
toggleDetailsContainer(rowIndex, id = null) {
this.dataSource.forEach((element, index) => {
if (element.isExpanded && index != rowIndex) {
element.isExpanded = false;
}
});
var isExpanded = this.dataSource[rowIndex].isExpanded;
var isDetailLoaded = this.dataSource[rowIndex].isDetailLoaded;
this.dataSource[rowIndex].isExpanded = !isExpanded;
if (!isExpanded && this.detailsLoadMethod == detailsLoadMethod.server && !isDetailLoaded) {
this.dataSource[rowIndex].isDetailLoaded = true;
let event = { id: id, rowIndex: rowIndex };
this.detailsToggled.emit(event);
}
}
formatDate(date) {
var stringToDate = new Date(date);
var fullDate = stringToDate.toLocaleDateString(localStorage.getItem("selectedLanguage"));
return fullDate;
}
disabledSwitch(row, disabledExpression) {
return eval(disabledExpression);
}
disabledPopoverButtons(row, disabledExpression) {
return eval(disabledExpression);
}
hidePopoverButtons(row, hiddenExpression) {
return eval(hiddenExpression);
}
checkDisabledRow(row) {
if (this.disabledRows.find(y => {
return y.key != null ? row[this.dataSourcePK] == y.key : y.index == this.dataSource.indexOf(row);
}) != undefined) {
return true;
}
return false;
}
checkDisabledCheckboxRow(row) {
if (row.isDisabled) {
return true;
}
return this.checkDisabledRow(row);
}
selectClass(event, row, classTarget = null) {
return this.selectClassTemplate(event, row, classTarget);
}
selectRowClass(row) {
if (this.rowClass) {
return this.selectClassTemplate(this.rowClass, row);
}
}
selectClassTemplate(classArray, row, classTarget = null) {
var returnedClass = "default-class";
if (classArray) {
classArray.forEach(element => {
if (eval(element.expression) && (element.classTarget == classTarget || !classTarget || !element.classTarget)) {
returnedClass = element.className;
return;
}
});
}
return returnedClass;
}
disable(exp, row) {
return eval(exp);
}
hideCustomDetail(exp, row) {
return eval(exp);
}
evaluateExpression(exp, row) {
return eval(exp);
}
isNotEmpty(element) {
return isNotEmpty$1(element);
}
checkHiddenCell(row, expression) {
return !eval(expression);
}
/* Emitters */
/*-------------------------------------------------------*/
toggleValueChange(id) {
this.toggleChanged.emit(id);
}
popoverAction(action, rowData) {
let event = { action: action, id: undefined, rowData: undefined };
if (this.popOverReturnOption === "id") {
event.id = rowData[this.dataSourcePK];
}
if (this.popOverReturnOption === "rowData") {
event.rowData = rowData;
}
if (action != null) {
this.popOver.emit(event);
}
return;
}
scrollHandler(event) {
if (this.pageable) {
this.scroll.emit(event);
}
}
imageClickHandler(photo) {
this.imageEnlarge.emit(photo);
}
tooltipHoverHandler(event, rowIndex) {
let objEvent = { success: event, rowIndex: rowIndex, data: this.dataSource[rowIndex] };
this.tooltipHover.emit(objEvent);
}
modalHandler(row, colField) {
if (this.columnsDefinition[colField].disabled) {
return;
}
this.modalClickHandler.emit(row);
}
iconClickedHandler(row, colField) {
if (this.evaluateExpression(this.columnsDefinition[colField].disabled, row) || this.checkDisabledRow(row)) {
return;
}
let iconColumn = this.columns.toArray().find(x => x.field == colField);
if (iconColumn) {
iconColumn.iconClickHandler.emit(row);
}
}
cellActionHandler(row, colField) {
if (eval(this.columnsDefinition[colField].disabled) || this.checkDisabledRow(row)) {
return;
}
let column = this.columns.toArray().find(x => x.field == colField);
if (column && column.action /*.observers && column.action.observers.length > 0*/) {
column.action.emit(row);
}
}
redirectMap(event, row) {
if (this.checkDisabledRow(row)) {
return;
}
let eventObject = {
event: event,
row: row
};
this.mapHandler.emit(eventObject);
}
/* Handlers */
/*-------------------------------------------------------*/
changePageSize(event) {
localStorage.setItem(gridSettings.pageSize, JSON.stringify(event));
window.location.reload();
return;
}
selectHandler(event, rowIndex) {
setTimeout(() => {
this.dataSource[rowIndex].isSelected = event;
this.allSelected = this.dataSource.every(x => x.isSelected);
this.checkedRows = this.dataSource.filter(x => x.isSelected);
this.checkedRowsChange.emit(this.checkedRows);
});
}
selectAllHandler() {
setTimeout(() => {
this.dataSource.filter(x => (x.isSelected != this.allSelected &&
!this.checkDisabledRow(x) && !x.isDisabled)).forEach(x => { x.isSelected = this.allSelected; });
this.checkedRows = this.dataSource.filter(x => x.isSelected);
this.checkedRowsChange.emit(this.checkedRows);
});
}
customTemplateActionHandler(action, id) {
let event = { action: action, id: id };
if (action) {
this.customDetailsAction.emit(event);
}
}
isDecimal(value) {
return !isNaN(value);
}
valueChanged(event, popup) {
this.showDateRangePopup = false;
popup.show = false;
this.filtersChange.next(event);
}
clearDate(event, popup) {
this.showDateRangePopup = false;
popup.show = false;
if (this.filters["startDate"] || this.filters["endDate"]) {
this.filters["startDate"] = null;
this.filters["endDate"] = null;
}
this.filtersChange.next(event);
}
activateCalendar(popup) {
this.showDateRangePopup = true;
popup.show = true;
}
openPopup(event) {
if (!this.showDateRangePopup) {
event.preventDefault();
}
}
closePopup(event) {
if (this.showDateRangePopup) {
event.preventDefault();
}
}
}
CustomGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomGridComponent, deps: [{ token: i0.Renderer2 }, { token: i1$1.Router }, { token: NotificationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
CustomGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomGridComponent, selector: "custom-grid", inputs: { dataSource: "dataSource", dataSourcePK: "dataSourcePK", filtersDataType: "filtersDataType", rowHasDetails: "rowHasDetails", hasGridDetails: "hasGridDetails", hasFilters: "hasFilters", rowDetails: "rowDetails", disabledRows: "disabledRows", disabledReasons: "disabledReasons", gridDetails: "gridDetails", gridDetailsOrder: "gridDetailsOrder", width: "width", height: "height", overflowX: "overflowX", overflowY: "overflowY", rowTemplate: "rowTemplate", rowClass: "rowClass", noRecordsInnerHTML: "noRecordsInnerHTML", popoverConfiguration: "popoverConfiguration", noDataImg: "noDataImg", detailsLoadMethod: "detailsLoadMethod", rowCheckable: "rowCheckable", checkedRows: "checkedRows", customDetails: "customDetails", detailsTitle: "detailsTitle", toggleDetailsText: "toggleDetailsText", translationKey: "translationKey", gridDetailsTrasnlationKey: "gridDetailsTrasnlationKey", hasNumbering: "hasNumbering", hasStockInputIcon: "hasStockInputIcon", dataLoaded: "dataLoaded", displayedDetails: "displayedDetails", popOverReturnOption: "popOverReturnOption", filterable: "filterable", filters: "filters", filterMethod: "filterMethod", pageable: "pageable", hasPageSizeSelection: "hasPageSizeSelection" }, outputs: { triggerFilters: "triggerFilters", popOver: "popOver", scroll: "scroll", detailsToggled: "detailsToggled", toggleChanged: "toggleChanged", imageEnlarge: "imageEnlarge", customDetailsAction: "customDetailsAction", tooltipHover: "tooltipHover", modalClickHandler: "modalClickHandler", mapHandler: "mapHandler", checkedRowsChange: "checkedRowsChange" }, queries: [{ propertyName: "columns", predicate: CustomGridColumnComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["customgrid"], descendants: true, read: ElementRef }, { propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"custom-grid-wrap\" [ngStyle]=\"{'width':width,'height':height,'overflow-x': overflowX, 'overflow-y': overflowY}\" #customgrid>\n <ng-container *ngIf=\"(hasFilters || !norecords)\">\n <div class=\"custom-grid-table\" [ngStyle]=\"{'width':width}\">\n <div class=\"custom-grid-thead\">\n <div class=\"custom-grid-thead-tr header-border-custom-grid\">\n <div class=\"custom-grid-thead-cell cell-disabled\"></div> <!-- disabled row cell -->\n <div *ngIf=\"rowCheckable\" class=\"custom-grid-thead-cell cell-checkbox cell-fixed\"> <!-- row cell checkbox-->\n <input type=\"checkbox\"\n class=\"k-checkbox custom-grid-checkbox\" \n [(ngModel)]=\"allSelected\" \n (ngModelChange)=\"selectAllHandler()\"\n [disabled]=\"dataSourceColumns != null && dataSourceColumns.length == 0\">\n </div>\n <div *ngIf=\"hasNumbering\" class=\"custom-grid-thead-cell cell-numbering cell-fixed\"> <!-- row cell numbering-->\n {{'customGrid.numbering' | translate}}\n </div>\n <!-- row cells data-->\n <div *ngFor=\"let col of dataSourceColumns; let colIndex = index\"\n class=\"custom-grid-thead-cell cell-thead-filter {{columnsDefinition[col.field].columnClasses}}\"\n [hidden]=\"!columnsDefinition[col.field].props.rendered\"\n [ngClass]=\"{\n 'cell-empty': !col.title, 'cell-data': col.title,\n 'cell-date': !datasourcesDef[col.field] && columnsDefinition[col.field].columnType == columnTypes.date || columnsDefinition[col.field].columnType == columnTypes.daterange\n }\"\n >\n <a class=\"table-header-title-custom-grid a-header-custom-grid\" *ngIf=\"col.title\">\n {{ col.title | translate }}\n </a>\n </div>\n <div *ngIf=\"popoverConfiguration != null\" class=\"custom-grid-thead-cell cell-popover cell-fixed\"></div> <!-- disabled row cell popover -->\n </div> <!-- END custom-grid-thead-tr -->\n <div class=\"custom-grid-thead-tr custom-grid-thead-filters\">\n <div class=\"custom-grid-thead-cell cell-disabled\"></div> <!-- disabled row cell -->\n <div *ngIf=\"rowCheckable\" class=\"custom-grid-thead-cell cell-checkbox cell-fixed\"></div> <!-- disabled row cell checkbox -->\n <div *ngIf=\"hasNumbering\" class=\"custom-grid-thead-cell cell-numbering cell-fixed\"></div> <!-- disabled row cell numbering -->\n <!-- row cells data-->\n <div class=\"custom-grid-thead-cell cell-thead-filter {{columnsDefinition[col.field].columnClasses}}\" \n *ngFor=\"let col of dataSourceColumns ; let colIndex = index\"\n [ngClass]=\"{\n 'cell-date': !datasourcesDef[col.field] && columnsDefinition[col.field].columnType == columnTypes.date || columnsDefinition[col.field].columnType == columnTypes.daterange,\n 'cell-empty': !columnsDefinition[col.field].hasFilter,\n 'cell-data': datasourcesDef[col.field] || (!datasourcesDef[col.field] && columnsDefinition[col.field].hasFilter),\n 'cell-dropdown': datasourcesDef[col.field]\n }\"\n >\n \n <ng-container *ngIf=\"datasourcesDef[col.field]; else notDropdown\">\n <div class=\"custom-grid-filter-container custom-grid-combobox\" *ngIf=\"columnsDefinition[col.field].props.rendered\">\n <kendo-combobox placeholder=\"{{'common.actions.filter' | translate}}\"\n [data]=\"datasourcesDef[col.field]\"\n [(ngModel)]=\"filters[col.filterKey]\" \n (ngModelChange)=\"filtersChange.next($event)\"\n valueField=\"id\"\n textField=\"name\"\n [valuePrimitive]=\"true\">\n </kendo-combobox>\n </div>\n </ng-container>\n <ng-template #notDropdown>\n <ng-container [ngSwitch]=\"columnsDefinition[col.field].columnType\">\n <ng-container *ngIf=\"columnsDefinition[col.field].hasFilter\">\n <ng-container *ngSwitchDefault>\n <div class=\"custom-grid-filter-container\" *ngIf=\"columnsDefinition[col.field].props.rendered\">\n <i class=\"icon icon-search wa-icon wa-icon-search\"></i>\n <input type=\"text\" placeholder=\"{{'common.actions.filter' | translate}}\"\n class=\"filter-header-box-custom-grid\" [(ngModel)]=\"filters[col.filterKey]\" (ngModelChange)=\"filtersChange.next($event)\">\n </div>\n </ng-container>\n \n <ng-container *ngSwitchCase=\"columnTypes.text\">\n <div class=\"custom-grid-filter-container\" *ngIf=\"columnsDefinition[col.field].props.rendered\">\n <i class=\"icon icon-search wa-icon wa-icon-search\"></i>\n <input type=\"text\" placeholder=\"{{'common.actions.filter' | translate}}\"\n class=\"filter-header-box-custom-grid\" [(ngModel)]=\"filters[col.filterKey]\" (ngModelChange)=\"filtersChange.next($event)\">\n </div>\n </ng-container>\n \n <ng-container *ngSwitchCase=\"columnTypes.date\">\n <kendo-datepicker class=\"custom-grid-filter-container kendo-datepicker-placeholder\" [format]=\"'d'\" [(ngModel)]=\"filters[col.filterKey]\"\n (ngModelChange)=\"filtersChange.next($event)\" *ngIf=\"columnsDefinition[col.field].props.rendered\">\n <kendo-datepicker-messages today=\"{{ 'calendar.today' | translate }}\"\n toggle=\"{{ 'calendar.toggle' | translate }}\"></kendo-datepicker-messages>\n </kendo-datepicker>\n </ng-container>\n \n <ng-container *ngSwitchCase=\"columnTypes.daterange\">\n <kendo-daterange class=\"custom-grid-filter-container custom-grid-date-range\" *ngIf=\"columnsDefinition[col.field].props.rendered\">\n <div class=\"custom-grid-date-range-anchor d-flex align-items-center\" #anchor (click)=\"activateCalendar(customGridDateRangePopup)\">\n <label class=\"custom-grid-date-range-label d-flex align-items-center\">\n <kendo-dateinput kendoDateRangeStartInput\n [(value)]=\"filters['startDate']\" \n placeholder=\"{{ 'customGrid.startDate' | translate }}\"\n (valueChange)=\"filters['endDate'] = null\"\n class=\"daterange-dateinput\">\n </kendo-dateinput>\n </label>\n <label class=\"custom-grid-date-range-label d-flex align-items-center\">\n <kendo-dateinput kendoDateRangeEndInput\n [(value)]=\"filters['endDate']\" \n placeholder=\"{{ 'customGrid.endDate' | translate }}\"\n class=\"daterange-dateinput\">\n </kendo-dateinput>\n <span class=\"k-icon k-i-calendar\"></span>\n </label>\n </div>\n <kendo-daterange-popup #customGridDateRangePopup (open)=\"openPopup($event)\" (close)=\"closePopup($event)\"\n [anchor]=\"anchor\" \n [anchorAlign]=\"{ horizontal: 'center', vertical: 'bottom'}\"\n [popupAlign]=\"{ horizontal: 'center', vertical: 'top' }\"\n >\n <ng-template kendoDateRangePopupTemplate [ngIf]=\"true\">\n <kendo-multiviewcalendar kendoDateRangeSelection>\n </kendo-multiviewcalendar>\n <div class=\"custom-grid-filter-btn-section\">\n <button class=\"custom-grid-clear-daterange\" \n (click)=\"clearDate($event, customGridDateRangePopup)\">\n {{'common.actions.clear' | translate}}\n </button>\n <button class=\"custom-grid-filter-daterange\" \n (click)=\"valueChanged($event, customGridDateRangePopup)\">\n {{'common.actions.filter' | translate}}\n </button>\n </div> \n </ng-template>\n </kendo-daterange-popup>\n </kendo-daterange>\n </ng-container>\n \n <ng-container *ngSwitchCase=\"columnTypes.textnumber\">\n <div class=\"custom-grid-filter-container\" *ngIf=\"columnsDefinition[col.field].props.rendered\">\n <i class=\"icon icon-search wa-icon wa-icon-search\"></i>\n <input type=\"number\" min=\"0\" zipcodedirective placeholder=\"{{'common.actions.filter' | translate}}\"\n class=\"filter-header-box-custom-grid\" [(ngModel)]=\"filters[col.filterKey]\" (ngModelChange)=\"filtersChange.next($event)\">\n </div>\n </ng-container>\n \n </ng-container>\n </ng-container>\n </ng-template>\n </div>\n <div *ngIf=\"popoverConfiguration != null\" class=\"custom-grid-thead-cell cell-popover cell-fixed\"></div> <!-- disabled row cell popover -->\n </div> <!-- END custom-grid-thead-tr -->\n </div> <!-- END custom-grid-thead -->\n <div class=\"custom-grid-tbody\" *ngIf=\"!norecords\">\n <ng-container *ngFor=\"let row of dataSource; let rowIndex = index\">\n <ng-container *ngIf=\"row\">\n <ng-container *ngIf=\"rowTemplate; else defaultRowTemplate\">\n <ng-container *ngFor=\"let col of dataSourceColumns; let colIndex = index\">\n <div [innerHtml]=\"rowTemplate | sanitizeHtml\"></div>\n </ng-container>\n </ng-container>\n\n <!-- custom-grid-tbody-tr row data-->\n <ng-template #defaultRowTemplate>\n <div class=\"custom-grid-tbody-tr row-box-custom-grid {{selectRowClass(row)}}\"\n [ngClass]=\"{'custom-grid-disabled-row': checkDisabledRow(row), 'row-has-details': rowHasDetails}\">\n <div *ngIf=\"rowCheckable\" class=\"custom-grid-tbody-cell cell-checkbox cell-fixed\"> <!-- row cell checkbox-->\n <input type=\"checkbox\" \n class=\"k-checkbox custom-grid-checkbox\" \n [(ngModel)]=\"row.isSelected\" \n (ngModelChange)=\"selectHandler($event, rowIndex)\" \n [disabled]=\"checkDisabledCheckboxRow(row)\"\n >\n </div>\n <div class=\"custom-grid-tbody-cell cell-disabled\"> <!-- row cell disabled -->\n <ng-container *ngIf=\"checkDisabledRow(row)\">\n <i class=\"icon icon-warning-circle wa-icon wa-icon-warning-circle tooltip-trigger\"\n [ngbTooltip]=\"reasonDisabled\" placement=\"right\"></i>\n <ng-template #reasonDisabled>\n <div class=\"tooltip-container\">\n <ng-container *ngFor=\"let reason of disabledReasons; let reasonIndex = index\">\n <div class=\"tooltip-title\">\n {{reason.title | translate}}\n </div>\n <div class=\"tooltip-content\">\n {{reason.description | translate}}\n </div>\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n </div>\n <div *ngIf=\"hasNumbering\" class=\"custom-grid-tbody-cell cell-numbering cell-fixed\"> <!-- row cell numbering-->\n {{rowIndex + 1}}.\n </div>\n <!-- row cells data-->\n <ng-container *ngFor=\"let col of dataSourceColumns; let colIndex = index\">\n <ng-container *ngIf=\"!columnsDefinition[col.field].redirectLink; else linkColumn\">\n <ng-container *ngIf=\"columnsDefinition[col.field].colTemplate; else withoutTemplate\">\n <div class=\"custom-grid-tbody-cell cell-data {{columnsDefinition[col.field].columnClasses}}\">\n <div [innerHtml]=\"generateDynamicHtml(columnsDefinition[col.field].colTemplate, row, columnsDefinition[col.field].stateClasses)\"\n class=\"grid-colTemplate-container\">\n </div>\n </div>\n </ng-container>\n\n <ng-template #withoutTemplate>\n <ng-container [ngSwitch]=\"columnsDefinition[col.field].columnType\">\n <ng-container *ngSwitchDefault>\n <div class=\"custom-grid-tbody-cell cell-data {{columnsDefinition[col.field].columnClasses}}\"\n [ngClass]=\"{\n 'custom-grid-disabled-col': evaluateExpression(columnsDefinition[col.field].disabled, row)\n }\"\n (click)=\"cellActionHandler(row, col.field)\"\n *ngIf=\"columnsDefinition[col.field].props.rendered\">\n <span [ngClass]=\"selectClass(columnsDefinition[col.field].stateClasses,row)\"\n *ngIf=\"checkHiddenCell(row, columnsDefinition[col.field].hiddenContent)\">\n {{isNotEmpty(row[col.field]) ? row[col.field] : (columnsDefinition[col.field].missingText | translate)}}\n </span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypes.text || columnTypes.textnumber\">\n <div class=\"custom-grid-tbody-cell cell-data cell-text {{columnsDefinition[col.field].columnClasses}}\"\n [ngClass]=\"{\n 'custom-grid-disabled-col': evaluateExpression(columnsDefinition[col.field].disabled, row),\n