Gestion bureau d'études

This commit is contained in:
sebvtl728 2025-02-18 21:56:18 +01:00
parent 94c215a253
commit f0e31c4639
5 changed files with 256 additions and 3 deletions

View File

@ -0,0 +1,217 @@
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { getToken } from "../auth";
import { getPageById, updatePageACF } from "../wordpress";
import {
Box,
Container,
Typography,
TextField,
Button,
Paper,
Grid,
} from "@mui/material";
import { Add, Delete, ArrowBack, Save } from "@mui/icons-material";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
const ETUDE_PAGE_ID = 272; // ID de la page Bureau d'Étude
function EditPageEtude() {
const navigate = useNavigate();
const [acfFields, setAcfFields] = useState({});
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [successMessage, setSuccessMessage] = useState("");
// Vérification de l'authentification
useEffect(() => {
if (!getToken()) {
navigate("/admin/login");
}
}, [navigate]);
// Récupération des champs ACF
useEffect(() => {
const fetchPage = async () => {
try {
const pageData = await getPageById(ETUDE_PAGE_ID);
if (!pageData || !pageData.acf) {
setError("❌ Impossible de charger les champs ACF.");
setLoading(false);
return;
}
setAcfFields(pageData.acf);
} catch (error) {
setError("⚠ Impossible de récupérer les champs ACF.");
} finally {
setLoading(false);
}
};
fetchPage();
}, []);
// Mise à jour des champs ACF
const handleUpdateACF = async (e) => {
e.preventDefault();
try {
await updatePageACF(ETUDE_PAGE_ID, acfFields);
setSuccessMessage("✅ Modifications enregistrées !");
setTimeout(() => navigate("/admin/dashboard"), 2000);
} catch (error) {
setError("⚠ Impossible de mettre à jour les champs ACF.");
}
};
// Gestion des champs ACF
const handleFieldChange = (field, value) => {
setAcfFields((prevFields) => ({
...prevFields,
[field]: value,
}));
};
// Gestion des répéteurs
const handleRepeaterChange = (field, index, subField, value) => {
const updatedList = [...acfFields[field]];
updatedList[index][subField] = value;
setAcfFields({ ...acfFields, [field]: updatedList });
};
const addRepeaterItem = (field, template) => {
setAcfFields({
...acfFields,
[field]: [...(acfFields[field] || []), template],
});
};
const deleteRepeaterItem = (field, index) => {
const updatedList = acfFields[field].filter((_, i) => i !== index);
setAcfFields({ ...acfFields, [field]: updatedList });
};
if (loading) return <Typography>Chargement...</Typography>;
return (
<Box
sx={{
minHeight: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f5f5f5",
padding: 4,
}}
>
<Container maxWidth="md">
<Paper elevation={6} sx={{ padding: 4, borderRadius: 3 }}>
<Button
startIcon={<ArrowBack />}
variant="outlined"
color="secondary"
onClick={() => navigate("/admin/dashboard")}
sx={{ mb: 2 }}
>
Retour à la gestion des pages
</Button>
<Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3 }}>
Modifier la Page Bureau d'Étude
</Typography>
{error && <Typography color="error" sx={{ mb: 2 }}>{error}</Typography>}
{successMessage && <Typography sx={{ color: "green", textAlign: "center", mb: 2 }}>{successMessage}</Typography>}
<form onSubmit={handleUpdateACF}>
<Grid container spacing={2}>
{/* ✅ Introduction */}
<Grid item xs={12}>
<Typography variant="h6" sx={{ fontWeight: "bold" }}>Introduction</Typography>
<ReactQuill
theme="snow"
value={acfFields.introduction || ""}
onChange={(value) => handleFieldChange("introduction", value)}
/>
</Grid>
{/* ✅ Méthodologie */}
<Grid item xs={12}>
<Typography variant="h6" sx={{ fontWeight: "bold" }}>Méthodologie</Typography>
<TextField
fullWidth
variant="outlined"
value={acfFields.methodologie || ""}
onChange={(e) => handleFieldChange("methodologie", e.target.value)}
/>
</Grid>
{/* ✅ Liste des compétences */}
<Grid item xs={12}>
<Typography variant="h6" sx={{ fontWeight: "bold" }}>Liste des compétences</Typography>
{acfFields.liste_des_competences?.map((item, index) => (
<Paper key={index} sx={{ padding: 2, mb: 2 }}>
<TextField
label="Titre"
fullWidth
value={item.comp_titre}
onChange={(e) => handleRepeaterChange("liste_des_competences", index, "comp_titre", e.target.value)}
sx={{ mb: 1 }}
/>
<TextField
label="Description"
fullWidth
multiline
rows={3}
value={item.comp_description}
onChange={(e) => handleRepeaterChange("liste_des_competences", index, "comp_description", e.target.value)}
/>
<Button startIcon={<Delete />} variant="outlined" color="error" onClick={() => deleteRepeaterItem("liste_des_competences", index)}>
Supprimer
</Button>
</Paper>
))}
<Button startIcon={<Add />} variant="contained" color="primary" onClick={() => addRepeaterItem("liste_des_competences", { comp_titre: "", comp_description: "" })}>
Ajouter une compétence
</Button>
</Grid>
{/* ✅ Expertises spécifiques */}
<Grid item xs={12}>
<Typography variant="h6" sx={{ fontWeight: "bold" }}>Expertises spécifiques</Typography>
{acfFields.expertises_specifiques?.map((item, index) => (
<Paper key={index} sx={{ padding: 2, mb: 2 }}>
<TextField
label="Nom"
fullWidth
value={item.expertise_nom}
onChange={(e) => handleRepeaterChange("expertises_specifiques", index, "expertise_nom", e.target.value)}
sx={{ mb: 1 }}
/>
<TextField
label="Détails"
fullWidth
multiline
rows={2}
value={item.expertise_details}
onChange={(e) => handleRepeaterChange("expertises_specifiques", index, "expertise_details", e.target.value)}
/>
<Button startIcon={<Delete />} variant="outlined" color="error" onClick={() => deleteRepeaterItem("expertises_specifiques", index)}>
Supprimer
</Button>
</Paper>
))}
</Grid>
</Grid>
<Button type="submit" variant="contained" color="primary" fullWidth startIcon={<Save />} sx={{ mt: 3 }}>
Enregistrer les modifications
</Button>
</form>
</Paper>
</Container>
</Box>
);
}
export default EditPageEtude;

