@solidstarters/solid-core-ui 1.1.31 → 1.1.32

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.js

@@ -0,0 +1,119 @@
+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 };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { useState } from "react";
+import qs from "qs";
+import { createSolidEntityApi } from "../../../../../../../redux/api/solidEntityApi";
+export var useRelationEntityHandler = function (_a) {
+    var fieldContext = _a.fieldContext, formik = _a.formik, _b = _a.autoCompleteLimit, autoCompleteLimit = _b === void 0 ? 1000 : _b;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    var useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
+    var triggerGetSolidEntities = useLazyGetSolidEntitiesQuery()[0];
+    var _c = useState([]), autoCompleteItems = _c[0], setAutoCompleteItems = _c[1];
+    var fetchRelationEntities = function (query, limit) {
+        if (query === void 0) { query = ""; }
+        if (limit === void 0) { limit = autoCompleteLimit; }
+        return __awaiter(void 0, void 0, void 0, function () {
+            var queryData, autocompleteQs, response, data, mappedItems;
+            var _a;
+            var _b, _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        queryData = {
+                            offset: 0,
+                            limit: limit,
+                            filters: (_a = {},
+                                _a[(_c = (_b = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _b === void 0 ? void 0 : _b.userKeyField) === null || _c === void 0 ? void 0 : _c.name] = {
+                                    '$containsi': query
+                                },
+                                _a)
+                        };
+                        autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });
+                        return [4 /*yield*/, triggerGetSolidEntities(autocompleteQs)];
+                    case 1:
+                        response = _d.sent();
+                        data = response.data;
+                        if (data) {
+                            mappedItems = data.records.map(function (item) {
+                                var _a, _b;
+                                return ({
+                                    label: item[(_b = (_a = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _a === void 0 ? void 0 : _a.userKeyField) === null || _b === void 0 ? void 0 : _b.name],
+                                    value: item['id'],
+                                    original: item
+                                });
+                            });
+                            setAutoCompleteItems(mappedItems);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var addNewRelation = function (values) {
+        var _a, _b;
+        var currentData = formik.values[fieldLayoutInfo.attrs.name] || [];
+        var jsonValues = Object.fromEntries(values.entries());
+        var newItem = {
+            label: jsonValues[(_b = (_a = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _a === void 0 ? void 0 : _a.userKeyField) === null || _b === void 0 ? void 0 : _b.name],
+            value: "new",
+            original: jsonValues,
+        };
+        formik.setFieldValue(fieldLayoutInfo.attrs.name, __spreadArray(__spreadArray([], currentData, true), [newItem], false));
+        // Optionally add to autocomplete list
+        setAutoCompleteItems(function (prev) {
+            var exists = prev.some(function (item) { return item.label === newItem.label; });
+            return exists ? prev : __spreadArray(__spreadArray([], prev, true), [newItem], false);
+        });
+    };
+    return {
+        autoCompleteItems: autoCompleteItems,
+        fetchRelationEntities: fetchRelationEntities,
+        addNewRelation: addNewRelation
+    };
+};
+//# sourceMappingURL=useRelationEntityHandler.js.map

package/dist/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRelationEntityHandler.js","sourceRoot":"","sources":["../../../../../../../../src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts"],"names":[],"mappings":"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"}

package/dist/helpers/registry.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare const registerExtensionComponent: (name: string, component: React.ComponentType<any>) => void;
+export declare const registerExtensionComponent: (name: string, component: React.ComponentType<any>, aliases?: string[]) => void;
 export declare const registerExtensionFunction: (name: string, fn: (...args: any[]) => any) => void;
 export declare const getExtensionComponent: (name: string) => React.ComponentType<any> | null;
 export declare const getExtensionFunction: (name: string) => (...args: any[]) => any;

package/dist/helpers/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/helpers/registry.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,eAAO,MAAM,0BAA0B,SAAU,MAAM,aAAa,MAAM,aAAa,CAAC,GAAG,CAAC,SAG3F,CAAC;AAEF,eAAO,MAAM,yBAAyB,SAAU,MAAM,gBAAgB,GAAG,EAAE,KAAK,GAAG,SAGlF,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAAU,MAAM,KAAG,MAAM,aAAa,CAAC,GAAG,CAAC,GAAG,IAwB/E,CAAC;AAEF,eAAO,MAAM,oBAAoB,SAAU,MAAM,eA5CT,GAAG,EAAE,KAAK,GA+CjD,CAAC"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/helpers/registry.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,eAAO,MAAM,0BAA0B,SAAU,MAAM,aAAa,MAAM,aAAa,CAAC,GAAG,CAAC,YAAW,MAAM,EAAE,SAO9G,CAAC;AAEF,eAAO,MAAM,yBAAyB,SAAU,MAAM,gBAAgB,GAAG,EAAE,KAAK,GAAG,SAGlF,CAAC;AAEF,eAAO,MAAM,qBAAqB,SAAU,MAAM,KAAG,MAAM,aAAa,CAAC,GAAG,CAAC,GAAG,IAwB/E,CAAC;AAEF,eAAO,MAAM,oBAAoB,SAAU,MAAM,eAhDT,GAAG,EAAE,KAAK,GAmDjD,CAAC"}

package/dist/helpers/registry.js

@@ -1,11 +1,21 @@
+import hanldeEmailFormTypeChange from "../components/core/extension/solid-core/emailTemplate/emailFormTypeChangeHandler";
+import hanldeEmailFormTypeLoad from "../components/core/extension/solid-core/emailTemplate/emailFormTypeLoad";
+import { RolePermissionsManyToManyFieldWidget } from "../components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget";
+import { SolidRelationManyToManyAutocompleteWidget } from "../components/core/form/fields/relations/widgets/SolidRelationManyToManyAutocompleteWidget";
+import { SolidRelationManyToManyCheckboxWidget } from "../components/core/form/fields/relations/widgets/SolidRelationManyToManyCheckboxWidget";
 import { CustomHtml } from "../components/core/form/widgets/CustomHtml";
 var extensionRegistry = {
     components: {},
     functions: {},
 };
-export var registerExtensionComponent = function (name, component) {
+export var registerExtensionComponent = function (name, component, aliases) {
+    if (aliases === void 0) { aliases = []; }
     // console.log(`registerExtensionComponent invoked... ${name}`);
     extensionRegistry.components[name] = component;
+    for (var i = 0; i < aliases.length; i++) {
+        var alias = aliases[i];
+        extensionRegistry.components[alias] = component;
+    }
 };
 export var registerExtensionFunction = function (name, fn) {
     // console.log(`registerExtensionFunction invoked... ${name}`);
@@ -37,7 +47,14 @@ export var getExtensionFunction = function (name) {
 };
 // Register all the dynamic widget & functions from inside solid-core-ui
 // Common
-registerExtensionComponent("CustomHtml", CustomHtml);
+registerExtensionComponent("CustomHtml", CustomHtml, []);
+registerExtensionComponent("SolidRelationManyToManyCheckboxWidget", SolidRelationManyToManyCheckboxWidget, ["checkbox"]);
+registerExtensionComponent("SolidRelationManyToManyAutocompleteWidget", SolidRelationManyToManyAutocompleteWidget, ["autocomplete"]);
 // ModuleMetadata
 // ModelMetadata
+// Email Template
+registerExtensionFunction("emailFormTypeChangeHandler", hanldeEmailFormTypeChange);
+registerExtensionFunction("emailFormTypeLoad", hanldeEmailFormTypeLoad);
+// RoleMetadata
+registerExtensionComponent("RolePermissionsManyToManyFieldWidget", RolePermissionsManyToManyFieldWidget, ["inputSwitch"]);
 //# sourceMappingURL=registry.js.map

package/dist/helpers/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/helpers/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAQvE,IAAM,iBAAiB,GAAsB;IACzC,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,IAAY,EAAE,SAAmC;IACxF,gEAAgE;IAChE,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;AACnD,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,yBAAyB,GAAG,UAAC,IAAY,EAAE,EAA2B;IAC/E,+DAA+D;IAC/D,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAY;IAC9C,IAAI,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;QACpC,OAAO,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;KAC7C;IAED,OAAO,IAAI,CAAC;IAEZ,8EAA8E;IAE9E,4CAA4C;IAC5C,yBAAyB;IACzB,0EAA0E;IAC1E,+IAA+I;IAC/I,IAAI;IAEJ,QAAQ;IACR,+FAA+F;IAC/F,4FAA4F;IAC5F,oBAAoB;IACpB,wEAAwE;IACxE,IAAI;IAEJ,+BAA+B;IAC/B,qIAAqI;AACzI,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,IAAY;IAC7C,sDAAsD;IACtD,OAAO,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC,CAAC;AAGF,wEAAwE;AACxE,SAAS;AACT,0BAA0B,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAGrD,iBAAiB;AAGjB,gBAAgB"}
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/helpers/registry.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,MAAM,iFAAiF,CAAC;AACxH,OAAO,uBAAuB,MAAM,wEAAwE,CAAC;AAC7G,OAAO,EAAE,oCAAoC,EAAE,MAAM,0FAA0F,CAAC;AAChJ,OAAO,EAAE,yCAAyC,EAAE,MAAM,2FAA2F,CAAC;AACtJ,OAAO,EAAE,qCAAqC,EAAE,MAAM,uFAAuF,CAAC;AAC9I,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAC;AAQvE,IAAM,iBAAiB,GAAsB;IACzC,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,EAAE;CAChB,CAAC;AAEF,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,IAAY,EAAE,SAAmC,EAAE,OAAsB;IAAtB,wBAAA,EAAA,YAAsB;IAChH,gEAAgE;IAChE,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,IAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACzB,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;KACnD;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,yBAAyB,GAAG,UAAC,IAAY,EAAE,EAA2B;IAC/E,+DAA+D;IAC/D,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,IAAY;IAC9C,IAAI,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;QACpC,OAAO,iBAAiB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;KAC7C;IAED,OAAO,IAAI,CAAC;IAEZ,8EAA8E;IAE9E,4CAA4C;IAC5C,yBAAyB;IACzB,0EAA0E;IAC1E,+IAA+I;IAC/I,IAAI;IAEJ,QAAQ;IACR,+FAA+F;IAC/F,4FAA4F;IAC5F,oBAAoB;IACpB,wEAAwE;IACxE,IAAI;IAEJ,+BAA+B;IAC/B,qIAAqI;AACzI,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,IAAY;IAC7C,sDAAsD;IACtD,OAAO,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC,CAAC;AAGF,wEAAwE;AACxE,SAAS;AACT,0BAA0B,CAAC,YAAY,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC;AACzD,0BAA0B,CAAC,uCAAuC,EAAE,qCAAqC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AACzH,0BAA0B,CAAC,2CAA2C,EAAE,yCAAyC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;AAGrI,iBAAiB;AAGjB,gBAAgB;AAGhB,iBAAiB;AACjB,yBAAyB,CAAC,4BAA4B,EAAE,yBAAyB,CAAC,CAAC;AACnF,yBAAyB,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,CAAC;AAExE,eAAe;AACf,0BAA0B,CAAC,sCAAsC,EAAE,oCAAoC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.31",
+  "version": "1.1.32",
   "scripts": {
     "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",

package/src/components/core/extension/solid-core/emailTemplate/emailFormTypeChangeHandler.ts

@@ -0,0 +1,18 @@
+import { SolidViewLayoutManager } from "@/components/core/common/SolidViewLayoutManager";
+
+const hanldeEmailFormTypeChange = (event: any) => {
+
+    const { modifiedField, modifiedFieldValue, viewMetadata, } = event;
+    const layout = viewMetadata.layout;
+    if (modifiedField === 'type') {
+        const layoutManager = new SolidViewLayoutManager(layout);
+        const renderMode = modifiedFieldValue.value === 'text' ? 'longText' : 'richText';
+        layoutManager.updateNodeAttributes('body', { "renderMode": renderMode});
+        return {
+            layoutChanged: true,
+            dataChanged: false,
+            newLayout: layoutManager.getLayout(), 
+        }
+    }
+}
+export default hanldeEmailFormTypeChange;

package/src/components/core/extension/solid-core/emailTemplate/emailFormTypeLoad.ts

@@ -0,0 +1,18 @@
+import { SolidViewLayoutManager } from "@/components/core/common/SolidViewLayoutManager";
+
+const hanldeEmailFormTypeLoad = (event: any) => {
+
+    const { formData, type, viewMetadata } = event;
+    const layout = viewMetadata.layout;
+    if (formData?.type && type === 'onFormLayoutLoad') {
+        const layoutManager = new SolidViewLayoutManager(layout);
+        const renderMode = formData.type === 'text' ? 'longText' : 'richText';
+        layoutManager.updateNodeAttributes('body', { "renderMode": renderMode});
+        return {
+            layoutChanged: true,
+            dataChanged: false,
+            newLayout: layoutManager.getLayout(), 
+        }
+    }
+}
+export default hanldeEmailFormTypeLoad;

package/src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx

@@ -0,0 +1,123 @@
+"use client";
+import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
+import { capitalize } from "lodash";
+import { Panel } from "primereact/panel";
+import { useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import { InputSwitch } from "primereact/inputswitch";
+import { useRelationEntityHandler } from "@/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
+import { InlineRelationEntityDialog } from "@/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
+import { Checkbox } from "primereact/checkbox";
+
+const groupByController = (items: any[]) => {
+    const grouped: { [key: string]: any[] } = {};
+    items.forEach((item) => {
+        const controllerName = item.label.split(".")[0];
+        if (!grouped[controllerName]) {
+            grouped[controllerName] = [];
+        }
+        grouped[controllerName].push(item);
+    });
+    return grouped;
+};
+
+export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => {
+    const fieldLayoutInfo = fieldContext.field;
+
+    const readOnlyPermission = fieldContext.readOnly;
+    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
+    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
+    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});
+
+    useEffect(() => {
+        fetchRelationEntities();
+    }, []);
+
+    const handleCheckboxChange = (e: any) => {
+        if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));
+        } else {
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);
+        }
+    };
+
+    const getHeaderTemplate = (controllerName: string) => (options: any) => {
+        const className = `${options.className} justify-content-space-between`;
+    
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-3">
+                    <label className="form-field-label text-lg font-bold">
+                        {controllerName}
+                    </label>
+                    {fieldContext.field.attrs.inlineCreate && (
+                        <>
+                            <Button
+                                icon="pi pi-plus"
+                                rounded
+                                outlined
+                                aria-label="Add"
+                                type="button"
+                                size="small"
+                                onClick={() =>
+                                    setVisibleDialogs((prev) => ({
+                                        ...prev,
+                                        [controllerName]: true,
+                                    }))
+                                }
+                                className="custom-add-button"
+                            />
+                            <InlineRelationEntityDialog
+                                visible={visibleCreateDialog}
+                                setVisible={setVisibleCreateDialog}
+                                fieldContext={fieldContext}
+                                onCreate={addNewRelation}
+                            />
+                        </>
+                    )}
+                </div>
+                <div>{options.togglerElement}</div>
+            </div>
+        );
+    };
+    
+    const groupedEntities = groupByController(autoCompleteItems || []);
+    return (
+            <div>
+                {Object.keys(groupedEntities).map((controllerName) => (
+                    <Panel toggleable headerTemplate={getHeaderTemplate(controllerName)} key={controllerName} className="mt-4">
+                        <div className="formgrid grid">
+                            {groupedEntities[controllerName].map((entity: any, i: number) => {
+                                const isChecked = formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === entity.value);
+                                return (
+                                    <div key={entity.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
+                                        <Checkbox
+                                            readOnly={readOnlyPermission}
+                                            inputId={entity.label}
+                                            checked={isChecked}
+                                            onChange={() => handleCheckboxChange(entity)}
+                                        />
+                                        <label htmlFor={entity.label} className="form-field-label m-0"> {entity.label}</label>
+                                    </div>
+                                )
+                            })}
+                        </div>
+                    </Panel>
+                ))}
+                {Object.keys(groupedEntities).map((controllerName) => (
+                    <InlineRelationEntityDialog
+                        key={`dialog-${controllerName}`}
+                        visible={visibleDialogs[controllerName] || false}
+                        setVisible={(visible: any) =>
+                            setVisibleDialogs((prev) => ({
+                                ...prev,
+                                [controllerName]: visible,
+                            }))
+                        }
+                        fieldContext={fieldContext}
+                        onCreate={addNewRelation}
+                    />
+                ))}
+            </div>
+        )
+};

package/src/components/core/form/SolidFormView.tsx

@@ -37,7 +37,7 @@ import { OverlayPanel } from "primereact/overlaypanel";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
 import { SolidUiEvent } from "@/types";
 import { getExtensionComponent, getExtensionFunction } from "@/helpers/registry";
-import { SolidFormWidgetProps } from "@/types/solid-core";
+import { SolidFormWidgetProps, SolidLoadForm } from "@/types/solid-core";
 import { SolidPasswordField } from "./fields/SolidPasswordField";
 import { SolidEmailField } from "./fields/SolidEmailField";
 import { Panel } from "primereact/panel";
@@ -417,17 +417,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
         isLoading: solidFormViewMetaDataIsLoading
     } = useGetSolidViewLayoutQuery(formViewMetaDataQs);
 
