@memberjunction/ng-explorer-core 1.6.0 → 1.7.0

package/dist/lib/app-view/application-view.component.js

@@ -7,106 +7,309 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Component, ViewChild } from '@angular/core';
-import { Metadata, LogError } from '@memberjunction/core';
+import { Component, Input, ViewChild } from '@angular/core';
+import { Metadata, LogError, RunView } from '@memberjunction/core';
 import { ItemType } from '../../generic/Item.types';
 import { BaseBrowserComponent } from '../base-browser-component/base-browser-component';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@angular/common";
 import * as i3 from "@memberjunction/ng-shared";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@memberjunction/ng-user-view-properties";
-import * as i6 from "../generic-browser-list/generic-browser-list.component";
+import * as i4 from "@progress/kendo-angular-indicators";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@memberjunction/ng-user-view-properties";
+import * as i7 from "@memberjunction/ng-record-selector";
+import * as i8 from "../generic-browser-list/generic-browser-list.component";
 const _c0 = ["entityRow"];
 const _c1 = ["userViewDialog"];
-function ApplicationViewComponent_button_8_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵlistener("click", function ApplicationViewComponent_button_8_Template_button_click_0_listener() { const button_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onAppEntityButtonClicked(button_r3)); });
+function ApplicationViewComponent_div_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelement(1, "span", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.app.Icon);
+} }
+function ApplicationViewComponent_div_0_button_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 22);
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngClass", item_r4.Icon + " button-icon");
+} }
+function ApplicationViewComponent_div_0_button_23_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_button_23_Template_button_click_0_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAppEntityButtonClicked(item_r4)); });
     i0.ɵɵelementStart(1, "span");