View File

@ -17,6 +17,7 @@ import {
import { Edit, ArrowBack, Add } from "@mui/icons-material";
const HOME_PAGE_ID = 13; // Remplace 13 par l'ID réel de la page d'accueil
const ETUDE_PAGE_ID = 272; // Remplace 13 par l'ID réel de la page d'accueil
function GestionPagesACF() {
const navigate = useNavigate();
@ -50,7 +51,7 @@ function GestionPagesACF() {
// Exclure la page d'accueil
const filteredPages = response.filter(
(page) => page.id !== HOME_PAGE_ID
(page) => page.id !== HOME_PAGE_ID && page.id !== ETUDE_PAGE_ID,
);
setPages(filteredPages);
} catch (error) {

View File

@ -60,8 +60,9 @@ const BureauEtudes = () => {
}}>
Notre Bureau d'Études
</Typography>
<Typography variant="body2" sx={{ maxWidth: "900px", mx: "auto" }}>
{pageData.introduction}
<Typography variant="body2" sx={{ maxWidth: "900px", mx: "auto" }}
dangerouslySetInnerHTML={{ __html: pageData.introduction }}>
</Typography>
</Box>
</Box>

View File

@ -173,6 +173,38 @@ function Dashboard() {
</CardContent>
</Card>
</Grid>
{/* ✅ Gérer les Pages ACF - Nouvelle carte */}
<Grid item xs={12} sm={6}>
<Card
onClick={() => navigate("/admin/bureau-etude-acf")}
sx={{
cursor: "pointer",
textAlign: "center",
padding: 2,
transition: "0.3s",
"&:hover": {
backgroundColor: "#0e467f",
color: "#ffffff",
transform: "scale(1.05)",
boxShadow: 8,
},
"&:hover svg": {
fill: "#ffffff",
},
}}
>
<CardContent>
<IconButton sx={{ fontSize: 40, color: "#0e467f" }}>
<ArticleIcon fontSize="inherit" />
</IconButton>
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
Gérer la page bureau d'étude
</Typography>
</CardContent>
</Card>
</Grid>
</Grid>
</Box>
</Box>

View File

@ -10,6 +10,7 @@ import GestionArticles from "./components/Pages/GestionArticles";
import EditPost from "./components/EditPost";
import GestionPageAccueil from "./components/Pages/GestionPageAccueil";
import GestionPagesACF from "./components/GestionPagesACF";
import GestionBureauEtudeACF from "./components/GestionBureauEtudeACF";
import EditPageACF from "./components/Pages/EditPageACF";
// Lazy loading des pages
@ -71,6 +72,7 @@ function YourApp() {
<Route path="/admin/gestion-page-accueil" element={<GestionPageAccueil />} />
<Route path="*" element={<NotFound />} />
<Route path="/admin/pages-acf" element={<GestionPagesACF />} />
<Route path="/admin/bureau-etude-acf" element={<GestionBureauEtudeACF />} />
<Route path="/admin/edit-page/:id" element={<EditPageACF />} />
</Routes>
<Footer />