cm862sz/zkt26
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout du responsive sur les filtres

Browse Source
This commit is contained in:
Mathis 2025-04-12 00:27:04 +02:00
parent 41e8ed63dc
commit 4a43437b47
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
Front-end/src/pages/Gestion/ObjectManagement.jsx
View File

@ -1,15 +1,17 @@
import React from "react";
import { Search, ArrowRight, RadioTower,Plus } from "lucide-react";
import { Search, ArrowRight, RadioTower, Plus } from "lucide-react";
import { useEffect, useState } from "react";
import axios from "axios";
import { API_BASE_URL } from "../../config";
import { useAuth } from "../../AuthContext";
function ObjectManagement() {
const {user} = useAuth();
const [searchQuery, setSearchQuery] = useState("");
const [activeFilter, setActiveFilter] = useState("");
const [objects, setObjects] = useState([]);
const [nbAffObject,setnbAffObject] = useState(6);
const [nbAffObject, setnbAffObject] = useState(6);
const filteredDATA = objects.filter((node) => {
const matchesSearchQuery =
searchQuery === "" ||
@ -30,6 +32,7 @@ function ObjectManagement() {
setObjects(response.data);
});
}, []);
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
@ -52,10 +55,12 @@ function ObjectManagement() {
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<div className="flex gap-4 mt-4 justify-center">
{/* Filtres responsifs - utilisation de flex-wrap et responsive spacing */}
<div className="flex flex-wrap gap-2 mt-4 justify-center">
<button
onClick={() => setActiveFilter("")}
className={`px-4 py-2 rounded-lg ${
className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === ""
? "bg-indigo-600 text-white"
: "bg-white text-gray-600"
@ -65,7 +70,7 @@ function ObjectManagement() {
</button>
<button
onClick={() => setActiveFilter("Station")}
className={`px-4 py-2 rounded-lg ${
className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "Station"
? "bg-indigo-600 text-white"
: "bg-white text-gray-600"
@ -75,7 +80,7 @@ function ObjectManagement() {
</button>
<button
onClick={() => setActiveFilter("Capteur")}
className={`px-4 py-2 rounded-lg ${
className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "Capteur"
? "bg-indigo-600 text-white"
: "bg-white text-gray-600"
@ -85,7 +90,7 @@ function ObjectManagement() {
</button>
<button
onClick={() => setActiveFilter("Active")}
className={`px-4 py-2 rounded-lg ${
className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "Active"
? "bg-indigo-600 text-white"
: "bg-white text-gray-600"
@ -95,7 +100,7 @@ function ObjectManagement() {
</button>
<button
onClick={() => setActiveFilter("Inactive")}
className={`px-4 py-2 rounded-lg ${
className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "Inactive"
? "bg-indigo-600 text-white"
: "bg-white text-gray-600"
@ -105,14 +110,16 @@ function ObjectManagement() {
</button>
</div>
</div>
<div className="grid md:grid-cols-3 gap-8">
{/* Grille responsive pour les objets */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
{filteredDATA.length === 0 ? (
<p>Aucun objet trouvé</p>
<p className="text-center col-span-full">Aucun objet trouvé</p>
) : (
filteredDATA.slice(0,nbAffObject).map((object) => (
filteredDATA.slice(0, nbAffObject).map((object) => (
<div
key={object.id}
className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow "
className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"
>
{object.status === "active" ? (
<div className="relative w-full">
@ -144,14 +151,21 @@ function ObjectManagement() {
))
)}
</div>
{(nbAffObject<filteredDATA.length)&&(
{(nbAffObject < filteredDATA.length) && (
<div className="flex items-center flex-col mt-6">
<button onClick={()=>{setnbAffObject((prev)=>prev+6 )}}><Plus size={40}/></button>
<label>Voir plus</label>
<button
onClick={() => {setnbAffObject((prev) => prev + 6)}}
className="hover:bg-indigo-50 p-2 rounded-full transition-colors"
>
<Plus size={40} className="text-indigo-600" />
</button>
<label className="text-indigo-600 font-medium">Voir plus</label>
</div>
)}
</div>
</div>
);
}
export default ObjectManagement;
export default ObjectManagement;