How to update two tables at once?
Could you guide me on how to:
Fetch and display the list of users in a multi-select dropdown on the task detail page?
Save the selected users as task assignments by inserting records into the task_assignments table?
5 Replies
Hi @daw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To update two tables at once and fetch and display the list of users in a multi-select dropdown on the task detail page, you can follow these steps:
Step 1: Fetch and Display Users in a Multi-Select Dropdown
You can use the
import { ITask, IAuthUser } from "interfaces";
import { useMutation } from "@refinedev/core";
export const EditTask = () => {
const { formProps, saveButtonProps } = useForm<ITask>(); const { selectProps: assigneeProps } = useSelect<IAuthUser>({
resource: "users",
optionValue: "id",
optionLabel: "email",
});
const { mutate } = useMutation();
const handleSave = async (values: ITask) => {
// Save the task await mutate({
resource: "tasks",
values,
});
// Save task assignments const taskAssignments = values.users.map((userId: string) => ({
task_id: values.id,
user_id: userId,
}));
await Promise.all(taskAssignments.map(assignment =>
mutate({
resource: "task_assignments",
values: assignment,
})
));
};
return (
<Edit saveButtonProps={{ ...saveButtonProps, onClick: handleSave }}>
<Form {...formProps} wrapperCol={{ span: 12 }} layout="vertical">
<Form.Item label="Title" name="title">
<Input />
</Form.Item>
<Form.Item label="Description" name="description">
<Input />
</Form.Item>
<Form.Item label="Assignee" name="users ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useSelect hook from @refinedev/antd to fetch and display the list of users in a multi-select dropdown. Here is an example of how you can do this in the task detail page:
Step 2: Save Selected Users as Task Assignments
To save the selected users as task assignments by inserting records into the task_assignments table, you will need to handle the form submission and make API calls to insert the records. Here is an example of how you can do this:
```tsx
import { useForm, Form, Input, Select, Edit, useSelect } from "@refinedev/antd";import { ITask, IAuthUser } from "interfaces";
import { useMutation } from "@refinedev/core";
export const EditTask = () => {
const { formProps, saveButtonProps } = useForm<ITask>(); const { selectProps: assigneeProps } = useSelect<IAuthUser>({
resource: "users",
optionValue: "id",
optionLabel: "email",
});
const { mutate } = useMutation();
const handleSave = async (values: ITask) => {
// Save the task await mutate({
resource: "tasks",
values,
});
// Save task assignments const taskAssignments = values.users.map((userId: string) => ({
task_id: values.id,
user_id: userId,
}));
await Promise.all(taskAssignments.map(assignment =>
mutate({
resource: "task_assignments",
values: assignment,
})
));
};
return (
<Edit saveButtonProps={{ ...saveButtonProps, onClick: handleSave }}>
<Form {...formProps} wrapperCol={{ span: 12 }} layout="vertical">
<Form.Item label="Title" name="title">
<Input />
</Form.Item>
<Form.Item label="Description" name="description">
<Input />
</Form.Item>
<Form.Item label="Assignee" name="users ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@243918634374660098> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenogeneic-maroon•2mo ago
import { Edit, useForm, useSelect } from "@refinedev/antd";
import { useMany } from "@refinedev/core";
import { Form, Input, Select, Switch } from "antd";
export const TaskEdit = () => {
const { formProps, saveButtonProps, queryResult } = useForm({});
return (
<Edit saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item label="Task Name" name="name" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item label="Date" name="task_date" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item
label="Description"
name="description"
rules={[{ required: true }]}
>
<Input.TextArea
style={{ height: "200px" }}
placeholder="Describe the work that needs to be done"
/>
</Form.Item>
<Form.Item
label="Mark as complete"
name="completed"
valuePropName="checked"
rules={[
{
required: true,
},
]}
>
<Switch checkedChildren="Complete" unCheckedChildren="Incomplete" />
</Form.Item>
</Form>
</Edit>
);
};
CREATE TABLE tasks (
id SERIAL PRIMARY KEY,
project_id INT REFERENCES projects(id) ON DELETE CASCADE,
task_name VARCHAR(255) NOT NULL,
description TEXT,
task_date DATE,
status VARCHAR(50), -- e.g., Not Started, In Progress, Completed
created_at TIMESTAMP DEFAULT current_timestamp
);
CREATE TABLE task_assignments (
id SERIAL PRIMARY KEY,
task_id INT REFERENCES tasks(id) ON DELETE CASCADE,
user_id UUID REFERENCES users(id) ON DELETE CASCADE,
assigned_at TIMESTAMP DEFAULT current_timestamp
);
@kapa.ai based on my schema, i need to assign users to a task. there is no column in the task table to do this. how can i update the task_assignents table whilst also updating tasks
Let me check the knowledge base for you. One moment! :books:
----------------------
To update the
task_assignments table while also updating the tasks table, you can follow these steps:
1. Fetch and Display Users in a Multi-Select Dropdown: Use the useSelect hook to fetch the list of users and display them in a multi-select dropdown.
2. Handle Form Submission: On form submission, update the tasks table and then update the task_assignments table with the selected users.
Here is an example implementation based on your schema:
Step 1: Fetch and Display Users in a Multi-Select Dropdown
Step 2: Handle Form Submission
To handle form submission and update both tables, you can use the useMutation hook to perform the necessary API calls:
```tsx
import { Edit, useForm, useSelect } from "@refinedev/antd";
import { useMany, useMutation } from "@refinedev/core";
import { Form, Input, Select, Switch } from "antd";
export const TaskEdit = () => {
const { formProps, saveButtonProps, queryResult } = useForm({});
const { selectProps: assigneeProps } = useSelect({
resource: "users",
optionValue: "id",
optionLabel: "email",
});
const { mutate } = useMutation();
const handleSave = async (values) => {
// Update the task
await mutate({
resource: "tasks",
values,
});
// Update task assignments
const taskAssignments = values.users.map((userId) => ({
task_id: values.id,
user_id: userId,
}));
await Promise.all(
taskAssignments.map((assignment) =>
mutate({
resource: "task_assignments",
values: assignment,
})
)
);
};
return (
<Edit saveButtonProps={{ ...saveButtonProps, onClick: handleSave }}>
<Form {...formProps
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@243918634374660098> kapa.ai is still learning and improving, please let us know how it did by reacting below