✅ Ajout des rooms et des items
This commit is contained in:
parent
036d87b731
commit
38e076c65b
78
src/components/form/formCreateItem.jsx
Normal file
78
src/components/form/formCreateItem.jsx
Normal file
@ -0,0 +1,78 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Form, Input, InputNumber, Button, Select } from "antd";
|
||||
import axios from "axios";
|
||||
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
|
||||
export const FormCreateItem = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [rooms, setRooms] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchRooms = async () => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`${import.meta.env.VITE_API_URL}/room`,
|
||||
);
|
||||
setRooms(response.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchRooms();
|
||||
}, []);
|
||||
|
||||
const onFinish = async (values) => {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`${import.meta.env.VITE_API_URL}/item`,
|
||||
values,
|
||||
);
|
||||
console.log(response.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} onFinish={onFinish}>
|
||||
<h1>Create Item</h1>
|
||||
<Form.Item label="Brand" name="brand">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Model" name="model">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Room" name="room">
|
||||
<Select placeholder="Select a room">
|
||||
{rooms.map((room) => (
|
||||
<Option key={room._id} value={room._id}>
|
||||
{room.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="Price" name="price">
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item label="Purchase Date" name="purchaseDate">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Description" name="description">
|
||||
<TextArea rows={4} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Link" name="link">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormCreateItem;
|
38
src/components/form/formCreateRoom.jsx
Normal file
38
src/components/form/formCreateRoom.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
import React from "react";
|
||||
import { Form, Input, Button } from "antd";
|
||||
import axios from "axios";
|
||||
|
||||
export const FormCreateRoom = () => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const onFinish = async (values) => {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`${import.meta.env.VITE_API_URL}/room`,
|
||||
values,
|
||||
);
|
||||
console.log(response.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} onFinish={onFinish}>
|
||||
<Form.Item
|
||||
label="Room Name"
|
||||
name="name"
|
||||
rules={[{ required: true, message: "Please input the room name!" }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormCreateRoom;
|
@ -3,6 +3,8 @@ import React from "react";
|
||||
import { useAuth } from "../hooks";
|
||||
import { ItemBox } from "../components/item/item";
|
||||
import { DatePicker } from "antd";
|
||||
import { FormCreateItem } from "../components/form/formCreateItem";
|
||||
import { FormCreateRoom } from "../components/form/formCreateRoom";
|
||||
|
||||
export const Home = () => {
|
||||
const { user } = useAuth();
|
||||
@ -10,6 +12,8 @@ export const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Home page</h1>
|
||||
<FormCreateRoom></FormCreateRoom>
|
||||
<FormCreateItem></FormCreateItem>
|
||||
{user && <h2>Hello {user.user.username}</h2>}
|
||||
<DatePicker></DatePicker>
|
||||
<ItemBox
|
||||
|
Loading…
Reference in New Issue
Block a user