mantine-entity
Version:
A library combining Mantine, TanStack Query, and Mantine React Table for efficient entity management
67 lines (66 loc) • 3.09 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { Button, Group, Stack } from "@mantine/core";
import { FormBuilder } from "../form-builder/builder";
import { IconDeviceFloppy } from "@tabler/icons-react";
import { useUpdateQuery, useViewQuery } from "./querys";
import NotFoundLayout from "../../components/not-found-layout";
import ErrorPage from "../../components/error-page";
import notify from "../../utils/notification";
const RenderUpdateForm = (props) => {
const { fields, queryBuilder, mapDefaultValue, rootConfig, disableOn, hiddenOn, searchParams, requestParams, } = props;
const id = searchParams.get("id") ?? "";
const memoFields = useMemo(() => fields, [fields]);
const memoViewQuery = useMemo(() => queryBuilder?.view, [queryBuilder]);
const memoCreateQuery = useMemo(() => queryBuilder?.update, [queryBuilder]);
const { data, isLoading, isFetching, isError, refetch } = useViewQuery({
rootConfig,
actionQuery: memoViewQuery,
id,
requestParams,
});
const { mutateAsync: update, isPending } = useUpdateQuery({
actionQuery: memoCreateQuery,
rootConfig,
data,
requestParams,
});
const isDataLoading = useMemo(() => isLoading || isFetching || isPending, [isLoading, isFetching, isPending]);
if (!id)
return _jsx(NotFoundLayout, {});
if (isError) {
return (_jsx(ErrorPage, { errorMessage: "Something went wrong. Please try again.", onRetry: () => {
refetch();
} }));
}
console.log({ data });
if (data) {
if ("createdAt" in data) {
delete data.createdAt;
delete data.createdBy;
delete data.updatedBy;
delete data.updatedAt;
}
}
return (_jsx(Stack, { align: "center", className: "w-full", children: _jsx(FormBuilder, { httpGet: requestParams.httpGet, getBaseUrl: requestParams.getBaseUrl, fields: memoFields, disabledFields: disableOn?.update, hiddenFields: hiddenOn?.update, isLoading: isDataLoading, values: data, mapDefaultValue: mapDefaultValue, wrapperProps: {
className: "bg-[var(--card)] p-10 rounded-md h-full w-full relative",
mih: 200,
maw: 800,
p: "xl",
}, onSubmit: async (values) => await update(values)
.then((data) => {
notify({
type: "success",
message: data?.message ?? "Data Edited Succsfuly",
});
})
.catch((error) => {
const message = error?.data?.message ?? "Error on editing data";
notify({
type: "error",
message,
});
}), children: _jsx(Group, { justify: "end", children: _jsx(Button, { radius: "sm", size: "xs", w: 80, type: "submit", leftSection: _jsx(IconDeviceFloppy, { size: 14 }), loading: isPending, children: "Save" }) }) }) }));
};
export default RenderUpdateForm;