@memberjunction/ng-explorer-core 1.4.0 → 1.5.0

package/dist/lib/navigation/navigation.component.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Component, ElementRef, ViewChild, HostListener, HostBinding, Input } from '@angular/core';
 import { NavigationEnd, NavigationSkipped } from '@angular/router';
 import { DrawerComponent } from "@progress/kendo-angular-layout";
-import { Metadata, RunView, LogError } from '@memberjunction/core';
+import { Metadata, RunView, LogError, LogStatus } from '@memberjunction/core';
 import { MJEventType, MJGlobal } from '@memberjunction/global';
 import { EventCodes, SharedService } from '@memberjunction/ng-shared';
 import { BaseResourceComponent, ResourceData } from '@memberjunction/ng-shared';
@@ -85,7 +85,7 @@ function NavigationComponent_kendo_drawer_container_3_For_12_Template(rf, ctx) {
 function NavigationComponent_kendo_drawer_container_3_For_14_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mj-tab-body")(1, "mj-resource", 20);
-    i0.ɵɵlistener("ResourceRecordSaved", function NavigationComponent_kendo_drawer_container_3_For_14_Template_mj_resource_ResourceRecordSaved_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r26); const tab_r20 = restoredCtx.$implicit; const ctx_r25 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r25.SaveSingleWorkspaceItem(tab_r20)); })("ContentLoadingStarted", function NavigationComponent_kendo_drawer_container_3_For_14_Template_mj_resource_ContentLoadingStarted_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r26); const tab_r20 = restoredCtx.$implicit; const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.setTabContentLoadingStatus(tab_r20, true)); })("ContentLoadingComplete", function NavigationComponent_kendo_drawer_container_3_For_14_Template_mj_resource_ContentLoadingComplete_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r26); const tab_r20 = restoredCtx.$implicit; const ctx_r28 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r28.setTabContentLoadingStatus(tab_r20, false)); });
+    i0.ɵɵlistener("ResourceRecordSaved", function NavigationComponent_kendo_drawer_container_3_For_14_Template_mj_resource_ResourceRecordSaved_1_listener($event) { const restoredCtx = i0.ɵɵrestoreView(_r26); const tab_r20 = restoredCtx.$implicit; const ctx_r25 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r25.HandleResourceRecordSaved(tab_r20, $event)); })("ContentLoadingStarted", function NavigationComponent_kendo_drawer_container_3_For_14_Template_mj_resource_ContentLoadingStarted_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r26); const tab_r20 = restoredCtx.$implicit; const ctx_r27 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r27.setTabContentLoadingStatus(tab_r20, true)); })("ContentLoadingComplete", function NavigationComponent_kendo_drawer_container_3_For_14_Template_mj_resource_ContentLoadingComplete_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r26); const tab_r20 = restoredCtx.$implicit; const ctx_r28 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r28.setTabContentLoadingStatus(tab_r20, false)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const tab_r20 = ctx.$implicit;
@@ -176,9 +176,7 @@ export class NavigationComponent {
         this.tabs = [];
         this.closedTabs = []; // should always be empty after using it
         this.tabQueryParams = {};
-        // public activeTabIndex: number = 0;
-        // public selectedTabIndex: number = 0;
-        this.workSpace = {};
+        this.workSpace = undefined;
         this.workSpaceItems = [];
         this.panelItems = [];
         this.showExpansionPanel = false;
@@ -274,7 +272,7 @@ export class NavigationComponent {
             switch (event.event) {
                 case MJEventType.LoggedIn:
                     yield this.loadApp();
-                    yield this.getWorkspace();
+                    yield this.loadWorkspace();
                     this._loggedIn = true;
                     // check for early events and replay them now that we're logged in
                     for (let i = 0; i < this._earlyEvents.length; ++i) {
@@ -310,6 +308,14 @@ export class NavigationComponent {
                                 // another component requested that we add something to our tab structure
                                 this.AddOrSelectTab(event.args);
                                 break;
+                            case EventCodes.CloseCurrentTab:
+                                if (this.mjTabStrip && this.activeTabIndex > 0) {
+                                    this.mjTabStrip.CloseTab(this.activeTabIndex);
+                                }
+                                else {
+                                    LogError("no active tab to close or tabstrip not available");
+                                }
+                                break;
                             default:
                                 break;
                         }
@@ -374,12 +380,11 @@ export class NavigationComponent {
                 // come back to this tab
                 const urlParts = this.router.url.split('?');
                 if (urlParts.length > 1) {
-                    // we have query params, so stash em
+                    // we have query params, so stash them
                     const params = new URLSearchParams(urlParts[1]);
-                    const keys = params.keys();
                     const queryParams = {};
-                    for (const key of keys) {
-                        queryParams[key] = params.get(key);
+                    for (const [key, value] of params.entries()) {
+                        queryParams[key] = value;
                     }
                     this.tabQueryParams['tab_' + this.activeTabIndex] = queryParams;
                 }
@@ -447,42 +452,54 @@ export class NavigationComponent {
             }
         }, 10);
     }
-    getWorkspace() {
+    /**
+     * This method will load the user's workspace and all the workspace items that are part of the workspace from the database.
+     */
+    loadWorkspace() {
         return __awaiter(this, void 0, void 0, function* () {
             const md = new Metadata();
             const rv = new RunView();
             const workspaceParams = {
                 EntityName: "Workspaces",
-                ExtraFilter: `UserID=${md.CurrentUser.ID}`
+                ExtraFilter: `UserID=${md.CurrentUser.ID}`,
+                OrderBy: "UpdatedAt DESC", // by default get the workspace that was most recently updated
+                ResultType: "entity_object" /*we want entity objects back so that we can modify them as needed*/
             };
             const workspaces = yield rv.RunView(workspaceParams);
             if (workspaces.Success) {
-                const workspaceRecord = yield md.GetEntityObject("Workspaces");
                 if (workspaces.Results.length) {
-                    const workspace = workspaces.Results.find((workspace) => workspace.UserID === md.CurrentUser.ID);
-                    yield workspaceRecord.Load(workspace.ID);
+                    this.workSpace = workspaces.Results[0]; // by default get the first one, and since we are sorting by UpdatedAt DESC above, will be most recently modified one. Future feature for multi-workspace support we'll have to adjust this
                 }
                 else {
-                    workspaceRecord.NewRecord();
-                    workspaceRecord.Name = `${md.CurrentUser.Name || md.CurrentUser.ID}'s Workspace`;
-                    workspaceRecord.UserID = md.CurrentUser.ID;
-                    yield workspaceRecord.Save();
+                    // no matching record found, so create a new one
+                    this.workSpace = yield md.GetEntityObject('Workspaces');
+                    this.workSpace.NewRecord();
+                    this.workSpace.Name = `${md.CurrentUser.Name || md.CurrentUser.ID}'s Workspace`;
+                    this.workSpace.UserID = md.CurrentUser.ID;
+                    yield this.workSpace.Save();
                 }
-                this.workSpace = workspaceRecord;
+                if (!this.workSpace)
+                    throw new Error('Error loading workspace');
                 const workspaceItemParams = {
                     EntityName: "Workspace Items",
                     ExtraFilter: `WorkspaceID='${this.workSpace.ID}'`,
+                    OrderBy: "Sequence ASC", // get them in order
                     ResultType: "entity_object" /*we want entity objects back so that we can modify them as needed*/
                 };
                 const workspaceItems = yield rv.RunView(workspaceItemParams);
                 if (workspaceItems.Success) {
                     this.workSpaceItems = workspaceItems.Results;
-                    yield this.LoadWorkSpace();
+                    yield this.LoadWorkspaceItems();
                 }
             }
+            else
+                throw new Error('Error loading workspace');
         });
     }
-    LoadWorkSpace() {
+    /**
+     * This method will load all the workspace items that are part of the workspace currently set in the workSpace member variable
+     */
+    LoadWorkspaceItems() {
         return __awaiter(this, void 0, void 0, function* () {
             const md = new Metadata();
             this.tabs = []; // first clear out the tabs - this is often already the state but in case this is a full refresh, make sure we do this.
@@ -506,7 +523,7 @@ export class NavigationComponent {
                 // now add to data structure
                 yield this.internalAddTab(newTab);
                 setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                    // non-blocking, load dynamically
+                    // non-blocking, load the resource names dynamically as this requires additional DB lookups
                     newTab.label = yield this.GetWorkspaceItemDisplayName(resourceData);
                     newTab.labelLoading = false;
                     if (newTab === this.tabs[this.activeTabIndex - 1]) // subtract one since the activeTabIndex is relative to the full set of tabs and the this.tabs array doesn't include the HOME tab
@@ -522,7 +539,12 @@ export class NavigationComponent {
         else
             this.titleService.setTitle(title + ' (' + this.applicationName + ')');
     }
-    checkForExistingTab(data) {
+    /**
+     * This method is responsible for searching for a matching tab in the existing tab structure of the loaded workspace. It returns either a Tab object or null if one isn't found that matches the ResourceData provided.
+     * @param data
+     * @returns
+     */
+    findExistingTab(data) {
         let existingTab;
         if (data.ResourceType.trim().toLowerCase() === 'search results') {
             // we have a different matching logic for search results because we want to match on the search input as well as the entity
@@ -548,18 +570,36 @@ export class NavigationComponent {
             }
         }
         else {
-            existingTab = this.tabs.find(t => t.data.ResourceTypeID === data.ResourceTypeID &&
-                t.data.ResourceRecordID === data.ResourceRecordID &&
-                data.ResourceRecordID // make sure that we don't match on null/undefined ResourceRecordID's - these should always be NEW tabs
-            );
+            existingTab = this.tabs.find(t => {
+                if (t.data.ResourceTypeID === data.ResourceTypeID &&
+                    t.data.ResourceRecordID === data.ResourceRecordID) {
+                    // we now have to do one more check, we have to make sure that all of the values within the Configuration object match as well
+                    let bMatch = true;
+                    // ignore keys that start with an underscore or are the NewRecordValues key
+                    const keys = Object.keys(data.Configuration).filter(k => !k.startsWith('_') && k.trim().toLowerCase() !== 'newrecordvalues');
+                    for (const key of keys) {
+                        if (data.Configuration[key] !== t.data.Configuration[key]) {
+                            bMatch = false;
+                            break;
+                        }
+                    }
+                    return bMatch;
+                }
+                else
+                    return false;
+            });
         }
         return existingTab;
     }
+    /**
+     * This utility method is used to either Add a tab if a matching tab for the given data parameter isn't found, or to select the existing tab if it already exists.
+     * @param data
+     */
     AddOrSelectTab(data) {
         return __awaiter(this, void 0, void 0, function* () {
             const t = this.tabs;
             this.loader = true;
-            const existingTab = this.checkForExistingTab(data);
+            const existingTab = this.findExistingTab(data);
             if (existingTab) {
                 const index = this.tabs.indexOf(existingTab);
                 // add one because the HOME tab is not in the tabs array but it IS part of our tab structure
@@ -587,8 +627,6 @@ export class NavigationComponent {
                 yield this.internalAddTab(newTab);
                 // select the new tab
                 this.activeTabIndex = this.tabs.length; // this is intentionally past array boundary because ActiveTabIndex includes the Home tab that is not part of the tabs array
-                //this.tabstrip.selectTab(this.activeTabIndex);
-                //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
                 this.sharedService.InvokeManualResize();
                 this.scrollIntoView();
                 setTimeout(() => __awaiter(this, void 0, void 0, function* () {
@@ -648,7 +686,11 @@ export class NavigationComponent {
                 url += `/query/${data.ResourceRecordID}`;
                 break;
             case 'records':
-                url += `/record/${data.ResourceRecordID}?Entity=${data.Configuration.Entity}`;
+                const recIDAsString = data.ResourceRecordID !== null && data.ResourceRecordID !== undefined ? (typeof data.ResourceRecordID === "string" ? data.ResourceRecordID : data.ResourceRecordID.toString()) : "";
+                url += `/record/${recIDAsString.trim()}?Entity=${data.Configuration.Entity}`;
+                if (data.Configuration.NewRecordValues) {
+                    url += `&NewRecordValues=${data.Configuration.NewRecordValues}`;
+                }
                 break;
             case 'search results':
                 url += `/search/${data.Configuration.SearchInput}?Entity=${data.Configuration.Entity}`;
@@ -698,11 +740,8 @@ export class NavigationComponent {
         this.setAppTitle(tab.label);
     }
     scrollIntoView() {
-        // const containerElement = this.tabstrip.wrapper.nativeElement;
-        // setTimeout(() => {
-        //   const newTabElement = containerElement.querySelector(`li:nth-child(${this.activeTabIndex + 1})`);
-        //   newTabElement.scrollIntoView({ inline: 'nearest' });
-        // }, 200);
+        if (this.mjTabStrip)
+            this.mjTabStrip.scrollIntoView(this.activeTabIndex);
     }
     GetWorkspaceItemDisplayName(data) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -715,6 +754,10 @@ export class NavigationComponent {
                 return `Workspace Item ${data.ID}`;
         });
     }
+    /**
+     * Saves the workspace to the database.
+     * @returns
+     */
     SaveWorkspace() {
         return __awaiter(this, void 0, void 0, function* () {
             let bSuccess = true;
@@ -725,10 +768,32 @@ export class NavigationComponent {
             return bSuccess;
         });
     }
+    HandleResourceRecordSaved(tab, resourceRecord) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const oldId = tab.data.ResourceRecordID;
+            tab.data.ResourceRecordID = resourceRecord.PrimaryKey.ToURLSegment();
+            // we need to update the label in case the "Name" of the record changed, or if it was new and no longer is new
+            tab.label = yield this.GetWorkspaceItemDisplayName(tab.data);
+            // now check to see if the old id and the new ID are any different
+            // check for tab names that start with New as well...
+            // and if so we need to replace the state in the URL for Angular so that we don't have a New Record situation in the URL but have the actual ID now
+            //    if (oldId !== tab.data.ResourceRecordID || tab.label?.toLowerCase().trim().startsWith('new') ) {
+            this.updateBrowserURL(tab, tab.data);
+            //  }
+            return yield this.SaveSingleWorkspaceItem(tab);
+        });
+    }
+    /**
+     * Saves a single workspace item to the database.
+     * @param tab
+     * @returns
+     */
     SaveSingleWorkspaceItem(tab) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             try {
+                if (!this.workSpace)
+                    throw new Error('No workspace loaded');
                 let index = this.tabs.indexOf(tab);
                 if (index < 0)
                     index = this.tabs.length; // this situation occurs when the tab hasn't yet been added to the tabs collection so the index will be = the length of the tabs collection
@@ -790,8 +855,9 @@ export class NavigationComponent {
         return __awaiter(this, void 0, void 0, function* () {
             const tabIndex = this.tabs.indexOf(tab);
             if (tabIndex >= 0) {
-                this.removeWorkspaceItem(this.tabs[tabIndex], null /*no transaction group*/); // INTENTIONAL - do not use await here, we want to let the database updates happen in the background
-                //      await this.waitForDomUpdate(); // make sure dom is up to date
+                // INTENTIONAL - do not use await here, we want to let the database updates happen in the background
+                this.removeWorkspaceItem(this.tabs[tabIndex], null /*no transaction group*/);
+                //await this.waitForDomUpdate(); // make sure dom is up to date
                 // now, check to see how many tabs we have left and if we have none, then we need to select the HOME tab
                 if (this.tabs.length > 0) {
                     if (newTabIndex === 0) {
@@ -862,8 +928,6 @@ export class NavigationComponent {
         // make sure that the first tab is selected since this is showing stuff in the Home/Nav tab
         if (this.activeTabIndex !== 0) {
             this.activeTabIndex = 0;
-            //this.tabstrip.selectTab(0);
-            //this.renderer.selectRootElement(this.tabstrip.wrapper.nativeElement).focus()
         }
         this.setAppTitle(ev.item.text);
     }
@@ -878,9 +942,8 @@ export class NavigationComponent {
             this.mjTabStrip.SelectedTabIndex = index;
     }
     getEntityItemFromViewItem(viewItem) {
-        let entityItem = null;
         for (let item of this.drawerItems) {
-            if (item.id == viewItem.parentId) {
+            if (item.id === viewItem.parentId) {
                 // got the parent, this is the entity
                 return item;
             }
@@ -952,6 +1015,8 @@ export class NavigationComponent {
             yield this.loadResourceType('Queries', 'Queries', '/queries', md.CurrentUser.ID);
             // Files
             yield this.loadFiles();
+            // Lists
+            yield this.loadLists();
             // Settings
             yield this.loadSettings(md);
             this.loading = false;
@@ -993,6 +1058,18 @@ export class NavigationComponent {
             this.drawerItems.push(drawerItem);
         });
     }
+    loadLists() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const drawerItem = {
+                id: 'Lists',
+                selected: false,
+                text: 'Lists',
+                path: '/lists',
+                icon: "fa-solid fa-list"
+            };
+            this.drawerItems.push(drawerItem);
+        });
+    }
     loadFiles() {
         return __awaiter(this, void 0, void 0, function* () {
             const rv = new RunView();
@@ -1039,7 +1116,7 @@ export class NavigationComponent {
                 this.drawerItems.push(drawerItem);
             }
             else {
-                console.log("no resource type found for " + resourceType);
+                LogStatus("no resource type found for " + resourceType);
             }
         });
     }
@@ -1061,7 +1138,7 @@ export class NavigationComponent {
     }
 }
 NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService), i0.ɵɵdirectiveInject(i3.Location), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i4.Title), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["app-navigation"]], viewQuery: function NavigationComponent_Query(rf, ctx) { if (rf & 1) {
+NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["mj-navigation"]], viewQuery: function NavigationComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(DrawerComponent, 5);
         i0.ɵɵviewQuery(_c0, 5);
         i0.ɵɵviewQuery(_c1, 5);
@@ -1093,7 +1170,7 @@ NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Navigat
     } }, dependencies: [i1.RouterOutlet, i3.NgClass, i3.NgIf, i3.NgStyle, i5.LoaderComponent, i6.FillContainer, i7.DrawerComponent, i7.DrawerContainerComponent, i7.DrawerContentComponent, i7.DrawerItemTemplateDirective, i8.SkipButtonComponent, i9.MJTabStripComponent, i9.MJTabBodyComponent, i9.MJTabComponent, i10.ResourceContainerComponent], styles: [".navigation-wrap[_ngcontent-%COMP%] {\n  height: calc(100vh - 80px);\n  width: 100%;\n  overflow:hidden\n}\n\n.nav-tab-title[_ngcontent-%COMP%] {\n  margin-left: 10px;\n}\n\n.drawer-item-icon[_ngcontent-%COMP%] {\n  width: 12px;\n  height: 12px;\n}\n\n.context-menu[_ngcontent-%COMP%] {\n  position: fixed;\n  z-index: 9999;\n  background-color: #ffffff;\n  border: 1px solid #ccc;\n  padding: 3px 3px;\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.context-menu-item[_ngcontent-%COMP%] {\n  padding: 8px 16px;\n  cursor: pointer;\n}\n\n.context-menu-item[_ngcontent-%COMP%]:hover {\n  background-color: #f1f1f1;\n}\n  .navigation-wrap .drawer-container {\n  background: var(--gray-color);\n}\n  .navigation-wrap .drawer-container .k-content {\n  padding: 25px;\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\n  background: var(--med-gray);\n  padding-left: 20px;\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\n  border: 1px solid var(--light-gray);\n  background: var(--light-gray);\n  border-radius: 8px 8px 0 0;\n  color: var(--blue-text);\n\n}\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\n  color: var(--blue-text);\n}\n\n  .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\n\n  background: var(--med-gray);\n  border-radius: 0;\n  border-right: 1px solid #909090;\n}\n\n.tab-resource[_ngcontent-%COMP%] {\n  display: block;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationComponent, [{
         type: Component,
-        args: [{ selector: 'app-navigation', template: "<div class=\"navigation-wrap\" [ngClass]=\"{'waiting': loader}\"  #drawerWrapper>\n  <kendo-loader *ngIf=\"loading\" type=\"converging-spinner\" ></kendo-loader>\n  <kendo-drawer-container *ngIf=\"!loading\" >\n    <kendo-drawer\n      #drawer\n      [items]=\"drawerItems\"\n      [mode]=\"mode\"\n      [mini]=\"mini\"\n      [animation]=\"false\"\n      (select)=\"onDrawerSelect($event)\"\n      [autoCollapse]=\"false\"\n    >\n      <ng-template kendoDrawerItemTemplate let-item>\n        <div class=\"drawer-item-icon\">\n          <span [class]=\"item.icon\"></span>\n        </div>\n        <div class=\"item-descr-wrap\" *ngIf=\"!mini\">\n          <div>{{ item.text }}</div>\n          <span class=\"item-descr\">{{ item.description }}</span>\n        </div>\n      </ng-template>    \n    </kendo-drawer>\n    <kendo-drawer-content mjFillContainer>\n\n      <mj-tabstrip #mjTabstrip mjFillContainer (TabClosed)=\"handleTabClosed($event)\" (TabSelected)=\"handleTabSelected($event)\" (TabContextMenu)=\"handleTabContextMenu($event)\">\n        <mj-tab [TabCloseable]=\"false\">\n          Home\n        </mj-tab>\n        <mj-tab-body>\n          <router-outlet></router-outlet>\n        </mj-tab-body>\n\n        @for(tab of tabs; track tab.id; let i = $index) {\n          <mj-tab [TabCloseable]=\"true\">\n            @if(tab?.contentLoading) {\n              <span class=\"fa-regular fa-clock\"></span>\n            }\n            @else if (tab?.icon) {\n              <span [class]=\"tab.icon\"></span>\n            }\n            {{ tab.labelLoading ? 'Loading...' : tab.label }}\n          </mj-tab>\n        }\n        @for(tab of tabs; track tab.id; let i = $index) {\n          <mj-tab-body>\n            <mj-resource [Data]=\"tab.data\" [isVisible]=\"activeTabIndex - 1 === i\"\n              (ResourceRecordSaved)=\"SaveSingleWorkspaceItem(tab)\"\n              (ContentLoadingStarted)=\"setTabContentLoadingStatus(tab, true)\"\n              (ContentLoadingComplete)=\"setTabContentLoadingStatus(tab, false)\"\n              mjFillContainer\n              class=\"tab-resource\"\n            ></mj-resource>\n          </mj-tab-body>  \n        }\n      </mj-tabstrip>\n    </kendo-drawer-content>\n  </kendo-drawer-container>\n\n  \n  <mj-skip-button\n    action=\"route\"\n  ></mj-skip-button>\n  <!-- Skip Button shows up through the above line of code -->\n</div>\n\n<div class=\"context-menu\" [ngStyle]=\"contextMenuStyle\" *ngIf=\"contextMenuVisible\">\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(1)\">Close All</div>\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(2)\">Close Others</div>\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(3)\">Close Tabs to the Right</div>\n </div>\n", styles: [".navigation-wrap {\n  height: calc(100vh - 80px);\n  width: 100%;\n  overflow:hidden\n}\n\n.nav-tab-title {\n  margin-left: 10px;\n}\n\n.drawer-item-icon {\n  width: 12px;\n  height: 12px;\n}\n\n.context-menu {\n  position: fixed;\n  z-index: 9999;\n  background-color: #ffffff;\n  border: 1px solid #ccc;\n  padding: 3px 3px;\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.context-menu-item {\n  padding: 8px 16px;\n  cursor: pointer;\n}\n\n.context-menu-item:hover {\n  background-color: #f1f1f1;\n}\n::ng-deep .navigation-wrap .drawer-container {\n  background: var(--gray-color);\n}\n::ng-deep .navigation-wrap .drawer-container .k-content {\n  padding: 25px;\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\n  background: var(--med-gray);\n  padding-left: 20px;\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\n  border: 1px solid var(--light-gray);\n  background: var(--light-gray);\n  border-radius: 8px 8px 0 0;\n  color: var(--blue-text);\n\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\n  color: var(--blue-text);\n}\n\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\n\n  background: var(--med-gray);\n  border-radius: 0;\n  border-right: 1px solid #909090;\n}\n\n.tab-resource {\n  display: block;\n}"] }]
+        args: [{ selector: 'mj-navigation', template: "<div class=\"navigation-wrap\" [ngClass]=\"{'waiting': loader}\"  #drawerWrapper>\n  <kendo-loader *ngIf=\"loading\" type=\"converging-spinner\" ></kendo-loader>\n  <kendo-drawer-container *ngIf=\"!loading\" >\n    <kendo-drawer\n      #drawer\n      [items]=\"drawerItems\"\n      [mode]=\"mode\"\n      [mini]=\"mini\"\n      [animation]=\"false\"\n      (select)=\"onDrawerSelect($event)\"\n      [autoCollapse]=\"false\"\n    >\n      <ng-template kendoDrawerItemTemplate let-item>\n        <div class=\"drawer-item-icon\">\n          <span [class]=\"item.icon\"></span>\n        </div>\n        <div class=\"item-descr-wrap\" *ngIf=\"!mini\">\n          <div>{{ item.text }}</div>\n          <span class=\"item-descr\">{{ item.description }}</span>\n        </div>\n      </ng-template>    \n    </kendo-drawer>\n    <kendo-drawer-content mjFillContainer>\n\n      <mj-tabstrip #mjTabstrip mjFillContainer (TabClosed)=\"handleTabClosed($event)\" (TabSelected)=\"handleTabSelected($event)\" (TabContextMenu)=\"handleTabContextMenu($event)\">\n        <mj-tab [TabCloseable]=\"false\">\n          Home\n        </mj-tab>\n        <mj-tab-body>\n          <router-outlet></router-outlet>\n        </mj-tab-body>\n\n        @for(tab of tabs; track tab.id; let i = $index) {\n          <mj-tab [TabCloseable]=\"true\">\n            @if(tab?.contentLoading) {\n              <span class=\"fa-regular fa-clock\"></span>\n            }\n            @else if (tab?.icon) {\n              <span [class]=\"tab.icon\"></span>\n            }\n            {{ tab.labelLoading ? 'Loading...' : tab.label }}\n          </mj-tab>\n        }\n        @for(tab of tabs; track tab.id; let i = $index) {\n          <mj-tab-body>\n            <mj-resource [Data]=\"tab.data\" [isVisible]=\"activeTabIndex - 1 === i\"\n              (ResourceRecordSaved)=\"HandleResourceRecordSaved(tab, $event)\"\n              (ContentLoadingStarted)=\"setTabContentLoadingStatus(tab, true)\"\n              (ContentLoadingComplete)=\"setTabContentLoadingStatus(tab, false)\"\n              mjFillContainer\n              class=\"tab-resource\"\n            ></mj-resource>\n          </mj-tab-body>  \n        }\n      </mj-tabstrip>\n    </kendo-drawer-content>\n  </kendo-drawer-container>\n\n  \n  <mj-skip-button\n    action=\"route\"\n  ></mj-skip-button>\n  <!-- Skip Button shows up through the above line of code -->\n</div>\n\n<div class=\"context-menu\" [ngStyle]=\"contextMenuStyle\" *ngIf=\"contextMenuVisible\">\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(1)\">Close All</div>\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(2)\">Close Others</div>\n  <div class=\"context-menu-item\" (click)=\"handleContextMenuOption(3)\">Close Tabs to the Right</div>\n </div>\n", styles: [".navigation-wrap {\n  height: calc(100vh - 80px);\n  width: 100%;\n  overflow:hidden\n}\n\n.nav-tab-title {\n  margin-left: 10px;\n}\n\n.drawer-item-icon {\n  width: 12px;\n  height: 12px;\n}\n\n.context-menu {\n  position: fixed;\n  z-index: 9999;\n  background-color: #ffffff;\n  border: 1px solid #ccc;\n  padding: 3px 3px;\n  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);\n}\n\n.context-menu-item {\n  padding: 8px 16px;\n  cursor: pointer;\n}\n\n.context-menu-item:hover {\n  background-color: #f1f1f1;\n}\n::ng-deep .navigation-wrap .drawer-container {\n  background: var(--gray-color);\n}\n::ng-deep .navigation-wrap .drawer-container .k-content {\n  padding: 25px;\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper {\n  background: var(--med-gray);\n  padding-left: 20px;\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item.k-active{\n  border: 1px solid var(--light-gray);\n  background: var(--light-gray);\n  border-radius: 8px 8px 0 0;\n  color: var(--blue-text);\n\n}\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item:hover {\n  color: var(--blue-text);\n}\n\n::ng-deep .navigation-wrap .drawer-container .k-tabstrip-items-wrapper .k-item {\n\n  background: var(--med-gray);\n  border-radius: 0;\n  border-right: 1px solid #909090;\n}\n\n.tab-resource {\n  display: block;\n}"] }]
     }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }, { type: i3.Location }, { type: i0.Renderer2 }, { type: i4.Title }, { type: i0.ChangeDetectorRef }], { applicationName: [{
             type: Input
         }], isMobileScreen: [{

package/dist/lib/resource-wrappers/record-resource.component.d.ts

@@ -3,8 +3,8 @@ import { CompositeKey } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 export declare function LoadRecordResource(): void;
 export declare class EntityRecordResource extends BaseResourceComponent {
-    get CompositeKey(): CompositeKey;
-    static GetCompositeKey(data: ResourceData): CompositeKey;
+    get PrimaryKey(): CompositeKey;
+    static GetPrimaryKey(data: ResourceData): CompositeKey;
     GetResourceDisplayName(data: ResourceData): Promise<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<EntityRecordResource, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EntityRecordResource, "mj-record-resource", never, {}, {}, never, never, false, never>;

package/dist/lib/resource-wrappers/record-resource.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"record-resource.component.d.ts","sourceRoot":"","sources":["../../../src/lib/resource-wrappers/record-resource.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EAAY,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAE9D,wBAAgB,kBAAkB,SAEjC;AAED,qBAKa,oBAAqB,SAAQ,qBAAqB;IAC3D,IAAW,YAAY,IAAI,YAAY,CAEtC;WAEa,eAAe,CAAC,IAAI,EAAE,YAAY,GAAG,YAAY;IAYzD,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAjBxD,oBAAoB;2CAApB,oBAAoB;CA6BhC"}
+{"version":3,"file":"record-resource.component.d.ts","sourceRoot":"","sources":["../../../src/lib/resource-wrappers/record-resource.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEhF,OAAO,EAAY,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAE9D,wBAAgB,kBAAkB,SAEjC;AAED,qBAKa,oBAAqB,SAAQ,qBAAqB;IAC3D,IAAW,UAAU,IAAI,YAAY,CAEpC;WAEa,aAAa,CAAC,IAAI,EAAE,YAAY,GAAG,YAAY;IAYvD,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAjBxD,oBAAoB;2CAApB,oBAAoB;CAiChC"}

package/dist/lib/resource-wrappers/record-resource.component.js

@@ -25,10 +25,10 @@ export function LoadRecordResource() {
     const test = new EntityRecordResource(); // this looks really dumb. Thing is, in production builds, tree shaking causes the class below to not be included in the bundle. This is a hack to force it to be included.
 }
 let EntityRecordResource = EntityRecordResource_1 = class EntityRecordResource extends BaseResourceComponent {
-    get CompositeKey() {
-        return EntityRecordResource_1.GetCompositeKey(this.Data);
+    get PrimaryKey() {
+        return EntityRecordResource_1.GetPrimaryKey(this.Data);
     }
-    static GetCompositeKey(data) {
+    static GetPrimaryKey(data) {
         const md = new Metadata();
         const e = md.Entities.find(e => e.Name.trim().toLowerCase() === data.Configuration.Entity.trim().toLowerCase());
         if (!e) {
@@ -45,21 +45,25 @@ let EntityRecordResource = EntityRecordResource_1 = class EntityRecordResource e
             }
             else {
                 const md = new Metadata();
-                let compositeKey = EntityRecordResource_1.GetCompositeKey(data);
-                const name = yield md.GetEntityRecordName(data.Configuration.Entity, compositeKey);
-                const displayId = compositeKey.KeyValuePairs.length > 1 ? compositeKey.Values() : compositeKey.GetValueByIndex(0);
-                return (name ? name : data.Configuration.Entity) + ` (${displayId})`;
+                let pk = EntityRecordResource_1.GetPrimaryKey(data);
+                if (pk.HasValue) {
+                    const name = yield md.GetEntityRecordName(data.Configuration.Entity, pk);
+                    const displayId = pk.KeyValuePairs.length > 1 ? pk.Values() : pk.GetValueByIndex(0);
+                    return (name ? name : data.Configuration.Entity) + ` (${displayId})`;
+                }
+                else
+                    return `New ${data.Configuration.Entity} Record`;
             }
         });
     }
 };
 EntityRecordResource.ɵfac = /*@__PURE__*/ (() => { let ɵEntityRecordResource_BaseFactory; return function EntityRecordResource_Factory(t) { return (ɵEntityRecordResource_BaseFactory || (ɵEntityRecordResource_BaseFactory = i0.ɵɵgetInheritedFactory(EntityRecordResource)))(t || EntityRecordResource); }; })();
-EntityRecordResource.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityRecordResource, selectors: [["mj-record-resource"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 2, consts: [["mjFillContainer", "", 3, "CompositeKey", "entityName", "loadComplete"]], template: function EntityRecordResource_Template(rf, ctx) { if (rf & 1) {
+EntityRecordResource.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityRecordResource, selectors: [["mj-record-resource"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 3, consts: [["mjFillContainer", "", 3, "PrimaryKey", "entityName", "newRecordValues", "loadComplete", "recordSaved"]], template: function EntityRecordResource_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "mj-single-record", 0);
-        i0.ɵɵlistener("loadComplete", function EntityRecordResource_Template_mj_single_record_loadComplete_0_listener() { return ctx.NotifyLoadComplete(); });
+        i0.ɵɵlistener("loadComplete", function EntityRecordResource_Template_mj_single_record_loadComplete_0_listener() { return ctx.NotifyLoadComplete(); })("recordSaved", function EntityRecordResource_Template_mj_single_record_recordSaved_0_listener($event) { return ctx.ResourceRecordSaved($event); });
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("CompositeKey", ctx.CompositeKey)("entityName", ctx.Data.Configuration.Entity);
+        i0.ɵɵproperty("PrimaryKey", ctx.PrimaryKey)("entityName", ctx.Data.Configuration.Entity)("newRecordValues", ctx.Data.Configuration.NewRecordValues);
     } }, dependencies: [i1.FillContainer, i2.SingleRecordComponent], encapsulation: 2 });
 EntityRecordResource = EntityRecordResource_1 = __decorate([
     RegisterClass(BaseResourceComponent, 'Records')
@@ -69,7 +73,7 @@ export { EntityRecordResource };
         type: Component,
         args: [{
                 selector: 'mj-record-resource',
-                template: `<mj-single-record [CompositeKey]="this.CompositeKey" [entityName]="Data.Configuration.Entity" (loadComplete)="NotifyLoadComplete()" mjFillContainer></mj-single-record>`
+                template: `<mj-single-record [PrimaryKey]="this.PrimaryKey" [entityName]="Data.Configuration.Entity" [newRecordValues]="Data.Configuration.NewRecordValues" (loadComplete)="NotifyLoadComplete()" (recordSaved)="ResourceRecordSaved($event)" mjFillContainer></mj-single-record>`
             }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityRecordResource, { className: "EntityRecordResource", filePath: "src/lib/resource-wrappers/record-resource.component.ts", lineNumber: 15 }); })();

package/dist/lib/single-list-detail/single-list-detail.component.d.ts

@@ -0,0 +1,26 @@
+import { OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { BaseEntity } from '@memberjunction/core';
+import { SharedService } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+export declare class SingleListDetailComponent implements OnInit {
+    private router;
+    private route;
+    private sharedService;
+    private listRecord;
+    showLoader: boolean;
+    gridData: BaseEntity[];
+    listName: string;
+    showAddDialog: boolean;
+    showAddLoader: boolean;
+    userViews: BaseEntity[];
+    selectedUserView: BaseEntity | null;
+    constructor(router: Router, route: ActivatedRoute, sharedService: SharedService);
+    ngOnInit(): Promise<void>;
+    toggleAddDialog(show: boolean): Promise<void>;
+    addTolist(): Promise<void>;
+    private loadEntityViews;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SingleListDetailComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleListDetailComponent, "mj-list-detail", never, {}, {}, never, never, false, never>;
+}
+//# sourceMappingURL=single-list-detail.component.d.ts.map

package/dist/lib/single-list-detail/single-list-detail.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-list-detail.component.d.ts","sourceRoot":"","sources":["../../../src/lib/single-list-detail/single-list-detail.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,UAAU,EAA0D,MAAM,sBAAsB,CAAC;AAE1G,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAE1D,qBAKa,yBAA0B,YAAW,MAAM;IAWvC,OAAO,CAAC,MAAM;IAAU,OAAO,CAAC,KAAK;IAAkB,OAAO,CAAC,aAAa;IAVzF,OAAO,CAAC,UAAU,CAA2B;IAEtC,UAAU,EAAE,OAAO,CAAS;IAC5B,QAAQ,EAAE,UAAU,EAAE,CAAM;IAC5B,QAAQ,EAAE,MAAM,CAAM;IACtB,aAAa,EAAE,OAAO,CAAS;IAC/B,aAAa,EAAE,OAAO,CAAS;IAC/B,SAAS,EAAE,UAAU,EAAE,CAAM;IAC7B,gBAAgB,EAAE,UAAU,GAAG,IAAI,CAAQ;gBAE7B,MAAM,EAAE,MAAM,EAAU,KAAK,EAAE,cAAc,EAAU,aAAa,EAAE,aAAa;IAE3F,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAiEzB,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7C,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;YAsBzB,eAAe;yCA7GpB,yBAAyB;2CAAzB,yBAAyB;CAsIrC"}