@solidstarters/solid-core-ui 1.1.22 → 1.1.24

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

@@ -37,6 +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";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -89,7 +90,7 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField
     if (type === 'longText') {
         return new SolidLongTextField(fieldContext);
     }
-    if (type === 'int') {
+    if (type === 'int' || type === 'bigint' ) {
         return new SolidIntegerField(fieldContext);
     }
     if (type === 'decimal' || type === 'float') {
@@ -132,7 +133,7 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField
 }
 
 // solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
-const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, changeHandler }: 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,
@@ -144,7 +145,8 @@ const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidForm
         solidFormViewMetaData: solidFormViewMetaData,
         modelName: modelName,
         readOnly: readOnly,
-        changeHandler: changeHandler
+        onChange: onChange,
+        onBlur: onBlur
     }
     const solidField = fieldFactory(fieldMetadata?.type, fieldContext);
 
@@ -225,6 +227,7 @@ const SolidSheet = ({ children }: any) => (
         {children}
     </div>
 );
+
 const SolidNotebook = ({ children }: any) => {
 
     return (
@@ -236,6 +239,26 @@ const SolidNotebook = ({ children }: any) => {
     )
 };
 
+const SolidDynamicWidget = ({ widgetName, formik, field, solidFormViewMetaData }: any) => {
+    const solidView = solidFormViewMetaData.data.solidView;
+    const solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
+
+    let DynamicWidget = getExtensionComponent(widgetName);
+
+    const widgetProps: SolidFormWidgetProps = {
+        formData: formik.values,
+        field: field,
+        fieldsMetadata: solidFieldsMetadata,
+        viewMetadata: solidView
+    }
+
+    return (
+        <div className="solid-tab-view w-full">
+            {DynamicWidget && <DynamicWidget {...widgetProps} />}
+        </div>
+    )
+};
+
 
 const SolidPage = ({ attrs, children, key }: any) => (
     <TabPanel key={key} header={attrs.label} >
@@ -472,9 +495,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     field: layoutFieldsObj[key],
                     data: initialEntityData,
                     solidFormViewMetaData: solidFormViewMetaData,
-                    modelName: params.modelName,
-                    // TODO: do we need to pass the change handler?
-                    changeHandler: null
+                    modelName: params.modelName
                 }
 
                 let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
@@ -598,9 +619,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 field: formLayoutField,
                 data: initialEntityData,
                 solidFormViewMetaData: solidFormViewMetaData,
-                modelName: params.modelName,
-                // TODO: do we need to pass the change handler?
-                changeHandler: null,
+                modelName: params.modelName
             }
             let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
             if (!fieldMetadata?.type) {
@@ -625,14 +644,20 @@ const SolidFormView = (params: SolidFormViewProps) => {
             onSubmit: onFormikSubmit,
         });
 
-        const formChangeHandler = async (event: ChangeEvent<HTMLInputElement>) => {
+        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(`formChangeHandler invoked for change in ${fieldName}, with updated value: ${value}`);
+            // 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?.changeHandler;
-            console.log(`changeHandler for this form is ${changeHandler}`);
+            const changeHandler = solidView.layout[eventType];
+            // console.log(`changeHandler for this form is ${changeHandler}`);
 
             if (changeHandler) {
                 // Get hold of the dynamic module...
@@ -645,69 +670,170 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         fieldsMetadata: solidFieldsMetadata,
                         formData: formik.values,
                         modifiedField: fieldName,
-                        type: 'onFieldUpdate',
+                        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
                     }
+
+                    // Invoke the dynamic change handler: 
+                    // TODO: encapsulate in try/catch, catch the exception render in the UI as an error & stop form rendering.
                     const updatedFormInfo = dynamicChangeHandler(event);
-                    console.log(`I have triggered on change hander: `, updatedFormInfo);
+                    // 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.
+                        // TODO: does the below fire change events again?
+                        Object.entries(updatedFormInfo.newFormData).forEach(([key, newValue]) => {
+                            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?.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, 
+                        // TODO: 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 {
+                    // TODO: Show an error popup and stop form rendering ideallly...
                     console.log(`Unable to load dynamic module:`, changeHandler);
                 }
-
             }
-
-            // Invoke the formik change 
-            formik.handleChange(event);
         }
 
         // 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}
