gestion accueil MAJ

2025-02-02 20:34:44 +01:00
parent f70d21ae71
commit 6eaa0fcf64
3 changed files with 188 additions and 160 deletions
@@ -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>
@@ -1,145 +1,168 @@
 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 [heroTitle, setHeroTitle] = useState("");
+    const [heroText, setHeroText] = useState("");
+    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]);
+    // ✅ Charger les données ACF existantes
+    useEffect(() => {
+        const fetchPageData = async () => {
+            try {
+                const response = await api.get(`wp/v2/pages/${PAGE_ID}?_fields=acf`);
+                const acfData = response.data.acf;
+                
+                if (acfData) {
+                    setHeroTitle(acfData.hero_title || "");
+                    setHeroText(acfData.hero_text || "");

-  // ✅ 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 (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);
+                setMessage({ type: "error", text: "Erreur lors du chargement des données." });
+            }
+        };
+        fetchPageData();
+    }, []);

-        if (!response.ok) {
-          throw new Error("Erreur de chargement des données");
+    // ✅ Sauvegarde des données ACF
+    const handleSave = async () => {
+        try {
+            const formData = { 
+                acf: { 
+                    hero_title: heroTitle, 
+                    hero_text: heroText,
+                    img_hero: heroImageId || null, // ✅ Mise à jour avec l'ID de l'image
+                } 
+            };
+            
+            console.log("📢 Envoi des nouvelles données ACF :", formData);
+            await updateHomePageACF(PAGE_ID, formData);
+
+            setMessage({ type: "success", text: "✅ Mise à jour réussie !" });
+
+            // ✅ 🔥 Redirection vers le Dashboard après 1.5 sec
+            setTimeout(() => {
+                navigate("/admin/dashboard");
+            }, 1500);
+        } catch (error) {
+            console.error("❌ Erreur mise à jour ACF :", error);
+            setMessage({ type: "error", text: "❌ Échec de la mise à jour. Vérifie les permissions WordPress." });
        }
-
-        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();
-  }, []);
+    // ✅ Gestion de l'upload d'image
+    const handleImageUpload = async (event) => {
+        const file = event.target.files[0];
+        if (!file) return;

-  // ✅ Mise à jour des champs ACF
-  const handleSave = async () => {
-    try {
-        const newData = {
-            hero_title: heroTitle,
-            hero_text: heroText,
-        };
+        try {
+            const imageId = await uploadImage(file);
+            setHeroImageId(imageId);

-        console.log("📢 Données envoyées pour mise à jour ACF :", newData);
-        const updatedData = await updateHomePageACF(13, newData);
+            const imageResponse = await api.get(`wp/v2/media/${imageId}`);
+            setHeroImage(imageResponse.data.source_url);

-        alert("✅ Mise à jour réussie !");
-        console.log("🔍 Données mises à jour reçues :", updatedData);
+            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." });
+        }
+    };

-        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 (
+        <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
+                </Typography>

-  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>
+                {message.text && (
+                    <Snackbar open autoHideDuration={3000} onClose={() => setMessage({ type: "", text: "" })}>
+                        <Alert severity={message.type} sx={{ width: '100%' }}>
+                            {message.text}
+                        </Alert>
+                    </Snackbar>
+                )}

-        {/* ✅ 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 }}
-            />
+                {/* ✅ 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>
+                )}

-            <TextField
-              label="Texte Héros"
-              fullWidth
-              variant="outlined"
-              value={heroText}
-              onChange={(e) => setHeroText(e.target.value)}
-              sx={{ mb: 2 }}
-            />
+                {/* ✅ Bouton pour modifier l'image */}
+                <Button variant="outlined" component="label" fullWidth sx={{ mb: 3 }}>
+                    Modifier l'image
+                    <input type="file" hidden onChange={handleImageUpload} />
+                </Button>

-            {/* ✅ Bouton d'enregistrement */}
-            <Button
-              variant="contained"
-              color="primary"
-              fullWidth
-              sx={{ mt: 3 }}
-              onClick={handleSave}
-            >
-              Enregistrer les modifications
-            </Button>
+                <TextField
+                    label="Titre Héros"
+                    fullWidth
+                    margin="normal"
+                    variant="outlined"
+                    value={heroTitle}
+                    onChange={(e) => setHeroTitle(e.target.value)}
+                    sx={{ "& .MuiInputBase-input": { fontSize: "1.2rem" } }}
+                />

-            {/* ✅ Bouton retour au Dashboard */}
-            <Button
-              variant="outlined"
-              color="secondary"
-              fullWidth
-              sx={{ mt: 2 }}
-              onClick={() => navigate("/admin/dashboard")}
-            >
-              Retour au Dashboard
-            </Button>
-          </>
-        )}
-      </Paper>
-    </Container>
-  );
+                <TextField
+                    label="Texte Héros"
+                    fullWidth
+                    margin="normal"
+                    variant="outlined"
+                    value={heroText}
+                    onChange={(e) => setHeroText(e.target.value)}
+                    multiline
+                    rows={3}
+                    sx={{ "& .MuiInputBase-input": { fontSize: "1rem" } }}
+                />
+
+                <Button 
+                    variant="contained" 
+                    color="primary" 
+                    fullWidth 
+                    sx={{ mt: 3, fontSize: "1.1rem", fontWeight: "bold" }} 
+                    onClick={handleSave}
+                >
+                    💾 Enregistrer les modifications
+                </Button>
+
+                {/* ✅ Bouton retour Dashboard */}
+                <Button 
+                    variant="outlined" 
+                    color="secondary" 
+                    fullWidth 
+                    sx={{ mt: 2, fontSize: "1rem", fontWeight: "bold" }} 
+                    onClick={() => navigate("/admin/dashboard")}
+                >
+                    ⬅ Retour au Dashboard
+                </Button>
+            </Paper>
+        </Box>
+    );
 };

 export default GestionPageAccueil;
@@ -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,
        ]