-    i0.ɵɵtext(2);
+    i0.ɵɵtemplate(2, ApplicationViewComponent_div_0_button_23_Conditional_2_Template, 1, 1, "span", 22);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("toggleable", true)("selected", ctx_r1.IsEntitySelected(item_r4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(item_r4.Icon && item_r4.Icon.length > 0 ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r4.Name, " ");
+} }
+function ApplicationViewComponent_div_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_Conditional_24_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ShowAppEntitySelectionDialog()); });
+    i0.ɵɵelement(1, "span", 15);
+    i0.ɵɵtext(2, " Click Here to Select Entities ");
+    i0.ɵɵelementEnd();
+} }
+function ApplicationViewComponent_div_0_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader");
+} }
+function ApplicationViewComponent_div_0_Conditional_26_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "app-generic-browser-list", 26);
+    i0.ɵɵlistener("itemClickEvent", function ApplicationViewComponent_div_0_Conditional_26_div_0_Template_app_generic_browser_list_itemClickEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onItemClick($event)); })("AfterAddFolderEvent", function ApplicationViewComponent_div_0_Conditional_26_div_0_Template_app_generic_browser_list_AfterAddFolderEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEvent($event)); })("AfterAddItemEvent", function ApplicationViewComponent_div_0_Conditional_26_div_0_Template_app_generic_browser_list_AfterAddItemEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEvent($event)); })("AfterDeleteItemEvent", function ApplicationViewComponent_div_0_Conditional_26_div_0_Template_app_generic_browser_list_AfterDeleteItemEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEvent($event)); })("AfterDeleteFolderEvent", function ApplicationViewComponent_div_0_Conditional_26_div_0_Template_app_generic_browser_list_AfterDeleteFolderEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEvent($event)); })("viewModeChangeEvent", function ApplicationViewComponent_div_0_Conditional_26_div_0_Template_app_generic_browser_list_viewModeChangeEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onViewModeChange($event)); })("BeforeAddItemEvent", function ApplicationViewComponent_div_0_Conditional_26_div_0_Template_app_generic_browser_list_BeforeAddItemEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.createNewView($event)); })("BeforeUpdateItemEvent", function ApplicationViewComponent_div_0_Conditional_26_div_0_Template_app_generic_browser_list_BeforeUpdateItemEvent_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editView($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const button_r3 = ctx.$implicit;
-    i0.ɵɵproperty("toggleable", true)("selected", button_r3.Selected);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("items", ctx_r1.items)("categoryEntityID", ctx_r1.categoryEntityID)("title", ctx_r1.pageTitle)("CategoryEntityName", ctx_r1.categoryEntityName)("selectedFolderID", ctx_r1.selectedFolderID)("showLoader", ctx_r1.showLoader)("viewingResource", false)("displayAsGrid", ctx_r1.displayAsGrid);
+} }
+function ApplicationViewComponent_div_0_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ApplicationViewComponent_div_0_Conditional_26_div_0_Template, 2, 8, "div", 25);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.SelectedAppEntities.length > 0);
+} }
+function ApplicationViewComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 4)(2, "div", 5);
+    i0.ɵɵtemplate(3, ApplicationViewComponent_div_0_Conditional_3_Template, 2, 1, "div", 6);
+    i0.ɵɵelementStart(4, "div", 7)(5, "div", 8)(6, "span", 9);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_Template_span_click_6_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.GoHome($event)); });
+    i0.ɵɵtext(7, "Home");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 10);
+    i0.ɵɵelement(9, "span", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 9);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_Template_span_click_10_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.GoToApps($event)); });
+    i0.ɵɵtext(11, "Applications");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 10);
+    i0.ɵɵelement(13, "span", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 12);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "div", 13)(17, "button", 14);
+    i0.ɵɵlistener("click", function ApplicationViewComponent_div_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ShowAppEntitySelectionDialog()); });
+    i0.ɵɵelement(18, "span", 15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "mj-record-selector-dialog", 16);
+    i0.ɵɵlistener("DialogClosed", function ApplicationViewComponent_div_0_Template_mj_record_selector_dialog_DialogClosed_19_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnAppEntitySelectionDialogClosed($event)); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(20, "div", 17, 0)(22, "div", 18);
+    i0.ɵɵtemplate(23, ApplicationViewComponent_div_0_button_23_Template, 4, 4, "button", 19);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(24, ApplicationViewComponent_div_0_Conditional_24_Template, 3, 0, "div")(25, ApplicationViewComponent_div_0_Conditional_25_Template, 1, 0, "kendo-loader")(26, ApplicationViewComponent_div_0_Conditional_26_Template, 1, 1, "div", 20);
+    i0.ɵɵelementStart(27, "mj-user-view-properties-dialog", 21, 1);
+    i0.ɵɵlistener("dialogClosed", function ApplicationViewComponent_div_0_Template_mj_user_view_properties_dialog_dialogClosed_27_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnViewPropertiesDialogClose($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.app.Icon && ctx_r1.app.Icon.length > 0 ? 3 : -1);
+    i0.ɵɵadvance(12);
+    i0.ɵɵtextInterpolate(ctx_r1.app.Name);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("AvailableRecords", ctx_r1.AllAppEntities)("SelectedRecords", ctx_r1.SelectedAppEntities)("UnselectedRecords", ctx_r1.UnselectedAppEntities)("DialogVisible", ctx_r1.AppEntitySelectionDialogVisible);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r1.SelectedAppEntities);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.SelectedAppEntities.length === 0 && !ctx_r1.showLoader ? 24 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showLoader ? 25 : 26);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", button_r3.Name, " ");
+    i0.ɵɵproperty("ShowPropertiesButton", false);
 } }
 export class ApplicationViewComponent extends BaseBrowserComponent {
-    constructor(router, route, location, sharedService) {
+    constructor(router, route, location, sharedService, cdr) {
         super();
         this.router = router;
         this.route = route;
         this.location = location;
         this.sharedService = sharedService;
-        this.appNameFromURL = '';
-        this.appName = '';
-        this.appDescription = '';
-        this.appEntities = [];
-        this.AppEntityButtons = [];
-        this.selectedAppEntity = null;
-        this.categoryEntityID = null;
+        this.cdr = cdr;
+        this.AppEntitySelectionDialogVisible = false;
+        this.AllAppEntities = [];
+        this.SelectedAppEntities = [];
+        this.UnselectedAppEntities = [];
         this.categoryEntityName = "User View Categories";
         this.itemEntityName = "User Views";
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
             this.route.paramMap.subscribe((params) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
                 const appName = params.get('appName');
                 const entityName = params.get('entityName');
                 const folderID = params.get('folderID');
+                this.showLoader = true;
                 if (folderID) {
                     this.selectedFolderID = parseInt(folderID) || null;
                 }
-                if (appName) {
-                    this.appName = this.appNameFromURL = appName;
+                if (appName && appName !== ((_a = this.app) === null || _a === void 0 ? void 0 : _a.Name)) {
                     const md = new Metadata();
-                    const app = md.Applications.find(a => a.Name == appName);
-                    if (app) {
-                        this.appDescription = app.Description;
-                        this.appEntities = app.ApplicationEntities;
+                    const rv = new RunView();
+                    this.app = md.Applications.find(a => a.Name === appName);
+                    // if we get here and we have a blank app, problem
+                    if (!this.app)
+                        throw new Error(`Application ${appName} not found`);
+                    // next up we need to find the UserApplication record based on the app and the current user
+                    const userAppResult = yield rv.RunView({
+                        EntityName: "User Applications",
+                        ExtraFilter: `UserID=${md.CurrentUser.ID} AND ApplicationID=${this.app.ID}`,
+                        ResultType: 'entity_object'
+                    });
+                    if (!userAppResult || userAppResult.Success === false || userAppResult.Results.length === 0)
+                        throw new Error('User Application Record for current user and selected application not found');
+                    this.userApp = userAppResult.Results[0];
+                    const matches = this.app.ApplicationEntities.map(ae => md.Entities.find(e => e.ID === ae.EntityID)).filter(e => e); // filter out null entries
+                    // store the entire list of POSSIBLE app entities in this list
+                    this.AllAppEntities = matches; // we filter out null above so this cast is safe;
+                    const userAppEntities = yield rv.RunView({
+                        EntityName: 'User Application Entities',
+                        ResultType: 'entity_object',
+                        ExtraFilter: `UserApplicationID = ${this.userApp.ID}`,
+                        OrderBy: 'Sequence'
+                    });
+                    if (userAppEntities && userAppEntities.Success) {
+                        this.SelectedAppEntities = this.AllAppEntities.filter(e => userAppEntities.Results.some(uae => uae.EntityID === e.ID));
+                        this.UnselectedAppEntities = this.AllAppEntities.filter(e => !this.SelectedAppEntities.some(sa => sa.ID === e.ID));
+                        // special case - if we have NO user app entities and the application has entities that are marked as DefaultForNewUser=1 we will add them now
+                        const defaultEntities = this.app.ApplicationEntities.filter(a => a.DefaultForNewUser);
+                        if (this.SelectedAppEntities.length === 0 && defaultEntities.length > 0) {
+                            // there are some entities that should default for a new user, so let's add them to the selected entities and remove from the Unselected
+                            // app entities and then call the Save method that we use when the user dialog ends
+                            this.SelectedAppEntities = defaultEntities.map(de => this.AllAppEntities.find(aae => de.EntityID === aae.ID)).filter(val => val);
+                            // now we have the default entities in place for the app, remove them from the Unselected array
+                            this.UnselectedAppEntities = this.UnselectedAppEntities.filter(e => !this.SelectedAppEntities.some(se => se.ID === e.ID));
+                            // now save
+                            yield this.OnAppEntitySelectionDialogClosed(true);
+                        }
                     }
-                    this.AppEntityButtons = this.appEntities.map(entity => new ApplicationEntityButton(entity));
-                    if (this.AppEntityButtons.length) {
-                        if (entityName) {
-                            const entityNameToLower = entityName.toLowerCase();
-                            const selectedAppEntity = this.AppEntityButtons.find(e => e.Name.toLocaleLowerCase() == entityNameToLower);
-                            if (selectedAppEntity) {
-                                selectedAppEntity.Selected = true;
-                                yield this.loadEntitiesAndFolders(selectedAppEntity);
-                                return;
-                            }
+                }
+                // now down here we have either loaded the app above, or already had the current app loaded. Now we move on to set the current entity and load er up
+                if (this.app && this.SelectedAppEntities.length) {
+                    if (entityName) {
+                        const entityNameToLower = entityName.toLowerCase();
+                        const selectedAppEntity = this.SelectedAppEntities.find(e => e.Name.toLocaleLowerCase() == entityNameToLower);
+                        if (selectedAppEntity) {
+                            yield this.loadEntityAndFolders(selectedAppEntity);
                         }
-                        const defaultEntity = this.AppEntityButtons[0];
-                        defaultEntity.Selected = true;
-                        yield this.loadEntitiesAndFolders(defaultEntity);
+                        else
+                            yield this.loadEntityAndFolders(this.SelectedAppEntities[0]);
+                    }
+                    else {
+                        yield this.loadEntityAndFolders(this.SelectedAppEntities[0]);
                     }
                 }
+                this.showLoader = false;
             }));
         });
     }
-    onAppEntityButtonClicked(appEntityButton) {
-        if (appEntityButton.Selected) {
+    IsEntitySelected(entity) {
+        var _a;
+        if (((_a = this.currentlySelectedAppEntity) === null || _a === void 0 ? void 0 : _a.ID) === entity.ID)
+            return true;
+        else
+            return false;
+    }
+    ShowAppEntitySelectionDialog() {
+        this.AppEntitySelectionDialogVisible = true;
+    }
+    OnAppEntitySelectionDialogClosed(save) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.AppEntitySelectionDialogVisible = false;
+            // now we need to process the changes if the user hit save
+            if (save) {
+                // we need to basically make sure the User Application Entities entity for this user maps to the set of selected Entities within the application, in the order selected as well
+                const rv = new RunView();
+                const md = new Metadata();
+                const userAppEntities = yield rv.RunView({
+                    EntityName: 'User Application Entities',
+                    ResultType: 'entity_object',
+                    ExtraFilter: `UserApplicationID = ${this.userApp.ID}`,
+                    OrderBy: 'Sequence'
+                });
+                // userAppEntities.results is the current DB state, we need to now compare it to the SelectedAppEntities array
+                // and if there are changes either update sequence values or delete records that aren't selected anymore.  
+                const existingUserAppEntities = userAppEntities.Results;
+                const userAppEntitiesToSave = [];
+                const userAppEntitiesToDelete = [];
+                // first we need to update the sequence values for the selected applications
+                for (let index = 0; index < this.SelectedAppEntities.length; index++) {
+                    const e = this.SelectedAppEntities[index];
+                    const existing = existingUserAppEntities.find(uae => uae.EntityID === e.ID);
+                    if (existing) {
+                        existing.Sequence = index;
+                        userAppEntitiesToSave.push(existing);
+                    }
+                    else {
+                        // this is a new app entity that the user has selected
+                        const newApp = yield md.GetEntityObject("User Application Entities");
+                        newApp.UserApplicationID = this.userApp.ID;
+                        newApp.EntityID = e.ID;
+                        newApp.Sequence = index;
+                        userAppEntitiesToSave.push(newApp);
+                    }
+                }
+                // now we need to add the records that aren't selected anymore to a delete array
+                for (let index = 0; index < existingUserAppEntities.length; index++) {
+                    const existing = existingUserAppEntities[index];
+                    if (!this.SelectedAppEntities.some(sa => sa.ID === existing.EntityID)) {
+                        userAppEntitiesToDelete.push(existing);
+                    }
+                }
+                // finally, we need to submit a single transaction so we have one server round trip to commit all this good stuff
+                const tg = yield md.CreateTransactionGroup();
+                userAppEntitiesToSave.forEach(toSave => {
+                    toSave.TransactionGroup = tg;
+                    toSave.Save(); // no await since we are in a transaction group
+                });
+                userAppEntitiesToDelete.forEach(d => {
+                    d.TransactionGroup = tg;
+                    d.Delete(); // no await 
+                });
+                if (!(yield tg.Submit())) {
+                    // the data doesn't need to be updated when we are succesful because we're all bound to the same data which is cool
+                    // but in this case we need to notify the user it failed
+                    this.sharedService.CreateSimpleNotification('There was an error saving your entity selections. Please try again later or notify a system administrator.', "error", 3500);
+                }
+            }
+        });
+    }
+    onAppEntityButtonClicked(e) {
+        var _a;
+        if (e.ID === ((_a = this.currentlySelectedAppEntity) === null || _a === void 0 ? void 0 : _a.ID))
             return;
-        }
         this.selectedFolderID = null;
-        this.selectedAppEntity = appEntityButton.Data;
+        this.currentlySelectedAppEntity = e;
         this.navigateToCurrentPage();
     }
