@solidstarters/solid-core-ui 1.1.21 → 1.1.23

package/src/components/core/extension/solid-core/moduleMetadata/list/GenerateModuleCodeRowAction.tsx

@@ -16,13 +16,22 @@ const GenerateModuleCodeRowAction = ({ context }: any) => {
     }
 
     return (
-        <div>
-            <p className="text-center">Click Ok to proceed with module code generation, please note that if the file already exists and <br></br>you have made custom changes to this file we will create a .bkp file as a backup of the existing file.</p>
-            <div className="flex gap-5 justify-content-center">
-                <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} />
-                <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => context.closeListViewRowActionPopup()} />
-            </div>
-        </div >
+        <>
+            {context?.rowData?.name != "solid-core" ? <div>
+                <p className="text-center">Click Ok to proceed with module code generation, please note that if the file already exists and <br></br>you have made custom changes to this file we will create a .bkp file as a backup of the existing file.</p>
+                <div className="flex gap-5 justify-content-center">
+                    <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} />
+                    <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => context.closeListViewRowActionPopup()} />
+                </div>
+            </div> :
+            <div>
+                <p className="">You cannot generate code for Solid Core modules</p>
+                <div className="flex gap-5 justify-content-center">
+                    {/* <Button label="Ok" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={generateCodeHandler} /> */}
+                    <Button label="Close" icon="pi pi-times" className='small-button' onClick={() => context.closeListViewRowActionPopup()} />
+                </div>
+            </div >}
+        </>
     )
 }
 

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

@@ -18,7 +18,6 @@ type SolidViewParams = {
 };
 
 const SolidFormLayouts = ({ params }: any) => {
-
     const {
         data: modelData,
         error,
@@ -27,7 +26,9 @@ const SolidFormLayouts = ({ params }: any) => {
         refetch
     } = useGetmodelByIdQuery(params.id);
     useEffect(() => {
-        refetch();
+        if (params?.id !== 'new') {
+            refetch();
+        }
     }, [refetch]);
 
     const {
@@ -49,7 +50,9 @@ const SolidFormLayouts = ({ params }: any) => {
         refetch: refetchuser
     } = useGetusersByIdQuery(params.id);
     useEffect(() => {
-        refetchuser();
+        if (params?.modelName === 'user') {
+            refetchuser();
+        }
     }, [refetchuser]);
 
     return (

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

@@ -14,7 +14,7 @@ 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 { ChangeEvent, useEffect, useRef, useState } from "react";
 import * as Yup from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./fields/ISolidField";
 import { SolidBooleanField } from "./fields/SolidBooleanField";
@@ -33,9 +33,10 @@ import { SolidSelectionStaticField } from "./fields/SolidSelectionStaticField";
 import { SolidShortTextField } from "./fields/SolidShortTextField";
 import { SolidTimeField } from "./fields/SolidTimeField";
 import { BackButton } from "@/components/common/BackButton";
-import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
+import { SolidUiEvent } from "@/types";
+import { getExtensionComponent, getExtensionFunction } from "@/helpers/registry";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -131,7 +132,7 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField
 }
 
 // solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
-const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly }: any) => {
+const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, onChange, onBlur }: any) => {
     const fieldContext: SolidFieldProps = {
         // field metadata - coming from the field-metadata table.
         fieldMetadata: fieldMetadata,
@@ -142,7 +143,9 @@ const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidForm
         // 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
+        readOnly: readOnly,
+        onChange: onChange,
+        onBlur: onBlur
     }
     const solidField = fieldFactory(fieldMetadata?.type, fieldContext);
 
@@ -470,7 +473,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     field: layoutFieldsObj[key],
                     data: initialEntityData,
                     solidFormViewMetaData: solidFormViewMetaData,
-                    modelName: params.modelName,
+                    modelName: params.modelName
                 }
 
                 let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
@@ -538,6 +541,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
             }
         }
     }