-    useEffect(() => {
-        if (solidFormViewMetaData) {
-            setFormViewMetaData(solidFormViewMetaData);
-            if (params.customLayout) {
-                setFormViewLayout(params.customLayout);
-            } else {
-                setFormViewLayout(solidFormViewMetaData.data.solidView.layout);
-            }
-        }
-    }, [solidFormViewMetaData]);
-
     useEffect(() => {
         if (
             isEntityCreateSuccess == true ||
@@ -579,11 +568,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
         // errorFields.length = 0;
     };
-    useEffect(() => {
-        if (errorFields?.length > 0) {
-            showFieldError();
-        }
-    }, [errorFields])
+    // useEffect(() => {
+    //     if (errorFields?.length > 0) {
+    //         showFieldError();
+    //     }
+    // }, [errorFields])
 
     // - - - - - - - - - - - -- - - - - - - - - - - - DATA here
     // Fetch the actual data here. 
@@ -625,10 +614,65 @@ const SolidFormView = (params: SolidFormViewProps) => {
         }
     }, [formViewDataQs])
 
+    useEffect(() => {
+        if (solidFormViewMetaData) {
+            let formLayout = solidFormViewMetaData; 
+            const dynamicHeader = solidFormViewMetaData?.data?.solidView?.layout?.onFormLayoutLoad;
+            let DynamicFunctionComponent = null;
+            const event: SolidLoadForm = {
+                fieldsMetadata: solidFormViewMetaData,
+                formData: solidFormViewData?.data,
+                type: dynamicHeader,
+                viewMetadata: solidFormViewMetaData?.data?.solidView
+            }
+            if (dynamicHeader) {
+                DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
+                if (DynamicFunctionComponent) {
+                    const updatedFormLayout = DynamicFunctionComponent(event);
+                    if (updatedFormLayout && updatedFormLayout?.layoutChanged && updatedFormLayout?.newLayout) {
+                        const newFormLayout = {
+                            ...formLayout,
+                            data : {
+                                ...formLayout.data,
+                                solidView: {
+                                    ...formLayout.data.solidView,
+                                    layout: updatedFormLayout.newLayout
+                                }
+                            }
+                        };
+                        formLayout = newFormLayout;
+                    }
+                }
+            }
+            setFormViewMetaData(formLayout);
+            if (params.customLayout) {
+                setFormViewLayout(params.customLayout);
+            } else {
+                setFormViewLayout(formLayout.data.solidView.layout);
+            }
+        }
+    }, [solidFormViewMetaData, solidFormViewData]);
 
     useEffect(() => {
         if (solidFormViewData) {
-            setInitialEntityData(solidFormViewData.data);
+            const dynamicHeader = solidFormViewMetaData?.data?.solidView?.layout?.onFormDataLoad;
+            let DynamicFunctionComponent = null;
+            let formViewData = solidFormViewData?.data;
+            const event: SolidLoadForm = {
+                fieldsMetadata: solidFormViewMetaData,
+                formData: solidFormViewData?.data,
+                type: dynamicHeader,
+                viewMetadata: solidFormViewMetaData?.data?.solidView
+            }
+            if (dynamicHeader) {
+                DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
+                if (DynamicFunctionComponent) {
+                    const updatedFormData = DynamicFunctionComponent(event);
+                    if (updatedFormData && updatedFormData?.dataChanged && updatedFormData.newFormData)
+                    formViewData = updatedFormData.newFormData;
+                }
+            }
+            setInitialEntityData(formViewData);
         }
     }, [solidFormViewData]);
 

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -4,6 +4,8 @@ import { Message } from "primereact/message";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { Editor } from "primereact/editor";
+import { useState } from "react";
 
 export class SolidLongTextField implements ISolidField {
 
@@ -59,6 +61,64 @@ export class SolidLongTextField implements ISolidField {
     }
 
     render(formik: FormikObject) {
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        return (
+            <>
+            {(!fieldLayoutInfo.attrs.renderMode ||fieldLayoutInfo.attrs.renderMode === 'longText') && 
+                <div className={className}>
+                    {this.renderLongText(formik)}
+                </div>
+            }
+            {fieldLayoutInfo.attrs.renderMode === 'richText' && 
+                <div className={className}>
+                    {this.renderRichText(formik)}
+                </div>
+            }
+            </>
+        );
+    }
+
+    renderLongText(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
+    
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+        return (
+            <div className="flex flex-column gap-2 mt-4">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                        {/* &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>} */}
+                    </label>
+                }
+                <InputTextarea
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    disabled={formDisabled || fieldDisabled}
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={formik.handleChange}
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    rows={5}
+                    cols={30}
+                />
+            </div>
+        )
+    }
+
+    renderRichText(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
@@ -68,6 +128,8 @@ export class SolidLongTextField implements ISolidField {
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
         const readOnlyPermission = this.fieldContext.readOnly;
 
+        const [text, setText] = useState();
+
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
@@ -78,31 +140,28 @@ export class SolidLongTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="relative">
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <InputTextarea
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            id={fieldLayoutInfo.attrs.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            onChange={formik.handleChange}
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                            rows={5}
-                            cols={30}
-                        />
-                    </div>
+                <div className="flex flex-column gap-2 mt-4">
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                        </label>
+                    }
+                    <Editor
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                        disabled={formDisabled || fieldDisabled}
+                        key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
+                        id={fieldLayoutInfo.attrs.name}
+                        value={formik.values[fieldLayoutInfo.attrs.name]}
+                        onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
+                        style={{ height: "320px" }}
+                    />
+                </div>
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <div className="absolute mt-1">
                             <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                         </div>
                     )}
-                </div>
             </div>
         );
     }