Compare commits

...

2 Commits

Author SHA1 Message Date
Victor
bcac0d2a4b test tableau 2024-03-27 16:33:24 +01:00
Victor
f89776a7df vic commit 2024-03-27 15:52:15 +01:00
5 changed files with 106 additions and 21 deletions

View File

@ -2,7 +2,7 @@ import React from 'react';
// Composant Image atomique
const Image = ({ src, alt }) => {
return <img src={src} alt={alt} />;
return <img src={src} alt={alt} style={{ display: 'block', margin: 'auto' }} />;
};
// Composant Description atomique
@ -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

@ -0,0 +1,26 @@
import React from 'react';
import { Col, Row } from 'antd';
import { ItemBox } from './ItemBox';
const GridCell = () => (
<ItemBox
imageUrl="https://www.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-600nw-1037719192.jpg"
brandName="GlubGlub GabGalab"
price={666}
modelName="Satanus"
purchaseDate="-6 avant Marcel PAGNOL"
/>
);
export const ItemGrid = () => (
<>
<Row gutter={16}>
<Col span={6}><GridCell /></Col>
<Col span={6}><GridCell /></Col>
<Col span={6}><GridCell /></Col>
<Col span={6}><GridCell /></Col>
</Row>
</>
);
export default ItemGrid;

View File

@ -0,0 +1,69 @@
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
// Fonction pour diviser le tableau d'items en rangées
const chunkArray = (arr, size) => {
const chunkedArr = [];
for (let i = 0; i < arr.length; i += size) {
chunkedArr.push(arr.slice(i, i + size));
}
return chunkedArr;
};
// Composant d'affichage de la page
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);
};
const handlePrevPage = () => {
setCurrentPage(prevPage => prevPage - 1);
};
// Divise les items en rangées
const chunkedItems = chunkArray(items, itemsPerRow);
// Calcule l'index de la première et de la dernière rangée à afficher sur la page courante
const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
const endIndex = startIndex + (itemsPerPage / itemsPerRow);
// Sélectionne les rangées à afficher sur la page courante
const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);
return (
<div>
{rowsToDisplay.map((row, index) => (
<div key={index} className="item-row">
{row.map(item => (
<ItemBox key={item._id} {...item} />
))}
</div>
))}
<div className="pagination">
<button onClick={handlePrevPage} disabled={currentPage === 1}>Previous</button>
<span>Page {currentPage}</span>
<button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Next</button>
</div>
</div>
);
};

View File

@ -1,31 +1,21 @@
import React from "react";
import { useAuth } from "../hooks";
import { ItemBox } from "../components/item/item";
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 (
<div>
<h1>Home page</h1>
{user && <h2>Hello {user.user.username}</h2>}
<FormCreateRoom></FormCreateRoom>
<FormCreateItem></FormCreateItem>
{user && <h2>Hello {user.user.username}</h2>}
<DatePicker></DatePicker>
<ItemBox
imageUrl={
//"https://static.wikia.nocookie.net/battle-fighters-the-ultimate-fighters/images/4/4b/Globglogabgalab.png/revision/latest?cb=20180829050629"}
"https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/578bae69-d8ef-497b-a717-98873dd69814/dc9u91c-fd73ab67-bc8e-49e4-92f0-7367d361f2fd.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU3OGJhZTY5LWQ4ZWYtNDk3Yi1hNzE3LTk4ODczZGQ2OTgxNFwvZGM5dTkxYy1mZDczYWI2Ny1iYzhlLTQ5ZTQtOTJmMC03MzY3ZDM2MWYyZmQucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.NY_H3uLiv4l0MgogmSxt30irVbaMH5JXR62q898y6LI"
}
brandName={"GlubGlub GabGalab"}
price={666}
modelName={"Satanus"}
purchaseDate={"-6 avant Marcel PAGNOL"}
/>
</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>
);
};