-    loadEntitiesAndFolders(appEntityButton) {
+    loadEntityAndFolders(entity) {
         const _super = Object.create(null, {
             RunView: { get: () => super.RunView },
             LoadData: { get: () => super.LoadData }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            if (!appEntityButton) {
+            if (!entity) {
+                this.currentlySelectedAppEntity = undefined; // make sure our current selection is wiped out here
                 return;
             }
             this.showLoader = true;
-            this.appName = appEntityButton.Name;
-            this.selectedAppEntity = appEntityButton.Data;
-            this.categoryEntityID = this.selectedAppEntity.EntityID;
+            this.currentlySelectedAppEntity = entity;
             if (this.selectedFolderID) {
                 let viewResult = yield _super.RunView.call(this, this.categoryEntityName, `ID=${this.selectedFolderID}`);
                 if (viewResult.length > 0) {
@@ -114,13 +317,13 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
                 }
             }
             else {
-                this.pageTitle = this.selectedAppEntity.Entity;
+                this.pageTitle = this.currentlySelectedAppEntity.Name;
             }
             const md = new Metadata();
             const parentFolderIDFilter = this.selectedFolderID ? `ParentID=${this.selectedFolderID}` : 'ParentID IS NULL';
-            const categoryFilter = `UserID=${md.CurrentUser.ID} AND EntityID=${this.selectedAppEntity.EntityID} AND ` + parentFolderIDFilter;
+            const categoryFilter = `UserID=${md.CurrentUser.ID} AND EntityID=${this.currentlySelectedAppEntity.ID} AND ` + parentFolderIDFilter;
             const categoryIDFilter = this.selectedFolderID ? `CategoryID=${this.selectedFolderID}` : 'CategoryID IS NULL';
-            const userViewFilter = `UserID = ${md.CurrentUser.ID} AND EntityID = ${appEntityButton.Data.EntityID} AND ` + categoryIDFilter;
+            const userViewFilter = `UserID = ${md.CurrentUser.ID} AND EntityID = ${this.currentlySelectedAppEntity.ID} AND ` + categoryIDFilter;
             yield _super.LoadData.call(this, {
                 sortItemsAfterLoad: true,
                 categoryItemFilter: categoryFilter,
@@ -128,6 +331,7 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
                 showLoader: true
             });
             this.showLoader = false;
+            this.cdr.detectChanges(); // tell Angular to detect changes as we just change the current entity so that affects some UI elements visualy like which button shows as selected
         });
     }
     onItemClick(item) {
@@ -160,13 +364,15 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
         }
     }
     navigateToCurrentPage() {
+        if (!this.app)
+            throw new Error('Application Not Loaded');
         //we're capable of loading the data associated with the selected ApplicationEntityInfo object
         //without a page refresh, but we'd need additonal logic to handle routing, e.g. back
         //button in the browser taking you to the last selected entity.
         //so its easier if we instead navigate to this page with an updated url and leverage angular's router
         let folderID = this.selectedFolderID ? this.selectedFolderID.toString() : null;
-        let url = ["/app", this.appNameFromURL];
-        let appEntityName = this.selectedAppEntity ? this.selectedAppEntity.Entity : null;
+        let url = ["/app", this.app.Name];
+        let appEntityName = this.currentlySelectedAppEntity ? this.currentlySelectedAppEntity.Name : null;
         if (appEntityName) {
             url.push(`${appEntityName}`);
             if (folderID) {
@@ -183,10 +389,11 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
         this.viewMode = viewMode;
     }
     createNewView(event) {
+        var _a;
         event.Cancel = true;
-        if (this.viewPropertiesDialog) {
-            console.log("Creating new view", this.appName);
-            this.viewPropertiesDialog.CreateView(this.appName);
+        if (this.viewPropertiesDialog && this.currentlySelectedAppEntity) {
+            console.log("Creating new view ", (_a = this.currentlySelectedAppEntity) === null || _a === void 0 ? void 0 : _a.Name);
+            this.viewPropertiesDialog.CreateView(this.currentlySelectedAppEntity.Name);
         }
         else {
             LogError("View Properties Dialog not found");
@@ -211,67 +418,49 @@ export class ApplicationViewComponent extends BaseBrowserComponent {
                 //dont need to do anything here
                 return;
             }
-            if (args && args.Saved) {
+            if (args && args.Saved && this.currentlySelectedAppEntity) {
                 args.Cancel = true;
-                const entityNameToLower = this.appName.toLowerCase();
-                const selectedAppEntity = this.AppEntityButtons.find(e => e.Name.toLocaleLowerCase() == entityNameToLower);
-                if (selectedAppEntity) {
-                    selectedAppEntity.Selected = true;
-                    yield this.loadEntitiesAndFolders(selectedAppEntity);
-                }
+                yield this.loadEntityAndFolders(this.currentlySelectedAppEntity);
             }
         });
     }
+    GoToApps(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            this.router.navigate(['data']);
+        });
+    }
+    GoHome(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            event.preventDefault();
+            // tell the router to go to /home
+            this.router.navigate(['home']);
+        });
+    }
 }
