gestion accueil MAJ

frontend/src/components/Pages/Dashboard.jsx

@@ -13,6 +13,7 @@ import {
 import LogoutIcon from "@mui/icons-material/Logout"; // Icône de déconnexion
 import ArticleIcon from "@mui/icons-material/Article";
 import DashboardIcon from "@mui/icons-material/Dashboard";
+import HomeIcon from "@mui/icons-material/Home"; // Icône pour la gestion page d'accueil
 
 function Dashboard() {
   const navigate = useNavigate();
@@ -51,10 +52,10 @@ function Dashboard() {
           borderRadius: 3,
           boxShadow: 6,
           textAlign: "center",
-          position: "relative", // Permet de positionner des éléments enfants
+          position: "relative",
         }}
       >
-        {/* Bouton de déconnexion placé en haut à gauche de la boîte blanche */}
+        {/* Bouton de déconnexion placé en haut à gauche */}
         <Button
           variant="contained"
           color="error"
@@ -69,9 +70,7 @@ function Dashboard() {
             fontSize: "0.875rem",
             padding: "6px 12px",
           }}
-        >
-          
-        </Button>
+        />
 
         {/* En-tête */}
         <Typography variant="h4" sx={{ fontWeight: "bold", mb: 4, mt: 4 }}>
@@ -81,7 +80,39 @@ function Dashboard() {
 
         {/* Cartes du Dashboard */}
         <Grid container spacing={3} justifyContent="center">
-          <Grid item xs={12} sm={6} md={4}>
+          {/* ✅ Gestion Page d'Accueil - Première carte */}
+          <Grid item xs={12} sm={6}>
+            <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" }}>
+                  <HomeIcon fontSize="inherit" />
+                </IconButton>
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                  Gestion Page d'Accueil
+                </Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+
+          {/* ✅ Gérer les Articles - Deuxième carte */}
+          <Grid item xs={12} sm={6}>
             <Card
               onClick={() => navigate("/admin/gestion-articles")}
               sx={{
@@ -109,35 +140,6 @@ 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>

frontend/src/components/Pages/GestionPageAccueil.jsx

@@ -1,144 +1,167 @@
 import React, { useState, useEffect } from "react";
+import { updateHomePageACF, uploadImage } from "../../wordpress"; 
 import { useNavigate } from "react-router-dom";
-import { updateHomePageACF } from "../../wordpress";
-import { getToken } from "../../auth";
-import {
-  Box,
-  Typography,
-  TextField,
-  Button,
-  Container,
-  Paper,
-} from "@mui/material";
+import { Box, Button, TextField, Typography, Snackbar, Alert, Paper, Card, CardMedia } from "@mui/material";
+import api from "../../api";
+
+const PAGE_ID = 13; // ID de la page d'accueil
 
 const GestionPageAccueil = () => {
-  const navigate = useNavigate();
     const [heroTitle, setHeroTitle] = useState("");
     const [heroText, setHeroText] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+    const [heroImage, setHeroImage] = useState(null);
+    const [heroImageId, setHeroImageId] = useState(null);
+    const [message, setMessage] = useState({ type: "", text: "" });
+    const navigate = useNavigate(); // 🔥 Gestion de la navigation
 
-  // ✅ Vérification de l'authentification (Redirection si non connecté)
-  useEffect(() => {
-    if (!getToken()) {
-      navigate("/admin/login");
-    }
-  }, [navigate]);
-
-  // ✅ Chargement des données ACF depuis WordPress
+    // ✅ Charger les données ACF existantes
     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",
-            },
-          }
-        );
+                const response = await api.get(`wp/v2/pages/${PAGE_ID}?_fields=acf`);
+                const acfData = response.data.acf;
                 
-        if (!response.ok) {
-          throw new Error("Erreur de chargement des données");
-        }
+                if (acfData) {
+                    setHeroTitle(acfData.hero_title || "");
+                    setHeroText(acfData.hero_text || "");
 
-        const data = await response.json();
-        setHeroTitle(data.acf?.hero_title || "");
-        setHeroText(data.acf?.hero_text || "");
-        setLoading(false);
+                    if (acfData.img_hero) {
+                        setHeroImageId(acfData.img_hero);
+                        const imageResponse = await api.get(`wp/v2/media/${acfData.img_hero}`);
+                        setHeroImage(imageResponse.data.source_url);
+                    }
+                }
             } catch (error) {
                 console.error("❌ Erreur chargement ACF :", error);
-        setError("Impossible de charger les données.");
-        setLoading(false);
+                setMessage({ type: "error", text: "Erreur lors du chargement des données." });
             }
         };
-
         fetchPageData();
     }, []);
 
