@memberjunction/ng-base-forms 1.4.0 → 1.4.1

package/dist/lib/base-form-component.js

@@ -10,22 +10,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Directive, ViewChildren, ViewChild } from '@angular/core';
 import { Subject, debounceTime, fromEvent } from 'rxjs';
 import { EntityInfo, EntityPermissionType, Metadata, LogError } from '@memberjunction/core';
-import { UserViewGridComponent } from '@memberjunction/ng-user-view-grid';
 import { BaseRecordComponent } from './base-record-component';
+import { BaseFormComponentEventCodes } from '@memberjunction/ng-shared';
 import { MJTabStripComponent } from '@memberjunction/ng-tabstrip';
+import { MJEventType, MJGlobal } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/router";
 const _c0 = ["topArea"];
 export class BaseFormComponent extends BaseRecordComponent {
-    constructor(elementRef, sharedService, router, route) {
+    constructor(elementRef, sharedService, router, route, cdr) {
         super();
         this.elementRef = elementRef;
         this.sharedService = sharedService;
         this.router = router;
         this.route = route;
-        this.activeTabIndex = 0;
-        this.selectedTab = 0;
+        this.cdr = cdr;
         this.EditMode = false;
         this.BottomMargin = 10;
         this.TabHeight = '500px';
@@ -46,20 +46,22 @@ export class BaseFormComponent extends BaseRecordComponent {
         this.__debug = false;
         this.resizeSub = null;
         this._isFavorite = false;
-        this._tabIndexes = [];
         this._tabMargin = 10;
         this.setupSplitterLayoutDebounce();
     }
+    get TabStripComponent() {
+        return this.tabComponent;
+    }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.record) {
                 const md = new Metadata();
-                this._isFavorite = yield md.GetRecordFavoriteStatus(md.CurrentUser.ID, this.record.EntityInfo.Name, this.record.CompositeKey);
+                this._isFavorite = yield md.GetRecordFavoriteStatus(md.CurrentUser.ID, this.record.EntityInfo.Name, this.record.PrimaryKey);
                 this.FavoriteInitDone = true;
                 // DEBUG ONLY output to console our full record info for debugging
                 if (this.__debug) {
                     const start = new Date().getTime();
-                    console.log('Full Record Info: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.Value);
+                    console.log('Full Record Info: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString());
                     const dataObject = yield this.record.GetDataObject({
                         includeRelatedEntityData: true,
                         oldValues: false,
@@ -82,17 +84,13 @@ export class BaseFormComponent extends BaseRecordComponent {
     ngAfterViewInit() {
         this.setTabHeight();
         this.route.queryParams.subscribe(params => {
+            var _a;
             if (!this._updatingBrowserUrl) {
                 // only do this if WE didn't invoke the browser URL update
                 const tabName = params['tab'];
                 if (tabName && tabName.length > 0) {
                     // Select the proper tab based on the tabName
-                    const tabIndex = this.GetTabIndex(tabName);
-                    if (tabIndex >= 0) {
-                        // found the tab index, if we don't find it, do nothing
-                        this.activeTabIndex = tabIndex;
-                        this.tabComponent.SelectedTabIndex = tabIndex;
-                    }
+                    (_a = this.tabComponent) === null || _a === void 0 ? void 0 : _a.SelectTabByName(tabName);
                 }
             }
             // now resize after a pause to allow the UI to settle
@@ -101,11 +99,6 @@ export class BaseFormComponent extends BaseRecordComponent {
             }, 250);
         });
         this.CalcTopAreaHeight();
-        // finally, set a timer to set the SelectedTabIndex = SelectedTabIndex to force the tab to refresh
-        setTimeout(() => {
-            if (this.tabComponent)
-                this.tabComponent.SelectedTabIndex = this.activeTabIndex;
-        }, 100);
     }
     /**
      * This method can be called at anytime to re-calculate the height of the top area and set the TopAreaHeight property. This is useful if the top area height changes dynamically
@@ -136,13 +129,12 @@ export class BaseFormComponent extends BaseRecordComponent {
     get PendingRecords() {
         return this._pendingRecords;
     }
-    onTabSelect(tabIndex) {
-        this.activeTabIndex = tabIndex;
+    onTabSelect(e) {
+        var _a;
         this.sharedService.InvokeManualResize();
         // now that we've updated our state and re-sized, also update the browser URL to add the tab name as a query parameter to the URL
-        const tabName = this._tabIndexes[this.activeTabIndex];
         this._updatingBrowserUrl = true;
-        this.router.navigate([], { queryParams: { tab: tabName }, queryParamsHandling: 'merge' });
+        this.router.navigate([], { queryParams: { tab: (_a = e.tab) === null || _a === void 0 ? void 0 : _a.Name }, queryParamsHandling: 'merge' });
         this._updatingBrowserUrl = true;
     }
     StartEditMode() {
@@ -155,11 +147,11 @@ export class BaseFormComponent extends BaseRecordComponent {
         if (this.record) {
             const changes = this.record.GetAll(false, true);
             const oldValues = this.record.GetAll(true, true);
-            console.log('Changes for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.Value);
+            console.log('Changes for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString());
             console.log(changes);
             console.log('Old Values');
             console.log(oldValues);
-            alert('Changes for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.Value + '\n\n' + JSON.stringify(changes, null, 2) + '\n\nOld Values\n\n' + JSON.stringify(oldValues, null, 2));
+            alert('Changes for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString() + '\n\n' + JSON.stringify(changes, null, 2) + '\n\nOld Values\n\n' + JSON.stringify(oldValues, null, 2));
         }
     }
     RemoveFavorite() {
@@ -175,7 +167,7 @@ export class BaseFormComponent extends BaseRecordComponent {
     SetFavoriteStatus(isFavorite) {
         return __awaiter(this, void 0, void 0, function* () {
             const md = new Metadata();
-            yield md.SetRecordFavoriteStatus(md.CurrentUser.ID, this.record.EntityInfo.Name, this.record.CompositeKey, isFavorite);
+            yield md.SetRecordFavoriteStatus(md.CurrentUser.ID, this.record.EntityInfo.Name, this.record.PrimaryKey, isFavorite);
             this._isFavorite = isFavorite;
         });
     }
@@ -209,44 +201,56 @@ export class BaseFormComponent extends BaseRecordComponent {
     GridEditMode() {
         return this.EditMode ? "Queue" : "None";
     }
-    GetTabIndex(tabName) {
-        return this._tabIndexes.indexOf(tabName);
-    }
-    RegisterTabs(tabs) {
-        // copy the array, clear existing array and copy all elements
-        this._tabIndexes.splice(0, this._tabIndexes.length);
-        for (let i = 0; i < tabs.length; i++)
-            this.RegisterTab(tabs[i]);
-    }
-    RegisterTab(tabName) {
-        const currentIndex = this._tabIndexes.indexOf(tabName);
-        if (currentIndex === -1) {
-            this._tabIndexes.push(tabName);
-            return this._tabIndexes.length - 1;
-        }
-        else
-            return currentIndex;
-    }
+    /**
+    * Returns true if the tabName specified is the currently displayed tab, otherwise returns false
+    * @param tabName
+    * @returns
+    */
     IsCurrentTab(tabName) {
-        if (this._tabIndexes.length === 0 || this._tabIndexes.indexOf(tabName) === -1)
-            return false;
-        else
-            return this.activeTabIndex === this.GetTabIndex(tabName);
-    }
-    RegisterAndCheckIfCurrentTab(tabName) {
-        this.RegisterTab(tabName);
-        return this.IsCurrentTab(tabName);
+        var _a, _b;
+        const tab = (_a = this.tabComponent) === null || _a === void 0 ? void 0 : _a.GetTabByName(tabName);
+        return (tab === null || tab === void 0 ? void 0 : tab.index) === ((_b = this.tabComponent) === null || _b === void 0 ? void 0 : _b.SelectedTabIndex);
     }
     BuildRelationshipViewParams(item) {
         return EntityInfo.BuildRelationshipViewParams(this.record, item); // new helper method in EntityInfo
     }
+    /**
+     * Builds a RunViewParams object for a related entity based on the relationship between the current entity and the related entity
+     * @param relatedEntityName
+     * @returns
+     */
     BuildRelationshipViewParamsByEntityName(relatedEntityName) {
+        const eri = this.GetEntityRelationshipByRelatedEntityName(relatedEntityName);
+        if (eri)
+            return this.BuildRelationshipViewParams(eri);
+        else
+            return {};
+    }
+    /**
+     * Looks up and returns the EntityRelationshipInfo object for the related entity name
+     * @param relatedEntityName
+     * @returns
+     */
+    GetEntityRelationshipByRelatedEntityName(relatedEntityName) {
         if (this.record) {
-            const eri = this.record.EntityInfo.RelatedEntities.find(x => x.RelatedEntity === relatedEntityName);
-            if (eri)
-                return this.BuildRelationshipViewParams(eri);
+            return this.record.EntityInfo.RelatedEntities.find(x => x.RelatedEntity.trim().toLowerCase() === relatedEntityName.trim().toLowerCase());
         }
-        return {};
+        return undefined;
+    }
+    /**
+     * Builds new record values for a related entity based on the relationship between the current entity and the related entity
+     * @param relatedEntityName
+     * @returns
+     */
+    NewRecordValues(relatedEntityName) {
+        const eri = this.GetEntityRelationshipByRelatedEntityName(relatedEntityName);
+        if (eri)
+            return this.NewRecordValuesByEntityRelationship(eri);
+        else
+            return {};
+    }
+    NewRecordValuesByEntityRelationship(item) {
+        return EntityInfo.BuildRelationshipNewRecordValues(this.record, item); // new helper method in EntityInfo
     }
     GetRelatedEntityTabDisplayName(relatedEntityName) {
         if (this.record) {
@@ -276,18 +280,31 @@ export class BaseFormComponent extends BaseRecordComponent {
         }
         return valResults;
     }
+    RaiseEvent(eventCode) {
+        const p = [];
+        const event = {
+            subEventCode: eventCode,
+            elementRef: this.elementRef,
+            returnValue: {
+                pendingRecords: p
+            }
+        };
+        MJGlobal.Instance.RaiseEvent({
+            event: MJEventType.ComponentEvent,
+            component: this,
+            eventCode: BaseFormComponentEventCodes.BASE_CODE,
+            args: event
+        });
+        return event.returnValue; // if the recipients of the event provided any values, we have them now 
+    }
     SaveRecord(StopEditModeAfterSave) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 try {
                     // atempt to blur the active element to force any pending changes to be committed
                     document.activeElement.blur();
-                    if (this.userViewGridComponents.length > 0) {
-                        // tell all our grids to finish up their editing
-                        // if we have grids, create a slight delay, ensuring focus is lost on components that require that to update the model
-                        this.userViewGridComponents.forEach(grid => { grid.EditingComplete(); });
-                        yield this.Wait(100);
-                    }
+                    // notify child components of this component that they must stop editing with an EDITING_COMPLETE message via MJ_global
+                    this.RaiseEvent('EDITING_COMPLETE');
                 }
                 catch (e2) {
                     // ignore
@@ -341,12 +358,7 @@ export class BaseFormComponent extends BaseRecordComponent {
                         p.Revert();
                     });
                 }
-                if (this.userViewGridComponents && this.userViewGridComponents.length > 0) {
-                    // we have grids, so we need to revert them as well
-                    this.userViewGridComponents.forEach(grid => {
-                        grid.RevertPendingChanges();
-                    });
-                }
+                this.RaiseEvent('REVERT_PENDING_CHANGES');
             }
             // if we get here we are good to go
             this.EditMode = false;
@@ -366,21 +378,14 @@ export class BaseFormComponent extends BaseRecordComponent {
     PopulatePendingRecords() {
         return __awaiter(this, void 0, void 0, function* () {
             // this method is called by the parent class at the right time to populate all of the pending records for a transaction
-            // all we do is talk to all of our grids and get their pending records and xfer them over to the PendingRecords array
+            // all we do is talk to all of our child compoennts and get their pending records and xfer them over to the PendingRecords array
             // the parent class will then take care of the rest...
             this._pendingRecords = []; // wipe out our array first
-            const grids = this.userViewGridComponents;
-            if (grids && grids.length > 0) {
-                for (let i = 0; i < grids.length; i++) {
-                    const grid = grids.get(i);
-                    if (grid) {
-                        yield grid.EditingComplete(); // need to check this and wait for it to make sure grid editing is done before we try to save
-                        grid.PendingRecords.forEach(p => {
-                            // populate our pending grids array from the composite of all the grids
-                            this.PendingRecords.push(p.record);
-                        });
-                    }
-                }
+            this.RaiseEvent('EDITING_COMPLETE'); // first tell the child components to finish up their editing
+            const result = this.RaiseEvent('POPULATE_PENDING_RECORDS');
+            if (result && result.pendingRecords) {
+                for (const p of result.pendingRecords)
+                    this.PendingRecords.push(p);
             }
         });
     }
@@ -456,22 +461,12 @@ export class BaseFormComponent extends BaseRecordComponent {
     splitterLayoutChange() {
         this.splitterLayoutChangeSubject.next();
     }
-    ResizeGrids() {
-        // do with a little timeout to let the visible grid show up and the DOM settle
-        setTimeout(() => {
-            if (this.userViewGridComponents && this.userViewGridComponents.length > 0) {
-                this.userViewGridComponents.forEach(grid => {
-                    //grid.ResizeGrid(); // automatic now via mjFillContainer
-                });
-            }
-        }, 10);
-    }
     ShowDependencies() {
         return __awaiter(this, void 0, void 0, function* () {
             // for now dump to console
             const md = new Metadata();
-            const dep = yield md.GetRecordDependencies(this.record.EntityInfo.Name, this.record.CompositeKey);
-            console.log('Dependencies for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.Value);
+            const dep = yield md.GetRecordDependencies(this.record.EntityInfo.Name, this.record.PrimaryKey);
+            console.log('Dependencies for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.ToString());
             console.log(dep);
             // if (confirm('Do you want to merge records test?') == true) {
             //   const mergeResult = await md.MergeRecords({
@@ -486,7 +481,7 @@ export class BaseFormComponent extends BaseRecordComponent {
     GetRecordDependencies() {
         return __awaiter(this, void 0, void 0, function* () {
             const md = new Metadata();
-            const dependencies = yield md.GetRecordDependencies(this.record.EntityInfo.Name, this.record.CompositeKey);
+            const dependencies = yield md.GetRecordDependencies(this.record.EntityInfo.Name, this.record.PrimaryKey);
             return dependencies;
         });
     }
@@ -504,26 +499,26 @@ export class BaseFormComponent extends BaseRecordComponent {
         }
     }
 }
-BaseFormComponent.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute)); };
+BaseFormComponent.ɵfac = function BaseFormComponent_Factory(t) { return new (t || BaseFormComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
 BaseFormComponent.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseFormComponent, viewQuery: function BaseFormComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(MJTabStripComponent, 5);
         i0.ɵɵviewQuery(_c0, 5);
-        i0.ɵɵviewQuery(UserViewGridComponent, 5);
+        i0.ɵɵviewQuery(MJTabStripComponent, 5);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabComponent = _t.first);
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.topArea = _t.first);
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.userViewGridComponents = _t);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabStrips = _t);
     } }, features: [i0.ɵɵInheritDefinitionFeature] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormComponent, [{
         type: Directive
-    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }], { tabComponent: [{
+    }], () => [{ type: i0.ElementRef }, { type: i1.SharedService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], { tabComponent: [{
             type: ViewChild,
             args: [MJTabStripComponent, { static: false }]
+        }], tabStrips: [{
+            type: ViewChildren,
+            args: [MJTabStripComponent]
         }], topArea: [{
             type: ViewChild,
             args: ['topArea']
-        }], userViewGridComponents: [{
-            type: ViewChildren,
-            args: [UserViewGridComponent]
         }] }); })();

package/dist/lib/link-field.component.d.ts

@@ -0,0 +1,42 @@
+import { AfterViewInit, ElementRef } from "@angular/core";
+import { BaseRecordComponent } from "./base-record-component";
+import { BaseEntity, EntityFieldInfo, EntityInfo } from "@memberjunction/core";
+import * as i0 from "@angular/core";
+/**
+ * This component is used to automatically generate a UI for any field in a given BaseEntity object. The CodeGen tool will generate forms and form sections that
+ * use this component. This component automatically determines the type of the field and generates the appropriate UI element for it. It is possible to use other
+ * elements to render a field as desired in a custom form, think of this component as a nice "base" component you can use for many cases, and you can create custom
+ * components for field rendering/editing when needed.
+ */
+export declare class MJLinkField extends BaseRecordComponent implements AfterViewInit {
+    /**
+     * The record object that contains the field to be rendered. This object should be an instance of BaseEntity or a derived class.
+     */
+    record: BaseEntity;
+    /**
+     * The name of the field in the entity to be rendered.
+     */
+    FieldName: string;
+    /**
+     * For users of this component, if you already know the name of the record we are linking to, provide it here to reduce DB overhead
+     */
+    RecordName?: string;
+    RelatedEntityInfo: EntityInfo | undefined;
+    RecordLinked: boolean;
+    matchingRecords: BaseEntity[];
+    showMatchingRecords: boolean;
+    inputBox: ElementRef;
+    ngAfterViewInit(): Promise<void>;
+    protected AttemptToLinkValue(): Promise<void>;
+    get Value(): any;
+    set Value(val: any);
+    get EntityField(): EntityFieldInfo | undefined;
+    get DisplayName(): string;
+    onClearClicked(): void;
+    RelatedEntityNameField: string;
+    protected fetchMatchingRecords(query: string): Promise<void>;
+    onRecordSelected(linkedRecord: BaseEntity): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MJLinkField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MJLinkField, "mj-link-field", never, { "record": { "alias": "record"; "required": false; }; "FieldName": { "alias": "FieldName"; "required": false; }; "RecordName": { "alias": "RecordName"; "required": false; }; }, {}, never, never, false, never>;
+}
+//# sourceMappingURL=link-field.component.d.ts.map

package/dist/lib/link-field.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-field.component.d.ts","sourceRoot":"","sources":["../../src/lib/link-field.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAoB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAgB,eAAe,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAC;;AAGhH;;;;;GAKG;AACH,qBAKa,WAAY,SAAQ,mBAAoB,YAAW,aAAa;IACzE;;OAEG;IACM,MAAM,EAAG,UAAU,CAAC;IAE7B;;OAEG;IACM,SAAS,EAAE,MAAM,CAAM;IAEhC;;OAEG;IACM,UAAU,CAAC,EAAE,MAAM,CAAM;IAE3B,iBAAiB,EAAE,UAAU,GAAG,SAAS,CAAa;IACtD,YAAY,EAAE,OAAO,CAAS;IAC9B,eAAe,EAAE,UAAU,EAAE,CAAM;IACnC,mBAAmB,EAAE,OAAO,CAAS;IAEH,QAAQ,EAAG,UAAU,CAAC;IAGzD,eAAe;cA4BL,kBAAkB;IAoBlC,IAAW,KAAK,IAAI,GAAG,CAEtB;IAED,IAAW,KAAK,CAAC,GAAG,EAAE,GAAG,EAGxB;IAED,IAAW,WAAW,IAAI,eAAe,GAAG,SAAS,CAEpD;IACD,IAAW,WAAW,IAAI,MAAM,CAM/B;IAGM,cAAc;IAOd,sBAAsB,EAAE,MAAM,CAAM;cAC3B,oBAAoB,CAAC,KAAK,EAAE,MAAM;IA0B3C,gBAAgB,CAAC,YAAY,EAAE,UAAU;yCA/HvC,WAAW;2CAAX,WAAW;CAqIvB"}

package/dist/lib/link-field.component.js

@@ -0,0 +1,207 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, Input, ViewChild } from "@angular/core";
+import { BaseRecordComponent } from "./base-record-component";
+import { CompositeKey, Metadata, RunView } from "@memberjunction/core";
+import { debounceTime, fromEvent } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@progress/kendo-angular-inputs";
+const _c0 = ["inputBox"];
+function MJLinkField_ul_5_li_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 6);
+    i0.ɵɵlistener("click", function MJLinkField_ul_5_li_1_Template_li_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r5); const record_r3 = restoredCtx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r4.onRecordSelected(record_r3)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const record_r3 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.RelatedEntityNameField ? record_r3.Get(ctx_r2.RelatedEntityNameField) : "No Value", " ");
+} }
+function MJLinkField_ul_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 4);
+    i0.ɵɵtemplate(1, MJLinkField_ul_5_li_1_Template, 2, 1, "li", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.matchingRecords);
+} }
+/**
+ * This component is used to automatically generate a UI for any field in a given BaseEntity object. The CodeGen tool will generate forms and form sections that
+ * use this component. This component automatically determines the type of the field and generates the appropriate UI element for it. It is possible to use other
+ * elements to render a field as desired in a custom form, think of this component as a nice "base" component you can use for many cases, and you can create custom
+ * components for field rendering/editing when needed.
+ */
+export class MJLinkField extends BaseRecordComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * The name of the field in the entity to be rendered.
+         */
+        this.FieldName = '';
+        /**
+         * For users of this component, if you already know the name of the record we are linking to, provide it here to reduce DB overhead
+         */
+        this.RecordName = '';
+        this.RelatedEntityInfo = undefined;
+        this.RecordLinked = false;
+        this.matchingRecords = [];
+        this.showMatchingRecords = false;
+        this.RelatedEntityNameField = '';
+    }
+    ngAfterViewInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.record)
+                throw new Error('record property is required');
+            if (!this.FieldName)
+                throw new Error('FieldName property is required');
+            yield this.AttemptToLinkValue();
+            fromEvent(this.inputBox.nativeElement, 'input')
+                .pipe(debounceTime(300))
+                .subscribe(() => {
+                if (!this.RecordLinked) {
+                    this.showMatchingRecords = true;
+                    this.fetchMatchingRecords(this.inputBox.nativeElement.value);
+                }
+            });
+            fromEvent(this.inputBox.nativeElement, 'keydown').subscribe((event) => {
+                if (this.RecordLinked && !['Backspace', 'Delete'].includes(event.key)) {
+                    event.preventDefault();
+                }
+                else if (['Backspace', 'Delete'].includes(event.key)) {
+                    this.RecordName = '';
+                    this.Value = null;
+                    this.RecordLinked = false;
+                }
+            });
+        });
+    }
+    AttemptToLinkValue() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const relatedEntityID = (_a = this.EntityField) === null || _a === void 0 ? void 0 : _a.RelatedEntityID;
+            const md = new Metadata();
+            this.RecordLinked = false;
+            if (relatedEntityID) {
+                this.RelatedEntityInfo = md.EntityByID(relatedEntityID);
+                if (!this.RecordName) {
+                    if (this.Value) {
+                        // at present only support single valued FOREIGN KEYs, will need to upgrade this soon
+                        const pk = new CompositeKey([{ FieldName: this.RelatedEntityInfo.FirstPrimaryKey.Name, Value: this.Value }]);
+                        this.RecordName = yield md.GetEntityRecordName(this.RelatedEntityInfo.Name, pk);
+                        if (!this.RecordName)
+                            this.RecordName = this.Value;
+                        this.RecordLinked = true;
+                    }
+                }
+            }
+        });
+    }
+    get Value() {
+        return this.record.Get(this.FieldName);
+    }
+    set Value(val) {
+        this.record.Set(this.FieldName, val);
+        this.AttemptToLinkValue();
+    }
+    get EntityField() {
+        var _a;
+        return (_a = this.record.Fields.find(f => f.Name === this.FieldName)) === null || _a === void 0 ? void 0 : _a.EntityFieldInfo;
+    }
+    get DisplayName() {
+        const ef = this.EntityField;
+        if (ef)
+            return ef.DisplayNameOrName;
+        else
+            return this.FieldName;
+    }
+    onClearClicked() {
+        this.RecordName = '';
+        this.RecordLinked = false;
+        this.Value = null;
+        this.showMatchingRecords = false;
+    }
+    fetchMatchingRecords(query) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const relatedEntityID = (_a = this.EntityField) === null || _a === void 0 ? void 0 : _a.RelatedEntityID;
+            const md = new Metadata();
+            this.RecordLinked = false;
+            this.matchingRecords = [];
+            if (relatedEntityID) {
+                this.RelatedEntityInfo = md.EntityByID(relatedEntityID);
+                // do a lookup using runView for records that have the Name field that start with the query
+                this.RelatedEntityNameField = this.RelatedEntityInfo.NameField ? this.RelatedEntityInfo.NameField.Name : '';
+                if (this.RelatedEntityNameField) {
+                    const filter = `[${this.RelatedEntityNameField}] LIKE '${query}%'`;
+                    const rv = new RunView();
+                    const result = yield rv.RunView({
+                        EntityName: this.RelatedEntityInfo.Name,
+                        ExtraFilter: filter,
+                        OrderBy: this.RelatedEntityNameField,
+                        ResultType: 'entity_object',
+                        MaxRows: 5
+                    });
+                    if (result && ((_b = result.Results) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                        this.matchingRecords = result.Results.filter(record => record[this.RelatedEntityNameField].toLowerCase().includes(query.toLowerCase()));
+                    }
+                }
+            }
+        });
+    }
+    onRecordSelected(linkedRecord) {
+        this.RecordName = linkedRecord.Get(this.RelatedEntityNameField);
+        this.RecordLinked = true;
+        this.showMatchingRecords = false;
+        this.record.Set(this.FieldName, linkedRecord.FirstPrimaryKey.Value);
+    }
+}
+MJLinkField.ɵfac = /*@__PURE__*/ (() => { let ɵMJLinkField_BaseFactory; return function MJLinkField_Factory(t) { return (ɵMJLinkField_BaseFactory || (ɵMJLinkField_BaseFactory = i0.ɵɵgetInheritedFactory(MJLinkField)))(t || MJLinkField); }; })();
+MJLinkField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJLinkField, selectors: [["mj-link-field"]], viewQuery: function MJLinkField_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 7);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputBox = _t.first);
+    } }, inputs: { record: "record", FieldName: "FieldName", RecordName: "RecordName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 3, consts: [["type", "text", "kendoTextBox", "", 1, "input-box", 3, "ngClass", "ngModel", "ngModelChange"], ["inputBox", ""], ["kendoButton", "", 3, "click"], ["class", "matching-records", 4, "ngIf"], [1, "matching-records"], [3, "click", 4, "ngFor", "ngForOf"], [3, "click"]], template: function MJLinkField_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div")(1, "input", 0, 1);
+        i0.ɵɵtwoWayListener("ngModelChange", function MJLinkField_Template_input_ngModelChange_1_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.RecordName, $event) || (ctx.RecordName = $event); return $event; });
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "button", 2);
+        i0.ɵɵlistener("click", function MJLinkField_Template_button_click_3_listener() { return ctx.onClearClicked(); });
+        i0.ɵɵtext(4, "Clear");
+        i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(5, MJLinkField_ul_5_Template, 2, 1, "ul", 3);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngClass", ctx.RecordLinked ? "record-linked" : "");
+        i0.ɵɵtwoWayProperty("ngModel", ctx.RecordName);
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("ngIf", ctx.showMatchingRecords);
+    } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.TextBoxDirective], styles: [".record-linked[_ngcontent-%COMP%] {\n  color: darkblue;\n  text-decoration: underline;\n}\n\n.input-box[_ngcontent-%COMP%] {\n    width: 400px;\n}\n\nbutton[_ngcontent-%COMP%] {\n    width: 50px;\n}\n\n\n.matching-records[_ngcontent-%COMP%] {\n    width: 400px;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n}\n\n.matching-records[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    padding: 8px;\n    cursor: pointer;\n}\n\n.matching-records[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {\n    background-color: #f0f0f0;\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJLinkField, [{
+        type: Component,
+        args: [{ selector: 'mj-link-field', template: "<!-- <input type=\"text\" class=\"input-box\" [ngClass]=\"RecordLinked ? 'record-linked' : ''\" [(ngModel)]=\"RecordName\" kendoTextBox /><button kendoButton (click)=\"onClearClicked()\">Clear</button>\n -->\n\n<div>\n    <input \n        #inputBox\n        type=\"text\" \n        class=\"input-box\" \n        [ngClass]=\"RecordLinked ? 'record-linked' : ''\" \n        [(ngModel)]=\"RecordName\" \n        kendoTextBox \n    />\n    <button kendoButton (click)=\"onClearClicked()\">Clear</button>\n\n    <ul *ngIf=\"showMatchingRecords\" class=\"matching-records\">\n        <li *ngFor=\"let record of matchingRecords\" (click)=\"onRecordSelected(record)\">\n            {{ RelatedEntityNameField ? record.Get(RelatedEntityNameField) : 'No Value' }}\n        </li>\n    </ul>\n</div>\n", styles: [".record-linked {\n  color: darkblue;\n  text-decoration: underline;\n}\n\n.input-box {\n    width: 400px;\n}\n\nbutton {\n    width: 50px;\n}\n\n\n.matching-records {\n    width: 400px;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n}\n\n.matching-records li {\n    padding: 8px;\n    cursor: pointer;\n}\n\n.matching-records li:hover {\n    background-color: #f0f0f0;\n}\n"] }]
+    }], null, { record: [{
+            type: Input
+        }], FieldName: [{
+            type: Input
+        }], RecordName: [{
+            type: Input
+        }], inputBox: [{
+            type: ViewChild,
+            args: ['inputBox', { static: true }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJLinkField, { className: "MJLinkField", filePath: "src/lib/link-field.component.ts", lineNumber: 17 }); })();

package/dist/lib/section-loader-component.js

@@ -24,7 +24,7 @@ export class SectionLoaderComponent {
         Promise.resolve().then(() => this.loadComponent());
     }
     loadComponent() {
-        console.log("loading component?", `${this.Entity}.${this.Section}`);
+        //console.log("loading component?", `${this.Entity}.${this.Section}`);
         const sectionInfo = MJGlobal.Instance.ClassFactory.GetRegistration(BaseFormSectionComponent, `${this.Entity}.${this.Section}`);
         if (sectionInfo) {
             const componentRef = this.container.createComponent(sectionInfo.SubClass);

package/dist/module.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./lib/section-loader-component";
-import * as i2 from "./lib/form-toolbar";
-import * as i3 from "./lib/base-field-component";
+import * as i2 from "./lib/base-field-component";
+import * as i3 from "./lib/link-field.component";
 import * as i4 from "@angular/common";
 import * as i5 from "@angular/forms";
 import * as i6 from "@memberjunction/ng-tabstrip";
@@ -11,12 +11,14 @@ import * as i9 from "@progress/kendo-angular-inputs";
 import * as i10 from "@progress/kendo-angular-dateinputs";
 import * as i11 from "@progress/kendo-angular-dropdowns";
 import * as i12 from "@memberjunction/ng-link-directives";
-import * as i13 from "@memberjunction/ng-ask-skip";
-import * as i14 from "@progress/kendo-angular-dialog";
-import * as i15 from "@progress/kendo-angular-indicators";
+import * as i13 from "@progress/kendo-angular-dialog";
+import * as i14 from "@progress/kendo-angular-indicators";
+import * as i15 from "@memberjunction/ng-container-directives";
+import * as i16 from "@memberjunction/ng-shared";
+import * as i17 from "ngx-markdown";
 export declare class BaseFormsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseFormsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BaseFormsModule, [typeof i1.SectionLoaderComponent, typeof i2.FormToolbarComponent, typeof i3.MJFormField], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.MJTabStripModule, typeof i7.RecordChangesModule, typeof i8.ButtonsModule, typeof i9.InputsModule, typeof i10.DateInputsModule, typeof i11.DropDownsModule, typeof i12.LinkDirectivesModule, typeof i13.AskSkipModule, typeof i14.DialogsModule, typeof i15.IndicatorsModule], [typeof i1.SectionLoaderComponent, typeof i2.FormToolbarComponent, typeof i3.MJFormField]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BaseFormsModule, [typeof i1.SectionLoaderComponent, typeof i2.MJFormField, typeof i3.MJLinkField], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i6.MJTabStripModule, typeof i7.RecordChangesModule, typeof i8.ButtonsModule, typeof i9.InputsModule, typeof i10.DateInputsModule, typeof i11.DropDownsModule, typeof i12.LinkDirectivesModule, typeof i13.DialogsModule, typeof i14.IndicatorsModule, typeof i15.ContainerDirectivesModule, typeof i16.MemberJunctionSharedModule, typeof i17.MarkdownModule], [typeof i1.SectionLoaderComponent, typeof i2.MJFormField, typeof i3.MJLinkField]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BaseFormsModule>;
 }
 //# sourceMappingURL=module.d.ts.map