test tableau

This commit is contained in:
Victor 2024-03-27 16:33:24 +01:00
commit bcac0d2a4b
8 changed files with 166 additions and 31 deletions

13
src/App copy.jsx Normal file
View 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;

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

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>,

View File

@ -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>
);
};

View File

@ -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>
);
};