@memberjunction/ng-base-forms 0.9.2

package/dist/lib/base-form-component.d.ts

@@ -0,0 +1,76 @@
+import { AfterViewInit, OnInit, OnDestroy, QueryList, ElementRef } from '@angular/core';
+import { EntityInfo, ValidationResult, BaseEntity, EntityPermissionType, EntityRelationshipInfo, RunViewParams } from '@memberjunction/core';
+import { UserViewGridComponent } from '@memberjunction/ng-user-view-grid';
+import { BaseRecordComponent } from './base-record-component';
+import { SharedService } from '@memberjunction/ng-shared';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TabStripComponent } from '@progress/kendo-angular-layout';
+import * as i0 from "@angular/core";
+export declare abstract class BaseFormComponent extends BaseRecordComponent implements AfterViewInit, OnInit, OnDestroy {
+    protected elementRef: ElementRef;
+    protected sharedService: SharedService;
+    protected router: Router;
+    protected route: ActivatedRoute;
+    activeTabIndex: number;
+    selectedTab: number;
+    EditMode: boolean;
+    BottomMargin: number;
+    TabHeight: string;
+    GridBottomMargin: number;
+    FavoriteInitDone: boolean;
+    isHistoryDialogOpen: boolean;
+    private splitterLayoutChangeSubject;
+    private _pendingRecords;
+    private _updatingBrowserUrl;
+    constructor(elementRef: ElementRef, sharedService: SharedService, router: Router, route: ActivatedRoute);
+    tabComponent: TabStripComponent;
+    ngOnInit(): Promise<void>;
+    ngAfterViewInit(): void;
+    private resizeSub;
+    ngOnDestroy(): void;
+    userViewGridComponents: QueryList<UserViewGridComponent>;
+    protected get PendingRecords(): BaseEntity[];
+    onTabSelect(e: any): void;
+    StartEditMode(): void;
+    handleHistoryDialog(): void;
+    RemoveFavorite(): Promise<void>;
+    MakeFavorite(): Promise<void>;
+    SetFavoriteStatus(isFavorite: boolean): Promise<void>;
+    private _isFavorite;
+    get IsFavorite(): boolean;
+    CheckUserPermission(type: EntityPermissionType): boolean;
+    get UserCanEdit(): boolean;
+    get UserCanRead(): boolean;
+    get UserCanCreate(): boolean;
+    get UserCanDelete(): boolean;
+    GridEditMode(): "None" | "Save" | "Queue";
+    private _tabIndexes;
+    GetTabIndex(tabName: string): number;
+    RegisterTabs(tabs: string[]): void;
+    RegisterTab(tabName: string): number;
+    IsCurrentTab(tabName: string): boolean;
+    RegisterAndCheckIfCurrentTab(tabName: string): boolean;
+    protected BuildRelationshipViewParams(item: EntityRelationshipInfo): RunViewParams;
+    BuildRelationshipViewParamsByEntityName(relatedEntityName: string): RunViewParams;
+    GetRelatedEntityTabDisplayName(relatedEntityName: string): string;
+    protected ValidatePendingRecords(): ValidationResult[];
+    Validate(): ValidationResult;
+    SaveRecord(StopEditModeAfterSave: boolean): Promise<boolean>;
+    Wait(duration: number): Promise<void>;
+    CancelEdit(): void;
+    protected PendingRecordsDirty(): boolean;
+    protected PopulatePendingRecords(): Promise<void>;
+    protected InternalSaveRecord(): Promise<boolean>;
+    protected GetTabTopPosition(): number;
+    private _tabMargin;
+    setTabHeight(): void;
+    protected get ContainerObjectHeight(): number;
+    protected ResizeTab(): void;
+    protected setupSplitterLayoutDebounce(): void;
+    splitterLayoutChange(): void;
+    protected ResizeGrids(): void;
+    ShowDependencies(): Promise<void>;
+    get EntityInfo(): EntityInfo | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseFormComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseFormComponent, never, never, {}, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,436 @@
+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 { 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 { TabStripComponent } from '@progress/kendo-angular-layout';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/router";
+export class BaseFormComponent extends BaseRecordComponent {
+    constructor(elementRef, sharedService, router, route) {
+        super();
+        this.elementRef = elementRef;
+        this.sharedService = sharedService;
+        this.router = router;
+        this.route = route;
+        this.activeTabIndex = 0;
+        this.selectedTab = 0;
+        this.EditMode = false;
+        this.BottomMargin = 53;
+        this.TabHeight = '500px';
+        this.GridBottomMargin = 100;
+        this.FavoriteInitDone = false;
+        this.isHistoryDialogOpen = false;
+        this.splitterLayoutChangeSubject = new Subject();
+        this._pendingRecords = [];
+        this._updatingBrowserUrl = false;
+        this.resizeSub = null;
+        this._isFavorite = false;
+        this._tabIndexes = [];
+        this._tabMargin = 10;
+        this.setupSplitterLayoutDebounce();
+    }
+    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.PrimaryKeys.map(pk => { return { FieldName: pk.Name, Value: pk.Value }; }));
+                this.FavoriteInitDone = true;
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.setTabHeight();
+        this.route.queryParams.subscribe(params => {
+            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.selectTab(tabIndex);
+                        // now resize after a pause to allow the UI to settle
+                        setTimeout(() => {
+                            this.sharedService.InvokeManualResize();
+                        }, 100);
+                    }
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.resizeSub) {
+            this.resizeSub.unsubscribe();
+        }
+    }
+    get PendingRecords() {
+        return this._pendingRecords;
+    }
+    onTabSelect(e) {
+        this.activeTabIndex = e.index;
+        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._updatingBrowserUrl = true;
+    }
+    StartEditMode() {
+        this.EditMode = true;
+    }
+    handleHistoryDialog() {
+        this.isHistoryDialogOpen = !this.isHistoryDialogOpen;
+    }
+    RemoveFavorite() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.SetFavoriteStatus(false);
+        });
+    }
+    MakeFavorite() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.SetFavoriteStatus(true);
+        });
+    }
+    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.PrimaryKeys.map(pk => { return { FieldName: pk.Name, Value: pk.Value }; }), isFavorite);
+            this._isFavorite = isFavorite;
+        });
+    }
+    get IsFavorite() {
+        return this._isFavorite;
+    }
+    CheckUserPermission(type) {
+        try {
+            if (this.record)
+                return this.record.CheckPermissions(type, false);
+            else
+                return false;
+        }
+        catch (e) {
+            LogError(e);
+            return false;
+        }
+    }
+    get UserCanEdit() {
+        return this.CheckUserPermission(EntityPermissionType.Update);
+    }
+    get UserCanRead() {
+        return this.CheckUserPermission(EntityPermissionType.Read);
+    }
+    get UserCanCreate() {
+        return this.CheckUserPermission(EntityPermissionType.Create);
+    }
+    get UserCanDelete() {
+        return this.CheckUserPermission(EntityPermissionType.Delete);
+    }
+    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;
+    }
+    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);
+    }
+    BuildRelationshipViewParams(item) {
+        return EntityInfo.BuildRelationshipViewParams(this.record, item); // new helper method in EntityInfo
+    }
+    BuildRelationshipViewParamsByEntityName(relatedEntityName) {
+        if (this.record) {
+            const eri = this.record.EntityInfo.RelatedEntities.find(x => x.RelatedEntity === relatedEntityName);
+            if (eri)
+                return this.BuildRelationshipViewParams(eri);
+        }
+        return {};
+    }
+    GetRelatedEntityTabDisplayName(relatedEntityName) {
+        if (this.record) {
+            const eri = this.record.EntityInfo.RelatedEntities.find(x => x.RelatedEntity === relatedEntityName);
+            if (eri)
+                return eri.DisplayName;
+        }
+        return relatedEntityName;
+    }
+    ValidatePendingRecords() {
+        const results = [];
+        for (let i = 0; i < this._pendingRecords.length; i++) {
+            const pendingRecord = this._pendingRecords[i];
+            results.push(pendingRecord.Validate());
+        }
+        return results;
+    }
+    Validate() {
+        const valResults = this.record.Validate();
+        const pendingValResults = this.ValidatePendingRecords();
+        for (let i = 0; i < pendingValResults.length; i++) {
+            const pendingValResult = pendingValResults[i];
+            if (!pendingValResult.Success) {
+                valResults.Success = false;
+                valResults.Errors.push(...pendingValResult.Errors);
+            }
+        }
+        return valResults;
+    }
+    SaveRecord(StopEditModeAfterSave) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (this.record) {
+                    yield this.PopulatePendingRecords(); // do this before we validate as we must validate pending records too
+                    const valResults = this.Validate();
+                    if (valResults.Success) {
+                        const result = yield this.InternalSaveRecord();
+                        if (result) {
+                            // we have saved the record, so clear the pending records
+                            this._pendingRecords = [];
+                            if (StopEditModeAfterSave)
+                                this.EditMode = false;
+                            this.sharedService.CreateSimpleNotification('Record saved succesfully', 'success', 2500);
+                            return true;
+                        }
+                        else
+                            this.sharedService.CreateSimpleNotification('Error saving record', 'error', 5000);
+                    }
+                    else {
+                        this.sharedService.CreateSimpleNotification('Validation Errors\n' + valResults.Errors.map(x => x.Message).join('\n'), 'warning', 10000);
+                    }
+                }
+                return false; // if we get here, we have failed/validation error/etc
+            }
+            catch (e) {
+                this.sharedService.CreateSimpleNotification('Error saving record: ' + e, 'error', 5000);
+                return false;
+            }
+        });
+    }
+    Wait(duration) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise(resolve => setTimeout(resolve, duration));
+        });
+    }
+    CancelEdit() {
+        if (this.record) {
+            const r = this.record;
+            if (r.Dirty || this.PendingRecordsDirty()) {
+                // ask the user to make sure they want to throw out changes
+                if (!confirm('Are you sure you want to cancel your changes?')) {
+                    return;
+                }
+                r.Revert();
+                const pendingRecords = this.PendingRecords;
+                if (pendingRecords && pendingRecords.length > 0) {
+                    // we have pending records, so we need to revert them as well
+                    pendingRecords.forEach(p => {
+                        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();
+                    });
+                }
+            }
+            // if we get here we are good to go
+            this.EditMode = false;
+        }
+    }
+    PendingRecordsDirty() {
+        this.PopulatePendingRecords();
+        const pendingRecords = this.PendingRecords;
+        if (pendingRecords && pendingRecords.length > 0) {
+            for (let i = 0; i < pendingRecords.length; i++) {
+                if (pendingRecords[i].Dirty)
+                    return true;
+            }
+        }
+        return false;
+    }
+    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
+            // 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);
+                        });
+                    }
+                }
+            }
+        });
+    }
+    InternalSaveRecord() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.record) {
+                // save the record, but first create a transaction group if we have any other stuf to submit
+                yield this.PopulatePendingRecords();
+                if (this._pendingRecords.length > 0) {
+                    // we need to create a transaction group
+                    const md = new Metadata();
+                    const tg = yield md.CreateTransactionGroup();
+                    this.record.TransactionGroup = tg;
+                    this.record.Save(); // DO NOT USE await - trans group.submit() is where we await
+                    // now add to the rest of the pending records
+                    for (let i = 0; i < this._pendingRecords.length; i++) {
+                        const x = this._pendingRecords[i];
+                        x.TransactionGroup = tg;
+                        x.Save(); // DO NOT USE await - trans group.submit() is where we await
+                    }
+                    // finally submit the TG
+                    return yield tg.Submit();
+                }
+                else
+                    return yield this.record.Save();
+            }
+            else
+                return false;
+        });
+    }
+    GetTabTopPosition() {
+        if (this.elementRef && this.elementRef.nativeElement) {
+            const tabs = this.elementRef.nativeElement.getElementsByClassName('k-tabstrip');
+            if (tabs && tabs.length > 0) {
+                const tabElement = tabs[0];
+                const tabRect = tabElement.getBoundingClientRect();
+                const bodyRect = document.body.getBoundingClientRect();
+                return tabRect.top - bodyRect.top;
+            }
+        }
+        return 0;
+    }
+    setTabHeight() {
+        // Subscribe to the window resize event
+        this.resizeSub = fromEvent(window, 'resize').pipe(debounceTime(100) // Debounce the resize event to avoid frequent updates
+        ).subscribe(() => {
+            // Update the grid height when the window is resized
+            this.ResizeTab();
+        });
+        // Set the initial grid height with a slight delay to allow stuff to get set
+        setTimeout(() => {
+            this.ResizeTab();
+        }, 100);
+    }
+    get ContainerObjectHeight() {
+        return window.innerHeight; // default, can be overriden by subclasses
+    }
+    ResizeTab() {
+        this._tabMargin = this.GetTabTopPosition();
+        const height = this.ContainerObjectHeight - this._tabMargin - this.BottomMargin;
+        this.TabHeight = height.toString() + 'px';
+        this.GridBottomMargin = 40;
+    }
+    setupSplitterLayoutDebounce() {
+        this.splitterLayoutChangeSubject.pipe(debounceTime(300)).subscribe(() => {
+            this.setTabHeight(); // set the height of the tab first
+            // then wait through the timeout so the tab height change actually takes effect in the DOM - that's why we have the timeout
+            setTimeout(() => {
+                this.sharedService.InvokeManualResize();
+            }, 100);
+        });
+    }
+    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.PrimaryKey.Value);
+            console.log('Dependencies for: ' + this.record.EntityInfo.Name + ' ' + this.record.PrimaryKey.Value);
+            console.log(dep);
+            // if (confirm('Do you want to merge records test?') == true) {
+            //   const mergeResult = await md.MergeRecords({
+            //     EntityName: this.record.EntityInfo.Name,
+            //     SurvivingRecordID: this.record.PrimaryKey.Value,
+            //     RecordsToMerge: [4],
+            //   })
+            //   console.log(mergeResult);
+            // }
+        });
+    }
+    get EntityInfo() {
+        try {
+            const r = this.record;
+            if (r)
+                return r.EntityInfo;
+            else
+                return undefined;
+        }
+        catch (e) {
+            LogError(e);
+            return undefined;
+        }
+    }
+}
+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.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: BaseFormComponent, viewQuery: function BaseFormComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(TabStripComponent, 5);
+        i0.ɵɵviewQuery(UserViewGridComponent, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabComponent = _t.first);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.userViewGridComponents = _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: ViewChild,
+            args: [TabStripComponent, { static: false }]
+        }], userViewGridComponents: [{
+            type: ViewChildren,
+            args: [UserViewGridComponent]
+        }] }); })();

