test tableau
This commit is contained in:
commit
bcac0d2a4b
13
src/App copy.jsx
Normal file
13
src/App copy.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
|
||||
import { Authenticated } from "./components";
|
||||
|
||||
import { Router } from "./router";
|
||||
|
||||
const App = () => (
|
||||
<Authenticated>
|
||||
<Router />
|
||||
</Authenticated>
|
||||
);
|
||||
|
||||
export default App;
|
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;
|
@ -25,13 +25,13 @@ const Characteristic = ({ label, value }) => {
|
||||
};
|
||||
|
||||
// Composant Détails du Produit (combinaison atomique)
|
||||
export const ItemBox = ({ imageUrl, modelName, brandName, purchaseDate, price, onEdit }) => {
|
||||
export const ItemBox = ({ imageUrl, model, brand, purchaseDate, price, onEdit }) => {
|
||||
return (
|
||||
<div className="product-details">
|
||||
<Image src={imageUrl} alt="Product" />
|
||||
<Description title="Product Information">
|
||||
<Characteristic label="Model" value={modelName} />
|
||||
<Characteristic label="Brand" value={brandName} />
|
||||
<Characteristic label="Model" value={model} />
|
||||
<Characteristic label="Brand" value={brand} />
|
||||
<Characteristic label="Purchase Date" value={purchaseDate} />
|
||||
<Characteristic label="Price" value={price} />
|
||||
</Description>
|
||||
@ -39,5 +39,3 @@ export const ItemBox = ({ imageUrl, modelName, brandName, purchaseDate, price, o
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ItemBox } from './ItemBox'; // Assurez-vous que le chemin d'importation soit correct
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
|
||||
import { ItemBox } from './ItemBox';
|
||||
|
||||
const itemsPerPage = 4; // Nombre total d'items par page
|
||||
const itemsPerRow = 2; // Nombre d'items par rangée
|
||||
@ -14,9 +15,25 @@ const chunkArray = (arr, size) => {
|
||||
};
|
||||
|
||||
// Composant d'affichage de la page
|
||||
export const ItemPage = ({ items }) => {
|
||||
export const ItemPage = () => {
|
||||
const [items, setItems] = useState([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchItems = async () => {
|
||||
try {
|
||||
const response = await axios.get(
|
||||
`${import.meta.env.VITE_API_URL}/item`,
|
||||
);
|
||||
setItems(response.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchItems();
|
||||
}, []);
|
||||
|
||||
const handleNextPage = () => {
|
||||
setCurrentPage(prevPage => prevPage + 1);
|
||||
};
|
||||
@ -38,7 +55,7 @@ export const ItemPage = ({ items }) => {
|
||||
{rowsToDisplay.map((row, index) => (
|
||||
<div key={index} className="item-row">
|
||||
{row.map(item => (
|
||||
<ItemBox key={item.id} {...item} />
|
||||
<ItemBox key={item._id} {...item} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
@ -50,4 +67,3 @@ export const ItemPage = ({ items }) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -5,7 +5,7 @@ import "./assets/styles/index.css";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { CookiesProvider } from "react-cookie";
|
||||
import setupAxios from "./setupAxios";
|
||||
import "bootstrap";
|
||||
import { Layout } from "antd";
|
||||
|
||||
setupAxios();
|
||||
|
||||
@ -13,7 +13,9 @@ ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<CookiesProvider>
|
||||
<App />
|
||||
<Layout>
|
||||
<App />
|
||||
</Layout>
|
||||
</CookiesProvider>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
|
@ -1,9 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
import { useAuth } from "../hooks";
|
||||
import { DatePicker } from "antd";
|
||||
import { FormCreateItem } from "../components/form/formCreateItem";
|
||||
import { FormCreateRoom } from "../components/form/formCreateRoom";
|
||||
import { ItemPage } from "../components/item/ItemPage";
|
||||
|
||||
|
||||
export const Home = () => {
|
||||
const { user } = useAuth();
|
||||
return (
|
||||
@ -11,23 +13,9 @@ export const Home = () => {
|
||||
|
||||
<h1>Home page</h1>
|
||||
{user && <h2>Hello {user.user.username}</h2>}
|
||||
<ItemPage items={
|
||||
[
|
||||
{
|
||||
brandName:"GlubGlub GabGalab"
|
||||
},{
|
||||
brandName:"GlubGlub GabGalab2"
|
||||
},{
|
||||
brandName:"GlubGlub GabGalab"
|
||||
},{
|
||||
brandName:"GlubGlub GabGalab2"
|
||||
},{
|
||||
brandName:"GlubGlub GabGalab"
|
||||
},{
|
||||
brandName:"GlubGlub GabGalab2"
|
||||
}
|
||||
]
|
||||
}></ItemPage>
|
||||
|
||||
<FormCreateRoom></FormCreateRoom>
|
||||
<FormCreateItem></FormCreateItem>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -1,13 +1,15 @@
|
||||
import React from "react";
|
||||
|
||||
import { useAuth } from "../hooks";
|
||||
import { ItemPage } from "../components/item/ItemPage";
|
||||
|
||||
export const Test = () => {
|
||||
const { user } = useAuth();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Vive la macronie à bat montjoiuie saint dennis</h1>
|
||||
<h1>Vive la macronie à bat montjoie saint dennis</h1>
|
||||
<ItemPage></ItemPage>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user