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

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

@ -1,15 +1,17 @@
import React from "react"; 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 { useEffect, useState } from "react";
import axios from "axios"; import axios from "axios";
import { API_BASE_URL } from "../../config"; import { API_BASE_URL } from "../../config";
import { useAuth } from "../../AuthContext"; import { useAuth } from "../../AuthContext";
function ObjectManagement() { function ObjectManagement() {
const {user} = useAuth(); const {user} = useAuth();
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
const [activeFilter, setActiveFilter] = useState(""); const [activeFilter, setActiveFilter] = useState("");
const [objects, setObjects] = useState([]); const [objects, setObjects] = useState([]);
const [nbAffObject,setnbAffObject] = useState(6); const [nbAffObject, setnbAffObject] = useState(6);
const filteredDATA = objects.filter((node) => { const filteredDATA = objects.filter((node) => {
const matchesSearchQuery = const matchesSearchQuery =
searchQuery === "" || searchQuery === "" ||
@ -30,6 +32,7 @@ function ObjectManagement() {
setObjects(response.data); setObjects(response.data);
}); });
}, []); }, []);
return ( return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50"> <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"> <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)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
</div> </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 <button
onClick={() => setActiveFilter("")} onClick={() => setActiveFilter("")}
className={`px-4 py-2 rounded-lg ${ className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "" activeFilter === ""
? "bg-indigo-600 text-white" ? "bg-indigo-600 text-white"
: "bg-white text-gray-600" : "bg-white text-gray-600"
@ -65,7 +70,7 @@ function ObjectManagement() {
</button> </button>
<button <button
onClick={() => setActiveFilter("Station")} onClick={() => setActiveFilter("Station")}
className={`px-4 py-2 rounded-lg ${ className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "Station" activeFilter === "Station"
? "bg-indigo-600 text-white" ? "bg-indigo-600 text-white"
: "bg-white text-gray-600" : "bg-white text-gray-600"
@ -75,7 +80,7 @@ function ObjectManagement() {
</button> </button>
<button <button
onClick={() => setActiveFilter("Capteur")} onClick={() => setActiveFilter("Capteur")}
className={`px-4 py-2 rounded-lg ${ className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "Capteur" activeFilter === "Capteur"
? "bg-indigo-600 text-white" ? "bg-indigo-600 text-white"
: "bg-white text-gray-600" : "bg-white text-gray-600"
@ -85,7 +90,7 @@ function ObjectManagement() {
</button> </button>
<button <button
onClick={() => setActiveFilter("Active")} onClick={() => setActiveFilter("Active")}
className={`px-4 py-2 rounded-lg ${ className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "Active" activeFilter === "Active"
? "bg-indigo-600 text-white" ? "bg-indigo-600 text-white"
: "bg-white text-gray-600" : "bg-white text-gray-600"
@ -95,7 +100,7 @@ function ObjectManagement() {
</button> </button>
<button <button
onClick={() => setActiveFilter("Inactive")} onClick={() => setActiveFilter("Inactive")}
className={`px-4 py-2 rounded-lg ${ className={`px-4 py-2 rounded-lg mb-2 ${
activeFilter === "Inactive" activeFilter === "Inactive"
? "bg-indigo-600 text-white" ? "bg-indigo-600 text-white"
: "bg-white text-gray-600" : "bg-white text-gray-600"
@ -105,14 +110,16 @@ function ObjectManagement() {
</button> </button>
</div> </div>
</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 ? ( {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 <div
key={object.id} 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" ? ( {object.status === "active" ? (
<div className="relative w-full"> <div className="relative w-full">
@ -144,14 +151,21 @@ function ObjectManagement() {
)) ))
)} )}
</div> </div>
{(nbAffObject<filteredDATA.length)&&(
{(nbAffObject < filteredDATA.length) && (
<div className="flex items-center flex-col mt-6"> <div className="flex items-center flex-col mt-6">
<button onClick={()=>{setnbAffObject((prev)=>prev+6 )}}><Plus size={40}/></button> <button
<label>Voir plus</label> 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> </div>
</div> </div>
); );
} }
export default ObjectManagement; export default ObjectManagement;