foreign-sapphire•6mo ago

cloning

I need to add the cloning action, but it seems that I need to duplicate the edit page for that? kinda counter productive to have to duplicate code

3 Replies

kapa.ai•6mo ago

Hi @SetiZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add cloning functionality in your refine application, you don't necessarily need to duplicate the entire edit page. Instead, you can leverage the action: "clone" property provided by refine's hooks. This property allows you to clone an existing record by fetching its data and creating a new record with it. Here are the steps to add cloning functionality using refine's useModalForm hook with Ant Design: 1. Add the Clone Button to Your List: You need to add a <CloneButton /> to each record in your list. This button will open a modal form for cloning the record.

   import React from "react";
   import { CloneButton, List, useModalForm, useTable } from "@refinedev/antd";
   import { Form, Input, Modal, Space, Table } from "antd";

   const PostList: React.FC = () => {
     const { tableProps } = useTable<IPost>();

     const {
       modalProps: cloneModalProps,
       formProps: cloneFormProps,
       show: cloneModalShow,
     } = useModalForm<IPost>({
       action: "clone",
     });
return (
       <>
         <List>
           <Table {...tableProps} rowKey="id">
             <Table.Column dataIndex="id" title="ID" />
             <Table.Column dataIndex="title" title="Title" />
             <Table.Column dataIndex="status" title="Status" />
             <Table.Column<IPost>
               title="Actions"
               dataIndex="actions"
               key="actions"
               render={(_, record) => (
                 <Space>
                   <CloneButton
                     hideText
                     size="small"
                     recordItemId={record.id}
                     onClick={() => cloneModalShow(record.id)}
                   />
                 </Space>
               )}
             />
           </Table>
         </List>
         <Modal {...cloneModalProps}>
           <Form {...cloneFormProps} layout="vertical">
             <Form.Item
               label="Title"
               name="title"
               rules={[{ required: true }]}
             >
               <Input />
             </Form.Item>
             <Form.Item
               label="Status"
               name="status"
               rules={[{ required: true }]}
             >
               <Input />
             </Form.Item>
           </Form>
         </Modal>
       </>
     );
   };

   import React from "react";
   import { CloneButton, List, useModalForm, useTable } from "@refinedev/antd";
   import { Form, Input, Modal, Space, Table } from "antd";

   const PostList: React.FC = () => {
     const { tableProps } = useTable<IPost>();

     const {
       modalProps: cloneModalProps,
       formProps: cloneFormProps,
       show: cloneModalShow,
     } = useModalForm<IPost>({
       action: "clone",
     });
return (
       <>
         <List>
           <Table {...tableProps} rowKey="id">
             <Table.Column dataIndex="id" title="ID" />
             <Table.Column dataIndex="title" title="Title" />
             <Table.Column dataIndex="status" title="Status" />
             <Table.Column<IPost>
               title="Actions"
               dataIndex="actions"
               key="actions"
               render={(_, record) => (
                 <Space>
                   <CloneButton
                     hideText
                     size="small"
                     recordItemId={record.id}
                     onClick={() => cloneModalShow(record.id)}
                   />
                 </Space>
               )}
             />
           </Table>
         </List>
         <Modal {...cloneModalProps}>
           <Form {...cloneFormProps} layout="vertical">
             <Form.Item
               label="Title"
               name="title"
               rules={[{ required: true }]}
             >
               <Input />
             </Form.Item>
             <Form.Item
               label="Status"
               name="status"
               rules={[{ required: true }]}
             >
               <Input />
             </Form.Item>
           </Form>
         </Modal>
       </>
     );
   };

2. Ensure Proper Routing: Make sure that your routes include the clone action. If you are using resource routing, you need to specify the clone page in your resources.

   const resources = [
     {
       name: "posts",
       list: PostList,
       create: PostCreate,
       edit: PostEdit,
       clone: PostClone, // Add this line
       show: PostShow,
     },
   ];

   const resources = [
     {
       name: "posts",
       list: PostList,
       create: PostCreate,
       edit: PostEdit,
       clone: PostClone, // Add this line
       show: PostShow,
     },
   ];

3. Handle the Clone Action: The useModalForm hook with action: "clone" will handle fetching the record data and creating a new record upon form submission. By following these steps, you can add cloning functionality without duplicating the entire edit page. The useModalForm hook with the action: "clone" property simplifies the process by handling the data fetching and form submission for you. For more detailed information, you can refer to the useModalForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#usage). If you encounter any issues, make sure to check if your routes are correctly set up and that the clone action is properly defined in your resources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@267689263246606336> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphireOP•6mo ago

sorry that doesn't answer my question.

cloning

Did you find this page helpful?