-  // ✅ Mise à jour des champs ACF
+    // ✅ Sauvegarde des données ACF
     const handleSave = async () => {
         try {
-        const newData = {
+            const formData = { 
+                acf: { 
                     hero_title: heroTitle, 
                     hero_text: heroText,
+                    img_hero: heroImageId || null, // ✅ Mise à jour avec l'ID de l'image
+                } 
             };
             
-        console.log("📢 Données envoyées pour mise à jour ACF :", newData);
-        const updatedData = await updateHomePageACF(13, newData);
+            console.log("📢 Envoi des nouvelles données ACF :", formData);
+            await updateHomePageACF(PAGE_ID, formData);
 
-        alert("✅ Mise à jour réussie !");
-        console.log("🔍 Données mises à jour reçues :", updatedData);
+            setMessage({ type: "success", text: "✅ Mise à jour réussie !" });
 
-        window.location.reload(); // 🔄 Rafraîchissement pour voir les changements
+            // ✅ 🔥 Redirection vers le Dashboard après 1.5 sec
+            setTimeout(() => {
+                navigate("/admin/dashboard");
+            }, 1500);
         } catch (error) {
-        console.error("❌ Erreur mise à jour :", error);
-        alert("⚠ Impossible de mettre à jour les champs ACF.");
+            console.error("❌ Erreur mise à jour ACF :", error);
+            setMessage({ type: "error", text: "❌ Échec de la mise à jour. Vérifie les permissions WordPress." });
         }
-};
+    };
+
+    // ✅ Gestion de l'upload d'image
+    const handleImageUpload = async (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        try {
+            const imageId = await uploadImage(file);
+            setHeroImageId(imageId);
+
+            const imageResponse = await api.get(`wp/v2/media/${imageId}`);
+            setHeroImage(imageResponse.data.source_url);
+
+            setMessage({ type: "success", text: "✅ Image uploadée avec succès !" });
+        } catch (error) {
+            console.error("❌ Erreur lors de l'upload de l'image :", error);
+            setMessage({ type: "error", text: "❌ Échec de l'upload de l'image." });
+        }
+    };
 
     return (
-    <Container maxWidth="md" sx={{ mt: 5 }}>
-      <Paper elevation={3} sx={{ padding: 4, borderRadius: 3 }}>
-        {/* ✅ En-tête */}
+        <Box sx={{ padding: "40px", maxWidth: "700px", margin: "auto", mt: 5 }}>
+            <Paper sx={{ padding: "30px", borderRadius: "10px", boxShadow: 3 }}>
                 <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3 }}>
-          Gestion de la Page d'Accueil
+                    🏠 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 */}
+                {message.text && (
+                    <Snackbar open autoHideDuration={3000} onClose={() => setMessage({ type: "", text: "" })}>
+                        <Alert severity={message.type} sx={{ width: '100%' }}>
+                            {message.text}
+                        </Alert>
+                    </Snackbar>
+                )}
+
+                {/* ✅ Aperçu de l'image actuelle */}
+                {heroImage && (
+                    <Card sx={{ mb: 3, boxShadow: 3 }}>
+                        <CardMedia
+                            component="img"
+                            height="200"
+                            image={heroImage}
+                            alt="Image actuelle du héros"
+                            sx={{ objectFit: "cover" }}
+                        />
+                    </Card>
+                )}
+
+                {/* ✅ Bouton pour modifier l'image */}
+                <Button variant="outlined" component="label" fullWidth sx={{ mb: 3 }}>
+                    Modifier l'image
+                    <input type="file" hidden onChange={handleImageUpload} />
+                </Button>
+
                 <TextField
                     label="Titre Héros"
                     fullWidth
+                    margin="normal"
                     variant="outlined"
                     value={heroTitle}
                     onChange={(e) => setHeroTitle(e.target.value)}
-              sx={{ mb: 2 }}
+                    sx={{ "& .MuiInputBase-input": { fontSize: "1.2rem" } }}
                 />
 
                 <TextField
                     label="Texte Héros"
                     fullWidth
+                    margin="normal"
                     variant="outlined"
                     value={heroText}
                     onChange={(e) => setHeroText(e.target.value)}
-              sx={{ mb: 2 }}
+                    multiline
+                    rows={3}
+                    sx={{ "& .MuiInputBase-input": { fontSize: "1rem" } }}
                 />
 
-            {/* ✅ Bouton d'enregistrement */}
                 <Button 
                     variant="contained" 
                     color="primary" 
                     fullWidth 
-              sx={{ mt: 3 }}
+                    sx={{ mt: 3, fontSize: "1.1rem", fontWeight: "bold" }} 
                     onClick={handleSave}
                 >
-              Enregistrer les modifications
+                    💾 Enregistrer les modifications
                 </Button>
 
-            {/* ✅ Bouton retour au Dashboard */}
+                {/* ✅ Bouton retour Dashboard */}
                 <Button 
                     variant="outlined" 
                     color="secondary" 
                     fullWidth 
-              sx={{ mt: 2 }}
+                    sx={{ mt: 2, fontSize: "1rem", fontWeight: "bold" }} 
                     onClick={() => navigate("/admin/dashboard")}
                 >
-              Retour au Dashboard
+                    ⬅ Retour au Dashboard
                 </Button>
-          </>
-        )}
             </Paper>
-    </Container>
+        </Box>
     );
 };
 

server/wp-content/themes/hello-elementor-child/functions.php

@@ -278,10 +278,13 @@ add_action('rest_api_init', function () {
         'acf',  // Champ ACF
         [
             'get_callback'    => function ($object) {
-                return get_fields($object['id']);
+                return get_fields($object['id']); // ✅ Vérifie que l'ID est correct
             },
             'update_callback' => function ($value, $object) {
-                return update_fields($object->ID, $value);
+                foreach ($value as $field_key => $field_value) {
+                    update_field($field_key, $field_value, $object->ID); // ✅ Correction ici
+                }
+                return true;
             },
             'schema' => null,
         ]