Ajout des rooms et des items

This commit is contained in:
Votre Nom 2024-03-27 15:34:55 +01:00
parent 036d87b731
commit 38e076c65b
3 changed files with 120 additions and 0 deletions

View 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;

View 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;

View File

@ -3,6 +3,8 @@ import React from "react";
import { useAuth } from "../hooks"; import { useAuth } from "../hooks";
import { ItemBox } from "../components/item/item"; import { ItemBox } from "../components/item/item";
import { DatePicker } from "antd"; import { DatePicker } from "antd";
import { FormCreateItem } from "../components/form/formCreateItem";
import { FormCreateRoom } from "../components/form/formCreateRoom";
export const Home = () => { export const Home = () => {
const { user } = useAuth(); const { user } = useAuth();
@ -10,6 +12,8 @@ export const Home = () => {
return ( return (
<div> <div>
<h1>Home page</h1> <h1>Home page</h1>
<FormCreateRoom></FormCreateRoom>
<FormCreateItem></FormCreateItem>
{user && <h2>Hello {user.user.username}</h2>} {user && <h2>Hello {user.user.username}</h2>}
<DatePicker></DatePicker> <DatePicker></DatePicker>
<ItemBox <ItemBox