@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/form/SolidFormFooter.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useLazyNavigationQuery } from "../../../redux/api/modelApi";
+import { useEffect, useState } from "react";
+import qs from "qs";
+import { queryObjectToQueryStringByUrl, queryStringToQueryObjectByUrl } from "../list/SolidListView";
+import { SolidFormViewProps } from "./SolidFormView";
+import { usePathname, useSearchParams, useRouter } from "next/navigation";
+import { Button } from "primereact/button";
+
+export type SolidFormFooterProps = {
+    params: SolidFormViewProps;
+};
+
+type NavItem = {
+    recordId: number;
+    offset: number;
+    limit: number;
+};
+
+export const SolidFormFooter = ({ params }: SolidFormFooterProps) => {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+
+    const [prevNav, setPrevNav] = useState<NavItem | null>(null);
+    const [nextNav, setNextNav] = useState<NavItem | null>(null);
+    const [meta, setMeta] = useState<any>(null);
+
+    const [triggerGetNavigation, { isLoading }] =
+        useLazyNavigationQuery();
+
+    // -----------------------------
+    // Helper: update local storage
+    // -----------------------------
+    const updatePaginationInLocalStorage = (offset: number, limit: number) => {
+        const listPath = window.location.pathname.replace(
+            /\/form\/[^/]+/,
+            "/list",
+        );
+        const queryObject = queryStringToQueryObjectByUrl(listPath);
+
+        const updatedQueryObj = {
+            ...queryObject,
+            offset,
+            limit,
+        };
+        queryObjectToQueryStringByUrl(listPath, updatedQueryObj)
+    };
+
+    const getNewUrl = (recordId: number): string => {
+        // Replace the id after /form/
+        const newPathname = pathname.replace(
+            /\/form\/[^/]+/,
+            `/form/${recordId}`,
+        );
+
+        // Clone search params (immutable in Next.js)
+        const params = new URLSearchParams(searchParams.toString());
+
+        // Remove only userKeyField
+        params.delete("userKeyField");
+
+        const query = params.toString();
+        return query ? `${newPathname}?${query}` : newPathname;
+    }
+
+
+    // -----------------------------
+    // Click handlers
+    // -----------------------------
+    const handlePrev = () => {
+
+        if (!prevNav) return;
+
+        updatePaginationInLocalStorage(prevNav.offset, prevNav.limit);
+        const newUrl = getNewUrl(prevNav.recordId)
+        router.push(newUrl);
+    };
+
+    const handleNext = () => {
+        if (!nextNav) return;
+
+        updatePaginationInLocalStorage(nextNav.offset, nextNav.limit);
+        const newUrl = getNewUrl(nextNav.recordId)
+        router.push(newUrl);
+    };
+
+    // -----------------------------
+    // Fetch navigation data
+    // -----------------------------
+    useEffect(() => {
+        if (params.id !== "new") {
+
+            const fetchNavigation = async () => {
+                const listPath = window.location.pathname.replace(
+                    /\/form\/[^/]+/,
+                    "/list",
+                );
+
+                const queryObject = queryStringToQueryObjectByUrl(listPath);
+
+                const queryData = {
+                    offset: queryObject.offset || 0,
+                    limit: queryObject.limit || 25,
+                    filters: queryObject.filters,
+                    fields: ["id"],
+                    modelName: params.modelName,
+                    recordId: params.id,
+                    sort: queryObject.sort
+                };
+
+                const queryString = qs.stringify(queryData, {
+                    encodeValuesOnly: true,
+                });
+
+                const response: any = await triggerGetNavigation(queryString).unwrap();
+                console.log("response nav", response);
+                if (response.statusCode == 200) {
+                    setPrevNav(response?.data?.prev ?? null);
+                    setNextNav(response?.data?.next ?? null);
+                    setMeta(response?.data?.meta ?? null);
+                }
+            };
+            fetchNavigation();
+        }
+    }, [params.id]);
+
+    // -----------------------------
+    // UI
+    // -----------------------------
+    return (
+        <div
+            className="flex justify-content-end align-items-center gap-2 p-1"
+            style={{ borderTop: "1px solid var(--surface-border)" }}
+        >{meta &&
+            <span>{`${meta.currentIndexGlobal} of ${meta.totalRecords}`}</span>
+            }
+            {prevNav && (
+                <Button
+                    icon="pi pi-angle-left"
+                    className="p-button-sm p-button-text"
+                    onClick={() => handlePrev()}
+                    disabled={isLoading}
+                    tooltip="Previous"
+                    tooltipOptions={{ position: "top" }}
+                />
+            )}
+
+            {nextNav && (
+                <Button
+                    icon="pi pi-angle-right"
+                    className="p-button-sm p-button-text"
+                    onClick={() => handleNext()}
+                    disabled={isLoading}
+                    tooltip="Next"
+                    tooltipOptions={{ position: "top" }}
+                />
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,104 @@
+"use client"
+import { useGetmodelByIdQuery } from "../../../redux/api/modelApi";
+import { useGetmoduleByIdQuery } from "../../../redux/api/moduleApi";
+import { useGetusersByIdQuery } from "../../../redux/api/userApi";
+import { useEffect } from "react";
+import CreateModel from "../model/CreateModel";
+import CreateModule from "../module/CreateModule";
+import CreateUser from "../users/CreateUser";
+import SolidFormView from "./SolidFormView";
+import { camelCase } from "change-case";
+
+type SolidViewParams = {
+    params: {
+        moduleName: string;
+        modelName: string;
+        id: string;
+    };
+};
+
+const SolidFormLayouts = ({ params }: any) => {
+    const {
+        data: modelData,
+        error,
+        isLoading,
+        isError,
+        refetch
+    } = useGetmodelByIdQuery(params.id, {
+        skip: params.id === 'new' || params.modelName !== 'model-metadata',
+    });
+    useEffect(() => {
+        if (params?.id !== 'new' && params.modelName === 'model-metadata') {
+            refetch();
+        }
+    }, [params.id, refetch]);
+
+    const {
+        data: moduleData,
+        error: moduleError,
+        isLoading: isModuleLoading,
+        isError: isModuleError,
+        refetch: refetchModule
+    } = useGetmoduleByIdQuery(params.id, {
+        skip: params.id === 'new' || params.modelName !== 'module-metadata',
+    });
+    useEffect(() => {
+        if (params?.id !== 'new' && params.modelName === 'module-metadata') {
+            refetchModule();
+        }
+    }, [refetchModule]);
+
+    const {
+        data: userData,
+        error: usererror,
+        isLoading: isuserLoading,
+        isError: isuserError,
+        refetch: refetchuser
+    } = useGetusersByIdQuery(params.id, {
+        skip: params.id === 'new' || params.modelName !== 'user',
+    });
+    useEffect(() => {
+        if (params?.id !== 'new' && params?.modelName === 'user') {
+            refetchuser();
+        }
+    }, [refetchuser]);
+
+    return (
+        <div className="page-parent-wrapper">
+            {params.modelName === "model-metadata" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateModel params={params}></CreateModel>
+                    :
+                    <CreateModel params={params} data={modelData?.data}></CreateModel>
+                )
+            }
+            {params.modelName === "module-metadata" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateModule params={params}></CreateModule>
+                    :
+                    <CreateModule params={params} data={moduleData?.data}></CreateModule>
+                )
+            }
+
+            {params.modelName === "user" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateUser params={params}></CreateUser>
+                    :
+                    <CreateUser params={params} data={userData?.data}></CreateUser>
+                )
+            }
+
+            {params.modelName === "field-metadata" &&
+                <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+            }
+            {params.modelName !== "field-metadata" && params.modelName !== "model-metadata" && params.modelName !== "module-metadata" && params.modelName !== "user" &&
+                <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+            }
+        </div>
+    )
+}
+
+export default SolidFormLayouts

package/dist/components/core/form/SolidFormUserViewLayout.tsx

@@ -0,0 +1,84 @@
+"use client";
+import { useFormik } from "formik";
+import { Button } from "primereact/button";
+import { useSelector } from "react-redux";
+import React, { useRef } from "react";
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { javascript } from "@codemirror/lang-javascript";
+import { oneDark } from "@codemirror/theme-one-dark";
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { Toast } from "primereact/toast";
+import { ERROR_MESSAGES } from "../../../constants/error-messages";
+export const SolidFormUserViewLayout = ({ solidFormViewMetaData, setLayoutDialogVisible }: any) => {
+    const toast = useRef<Toast>(null);
+    const entityApi = createSolidEntityApi("userViewMetadata");
+    const { useUpsertSolidEntityMutation } = entityApi;
+    const [upsertUserView] = useUpsertSolidEntityMutation();
+
+    if (!solidFormViewMetaData?.data?.solidView) return null;
+
+    const solidView = solidFormViewMetaData.data.solidView;
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+            ? { sticky: true }            // stays until user closes
+            : { life: 3000 }),
+        });
+    };
+
+    const formik = useFormik({
+        initialValues: {
+            layoutString: JSON.stringify(solidView.layout, null, 2),
+        },
+        onSubmit: async (values) => {
+            const parsedLayout = JSON.parse(values.layoutString);
+            try {
+                if (solidView.id) {
+                    const response = await upsertUserView({
+                        viewMetadataId: solidView.id,
+                        layout: JSON.stringify(parsedLayout)
+                    }).unwrap();
+                    if (response.statusCode === 200) {
+                        showToast("success", ERROR_MESSAGES.LAYOUT, ERROR_MESSAGES.FORM_LAYOUT_UPDATE);
+                        setLayoutDialogVisible(false);
+                        window.location.reload();
+                    }
+                }
+            } catch (error) {
+                console.error(ERROR_MESSAGES.UPDATE_FAILED, error);
+            }
+        },
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <form onSubmit={formik.handleSubmit}>
+                <CodeMirror
+                    value={formik.values.layoutString}
+                    height="500px"
+                    theme={oneDark}
+                    style={{ fontSize: '10px' }}
+                    extensions={[javascript(), EditorView.lineWrapping]}
+                    onChange={(value) => {
+                        formik.setFieldValue("layoutString", value);
+                    }}
+                />
+                <div className="pt-3 flex gap-2">
+                    <Button type="submit" label="Apply" size="small" />
+                    <Button
+                        type="button"
+                        outlined
+                        label="Cancel"
+                        size="small"
+                        onClick={() => setLayoutDialogVisible(false)}
+                    />
+                </div>
+            </form>
+        </>
+    );
+};