@solidstarters/solid-core-ui 1.1.75 → 1.1.78

package/dist/components/core/form/SolidFormView.js

@@ -1,908 +0,0 @@
-"use client";
-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);
-};
-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());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPermission, deletePermission, updatePermission } from "../../../helpers/permissions";
-import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
-import { useGetSolidViewLayoutQuery } from "../../../redux/api/solidViewApi";
-import { useLazyCheckIfPermissionExistsQuery } from "../../../redux/api/userApi";
-import { useFormik } from "formik";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import "primeflex/primeflex.css";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
-import { TabPanel, TabView } from "primereact/tabview";
-import { Toast } from "primereact/toast";
-import qs from "qs";
-import { useEffect, useRef, useState } from "react";
-import * as Yup from "yup";
-import { SolidBooleanField } from "./fields/SolidBooleanField";
-import { SolidDateField } from "./fields/SolidDateField";
-import { SolidDateTimeField } from "./fields/SolidDateTimeField";
-import { SolidDecimalField } from "./fields/SolidDecimalField";
-import { SolidIntegerField } from "./fields/SolidIntegerField";
-import { SolidJsonField } from "./fields/SolidJsonField";
-import { SolidLongTextField } from "./fields/SolidLongTextField";
-import { SolidMediaMultipleField } from "./fields/SolidMediaMultipleField";
-import { SolidMediaSingleField } from "./fields/SolidMediaSingleField";
-import { SolidRelationField } from "./fields/SolidRelationField";
-import { SolidRichTextField } from "./fields/SolidRichTextField";
-import { SolidSelectionDynamicField } from "./fields/SolidSelectionDynamicField";
-import { SolidSelectionStaticField } from "./fields/SolidSelectionStaticField";
-import { SolidShortTextField } from "./fields/SolidShortTextField";
-import { SolidTimeField } from "./fields/SolidTimeField";
-import { getExtensionComponent, getExtensionFunction } from "../../../helpers/registry";
-import { SolidPasswordField } from "./fields/SolidPasswordField";
-import { SolidEmailField } from "./fields/SolidEmailField";
-import { Panel } from "primereact/panel";
-import { SolidFormUserViewLayout } from "./SolidFormUserViewLayout";
-import Lightbox from "yet-another-react-lightbox";
-import Counter from "yet-another-react-lightbox/plugins/counter";
-import Download from "yet-another-react-lightbox/plugins/download";
-import "yet-another-react-lightbox/styles.css";
-import "yet-another-react-lightbox/plugins/counter.css";
-import { SolidChatter } from "../chatter/SolidChatter";
-import { SolidFormActionHeader } from "./SolidFormActionHeader";
-var getLayoutFields = function (node) {
-    var fields = [];
-    if (node.type === "field") {
-        fields.push(node);
-    }
-    if (node.children && Array.isArray(node.children)) {
-        for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
-            var child = _a[_i];
-            fields = fields.concat(getLayoutFields(child));
-        }
-    }
-    return fields;
-};
-var getLayoutFieldsAsObject = function (layout) {
-    var allFields = layout.flatMap(getLayoutFields);
-    return allFields.reduce(function (result, field) {
-        if (field.attrs.name) {
-            result[field.attrs.name] = __assign({}, field);
-        }
-        return result;
-    }, {});
-};
-var fieldFactory = function (type, fieldContext, setLightboxUrls, setOpenLightbox) {
-    if (type === 'shortText') {
-        return new SolidShortTextField(fieldContext);
-    }
-    if (type === 'longText') {
-        return new SolidLongTextField(fieldContext);
-    }
-    if (type === 'int' || type === 'bigint') {
-        return new SolidIntegerField(fieldContext);
-    }
-    if (type === 'decimal' || type === 'float') {
-        return new SolidDecimalField(fieldContext);
-    }
-    if (type === 'boolean') {
-        return new SolidBooleanField(fieldContext);
-    }
-    if (type === 'richText') {
-        return new SolidRichTextField(fieldContext);
-    }
-    if (type === 'date') {
-        return new SolidDateField(fieldContext);
-    }
-    if (type === 'datetime') {
-        return new SolidDateTimeField(fieldContext);
-    }
-    if (type === 'time') {
-        return new SolidTimeField(fieldContext);
-    }
-    if (type === 'json') {
-        return new SolidJsonField(fieldContext);
-    }
-    if (type === 'selectionStatic') {
-        return new SolidSelectionStaticField(fieldContext);
-    }
-    if (type === 'selectionDynamic') {
-        return new SolidSelectionDynamicField(fieldContext);
-    }
-    if (type === 'relation') {
-        return new SolidRelationField(fieldContext);
-    }
-    if (type === 'mediaSingle') {
-        return new SolidMediaSingleField(fieldContext, setLightboxUrls, setOpenLightbox);
-    }
-    if (type === 'mediaMultiple') {
-        return new SolidMediaMultipleField(fieldContext, setLightboxUrls, setOpenLightbox);
-    }
-    if (type === 'password') {
-        return new SolidPasswordField(fieldContext);
-    }
-    if (type === 'email') {
-        return new SolidEmailField(fieldContext);
-    }
-    return null;
-};
-// solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
-var SolidField = function (_a) {
-    var formik = _a.formik, field = _a.field, fieldMetadata = _a.fieldMetadata, initialEntityData = _a.initialEntityData, solidFormViewMetaData = _a.solidFormViewMetaData, modelName = _a.modelName, readOnly = _a.readOnly, viewMode = _a.viewMode, onChange = _a.onChange, onBlur = _a.onBlur, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
-    var fieldContext = {
-        // field metadata - coming from the field-metadata table.
-        fieldMetadata: fieldMetadata,
-        // field layout - coming from view.layout
-        field: field,
-        // initial data 
-        data: initialEntityData,
-        // complete form view metadata - this includes layout of the whole form & metadata about all fields in the corresponding model.
-        solidFormViewMetaData: solidFormViewMetaData,
-        modelName: modelName,
-        readOnly: readOnly,
-        viewMode: viewMode,
-        onChange: onChange,
-        onBlur: onBlur
-    };
-    var solidField = fieldFactory(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type, fieldContext, setLightboxUrls, setOpenLightbox);
-    return solidField === null || solidField === void 0 ? void 0 : solidField.render(formik);
-};
-var SolidGroup = function (_a) {
-    var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
-    return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
-    // <div className={className}>
-    //     <div className="s_group">
-    //         <fieldset>
-    //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-    //             <div className="grid">{children}</div>
-    //         </fieldset>
-    //     </div>
-    // </div>
-    // <div className="formgrid grid">
-    //     {children}
-    // </div>
-    );
-};
-var SolidRow = function (_a) {
-    var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
-    return (
-    // <div className={`row ${className}`}>
-    //     <div className="s_group">
-    //         <fieldset>
-    //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-    //             <div className="grid">{children}</div>
-    //         </fieldset>
-    //     </div>
-    // </div>
-    _jsxs("div", { className: "row ".concat(className), children: [attrs.label && _jsx("p", { children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
-    // <div>{children}</div>
-    );
-};
-var SolidColumn = function (_a) {
-    var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
-    return (
-    // first fieldset ui
-    // <div className={`${className}`}>
-    //     <div className="s_group">
-    //         <fieldset>
-    //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-    //             <div className="grid">{children}</div>
-    //         </fieldset>
-    //     </div>
-    // </div>
-    //second fieldset ui
-    // <div className={`${className}`}>
-    //     {attrs.label && <p>{attrs.label}</p>}
-    //     <div className="grid">{children}</div>
-    // </div>
-    //figma fieldset ui
-    attrs.label ?
-        _jsx("div", { className: "".concat(className), children: _jsx(Panel, { header: attrs.label, className: "solid-column-panel", children: _jsx("div", { className: "grid", children: children }) }) })
-        :
-            _jsx("div", { className: "".concat(className), children: _jsx("div", { className: "grid", children: children }) }));
-};
-var SolidSheet = function (_a) {
-    var children = _a.children;
-    return (_jsx("div", { className: "p-fluid p-grid", children: children }));
-};
-var SolidNotebook = function (_a) {
-    var children = _a.children;
-    return (_jsx("div", { className: "solid-tab-view w-full", children: _jsx(TabView, { children: children }) }));
-};
-var SolidDynamicWidget = function (_a) {
-    var widgetName = _a.widgetName, formik = _a.formik, field = _a.field, solidFormViewMetaData = _a.solidFormViewMetaData;
-    var solidView = solidFormViewMetaData.data.solidView;
-    var solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
-    var DynamicWidget = getExtensionComponent(widgetName);
-    var widgetProps = {
-        formData: formik.values,
-        field: field,
-        fieldsMetadata: solidFieldsMetadata,
-        viewMetadata: solidView
-    };
-    return (_jsx("div", { className: "solid-tab-view w-full", children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
-};
-var SolidPage = function (_a) {
-    var attrs = _a.attrs, children = _a.children, key = _a.key;
-    return (_jsx(TabPanel, { header: attrs.label, children: _jsx("div", { className: "p-fluid", children: children }) }, key));
-};
-// Original code...
-// const addLevelToGroups = (layout: any, level = 1) => {
-//     return layout.map((element: any) => {
-//         if (element.type === "group") {
-//             // Add the level to the group's attrs
-//             element.attrs = {
-//                 ...element.attrs,
-//                 level: level,  // Add level information to the attrs
-//                 // className: level === 1 ? 'col-12' : 'col-6',  // Assign className based on level
-//             };
-//         } else {
-//             element.children = addLevelToGroups(element.children, level);
-//         }
-//         // If the element has children, recursively apply this logic
-//         // if (element.children) {
-//         //     element.children = addLevelToGroups(element.children, level + 1);
-//         // }
-//         return element;
-//     });
-// };
-// Fix for immutable objects. 
-// const addLevelToGroups = (layout: any, level = 1): any[] => {
-//     return layout.map((element: any) => {
-//         // Create a new object for immutability
-//         const updatedElement = { ...element };
-//         if (updatedElement.type === "group") {
-//             // Add level to attrs, creating a new object for immutability
-//             updatedElement.attrs = {
-//                 ...updatedElement.attrs,
-//                 level: level, // Add level information
-//             };
-//         }
-//         // If the element has children, recursively apply this logic
-//         if (updatedElement.children) {
-//             updatedElement.children = addLevelToGroups(updatedElement.children, level + 1);
-//         }
-//         return updatedElement;
-//     });
-// };
-var SolidFormView = function (params) {
-    var _a;
-    var pathname = usePathname();
-    var router = useRouter();
-    var toast = useRef(null);
-    var searchParams = useSearchParams();
-    var _b = useState(false), redirectToList = _b[0], setRedirectToList = _b[1];
-    var _c = useState(false), isDeleteDialogVisible = _c[0], setDeleteDialogVisible = _c[1];
-    var _d = useState(false), isLayoutDialogVisible = _d[0], setLayoutDialogVisible = _d[1];
-    var _e = useState([]), actionsAllowed = _e[0], setActionsAllowed = _e[1];
-    var _f = useState("view"), viewMode = _f[0], setViewMode = _f[1];
-    var _g = useState(false), openLightbox = _g[0], setOpenLightbox = _g[1];
-    var _h = useState([]), lightboxUrls = _h[0], setLightboxUrls = _h[1];
-    var _j = useState(true), isShowChatter = _j[0], setShowChatter = _j[1];
-    var errorFields = [];
-    var triggerCheckIfPermissionExists = useLazyCheckIfPermissionExistsQuery()[0];
-    var op = useRef(null);
-    useEffect(function () {
-        var mode = searchParams.get('viewMode');
-        if (params.id === 'new') {
-            setViewMode('edit');
-            return;
-        }
-        // Set the viewMode based on the URL
-        if (mode === 'view' || mode === 'edit') {
-            setViewMode(mode);
-        }
-        else {
-            setViewMode('view'); // Default to 'view' if no valid mode is provided
-        }
-    }, [searchParams, params.id]);
-    // function that updates view mode 
-    var updateViewMode = function (newMode) {
-        setViewMode(newMode);
-        var params = new URLSearchParams(searchParams.toString());
-        params.set("viewMode", newMode);
-        router.push("".concat(pathname, "?").concat(params.toString()), { scroll: false });
-    };
-    useEffect(function () {
-        var fetchPermissions = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var permissionNames, queryData, queryString, response;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!params.modelName) return [3 /*break*/, 2];
-                        permissionNames = [
-                            createPermission(params.modelName),
-                            deletePermission(params.modelName),
-                            updatePermission(params.modelName)
-                        ];
-                        queryData = {
-                            permissionNames: permissionNames
-                        };
-                        queryString = qs.stringify(queryData, {
-                            encodeValuesOnly: true
-                        });
-                        return [4 /*yield*/, triggerCheckIfPermissionExists(queryString)];
-                    case 1:
-                        response = _a.sent();
-                        setActionsAllowed(response.data.data);
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchPermissions();
-    }, [params.modelName]);
-    // Create the RTK slices for this entitor (const id of fieldValue) {
-    //     if (!isInt(id)) {
-    //         errors.push({ field: this.fieldMetadata.name, error: `Invalid ids in ${commandFieldName}` });
-    //     }
-    // }y
-    var entityApi = createSolidEntityApi(params.modelName);
-    var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation;
-    var _k = useCreateSolidEntityMutation(), createEntity = _k[0], _l = _k[1], isEntityCreateSuccess = _l.isSuccess, isEntityCreateError = _l.isError, entityCreateError = _l.error;
-    var _m = useUpdateSolidEntityMutation(), updateEntity = _m[0], _o = _m[1], isEntityUpdateSuceess = _o.isSuccess, isEntityUpdateError = _o.isError, entityUpdateError = _o.error;
-    var _p = useDeleteSolidEntityMutation(), deleteEntity = _p[0], _q = _p[1], isEntityDeleteSuceess = _q.isSuccess, isEntityDeleteError = _q.isError, entityDeleteError = _q.error;
-    // - - - - - - - - - - - -- - - - - - - - - - - - METADATA here
-    // Get the form view layout & metadata first. 
-    var formViewMetaDataQs = qs.stringify(__assign(__assign({}, params), { viewType: 'form' }), {
-        encodeValuesOnly: true,
-    });
-    var _r = useState({}), formViewMetaData = _r[0], setFormViewMetaData = _r[1];
-    var _s = useState(null), formViewLayout = _s[0], setFormViewLayout = _s[1];
-    var _t = useGetSolidViewLayoutQuery(formViewMetaDataQs), solidFormViewMetaData = _t.data, solidFormViewMetaDataIsLoading = _t.isLoading;
-    var _u = useState(true), refreshChatterMessage = _u[0], setRefreshChatterMessage = _u[1];
-    useEffect(function () {
-        if (isEntityCreateSuccess == true ||
-            isEntityUpdateSuceess == true ||
-            isEntityDeleteSuceess == true) {
-            setRefreshChatterMessage(true);
-            // Close The pop in case the form is used in embeded form
-            if (params.embeded == true) {
-                params.handlePopupClose();
-            }
-            if (redirectToList === true) {
-                var segments = pathname.split('/').filter(Boolean); // Split and filter empty segments
-                var newPath = '/' + segments.slice(0, -2).join('/') + '/list'; // Remove last segment and add "/all"
-                router.push(newPath);
-            }
-        }
-    }, [isEntityCreateSuccess, isEntityUpdateSuceess, isEntityDeleteSuceess]);
-    function isFetchBaseQueryErrorWithErrorResponse(error) {
-        return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
-    }
-    useEffect(function () {
-        var handleError = function (errorToast) {
-            var _a;
-            var errorMessage = ['An error occurred'];
-            if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
-                errorMessage = errorToast.data.message;
-            }
-            else {
-                errorMessage = ['Something went wrong'];
-            }
-            (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                severity: 'error',
-                summary: 'Error',
-                detail: errorMessage,
-                life: 3000,
-                //@ts-ignore
-                content: function () { return (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: Array.isArray(errorMessage) ? (errorMessage.map(function (message, index) { return (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: message.trim() }) }, index)); })) : (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.trim() }) })) })); },
-            });
-        };
-        // Check and handle errors from each API operation
-        if (isEntityCreateError) {
-            handleError(entityCreateError);
-        }
-        else if (isEntityDeleteError) {
-            handleError(entityDeleteError);
-        }
-        else if (isEntityUpdateError) {
-            handleError(entityUpdateError);
-        }
-    }, [
-        isEntityCreateError,
-        isEntityDeleteError,
-        isEntityUpdateError
-    ]);
-    var showToast = function (severity, summary, detail) {
-        var _a;
-        (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
-            severity: severity,
-            summary: summary,
-            detail: detail,
-            life: 3000,
-        });
-    };
-    var onFormikSubmit = function (values) { return __awaiter(void 0, void 0, void 0, function () {
-        var solidView, solidFieldsMetadata, layoutFieldsObj, formData_1, result, updatedUrl, err_1;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    solidView = solidFormViewMetaData.data.solidView;
-                    solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
-                    layoutFieldsObj = getLayoutFieldsAsObject([formViewLayout]);
-                    _b.label = 1;
-                case 1:
-                    _b.trys.push([1, 7, , 8]);
-                    formData_1 = new FormData();
-                    // Iterate through the keys in the values object
-                    Object.entries(values).forEach(function (_a) {
-                        var key = _a[0], value = _a[1];
-                        var fieldMetadata = solidFieldsMetadata[key];
-                        var fieldContext = {
-                            fieldMetadata: fieldMetadata,
-                            field: layoutFieldsObj[key],
-                            data: initialEntityData,
-                            solidFormViewMetaData: solidFormViewMetaData,
-                            modelName: params.modelName
-                        };
-                        var solidField = fieldFactory(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type, fieldContext);
-                        // Append each field to the FormData
-                        if (value !== undefined && value !== null && solidField) {
-                            solidField.updateFormData(value, formData_1);
-                        }
-                    });
-                    if (!(params.inlineCreateAutoSave === true)) return [3 /*break*/, 2];
-                    params.customCreateHandler(formData_1);
-                    return [3 /*break*/, 6];
-                case 2:
-                    if (!(params.id === 'new')) return [3 /*break*/, 4];
-                    return [4 /*yield*/, createEntity(formData_1).unwrap()];
-                case 3:
-                    result = _b.sent();
-                    showToast("success", "Form saved", "Form saved successfully!");
-                    if (!params.embeded) {
-                        updatedUrl = pathname.replace("new", (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.id);
-                        router.push(updatedUrl);
-                    }
-                    return [3 /*break*/, 6];
-                case 4: 
-                // updateEntity({ id: +params.id, data: formData });
-                return [4 /*yield*/, updateEntity({ id: +params.id, data: formData_1 }).unwrap()];
-                case 5:
-                    // updateEntity({ id: +params.id, data: formData });
-                    _b.sent();
-                    // const result = await updateEntity({ id: +params.id, data: formData }).unwrap();
-                    if (!params.embeded) {
-                        showToast("success", "Form Updated", "Form updated successfully!");
-                    }
-                    _b.label = 6;
-                case 6: return [3 /*break*/, 8];
-                case 7:
-                    err_1 = _b.sent();
-                    console.error("Failed to create Entity: ", err_1);
-                    return [3 /*break*/, 8];
-                case 8: return [2 /*return*/];
-            }
-        });
-    }); };
-    var showFieldError = function () {
-        if ((errorFields === null || errorFields === void 0 ? void 0 : errorFields.length) === 0)
-            return;
-        errorFields.forEach(function (error) {
-            var _a;
-            (_a = toast === null || toast === void 0 ? void 0 : toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                severity: "error",
-                summary: "Metadata Error",
-                detail: error,
-                life: 3000,
-            });
-        });
-        // errorFields.length = 0;
-    };
-    // useEffect(() => {
-    //     if (errorFields?.length > 0) {
-    //         showFieldError();
-    //     }
-    // }, [errorFields])
-    // - - - - - - - - - - - -- - - - - - - - - - - - DATA here
-    // Fetch the actual data here. 
-    // This is the initial value of this form, will come from an API call in the case of edit. 
-    var layoutFields = [];
-    var toPopulate = [];
-    var toPopulateMedia = [];
-    if (solidFormViewMetaData && formViewLayout) {
-        var solidView = solidFormViewMetaData.data.solidView;
-        var solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
-        layoutFields = [formViewLayout].flatMap(getLayoutFields);
-        for (var i = 0; i < (layoutFields === null || layoutFields === void 0 ? void 0 : layoutFields.length); i++) {
-            var formLayoutField = layoutFields[i];
-            var fieldMetadata = solidFieldsMetadata[formLayoutField.attrs.name];
-            if ((fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type) === 'relation') {
-                toPopulate.push(fieldMetadata.name);
-            }
-            if ((fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type) === 'mediaSingle' || (fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type) === 'mediaMultiple') {
-                toPopulateMedia.push(fieldMetadata.name);
-            }
-        }
-    }
-    // TODO: Possible optimisation here, we are firing 2 queries to load the form view data object. 
-    // once without populate & populateMedia and then again once after that.
-    var formViewDataQs = qs.stringify({ populate: toPopulate, populateMedia: toPopulateMedia }, {
-        encodeValuesOnly: true,
-    });
-    var _v = useState({}), initialEntityData = _v[0], setInitialEntityData = _v[1];
-    var _w = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs }, {
-        skip: params.id === 'new'
-    }), solidFormViewData = _w.data, solidFormViewDataIsLoading = _w.isLoading, refetchSolidFormViewData = _w.refetch;
-    useEffect(function () {
-        if (params.id !== 'new') {
-            refetchSolidFormViewData();
-        }
-    }, [formViewDataQs]);
-    useEffect(function () {
-        var handleDynamicLayout = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var formLayout, dynamicHeader, DynamicFunctionComponent, event_1, updatedFormLayout, newFormLayout, error_1;
-            var _a, _b, _c, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        if (!solidFormViewMetaData) return [3 /*break*/, 5];
-                        formLayout = solidFormViewMetaData;
-                        dynamicHeader = (_c = (_b = (_a = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.onFormLayoutLoad;
-                        DynamicFunctionComponent = null;
-                        event_1 = {
-                            fieldsMetadata: solidFormViewMetaData,
-                            formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data,
-                            type: 'onFormLayoutLoad',
-                            viewMetadata: (_d = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidView
-                        };
-                        if (!dynamicHeader) return [3 /*break*/, 4];
-                        DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
-                        if (!DynamicFunctionComponent) return [3 /*break*/, 4];
-                        _e.label = 1;
-                    case 1:
-                        _e.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, DynamicFunctionComponent(event_1)];
-                    case 2:
-                        updatedFormLayout = _e.sent();
-                        if (updatedFormLayout && (updatedFormLayout === null || updatedFormLayout === void 0 ? void 0 : updatedFormLayout.layoutChanged) && (updatedFormLayout === null || updatedFormLayout === void 0 ? void 0 : updatedFormLayout.newLayout)) {
-                            newFormLayout = __assign(__assign({}, formLayout), { data: __assign(__assign({}, formLayout.data), { solidView: __assign(__assign({}, formLayout.data.solidView), { layout: updatedFormLayout.newLayout }) }) });
-                            formLayout = newFormLayout;
-                        }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        error_1 = _e.sent();
-                        console.error('Error in DynamicFunctionComponent:', error_1);
-                        return [3 /*break*/, 4];
-                    case 4:
-                        setFormViewMetaData(formLayout);
-                        if (params.customLayout) {
-                            setFormViewLayout(params.customLayout);
-                        }
-                        else {
-                            setFormViewLayout(formLayout.data.solidView.layout);
-                        }
-                        _e.label = 5;
-                    case 5: return [2 /*return*/];
-                }
-            });
-        }); };
-        handleDynamicLayout();
-    }, [solidFormViewMetaData, solidFormViewData]);
-    useEffect(function () {
-        var handleDynamicFunction = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var dynamicHeader, DynamicFunctionComponent, formViewData, event_2, updatedFormData;
-            var _a, _b, _c, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        if (!solidFormViewData) return [3 /*break*/, 3];
-                        dynamicHeader = (_c = (_b = (_a = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.onFormDataLoad;
-                        DynamicFunctionComponent = null;
-                        formViewData = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data;
-                        event_2 = {
-                            fieldsMetadata: solidFormViewMetaData,
-                            formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data,
-                            type: dynamicHeader,
-                            viewMetadata: (_d = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidView
-                        };
-                        if (!dynamicHeader) return [3 /*break*/, 2];
-                        DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
-                        if (!DynamicFunctionComponent) return [3 /*break*/, 2];
-                        return [4 /*yield*/, DynamicFunctionComponent(event_2)];
-                    case 1:
-                        updatedFormData = _e.sent();
-                        if (updatedFormData && (updatedFormData === null || updatedFormData === void 0 ? void 0 : updatedFormData.dataChanged) && (updatedFormData === null || updatedFormData === void 0 ? void 0 : updatedFormData.newFormData)) {
-                            formViewData = updatedFormData.newFormData;
-                        }
-                        _e.label = 2;
-                    case 2:
-                        setInitialEntityData(formViewData);
-                        _e.label = 3;
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); };
-        handleDynamicFunction();
-    }, [solidFormViewData]);
-    var formik;
-    // If either the metadata or the data of this form is loading, then we simply render a loading screen...
-    if (solidFormViewMetaDataIsLoading || solidFormViewDataIsLoading || !formViewLayout) {
-        formik = useFormik({
-            initialValues: {},
-            validationSchema: Yup.object(),
-            enableReinitialize: true,
-            onSubmit: onFormikSubmit,
-        });
-        return _jsx("div", { children: "Rendering form..." });
-    }
-    // At this point everything required to render the form is loaded, so we go ahead and start rendering things dynamically...
-    else {
-        // Initialize formik...
-        var solidView_1 = solidFormViewMetaData.data.solidView;
-        var solidFieldsMetadata_1 = solidFormViewMetaData.data.solidFieldsMetadata;
-        var validationSchema = {};
-        var initialValues = {};
-        for (var i = 0; i < (layoutFields === null || layoutFields === void 0 ? void 0 : layoutFields.length); i++) {
-            var formLayoutField = layoutFields[i];
-            var fieldMetadata = solidFieldsMetadata_1[formLayoutField.attrs.name];
-            var fieldContext = {
-                fieldMetadata: fieldMetadata,
-                field: formLayoutField,
-                data: initialEntityData,
-                solidFormViewMetaData: solidFormViewMetaData,
-                modelName: params.modelName
-            };
-            var solidField = fieldFactory(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type, fieldContext);
-            if (!(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type)) {
-                var errorMessage = formLayoutField.attrs.label;
-                if (!errorFields.includes(errorMessage)) {
-                    errorFields.push(errorMessage);
-                }
-            }
-            if (solidField) {
-                // @ts-ignore
-                validationSchema[formLayoutField.attrs.name] = solidField.validationSchema();
-                // @ts-ignore
-                initialValues[formLayoutField.attrs.name] = solidField.initialValue();
-            }
-        }
-        formik = useFormik({
-            initialValues: initialValues,
-            validationSchema: Yup.object(validationSchema),
-            enableReinitialize: true,
-            onSubmit: onFormikSubmit,
-        });
-        var formFieldOnXXX_1 = function (event, eventType) { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, fieldName, value, type, checked, changeHandler, dynamicChangeHandler, event_3, updatedFormInfo_1;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        // Invoke the formik change 
-                        if (eventType === 'onFieldChange') {
-                            formik.handleChange(event);
-                        }
-                        _a = event.target, fieldName = _a.name, value = _a.value, type = _a.type, checked = _a.checked;
-                        changeHandler = solidView_1.layout[eventType];
-                        if (!changeHandler) return [3 /*break*/, 3];
-                        dynamicChangeHandler = getExtensionFunction(changeHandler);
-                        if (!dynamicChangeHandler) return [3 /*break*/, 2];
-                        event_3 = {
-                            fieldsMetadata: solidFieldsMetadata_1,
-                            formData: formik.values,
-                            modifiedField: fieldName,
-                            modifiedFieldValue: value,
-                            // @ts-ignore
-                            // TODO: HP & OR: This will be fixed once we figure out how to get types exported from solid-core-ui
-                            type: eventType,
-                            viewMetadata: solidView_1
-                        };
-                        return [4 /*yield*/, dynamicChangeHandler(event_3)];
-                    case 1:
-                        updatedFormInfo_1 = _b.sent();
-                        // console.log(`${eventType}: formFieldOnXXX response received: `, updatedFormInfo);
-                        // If dataChanged is true, update Formik values
-                        if ((updatedFormInfo_1 === null || updatedFormInfo_1 === void 0 ? void 0 : updatedFormInfo_1.dataChanged) && updatedFormInfo_1.newFormData) {
-                            // This does one field at a time.
-                            // TODO: does the below fire change events again?
-                            Object.entries(updatedFormInfo_1.newFormData).forEach(function (_a) {
-                                var key = _a[0], newValue = _a[1];
-                                formik.setFieldValue(key, newValue);
-                            });
-                            // This does all at once.
-                            // formik.setValues({
-                            //     ...formik.values,
-                            //     ...updatedFormInfo.newFormData
-                            // });
-                        }
-                        // if layout has changed then we need to re-render.
-                        if ((updatedFormInfo_1 === null || updatedFormInfo_1 === void 0 ? void 0 : updatedFormInfo_1.layoutChanged) && updatedFormInfo_1.newLayout) {
-                            // setFormViewMetaData({ ...formViewMetaData, layout: updatedFormInfo.newLayout });
-                            // console.log(`Existing form view metadata is: `, formViewMetaData);
-                            // TODO: this will trigger a useEffect dependent on formViewMetadata that invokes setFormViewLayout, 
-                            // TODO: which means that this will not work if custom layout has been injected as a prop.
-                            setFormViewLayout(updatedFormInfo_1.newLayout);
-                            setFormViewMetaData(function (prevMetaData) {
-                                var updatedFormViewMetadata = __assign(__assign({}, prevMetaData), { data: __assign(__assign({}, prevMetaData.data), { solidView: __assign(__assign({}, prevMetaData.data.solidView), { layout: updatedFormInfo_1.newLayout }) }) });
-                                // console.log(`Updated form view metadata is: `, updatedFormViewMetadata);
-                                return updatedFormViewMetadata;
-                            });
-                        }
-                        return [3 /*break*/, 3];
-                    case 2:
-                        // TODO: Show an error popup and stop form rendering ideallly...
-                        console.log("Unable to load dynamic module:", changeHandler);
-                        _b.label = 3;
-                    case 3: return [2 /*return*/];
-                }
-            });
-        }); };
-        // Now render the form dynamically...
-        var renderFormElementDynamically_1 = function (element, solidFormViewMetaData) {
-            var type = element.type, attrs = element.attrs, body = element.body, children = element.children;
-            // const key = attrs?.name ?? generateRandomKey();
-            var key = attrs === null || attrs === void 0 ? void 0 : attrs.name;
-            var visible = attrs === null || attrs === void 0 ? void 0 : attrs.visible;
-            if (visible === undefined || visible === null) {
-                visible = true;
-            }
-            // console.log(`Resolved visibility of form element ${key} to ${visible}`);
-            // console.log(`Form element ${key}: `, attrs);
-            switch (type) {
-                case "form":
-                    if (!children)
-                        children = [];
-                    return _jsx("div", { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); }) }, key);
-                case "div":
-                    if (!children)
-                        children = [];
-                    return _jsx("div", __assign({}, attrs, { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); }) }), key);
-                case "span":
-                    return _jsx("span", __assign({}, attrs, { children: body }), key);
-                case "p":
-                    return _jsx("p", __assign({}, attrs, { children: body }), key);
-                case "h1":
-                    return _jsx("h1", __assign({}, attrs, { children: body }), key);
-                case "h2":
-                    return _jsx("h2", __assign({}, attrs, { children: body }), key);
-                case "ul":
-                    if (!children)
-                        children = [];
-                    return _jsx("ul", __assign({}, attrs, { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); }) }), key);
-                case "li":
-                    return _jsx("li", __assign({}, attrs, { children: body }), key);
-                case "sheet":
-                    return _jsx(SolidSheet, { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); }) }, key);
-                case "group":
-                    if (visible === true) {
-                        return _jsx(SolidGroup, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); }) }, key);
-                    }
-                case "row":
-                    if (visible === true) {
-                        return _jsx(SolidRow, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); }) }, key);
-                    }
-                case "column":
-                    if (visible === true) {
-                        return _jsx(SolidColumn, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); }) }, key);
-                    }
-                case "field": {
-                    if (visible === true) {
-                        // const fieldMetadata = solidFieldsMetadata[attrs.name];
-                        var fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
-                        // Read only permission if there is no update permission on model and router doesnt contains new
-                        var readOnlyPermission = !actionsAllowed.includes("".concat(updatePermission(params.modelName))) && params.id !== "new";
-                        return _jsx(SolidField, { field: element, formik: formik, fieldMetadata: fieldMetadata, initialEntityData: solidFormViewData ? solidFormViewData.data : null, solidFormViewMetaData: solidFormViewMetaData, modelName: params.modelName, readOnly: readOnlyPermission, viewMode: viewMode, onChange: formFieldOnXXX_1, onBlur: formFieldOnXXX_1, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox }, key);
-                    }
-                }
-                case "notebook":
-                    if (visible === true) {
-                        return _jsx(SolidNotebook, { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); }) }, key);
-                    }
-                case "page":
-                    // console.log(`Resolved visibility of form element ${key} to ${visible}`);
-                    if (visible === true) {
-                        var pageChildren = children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); });
-                        return SolidPage({ children: pageChildren, attrs: attrs, key: key });
-                    }
-                case "custom":
-                    if (visible === true) {
-                        var widgetName = attrs === null || attrs === void 0 ? void 0 : attrs.widget;
-                        var fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
-                        if (widgetName) {
-                            // widgetName, formik, field, fieldMetadata, solidFormViewMetaData
-                            return _jsx(SolidDynamicWidget, { widgetName: widgetName, field: element, formik: formik, fieldMetadata: fieldMetadata, solidFormViewMetaData: solidFormViewMetaData }, key);
-                        }
-                    }
-                default:
-                    return null;
-            }
-        };
-        var renderFormDynamically = function (solidFormViewMetaData) {
-            // console.log(`renderFormDynamically invoked....`);
-            if (!solidFormViewMetaData) {
-                return;
-            }
-            if (!solidFormViewMetaData.data) {
-                return;
-            }
-            var solidView = solidFormViewMetaData.data.solidView;
-            var solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
-            if (!solidView || !solidFieldsMetadata) {
-                return;
-            }
-            if (!solidView || !solidFieldsMetadata) {
-                return;
-            }
-            var updatedLayout = [formViewLayout];
-            var dynamicForm = updatedLayout.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); });
-            return dynamicForm;
-        };
-        var handleDeleteEntity_1 = function () { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                deleteEntity(solidFormViewData.data.id);
-                setDeleteDialogVisible(false);
-                if (params.embeded == true) {
-                    setRedirectToList(false);
-                }
-                else {
-                    setRedirectToList(true);
-                }
-                return [2 /*return*/];
-            });
-        }); };
-        var onDeleteClose_1 = function () {
-            setDeleteDialogVisible(false);
-        };
-        // TODO: This was simply to demonstrate how we can use dynamic components, we will remove this and use it in a more sensible way in the layout. 
-        // TODO: to demonstrated this you can simply add the below to the layout of the book form view.
-        // TODO: "header": "BookFormViewDynamicComponent",
-        var dynamicHeader = (_a = solidView_1.layout) === null || _a === void 0 ? void 0 : _a.header;
-        var DynamicHeaderComponent = null;
-        if (dynamicHeader) {
-            DynamicHeaderComponent = getExtensionComponent(dynamicHeader);
-        }
-        return (_jsxs("div", { className: "solid-form-wrapper", children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color' : '' }, children: [_jsxs("form", { style: { width: '100%' }, onSubmit: formik.handleSubmit, children: [_jsx(SolidFormActionHeader, { formik: formik, params: params, actionsAllowed: actionsAllowed, formViewLayout: formViewLayout, solidView: solidView_1, solidFormViewMetaData: solidFormViewMetaData, initialEntityData: initialEntityData, setDeleteDialogVisible: setDeleteDialogVisible, setLayoutDialogVisible: setLayoutDialogVisible, setRedirectToList: setRedirectToList, viewMode: viewMode, setViewMode: setViewMode }), _jsxs("div", { className: "p-4 solid-form-content", children: [DynamicHeaderComponent && _jsx(DynamicHeaderComponent, {}), renderFormDynamically(formViewMetaData)] })] }), params.embeded !== true && isShowChatter === true &&
-                            _jsx(Button, { icon: "pi pi-chevron-right", size: "small", text: true, className: "chatter-collapse-btn", style: { width: 30 }, onClick: function () { return setShowChatter(false); } })] }), params.embeded !== true &&
-                    _jsx("div", { className: "chatter-section ".concat(isShowChatter === false ? 'collapsed' : ''), children: isShowChatter === false ?
-                            _jsxs("div", { className: "flex flex-column gap-2 justify-content-center p-2", children: [_jsx("div", { className: "chatter-collapsed-content", children: "Chatter/Audit Trail" }), _jsx(Button, { icon: "pi pi-chevron-left", size: "small", className: "px-0", style: { width: 30 }, onClick: function () { setShowChatter(true); setRefreshChatterMessage(true); } })] })
-                            : _jsx(SolidChatter, { solidFormViewMetaData: solidFormViewMetaData, id: params.id, refreshChatterMessage: refreshChatterMessage, setRefreshChatterMessage: setRefreshChatterMessage }) }), _jsx(Dialog, { visible: isDeleteDialogVisible, header: "Confirm Delete", modal: true, footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: function () { return handleDeleteEntity_1(); } }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: onDeleteClose_1 })] })); }, onHide: function () { return setDeleteDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to delete?" }) }), _jsx(Dialog, { visible: isLayoutDialogVisible, header: "Change Form Layout", modal: true, onHide: function () { return setLayoutDialogVisible(false); }, contentStyle: {
-                        width: 800
-                    }, children: _jsx(SolidFormUserViewLayout, { solidFormViewMetaData: solidFormViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) }), openLightbox &&
-                    _jsx(Lightbox, { open: openLightbox, plugins: [Counter, Download], close: function () { return setOpenLightbox(false); }, slides: lightboxUrls })] }));
-    }
-};
-export default SolidFormView;
-//# sourceMappingURL=SolidFormView.js.map