@solidstarters/solid-core-ui 1.1.6 → 1.1.8

package/src/components/common/GeneralSettings.tsx

@@ -0,0 +1,286 @@
+"use client"
+import { useCreateSolidSettingsMutation, useUpdateSolidSettingsMutation } from '@/redux/api/solidSettingsApi';
+import { useFormik } from 'formik';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { SelectButton } from 'primereact/selectbutton';
+import { Toast } from 'primereact/toast';
+import { useRef } from 'react'
+
+export const GeneralSettings = ({ solidSettingsData }: { solidSettingsData: any }) => {
+    console.log("solidSettingsData", solidSettingsData);
+
+    const [updateSolidSettings] = useUpdateSolidSettingsMutation();
+    const [
+        createSolidSettings,
+    ] = useCreateSolidSettingsMutation();
+    const toast = useRef<Toast>(null);
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+    const initialValues = {
+        iamAllowPublicRegistration: solidSettingsData?.data?.records?.[0]?.iamAllowPublicRegistration || false,
+        iamPasswordRegistrationEnabled: solidSettingsData?.data?.records?.[0]?.iamPasswordRegistrationEnabled || false,
+        iamPasswordLessRegistrationEnabled: solidSettingsData?.data?.records?.[0]?.iamPasswordLessRegistrationEnabled || false,
+        iamGoogleOAuthEnabled: solidSettingsData?.data?.records?.[0]?.iamGoogleOAuthEnabled || false,
+        shouldQueueEmails: solidSettingsData?.data?.records?.[0]?.shouldQueueEmails || false,
+        shouldQueueSms: solidSettingsData?.data?.records?.[0]?.shouldQueueSms || false,
+        authPagesTheme: solidSettingsData?.data?.records?.[0]?.authPagesTheme || "light",
+        authPagesLayout: solidSettingsData?.data?.records?.[0]?.authPagesLayout || "center",
+        appTnc: solidSettingsData?.data?.records?.[0]?.appTnc || "",
+        appPrivacyPolicy: solidSettingsData?.data?.records?.[0]?.appPrivacyPolicy || "",
+        iamDefaultRole: solidSettingsData?.data?.records?.[0]?.iamDefaultRole || "Admin",
+        appTitle: solidSettingsData?.data?.records?.[0]?.appTitle || "SolidX",
+        appDescription: solidSettingsData?.data?.records?.[0]?.appDescription || "appDescription",
+    };
+    const formik = useFormik({
+        initialValues: initialValues,
+        enableReinitialize: true,
+        onSubmit: async (values) => {
+            console.log("Formik Values:", formik.values);
+            try {
+                const formData = new FormData()
+                Object.entries(values).forEach(([key, value]) => {
+                    if (typeof value === "boolean") {
+                        formData.append(key, value ? "true" : "");
+                    } else {
+                        formData.append(key, value.toString().toLowerCase());
+                    }
+                });
+                if (solidSettingsData?.data?.records?.length > 0) {
+                    await updateSolidSettings({
+                        id: solidSettingsData?.data?.records?.[0]?.id,
+                        data: formData,
+                    }).unwrap()
+                    showToast("success", "Success", "General Settings Updated");
+                } else {
+                    createSolidSettings(formData)
+                    showToast("success", "Success", "General Settings Created");
+                }
+            } catch (error) {
+                showToast("error", "Failed", "Something went wrong");
+            }
+        },
+    })
+
+    const booleanOptions = [
+        { label: "True", value: true },
+        { label: "False", value: false },
+    ]
+
+    const justifyOptions = [
+        { icon: 'pi pi-align-left', value: 'left' },
+        { icon: 'pi pi-align-center', value: 'Center' },
+        { icon: 'pi pi-align-right', value: 'Right' },
+    ];
+
+    const justifyTemplate = (option: any) => {
+        return <i className={option.icon}></i>;
+    }
+
+    return (
+        <div className="page-parent-wrapper p-4">
+            <Toast ref={toast} />
+            <h3>General Settings</h3>
+            <div className="formgrid grid">
+                <div className="col-7">
+                    <form onSubmit={formik.handleSubmit}>
+                        <div className="formgrid grid">
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Allow Public Registration</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <SelectButton
+                                            name="iamAllowPublicRegistration"
+                                            value={formik.values.iamAllowPublicRegistration}
+                                            onChange={(e) => formik.setFieldValue("iamAllowPublicRegistration", e.value)}
+                                            options={booleanOptions}
+                                            optionLabel="label"
+                                            optionValue="value"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Password Registration Enabled</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <SelectButton
+                                            name="iamPasswordRegistrationEnabled"
+                                            value={formik.values.iamPasswordRegistrationEnabled}
+                                            onChange={(e) => formik.setFieldValue("iamPasswordRegistrationEnabled", e.value)}
+                                            options={booleanOptions}
+                                            optionLabel="label"
+                                            optionValue="value"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Passwordless Registration Enabled</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <SelectButton
+                                            name="iamPasswordLessRegistrationEnabled"
+                                            value={formik.values.iamPasswordLessRegistrationEnabled}
+                                            onChange={(e) => formik.setFieldValue("iamPasswordLessRegistrationEnabled", e.value)}
+                                            options={booleanOptions}
+                                            optionLabel="label"
+                                            optionValue="value"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Google OAuth Enabled</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <SelectButton
+                                            name="iamGoogleOAuthEnabled"
+                                            value={formik.values.iamGoogleOAuthEnabled}
+                                            onChange={(e) => formik.setFieldValue("iamGoogleOAuthEnabled", e.value)}
+                                            options={booleanOptions}
+                                            optionLabel="label"
+                                            optionValue="value"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Use queue for sending emails</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <SelectButton
+                                            name="shouldQueueEmails"
+                                            value={formik.values.shouldQueueEmails}
+                                            onChange={(e) => formik.setFieldValue("shouldQueueEmails", e.value)}
+                                            options={booleanOptions}
+                                            optionLabel="label"
+                                            optionValue="value"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Use queue for sending SMS</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <SelectButton
+                                            name="shouldQueueSms"
+                                            onChange={(e) => formik.setFieldValue("shouldQueueSms", e.value)}
+                                            value={formik.values.shouldQueueSms}
+                                            options={booleanOptions}
+                                            optionLabel="label"
+                                            optionValue="value"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Authentication Pages Theme</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <div className="theme-buttons mt-2">
+                                            <Button
+                                                type="button"
+                                                label="Solid Light"
+                                                outlined={formik.values.authPagesTheme !== "light"}
+                                                onClick={() => formik.setFieldValue("authPagesTheme", "light")}
+                                            />
+                                            <Button
+                                                type="button"
+                                                label="Solid Dark"
+                                                outlined={formik.values.authPagesTheme !== "dark"}
+                                                onClick={() => formik.setFieldValue("authPagesTheme", "dark")}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Authentication Pages Theme</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <SelectButton
+                                            name="authPagesLayout"
+                                            value={
+                                                formik.values.authPagesLayout === "left"
+                                                    ? "left"
+                                                    : formik.values.authPagesLayout.charAt(0).toUpperCase() + formik.values.authPagesLayout.slice(1)
+                                            }
+                                            onChange={(e) => formik.setFieldValue("authPagesLayout", e.value)}
+                                            itemTemplate={justifyTemplate}
+                                            optionLabel="value"
+                                            options={justifyOptions}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Terms and Conditions Link</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <InputText
+                                            type="text"
+                                            id="appTnc"
+                                            name="appTnc"
+                                            onChange={formik.handleChange}
+                                            value={formik.values.appTnc}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="col-6 mt-3">
+                                <div className="formgrid grid align-items-center">
+                                    <div className="col-5">
+                                        <label className="form-field-label">Privacy Policy Link</label>
+                                    </div>
+                                    <div className="col-7">
+                                        <InputText
+                                            type="text"
+                                            id="appPrivacyPolicy"
+                                            name="appPrivacyPolicy"
+                                            onChange={formik.handleChange}
+                                            value={formik.values.appPrivacyPolicy}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <Button type="submit" label="Save" className="mt-3" />
+                    </form>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/common/SingleSelectAutoCompleteField.tsx

@@ -35,7 +35,6 @@ export const SingleSelectAutoCompleteField = ({ disabled, formik, isFormFieldVal
                 invalid={isFormFieldValid(formik, fieldName)}
                 completeMethod={searchItems}
                 virtualScrollerOptions={{ itemSize: 38 }}
-                className="w-full small-input"
                 // style={{
                 //     maxHeight: 39.67
                 // }}

package/src/components/common/SolidFormStepper.tsx

@@ -0,0 +1,12 @@
+import { Button } from 'primereact/button'
+import React from 'react'
+
+export const SolidFormStepper = () => {
+    return (
+        <div className='flex justify-content-end'>
+            <Button type='button' severity='secondary' className='solid-step-button btn-step-first'>Step 1</Button>
+            <Button type='button' className='solid-step-button btn-step'>Step 2</Button>
+            <Button type='button' className='solid-step-button btn-step-last'>Step 3</Button>
+        </div>
+    )
+}

package/src/components/core/common/LoadDynamicJsxComponent.tsx

@@ -1,6 +1,7 @@
 'use client';
 import dynamic from "next/dynamic";
 import path from "path";
+import GenerateModelCodeRowAction from "../extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction";
 
 // Fallback component for missing components
 const FallbackComponent = ({ componentName }: any) => (
@@ -31,7 +32,7 @@ export const LoadDynamicJsxComponent = ({ context }: any) => {
             } catch (error) {
                 console.error(`Failed to load component "${context?.rowAction?.action?.customComponent}":`, error);
                 // Return a fallback component if the import fails
-                return () => <FallbackComponent componentName={context?.rowAction?.action?.customComponent} />;
+                return () => <GenerateModelCodeRowAction context={context} />;
             }
         },
         { ssr: false } // Disable server-side rendering

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -101,7 +101,7 @@ const transformRulesToFilters = (input: any) => {
 
 }
 
-export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCustomFilter }: any, ref) => {
+export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCustomFilter, setShowArchived, showArchived }: any, ref) => {
 
     const initialState: FilterRule[] = [
         {
@@ -160,7 +160,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         }
     }, [])
 
-    const op = useRef(null);
+    const op = useRef<OverlayPanel>(null);
 
     return (
         <div className="flex justify-content-center solid-custom-filter-wrapper">
@@ -184,6 +184,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 <div className="px-2 py-1">
                     <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus' onClick={() => setShowGlobalSearchElement(true)} />
                 </div>
+                <Divider className="m-0" />
+                {viewData?.data?.solidView?.model?.enableSoftDelete && <div className="px-2 py-1">
+                    <Button text size="small" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => {setShowArchived(!showArchived); op.current?.hide()}} />
+                </div>}
             </OverlayPanel>
             <Dialog header={false} className="search-filter-popup" showHeader={false} visible={showGlobalSearchElement} style={{ width: '50vw' }} onHide={() => { if (!showGlobalSearchElement) return; setShowGlobalSearchElement(false); }}>
                 <div className="flex field-popup-navigation gap-3 justify-content-between ">

package/src/components/core/extension/solid-core/modelMetadata/list/GenerateModelCodeRowAction.tsx

@@ -3,7 +3,7 @@ import { useGenerateCodeForModelMutation } from "@/redux/api/modelApi";
 import { Button } from "primereact/button";
 
 
-export const GenerateModelCodeRowAction = ({ context }: any) => {
+const GenerateModelCodeRowAction = ({ context }: any) => {
 
     const [
         generateCode,
@@ -13,7 +13,7 @@ export const GenerateModelCodeRowAction = ({ context }: any) => {
 
     const generateCodeHandler = async () => {
         const response = await generateCode({ id: context.rowData.id })
-        context.closeCustomRowActionPopup();
+        context.closeListViewRowActionPopup();
         console.log("response", response);
     }
 
@@ -29,10 +29,10 @@ export const GenerateModelCodeRowAction = ({ context }: any) => {
             </ul>
             <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.closeCustomRowActionPopup()} />
+                <Button label="Cancel" icon="pi pi-times" className='small-button' onClick={() => context.closeListViewRowActionPopup()} />
             </div>
         </div >
     )
 }
 
-
+export default GenerateModelCodeRowAction;