@memberjunction/ng-entity-form-dialog 0.9.2

package/dist/lib/entity-form-dialog/entity-form-dialog.component.d.ts

@@ -0,0 +1,33 @@
+import { ViewContainerRef, EventEmitter } from '@angular/core';
+import { BaseEntity } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+export declare class EntityFormDialog {
+    /**
+     * The title of the dialog
+     */
+    Title: string;
+    ShowSaveButton: boolean;
+    ShowCancelButton: boolean;
+    Width: number;
+    Height: number;
+    Mode: 'complete' | 'section';
+    SectionName: string;
+    Record: BaseEntity | null;
+    /**
+     * If true, when the user clicks the Save button, the Record will be saved. Only applicable if ShowSaveButton is true.
+     */
+    HandleSave: boolean;
+    /**
+     * If true, when the user clicks the Cancel button, the Record will be reverted to its original state. Only applicable if ShowCancelButton is true.
+     */
+    AutoRevertOnCancel: boolean;
+    close: EventEmitter<'Save' | 'Cancel'>;
+    private _visible;
+    set Visible(val: boolean);
+    get Visible(): boolean;
+    container: ViewContainerRef;
+    showForm(): void;
+    closeWindow(status: 'Save' | 'Cancel'): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EntityFormDialog, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EntityFormDialog, "mj-entity-form-dialog", never, { "Title": { "alias": "Title"; "required": false; }; "ShowSaveButton": { "alias": "ShowSaveButton"; "required": false; }; "ShowCancelButton": { "alias": "ShowCancelButton"; "required": false; }; "Width": { "alias": "Width"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "Mode": { "alias": "Mode"; "required": false; }; "SectionName": { "alias": "SectionName"; "required": false; }; "Record": { "alias": "Record"; "required": false; }; "HandleSave": { "alias": "HandleSave"; "required": false; }; "AutoRevertOnCancel": { "alias": "AutoRevertOnCancel"; "required": false; }; "Visible": { "alias": "Visible"; "required": false; }; }, { "close": "close"; }, never, never, false, never>;
+}

package/dist/lib/entity-form-dialog/entity-form-dialog.component.js

@@ -0,0 +1,183 @@
+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, Output, ViewChild, ViewContainerRef, EventEmitter } from '@angular/core';
+import { SharedService } from '@memberjunction/ng-shared';
+import { MJGlobal } from '@memberjunction/global';
+import { BaseFormComponent, BaseFormSectionComponent } from '@memberjunction/ng-base-forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-dialog";
+import * as i3 from "@progress/kendo-angular-buttons";
+const _c0 = ["dynamicFormContainer"];
+function EntityFormDialog_kendo_dialog_0_ng_template_1_Template(rf, ctx) { }
+function EntityFormDialog_kendo_dialog_0_kendo_dialog_actions_3_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function EntityFormDialog_kendo_dialog_0_kendo_dialog_actions_3_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r6.closeWindow("Save")); });
+    i0.ɵɵtext(1, "Save");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormDialog_kendo_dialog_0_kendo_dialog_actions_3_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 7);
+    i0.ɵɵlistener("click", function EntityFormDialog_kendo_dialog_0_kendo_dialog_actions_3_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r8.closeWindow("Cancel")); });
+    i0.ɵɵtext(1, "Cancel");
+    i0.ɵɵelementEnd();
+} }
+function EntityFormDialog_kendo_dialog_0_kendo_dialog_actions_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-dialog-actions");
+    i0.ɵɵtemplate(1, EntityFormDialog_kendo_dialog_0_kendo_dialog_actions_3_button_1_Template, 2, 0, "button", 4)(2, EntityFormDialog_kendo_dialog_0_kendo_dialog_actions_3_button_2_Template, 2, 0, "button", 5);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r3.ShowSaveButton);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r3.ShowCancelButton);
+} }
+function EntityFormDialog_kendo_dialog_0_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 1);
+    i0.ɵɵlistener("close", function EntityFormDialog_kendo_dialog_0_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.closeWindow("Cancel")); });
+    i0.ɵɵtemplate(1, EntityFormDialog_kendo_dialog_0_ng_template_1_Template, 0, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(3, EntityFormDialog_kendo_dialog_0_kendo_dialog_actions_3_Template, 3, 2, "kendo-dialog-actions", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r0.Title)("width", ctx_r0.Width)("height", ctx_r0.Height);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r0.ShowSaveButton || ctx_r0.ShowCancelButton);
+} }
+export class EntityFormDialog {
+    constructor() {
+        /**
+         * The title of the dialog
+         */
+        this.Title = '';
+        this.ShowSaveButton = true;
+        this.ShowCancelButton = true;
+        this.Width = 800;
+        this.Height = 600;
+        this.Mode = 'complete';
+        this.SectionName = '';
+        this.Record = null;
+        /**
+         * If true, when the user clicks the Save button, the Record will be saved. Only applicable if ShowSaveButton is true.
+         */
+        this.HandleSave = true;
+        /**
+         * If true, when the user clicks the Cancel button, the Record will be reverted to its original state. Only applicable if ShowCancelButton is true.
+         */
+        this.AutoRevertOnCancel = true;
+        this.close = new EventEmitter();
+        this._visible = false;
+    }
+    set Visible(val) {
+        this._visible = val;
+        if (val) {
+            Promise.resolve().then(() => {
+                // At this point, the DOM should be updated, and `this.container` should be available.
+                this.showForm();
+            });
+        }
+    }
+    get Visible() {
+        return this._visible;
+    }
+    showForm() {
+        var _a, _b;
+        if (!this.container)
+            throw new Error('Container not found');
+        if (!this.Record)
+            throw new Error('Record is a required property');
+        // Ensure the container is clear before inserting a new component
+        this.container.clear();
+        // here we want to grab the right type of object to instantiate based on the settings either mode of complete or section
+        // if section, we grab a sub-class of BaseFormSectionComponent, if complete, we grab a sub-class of the BaseForComponent class
+        let reg;
+        if (this.Mode === 'complete') {
+            reg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseFormComponent, (_a = this.Record) === null || _a === void 0 ? void 0 : _a.EntityInfo.Name);
+        }
+        else {
+            reg = MJGlobal.Instance.ClassFactory.GetRegistration(BaseFormSectionComponent, ((_b = this.Record) === null || _b === void 0 ? void 0 : _b.EntityInfo.Name) + '.' + this.SectionName);
+        }
+        if (reg && reg.SubClass) {
+            // we have our class registration
+            const component = this.container.createComponent(reg.SubClass);
+            if (this.Record && component.instance instanceof BaseFormSectionComponent) {
+                component.instance.record = this.Record;
+                component.instance.EditMode = true;
+            }
+            else if (this.Record && component.instance instanceof BaseFormComponent) {
+                component.instance.record = this.Record;
+                component.instance.EditMode = true;
+            }
+        }
+    }
+    closeWindow(status) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.Visible = false;
+            if (this.Record) {
+                if (this.HandleSave && status === 'Save') {
+                    if (!(yield this.Record.Save())) {
+                        SharedService.Instance.CreateSimpleNotification(`Error saving ${this.Record.EntityInfo.Name} record, rolling back changes`, 'error');
+                        this.Record.Revert();
+                    }
+                }
+                if (this.AutoRevertOnCancel && status === 'Cancel') {
+                    this.Record.Revert();
+                }
+            }
+            this.close.emit(status);
+        });
+    }
+}
+EntityFormDialog.ɵfac = function EntityFormDialog_Factory(t) { return new (t || EntityFormDialog)(); };
+EntityFormDialog.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityFormDialog, selectors: [["mj-entity-form-dialog"]], viewQuery: function EntityFormDialog_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: { Title: "Title", ShowSaveButton: "ShowSaveButton", ShowCancelButton: "ShowCancelButton", Width: "Width", Height: "Height", Mode: "Mode", SectionName: "SectionName", Record: "Record", HandleSave: "HandleSave", AutoRevertOnCancel: "AutoRevertOnCancel", Visible: "Visible" }, outputs: { close: "close" }, decls: 1, vars: 1, consts: [[3, "title", "width", "height", "close", 4, "ngIf"], [3, "title", "width", "height", "close"], ["dynamicFormContainer", ""], [4, "ngIf"], ["kendoButton", "", "themeColor", "primary", 3, "click", 4, "ngIf"], ["kendoButton", "", 3, "click", 4, "ngIf"], ["kendoButton", "", "themeColor", "primary", 3, "click"], ["kendoButton", "", 3, "click"]], template: function EntityFormDialog_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, EntityFormDialog_kendo_dialog_0_Template, 4, 4, "kendo-dialog", 0);
+    } if (rf & 2) {
+        i0.ɵɵproperty("ngIf", ctx.Visible);
+    } }, dependencies: [i1.NgIf, i2.DialogComponent, i2.DialogActionsComponent, i3.ButtonComponent] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityFormDialog, [{
+        type: Component,
+        args: [{ selector: 'mj-entity-form-dialog', template: "<kendo-dialog *ngIf=\"Visible\" \r\n        [title]=\"Title\" \r\n        [width]=\"Width\"\r\n        [height]=\"Height\"\r\n        (close)=\"closeWindow('Cancel')\" >\r\n    <ng-template #dynamicFormContainer></ng-template>\r\n    <kendo-dialog-actions *ngIf=\"ShowSaveButton || ShowCancelButton\">\r\n        <button *ngIf=\"ShowSaveButton\" kendoButton (click)=\"closeWindow('Save')\"  themeColor=\"primary\">Save</button>\r\n        <button *ngIf=\"ShowCancelButton\" kendoButton (click)=\"closeWindow('Cancel')\">Cancel</button>\r\n    </kendo-dialog-actions>\r\n</kendo-dialog>" }]
+    }], null, { Title: [{
+            type: Input
+        }], ShowSaveButton: [{
+            type: Input
+        }], ShowCancelButton: [{
+            type: Input
+        }], Width: [{
+            type: Input
+        }], Height: [{
+            type: Input
+        }], Mode: [{
+            type: Input
+        }], SectionName: [{
+            type: Input
+        }], Record: [{
+            type: Input
+        }], HandleSave: [{
+            type: Input
+        }], AutoRevertOnCancel: [{
+            type: Input
+        }], close: [{
+            type: Output
+        }], Visible: [{
+            type: Input
+        }], container: [{
+            type: ViewChild,
+            args: ['dynamicFormContainer', { read: ViewContainerRef }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EntityFormDialog, { className: "EntityFormDialog", filePath: "src\\lib\\entity-form-dialog\\entity-form-dialog.component.ts", lineNumber: 15 }); })();

package/dist/lib/module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./entity-form-dialog/entity-form-dialog.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "@memberjunction/ng-compare-records";
+import * as i6 from "@memberjunction/ng-container-directives";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "@progress/kendo-angular-icons";
+export declare class EntityFormDialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EntityFormDialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EntityFormDialogModule, [typeof i1.EntityFormDialog], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.DialogsModule, typeof i5.CompareRecordsModule, typeof i6.ContainerDirectivesModule, typeof i7.ButtonsModule, typeof i8.IconsModule, typeof i4.DialogsModule], [typeof i1.EntityFormDialog]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<EntityFormDialogModule>;
+}