package/dist/lib/base-form-section-component.d.ts

@@ -0,0 +1,6 @@
+import { BaseEntity } from "@memberjunction/core";
+import { BaseRecordComponent } from "./base-record-component";
+export declare class BaseFormSectionComponent extends BaseRecordComponent {
+    record: BaseEntity;
+    EditMode: boolean;
+}

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

@@ -0,0 +1,9 @@
+import { BaseRecordComponent } from "./base-record-component";
+// This is a base class for form sections, it is used to have a clear hiearchy for all sections to subclass
+// which is primarily needed for the Class Factory and registration process to differentiate between sections and other components
+export class BaseFormSectionComponent extends BaseRecordComponent {
+    constructor() {
+        super(...arguments);
+        this.EditMode = false;
+    }
+}

package/dist/lib/base-record-component.d.ts

@@ -0,0 +1,6 @@
+import { BaseEntity, EntityFieldInfo } from "@memberjunction/core";
+export declare abstract class BaseRecordComponent {
+    abstract record: BaseEntity;
+    FormatField(entityFieldInfo: EntityFieldInfo, value: any, decimals?: number, currency?: string): string;
+    FormatValue(fieldName: string, decimals?: number, currency?: string): string;
+}

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

@@ -0,0 +1,15 @@
+export class BaseRecordComponent {
+    FormatField(entityFieldInfo, value, decimals = 2, currency = 'USD') {
+        return entityFieldInfo.FormatValue(value, decimals, currency);
+    }
+    FormatValue(fieldName, decimals = 2, currency = 'USD') {
+        if (!this.record)
+            throw new Error('this.record not set');
+        const r = this.record;
+        const f = r.Fields.find(f => f.Name.trim().toLowerCase() === fieldName.trim().toLowerCase() ||
+            f.CodeName.trim().toLowerCase() === fieldName.trim().toLowerCase());
+        if (!f)
+            throw new Error(`Field ${fieldName} not found in entity ${r.EntityInfo.Name}`);
+        return f.FormatValue(decimals, currency);
+    }
+}

