@memberjunction/ng-user-view-grid 0.9.1 → 0.9.4

package/dist/lib/ng-user-view-grid.component.js

@@ -1,769 +1,760 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { Component, ViewChild, ElementRef, Output, EventEmitter, Input } from '@angular/core';
-import { Metadata, RunView, EntityFieldTSType, LogError, ViewInfo } from '@memberjunction/core';
-import { GridComponent } from "@progress/kendo-angular-grid";
-import { Keys } from '@progress/kendo-angular-common';
-import { Subject } from 'rxjs';
-import { ExcelExportComponent } from '@progress/kendo-angular-excel-export';
-import { MJEventType, MJGlobal } from '@memberjunction/global';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "@angular/router";
-import * as i3 from "@angular/common";
-import * as i4 from "@progress/kendo-angular-grid";
-import * as i5 from "@progress/kendo-angular-dialog";
-import * as i6 from "@progress/kendo-angular-excel-export";
-import * as i7 from "@progress/kendo-angular-buttons";
-const _c0 = ["kendoGrid"];
-const _c1 = ["excelExport"];
-function UserViewGridComponent_ng_template_3_button_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 14);
-    i0.ɵɵlistener("click", function UserViewGridComponent_ng_template_3_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.enableCompare(true)); });
-    i0.ɵɵtext(1, "Cancel");
-    i0.ɵɵelementEnd();
-} }
-function UserViewGridComponent_ng_template_3_button_5_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 15);
-    i0.ɵɵlistener("click", function UserViewGridComponent_ng_template_3_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.RefreshFromSavedParams()); });
-    i0.ɵɵtext(1, " Refresh ");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("primary", true);
-} }
-function UserViewGridComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 10);
-    i0.ɵɵlistener("click", function UserViewGridComponent_ng_template_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.doExcelExport()); });
-    i0.ɵɵtext(1, "Export to Excel");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(2, UserViewGridComponent_ng_template_3_button_2_Template, 2, 0, "button", 11);
-    i0.ɵɵelementStart(3, "button", 12);
-    i0.ɵɵlistener("click", function UserViewGridComponent_ng_template_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r14); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.enableCompare()); });
-    i0.ɵɵtext(4, "Compare");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, UserViewGridComponent_ng_template_3_button_5_Template, 2, 1, "button", 13);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", ctx_r1.compareMode);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.compareMode);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("disabled", ctx_r1.compareMode && ctx_r1.compareRecords.length < 2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.showRefreshButton);
-} }
-const _c2 = function () { return { "text-align": "center", "vertical-align": "center" }; };
-const _c3 = function () { return { "font-weight": "bold", "background-color": "#a9c2af" }; };
-function UserViewGridComponent_kendo_grid_checkbox_column_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-grid-checkbox-column", 16);
-} if (rf & 2) {
-    i0.ɵɵstyleMap(i0.ɵɵpureFunction0(4, _c2));
-    i0.ɵɵproperty("width", 50)("headerStyle", i0.ɵɵpureFunction0(5, _c3));
-} }
-function UserViewGridComponent_kendo_grid_column_5_1_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
-    i0.ɵɵpipe(1, "number");
-    i0.ɵɵpipe(2, "number");
-    i0.ɵɵelement(3, "br");
-    i0.ɵɵelementStart(4, "span", 19);
-    i0.ɵɵtext(5);
-    i0.ɵɵpipe(6, "number");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r18 = i0.ɵɵnextContext(3);
-    i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind1(1, 3, ctx_r18.viewData.length), "", ctx_r18.totalRowCount > ctx_r18.viewData.length ? " of " + i0.ɵɵpipeBind1(2, 5, ctx_r18.totalRowCount) : " rows", "");
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(6, 7, ctx_r18.viewExecutionTime, "1.2-2"), " seconds");
-} }
-function UserViewGridComponent_kendo_grid_column_5_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, UserViewGridComponent_kendo_grid_column_5_1_ng_template_0_Template, 7, 10, "ng-template", 18);
-} }
-function UserViewGridComponent_kendo_grid_column_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-grid-column", 17);
-    i0.ɵɵtemplate(1, UserViewGridComponent_kendo_grid_column_5_1_Template, 1, 0, null, 9);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r16 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵstyleMap(ctx_r3.GetColumnCellStyle(item_r16));
-    i0.ɵɵproperty("field", item_r16.Name)("title", ctx_r3.GetColumnTitle(item_r16))("width", item_r16.width ? item_r16.width : 100)("editable", item_r16.EntityField.AllowUpdateAPI)("editor", ctx_r3.getEditor(item_r16.EntityField))("headerStyle", i0.ɵɵpureFunction0(9, _c3));
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", item_r16 === ctx_r3.visibleColumns[0]);
-} }
-function UserViewGridComponent_kendo_excelexport_column_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-excelexport-column", 20);
-} if (rf & 2) {
-    const exportCol_r19 = ctx.$implicit;
-    i0.ɵɵproperty("field", exportCol_r19.Name)("title", exportCol_r19.Name);
-} }
-function UserViewGridComponent_div_9_kendo_window_2_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-window", 23);
-    i0.ɵɵlistener("close", function UserViewGridComponent_div_9_kendo_window_2_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.closeDialog()); });
-    i0.ɵɵelementStart(1, "div", 24)(2, "div");
-    i0.ɵɵelement(3, "mj-record-compare", 25);
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r20 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("width", 900)("minHeight", 300)("minWidth", 400)("resizable", true);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("recordsToCompare", ctx_r20.compareRecords)("visibleColumns", ctx_r20.visibleColumns);
-} }
-function UserViewGridComponent_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵelement(1, "div", 21);
-    i0.ɵɵtemplate(2, UserViewGridComponent_div_9_kendo_window_2_Template, 4, 6, "kendo-window", 22);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r6 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r6.isDialogOpened);
-} }
-export class UserViewGridComponent {
-    get PendingRecords() {
-        return this._pendingRecords;
-    }
-    StartEditMode() {
-        this.InEditMode = true;
-    }
-    EndEditMode() {
-        this.InEditMode = false;
-        this.editModeEnded.next();
-    }
-    EditingComplete() {
-        if (this.InEditMode) {
-            // we need to wait for edit mode to end before we can return true
-            return new Promise((resolve, reject) => {
-                const subscription = this.editModeEnded.subscribe(() => {
-                    resolve(true);
-                    subscription.unsubscribe();
-                });
-            });
-        }
-        else
-            return Promise.resolve(true); // not in edit mode, so editing is complete!
-    }
-    IsDynamicView() {
-        return !this._viewEntity; // if we have a viewEntity it is a stored view
-    }
-    pageChange(event) {
-        this.skip = event.skip;
-        this.virtualLoadData();
-    }
-    virtualLoadData() {
-        // check to see if we have already formatted the slice of the data we need right now
-        // we are storing the formattted data in the formattedData array and it has same set
-        // of indexes as the viewData array (raw unformatted data). When we first get viewData
-        // from the server we create an array of the same length as viewData, but have nulls in all of the 
-        // indexes. As we format each row of viewData we store the formatted row in the same index
-        // in the formattedData array. So if we have already formatted the data we need for the current
-        // page, we just use that data, otherwise we format the data we need for the current page
-        try {
-            // check to see if we have already formatted the data we need for the current page
-            for (let i = this.skip; (i < (this.skip + this.pageSize)) && (i < this.viewData.length); i++) {
-                if (!this.formattedData[i]) {
-                    // we have not formatted this row yet, so format it
-                    const r = this.viewColumns.map((c) => {
-                        if (c && c.EntityField && this.viewData[i] && this.viewData[i][c.EntityField.Name]) {
-                            if (!c.hidden && c.EntityField.Name !== 'ID') {
-                                const ef = c.EntityField;
-                                return { field: c.EntityField.Name, value: ef.FormatValue(this.viewData[i][c.EntityField.Name], undefined, undefined, 300) };
-                            }
-                            else
-                                return { field: c.EntityField.Name, value: this.viewData[i][c.EntityField.Name] }; // hidden column, so just return the value, don't bother formatting
-                        }
-                        else
-                            return { field: c.Name, value: null };
-                    });
-                    // now r is an array of {field: string, value: any} objects, so we need to convert it to an object
-                    // with the field names as the keys and the values as the values
-                    const row = {};
-                    for (let j = 0; j < r.length; j++) {
-                        if (r[j] && r[j].field && r[j].field.length > 0)
-                            row[r[j].field] = r[j].value;
-                    }
-                    this.formattedData[i] = row;
-                }
-            }
-            // now that we have made sure current page of data is formatted, we can return it
-            this.gridView = {
-                data: this.formattedData.slice(this.skip, this.skip + this.pageSize),
-                total: this.viewData.length,
-            };
-        }
-        catch (e) {
-            LogError(e);
-        }
-    }
-    constructor(formBuilder, router) {
-        this.formBuilder = formBuilder;
-        this.router = router;
-        this.title = 'UserViewGrid';
-        this.BottomMargin = 0;
-        this.InEditMode = false;
-        this.EditMode = "None";
-        this.AutoNavigate = true;
-        this.rowClicked = new EventEmitter();
-        this.rowEdited = new EventEmitter();
-        this.kendoGridElement = null;
-        this.kendoGridElementRef = null;
-        this.kendoExcelExport = null;
-        this._pendingRecords = [];
-        this.viewData = [];
-        this.totalRowCount = 0;
-        this.formattedData = [];
-        this.viewColumns = [];
-        this.visibleColumns = [];
-        this.sortSettings = [];
-        this.entityRecord = null;
-        this.skip = 0;
-        this.pageSize = 40;
-        this.isLoading = false;
-        this.gridView = { data: [], total: 0 };
-        this.gridHeight = 750;
-        this.resizeSub = null;
-        this._newGridState = {};
-        this.editModeEnded = new Subject();
-        this.compareMode = false;
-        this.compareRecords = [];
-        this.selectableSettings = {
-            enabled: false
-        };
-        this.selectedKeys = [];
-        this.isDialogOpened = false;
-        this.showRefreshButton = true;
-        this.viewExecutionTime = 0;
-        this._viewDirty = false;
-        this._deferLoadCount = 0;
-        this._allowLoad = true;
-        // Export Functionality
-        this.exportColumns = [];
-        this.exportData = [];
-    }
-    SaveView() {
-        // debounced outer function...
-        clearTimeout(this._saveTimeout);
-        this._saveTimeout = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-            // when we actually call inner save view we do await
-            yield this.innerSaveView();
-        }), 5000); // 5 seconds delay
-    }
-    ;
-    innerSaveView() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._viewDirty) {
-                const md = new Metadata();
-                if (this._viewEntity &&
-                    this._viewEntity.Get('UserID') === md.CurrentUser.ID) {
-                    // this view is a saved view, AND it belongs to the current user
-                    // update the grid state if we have settings updates for columns and/or sorts
-                    const tempGridState = JSON.parse(this._viewEntity.Get('GridState'));
-                    const tempColSettings = this._newGridState.columnSettings ? this._newGridState.columnSettings : tempGridState.columnSettings;
-                    tempColSettings.forEach((col) => { col.DisplayName, col.ID, col.Name, col.hidden, col.orderIndex, col.width; }); // remove EntityFieldInfo from the column settings
-                    tempGridState.columnSettings = tempColSettings;
-                    tempGridState.sortSettings = this._newGridState.sortSettings ? this._newGridState.sortSettings : tempGridState.sortSettings;
-                    // now stringify the grid state and save it
-                    this._viewEntity.Set('GridState', JSON.stringify(tempGridState));
-                    const newSortState = tempGridState.sortSettings.map((s) => { return { field: s.field, direction: s.dir === 'asc' ? 1 : 2 }; });
-                    const oldSortState = JSON.parse(this._viewEntity.Get('SortState'));
-                    this._viewEntity.Set('SortState', JSON.stringify(newSortState));
-                    if (yield this._viewEntity.Save()) {
-                        // check to see if sort state changed and if so, refresh the grid
-                        if (JSON.stringify(newSortState) !== JSON.stringify(oldSortState)) {
-                            if (this.Params) // makes sure we have params before we refresh
-                                this.Refresh(this.Params);
-                        }
-                        this._viewDirty = false;
-                    }
-                    else {
-                        this.CreateSimpleNotification('Unable to save view settings', 'error', 5000);
-                    }
-                }
-            }
-        });
-    }
-    CreateSimpleNotification(message, style, duration) {
-        const data = {
-            message: message,
-            style: style,
-            DisplayDuration: duration
-        };
-        MJGlobal.Instance.RaiseEvent({
-            component: this,
-            event: MJEventType.DisplaySimpleNotificationRequest,
-            eventCode: "",
-            args: data
-        });
-    }
-    columnReorder(args) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Remove the column from the original position
-            // need to find the column in the viewColumns array because args.old/new Indexes are from the visibleColumns array
-            const fieldName = args.column.field;
-            if (fieldName) {
-                const vcOldIndex = this.viewColumns.findIndex((vc) => vc.Name === fieldName);
-                const vcNewIndex = this.viewColumns.findIndex((vc) => vc.orderIndex === args.newIndex);
-                if (vcOldIndex >= 0) {
-                    // got the index, now remove the element
-                    const element = this.viewColumns.splice(vcOldIndex, 1)[0];
-                    // Insert it at the new position
-                    this.viewColumns.splice(vcNewIndex, 0, element);
-                    // go through all of the columns and set orderIndex as that isn't done automatically
-                    let visColIndex = 0;
-                    for (let i = 0; i < this.viewColumns.length; i++) {
-                        if (!this.viewColumns[i].hidden) {
-                            this.viewColumns[i].orderIndex = visColIndex;
-                            visColIndex++;
-                        }
-                    }
-                    // now loop through all of the HIDDEN columns and set their orderIndex, done in second loop because we want first loop to give us total number of visible columns
-                    for (let i = 0; i < this.viewColumns.length; i++) {
-                        if (this.viewColumns[i].hidden) {
-                            this.viewColumns[i].orderIndex = visColIndex;
-                            visColIndex++;
-                        }
-                    }
-                    // make sure that _newGridState.columnSettings is set
-                    this._newGridState.columnSettings = this.viewColumns;
-                    this._viewDirty = true;
-                    this.SaveView();
-                }
-            }
-        });
-    }
-    columnResize(args) {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (const col of args) {
-                const c = col.column;
-                const viewCol = this.viewColumns.find(vc => vc.Name === c.field);
-                const visCol = this.visibleColumns.find(vc => vc.Name === c.field);
-                const visCols = this.visibleColumns;
-                if (viewCol)
-                    viewCol.width = col.newWidth;
-            }
-            this._newGridState.columnSettings = this.viewColumns.map(vc => {
-                return {
-                    Name: vc.Name,
-                    DisplayName: vc.DisplayName,
-                    width: vc.width,
-                    orderIndex: vc.orderIndex,
-                    hidden: vc.hidden
-                };
-            });
-            this._viewDirty = true;
-            this.SaveView();
-        });
-    }
-    sortChanged(sort) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this._newGridState.sortSettings = sort;
-            this.sortSettings = sort; // for the UI display - grid binding to this shows that the sort is applied via arrows in the column headers
-            if (this.IsDynamicView()) {
-                // Dynamic View, we have this.Params and can add an OrderBy and then just Refresh() the entire component
-                // that will result in going to the server for a refreshed set of data
-                if (this.Params) {
-                    this.Params.OrderBy = sort[0].field + ' ' + (sort[0].dir === 'asc' ? 'ASC' : 'DESC');
-                    this.Refresh(this.Params);
-                }
-                else {
-                    LogError("sortChanged() called but this.Params is null or undefined"); // should never get here
-                }
-            }
-            else {
-                // Saved view - we do this on the server side only
-                this._viewDirty = true;
-                this.innerSaveView(); // for sort changes we call innerSaveView() directly, not through SaveView() which is debounced  
-            }
-        });
-    }
-    cellClickHandler(args) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.compareMode)
-                return;
-            if (this._entityInfo) {
-                this.rowClicked.emit({
-                    entityId: this._entityInfo.ID,
-                    entityName: this._entityInfo.Name,
-                    recordId: args.dataItem.ID
-                });
-                if (this._entityInfo.AllowUpdateAPI &&
-                    this.EditMode !== "None") {
-                    const perm = this._entityInfo.GetUserPermisions(new Metadata().CurrentUser);
-                    if (perm.CanUpdate) {
-                        this.StartEditMode();
-                        args.sender.editCell(args.rowIndex, args.columnIndex, this.createFormGroup(args.dataItem));
-                    }
-                }
-                if (!this.InEditMode && this.AutoNavigate) {
-                    // tell app router to go to this record
-                    this.router.navigate(['resource', 'record', args.dataItem.ID], { queryParams: { Entity: this._entityInfo.Name } });
-                }
-            }
-        });
-    }
-    createFormGroup(dataItem) {
-        const groupFields = {};
-        this.viewColumns.forEach((vc) => {
-            if (vc.EntityField.AllowUpdateAPI &&
-                vc.EntityField.IsVirtual === false &&
-                vc.EntityField.AllowUpdateInView)
-                groupFields[vc.Name] = dataItem[vc.Name];
-        });
-        return this.formBuilder.group(groupFields);
-    }
-    getEditor(ef) {
-        switch (ef.TSType) {
-            case EntityFieldTSType.Boolean:
-                return "boolean";
-            case EntityFieldTSType.Date:
-                return "date";
-            case EntityFieldTSType.Number:
-                return "numeric";
-            default:
-                return "text";
-        }
-    }
-    cellCloseHandler(args) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                if (this._entityInfo && this.EditMode !== "None") {
-                    const { formGroup, dataItem } = args;
-                    if (!formGroup.valid) {
-                        // prevent closing the edited cell if there are invalid values.
-                        args.preventDefault();
-                    }
-                    else if (formGroup.dirty) {
-                        if (args.originalEvent && args.originalEvent.keyCode === Keys.Escape)
-                            return; // user hit escape, so don't save their changes
-                        // update the data item with the new values - this drives UI refresh while we save the record...
-                        Object.assign(dataItem, formGroup.value);
-                        const md = new Metadata();
-                        let record;
-                        let bSaved = false;
-                        if (this.EditMode === "Save") {
-                            record = yield md.GetEntityObject(this._entityInfo.Name);
-                            yield record.Load(dataItem.ID);
-                            record.SetMany(formGroup.value);
-                            bSaved = yield record.Save();
-                            if (!bSaved)
-                                this.CreateSimpleNotification("Error saving record: " + record.ID, 'error', 5000);
-                        }
-                        else {
-                            record = (_a = this._pendingRecords.find((r) => r.record.ID === dataItem.ID)) === null || _a === void 0 ? void 0 : _a.record;
-                            if (!record) { // haven't edited this one before 
-                                record = yield md.GetEntityObject(this._viewEntity.Get('Entity'));
-                                yield record.Load(dataItem.ID);
-                                this._pendingRecords.push({ record,
-                                    row: args.rowIndex,
-                                    dataItem }); // don't save - put the changed record on a queue for saving later by our container
-                            }
-                            // go through the formGroup and only set the values that exist as columns in the grid
-                            const keys = Object.keys(formGroup.value);
-                            keys.forEach((k) => {
-                                const vc = this.viewColumns.find((vc) => vc.Name === k && vc.hidden === false);
-                                if (vc) {
-                                    record.Set(k, formGroup.value[k]);
-                                }
-                            });
-                            //record.SetMany(formGroup.value);
-                        }
-                        this.rowEdited.emit({
-                            record: record,
-                            row: args.rowIndex,
-                            saved: bSaved
-                        });
-                    }
-                }
-            }
-            catch (e) {
-                console.error(e);
-            }
-            finally {
-                this.EndEditMode();
-            }
-        });
-    }
-    // this handles reverting pending cahnges to records WITHIN the grid, not the user view settings, unrelated to that.
-    RevertPendingChanges() {
-        if (this._pendingRecords && this._pendingRecords.length > 0) {
-            this._pendingRecords.forEach((r) => {
-                r.record.Revert();
-                Object.assign(r.dataItem, r.record.GetAll()); // copy the original values back to the data Item which gets the grid to display the old values again...
-            });
-            this._pendingRecords = [];
-            if (this.Params)
-                this.Refresh(this.Params);
-        }
-    }
-    ngOnInit() {
-    }
-    ngAfterViewInit() {
-        //this.setGridHeight();
-        if (this.Params)
-            this.Refresh(this.Params);
-    }
-    ngOnDestroy() {
-        if (this.resizeSub) {
-            this.resizeSub.unsubscribe();
-        }
-    }
-    ResizeGrid() {
-        // doesn't do anything now, handled by mjFillContainer directive
-    }
-    get AllowLoad() {
-        return this._allowLoad;
-    }
-    set AllowLoad(value) {
-        this._allowLoad = value;
-        if (value === true && this._deferLoadCount === 0) {
-            this._deferLoadCount++; // only do this one time 
-            if (this.Params)
-                this.Refresh(this.Params);
-            return;
-        }
-    }
-    RefreshFromSavedParams() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.Params)
-                this.Refresh(this.Params);
-        });
-    }
-    Refresh(params) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.Params = params;
-            if (this.AllowLoad === false) {
-                return;
-            }
-            if (params && (params.ViewEntity || params.ViewID || params.ViewName || (params.EntityName && params.ExtraFilter))) {
-                const startTime = new Date().getTime();
-                this.isLoading = true;
-                const md = new Metadata();
-                const rv = new RunView();
-                // get the view entity first so we can pass it in, otherwise it will end up getting loaded inside of RunView() which is inefficient as we need it too
-                // this is done for performance purposes
-                if (!params.ViewEntity && (params.ViewID || params.ViewName)) {
-                    if (params.ViewID && params.ViewID > 0) {
-                        this._viewEntity = (yield ViewInfo.GetViewEntity(params.ViewID));
-                        this._entityInfo = md.Entities.find(x => { var _a; return x.ID === ((_a = this._viewEntity) === null || _a === void 0 ? void 0 : _a.Get('EntityID')); });
-                    }
-                    else if (params.ViewName) {
-                        this._viewEntity = (yield ViewInfo.GetViewEntityByName(params.ViewName));
-                        this._entityInfo = md.Entities.find(x => { var _a; return x.ID === ((_a = this._viewEntity) === null || _a === void 0 ? void 0 : _a.Get('EntityID')); });
-                    }
-                    params.ViewEntity = this._viewEntity;
-                }
-                else
-                    this._viewEntity = params.ViewEntity; //passed in via params in the Refresh() function
-                const rvResult = yield rv.RunView(params);
-                if (!rvResult.Success) {
-                    // it failed
-                    this.CreateSimpleNotification("Error running view:\n\n" + rvResult.ErrorMessage, 'error', 5000);
-                }
-                else {
-                    // it worked
-                    this.viewData = rvResult.Results;
-                    this.totalRowCount = rvResult.TotalRowCount;
-                    this.formattedData = new Array(this.viewData.length);
-                    if (this._viewEntity) {
-                        // we were passed the view entity for efficiency, no need to load it again! 
-                        this._entityInfo = md.Entities.find(x => { var _a; return x.ID === ((_a = this._viewEntity) === null || _a === void 0 ? void 0 : _a.Get('EntityID')); });
-                    }
-                    else
-                        this._entityInfo = md.Entities.find(x => x.Name === params.EntityName);
-                    let cols;
-                    if (this._viewEntity)
-                        cols = this._viewEntity.Columns;
-                    else
-                        cols = (_a = this._entityInfo) === null || _a === void 0 ? void 0 : _a.Fields.filter((f) => f.DefaultInView).map((f) => {
-                            return {
-                                ID: f.ID,
-                                Name: f.Name,
-                                DisplayName: f.DisplayName,
-                                EntityField: f,
-                                hidden: false,
-                                orderIndex: f.Sequence,
-                                width: f.DefaultColumnWidth ? f.DefaultColumnWidth : 100,
-                            };
-                        });
-                    if (cols) {
-                        this.viewColumns = cols;
-                        const tempCols = cols.filter(x => x.hidden === false).sort((a, b) => {
-                            const aOrder = a.orderIndex != null ? a.orderIndex : 9999;
-                            const bOrder = b.orderIndex != null ? b.orderIndex : 9999;
-                            return aOrder - bOrder;
-                        });
-                        this.visibleColumns = tempCols;
-                    }
-                    // sorting setup
-                    if (this._viewEntity) {
-                        const temp = this._viewEntity.ViewSortInfo;
-                        const kendoSortSettings = temp.map((s) => { return { field: s.field, dir: s.direction === 1 ? 'asc' : 'desc' }; });
-                        this.sortSettings = kendoSortSettings;
-                    }
-                    this.skip = 0;
-                    this.virtualLoadData();
-                }
-                this.viewExecutionTime = (new Date().getTime() - startTime) / 1000; // in seconds
-                this.isLoading = false;
-            }
-            else {
-                LogError("Refresh(params) must have ViewID or ViewName or (EntityName and ExtraFilter)");
-            }
-        });
-    }
-    GetColumnTitle(col) {
-        if (col.DisplayName)
-            return col.DisplayName; // use view's display name first if it exists
-        else if (col.EntityField.DisplayName)
-            return col.EntityField.DisplayName; // then use entity display name, if that exist
-        else
-            return col.Name; // otherwise just use the column name
-    }
-    GetColumnCellStyle(col) {
-        switch (col.EntityField.Type.trim().toLowerCase()) {
-            case "money":
-            case 'decimal':
-            case 'real':
-            case 'float':
-            case 'int':
-                return { 'text-align': 'right', 'vertical-align': 'top' }; // right align numbers,
-            default:
-                return { 'text-align': 'left', 'vertical-align': 'top' }; // left align everything else
-        }
-    }
-    selectionChange(args) {
-        var _a, _b, _c, _d;
-        if (this.compareRecords.length && ((_a = args === null || args === void 0 ? void 0 : args.deselectedRows) === null || _a === void 0 ? void 0 : _a.length)) {
-            const tempRow = (_b = args === null || args === void 0 ? void 0 : args.deselectedRows[0]) === null || _b === void 0 ? void 0 : _b.dataItem;
-            this.compareRecords = this.compareRecords.filter(record => record.ID !== (tempRow === null || tempRow === void 0 ? void 0 : tempRow.ID));
-        }
-        else if ((_c = args === null || args === void 0 ? void 0 : args.selectedRows) === null || _c === void 0 ? void 0 : _c.length) {
-            const tempRow = (_d = args === null || args === void 0 ? void 0 : args.selectedRows[0]) === null || _d === void 0 ? void 0 : _d.dataItem;
-            this.compareRecords.push(tempRow);
-        }
-    }
-    enableCompare(cancel = false) {
-        if (!cancel && this.selectedKeys.length) {
-            this.isDialogOpened = true;
-        }
-        this.compareMode = !this.compareMode;
-        this.selectedKeys = [];
-    }
-    closeDialog() {
-        this.isDialogOpened = false;
-        this.compareRecords = [];
-    }
-    doExcelExport() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.kendoExcelExport === null)
-                throw new Error("kendoExcelExport is null, cannot export data");
-            try {
-                this.CreateSimpleNotification("Working on the export, will notify you when it is complete...", 'info', 2000);
-                const data = yield this.getExportData();
-                // we have the data.
-                const cols = this.viewColumns.filter((vc) => vc.hidden === false);
-                this.exportColumns = cols;
-                this.exportData = data;
-                // before we call the save, we need to let Angular do its thing that will result in the kendoExcelExport component binding properly to
-                // the exportColumns and exportData arrays. So we wait for the next tick before we call save()
-                setTimeout(() => {
-                    this.kendoExcelExport.save();
-                    this.CreateSimpleNotification("Excel Export Complete", 'success', 2000);
-                }, 100);
-            }
-            catch (e) {
-                this.CreateSimpleNotification("Error exporting data", 'error', 5000);
-                LogError(e);
-            }
-        });
-    }
-    getExportData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Get the data for the ENTIRE view, not just the current page
-            const md = new Metadata();
-            const rv = new RunView();
-            const p = Object.assign(Object.assign({}, this.Params), { IgnoreMaxRows: true, ForceAuditLog: true, AuditLogDescription: `Export of Data From ${this._viewEntity ? '"' + this._viewEntity.Get('Name') + '"' : ''} View for User ${md.CurrentUser.Email}` });
-            const result = yield rv.RunView(p);
-            if (result && result.Success) {
-                return result.Results;
-            }
-            else
-                throw new Error("Unable to get export data");
-        });
-    }
-}
-UserViewGridComponent.ɵfac = function UserViewGridComponent_Factory(t) { return new (t || UserViewGridComponent)(i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i2.Router)); };
-UserViewGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserViewGridComponent, selectors: [["mj-user-view-grid"]], viewQuery: function UserViewGridComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 5, GridComponent);
-        i0.ɵɵviewQuery(_c0, 5, ElementRef);
-        i0.ɵɵviewQuery(_c1, 5, ExcelExportComponent);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.kendoGridElement = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.kendoGridElementRef = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.kendoExcelExport = _t.first);
-    } }, inputs: { Params: "Params", BottomMargin: "BottomMargin", InEditMode: "InEditMode", EditMode: "EditMode", AutoNavigate: "AutoNavigate", AllowLoad: "AllowLoad" }, outputs: { rowClicked: "rowClicked", rowEdited: "rowEdited" }, decls: 10, vars: 19, consts: [["mjFillContainer", "", 1, "user-view-grid-wrap"], ["mjFillContainer", "", "scrollable", "virtual", "kendoGridSelectBy", "", 3, "resizable", "data", "skip", "pageSize", "rowHeight", "loading", "height", "sortable", "sort", "reorderable", "selectable", "selectedKeys", "pageChange", "selectedKeysChange", "cellClick", "cellClose", "columnReorder", "columnResize", "selectionChange", "sortChange"], ["kendoGrid", ""], ["kendoGridToolbarTemplate", ""], [3, "width", "headerStyle", "style", 4, "ngIf"], [3, "field", "title", "width", "editable", "editor", "headerStyle", "style", 4, "ngFor", "ngForOf"], [3, "data", "fileName"], ["excelExport", ""], [3, "field", "title", 4, "ngFor", "ngForOf"], [4, "ngIf"], ["kendoButton", "", "icon", "file-excel", 3, "disabled", "click"], ["class", "k-button k-button-md k-rounded-md k-button-solid-base k-button-solid", 3, "click", 4, "ngIf"], [1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid-base", "k-button-solid", 3, "disabled", "click"], ["kendoButton", "", "icon", "refresh", 3, "primary", "click", 4, "ngIf"], [1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid-base", "k-button-solid", 3, "click"], ["kendoButton", "", "icon", "refresh", 3, "primary", "click"], [3, "width", "headerStyle"], [3, "field", "title", "width", "editable", "editor", "headerStyle"], ["kendoGridFooterTemplate", ""], [2, "font-size", "smaller", "font-weight", "normal"], [3, "field", "title"], [1, "k-overlay"], ["title", "Compare Records", 3, "width", "minHeight", "minWidth", "resizable", "close", 4, "ngIf"], ["title", "Compare Records", 3, "width", "minHeight", "minWidth", "resizable", "close"], [1, "k-d-flex", "k-flex-col", "k-justify-content-between", "k-h-full"], [3, "recordsToCompare", "visibleColumns"]], template: function UserViewGridComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "kendo-grid", 1, 2);
-        i0.ɵɵlistener("pageChange", function UserViewGridComponent_Template_kendo_grid_pageChange_1_listener($event) { return ctx.pageChange($event); })("selectedKeysChange", function UserViewGridComponent_Template_kendo_grid_selectedKeysChange_1_listener($event) { return ctx.selectedKeys = $event; })("cellClick", function UserViewGridComponent_Template_kendo_grid_cellClick_1_listener($event) { return ctx.cellClickHandler($event); })("cellClose", function UserViewGridComponent_Template_kendo_grid_cellClose_1_listener($event) { return ctx.cellCloseHandler($event); })("columnReorder", function UserViewGridComponent_Template_kendo_grid_columnReorder_1_listener($event) { return ctx.columnReorder($event); })("columnResize", function UserViewGridComponent_Template_kendo_grid_columnResize_1_listener($event) { return ctx.columnResize($event); })("selectionChange", function UserViewGridComponent_Template_kendo_grid_selectionChange_1_listener($event) { return ctx.selectionChange($event); })("sortChange", function UserViewGridComponent_Template_kendo_grid_sortChange_1_listener($event) { return ctx.sortChanged($event); });
-        i0.ɵɵtemplate(3, UserViewGridComponent_ng_template_3_Template, 6, 4, "ng-template", 3);
-        i0.ɵɵtemplate(4, UserViewGridComponent_kendo_grid_checkbox_column_4_Template, 1, 6, "kendo-grid-checkbox-column", 4);
-        i0.ɵɵtemplate(5, UserViewGridComponent_kendo_grid_column_5_Template, 2, 10, "kendo-grid-column", 5);
-        i0.ɵɵelementStart(6, "kendo-excelexport", 6, 7);
-        i0.ɵɵtemplate(8, UserViewGridComponent_kendo_excelexport_column_8_Template, 1, 2, "kendo-excelexport-column", 8);
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵtemplate(9, UserViewGridComponent_div_9_Template, 3, 1, "div", 9);
-    } if (rf & 2) {
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("resizable", true)("data", ctx.gridView)("skip", ctx.skip)("pageSize", ctx.pageSize)("rowHeight", 36)("loading", ctx.isLoading)("height", ctx.gridHeight)("sortable", true)("sort", ctx.sortSettings)("resizable", true)("reorderable", true)("selectable", true)("selectedKeys", ctx.selectedKeys);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("ngIf", ctx.compareMode);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx.visibleColumns);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("data", ctx.exportData)("fileName", (ctx._viewEntity ? ctx._viewEntity.Get("Name") : ctx._entityInfo == null ? null : ctx._entityInfo.Name) + ".xlsx");
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngForOf", ctx.exportColumns);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx.isDialogOpened);
-    } }, dependencies: [i3.NgForOf, i3.NgIf, i4.GridComponent, i4.ToolbarTemplateDirective, i4.SelectionDirective, i4.ColumnComponent, i4.FooterTemplateDirective, i4.CheckboxColumnComponent, i5.WindowComponent, i6.ExcelExportComponent, i6.ColumnComponent, i7.Button, i3.DecimalPipe], styles: [".user-view-grid-wrap[_ngcontent-%COMP%] {\r\n    height: calc(100vh-20px);\r\n}\r\n\r\n.user-view-grid-column-header[_ngcontent-%COMP%] {\r\n    background-color: #a9c2af;\r\n    font-size: 20pt;\r\n    font-weight: bold;\r\n}"] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserViewGridComponent, [{
-        type: Component,
-        args: [{ selector: 'mj-user-view-grid', template: "<div class=\"user-view-grid-wrap\" mjFillContainer>\r\n    <kendo-grid #kendoGrid\r\n        mjFillContainer\r\n        [resizable]=\"true\"\r\n        [data]=\"gridView\" \r\n        [skip]=\"skip\"\r\n        [pageSize]=\"pageSize\"\r\n        scrollable=\"virtual\"\r\n        [rowHeight]=\"36\"\r\n        (pageChange)=\"pageChange($event)\"\r\n        [loading]=\"isLoading\"\r\n        [height]=\"gridHeight\"\r\n        [sortable]=\"true\"\r\n        [sort]=\"sortSettings\" \r\n        [resizable]=\"true\"\r\n        [reorderable]=\"true\"\r\n        [selectable]=\"true\"\r\n        kendoGridSelectBy\r\n        [(selectedKeys)]=\"selectedKeys\"\r\n        (cellClick)=\"cellClickHandler($event)\"\r\n        (cellClose)=\"cellCloseHandler($event)\"\r\n        (columnReorder)=\"columnReorder($event)\"\r\n        (columnResize)=\"columnResize($event)\"\r\n        (selectionChange)=\"selectionChange($event)\"\r\n        (sortChange)=\"sortChanged($event)\"\r\n        >\r\n        <ng-template kendoGridToolbarTemplate>\r\n            <button kendoButton icon=\"file-excel\" [disabled]=\"compareMode\" (click)=\"doExcelExport()\" >Export to Excel</button>\r\n            <button (click)=\"enableCompare(true)\" *ngIf=\"compareMode\" class=\"k-button k-button-md k-rounded-md k-button-solid-base k-button-solid\">Cancel</button>\r\n            <button (click)=\"enableCompare()\" [disabled]=\"compareMode && compareRecords.length < 2\" class=\"k-button k-button-md k-rounded-md k-button-solid-base k-button-solid\">Compare</button>\r\n            <button\r\n                kendoButton\r\n                [primary]=\"true\"\r\n                icon=\"refresh\"\r\n                *ngIf=\"showRefreshButton\"\r\n                (click)=\"RefreshFromSavedParams()\">\r\n                Refresh\r\n            </button>\r\n        </ng-template>\r\n\r\n        <kendo-grid-checkbox-column \r\n            *ngIf=\"compareMode\" \r\n            [width]=\"50\" \r\n            [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': '#a9c2af' }\" \r\n            [style]=\"{'text-align': 'center', 'vertical-align': 'center'}\">\r\n        </kendo-grid-checkbox-column>\r\n        \r\n        <kendo-grid-column \r\n            *ngFor=\"let item of visibleColumns\" \r\n            [field]=\"item.Name\" \r\n            [title]=\"GetColumnTitle(item)\"\r\n            [width]=\"item.width ? item.width : 100\"\r\n            [editable]=\"item.EntityField.AllowUpdateAPI\"\r\n            [editor]=\"getEditor(item.EntityField)\"\r\n            [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': '#a9c2af' }\"\r\n            [style]=\"this.GetColumnCellStyle(item)\"\r\n            >\r\n            <ng-template *ngIf=\"item===visibleColumns[0]\" kendoGridFooterTemplate >\r\n                {{this.viewData.length | number}}{{this.totalRowCount > this.viewData.length ? ' of ' + (this.totalRowCount | number) : ' rows'}}<br/><span style=\"font-size: smaller; font-weight: normal;\">{{viewExecutionTime | number:'1.2-2'}} seconds</span>\r\n            </ng-template>\r\n        </kendo-grid-column>\r\n\r\n        <kendo-excelexport #excelExport [data]=\"exportData\" [fileName]=\"(_viewEntity ? _viewEntity.Get('Name') : _entityInfo?.Name) + '.xlsx'\">\r\n            <kendo-excelexport-column *ngFor=\"let exportCol of exportColumns\" [field]=\"exportCol.Name\" [title]=\"exportCol.Name\">\r\n            </kendo-excelexport-column>\r\n        </kendo-excelexport>\r\n    </kendo-grid>\r\n</div>\r\n\r\n<div *ngIf=\"isDialogOpened\">\r\n    <div class=\"k-overlay\"></div>\r\n    <kendo-window\r\n      [width]=\"900\"\r\n      [minHeight]=\"300\"\r\n      [minWidth]=\"400\"\r\n      [resizable]=\"true\"\r\n      (close)=\"closeDialog()\"\r\n      title=\"Compare Records\"\r\n      *ngIf=\"isDialogOpened\"\r\n    >\r\n      <div class=\"k-d-flex k-flex-col k-justify-content-between k-h-full\">\r\n        <div>\r\n            <mj-record-compare [recordsToCompare]=\"compareRecords\" [visibleColumns]=\"visibleColumns\" ></mj-record-compare>\r\n        </div>\r\n      </div>\r\n    </kendo-window>\r\n</div>\r\n  ", styles: [".user-view-grid-wrap {\r\n    height: calc(100vh-20px);\r\n}\r\n\r\n.user-view-grid-column-header {\r\n    background-color: #a9c2af;\r\n    font-size: 20pt;\r\n    font-weight: bold;\r\n}"] }]
-    }], function () { return [{ type: i1.FormBuilder }, { type: i2.Router }]; }, { Params: [{
-            type: Input
-        }], BottomMargin: [{
-            type: Input
-        }], InEditMode: [{
-            type: Input
-        }], EditMode: [{
-            type: Input
-        }], AutoNavigate: [{
-            type: Input
-        }], rowClicked: [{
-            type: Output
-        }], rowEdited: [{
-            type: Output
-        }], kendoGridElement: [{
-            type: ViewChild,
-            args: ['kendoGrid', { read: GridComponent }]
-        }], kendoGridElementRef: [{
-            type: ViewChild,
-            args: ['kendoGrid', { read: ElementRef }]
-        }], kendoExcelExport: [{
-            type: ViewChild,
-            args: ['excelExport', { read: ExcelExportComponent }]
-        }], AllowLoad: [{
-            type: Input
-        }] }); })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, ViewChild, ElementRef, Output, EventEmitter, Input } from '@angular/core';
+import { Metadata, RunView, EntityFieldTSType, LogError, ViewInfo } from '@memberjunction/core';
+import { GridComponent } from "@progress/kendo-angular-grid";
+import { Keys } from '@progress/kendo-angular-common';
+import { Subject } from 'rxjs';
+import { ExcelExportComponent } from '@progress/kendo-angular-excel-export';
+import { MJEventType, MJGlobal } from '@memberjunction/global';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@angular/router";
+import * as i3 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-grid";
+import * as i5 from "@progress/kendo-angular-dialog";
+import * as i6 from "@progress/kendo-angular-excel-export";
+import * as i7 from "@progress/kendo-angular-buttons";
+const _c0 = ["kendoGrid"];
+const _c1 = ["excelExport"];
+function UserViewGridComponent_ng_template_3_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function UserViewGridComponent_ng_template_3_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.enableCompare(true)); });
+    i0.ɵɵtext(1, "Cancel");
+    i0.ɵɵelementEnd();
+} }
+function UserViewGridComponent_ng_template_3_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function UserViewGridComponent_ng_template_3_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r11.RefreshFromSavedParams()); });
+    i0.ɵɵtext(1, " Refresh ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("primary", true);
+} }
+function UserViewGridComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("click", function UserViewGridComponent_ng_template_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.doExcelExport()); });
+    i0.ɵɵtext(1, "Export to Excel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(2, UserViewGridComponent_ng_template_3_button_2_Template, 2, 0, "button", 11);
+    i0.ɵɵelementStart(3, "button", 12);
+    i0.ɵɵlistener("click", function UserViewGridComponent_ng_template_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r14); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.enableCompare()); });
+    i0.ɵɵtext(4, "Compare");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, UserViewGridComponent_ng_template_3_button_5_Template, 2, 1, "button", 13);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", ctx_r1.compareMode);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.compareMode);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("disabled", ctx_r1.compareMode && ctx_r1.compareRecords.length < 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.showRefreshButton);
+} }
+const _c2 = function () { return { "text-align": "center", "vertical-align": "center" }; };
+const _c3 = function () { return { "font-weight": "bold", "background-color": "#a9c2af" }; };
+function UserViewGridComponent_kendo_grid_checkbox_column_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-grid-checkbox-column", 16);
+} if (rf & 2) {
+    i0.ɵɵstyleMap(i0.ɵɵpureFunction0(4, _c2));
+    i0.ɵɵproperty("width", 50)("headerStyle", i0.ɵɵpureFunction0(5, _c3));
+} }
+function UserViewGridComponent_kendo_grid_column_5_1_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+    i0.ɵɵpipe(1, "number");
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵelement(3, "br");
+    i0.ɵɵelementStart(4, "span", 19);
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r18 = i0.ɵɵnextContext(3);
+    i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind1(1, 3, ctx_r18.viewData.length), "", ctx_r18.totalRowCount > ctx_r18.viewData.length ? " of " + i0.ɵɵpipeBind1(2, 5, ctx_r18.totalRowCount) : " rows", "");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(6, 7, ctx_r18.viewExecutionTime, "1.2-2"), " seconds");
+} }
+function UserViewGridComponent_kendo_grid_column_5_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, UserViewGridComponent_kendo_grid_column_5_1_ng_template_0_Template, 7, 10, "ng-template", 18);
+} }
+function UserViewGridComponent_kendo_grid_column_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-grid-column", 17);
+    i0.ɵɵtemplate(1, UserViewGridComponent_kendo_grid_column_5_1_Template, 1, 0, null, 9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r16 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleMap(ctx_r3.GetColumnCellStyle(item_r16));
+    i0.ɵɵproperty("field", item_r16.Name)("title", ctx_r3.GetColumnTitle(item_r16))("width", item_r16.width ? item_r16.width : 100)("editable", item_r16.EntityField.AllowUpdateAPI)("editor", ctx_r3.getEditor(item_r16.EntityField))("headerStyle", i0.ɵɵpureFunction0(9, _c3));
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("ngIf", item_r16 === ctx_r3.visibleColumns[0]);
+} }
+function UserViewGridComponent_kendo_excelexport_column_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-excelexport-column", 20);
+} if (rf & 2) {
+    const exportCol_r19 = ctx.$implicit;
+    i0.ɵɵproperty("field", exportCol_r19.Name)("title", exportCol_r19.Name);
+} }
+function UserViewGridComponent_div_9_kendo_window_2_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-window", 23);
+    i0.ɵɵlistener("close", function UserViewGridComponent_div_9_kendo_window_2_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r21 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r21.closeDialog()); });
+    i0.ɵɵelementStart(1, "div", 24)(2, "div");
+    i0.ɵɵelement(3, "mj-record-compare", 25);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r20 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("width", 900)("minHeight", 300)("minWidth", 400)("resizable", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("recordsToCompare", ctx_r20.compareRecords)("visibleColumns", ctx_r20.visibleColumns);
+} }
+function UserViewGridComponent_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "div", 21);
+    i0.ɵɵtemplate(2, UserViewGridComponent_div_9_kendo_window_2_Template, 4, 6, "kendo-window", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r6.isDialogOpened);
+} }
+export class UserViewGridComponent {
+    get PendingRecords() {
+        return this._pendingRecords;
+    }
+    StartEditMode() {
+        this.InEditMode = true;
+    }
+    EndEditMode() {
+        this.InEditMode = false;
+        this.editModeEnded.next();
+    }
+    EditingComplete() {
+        if (this.InEditMode) {
+            // we need to wait for edit mode to end before we can return true
+            return new Promise((resolve, reject) => {
+                const subscription = this.editModeEnded.subscribe(() => {
+                    resolve(true);
+                    subscription.unsubscribe();
+                });
+            });
+        }
+        else
+            return Promise.resolve(true); // not in edit mode, so editing is complete!
+    }
+    IsDynamicView() {
+        return !this._viewEntity; // if we have a viewEntity it is a stored view
+    }
+    pageChange(event) {
+        this.skip = event.skip;
+        this.virtualLoadData();
+    }
+    virtualLoadData() {
+        // check to see if we have already formatted the slice of the data we need right now
+        // we are storing the formattted data in the formattedData array and it has same set
+        // of indexes as the viewData array (raw unformatted data). When we first get viewData
+        // from the server we create an array of the same length as viewData, but have nulls in all of the 
+        // indexes. As we format each row of viewData we store the formatted row in the same index
+        // in the formattedData array. So if we have already formatted the data we need for the current
+        // page, we just use that data, otherwise we format the data we need for the current page
+        try {
+            // check to see if we have already formatted the data we need for the current page
+            for (let i = this.skip; (i < (this.skip + this.pageSize)) && (i < this.viewData.length); i++) {
+                if (!this.formattedData[i]) {
+                    // we have not formatted this row yet, so format it
+                    const r = this.viewColumns.map((c) => {
+                        if (c && c.EntityField && this.viewData[i] && this.viewData[i][c.EntityField.Name]) {
+                            if (!c.hidden && c.EntityField.Name !== 'ID') {
+                                const ef = c.EntityField;
+                                return { field: c.EntityField.Name, value: ef.FormatValue(this.viewData[i][c.EntityField.Name], undefined, undefined, 300) };
+                            }
+                            else
+                                return { field: c.EntityField.Name, value: this.viewData[i][c.EntityField.Name] }; // hidden column, so just return the value, don't bother formatting
+                        }
+                        else
+                            return { field: c.Name, value: null };
+                    });
+                    // now r is an array of {field: string, value: any} objects, so we need to convert it to an object
+                    // with the field names as the keys and the values as the values
+                    const row = {};
+                    for (let j = 0; j < r.length; j++) {
+                        if (r[j] && r[j].field && r[j].field.length > 0)
+                            row[r[j].field] = r[j].value;
+                    }
+                    this.formattedData[i] = row;
+                }
+            }
+            // now that we have made sure current page of data is formatted, we can return it
+            this.gridView = {
+                data: this.formattedData.slice(this.skip, this.skip + this.pageSize),
+                total: this.viewData.length,
+            };
+        }
+        catch (e) {
+            LogError(e);
+        }
+    }
+    constructor(formBuilder, router) {
+        this.formBuilder = formBuilder;
+        this.router = router;
+        this.title = 'UserViewGrid';
+        this.BottomMargin = 0;
+        this.InEditMode = false;
+        this.EditMode = "None";
+        this.AutoNavigate = true;
+        this.rowClicked = new EventEmitter();
+        this.rowEdited = new EventEmitter();
+        this.kendoGridElement = null;
+        this.kendoGridElementRef = null;
+        this.kendoExcelExport = null;
+        this._pendingRecords = [];
+        this.viewData = [];
+        this.totalRowCount = 0;
+        this.formattedData = [];
+        this.viewColumns = [];
+        this.visibleColumns = [];
+        this.sortSettings = [];
+        this.entityRecord = null;
+        this.skip = 0;
+        this.pageSize = 40;
+        this.isLoading = false;
+        this.gridView = { data: [], total: 0 };
+        this.gridHeight = 750;
+        this._newGridState = {};
+        this.editModeEnded = new Subject();
+        this.compareMode = false;
+        this.compareRecords = [];
+        this.selectableSettings = {
+            enabled: false
+        };
+        this.selectedKeys = [];
+        this.isDialogOpened = false;
+        this.showRefreshButton = true;
+        this.viewExecutionTime = 0;
+        this._viewDirty = false;
+        this._deferLoadCount = 0;
+        this._allowLoad = true;
+        // Export Functionality
+        this.exportColumns = [];
+        this.exportData = [];
+    }
+    SaveView() {
+        // debounced outer function...
+        clearTimeout(this._saveTimeout);
+        this._saveTimeout = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+            // when we actually call inner save view we do await
+            yield this.innerSaveView();
+        }), 5000); // 5 seconds delay
+    }
+    ;
+    innerSaveView() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._viewDirty) {
+                const md = new Metadata();
+                if (this._viewEntity &&
+                    this._viewEntity.Get('UserID') === md.CurrentUser.ID) {
+                    // this view is a saved view, AND it belongs to the current user
+                    // update the grid state if we have settings updates for columns and/or sorts
+                    const tempGridState = JSON.parse(this._viewEntity.Get('GridState'));
+                    const tempColSettings = this._newGridState.columnSettings ? this._newGridState.columnSettings : tempGridState.columnSettings;
+                    tempColSettings.forEach((col) => { col.DisplayName, col.ID, col.Name, col.hidden, col.orderIndex, col.width; }); // remove EntityFieldInfo from the column settings
+                    tempGridState.columnSettings = tempColSettings;
+                    tempGridState.sortSettings = this._newGridState.sortSettings ? this._newGridState.sortSettings : tempGridState.sortSettings;
+                    // now stringify the grid state and save it
+                    this._viewEntity.Set('GridState', JSON.stringify(tempGridState));
+                    const newSortState = tempGridState.sortSettings.map((s) => { return { field: s.field, direction: s.dir === 'asc' ? 1 : 2 }; });
+                    const oldSortState = JSON.parse(this._viewEntity.Get('SortState'));
+                    this._viewEntity.Set('SortState', JSON.stringify(newSortState));
+                    if (yield this._viewEntity.Save()) {
+                        // check to see if sort state changed and if so, refresh the grid
+                        if (JSON.stringify(newSortState) !== JSON.stringify(oldSortState)) {
+                            if (this.Params) // makes sure we have params before we refresh
+                                this.Refresh(this.Params);
+                        }
+                        this._viewDirty = false;
+                    }
+                    else {
+                        this.CreateSimpleNotification('Unable to save view settings', 'error', 5000);
+                    }
+                }
+            }
+        });
+    }
+    CreateSimpleNotification(message, style, duration) {
+        const data = {
+            message: message,
+            style: style,
+            DisplayDuration: duration
+        };
+        MJGlobal.Instance.RaiseEvent({
+            component: this,
+            event: MJEventType.DisplaySimpleNotificationRequest,
+            eventCode: "",
+            args: data
+        });
+    }
+    columnReorder(args) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Remove the column from the original position
+            // need to find the column in the viewColumns array because args.old/new Indexes are from the visibleColumns array
+            const fieldName = args.column.field;
+            if (fieldName) {
+                const vcOldIndex = this.viewColumns.findIndex((vc) => vc.Name === fieldName);
+                const vcNewIndex = this.viewColumns.findIndex((vc) => vc.orderIndex === args.newIndex);
+                if (vcOldIndex >= 0) {
+                    // got the index, now remove the element
+                    const element = this.viewColumns.splice(vcOldIndex, 1)[0];
+                    // Insert it at the new position
+                    this.viewColumns.splice(vcNewIndex, 0, element);
+                    // go through all of the columns and set orderIndex as that isn't done automatically
+                    let visColIndex = 0;
+                    for (let i = 0; i < this.viewColumns.length; i++) {
+                        if (!this.viewColumns[i].hidden) {
+                            this.viewColumns[i].orderIndex = visColIndex;
+                            visColIndex++;
+                        }
+                    }
+                    // now loop through all of the HIDDEN columns and set their orderIndex, done in second loop because we want first loop to give us total number of visible columns
+                    for (let i = 0; i < this.viewColumns.length; i++) {
+                        if (this.viewColumns[i].hidden) {
+                            this.viewColumns[i].orderIndex = visColIndex;
+                            visColIndex++;
+                        }
+                    }
+                    // make sure that _newGridState.columnSettings is set
+                    this._newGridState.columnSettings = this.viewColumns;
+                    this._viewDirty = true;
+                    this.SaveView();
+                }
+            }
+        });
+    }
+    columnResize(args) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const col of args) {
+                const c = col.column;
+                const viewCol = this.viewColumns.find(vc => vc.Name === c.field);
+                const visCol = this.visibleColumns.find(vc => vc.Name === c.field);
+                const visCols = this.visibleColumns;
+                if (viewCol)
+                    viewCol.width = col.newWidth;
+            }
+            this._newGridState.columnSettings = this.viewColumns.map(vc => {
+                return {
+                    Name: vc.Name,
+                    DisplayName: vc.DisplayName,
+                    width: vc.width,
+                    orderIndex: vc.orderIndex,
+                    hidden: vc.hidden
+                };
+            });
+            this._viewDirty = true;
+            this.SaveView();
+        });
+    }
+    sortChanged(sort) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._newGridState.sortSettings = sort;
+            this.sortSettings = sort; // for the UI display - grid binding to this shows that the sort is applied via arrows in the column headers
+            if (this.IsDynamicView()) {
+                // Dynamic View, we have this.Params and can add an OrderBy and then just Refresh() the entire component
+                // that will result in going to the server for a refreshed set of data
+                if (this.Params) {
+                    this.Params.OrderBy = sort[0].field + ' ' + (sort[0].dir === 'asc' ? 'ASC' : 'DESC');
+                    this.Refresh(this.Params);
+                }
+                else {
+                    LogError("sortChanged() called but this.Params is null or undefined"); // should never get here
+                }
+            }
+            else {
+                // Saved view - we do this on the server side only
+                this._viewDirty = true;
+                this.innerSaveView(); // for sort changes we call innerSaveView() directly, not through SaveView() which is debounced  
+            }
+        });
+    }
+    cellClickHandler(args) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.compareMode)
+                return;
+            if (this._entityInfo) {
+                this.rowClicked.emit({
+                    entityId: this._entityInfo.ID,
+                    entityName: this._entityInfo.Name,
+                    recordId: args.dataItem.ID
+                });
+                if (this._entityInfo.AllowUpdateAPI &&
+                    this.EditMode !== "None") {
+                    const perm = this._entityInfo.GetUserPermisions(new Metadata().CurrentUser);
+                    if (perm.CanUpdate) {
+                        this.StartEditMode();
+                        args.sender.editCell(args.rowIndex, args.columnIndex, this.createFormGroup(args.dataItem));
+                    }
+                }
+                if (!this.InEditMode && this.AutoNavigate) {
+                    // tell app router to go to this record
+                    this.router.navigate(['resource', 'record', args.dataItem.ID], { queryParams: { Entity: this._entityInfo.Name } });
+                }
+            }
+        });
+    }
+    createFormGroup(dataItem) {
+        const groupFields = {};
+        this.viewColumns.forEach((vc) => {
+            if (vc.EntityField.AllowUpdateAPI &&
+                vc.EntityField.IsVirtual === false &&
+                vc.EntityField.AllowUpdateInView)
+                groupFields[vc.Name] = dataItem[vc.Name];
+        });
+        return this.formBuilder.group(groupFields);
+    }
+    getEditor(ef) {
+        switch (ef.TSType) {
+            case EntityFieldTSType.Boolean:
+                return "boolean";
+            case EntityFieldTSType.Date:
+                return "date";
+            case EntityFieldTSType.Number:
+                return "numeric";
+            default:
+                return "text";
+        }
+    }
+    cellCloseHandler(args) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (this._entityInfo && this.EditMode !== "None") {
+                    const { formGroup, dataItem } = args;
+                    if (!formGroup.valid) {
+                        // prevent closing the edited cell if there are invalid values.
+                        args.preventDefault();
+                    }
+                    else if (formGroup.dirty) {
+                        if (args.originalEvent && args.originalEvent.keyCode === Keys.Escape)
+                            return; // user hit escape, so don't save their changes
+                        // update the data item with the new values - this drives UI refresh while we save the record...
+                        Object.assign(dataItem, formGroup.value);
+                        const md = new Metadata();
+                        let record;
+                        let bSaved = false;
+                        if (this.EditMode === "Save") {
+                            record = yield md.GetEntityObject(this._entityInfo.Name);
+                            yield record.Load(dataItem.ID);
+                            record.SetMany(formGroup.value);
+                            bSaved = yield record.Save();
+                            if (!bSaved)
+                                this.CreateSimpleNotification("Error saving record: " + record.ID, 'error', 5000);
+                        }
+                        else {
+                            record = (_a = this._pendingRecords.find((r) => r.record.ID === dataItem.ID)) === null || _a === void 0 ? void 0 : _a.record;
+                            if (!record) { // haven't edited this one before 
+                                record = yield md.GetEntityObject(this._viewEntity.Get('Entity'));
+                                yield record.Load(dataItem.ID);
+                                this._pendingRecords.push({ record,
+                                    row: args.rowIndex,
+                                    dataItem }); // don't save - put the changed record on a queue for saving later by our container
+                            }
+                            // go through the formGroup and only set the values that exist as columns in the grid
+                            const keys = Object.keys(formGroup.value);
+                            keys.forEach((k) => {
+                                const vc = this.viewColumns.find((vc) => vc.Name === k && vc.hidden === false);
+                                if (vc) {
+                                    record.Set(k, formGroup.value[k]);
+                                }
+                            });
+                            //record.SetMany(formGroup.value);
+                        }
+                        this.rowEdited.emit({
+                            record: record,
+                            row: args.rowIndex,
+                            saved: bSaved
+                        });
+                    }
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+            finally {
+                this.EndEditMode();
+            }
+        });
+    }
+    // this handles reverting pending cahnges to records WITHIN the grid, not the user view settings, unrelated to that.
+    RevertPendingChanges() {
+        if (this._pendingRecords && this._pendingRecords.length > 0) {
+            this._pendingRecords.forEach((r) => {
+                r.record.Revert();
+                Object.assign(r.dataItem, r.record.GetAll()); // copy the original values back to the data Item which gets the grid to display the old values again...
+            });
+            this._pendingRecords = [];
+            if (this.Params)
+                this.Refresh(this.Params);
+        }
+    }
+    ngOnInit() {
+    }
+    ngAfterViewInit() {
+        //this.setGridHeight();
+        if (this.Params)
+            this.Refresh(this.Params);
+    }
+    get AllowLoad() {
+        return this._allowLoad;
+    }
+    set AllowLoad(value) {
+        this._allowLoad = value;
+        if (value === true && this._deferLoadCount === 0) {
+            this._deferLoadCount++; // only do this one time 
+            if (this.Params)
+                this.Refresh(this.Params);
+            return;
+        }
+    }
+    RefreshFromSavedParams() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.Params)
+                this.Refresh(this.Params);
+        });
+    }
+    Refresh(params) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.Params = params;
+            if (this.AllowLoad === false) {
+                return;
+            }
+            if (params && (params.ViewEntity || params.ViewID || params.ViewName || (params.EntityName && params.ExtraFilter))) {
+                const startTime = new Date().getTime();
+                this.isLoading = true;
+                const md = new Metadata();
+                const rv = new RunView();
+                // get the view entity first so we can pass it in, otherwise it will end up getting loaded inside of RunView() which is inefficient as we need it too
+                // this is done for performance purposes
+                if (!params.ViewEntity && (params.ViewID || params.ViewName)) {
+                    if (params.ViewID && params.ViewID > 0) {
+                        this._viewEntity = (yield ViewInfo.GetViewEntity(params.ViewID));
+                        this._entityInfo = md.Entities.find(x => { var _a; return x.ID === ((_a = this._viewEntity) === null || _a === void 0 ? void 0 : _a.Get('EntityID')); });
+                    }
+                    else if (params.ViewName) {
+                        this._viewEntity = (yield ViewInfo.GetViewEntityByName(params.ViewName));
+                        this._entityInfo = md.Entities.find(x => { var _a; return x.ID === ((_a = this._viewEntity) === null || _a === void 0 ? void 0 : _a.Get('EntityID')); });
+                    }
+                    params.ViewEntity = this._viewEntity;
+                }
+                else
+                    this._viewEntity = params.ViewEntity; //passed in via params in the Refresh() function
+                const rvResult = yield rv.RunView(params);
+                if (!rvResult.Success) {
+                    // it failed
+                    this.CreateSimpleNotification("Error running view:\n\n" + rvResult.ErrorMessage, 'error', 5000);
+                }
+                else {
+                    // it worked
+                    this.viewData = rvResult.Results;
+                    this.totalRowCount = rvResult.TotalRowCount;
+                    this.formattedData = new Array(this.viewData.length);
+                    if (this._viewEntity) {
+                        // we were passed the view entity for efficiency, no need to load it again! 
+                        this._entityInfo = md.Entities.find(x => { var _a; return x.ID === ((_a = this._viewEntity) === null || _a === void 0 ? void 0 : _a.Get('EntityID')); });
+                    }
+                    else
+                        this._entityInfo = md.Entities.find(x => x.Name === params.EntityName);
+                    let cols;
+                    if (this._viewEntity)
+                        cols = this._viewEntity.Columns;
+                    else
+                        cols = (_a = this._entityInfo) === null || _a === void 0 ? void 0 : _a.Fields.filter((f) => f.DefaultInView).map((f) => {
+                            return {
+                                ID: f.ID,
+                                Name: f.Name,
+                                DisplayName: f.DisplayName,
+                                EntityField: f,
+                                hidden: false,
+                                orderIndex: f.Sequence,
+                                width: f.DefaultColumnWidth ? f.DefaultColumnWidth : 100,
+                            };
+                        });
+                    if (cols) {
+                        this.viewColumns = cols;
+                        const tempCols = cols.filter(x => x.hidden === false).sort((a, b) => {
+                            const aOrder = a.orderIndex != null ? a.orderIndex : 9999;
+                            const bOrder = b.orderIndex != null ? b.orderIndex : 9999;
+                            return aOrder - bOrder;
+                        });
+                        this.visibleColumns = tempCols;
+                    }
+                    // sorting setup
+                    if (this._viewEntity) {
+                        const temp = this._viewEntity.ViewSortInfo;
+                        const kendoSortSettings = temp.map((s) => { return { field: s.field, dir: s.direction === 1 ? 'asc' : 'desc' }; });
+                        this.sortSettings = kendoSortSettings;
+                    }
+                    this.skip = 0;
+                    this.virtualLoadData();
+                }
+                this.viewExecutionTime = (new Date().getTime() - startTime) / 1000; // in seconds
+                this.isLoading = false;
+            }
+            else {
+                LogError("Refresh(params) must have ViewID or ViewName or (EntityName and ExtraFilter)");
+            }
+        });
+    }
+    GetColumnTitle(col) {
+        if (col.DisplayName)
+            return col.DisplayName; // use view's display name first if it exists
+        else if (col.EntityField.DisplayName)
+            return col.EntityField.DisplayName; // then use entity display name, if that exist
+        else
+            return col.Name; // otherwise just use the column name
+    }
+    GetColumnCellStyle(col) {
+        switch (col.EntityField.Type.trim().toLowerCase()) {
+            case "money":
+            case 'decimal':
+            case 'real':
+            case 'float':
+            case 'int':
+                return { 'text-align': 'right', 'vertical-align': 'top' }; // right align numbers,
+            default:
+                return { 'text-align': 'left', 'vertical-align': 'top' }; // left align everything else
+        }
+    }
+    selectionChange(args) {
+        var _a, _b, _c, _d;
+        if (this.compareRecords.length && ((_a = args === null || args === void 0 ? void 0 : args.deselectedRows) === null || _a === void 0 ? void 0 : _a.length)) {
+            const tempRow = (_b = args === null || args === void 0 ? void 0 : args.deselectedRows[0]) === null || _b === void 0 ? void 0 : _b.dataItem;
+            this.compareRecords = this.compareRecords.filter(record => record.ID !== (tempRow === null || tempRow === void 0 ? void 0 : tempRow.ID));
+        }
+        else if ((_c = args === null || args === void 0 ? void 0 : args.selectedRows) === null || _c === void 0 ? void 0 : _c.length) {
+            const tempRow = (_d = args === null || args === void 0 ? void 0 : args.selectedRows[0]) === null || _d === void 0 ? void 0 : _d.dataItem;
+            this.compareRecords.push(tempRow);
+        }
+    }
+    enableCompare(cancel = false) {
+        if (!cancel && this.selectedKeys.length) {
+            this.isDialogOpened = true;
+        }
+        this.compareMode = !this.compareMode;
+        this.selectedKeys = [];
+    }
+    closeDialog() {
+        this.isDialogOpened = false;
+        this.compareRecords = [];
+    }
+    doExcelExport() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.kendoExcelExport === null)
+                throw new Error("kendoExcelExport is null, cannot export data");
+            try {
+                this.CreateSimpleNotification("Working on the export, will notify you when it is complete...", 'info', 2000);
+                const data = yield this.getExportData();
+                // we have the data.
+                const cols = this.viewColumns.filter((vc) => vc.hidden === false);
+                this.exportColumns = cols;
+                this.exportData = data;
+                // before we call the save, we need to let Angular do its thing that will result in the kendoExcelExport component binding properly to
+                // the exportColumns and exportData arrays. So we wait for the next tick before we call save()
+                setTimeout(() => {
+                    this.kendoExcelExport.save();
+                    this.CreateSimpleNotification("Excel Export Complete", 'success', 2000);
+                }, 100);
+            }
+            catch (e) {
+                this.CreateSimpleNotification("Error exporting data", 'error', 5000);
+                LogError(e);
+            }
+        });
+    }
+    getExportData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Get the data for the ENTIRE view, not just the current page
+            const md = new Metadata();
+            const rv = new RunView();
+            const p = Object.assign(Object.assign({}, this.Params), { IgnoreMaxRows: true, ForceAuditLog: true, AuditLogDescription: `Export of Data From ${this._viewEntity ? '"' + this._viewEntity.Get('Name') + '"' : ''} View for User ${md.CurrentUser.Email}` });
+            const result = yield rv.RunView(p);
+            if (result && result.Success) {
+                return result.Results;
+            }
+            else
+                throw new Error("Unable to get export data");
+        });
+    }
+}
+UserViewGridComponent.ɵfac = function UserViewGridComponent_Factory(t) { return new (t || UserViewGridComponent)(i0.ɵɵdirectiveInject(i1.FormBuilder), i0.ɵɵdirectiveInject(i2.Router)); };
+UserViewGridComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserViewGridComponent, selectors: [["mj-user-view-grid"]], viewQuery: function UserViewGridComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5, GridComponent);
+        i0.ɵɵviewQuery(_c0, 5, ElementRef);
+        i0.ɵɵviewQuery(_c1, 5, ExcelExportComponent);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.kendoGridElement = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.kendoGridElementRef = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.kendoExcelExport = _t.first);
+    } }, inputs: { Params: "Params", BottomMargin: "BottomMargin", InEditMode: "InEditMode", EditMode: "EditMode", AutoNavigate: "AutoNavigate", AllowLoad: "AllowLoad" }, outputs: { rowClicked: "rowClicked", rowEdited: "rowEdited" }, decls: 10, vars: 19, consts: [["mjFillContainer", "", 1, "user-view-grid-wrap"], ["mjFillContainer", "", "scrollable", "virtual", "kendoGridSelectBy", "", 3, "resizable", "data", "skip", "pageSize", "rowHeight", "loading", "height", "sortable", "sort", "reorderable", "selectable", "selectedKeys", "pageChange", "selectedKeysChange", "cellClick", "cellClose", "columnReorder", "columnResize", "selectionChange", "sortChange"], ["kendoGrid", ""], ["kendoGridToolbarTemplate", ""], [3, "width", "headerStyle", "style", 4, "ngIf"], [3, "field", "title", "width", "editable", "editor", "headerStyle", "style", 4, "ngFor", "ngForOf"], [3, "data", "fileName"], ["excelExport", ""], [3, "field", "title", 4, "ngFor", "ngForOf"], [4, "ngIf"], ["kendoButton", "", "icon", "file-excel", 3, "disabled", "click"], ["class", "k-button k-button-md k-rounded-md k-button-solid-base k-button-solid", 3, "click", 4, "ngIf"], [1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid-base", "k-button-solid", 3, "disabled", "click"], ["kendoButton", "", "icon", "refresh", 3, "primary", "click", 4, "ngIf"], [1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid-base", "k-button-solid", 3, "click"], ["kendoButton", "", "icon", "refresh", 3, "primary", "click"], [3, "width", "headerStyle"], [3, "field", "title", "width", "editable", "editor", "headerStyle"], ["kendoGridFooterTemplate", ""], [2, "font-size", "smaller", "font-weight", "normal"], [3, "field", "title"], [1, "k-overlay"], ["title", "Compare Records", 3, "width", "minHeight", "minWidth", "resizable", "close", 4, "ngIf"], ["title", "Compare Records", 3, "width", "minHeight", "minWidth", "resizable", "close"], [1, "k-d-flex", "k-flex-col", "k-justify-content-between", "k-h-full"], [3, "recordsToCompare", "visibleColumns"]], template: function UserViewGridComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "kendo-grid", 1, 2);
+        i0.ɵɵlistener("pageChange", function UserViewGridComponent_Template_kendo_grid_pageChange_1_listener($event) { return ctx.pageChange($event); })("selectedKeysChange", function UserViewGridComponent_Template_kendo_grid_selectedKeysChange_1_listener($event) { return ctx.selectedKeys = $event; })("cellClick", function UserViewGridComponent_Template_kendo_grid_cellClick_1_listener($event) { return ctx.cellClickHandler($event); })("cellClose", function UserViewGridComponent_Template_kendo_grid_cellClose_1_listener($event) { return ctx.cellCloseHandler($event); })("columnReorder", function UserViewGridComponent_Template_kendo_grid_columnReorder_1_listener($event) { return ctx.columnReorder($event); })("columnResize", function UserViewGridComponent_Template_kendo_grid_columnResize_1_listener($event) { return ctx.columnResize($event); })("selectionChange", function UserViewGridComponent_Template_kendo_grid_selectionChange_1_listener($event) { return ctx.selectionChange($event); })("sortChange", function UserViewGridComponent_Template_kendo_grid_sortChange_1_listener($event) { return ctx.sortChanged($event); });
+        i0.ɵɵtemplate(3, UserViewGridComponent_ng_template_3_Template, 6, 4, "ng-template", 3);
+        i0.ɵɵtemplate(4, UserViewGridComponent_kendo_grid_checkbox_column_4_Template, 1, 6, "kendo-grid-checkbox-column", 4);
+        i0.ɵɵtemplate(5, UserViewGridComponent_kendo_grid_column_5_Template, 2, 10, "kendo-grid-column", 5);
+        i0.ɵɵelementStart(6, "kendo-excelexport", 6, 7);
+        i0.ɵɵtemplate(8, UserViewGridComponent_kendo_excelexport_column_8_Template, 1, 2, "kendo-excelexport-column", 8);
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵtemplate(9, UserViewGridComponent_div_9_Template, 3, 1, "div", 9);
+    } if (rf & 2) {
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("resizable", true)("data", ctx.gridView)("skip", ctx.skip)("pageSize", ctx.pageSize)("rowHeight", 36)("loading", ctx.isLoading)("height", ctx.gridHeight)("sortable", true)("sort", ctx.sortSettings)("resizable", true)("reorderable", true)("selectable", true)("selectedKeys", ctx.selectedKeys);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngIf", ctx.compareMode);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngForOf", ctx.visibleColumns);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("data", ctx.exportData)("fileName", (ctx._viewEntity ? ctx._viewEntity.Get("Name") : ctx._entityInfo == null ? null : ctx._entityInfo.Name) + ".xlsx");
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngForOf", ctx.exportColumns);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", ctx.isDialogOpened);
+    } }, dependencies: [i3.NgForOf, i3.NgIf, i4.GridComponent, i4.ToolbarTemplateDirective, i4.SelectionDirective, i4.ColumnComponent, i4.FooterTemplateDirective, i4.CheckboxColumnComponent, i5.WindowComponent, i6.ExcelExportComponent, i6.ColumnComponent, i7.Button, i3.DecimalPipe], styles: [".user-view-grid-wrap[_ngcontent-%COMP%] {\r\n    height: calc(100vh-20px);\r\n}\r\n\r\n.user-view-grid-column-header[_ngcontent-%COMP%] {\r\n    background-color: #a9c2af;\r\n    font-size: 20pt;\r\n    font-weight: bold;\r\n}"] });
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserViewGridComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-user-view-grid', template: "<div class=\"user-view-grid-wrap\" mjFillContainer>\r\n    <kendo-grid #kendoGrid\r\n        mjFillContainer\r\n        [resizable]=\"true\"\r\n        [data]=\"gridView\" \r\n        [skip]=\"skip\"\r\n        [pageSize]=\"pageSize\"\r\n        scrollable=\"virtual\"\r\n        [rowHeight]=\"36\"\r\n        (pageChange)=\"pageChange($event)\"\r\n        [loading]=\"isLoading\"\r\n        [height]=\"gridHeight\"\r\n        [sortable]=\"true\"\r\n        [sort]=\"sortSettings\" \r\n        [resizable]=\"true\"\r\n        [reorderable]=\"true\"\r\n        [selectable]=\"true\"\r\n        kendoGridSelectBy\r\n        [(selectedKeys)]=\"selectedKeys\"\r\n        (cellClick)=\"cellClickHandler($event)\"\r\n        (cellClose)=\"cellCloseHandler($event)\"\r\n        (columnReorder)=\"columnReorder($event)\"\r\n        (columnResize)=\"columnResize($event)\"\r\n        (selectionChange)=\"selectionChange($event)\"\r\n        (sortChange)=\"sortChanged($event)\"\r\n        >\r\n        <ng-template kendoGridToolbarTemplate>\r\n            <button kendoButton icon=\"file-excel\" [disabled]=\"compareMode\" (click)=\"doExcelExport()\" >Export to Excel</button>\r\n            <button (click)=\"enableCompare(true)\" *ngIf=\"compareMode\" class=\"k-button k-button-md k-rounded-md k-button-solid-base k-button-solid\">Cancel</button>\r\n            <button (click)=\"enableCompare()\" [disabled]=\"compareMode && compareRecords.length < 2\" class=\"k-button k-button-md k-rounded-md k-button-solid-base k-button-solid\">Compare</button>\r\n            <button\r\n                kendoButton\r\n                [primary]=\"true\"\r\n                icon=\"refresh\"\r\n                *ngIf=\"showRefreshButton\"\r\n                (click)=\"RefreshFromSavedParams()\">\r\n                Refresh\r\n            </button>\r\n        </ng-template>\r\n\r\n        <kendo-grid-checkbox-column \r\n            *ngIf=\"compareMode\" \r\n            [width]=\"50\" \r\n            [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': '#a9c2af' }\" \r\n            [style]=\"{'text-align': 'center', 'vertical-align': 'center'}\">\r\n        </kendo-grid-checkbox-column>\r\n        \r\n        <kendo-grid-column \r\n            *ngFor=\"let item of visibleColumns\" \r\n            [field]=\"item.Name\" \r\n            [title]=\"GetColumnTitle(item)\"\r\n            [width]=\"item.width ? item.width : 100\"\r\n            [editable]=\"item.EntityField.AllowUpdateAPI\"\r\n            [editor]=\"getEditor(item.EntityField)\"\r\n            [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': '#a9c2af' }\"\r\n            [style]=\"this.GetColumnCellStyle(item)\"\r\n            >\r\n            <ng-template *ngIf=\"item===visibleColumns[0]\" kendoGridFooterTemplate >\r\n                {{this.viewData.length | number}}{{this.totalRowCount > this.viewData.length ? ' of ' + (this.totalRowCount | number) : ' rows'}}<br/><span style=\"font-size: smaller; font-weight: normal;\">{{viewExecutionTime | number:'1.2-2'}} seconds</span>\r\n            </ng-template>\r\n        </kendo-grid-column>\r\n\r\n        <kendo-excelexport #excelExport [data]=\"exportData\" [fileName]=\"(_viewEntity ? _viewEntity.Get('Name') : _entityInfo?.Name) + '.xlsx'\">\r\n            <kendo-excelexport-column *ngFor=\"let exportCol of exportColumns\" [field]=\"exportCol.Name\" [title]=\"exportCol.Name\">\r\n            </kendo-excelexport-column>\r\n        </kendo-excelexport>\r\n    </kendo-grid>\r\n</div>\r\n\r\n<div *ngIf=\"isDialogOpened\">\r\n    <div class=\"k-overlay\"></div>\r\n    <kendo-window\r\n      [width]=\"900\"\r\n      [minHeight]=\"300\"\r\n      [minWidth]=\"400\"\r\n      [resizable]=\"true\"\r\n      (close)=\"closeDialog()\"\r\n      title=\"Compare Records\"\r\n      *ngIf=\"isDialogOpened\"\r\n    >\r\n      <div class=\"k-d-flex k-flex-col k-justify-content-between k-h-full\">\r\n        <div>\r\n            <mj-record-compare [recordsToCompare]=\"compareRecords\" [visibleColumns]=\"visibleColumns\" ></mj-record-compare>\r\n        </div>\r\n      </div>\r\n    </kendo-window>\r\n</div>\r\n  ", styles: [".user-view-grid-wrap {\r\n    height: calc(100vh-20px);\r\n}\r\n\r\n.user-view-grid-column-header {\r\n    background-color: #a9c2af;\r\n    font-size: 20pt;\r\n    font-weight: bold;\r\n}"] }]
+    }], function () { return [{ type: i1.FormBuilder }, { type: i2.Router }]; }, { Params: [{
+            type: Input
+        }], BottomMargin: [{
+            type: Input
+        }], InEditMode: [{
+            type: Input
+        }], EditMode: [{
+            type: Input
+        }], AutoNavigate: [{
+            type: Input
+        }], rowClicked: [{
+            type: Output
+        }], rowEdited: [{
+            type: Output
+        }], kendoGridElement: [{
+            type: ViewChild,
+            args: ['kendoGrid', { read: GridComponent }]
+        }], kendoGridElementRef: [{
+            type: ViewChild,
+            args: ['kendoGrid', { read: ElementRef }]
+        }], kendoExcelExport: [{
+            type: ViewChild,
+            args: ['excelExport', { read: ExcelExportComponent }]
+        }], AllowLoad: [{
+            type: Input
+        }] }); })();