@solidstarters/solid-core-ui 1.1.22 → 1.1.23

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

@@ -132,7 +132,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 +144,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);
 
@@ -472,9 +473,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 +597,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 +622,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 +648,148 @@ 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
                     }
                     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.
+                        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);
                 }
-
             }
-
-            // 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 });
+                    }
                 default:
                     return null;
             }
         };
 
         const renderFormDynamically = (solidFormViewMetaData: any) => {
+            // console.log(`renderFormDynamically invoked....`);
             if (!solidFormViewMetaData) {
                 return;
             }
@@ -794,35 +876,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);
@@ -943,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' />
 
@@ -955,7 +1031,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

@@ -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

@@ -92,9 +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={this.fieldContext.changeHandler}
+                        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/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}