package/dist/lib/form-toolbar.d.ts

@@ -0,0 +1,7 @@
+import { BaseFormComponent } from './base-form-component';
+import * as i0 from "@angular/core";
+export declare class FormToolbarComponent {
+    form: BaseFormComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormToolbarComponent, "mj-form-toolbar", never, { "form": { "alias": "form"; "required": false; }; }, {}, never, never, false, never>;
+}

package/dist/lib/form-toolbar.js

@@ -0,0 +1,93 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@memberjunction/ng-record-changes";
+function FormToolbarComponent_button_0_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.form.StartEditMode()); });
+    i0.ɵɵtext(1, "Edit Record");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.form.SaveRecord(true)); });
+    i0.ɵɵtext(1, "Save Record");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.form.CancelEdit()); });
+    i0.ɵɵtext(1, "Cancel");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_3_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.form.RemoveFavorite()); });
+    i0.ɵɵtext(1, "Remove Favorite");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.form.MakeFavorite()); });
+    i0.ɵɵtext(1, "Make Favorite");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function FormToolbarComponent_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.form.handleHistoryDialog()); });
+    i0.ɵɵtext(1, "History");
+    i0.ɵɵelementEnd();
+} }
+function FormToolbarComponent_mj_record_changes_7_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-record-changes", 3);
+    i0.ɵɵlistener("dialogClosed", function FormToolbarComponent_mj_record_changes_7_Template_mj_record_changes_dialogClosed_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r19 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r19.form.handleHistoryDialog()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r6 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("record", ctx_r6.form.record);
+} }
+export class FormToolbarComponent {
+}
+FormToolbarComponent.ɵfac = function FormToolbarComponent_Factory(t) { return new (t || FormToolbarComponent)(); };
+FormToolbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormToolbarComponent, selectors: [["mj-form-toolbar"]], inputs: { form: "form" }, decls: 8, vars: 7, consts: [["kendoButton", "", 3, "click", 4, "ngIf"], [3, "record", "dialogClosed", 4, "ngIf"], ["kendoButton", "", 3, "click"], [3, "record", "dialogClosed"]], template: function FormToolbarComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, FormToolbarComponent_button_0_Template, 2, 0, "button", 0)(1, FormToolbarComponent_button_1_Template, 2, 0, "button", 0)(2, FormToolbarComponent_button_2_Template, 2, 0, "button", 0)(3, FormToolbarComponent_button_3_Template, 2, 0, "button", 0)(4, FormToolbarComponent_button_4_Template, 2, 0, "button", 0)(5, FormToolbarComponent_button_5_Template, 2, 0, "button", 0);
+        i0.ɵɵelement(6, "hr");
+        i0.ɵɵtemplate(7, FormToolbarComponent_mj_record_changes_7_Template, 1, 1, "mj-record-changes", 1);
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngIf", !ctx.form.EditMode && ctx.form.UserCanEdit);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.form.EditMode);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.form.EditMode);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.form.FavoriteInitDone && ctx.form.IsFavorite);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.form.FavoriteInitDone && !ctx.form.IsFavorite);
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.form.EntityInfo == null ? null : ctx.form.EntityInfo.TrackRecordChanges);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("ngIf", ctx.form.isHistoryDialogOpen);
+    } }, dependencies: [i1.NgIf, i2.RecordChangesComponent], styles: ["button[_ngcontent-%COMP%] { margin-right: 10px; }"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormToolbarComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-form-toolbar', template: `
+        <button kendoButton *ngIf="!this.form.EditMode && this.form.UserCanEdit" (click)="this.form.StartEditMode()">Edit Record</button> 
+        <button kendoButton *ngIf="this.form.EditMode" (click)="this.form.SaveRecord(true)">Save Record</button> 
+        <button kendoButton *ngIf="this.form.EditMode" (click)="this.form.CancelEdit()">Cancel</button> 
+        <button kendoButton *ngIf="this.form.FavoriteInitDone && this.form.IsFavorite" (click)="this.form.RemoveFavorite()">Remove Favorite</button> 
+        <button kendoButton *ngIf="this.form.FavoriteInitDone && !this.form.IsFavorite" (click)="this.form.MakeFavorite()">Make Favorite</button> 
+        <button kendoButton *ngIf="this.form.EntityInfo?.TrackRecordChanges" (click)="this.form.handleHistoryDialog()">History</button> 
+        <hr />
+        <mj-record-changes *ngIf="this.form.isHistoryDialogOpen" [record]="this.form.record" (dialogClosed)="this.form.handleHistoryDialog()"></mj-record-changes>
+    `, styles: ["button { margin-right: 10px; }"] }]
+    }], null, { form: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormToolbarComponent, { className: "FormToolbarComponent", filePath: "src\\lib\\form-toolbar.ts", lineNumber: 19 }); })();

package/dist/lib/section-loader-component.d.ts

@@ -0,0 +1,17 @@
+import { OnDestroy, ViewContainerRef, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
+import { BaseEntity } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+export declare class SectionLoaderComponent implements AfterViewInit, OnDestroy, OnChanges {
+    Entity: string;
+    Section: string;
+    record: BaseEntity;
+    EditMode: boolean;
+    container: ViewContainerRef;
+    private _sectionObj;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    private loadComponent;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionLoaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionLoaderComponent, "mj-form-section", never, { "Entity": { "alias": "Entity"; "required": false; }; "Section": { "alias": "Section"; "required": false; }; "record": { "alias": "record"; "required": false; }; "EditMode": { "alias": "EditMode"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,66 @@
+import { Component, Input, ViewChild, ViewContainerRef } from '@angular/core';
+import { MJGlobal } from '@memberjunction/global';
+import { BaseFormSectionComponent } from './base-form-section-component';
+import * as i0 from "@angular/core";
+const _c0 = ["container"];
+function SectionLoaderComponent_ng_template_0_Template(rf, ctx) { }
+export class SectionLoaderComponent {
+    constructor() {
+        this.EditMode = false;
+        this._sectionObj = null;
+    }
+    ngOnChanges(changes) {
+        // react to EditMode change
+        if (changes['EditMode'] && !changes['EditMode'].firstChange && this._sectionObj) {
+            this._sectionObj.EditMode = this.EditMode;
+        }
+    }
+    ngAfterViewInit() {
+        // do this via a promise in order to defer the load by one pass of the event loop
+        // because that results in Angular not complaining about change detection due to dynamic
+        // nature of the inner component
+        Promise.resolve().then(() => this.loadComponent());
+    }
+    loadComponent() {
+        const sectionInfo = MJGlobal.Instance.ClassFactory.GetRegistration(BaseFormSectionComponent, `${this.Entity}.${this.Section}`);
+        if (sectionInfo) {
+            const componentRef = this.container.createComponent(sectionInfo.SubClass);
+            // pass in record and edit mode
+            this._sectionObj = componentRef.instance;
+            this._sectionObj.record = this.record;
+            this._sectionObj.EditMode = this.EditMode;
+        }
+    }
+    ngOnDestroy() {
+        // Don't forget to cleanup dynamically created components
+        this.container.clear();
+    }
+}
+SectionLoaderComponent.ɵfac = function SectionLoaderComponent_Factory(t) { return new (t || SectionLoaderComponent)(); };
+SectionLoaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionLoaderComponent, selectors: [["mj-form-section"]], viewQuery: function SectionLoaderComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5, ViewContainerRef);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.container = _t.first);
+    } }, inputs: { Entity: "Entity", Section: "Section", record: "record", EditMode: "EditMode" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 0, consts: [["container", ""]], template: function SectionLoaderComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, SectionLoaderComponent_ng_template_0_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    } }, encapsulation: 2 });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SectionLoaderComponent, [{
+        type: Component,
+        args: [{
+                selector: 'mj-form-section',
+                template: `<ng-template #container></ng-template>`
+            }]
+    }], null, { Entity: [{
+            type: Input
+        }], Section: [{
+            type: Input
+        }], record: [{
+            type: Input
+        }], EditMode: [{
+            type: Input
+        }], container: [{
+            type: ViewChild,
+            args: ['container', { read: ViewContainerRef }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionLoaderComponent, { className: "SectionLoaderComponent", filePath: "src\\lib\\section-loader-component.ts", lineNumber: 10 }); })();

package/dist/module.d.ts

@@ -0,0 +1,12 @@
+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 "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@progress/kendo-angular-layout";
+import * as i6 from "@memberjunction/ng-record-changes";
+export declare class BaseFormsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseFormsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BaseFormsModule, [typeof i1.SectionLoaderComponent, typeof i2.FormToolbarComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i5.TabStripModule, typeof i6.RecordChangesModule], [typeof i1.SectionLoaderComponent, typeof i2.FormToolbarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BaseFormsModule>;
+}

package/dist/module.js

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// Kendo UI Angular imports
+import { FormsModule } from '@angular/forms';
+import { TabStripModule } from '@progress/kendo-angular-layout';
+import { SectionLoaderComponent } from './lib/section-loader-component';
+import { FormToolbarComponent } from './lib/form-toolbar';
+import { RecordChangesModule } from '@memberjunction/ng-record-changes';
+import * as i0 from "@angular/core";
+export class BaseFormsModule {
+}
+BaseFormsModule.ɵfac = function BaseFormsModule_Factory(t) { return new (t || BaseFormsModule)(); };
+BaseFormsModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: BaseFormsModule });
+BaseFormsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        FormsModule,
+        TabStripModule,
+        RecordChangesModule] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseFormsModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    SectionLoaderComponent,
+                    FormToolbarComponent
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    TabStripModule,
+                    RecordChangesModule
+                ],
+                exports: [
+                    SectionLoaderComponent,
+                    FormToolbarComponent
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(BaseFormsModule, { declarations: [SectionLoaderComponent,
+        FormToolbarComponent], imports: [CommonModule,
+        FormsModule,
+        TabStripModule,
+        RecordChangesModule], exports: [SectionLoaderComponent,
+        FormToolbarComponent] }); })();

