other-emerald•9mo ago

Module under Module

Okay so i am using refine+anyd+supabase, i am making project module and under my project module i have task module. So I have a table project and when i show one project, i can navigate to task module but the problem is when i am showing my task table and when i click on create it shows me the form to create project. Please help me out

2 Replies

kapa.ai•9mo ago

Hi @venom. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like there might be a mix-up in your routing or component setup. In Refine, each module (or resource) should have its own set of pages for creating, editing, and viewing items. For example, in the task module, you should have a TaskCreate component that is used to create tasks. This component should be imported and used in the task module's routing setup. Here's an example of what the TaskCreate component might look like:

import {  
 useForm,  
 Create,  
 Form,  
 Input,  
 Select,  
 useSelect,  
 DatePicker,  
} from "@refinedev/antd";  
  
import { ITask, ILabel, IPriority, IStatus, IAuthUser } from "interfaces";  
  
export const TaskCreate = () => {  
 const { formProps, saveButtonProps } = useForm<ITask>();  
  
 const { selectProps: labelSelectProps } = useSelect<ILabel>({  
 resource: "label",  
 });  
  
 const { selectProps: prioritySelectPorps } = useSelect<IPriority>({  
 resource: "priority",  
 });  
  
 const { selectProps: assigneeSelectProps } = useSelect<IAuthUser>({  
 resource: "users",  
 optionValue: "id",  
 optionLabel: "email",  
 });  
  
 const { selectProps: statusSelectProps } = useSelect<IStatus>({  
 resource: "status",  
 });  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form {...formProps} wrapperCol={{ span: 12 }} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item label="Description" name="description">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Label" name="label">  
 <Select {...labelSelectProps} />  
 </Form.Item>  
 <Form.Item label="Priority" name="priority">  
 <Select {...prioritySelectPorps} />  
 </Form.Item>  
 <Form.Item label="Assign To" name="users">  
 <Select {...assigneeSelectProps} />  
 </Form.Item>  
 <Form.Item label="Select Status" name="status">  
 <Select {...statusSelectProps} />  
 </Form.Item>  
 <Form.Item label="Start Date" name="start_time">  
 <DatePicker style={{ width: "50%" }} />  
 </Form.Item>  
 <Form.Item label="Due Date" name="end_time">  
 <DatePicker style={{ width: "50%" }} />  
 </Form.Item>  
 </Form>  
 </Create>  
 );  
};

import {  
 useForm,  
 Create,  
 Form,  
 Input,  
 Select,  
 useSelect,  
 DatePicker,  
} from "@refinedev/antd";  
  
import { ITask, ILabel, IPriority, IStatus, IAuthUser } from "interfaces";  
  
export const TaskCreate = () => {  
 const { formProps, saveButtonProps } = useForm<ITask>();  
  
 const { selectProps: labelSelectProps } = useSelect<ILabel>({  
 resource: "label",  
 });  
  
 const { selectProps: prioritySelectPorps } = useSelect<IPriority>({  
 resource: "priority",  
 });  
  
 const { selectProps: assigneeSelectProps } = useSelect<IAuthUser>({  
 resource: "users",  
 optionValue: "id",  
 optionLabel: "email",  
 });  
  
 const { selectProps: statusSelectProps } = useSelect<IStatus>({  
 resource: "status",  
 });  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form {...formProps} wrapperCol={{ span: 12 }} layout="vertical">  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item label="Description" name="description">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Label" name="label">  
 <Select {...labelSelectProps} />  
 </Form.Item>  
 <Form.Item label="Priority" name="priority">  
 <Select {...prioritySelectPorps} />  
 </Form.Item>  
 <Form.Item label="Assign To" name="users">  
 <Select {...assigneeSelectProps} />  
 </Form.Item>  
 <Form.Item label="Select Status" name="status">  
 <Select {...statusSelectProps} />  
 </Form.Item>  
 <Form.Item label="Start Date" name="start_time">  
 <DatePicker style={{ width: "50%" }} />  
 </Form.Item>  
 <Form.Item label="Due Date" name="end_time">  
 <DatePicker style={{ width: "50%" }} />  
 </Form.Item>  
 </Form>  
 </Create>  
 );  
};

(Source: Create Your Easy Customizable Internal Issue Tracker With Refine and Supabase > Create Task (https://refine.dev/blog/customizable-issue-tracker-with-refine-and-supabase#create-task)) Make sure that you're using the correct component for creating tasks in your task module's routing setup. If you're still having trouble, please provide more details about your setup so I can give a more specific answer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

Module under Module

Did you find this page helpful?