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