Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

corrected filter

Browse Source
This commit is contained in:
Laura Dolibois
2025-05-31 18:37:58 +02:00
parent 99202be626
commit 0779375e1a
1 changed files with 34 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
01-frontend/src/pages/Home.tsx
View File

@@ -50,7 +50,7 @@ export default function Home() {
price: 30,
stock: 0,
category: "TechnicalComponents",
rating: 4.8,
rating: 1.8,
discount: 15,
},
{
@@ -60,7 +60,7 @@ export default function Home() {
price: 30,
stock: 300,
category: "TechnicalComponents",
rating: 4.8,
rating: 2.2,
discount: 15,
},
{
@@ -70,7 +70,7 @@ export default function Home() {
price: 30,
stock: 300,
category: "TechnicalComponents",
rating: 4.8,
rating: 3.8,
discount: 15,
},
{
@@ -90,7 +90,7 @@ export default function Home() {
price: 30,
stock: 300,
category: "TechnicalComponents",
rating: 4.8,
rating: 3.4,
discount: 15,
},
{
@@ -100,7 +100,7 @@ export default function Home() {
price: 30,
stock: 300,
category: "TechnicalComponents",
rating: 4.8,
rating: 2.9,
discount: 15,
},
{
@@ -110,7 +110,7 @@ export default function Home() {
price: 30,
stock: 300,
category: "TechnicalComponents",
rating: 4.8,
rating: 4.4,
discount: 15,
},
{
@@ -120,7 +120,7 @@ export default function Home() {
price: 30,
stock: 300,
category: "TechnicalComponents",
rating: 4.8,
rating: 4.0,
discount: 15,
},
{
@@ -130,7 +130,7 @@ export default function Home() {
price: 50,
stock: 300,
category: "Other",
rating: 4.8,
rating: 1.0,
discount: 0,
},
// Weitere Items hinzufügen
@@ -184,34 +184,36 @@ export default function Home() {
setCurrentPage(page);
};
const filteredItems = items
.filter(item => {
const discountedPrice = item.price * (1 - item.discount / 100);
return discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1];
})
.filter(item => {
if (!selectedCategory) return true;
return item.category === selectedCategory;
})
.filter(item => {
if (!selectedRating) return true;
return Math.round(item.rating) >= Number(selectedRating);
});
const filteredCount = filteredItems.length;
// Aktualisiere die Anzahl der Karten bei Größenänderung
useEffect(() => {
const updateItems = () => {
const newItemsPerPage = calculateItemsPerPage();
setItemsPerPage(newItemsPerPage);
const startIndex = (currentPage - 1) * newItemsPerPage;
const filtered = items
.filter(item => {
const discountedPrice = item.price * (1 - item.discount / 100);
return discountedPrice >= priceRange[0] && discountedPrice <= priceRange[1];
})
.filter(item => {
if (!selectedCategory) return true;
return item.category === selectedCategory;
})
.filter(item => {
if (!selectedRating) return true;
return Math.floor(item.rating) === Number(selectedRating);
});
setVisibleItems(filtered.slice(startIndex, startIndex + newItemsPerPage));
setVisibleItems(filteredItems.slice(startIndex, startIndex + newItemsPerPage));
};
updateItems(); // Initialer Aufruf
window.addEventListener("resize", updateItems); // Event-Listener hinzufügen
return () => window.removeEventListener("resize", updateItems); // Event-Listener entfernen
}, [currentPage]);
updateItems();
window.addEventListener("resize", updateItems);
return () => window.removeEventListener("resize", updateItems);
}, [currentPage, filteredItems]);
// Dynamische Berechnung der Anzahl der Items pro Seite basierend auf der Fensterbreite
const calculateItemsPerPage = () => {
@@ -255,15 +257,14 @@ export default function Home() {
</Box>
<Pagination
count={Math.ceil(items.length / itemsPerPage)} // Gesamtanzahl der Seiten
page={currentPage} // Aktuelle Seite
onChange={handlePageChange} // Seitenwechsel-Handler
count={Math.ceil(filteredCount / itemsPerPage)}
page={currentPage}
onChange={handlePageChange}
variant="outlined"
shape="rounded"
className="pagination" // CSS-Klasse für die Pagination
className="pagination"
/>
</div>
</div>
);
}