-                        changeHandler={formChangeHandler}
-                    />;
+                    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 });
+                    }
+                case "custom":
+                    if (visible === true) {
+                        const widgetName = attrs?.widget;
+                        const fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
+
+                        if (widgetName) {
+                            // widgetName, formik, field, fieldMetadata, solidFormViewMetaData
+                            return <SolidDynamicWidget
+                                key={key}
+                                widgetName={widgetName}
+                                field={element}
+                                formik={formik}
+                                fieldMetadata={fieldMetadata}
+                                solidFormViewMetaData={solidFormViewMetaData}
+                            />
+                        }
+                    }
+
                 default:
                     return null;
             }
         };
 
         const renderFormDynamically = (solidFormViewMetaData: any) => {
+            // console.log(`renderFormDynamically invoked....`);
             if (!solidFormViewMetaData) {
                 return;
             }
@@ -794,35 +920,16 @@ 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}` },
-        ];
-
-        // see if we have an injected dynamic component.s
+        // 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;
-        // const dynamicHeader = "BookFormViewDynamicComponent";
         let DynamicHeaderComponent = null;
         if (dynamicHeader) {
             DynamicHeaderComponent = getExtensionComponent(dynamicHeader);
@@ -844,7 +951,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     {params.embeded !== true &&
                                         actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
-                                        formik.dirty &&
                                         <div>
                                             <Button
                                                 label="Save"
@@ -943,6 +1049,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' />
 
@@ -955,7 +1074,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             </>
                         )}
                     </div>
-                    <SolidBreadcrumb breadcrumbItems={breadcrumbData} />
+                    <SolidBreadcrumb />
                     {/* {params.embeded !== true &&
                         <div className="solid-form-stepper">
                             <SolidFormStepper />

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

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

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

@@ -111,13 +111,15 @@ export class SolidSelectionStaticField implements ISolidField {
                         disabled={formDisabled || fieldDisabled}
                         {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
                         id={fieldLayoutInfo.attrs.name}
+                        name={fieldLayoutInfo.attrs.name}
                         field="label"
                         value={formik.values[fieldLayoutInfo.attrs.name] || ''}
                         dropdown
                         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

@@ -64,6 +64,7 @@ export class SolidShortTextField implements ISolidField {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        const includeWrapper = fieldLayoutInfo.attrs?.includeWrapper || 'yes';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -79,29 +80,54 @@ export class SolidShortTextField implements ISolidField {
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
         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}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-
-                            {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
-                        </label>
-                    }
-                    <InputText
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        // onChange={formik.handleChange}
-                        onChange={this.fieldContext.changeHandler}
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                )}
-            </div>
+            <>
+                {includeWrapper === 'yes' && <div className={className}>
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
+                            </label>
+                        }
+                        <InputText
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            id={fieldLayoutInfo.attrs.name}
+                            name={fieldMetadata.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            // onChange={formik.handleChange}
+                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                            onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        />
+                    </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>}
+                {includeWrapper === 'no' &&
+                    <>
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+
+                                {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
+                            </label>
+                        }
+                        <InputText
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            id={fieldLayoutInfo.attrs.name}
+                            name={fieldMetadata.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            // onChange={formik.handleChange}
+                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                            onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        />
+                    </>
+                }
+            </>
         );
     }
 }

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/form/widgets/CustomHtml.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { SolidFormWidgetProps } from "@/types";
+import parse from 'html-react-parser';
+import Handlebars from "handlebars";
+
+export const CustomHtml = ({ field, formData, viewMetadata, fieldsMetadata }: SolidFormWidgetProps) => {
+    let { type, attrs, body, children } = field;
+
+    // TODO: null check on this field required, show a proper error message on the UI suggesting that you are using a CustomHtml widget, however the html is not specified in the layout.
+    const html = attrs.html;
+
+    // TODO: run dompurify to avoid XSS attacks...
+
+    // TODO: assume the html is a handlebars template, we try to do variable replacement on it using formData.
+    const template = Handlebars.compile(html);
+
+    return (<div className={attrs.className}>{parse(template(formData))}</div>)
+}

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);
 
 
@@ -396,9 +391,9 @@ const CreateModel = ({ data, params }: any) => {
                         <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);
 
@@ -59,7 +59,11 @@ const FieldMetaData = ({ modelMetaData, fieldMetaData, setFieldMetaData, deleteM
 
   // Function to delete a row
   const deleteRow = (rowData: any) => {
-    setFieldMetaData((prevData: any) => prevData.filter((item: any) => item.name !== rowData.name)); // Remove the row from the data array
+    setFieldMetaData((prevData: any) => {
+      const updatedData = prevData.filter((item: any) => item.name !== rowData.name);
+      setIsDirty(true); // Ensure dirty state is updated immediately
+      return updatedData;
+    });
   };
 
   // Template for the trash (delete) icon column
@@ -156,7 +160,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}