descampsv/2024-DEV-BUT3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix jsp pein de truc en vrais

Browse Source
This commit is contained in:
Victor
2024-05-13 00:13:34 +02:00
parent 18b7052259
commit 2868efcda4
5 changed files with 1158 additions and 981 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/form/formCreateItem.jsx
View File

@@ -1,11 +1,12 @@
import React, { useState, useEffect } from "react";
import { Form, Input, InputNumber, Button, Select } from "antd";
import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
import axios from "axios";
const { TextArea } = Input;
const { Option } = Select;
const dateFormat = "YYYY-MM-DD";
export const FormCreateItem = () => {
export const FormCreateItem = ({ onClose }) => {
const [form] = Form.useForm();
const [rooms, setRooms] = useState([]);
@@ -31,6 +32,8 @@ export const FormCreateItem = () => {
values,
);
console.log(response.data);
// Fermer la fenêtre modale après soumission réussie
onClose();
} catch (error) {
console.error(error);
}
@@ -58,7 +61,7 @@ export const FormCreateItem = () => {
<InputNumber />
</Form.Item>
<Form.Item label="Purchase Date" name="purchaseDate">
<Input />
<DatePicker format={dateFormat} />
</Form.Item>
<Form.Item label="Description" name="description">
<TextArea rows={4} />

204
src/components/form/formUpdateItem.jsx
View File

@@ -3,113 +3,125 @@ import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
import axios from "axios";
import { getRooms } from "../../api/room";
import { getItem } from "../../api/item";
import moment from 'moment';
import moment from "moment";
const { Option } = Select;
function formatItem(itemObj) {
const {_id,brand,model,room,price,purchaseDate,description,categories,createdAt,updatedAt,__v,link} = itemObj
const formattedPurchaseDate = typeof purchaseDate === 'string' ? new Date(purchaseDate) : purchaseDate;
const {
_id,
brand,
model,
room,
price,
purchaseDate,
description,
categories,
createdAt,
updatedAt,
__v,
link,
} = itemObj;
const formattedPurchaseDate =
typeof purchaseDate === "string" ? new Date(purchaseDate) : purchaseDate;
return {
_id,
brand,
model,
room,
price,
purchaseDate: formattedPurchaseDate,
description,
categories,
createdAt,
updatedAt,
__v,
link
};
return {
_id,
brand,
model,
room,
price,
purchaseDate: formattedPurchaseDate,
description,
categories,
createdAt,
updatedAt,
__v,
link,
};
}
export const FormUpdateItem = ({ itemId }) => {
const [form] = Form.useForm();
const [rooms, setRooms] = useState([]);
const [item, setItem] = useState(null)
export const FormUpdateItem = ({ itemId, onClose }) => {
const [form] = Form.useForm();
const [rooms, setRooms] = useState([]);
const [item, setItem] = useState(null);
useEffect(() => {
const fetchData = async () => {
const roomsResponse = await getRooms();
setRooms(roomsResponse);
useEffect(() => {
const fetchData = async () => {
const roomsResponse = await getRooms();
setRooms(roomsResponse);
const itemResponse = await getItem(itemId);
console.log(itemResponse)
setItem(formatItem(itemResponse));
};
fetchData();
}, [itemId]);
useEffect(() => {
if (item) {
form.setFieldsValue({
...item,
purchaseDate: item.purchaseDate ? moment(item.purchaseDate) : null,
});
}
}, [item, form]);
const onFinish = async (values) => {
try {
const response = await axios.put(
`${import.meta.env.VITE_API_URL}/item/${item._id}`,
values,
);
console.log(response.data);
} catch (error) {
console.error(error);
}
const itemResponse = await getItem(itemId);
console.log(itemResponse);
setItem(formatItem(itemResponse));
};
const dateFormat = 'YYYY-MM-DD';
return (
<Form
form={form}
onFinish={onFinish}
initialValues={item} // Initialise le formulaire avec les valeurs de l'<EFBFBD>l<EFBFBD>ment
>
<h1>Update 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">
{console.log(rooms)}
{
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">
<DatePicker
dateFormat={dateFormat}
/>
</Form.Item>
<Form.Item label="Description" name="description">
<Input.TextArea rows={4} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
fetchData();
}, [itemId]);
useEffect(() => {
if (item) {
form.setFieldsValue({
...item,
purchaseDate: item.purchaseDate ? moment(item.purchaseDate) : null,
});
}
}, [item, form]);
const onFinish = async (values) => {
try {
const response = await axios.put(
`${import.meta.env.VITE_API_URL}/item/${item._id}`,
values,
);
console.log(response.data);
// Fermer la fenêtre modale après soumission réussie
onClose();
} catch (error) {
console.error(error);
}
};
const dateFormat = "YYYY-MM-DD";
return (
<Form
form={form}
onFinish={onFinish}
initialValues={item} // Initialise le formulaire avec les valeurs de l'élément
>
<h1>Update 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">
{console.log(rooms)}
{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">
<DatePicker dateFormat={dateFormat} />
</Form.Item>
<Form.Item label="Description" name="description">
<Input.TextArea rows={4} />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default FormUpdateItem;