+    // 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.
     const formViewDataQs = qs.stringify({ populate: toPopulate, populateMedia: toPopulateMedia }, {
         encodeValuesOnly: true,
     });
@@ -560,6 +565,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
     let formik: FormikObject;
 
+    // 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: {},
@@ -570,6 +576,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
         return <div>Rendering form...</div>;
     }
+    // At this point everything required to render the form is loaded, so we go ahead and start rendering things dynamically...
     else {
 
         // Initialize formik...
@@ -590,7 +597,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 field: formLayoutField,
                 data: initialEntityData,
                 solidFormViewMetaData: solidFormViewMetaData,
-                modelName: params.modelName,
+                modelName: params.modelName
             }
             let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
             if (!fieldMetadata?.type) {
@@ -615,42 +622,174 @@ const SolidFormView = (params: SolidFormViewProps) => {
             onSubmit: onFormikSubmit,
         });
 
+        const formFieldOnXXX = async (event: ChangeEvent<HTMLInputElement>, eventType: string) => {
+
+            // Invoke the formik change 
+            if (eventType === 'onFieldChange') {
+                formik.handleChange(event);
+            }
+
+            // get details from the form event
+            const { name: fieldName, value, type, checked } = event.target;
+            // console.log(`${eventType}: formFieldOnXXX ${fieldName} invoked for change with value:`, value);
+
+            // TODO: check if there is a change handler registered with this form view, load it and fire it.
+            const changeHandler = solidView.layout[eventType];
+            // console.log(`changeHandler for this form is ${changeHandler}`);
+
+            if (changeHandler) {
+                // Get hold of the dynamic module...
+                // const dynamicChangeHandler = await loadDynamicModule(changeHandler);
+                const dynamicChangeHandler = getExtensionFunction(changeHandler);
+
+                // Invoke the dynamic module...
+                if (dynamicChangeHandler) {
+                    const event: SolidUiEvent = {
+                        fieldsMetadata: solidFieldsMetadata,
+                        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
+                    }
+                    const updatedFormInfo = dynamicChangeHandler(event);
+                    // console.log(`${eventType}: formFieldOnXXX response received: `, updatedFormInfo);
+
+                    // If dataChanged is true, update Formik values
+                    if (updatedFormInfo?.dataChanged && updatedFormInfo.newFormData) {
+                        // This does one field at a time.
+                        Object.entries(updatedFormInfo.newFormData).forEach(([key, newValue]) => {
+                            formik.setFieldValue(key, newValue);
+                        });
+
+                        // This does all at once.
+                        // if (updatedFormInfo?.dataChanged && updatedFormInfo.newData) {
+                        //     formik.setValues({
+                        //         ...formik.values,
+                        //         ...updatedFormInfo.newFormData
+                        //     });
+                        // }
+                    }
+
+                    // if layout has changed then we need to re-render.
+                    if (updatedFormInfo?.layoutChanged && updatedFormInfo.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, which means that this will not work if custom layout has been injected as a prop.
+                        setFormViewLayout(updatedFormInfo.newLayout);
+                        setFormViewMetaData((prevMetaData: any) => {
+                            const updatedFormViewMetadata = {
+                                ...prevMetaData,
+                                data: {
+                                    ...prevMetaData.data,
+                                    solidView: {
+                                        ...prevMetaData.data.solidView,
+                                        layout: updatedFormInfo.newLayout,
+                                    },
+                                },
+                            };
+                            // console.log(`Updated form view metadata is: `, updatedFormViewMetadata);
+                            return updatedFormViewMetadata;
+                        });
+                    }
+                }
+                else {
+                    console.log(`Unable to load dynamic module:`, changeHandler);
+                }
+            }
+        }
+
         // Now render the form dynamically...
         const renderFormElementDynamically: any = (element: any, solidFormViewMetaData: any) => {
-            const { type, attrs, children } = element;
+            let { type, attrs, body, children } = element;
 
             // const key = attrs?.name ?? generateRandomKey();
             const key = attrs?.name;
+            let visible = 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 <div key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</div>;
+                case "div":
+                    if (!children)
+                        children = [];
+                    return <div key={key} {...attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</div>
+                case "span":
+                    return <span key={key} {...attrs}>{body}</span>
+                case "p":
+                    return <p key={key} {...attrs}>{body}</p>
+                case "h1":
+                    return <h1 key={key} {...attrs}>{body}</h1>
+                case "h2":
+                    return <h2 key={key} {...attrs}>{body}</h2>
+                case "ul":
+                    if (!children)
+                        children = [];
+                    return <ul key={key} {...attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</ul>
+                case "li":
+                    return <li key={key} {...attrs}>{body}</li>
                 case "sheet":
                     return <SolidSheet key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidSheet>;
                 case "group":
-                    return <SolidGroup key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidGroup>;
+                    if (visible === true) {
+                        return <SolidGroup key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidGroup>;
+                    }
                 case "row":
-                    return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidRow>;
+                    if (visible === true) {
+                        return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidRow>;
+                    }
                 case "column":
-                    return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidColumn>;
+                    if (visible === true) {
+                        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidColumn>;
+                    }
                 case "field": {
-                    // const fieldMetadata = solidFieldsMetadata[attrs.name];
-                    const fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
-                    // Read only permission if there is no update permission on model and router doesnt contains new
-                    const readOnlyPermission  = !actionsAllowed.includes(`${updatePermission(params.modelName)}`) && params.id !== "new" 
-                    return <SolidField key={key} field={element} formik={formik} fieldMetadata={fieldMetadata} initialEntityData={solidFormViewData ? solidFormViewData.data : null} solidFormViewMetaData={solidFormViewMetaData} modelName={params.modelName} readOnly={readOnlyPermission} />;
+                    if (visible === true) {
+
+                        // const fieldMetadata = solidFieldsMetadata[attrs.name];
+                        const fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
+                        // Read only permission if there is no update permission on model and router doesnt contains new
+                        const readOnlyPermission = !actionsAllowed.includes(`${updatePermission(params.modelName)}`) && params.id !== "new"
+                        return <SolidField
+                            key={key}
+                            field={element}
+                            formik={formik}
+                            fieldMetadata={fieldMetadata}
+                            initialEntityData={solidFormViewData ? solidFormViewData.data : null}
+                            solidFormViewMetaData={solidFormViewMetaData}
+                            modelName={params.modelName}
+                            readOnly={readOnlyPermission}
+                            onChange={formFieldOnXXX}
+                            onBlur={formFieldOnXXX}
+                        />;
+                    }
                 }
                 case "notebook":
-                    return <SolidNotebook key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidNotebook>;
+                    if (visible === true) {
+                        return <SolidNotebook key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidNotebook>;
+                    }
                 case "page":
-                    const pageChildren = children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData));
-                    return SolidPage({ children: pageChildren, attrs: attrs, key: key });
+                    // console.log(`Resolved visibility of form element ${key} to ${visible}`);
+                    if (visible === true) {
+                        const pageChildren = children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData));
+                        return SolidPage({ children: pageChildren, attrs: attrs, key: key });
+                    }
                 default:
                     return null;
             }
         };
 
         const renderFormDynamically = (solidFormViewMetaData: any) => {
+            // console.log(`renderFormDynamically invoked....`);
             if (!solidFormViewMetaData) {
                 return;
             }
@@ -737,31 +876,20 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     onClick={() => setDeleteDialogVisible(true)}
                                 />
                             }
