From 178f27cfe210b4dec78e0e4cde1afb0f5ef79f80 Mon Sep 17 00:00:00 2001 From: ewandor Date: Thu, 1 May 2025 19:41:08 +0200 Subject: [PATCH] Moving Refine Form logic from crud lib to implementation --- .../src/lib/crud/components/crud-form.tsx | 28 ++++++----------- gui/rpk-gui/src/pages/firm/base-page/Edit.tsx | 30 +++++++++++++++---- gui/rpk-gui/src/pages/firm/base-page/New.tsx | 10 ++++++- gui/rpk-gui/src/pages/firm/index.tsx | 18 ++++++++--- gui/rpk-gui/src/pages/hub/CreateFirm.tsx | 18 +++++++---- 5 files changed, 69 insertions(+), 35 deletions(-) diff --git a/gui/rpk-gui/src/lib/crud/components/crud-form.tsx b/gui/rpk-gui/src/lib/crud/components/crud-form.tsx index e767009..2d2fb71 100644 --- a/gui/rpk-gui/src/lib/crud/components/crud-form.tsx +++ b/gui/rpk-gui/src/lib/crud/components/crud-form.tsx @@ -8,32 +8,23 @@ import { BaseForm } from "./base-form"; type CrudFormProps = { schemaName: string, uiSchema?: UiSchema, - resourceBasePath?: string, - resource: string, - id?: string, - onSuccess?: (data: any) => void, + record?: any, + resourceBasePath: string, + onSubmit: (data: any) => void, defaultValue?: any, children?: ReactNode } export const CrudForm: React.FC = (props) => { - const { schemaName, uiSchema, resourceBasePath="" ,resource, id, onSuccess, defaultValue, children } = props; - - const { onFinish, query, formLoading } = useForm({ - resource: resourceBasePath == "" ? resource : `${resourceBasePath}/${resource}`, - action: id === undefined ? "create" : "edit", - redirect: "show", - id, - onMutationSuccess: (data: any) => { if (onSuccess) { onSuccess(data) } }, - }); + const { schemaName, uiSchema, record, resourceBasePath, defaultValue, children, onSubmit } = props; const [schema, setSchema] = useState({}); const [schemaLoading, setSchemaLoading] = useState(true); useEffect(() => { const fetchSchema = async () => { try { - const resourceSchema = id === undefined ? await jsonschemaProvider.getCreateResourceSchema(schemaName) - : await jsonschemaProvider.getCardResourceSchema(schemaName); + const resourceSchema = record === undefined ? await jsonschemaProvider.getCreateResourceSchema(schemaName) + : await jsonschemaProvider.getUpdateResourceSchema(schemaName); setSchema(resourceSchema); setSchemaLoading(false); } catch (error) { @@ -44,19 +35,18 @@ export const CrudForm: React.FC = (props) => { fetchSchema(); }, []); - if(formLoading || schemaLoading) { + if(schemaLoading) { return } - const record = query?.data?.data || defaultValue; return ( onFinish(data) + (data: any) => onSubmit(data) } children={children} /> diff --git a/gui/rpk-gui/src/pages/firm/base-page/Edit.tsx b/gui/rpk-gui/src/pages/firm/base-page/Edit.tsx index 72721d3..6b01b94 100644 --- a/gui/rpk-gui/src/pages/firm/base-page/Edit.tsx +++ b/gui/rpk-gui/src/pages/firm/base-page/Edit.tsx @@ -1,9 +1,11 @@ import { UiSchema } from "@rjsf/utils"; -import { useParams } from "react-router"; import { useContext } from "react"; -import { Button } from "@mui/material"; -import DeleteIcon from '@mui/icons-material/Delete'; +import { useParams, Navigate } from "react-router"; +import { Button, CircularProgress } from "@mui/material"; +import Stack from "@mui/material/Stack"; import SaveIcon from '@mui/icons-material/Save'; +import { useForm } from "@refinedev/core"; +import { DeleteButton } from "@refinedev/mui"; import { FirmContext } from "../../../contexts/FirmContext"; import { CrudForm } from "../../../lib/crud/components/crud-form"; import Stack from "@mui/material/Stack"; @@ -21,14 +23,30 @@ const Edit = (props: EditProps) => { const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}` const { record_id } = useParams(); + const { onFinish, query, formLoading } = useForm({ + resource: `${resourceBasePath}/${resource}`, + action: "edit", + redirect: "show", + id: record_id, + }); + + if (formLoading) { + return + } + + if (!query?.data?.data) { + return + } + + const record = query.data.data; return ( <> onFinish(data)} > (props: NewProps) => { const { currentFirm } = useContext(FirmContext); const resourceBasePath = `firm/${currentFirm.instance}/${currentFirm.firm}` + const { onFinish } = useForm({ + resource: `${resourceBasePath}/${resource}`, + action: "create", + redirect: "show", + }); + return ( (props: NewProps) => { resourceBasePath={resourceBasePath} resource={resource} defaultValue={defaultValue} + onSubmit={(data: any) => onFinish(data)} /> ) } diff --git a/gui/rpk-gui/src/pages/firm/index.tsx b/gui/rpk-gui/src/pages/firm/index.tsx index 9da2085..40775e6 100644 --- a/gui/rpk-gui/src/pages/firm/index.tsx +++ b/gui/rpk-gui/src/pages/firm/index.tsx @@ -1,8 +1,8 @@ import { Route, Routes, Link } from "react-router"; import React, { useContext } from "react"; +import { useForm, useOne, useTranslation } from "@refinedev/core"; import { FirmContext, FirmContextProvider } from "../../contexts/FirmContext"; import { Header } from "../../components"; -import { useOne } from "@refinedev/core"; import { CrudForm } from "../../lib/crud/components/crud-form"; import { IFirm } from "../../interfaces"; import { EntityRoutes } from "./EntityRoutes"; @@ -34,6 +34,7 @@ export const FirmRoutes = () => { const FirmHome = () => { const { currentFirm } = useContext(FirmContext); const { data: firm, isError, error, isLoading } = useOne({resource: 'firm', id: `${currentFirm.instance}/${currentFirm.firm}/`, errorNotification: false}) + const { translate: t } = useTranslation(); if (isLoading) { return

Loading...

@@ -64,16 +65,25 @@ type FirmInitFormPros = { const FirmInitForm = (props: FirmInitFormPros) => { const { currentFirm } = props; + const { translate: t } = useTranslation(); + const resourceBasePath = `firm` + + const { onFinish } = useForm({ + resource: `${resourceBasePath}/${currentFirm.instance}/${currentFirm.firm}`, + action: "create", + redirect: "show", + }); + return ( <>

Initialization of {`${currentFirm.instance} / ${currentFirm.firm}`}

- onFinish(data)} /> ) diff --git a/gui/rpk-gui/src/pages/hub/CreateFirm.tsx b/gui/rpk-gui/src/pages/hub/CreateFirm.tsx index 3d87a2f..96cb29d 100644 --- a/gui/rpk-gui/src/pages/hub/CreateFirm.tsx +++ b/gui/rpk-gui/src/pages/hub/CreateFirm.tsx @@ -1,6 +1,6 @@ -import { useInvalidateAuthStore } from "@refinedev/core"; +import { useForm, useInvalidateAuthStore } from "@refinedev/core"; import { CrudForm } from "../../lib/crud/components/crud-form"; -import {empty_user} from "../../providers/auth-provider"; +import { empty_user } from "../../providers/auth-provider"; export const CreateFirm = () => { const invalidateAuthStore = useInvalidateAuthStore() @@ -9,11 +9,19 @@ export const CreateFirm = () => { invalidateAuthStore().then(); } + const resourceBasePath = "hub/users"; + const { onFinish } = useForm({ + resource: `${resourceBasePath}/firms`, + action: "create", + redirect: "list", + onMutationSuccess: data => refreshUser() + }); + return ( { refreshUser() }} + schemaName={"Firm"} + resourceBasePath={resourceBasePath} + onSubmit={(data: any) => onFinish(data)} /> ) }