@solidstarters/solid-core-ui 1.1.5 → 1.1.7

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

@@ -32,6 +32,8 @@ import { SolidSelectionDynamicField } from "./fields/SolidSelectionDynamicField"
 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";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -149,14 +151,17 @@ const SolidGroup = ({ children, attrs }: any) => {
     const className = attrs.className;
 
     return (
-        <div className={className}>
-            <div className="s_group">
-                <fieldset>
-                    {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-                    <div className="grid">{children}</div>
-                </fieldset>
-            </div>
-
+        // <div className={className}>
+        //     <div className="s_group">
+        //         <fieldset>
+        //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+        //             <div className="grid">{children}</div>
+        //         </fieldset>
+        //     </div>
+
+        // </div>
+        <div className="formgrid grid">
+            {children}
         </div>
     );
 };
@@ -166,54 +171,57 @@ const SolidRow = ({ children, attrs }: any) => {
     const className = attrs.className;
 
     return (
-        <div className={`row ${className}`}>
+        // <div className={`row ${className}`}>
 
-            <div className="s_group">
-                <fieldset>
-                    {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-                    <div className="grid">{children}</div>
-                </fieldset>
-            </div>
+        //     <div className="s_group">
+        //         <fieldset>
+        //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+        //             <div className="grid">{children}</div>
+        //         </fieldset>
+        //     </div>
 
-        </div>
+        // </div>
+        <div>{children}</div>
     );
 };
 const SolidColumn = ({ children, attrs }: any) => {
     const className = attrs.className;
 
     return (
-        <div className={`${className}`}>
-            <div className="s_group">
-                <fieldset>
-                    {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-                    <div className="grid">{children}</div>
-                </fieldset>
-            </div>
-
+        // <div className={`${className}`}>
+        //     <div className="s_group">
+        //         <fieldset>
+        //             {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+        //             <div className="grid">{children}</div>
+        //         </fieldset>
+        //     </div>
+
+        // </div>
+        <div className="formgrid grid">
+            {children}
         </div>
     );
 };
 
 const SolidSheet = ({ children }: any) => (
 
-    <div className="p-fluid p-grid">
+    <div>
         {children}
     </div>
 );
 const SolidNotebook = ({ children }: any) => {
 
-    return (<div className="solid-tab-view">
+    return (
         <TabView>
             {children}
         </TabView>
-    </div>
     )
 };
 
 
 const SolidPage = ({ attrs, children, key }: any) => (
-    <TabPanel key={key} header={attrs.label} className="solid-tab-panel">
-        <div className="p-fluid">{children}</div>
+    <TabPanel key={key} header={attrs.label} >
+        <div>{children}</div>
     </TabPanel>
 );
 
@@ -500,17 +508,16 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const {
         data: solidFormViewData,
         isLoading: solidFormViewDataIsLoading,
-    } = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs },
-        { skip: !solidFormViewMetaData || params.id === 'new', refetchOnMountOrArgChange: true, });
+    } = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs }, { skip: !solidFormViewMetaData || params.id === 'new' });
     useEffect(() => {
         if (solidFormViewData) {
             console.log(`DATA: `, solidFormViewData);
             setInitialEntityData(solidFormViewData.data);
         }
-    }, [solidFormViewData, params]);
+    }, [solidFormViewData]);
 
     let formik: FormikObject;