-                            {params.embeded == true &&
-                                actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
-                                !formViewLayout.attrs.readonly &&
-                                <Button
-                                    text
-                                    type="button"
-                                    className="w-8rem text-left gap-2"
-                                    label="Delete"
-                                    size="small"
-                                    iconPos="left"
-                                    severity="danger"
-                                    icon={'pi pi-trash'}
-                                    onClick={() => setDeleteDialogVisible(true)}
-                                />
-                            }
                         </div>
                     </OverlayPanel>
                 </div>
             )
         }
 
-        const breadcrumbData = [
-            { label: 'Book', link: '/admin/core/library-management/book/list' },
-            { label: params.id === "new" ? `Add ${params.modelName}` : `Edit ${params.modelName}` },
-        ];
+        // 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",
+        const dynamicHeader = solidView.layout?.header;
+        let DynamicHeaderComponent = null;
+        if (dynamicHeader) {
+            DynamicHeaderComponent = getExtensionComponent(dynamicHeader);
+        }
 
         return (
             <div className="solid-form-wrapper">
@@ -878,6 +1006,19 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                             />
                                         </div>
                                     } */}
+                                     {params.embeded == true &&
+                                        actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        <div>
+                                            <Button
+                                                size="small"
+                                                type="button"
+                                                label="Delete"
+                                                severity="danger"
+                                                onClick={() => setDeleteDialogVisible(true)}
+                                            />
+                                        </div>
+                                    }
                                     {params.embeded == true &&
                                         <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
 
@@ -890,13 +1031,14 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             </>
                         )}
                     </div>