-ApplicationViewComponent.ɵfac = function ApplicationViewComponent_Factory(t) { return new (t || ApplicationViewComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Location), i0.ɵɵdirectiveInject(i3.SharedService)); };
-ApplicationViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationViewComponent, selectors: [["application-view"]], viewQuery: function ApplicationViewComponent_Query(rf, ctx) { if (rf & 1) {
+ApplicationViewComponent.ɵfac = function ApplicationViewComponent_Factory(t) { return new (t || ApplicationViewComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Location), i0.ɵɵdirectiveInject(i3.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+ApplicationViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationViewComponent, selectors: [["mj-application-view"]], viewQuery: function ApplicationViewComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0, 5);
         i0.ɵɵviewQuery(_c1, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityRowRef = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewPropertiesDialog = _t.first);
-    } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 11, consts: [["entityRow", ""], ["userViewDialog", ""], [1, "app-container"], [1, "card-header-entity", "cloumn"], [1, "title-wrap"], [1, "row", 2, "max-width", "100%"], [1, "col-xs-12", "col-sm-6", "example-col"], ["kendoButton", "", "fillMode", "flat", 3, "toggleable", "selected", "click", 4, "ngFor", "ngForOf"], [1, "main-area", "margin-top-neg-20"], ["iconName", "aggregateFields", "addText", "Create New View", "ItemEntityName", "User Views", "resourceName", "View", 3, "itemClickEvent", "AfterAddFolderEvent", "AfterAddItemEvent", "AfterDeleteItemEvent", "AfterDeleteFolderEvent", "viewModeChangeEvent", "BeforeAddItemEvent", "BeforeUpdateItemEvent", "items", "categoryEntityID", "title", "CategoryEntityName", "selectedFolderID", "showLoader", "viewingResource", "displayAsGrid"], [3, "dialogClosed", "ShowPropertiesButton"], ["kendoButton", "", "fillMode", "flat", 3, "click", "toggleable", "selected"]], template: function ApplicationViewComponent_Template(rf, ctx) { if (rf & 1) {
-        const _r1 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "h1");
-        i0.ɵɵtext(4);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(5, "div", 5, 0)(7, "div", 6);
-        i0.ɵɵtemplate(8, ApplicationViewComponent_button_8_Template, 3, 3, "button", 7);
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(9, "div", 8)(10, "app-generic-browser-list", 9);
-        i0.ɵɵlistener("itemClickEvent", function ApplicationViewComponent_Template_app_generic_browser_list_itemClickEvent_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onItemClick($event)); })("AfterAddFolderEvent", function ApplicationViewComponent_Template_app_generic_browser_list_AfterAddFolderEvent_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEvent($event)); })("AfterAddItemEvent", function ApplicationViewComponent_Template_app_generic_browser_list_AfterAddItemEvent_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEvent($event)); })("AfterDeleteItemEvent", function ApplicationViewComponent_Template_app_generic_browser_list_AfterDeleteItemEvent_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEvent($event)); })("AfterDeleteFolderEvent", function ApplicationViewComponent_Template_app_generic_browser_list_AfterDeleteFolderEvent_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEvent($event)); })("viewModeChangeEvent", function ApplicationViewComponent_Template_app_generic_browser_list_viewModeChangeEvent_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onViewModeChange($event)); })("BeforeAddItemEvent", function ApplicationViewComponent_Template_app_generic_browser_list_BeforeAddItemEvent_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.createNewView($event)); })("BeforeUpdateItemEvent", function ApplicationViewComponent_Template_app_generic_browser_list_BeforeUpdateItemEvent_10_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.editView($event)); });
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(11, "mj-user-view-properties-dialog", 10, 1);
-        i0.ɵɵlistener("dialogClosed", function ApplicationViewComponent_Template_mj_user_view_properties_dialog_dialogClosed_11_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnViewPropertiesDialogClose($event)); });
-        i0.ɵɵelementEnd()();
+    } }, inputs: { categoryEntityID: "categoryEntityID" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["entityRow", ""], ["userViewDialog", ""], ["class", "app-container", 4, "ngIf"], [1, "app-container"], [1, "card-header-entity", "cloumn"], [1, "header-wrap"], [1, "title-icon"], [1, "title-wrap"], [1, "title-wrap-inner"], [1, "breadcrumb", 3, "click"], [1, "breadcrumb-separator"], [1, "fa-solid", "fa-chevron-right"], [1, "breadcrumb-end"], [1, "config-button"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-gear"], ["EntityName", "Entities", "DisplayField", "Name", "DisplayIconField", "Icon", 3, "DialogClosed", "AvailableRecords", "SelectedRecords", "UnselectedRecords", "DialogVisible"], [1, "row", 2, "max-width", "100%"], [1, "col-xs-12", "col-sm-6", "example-col"], ["kendoButton", "", "fillMode", "flat", 3, "toggleable", "selected", "click", 4, "ngFor", "ngForOf"], [1, "main-area", "margin-top-neg-20"], [3, "dialogClosed", "ShowPropertiesButton"], [3, "ngClass"], ["kendoButton", "", "fillMode", "flat", 3, "click", "toggleable", "selected"], [3, "click"], ["class", "main-area margin-top-neg-20", 4, "ngIf"], ["iconName", "aggregateFields", "addText", "Create New View", "ItemEntityName", "User Views", "resourceName", "View", 3, "itemClickEvent", "AfterAddFolderEvent", "AfterAddItemEvent", "AfterDeleteItemEvent", "AfterDeleteFolderEvent", "viewModeChangeEvent", "BeforeAddItemEvent", "BeforeUpdateItemEvent", "items", "categoryEntityID", "title", "CategoryEntityName", "selectedFolderID", "showLoader", "viewingResource", "displayAsGrid"]], template: function ApplicationViewComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, ApplicationViewComponent_div_0_Template, 29, 10, "div", 2);
     } if (rf & 2) {
-        i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate(ctx.appNameFromURL);
-        i0.ɵɵadvance(4);
-        i0.ɵɵproperty("ngForOf", ctx.AppEntityButtons);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("items", ctx.items)("categoryEntityID", ctx.categoryEntityID)("title", ctx.pageTitle)("CategoryEntityName", ctx.categoryEntityName)("selectedFolderID", ctx.selectedFolderID)("showLoader", ctx.showLoader)("viewingResource", false)("displayAsGrid", ctx.displayAsGrid);
-        i0.ɵɵadvance();
-        i0.ɵɵproperty("ShowPropertiesButton", false);
-    } }, dependencies: [i2.NgForOf, i4.ButtonComponent, i5.UserViewPropertiesDialogComponent, i6.GenericBrowserListComponent], styles: [".app-container[_ngcontent-%COMP%] {\n     padding: 10px;\n}\n  \n.entity-list[_ngcontent-%COMP%] {\n     width: 500px;\n}\n.favorites-list[_ngcontent-%COMP%] {\n     width: 400px;\n}\n\n.cloumn[_ngcontent-%COMP%] {\n     flex-direction: column;\n}\n.example-col[_ngcontent-%COMP%] {\n     overflow-x: auto;\n}\n.example-col[_ngcontent-%COMP%]   .k-selected[_ngcontent-%COMP%]  {\n     font-weight: 800;\n     color: var(--tdata-color);\n     border-bottom: 3px solid var(--border-blue) !important;\n     background: var(--white-color);\n}\n\n.margin-top-neg-20[_ngcontent-%COMP%] {\n     margin-top: -20px;\n     padding: 0px !important\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
+        i0.ɵɵproperty("ngIf", ctx.app);
+    } }, dependencies: [i2.NgClass, i2.NgForOf, i2.NgIf, i4.LoaderComponent, i5.ButtonComponent, i6.UserViewPropertiesDialogComponent, i7.RecordSelectorDialogComponent, i8.GenericBrowserListComponent], styles: [".app-container[_ngcontent-%COMP%] {\n     padding: 15px;\n}\n  \n.entity-list[_ngcontent-%COMP%] {\n     width: 500px;\n}\n.favorites-list[_ngcontent-%COMP%] {\n     width: 400px;\n}\n\n.cloumn[_ngcontent-%COMP%] {\n     flex-direction: column;\n}\n.example-col[_ngcontent-%COMP%] {\n     overflow-x: auto;\n}\n.example-col[_ngcontent-%COMP%]   .k-selected[_ngcontent-%COMP%]  {\n     font-weight: 800;\n     color: var(--tdata-color);\n     border-bottom: 3px solid var(--border-blue) !important;\n     background: var(--white-color);\n}\n\n.margin-top-neg-20[_ngcontent-%COMP%] {\n     margin-top: -20px;\n     padding: 0px !important\n}\n\n.header-wrap[_ngcontent-%COMP%] {\n     display: flex;\n     justify-content: space-between;\n     align-items: center;\n     margin-bottom: 10px;\n     width: 100%;\n}\n\n.title-wrap[_ngcontent-%COMP%] {\n     flex-grow: 1;\n     font-size: 24px;\n}\n.title-wrap-inner[_ngcontent-%COMP%] {\n     display: block;\n}\n\n.breadcrumb[_ngcontent-%COMP%] {\n     color: darkblue;\n     cursor: pointer;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n\n.breadcrumb-end[_ngcontent-%COMP%] {\n     display: inline;\n     margin-left: 5px;\n}\n\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n     font-size: 14px;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n.home-icon[_ngcontent-%COMP%] {\n     margin-right: 5px;\n     font-size: 18px;\n     vertical-align: middle;\n}\n  \n.title-icon[_ngcontent-%COMP%] {\n     font-size: 32px;\n     margin-right: 15px;\n}\n\n.config-button[_ngcontent-%COMP%] {\n     display: flex;\n     align-items: center;\n}\n\n.button-icon[_ngcontent-%COMP%] {\n     margin-right: 5px;\n     font-size: 16px;\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationViewComponent, [{
         type: Component,
-        args: [{ selector: 'application-view', template: "<div  class=\"app-container\">\n    <div class=\"card-header-entity cloumn\">\n        <div class=\"title-wrap\">\n            <h1>{{appNameFromURL}}</h1>\n        </div>\n        <div class=\"row\" #entityRow style=\"max-width: 100%;\">\n            <div class=\"col-xs-12 col-sm-6 example-col\">\n                <button\n                    *ngFor=\"let button of AppEntityButtons\"\n                    kendoButton\n                    fillMode=\"flat\"\n                    [toggleable]=\"true\"\n                    [selected]=\"button.Selected\"\n                    (click)=\"onAppEntityButtonClicked(button)\"\n                >\n                    <span>\n                        {{button.Name}}\n                    </span>\n                </button>\n            </div>\n        </div>\n    </div>\n    <div class=\"main-area margin-top-neg-20\">\n        <app-generic-browser-list \n            iconName=\"aggregateFields\" \n            [items]=\"items\"\n            [categoryEntityID]=\"categoryEntityID\"\n            addText=\"Create New View\"\n            ItemEntityName=\"User Views\"\n            resourceName=\"View\"\n            [title]=\"pageTitle\"\n            [CategoryEntityName]=\"categoryEntityName\"\n            (itemClickEvent)=\"onItemClick($event)\" \n            [selectedFolderID]=\"selectedFolderID\"\n            [showLoader]=\"showLoader\"\n            [viewingResource]=false\n            [displayAsGrid]=\"displayAsGrid\"\n            (AfterAddFolderEvent)=\"onEvent($event)\"\n            (AfterAddItemEvent)=\"onEvent($event)\"\n            (AfterDeleteItemEvent)=\"onEvent($event)\"\n            (AfterDeleteFolderEvent)=\"onEvent($event)\"\n            (viewModeChangeEvent)=\"onViewModeChange($event)\"\n            (BeforeAddItemEvent)=\"createNewView($event)\"\n            (BeforeUpdateItemEvent)=\"editView($event)\"\n        />\n    </div>\n    <mj-user-view-properties-dialog #userViewDialog [ShowPropertiesButton]=\"false\"(dialogClosed)=\"OnViewPropertiesDialogClose($event)\"></mj-user-view-properties-dialog>\n</div>\n", styles: [".app-container {\n     padding: 10px;\n}\n  \n.entity-list {\n     width: 500px;\n}\n.favorites-list {\n     width: 400px;\n}\n\n.cloumn {\n     flex-direction: column;\n}\n.example-col {\n     overflow-x: auto;\n}\n.example-col .k-selected  {\n     font-weight: 800;\n     color: var(--tdata-color);\n     border-bottom: 3px solid var(--border-blue) !important;\n     background: var(--white-color);\n}\n\n.margin-top-neg-20 {\n     margin-top: -20px;\n     padding: 0px !important\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
-    }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.Location }, { type: i3.SharedService }], { entityRowRef: [{
+        args: [{ selector: 'mj-application-view', template: "<div class=\"app-container\" *ngIf=\"this.app\">\n    <div class=\"card-header-entity cloumn\">\n        <div class=\"header-wrap\"> \n            @if (this.app.Icon && this.app.Icon.length > 0) {\n                <div class=\"title-icon\">\n                    <span [ngClass]=\"this.app.Icon\"></span>\n                </div>    \n            }\n            <div class=\"title-wrap\">\n                <div class=\"title-wrap-inner\">\n                    <span class=\"breadcrumb\" (click)=\"GoHome($event)\">Home</span>  \n                    <span class=\"breadcrumb-separator\"><span class=\"fa-solid fa-chevron-right\"></span></span>\n                    <span  class=\"breadcrumb\" (click)=\"GoToApps($event)\">Applications</span>\n                    <span class=\"breadcrumb-separator\"><span class=\"fa-solid fa-chevron-right\"></span></span>\n                    <span class=\"breadcrumb-end\">{{this.app.Name}}</span>\n                </div>\n            </div>\n            <div class=\"config-button\">\n                <button kendoButton (click)=\"ShowAppEntitySelectionDialog()\"><span class=\"fa-solid fa-gear\"></span></button>\n                <mj-record-selector-dialog  \n                                            EntityName=\"Entities\"\n                                            [AvailableRecords]=\"AllAppEntities\" \n                                            [SelectedRecords]=\"SelectedAppEntities\" \n                                            [UnselectedRecords]=\"UnselectedAppEntities\"\n                                            [DialogVisible]=\"AppEntitySelectionDialogVisible\"\n                                            DisplayField=\"Name\"\n                                            DisplayIconField=\"Icon\"\n                                            (DialogClosed)=\"OnAppEntitySelectionDialogClosed($event)\"\n                >\n                </mj-record-selector-dialog>\n            </div>\n        </div>        \n        <div class=\"row\" #entityRow style=\"max-width: 100%;\">\n            <div class=\"col-xs-12 col-sm-6 example-col\">\n                <button\n                    *ngFor=\"let item of SelectedAppEntities\"\n                    kendoButton\n                    fillMode=\"flat\"\n                    [toggleable]=\"true\"\n                    [selected]=\"IsEntitySelected(item)\"\n                    (click)=\"onAppEntityButtonClicked(item)\"\n                >\n                    <span>\n                        @if (item.Icon && item.Icon.length > 0) {\n                            <span [ngClass]=\"item.Icon + ' button-icon'\" ></span>\n                        }\n                        {{item.Name}}\n                    </span>\n                </button>\n            </div>\n        </div>\n    </div>\n    @if (SelectedAppEntities.length === 0 && !showLoader) {\n        <div (click)=\"ShowAppEntitySelectionDialog()\">\n            <span class=\"fa-solid fa-gear\"></span>\n            Click Here to Select Entities\n        </div>\n    }\n    @if(showLoader) {\n        <kendo-loader></kendo-loader>\n    }\n    @else {\n        <div class=\"main-area margin-top-neg-20\" *ngIf=\"SelectedAppEntities.length > 0\">\n            <app-generic-browser-list \n                iconName=\"aggregateFields\" \n                [items]=\"items\"\n                [categoryEntityID]=\"categoryEntityID\"\n                addText=\"Create New View\"\n                ItemEntityName=\"User Views\"\n                resourceName=\"View\"\n                [title]=\"pageTitle\"\n                [CategoryEntityName]=\"categoryEntityName\"\n                (itemClickEvent)=\"onItemClick($event)\" \n                [selectedFolderID]=\"selectedFolderID\"\n                [showLoader]=\"showLoader\"\n                [viewingResource]=false\n                [displayAsGrid]=\"displayAsGrid\"\n                (AfterAddFolderEvent)=\"onEvent($event)\"\n                (AfterAddItemEvent)=\"onEvent($event)\"\n                (AfterDeleteItemEvent)=\"onEvent($event)\"\n                (AfterDeleteFolderEvent)=\"onEvent($event)\"\n                (viewModeChangeEvent)=\"onViewModeChange($event)\"\n                (BeforeAddItemEvent)=\"createNewView($event)\"\n                (BeforeUpdateItemEvent)=\"editView($event)\"\n            />\n        </div>\n    }\n\n    <mj-user-view-properties-dialog #userViewDialog [ShowPropertiesButton]=\"false\"(dialogClosed)=\"OnViewPropertiesDialogClose($event)\"></mj-user-view-properties-dialog>\n</div>\n", styles: [".app-container {\n     padding: 15px;\n}\n  \n.entity-list {\n     width: 500px;\n}\n.favorites-list {\n     width: 400px;\n}\n\n.cloumn {\n     flex-direction: column;\n}\n.example-col {\n     overflow-x: auto;\n}\n.example-col .k-selected  {\n     font-weight: 800;\n     color: var(--tdata-color);\n     border-bottom: 3px solid var(--border-blue) !important;\n     background: var(--white-color);\n}\n\n.margin-top-neg-20 {\n     margin-top: -20px;\n     padding: 0px !important\n}\n\n.header-wrap {\n     display: flex;\n     justify-content: space-between;\n     align-items: center;\n     margin-bottom: 10px;\n     width: 100%;\n}\n\n.title-wrap {\n     flex-grow: 1;\n     font-size: 24px;\n}\n.title-wrap-inner {\n     display: block;\n}\n\n.breadcrumb {\n     color: darkblue;\n     cursor: pointer;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n\n.breadcrumb-end {\n     display: inline;\n     margin-left: 5px;\n}\n\n\n.breadcrumb-separator {\n     font-size: 14px;\n     display: inline;\n     margin-left: 5px;\n     margin-right: 5px;\n}\n.home-icon {\n     margin-right: 5px;\n     font-size: 18px;\n     vertical-align: middle;\n}\n  \n.title-icon {\n     font-size: 32px;\n     margin-right: 15px;\n}\n\n.config-button {\n     display: flex;\n     align-items: center;\n}\n\n.button-icon {\n     margin-right: 5px;\n     font-size: 16px;\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
+    }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.Location }, { type: i3.SharedService }, { type: i0.ChangeDetectorRef }], { entityRowRef: [{
             type: ViewChild,
             args: ['entityRow']
         }], viewPropertiesDialog: [{
             type: ViewChild,
             args: ['userViewDialog']
+        }], categoryEntityID: [{
+            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationViewComponent, { className: "ApplicationViewComponent", filePath: "src/lib/app-view/application-view.component.ts", lineNumber: 17 }); })();
-//This is a simple wrapper for the ApplicationEntityInfo class 
-//that just adds a Selected property
-class ApplicationEntityButton {
-    constructor(data) {
-        this.Data = data;
-        this.Name = data.Entity;
-        this.Selected = false;
-    }
-}