-    
+
     if (solidFormViewMetaDataIsLoading || solidFormViewDataIsLoading || !formViewLayout) {
         formik = useFormik({
             initialValues: {},
@@ -641,164 +648,172 @@ const SolidFormView = (params: SolidFormViewProps) => {
         console.log("params.embeded", params.embeded);
 
         return (
-            <>
+            <div className="solid-form-wrapper">
                 <Toast ref={toast} />
 
                 <form onSubmit={formik.handleSubmit}>
+                    <div className="solid-form-header">
+                        {params.id === "new" ? (
+                            <>
+                                <div className="flex align-items-center gap-3">
+                                    <BackButton />
+                                    <div className="form-wrapper-title"> {createHeaderTitle}</div>
+                                </div>
+                                <div className="gap-3 flex">
+                                    {params.embeded !== true &&
+                                        actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        !formViewLayout.attrs.readonly &&
+                                        <div>
+                                            <Button
+                                                label="Save"
+                                                size="small"
+                                                onClick={() => showError()}
+                                                type="submit"
+                                            />
+                                        </div>
+                                    }
+                                    {params.embeded !== true &&
+                                        actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        !formViewLayout.attrs.readonly &&
+                                        <div>
+                                            <Button
+                                                label="Save & Close"
+                                                size="small"
+                                                onClick={() => {
+                                                    setRedirectToList(true);
+                                                    showError()
+                                                }}
+                                                type="submit"
+                                            />
+                                        </div>
+                                    }
+                                    {params.embeded == true &&
+                                        actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        !formViewLayout.attrs.readonly &&
+                                        <div>
+                                            <Button
+                                                label="Save"
+                                                size="small"
+                                                onClick={() => {
+                                                    setRedirectToList(false);
+                                                    showError()
+                                                }}
+                                                type="submit"
+                                            />
+                                        </div>
+                                    }
+                                    {params.embeded == true &&
+                                        <Button outlined size="small" type="button" label="Cancel" severity="danger" onClick={() => params.handlePopupClose()} />
+
+                                    }
+                                    {params.embeded !== true &&
+                                        <SolidCancelButton />
+                                    }
 
-                    {params.id === "new" ? (
-                        <div className="flex gap-3 justify-content-between mb-3 align-items-baseline">
-                            <div className="form-wrapper-title"> {createHeaderTitle}</div>
-                            <div className="gap-1 flex">
-                                {params.embeded !== true &&
-                                    actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
-                                    !formViewLayout.attrs.readonly &&
-                                    !formViewLayout.attrs.readonly &&
-                                    <div>
-                                        <Button
-                                            label="Save"
-                                            size="small"
-                                            onClick={() => showError()}
-                                            type="submit"
-                                            className="small-button"
-                                        />
-                                    </div>
-                                }
-                                {params.embeded !== true &&
-                                    actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
-                                    !formViewLayout.attrs.readonly &&
-                                    !formViewLayout.attrs.readonly &&
-                                    <div>
-                                        <Button
-                                            label="Save & Close"
-                                            size="small"
-                                            onClick={() => {
-                                                setRedirectToList(true);
-                                                showError()
-                                            }}
-                                            type="submit"
-                                            className="small-button"
-                                        />
-                                    </div>
-                                }
-                                {params.embeded == true &&
-                                    actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
-                                    !formViewLayout.attrs.readonly &&
-                                    !formViewLayout.attrs.readonly &&
-                                    <div>
-                                        <Button
-                                            label="Save"
-                                            size="small"
-                                            onClick={() => {
-                                                setRedirectToList(false);
-                                                showError()
-                                            }}
-                                            type="submit"
-                                            className="small-button"
-                                        />
-                                    </div>
-                                }
-                                {params.embeded == true &&
-                                    <Button outlined size="small" type="button" label="Cancel" severity="danger" onClick={() => params.handlePopupClose()} className='small-button' />
-
-                                }
-                                {params.embeded !== true &&
-                                    <SolidCancelButton />
-                                }
-
-                            </div>
-                        </div>
-                    ) : (
-                        <div className="flex gap-3 justify-content-between mb-3">
-                            <div className="form-wrapper-title"> {editHeaderTitle}</div>
-                            <div className="gap-3 flex">
-                                {params.embeded !== true &&
-                                    actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
-                                    !formViewLayout.attrs.readonly &&
-                                    !formViewLayout.attrs.readonly &&
-                                    <div>
-                                        <Button
-                                            label="Save"
-                                            size="small"
-                                            onClick={() => showError()}
-                                            type="submit"
-                                            className="small-button"
-                                        />
-                                    </div>
-                                }
-                                {params.embeded == true &&
-                                    actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
-                                    !formViewLayout.attrs.readonly &&
-                                    !formViewLayout.attrs.readonly &&
-                                    <div>
-                                        <Button
-                                            label="Save"
-                                            size="small"
-                                            onClick={() => showError()}
-                                            type="submit"
-                                            className="small-button"
-                                        />
-                                    </div>
-                                }
-                                {params.embeded !== true &&
-                                    actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
-                                    !formViewLayout.attrs.readonly &&
-                                    !formViewLayout.attrs.readonly &&
-                                    <div>
-                                        <Button
-                                            label="Save & Close"
-                                            size="small"
-                                            onClick={() => {
-                                                setRedirectToList(true);
-                                                showError()
-                                            }}
-                                            type="submit"
-                                            className="small-button"
-                                        />
-                                    </div>
-                                }
-                                {params.embeded !== true &&
-                                    actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
-                                    !formViewLayout.attrs.readonly &&
-                                    !formViewLayout.attrs.readonly &&
-                                    <div>
-                                        <Button
-                                            size="small"
-                                            type="button"
-                                            label="Delete"
-                                            severity="danger"
-                                            onClick={() => setDeleteDialogVisible(true)}
-                                            className="small-button"
-                                        />
-                                    </div>
-                                }
-                                {params.embeded == true &&
-                                    actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
-                                    !formViewLayout.attrs.readonly &&
-                                    !formViewLayout.attrs.readonly &&
-                                    <div>
-                                        <Button
-                                            size="small"
-                                            type="button"
-                                            label="Delete"
-                                            severity="danger"
-                                            onClick={() => setDeleteDialogVisible(true)}
-                                            className="small-button"
-                                        />
-                                    </div>
-                                }
-                                {params.embeded == true &&
-                                    <Button outlined size="small" type="button" label="Cancel" severity="danger" onClick={() => params.handlePopupClose()} className='small-button' />
-
-                                }
-                                {params.embeded !== true &&
-                                    <SolidCancelButton />
-                                }
+                                </div>
+                            </>
+                        ) : (
+                            <>
+                                <div className="flex align-items-center gap-3">
+                                    <BackButton />
+                                    <div className="form-wrapper-title"> {editHeaderTitle}</div>
+                                </div>
+                                <div className="gap-3 flex">
+                                    {params.embeded !== true &&
+                                        actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        !formViewLayout.attrs.readonly &&
+                                        <div>
+                                            <Button
+                                                label="Save"
+                                                size="small"
+                                                onClick={() => showError()}
+                                                type="submit"
+                                            />
+                                        </div>
+                                    }
+                                    {params.embeded == true &&
+                                        actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        !formViewLayout.attrs.readonly &&
+                                        <div>
+                                            <Button
+                                                label="Save"
+                                                size="small"
+                                                onClick={() => showError()}
+                                                type="submit"
+                                            />
+                                        </div>
+                                    }
+                                    {params.embeded !== true &&
+                                        actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        !formViewLayout.attrs.readonly &&
+                                        <div>
+                                            <Button
+                                                label="Save & Close"
+                                                size="small"
+                                                onClick={() => {
+                                                    setRedirectToList(true);
+                                                    showError()
+                                                }}
+                                                type="submit"
+                                            />
+                                        </div>
+                                    }
+                                    {params.embeded !== true &&
+                                        actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        !formViewLayout.attrs.readonly &&
+                                        <div>
+                                            <Button
+                                                size="small"
+                                                type="button"
+                                                label="Delete"
+                                                severity="danger"
+                                                onClick={() => setDeleteDialogVisible(true)}
+                                            />
+                                        </div>
+                                    }
+                                    {params.embeded == true &&
+                                        actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
+                                        !formViewLayout.attrs.readonly &&
+                                        !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="Cancel" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
+
+                                    }
+                                    {params.embeded !== true &&
+                                        <SolidCancelButton />
+                                    }
+                                </div>
+                            </>
+                        )}
+                    </div>
+                    <div className="solid-form-stepper">
+                        <SolidFormStepper />
+                    </div>
+                    <div className="p-4 solid-form-content">
+                        <div className="grid">
+                            <div className="col-8 mx-auto">
+                                {renderFormDynamically(formViewMetaData)}
                             </div>
                         </div>
-                    )}
-                    {renderFormDynamically(formViewMetaData)}
-                </form>
+                    </div>
+                </form >
                 <Dialog
                     visible={isDeleteDialogVisible}
                     header="Confirm Delete"
@@ -813,7 +828,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 >
                     <p>Are you sure you want to delete?</p>
                 </Dialog>
-            </>
+            </div >
         );
 
     }

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

@@ -59,7 +59,7 @@ export class SolidBooleanField implements ISolidField {
 
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const booleanOptions = ["false", "true"];
@@ -77,12 +77,9 @@ export class SolidBooleanField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
-                </div>
-                <div className="s-input">
                     {/* <InputText
                         id={fieldLayoutInfo.attrs.name}
                         className="small-input"
@@ -98,7 +95,7 @@ export class SolidBooleanField implements ISolidField {
                         onChange={(e) => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)} // Custom handling for boolean input
                         value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name].toString() : "false"}
                         options={booleanOptions}
-                        className={classNames("p-inputtext-sm w-full small-input flex boolean-switch", {
+                        className={classNames("", {
                             "p-invalid": isFormFieldValid(formik, "defaultValue"),
                         })}
 
@@ -106,7 +103,6 @@ export class SolidBooleanField implements ISolidField {
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     )}
-                </div>
             </div>
         );
     }

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

@@ -41,7 +41,7 @@ export class SolidDateField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -56,13 +56,10 @@ export class SolidDateField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
-                </div>
-                <div className="flex-auto">
                     <Calendar
                         disabled={formDisabled || fieldDisabled}
                         ref={calendarRef} // Attach ref to Calendar
@@ -76,10 +73,7 @@ export class SolidDateField implements ISolidField {
                         mask="99/99/9999 99:99"
                         hideOnDateTimeSelect
                         className=""
-
-
                     />
-                </div>
 
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />

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

@@ -41,7 +41,7 @@ export class SolidDateTimeField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -54,31 +54,26 @@ export class SolidDateTimeField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="flex-auto">
-                    <Calendar
-                        disabled={formDisabled || fieldDisabled}
-                        ref={calendarRef} // Attach ref to Calendar
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        //@ts-ignore
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                        // dateFormat="mm/dd/yy"
-                        // placeholder="mm/dd/yyyy hh:mm"
-                        mask="99/99/9999 99:99"
-                        hideOnDateTimeSelect
-                        showTime className=""
-                        hourFormat="24"
-
-                    />
-                </div>
+                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                </label>
+                <Calendar
+                    disabled={formDisabled || fieldDisabled}
+                    ref={calendarRef} // Attach ref to Calendar
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={formik.handleChange}
+                    //@ts-ignore
+                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                    // dateFormat="mm/dd/yy"
+                    // placeholder="mm/dd/yyyy hh:mm"
+                    mask="99/99/9999 99:99"
+                    hideOnDateTimeSelect
+                    showTime className=""
+                    hourFormat="24"
 
+                />
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}