-                    <SolidBreadcrumb breadcrumbItems={breadcrumbData} />
+                    <SolidBreadcrumb />
                     {/* {params.embeded !== true &&
                         <div className="solid-form-stepper">
                             <SolidFormStepper />
                         </div>
                     } */}
                     <div className="p-4 solid-form-content">
+                        {DynamicHeaderComponent && <DynamicHeaderComponent />}
                         {renderFormDynamically(formViewMetaData)}
                     </div>
                 </form>

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

@@ -8,7 +8,9 @@ export type SolidFieldProps = {
     field: any,
     data: any,
     modelName?: any,
-    readOnly?: any
+    readOnly?: any,
+    onChange?: any,
+    onBlur?: any
 };
 
 export type FormikObject = {

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

@@ -117,7 +117,8 @@ export class SolidSelectionStaticField implements ISolidField {
                         suggestions={selectionStaticItems}
                         completeMethod={selectionStaticSearch}
                         // onChange={(e) => updateInputs(index, e.value)} />
-                        onChange={formik.handleChange}
+                        // onChange={formik.handleChange}
+                        onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
                         className="solid-standard-autocomplete"
                     />
                 </div>

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

@@ -29,7 +29,6 @@ export class SolidShortTextField implements ISolidField {
         return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
-
     validationSchema(): Schema {
         let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
 
@@ -93,8 +92,11 @@ export class SolidShortTextField implements ISolidField {
                         readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                         disabled={formDisabled || fieldDisabled}
                         id={fieldLayoutInfo.attrs.name}
+                        name={fieldMetadata.name}
                         aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
+                        // onChange={formik.handleChange}
+                        onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                        onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
                         value={formik.values[fieldLayoutInfo.attrs.name] || ''}
                     />
                 </div>

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -13,7 +13,6 @@ import * as Yup from 'yup';
 import { Schema } from "yup";
 import SolidFormView from "../../SolidFormView";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
-import { useRouter } from "next/router";
 
 
 
@@ -138,7 +137,6 @@ export class SolidRelationManyToManyField implements ISolidField {
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const router = useRouter();
         
         const readOnlyPermission = this.fieldContext.readOnly;
 

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -137,12 +137,12 @@ export class SolidRelationManyToOneField implements ISolidField {
         }
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
-                            {fieldLabel}
-                        </label>
-                    }
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                        {fieldLabel}
+                    </label>
+                }
+                <div className="flex align-items-center gap-3">
                     <AutoComplete
                         readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                         disabled={formDisabled || fieldDisabled || readOnlyPermission}

package/src/components/core/list/SolidListView.tsx

@@ -702,7 +702,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           loadingIcon="pi pi-spinner"
           selection={[...selectedRecords, ...selectedRecoverRecords]}
           onSelectionChange={onSelectionChange}
-          selectionMode="multiple"
+          selectionMode="checkbox"
           removableSort
           filterIcon={<FilterIcon />}
           tableClassName="solid-data-table"

package/src/components/core/model/CreateModel.tsx

@@ -356,11 +356,6 @@ const CreateModel = ({ data, params }: any) => {
     )
   }
 
-  const breadcrumbData = [
-    { label: 'Model', link: '/admin/core/solid-core/model-metadata/list' },
-    { label: params.id === "new" ? 'Create Model' : 'Edit Model' },
-  ];
-
   const [isDirty, setIsDirty] = useState(false);
 
 
@@ -376,9 +371,9 @@ const CreateModel = ({ data, params }: any) => {
                 <div className="form-wrapper-title">Create Model</div>
               </div>
               <div className="gap-3 flex">
-                {isDirty &&
+                {/* {isDirty && */}
                   <Button label="Save" size="small" onClick={handleSubmit} type="submit" />
-                }
+                {/* } */}
                 <CancelButton />
               </div>
             </>
@@ -392,13 +387,13 @@ const CreateModel = ({ data, params }: any) => {
                 {data?.isSystem !== true &&
                   <>
                     <div>
-                      {isDirty &&
+                      {/* {isDirty && */}
                         <Button label="Save" size="small" type="submit" onClick={handleSubmit} />
-                      }
+                      {/* } */}
                     </div>
-                    <div>
+                    {/* <div>
                       <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => setDeleteEntity(true)} />
-                    </div>
+                    </div> */}
                   </>
                 }
                 <CancelButton />
@@ -407,7 +402,7 @@ const CreateModel = ({ data, params }: any) => {
             </>
           }
         </div>
-        <SolidBreadcrumb breadcrumbItems={breadcrumbData} />
+        <SolidBreadcrumb />
         {/* <div className="solid-form-stepper">
           <SolidFormStepper />
         </div> */}
@@ -450,6 +445,7 @@ const CreateModel = ({ data, params }: any) => {
                 nextTab={nextTab}
                 formikFieldsMetadataRef={formikFieldsMetadataRef}
                 params={params}
+                setIsDirty={setIsDirty}
               ></FieldMetaData>
             </TabPanel>
           </TabView>

package/src/components/core/model/FieldMetaData.tsx

@@ -11,7 +11,7 @@ import { useRef, useState } from "react";
 import FieldMetaDataForm from "./FieldMetaDataForm";
 
 
-const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef, params }: any) => {
+const FieldMetaData = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldMetaData, deleteModelFunction, nextTab, formikFieldsMetadataRef, params }: any) => {
   const pathname = usePathname();
   const msgs = useRef<Messages>(null);
 
@@ -156,7 +156,7 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
             }}
             showHeader={false}
           >
-            <FieldMetaDataForm modelMetaData={modelMetaData} fieldMetaData={selectedFieldMetaData} allFields={fieldMetaData} setFieldMetaData={setFieldMetaData} deleteModelFunction={deleteModelFunction} setVisiblePopup={setVisiblePopup} formikFieldsMetadataRef={formikFieldsMetadataRef} params={params} setIsRequiredPopUp={setIsRequiredPopUp} showToaster={showToaster}></FieldMetaDataForm>
+            <FieldMetaDataForm setIsDirty={setIsDirty} modelMetaData={modelMetaData} fieldMetaData={selectedFieldMetaData} allFields={fieldMetaData} setFieldMetaData={setFieldMetaData} deleteModelFunction={deleteModelFunction} setVisiblePopup={setVisiblePopup} formikFieldsMetadataRef={formikFieldsMetadataRef} params={params} setIsRequiredPopUp={setIsRequiredPopUp} showToaster={showToaster}></FieldMetaDataForm>
           </Dialog>
           <Dialog
             visible={isRequiredPopUp}