gestion accueil

2025-02-02 10:22:18 +01:00
parent 57f618a0e4
commit f70d21ae71
6 changed files with 240 additions and 5 deletions
@@ -109,6 +109,35 @@ function Dashboard() {
                </Typography>
              </CardContent>
            </Card>
+
+            <Card
+              onClick={() => navigate("/admin/Gestion-Page-Accueil")}
+              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" }}>
+                  Gestion Page d'Accueil
+                </Typography>
+              </CardContent>
+            </Card>
+            
          </Grid>
        </Grid>
      </Box>
@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { updateHomePageACF } from "../../wordpress";
+import { getToken } from "../../auth";
+import {
+  Box,
+  Typography,
+  TextField,
+  Button,
+  Container,
+  Paper,
+} from "@mui/material";
+
+const GestionPageAccueil = () => {
+  const navigate = useNavigate();
+  const [heroTitle, setHeroTitle] = useState("");
+  const [heroText, setHeroText] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // ✅ Vérification de l'authentification (Redirection si non connecté)
+  useEffect(() => {
+    if (!getToken()) {
+      navigate("/admin/login");
+    }
+  }, [navigate]);
+
+  // ✅ Chargement des données ACF depuis WordPress
+  useEffect(() => {
+    const fetchPageData = async () => {
+      try {
+        const response = await fetch(
+          "https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/13?_fields=acf",
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error("Erreur de chargement des données");
+        }
+
+        const data = await response.json();
+        setHeroTitle(data.acf?.hero_title || "");
+        setHeroText(data.acf?.hero_text || "");
+        setLoading(false);
+      } catch (error) {
+        console.error("❌ Erreur chargement ACF :", error);
+        setError("Impossible de charger les données.");
+        setLoading(false);
+      }
+    };
+
+    fetchPageData();
+  }, []);
+
+  // ✅ Mise à jour des champs ACF
+  const handleSave = async () => {
+    try {
+        const newData = {
+            hero_title: heroTitle,
+            hero_text: heroText,
+        };
+
+        console.log("📢 Données envoyées pour mise à jour ACF :", newData);
+        const updatedData = await updateHomePageACF(13, newData);
+
+        alert("✅ Mise à jour réussie !");
+        console.log("🔍 Données mises à jour reçues :", updatedData);
+
+        window.location.reload(); // 🔄 Rafraîchissement pour voir les changements
+    } catch (error) {
+        console.error("❌ Erreur mise à jour :", error);
+        alert("⚠ Impossible de mettre à jour les champs ACF.");
+    }
+};
+
+  return (
+    <Container maxWidth="md" sx={{ mt: 5 }}>
+      <Paper elevation={3} sx={{ padding: 4, borderRadius: 3 }}>
+        {/* ✅ En-tête */}
+        <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3 }}>
+          Gestion de la Page d'Accueil
+        </Typography>
+
+        {/* ✅ Affichage du statut de chargement */}
+        {loading ? (
+          <Typography textAlign="center">Chargement des données...</Typography>
+        ) : error ? (
+          <Typography textAlign="center" color="error">
+            {error}
+          </Typography>
+        ) : (
+          <>
+            {/* ✅ Formulaire de modification */}
+            <TextField
+              label="Titre Héros"
+              fullWidth
+              variant="outlined"
+              value={heroTitle}
+              onChange={(e) => setHeroTitle(e.target.value)}
+              sx={{ mb: 2 }}
+            />
+
+            <TextField
+              label="Texte Héros"
+              fullWidth
+              variant="outlined"
+              value={heroText}
+              onChange={(e) => setHeroText(e.target.value)}
+              sx={{ mb: 2 }}
+            />
+
+            {/* ✅ Bouton d'enregistrement */}
+            <Button
+              variant="contained"
+              color="primary"
+              fullWidth
+              sx={{ mt: 3 }}
+              onClick={handleSave}
+            >
+              Enregistrer les modifications
+            </Button>
+
+            {/* ✅ Bouton retour au Dashboard */}
+            <Button
+              variant="outlined"
+              color="secondary"
+              fullWidth
+              sx={{ mt: 2 }}
+              onClick={() => navigate("/admin/dashboard")}
+            >
+              Retour au Dashboard
+            </Button>
+          </>
+        )}
+      </Paper>
+    </Container>
+  );
+};
+
+export default GestionPageAccueil;
@@ -21,14 +21,15 @@ const Home = () => {
        setIsLoading(true);
        setError(null);

-        const response = await api.get("wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description");
+        // 🔥 Ajout d'un timestamp pour éviter la mise en cache
+        const response = await api.get(`wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description&_=${new Date().getTime()}`);
        const pageContent = response.data;
        setPageData(pageContent);

-        // Vérification et récupération de l'image Hero depuis l'API media de WordPress
+        // Récupération de l'image Hero
        const heroImageId = pageContent.acf?.img_hero;
        if (heroImageId) {
-          const mediaResponse = await api.get(`wp/v2/media/${heroImageId}`);
+          const mediaResponse = await api.get(`wp/v2/media/${heroImageId}?_=${new Date().getTime()}`);
          setHeroImage(mediaResponse.data.source_url);
        } else {
          setHeroImage(null);
@@ -42,7 +43,7 @@ const Home = () => {
    };

    fetchPageData();
-  }, []);
+}, []);

  if (isLoading) {
    return (