dattatable 1.7.8 → 1.7.9

package/build/index.d.ts

@@ -2,6 +2,5 @@ export * from "./common";
 export * from "./dashboard";
 export * from "./documents";
 export * from "./itemForm";
-export * from "./itemFormTabs";
 /** Styling */
 import "./styles";

package/build/index.js

@@ -22,7 +22,6 @@ var documents_1 = require("./documents");
 __exportStar(require("./documents"), exports);
 var itemForm_1 = require("./itemForm");
 __exportStar(require("./itemForm"), exports);
-__exportStar(require("./itemFormTabs"), exports);
 /** Styling */
 require("./styles");
 /** Global Variable */
@@ -31,5 +30,5 @@ window["DattaTable"] = {
     Common: Common,
     Dashboard: dashboard_1.Dashboard,
     Documents: documents_1.Documents,
-    ItemForm: itemForm_1.ItemForm //, ItemFormTabs
+    ItemForm: itemForm_1.ItemForm
 };

package/build/itemForm.d.ts

@@ -1,4 +1,16 @@
 import { Components, Helper } from "gd-sprest-bs";
+/** Tab */
+export interface IItemFormTab {
+    title: string;
+    fields: string[];
+    onRendered: (el?: HTMLElement, item?: Components.IListGroupItem) => void;
+    onRendering: (item?: Components.IListGroupItem) => any;
+}
+/** Tab Information */
+export interface IItemFormTabInfo {
+    isVertical?: boolean;
+    tabs: IItemFormTab[];
+}
 /** Create Item Properties */
 export interface IItemFormCreateProps {
     info?: Helper.IListFormResult;
@@ -10,6 +22,7 @@ export interface IItemFormCreateProps {
     onSetHeader?: (el: HTMLElement) => void;
     onUpdate?: (item?: any) => void;
     onValidation?: (values?: any) => boolean | PromiseLike<boolean>;
+    tabInfo?: IItemFormTabInfo;
     useModal?: boolean;
     webUrl?: string;
 }
@@ -25,6 +38,7 @@ export interface IItemFormEditProps {
     onSetHeader?: (el: HTMLElement) => void;
     onUpdate?: (item?: any) => void;
     onValidation?: (values?: any) => boolean | PromiseLike<boolean>;
+    tabInfo?: IItemFormTabInfo;
     useModal?: boolean;
     webUrl?: string;
 }
@@ -37,6 +51,7 @@ export interface IItemFormViewProps {
     onGetListInfo?: (props: Helper.IListFormProps) => Helper.IListFormProps;
     onSetFooter?: (el: HTMLElement) => void;
     onSetHeader?: (el: HTMLElement) => void;
+    tabInfo?: IItemFormTabInfo;
     useModal?: boolean;
     webUrl?: string;
 }
@@ -52,11 +67,12 @@ export declare class ItemForm {
     private static _onSetHeader?;
     private static _onSave;
     private static _onValidation;
+    private static _tabInfo;
     private static _updateEvent;
     static set AutoClose(value: boolean);
-    private static _displayForm;
+    private static _displayForms;
     static get DisplayForm(): Components.IListFormDisplay;
-    private static _editForm;
+    private static _editForms;
     static get EditForm(): Components.IListFormEdit;
     private static _info;
     static get FormInfo(): Helper.IListFormResult;
@@ -76,8 +92,13 @@ export declare class ItemForm {
     static edit(props: IItemFormEditProps): void;
     static loadFormInfo(props: Helper.IListFormProps): PromiseLike<void>;
     static view(props: IItemFormViewProps): void;
-    /** private static Methods */
+    /** Private Methods */
     private static load;
+    private static renderDisplayForm;
+    private static renderEditForm;
+    private static renderFooter;
+    private static renderForm;
+    private static renderTabs;
     static save(form?: Components.IListFormEdit): void;
     private static validate;
 }

package/build/itemForm.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemForm = void 0;
 var gd_sprest_bs_1 = require("gd-sprest-bs");
@@ -19,12 +30,12 @@ var ItemForm = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(ItemForm, "DisplayForm", {
-        get: function () { return this._displayForm; },
+        get: function () { return this._displayForms[0]; },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(ItemForm, "EditForm", {
-        get: function () { return this._editForm; },
+        get: function () { return this._editForms[0]; },
         enumerable: false,
         configurable: true
     });
@@ -78,6 +89,7 @@ var ItemForm = /** @class */ (function () {
         this._onSetFooter = props.onSetFooter;
         this._onSetHeader = props.onSetHeader;
         this._onValidation = props.onValidation;
+        this._tabInfo = props.tabInfo;
         this._updateEvent = props.onUpdate;
         typeof (props.useModal) === "boolean" ? this._useModal = props.useModal : false;
         // Load the item
@@ -95,6 +107,7 @@ var ItemForm = /** @class */ (function () {
         this._onSetFooter = props.onSetFooter;
         this._onSetHeader = props.onSetHeader;
         this._onValidation = props.onValidation;
+        this._tabInfo = props.tabInfo;
         this._updateEvent = props.onUpdate;
         typeof (props.useModal) === "boolean" ? this._useModal = props.useModal : false;
         // Load the form
@@ -124,17 +137,18 @@ var ItemForm = /** @class */ (function () {
         this._onGetListInfo = props.onGetListInfo;
         this._onSetFooter = props.onSetFooter;
         this._onSetHeader = props.onSetHeader;
+        this._tabInfo = props.tabInfo;
         typeof (props.useModal) === "boolean" ? this._useModal = props.useModal : false;
         // Load the form
         this.load(props.webUrl, props.itemId);
     };
-    /** private static Methods */
+    /** Private Methods */
     // Load the form information
     ItemForm.load = function (webUrl, itemId) {
         var _this = this;
         // Clear the forms
-        this._displayForm = null;
-        this._editForm = null;
+        this._displayForms = [];
+        this._editForms = [];
         // Show a loading dialog
         common_1.LoadingDialog.setHeader("Loading the Item");
         common_1.LoadingDialog.setBody("This will close after the form is loaded...");
@@ -167,162 +181,249 @@ var ItemForm = /** @class */ (function () {
                 }
             });
         })().then(function () {
-            // Set the header
-            (_this._useModal ? common_1.Modal : common_1.CanvasForm).setHeader('<h5 class="m-0">' + (_this._info.item ? _this._info.item.Title : "Create Item") + '</h5>');
-            // Call the header event
-            _this._onSetHeader ? _this._onSetHeader(_this._useModal ? common_1.Modal.HeaderElement : common_1.CanvasForm.HeaderElement) : null;
-            // Render the form based on the type
-            if (_this.IsDisplay) {
-                var el = document.createElement("div");
-                var props = {
-                    el: el,
-                    info: _this._info,
-                    rowClassName: "mb-3"
-                };
-                // Call the event if it exists
-                props = _this._onCreateViewForm ? _this._onCreateViewForm(props) : props;
-                // Render the display form
-                _this._displayForm = gd_sprest_bs_1.Components.ListForm.renderDisplayForm(props);
+            // Render the form
+            _this.renderForm();
+        });
+    };
+    // Renders the display form
+    ItemForm.renderDisplayForm = function (el, tab) {
+        // Ensure the element exists
+        el = el || document.createElement("div");
+        // Set the form properties
+        var props = {
+            el: el,
+            info: this._info,
+            rowClassName: "mb-3",
+            includeFields: tab.fields,
+            onFormRendered: function (form) {
                 /* Remove the bottom margin from the last row of the form */
-                _this._displayForm.el.lastChild.classList.remove("mb-3");
-                // Render the form buttons
-                var elButtons = document.createElement("div");
-                el.appendChild(elButtons);
-                // Add styling if not using a modal
-                if (!_this._useModal) {
-                    elButtons.classList.add("float-end");
-                    elButtons.style.padding = "1rem 0";
-                }
-                // Append the create/update button
-                _this._useModal ? common_1.Modal.setFooter(elButtons) : el.appendChild(elButtons);
-                // Call the item form button rendering event
-                var formButtons = [];
-                formButtons = _this._onFormButtonsRendering ? _this._onFormButtonsRendering(formButtons) : formButtons;
-                // Render the form buttons
-                formButtons && formButtons.length > 0 ? gd_sprest_bs_1.Components.ButtonGroup({
-                    el: elButtons,
-                    buttons: formButtons
-                }) : null;
-                // Call the footer event
-                _this._onSetFooter ? _this._onSetFooter(_this._useModal ? common_1.Modal.FooterElement : elButtons) : null;
-                // Update the body
-                (_this._useModal ? common_1.Modal : common_1.CanvasForm).setBody(el);
+                form.el.lastChild.classList.remove("mb-3");
             }
-            else {
-                var el = document.createElement("div");
-                var props = {
-                    el: el,
-                    info: _this._info,
-                    rowClassName: "mb-3",
-                    controlMode: _this.IsNew ? gd_sprest_bs_1.SPTypes.ControlMode.New : gd_sprest_bs_1.SPTypes.ControlMode.Edit
-                };
-                // Call the event if it exists
-                props = _this._onCreateEditForm ? _this._onCreateEditForm(props) : props;
-                // Render the edit form
-                _this._editForm = gd_sprest_bs_1.Components.ListForm.renderEditForm(props);
+        };
+        // Call the event if it exists
+        props = this._onCreateViewForm ? this._onCreateViewForm(props) : props;
+        // Render the display form
+        var form = gd_sprest_bs_1.Components.ListForm.renderDisplayForm(props);
+        this._displayForms.push(form);
+        // Return the form element
+        return el;
+    };
+    // Renders the edit form
+    ItemForm.renderEditForm = function (el, tab) {
+        // Ensure the element exists
+        el = el || document.createElement("div");
+        // Set the form properties
+        var props = {
+            el: el,
+            info: this._info,
+            rowClassName: "mb-3",
+            controlMode: this.IsNew ? gd_sprest_bs_1.SPTypes.ControlMode.New : gd_sprest_bs_1.SPTypes.ControlMode.Edit,
+            includeFields: tab.fields,
+            onFormRendered: function (form) {
                 /* Remove the bottom margin from the last row of the form */
-                _this._editForm.el.lastChild.classList.remove("mb-3");
-                // Render the form buttons
-                var elButtons = document.createElement("div");
-                // Add styling if not using a modal
-                if (!_this._useModal) {
-                    elButtons.classList.add("float-end");
-                    elButtons.style.padding = "1rem 0";
+                form.el.lastChild.classList.remove("mb-3");
+            }
+        };
+        // Call the event if it exists
+        props = this._onCreateEditForm ? this._onCreateEditForm(props) : props;
+        // Render the edit form
+        var form = gd_sprest_bs_1.Components.ListForm.renderEditForm(props);
+        this._editForms.push(form);
+        // Return the form element
+        return el;
+    };
+    // Renders the footer
+    ItemForm.renderFooter = function () {
+        var _this = this;
+        // Render the form buttons
+        var elButtons = document.createElement("div");
+        // Add styling if not using a modal
+        if (!this._useModal) {
+            elButtons.classList.add("float-end");
+            elButtons.style.padding = "1rem 0";
+        }
+        // Append the create/update button
+        this._useModal ? common_1.Modal.setFooter(elButtons) : common_1.CanvasForm.BodyElement.appendChild(elButtons);
+        // See if we are rendering a display form
+        if (this.IsDisplay) {
+            // Call the item form button rendering event
+            var formButtons = [];
+            formButtons = this._onFormButtonsRendering ? this._onFormButtonsRendering(formButtons) : formButtons;
+            // Render the form buttons
+            formButtons && formButtons.length > 0 ? gd_sprest_bs_1.Components.ButtonGroup({
+                el: elButtons,
+                buttons: formButtons
+            }) : null;
+        }
+        else {
+            // Call the item form button rendering event
+            var formButtons = [{
+                    text: this.IsNew ? "Create" : "Update",
+                    type: gd_sprest_bs_1.Components.ButtonTypes.OutlinePrimary,
+                    onClick: function () { _this.save(); }
+                }];
+            formButtons = this._onFormButtonsRendering ? this._onFormButtonsRendering(formButtons) : formButtons;
+            // Render the form buttons
+            formButtons && formButtons.length > 0 ? gd_sprest_bs_1.Components.ButtonGroup({
+                el: elButtons,
+                buttons: formButtons
+            }) : null;
+        }
+        // Call the footer event
+        this._onSetFooter ? this._onSetFooter(this._useModal ? common_1.Modal.FooterElement : elButtons) : null;
+    };
+    // Renders the form
+    ItemForm.renderForm = function () {
+        // Set the header
+        (this._useModal ? common_1.Modal : common_1.CanvasForm).setHeader('<h5 class="m-0">' + (this._info.item ? this._info.item.Title : "Create Item") + '</h5>');
+        // Call the header event
+        this._onSetHeader ? this._onSetHeader(this._useModal ? common_1.Modal.HeaderElement : common_1.CanvasForm.HeaderElement) : null;
+        // See if we are rendering tabs
+        if (this._tabInfo) {
+            // Render the tabs
+            this.renderTabs();
+        }
+        else {
+            // Render the form based on the type
+            var elForm = this.IsDisplay ? this.renderDisplayForm() : this.renderEditForm();
+            // Update the body
+            (this._useModal ? common_1.Modal : common_1.CanvasForm).setBody(elForm);
+        }
+        // Render the footer
+        this.renderFooter();
+        // Close the dialog
+        common_1.LoadingDialog.hide();
+        // Show the form
+        (this._useModal ? common_1.Modal : common_1.CanvasForm).show();
+    };
+    // Generates a tab
+    ItemForm.renderTabs = function () {
+        var _this = this;
+        var tabs = [];
+        // Parse the tabs to render
+        for (var i = 0; i < this._tabInfo.tabs.length; i++) {
+            var tabInfo = this._tabInfo.tabs[i];
+            // Generate the tab
+            var tab = {
+                data: tabInfo,
+                isActive: i == 0,
+                tabName: tabInfo.title,
+                onRender: function (el, item) {
+                    // Render the form
+                    _this.IsDisplay ? _this.renderDisplayForm(el, item.data) : _this.renderEditForm(el, item.data);
+                    // Call the event
+                    var tab = item.data;
+                    tab.onRendered ? tab.onRendered(el, item) : null;
                 }
-                // Append the create/update button
-                _this._useModal ? common_1.Modal.setFooter(elButtons) : el.appendChild(elButtons);
-                // Call the item form button rendering event
-                var formButtons = [{
-                        text: _this.IsNew ? "Create" : "Update",
-                        type: gd_sprest_bs_1.Components.ButtonTypes.OutlinePrimary,
-                        onClick: function () { _this.save(_this._editForm); }
-                    }];
-                formButtons = _this._onFormButtonsRendering ? _this._onFormButtonsRendering(formButtons) : formButtons;
-                // Render the form buttons
-                formButtons && formButtons.length > 0 ? gd_sprest_bs_1.Components.ButtonGroup({
-                    el: elButtons,
-                    buttons: formButtons
-                }) : null;
-                // Call the footer event
-                _this._onSetFooter ? _this._onSetFooter(_this._useModal ? common_1.Modal.FooterElement : elButtons) : null;
-                // Update the body
-                (_this._useModal ? common_1.Modal : common_1.CanvasForm).setBody(el);
+            };
+            // Call the rendering event
+            tab = tabInfo.onRendering ? tabInfo.onRendering(tab) : tab;
+            if (tab) {
+                // Append the tab
+                tabs.push(tab);
             }
-            // Close the dialog
-            common_1.LoadingDialog.hide();
-            // Show the form
-            (_this._useModal ? common_1.Modal : common_1.CanvasForm).show();
-        });
+        }
+        // Render the tabs
+        return gd_sprest_bs_1.Components.ListGroup({
+            el: this.UseModal ? common_1.Modal.BodyElement : common_1.CanvasForm.BodyElement,
+            colWidth: this._tabInfo.isVertical ? 4 : 12,
+            isTabs: true,
+            isHorizontal: this._tabInfo.isVertical != true,
+            items: tabs
+        }).el;
     };
     // Saves the edit form
     ItemForm.save = function (form) {
         var _this = this;
-        if (form === void 0) { form = this._editForm; }
-        // Validate the form
-        this.validate(form).then(
+        if (form === void 0) { form = this._editForms[0]; }
+        var forms = form ? [form] : this._editForms;
+        var values = {};
+        // Display a loading dialog
+        common_1.LoadingDialog.setHeader("Validation");
+        common_1.LoadingDialog.setBody("Validating the form...");
+        common_1.LoadingDialog.show();
+        // Validate the forms
+        var isValid = true;
+        gd_sprest_bs_1.Helper.Executor(forms, function (form) {
+            // Return a promise
+            return new Promise(function (resolve) {
+                // Validate the form
+                _this.validate(form).then(
+                // Valid
+                function () {
+                    // Update the values
+                    values = __assign(__assign({}, values), form.getValues());
+                    // Resolve the request
+                    resolve(null);
+                }, 
+                // Not Valid
+                function () {
+                    // Set the flag
+                    isValid = false;
+                    // Resolve the request
+                    resolve(null);
+                });
+            });
+        }).then(
         // Success
         function () {
-            // Display a loading dialog
-            common_1.LoadingDialog.setHeader("Saving the Item");
-            common_1.LoadingDialog.setBody((_this.IsNew ? "Creating" : "Updating") + " the Item");
-            common_1.LoadingDialog.show();
-            // Saves the item
-            var saveItem = function (values) {
-                // Save the item
-                form.save(values).then(function (item) {
-                    // Call the update event
-                    _this._updateEvent ? _this._updateEvent(item) : null;
-                    // Close the dialogs
-                    (_this._useModal ? common_1.Modal : common_1.CanvasForm).hide();
-                    common_1.LoadingDialog.hide();
-                });
-            };
-            // Call the save event
-            var values = form.getValues();
-            values = _this._onSave ? _this._onSave(values) : values;
-            // See if the onSave event returned a promise
-            if (values && typeof (values.then) === "function") {
-                // Wait for the promise to complete
-                values.then(function (values) {
-                    // Save the item
-                    saveItem(values);
+            // See if the form(s) are valid
+            if (isValid) {
+                // Call the custom validation event
+                _this.validate(values).then(
+                // Valid
+                function () {
+                    // Update the loading dialog
+                    common_1.LoadingDialog.setHeader("Saving the Item");
+                    common_1.LoadingDialog.setBody((_this.IsNew ? "Creating" : "Updating") + " the Item");
+                    // Saves the item
+                    var saveItem = function (values) {
+                        // Save the item
+                        form.save(values).then(function (item) {
+                            // Call the update event
+                            _this._updateEvent ? _this._updateEvent(item) : null;
+                            // Close the dialogs
+                            (_this._useModal ? common_1.Modal : common_1.CanvasForm).hide();
+                            common_1.LoadingDialog.hide();
+                        });
+                    };
+                    // Call the save event
+                    values = _this._onSave ? _this._onSave(values) : values;
+                    // See if the onSave event returned a promise
+                    if (values && typeof (values["then"]) === "function") {
+                        // Wait for the promise to complete
+                        values["then"](function (values) {
+                            // Save the item
+                            saveItem(values);
+                        });
+                    }
+                    else {
+                        // Save the item
+                        saveItem(values);
+                    }
+                }, 
+                // Not Valid
+                function () {
+                    // Do nothing
                 });
             }
             else {
-                // Save the item
-                saveItem(values);
+                // Close the dialog
+                common_1.LoadingDialog.hide();
             }
-        }, 
-        // Error
-        function () {
-            // Do Nothing
         });
     };
     // Validates the form
-    ItemForm.validate = function (form) {
+    ItemForm.validate = function (values) {
         var _this = this;
         // Return a promise
         return new Promise(function (resolve, reject) {
-            var isValid = form.isValid();
-            // Display a loading dialog
-            common_1.LoadingDialog.setHeader("Validation");
-            common_1.LoadingDialog.setBody("Validating the form...");
-            common_1.LoadingDialog.show();
-            // Ensure it's valid
-            if (!isValid) {
-                // Close the dialog
-                common_1.LoadingDialog.hide();
-                // Reject the request
-                reject();
-                return;
-            }
+            var isValid = true;
             // Call the validation event
-            var returnVal = _this._onValidation ? _this._onValidation(form.getValues()) : null;
+            var returnVal = _this._onValidation ? _this._onValidation(values) : null;
             if (returnVal && typeof (returnVal.then) === "function") {
                 // Wait for the promise to complete
                 returnVal.then(function (isValid) {
-                    // Close the dialog
-                    common_1.LoadingDialog.hide();
                     // Resolve the request
                     isValid ? resolve() : reject();
                 });
@@ -332,8 +433,6 @@ var ItemForm = /** @class */ (function () {
                     // Update the flag
                     isValid = returnVal;
                 }
-                // Close the dialog
-                common_1.LoadingDialog.hide();
                 // Resolve the request
                 isValid ? resolve() : reject();
             }
@@ -347,11 +446,12 @@ var ItemForm = /** @class */ (function () {
     ItemForm._onSetHeader = null;
     ItemForm._onSave = null;
     ItemForm._onValidation = null;
+    ItemForm._tabInfo = null;
     ItemForm._updateEvent = null;
     // Display Form
-    ItemForm._displayForm = null;
+    ItemForm._displayForms = null;
     // Edit Form
-    ItemForm._editForm = null;
+    ItemForm._editForms = null;
     // Form Information
     ItemForm._info = null;
     // Form Modes