package/dist/lib/module.js

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// Kendo UI Angular imports
+import { DialogsModule } from "@progress/kendo-angular-dialog";
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { CompareRecordsModule } from '@memberjunction/ng-compare-records';
+import { ContainerDirectivesModule } from '@memberjunction/ng-container-directives';
+import { FormsModule } from '@angular/forms';
+import { EntityFormDialog } from './entity-form-dialog/entity-form-dialog.component';
+import * as i0 from "@angular/core";
+export class EntityFormDialogModule {
+}
+EntityFormDialogModule.ɵfac = function EntityFormDialogModule_Factory(t) { return new (t || EntityFormDialogModule)(); };
+EntityFormDialogModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: EntityFormDialogModule });
+EntityFormDialogModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+        FormsModule,
+        DialogsModule,
+        CompareRecordsModule,
+        ContainerDirectivesModule,
+        ButtonsModule,
+        IconsModule,
+        DialogsModule] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityFormDialogModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    EntityFormDialog
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    DialogsModule,
+                    CompareRecordsModule,
+                    ContainerDirectivesModule,
+                    ButtonsModule,
+                    IconsModule,
+                    DialogsModule,
+                ],
+                exports: [
+                    EntityFormDialog
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(EntityFormDialogModule, { declarations: [EntityFormDialog], imports: [CommonModule,
+        FormsModule,
+        DialogsModule,
+        CompareRecordsModule,
+        ContainerDirectivesModule,
+        ButtonsModule,
+        IconsModule,
+        DialogsModule], exports: [EntityFormDialog] }); })();

package/dist/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/module';
+export * from './lib/entity-form-dialog/entity-form-dialog.component';

package/dist/public-api.js

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface
+ */
+export * from './lib/module';
+export * from './lib/entity-form-dialog/entity-form-dialog.component';

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@memberjunction/ng-entity-form-dialog",
+  "version": "0.9.2",
+  "description": "MemberJunction: Dialog component that is able to display any entity form in a modal dialog",
+  "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/core-entities": "^0.9.166",
+    "@memberjunction/global": "^0.9.156",
+    "@memberjunction/core": "^0.9.177",
+    "@memberjunction/ng-container-directives": "^0.9.141",
+    "@memberjunction/ng-shared": "^0.9.34",
+    "@memberjunction/ng-base-forms": "^0.9.2",
+    "@progress/kendo-angular-buttons": "~15.1.0",
+    "@progress/kendo-angular-dialog": "~15.1.0",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}