@solidstarters/solid-core-ui 1.1.78 → 1.1.79

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

@@ -0,0 +1,909 @@
+"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 = {
+                            parentData: params === null || params === void 0 ? void 0 : params.parentData,
+                            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({ className: attrs === null || attrs === void 0 ? void 0 : attrs.className }, 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