package/dist/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './module';
+export * from './lib/base-record-component';
+export * from './lib/base-form-section-component';
+export * from './lib/base-form-component';
+export * from './lib/section-loader-component';
+export * from './lib/form-toolbar';

package/dist/public-api.js

@@ -0,0 +1,9 @@
+/*
+ * Public API Surface
+ */
+export * from './module';
+export * from './lib/base-record-component';
+export * from './lib/base-form-section-component';
+export * from './lib/base-form-component';
+export * from './lib/section-loader-component';
+export * from './lib/form-toolbar';

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@memberjunction/ng-base-forms",
+  "version": "0.9.2",
+  "description": "MemberJunction: Angular Base Form Components",
+  "main": "./dist/public-api.js",
+  "typings": "./dist/public-api.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "ngc"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@angular/compiler": "~17.2.2",
+    "@angular/compiler-cli": "~17.2.2"
+  },
+  "peerDependencies": {
+    "@angular/common": "~17.2.2",
+    "@angular/core": "~17.2.2",
+    "@angular/forms": "~17.2.2",
+    "@angular/router": "~17.2.2"
+  },
+  "dependencies": {
+    "@memberjunction/global": "^0.9.156",
+    "@memberjunction/core": "^0.9.177",
+    "@memberjunction/ng-shared": "^0.9.34",
+    "@memberjunction/ng-record-changes": "^0.9.116",
+    "@memberjunction/ng-user-view-grid": "^0.9.216",
+    "@progress/kendo-angular-layout": "~15.1.0",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}