diff --git a/frontend/src/components/Pages/Dashboard.jsx b/frontend/src/components/Pages/Dashboard.jsx index 6535893..0d49a6f 100644 --- a/frontend/src/components/Pages/Dashboard.jsx +++ b/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 */} + /> {/* En-tête */} @@ -81,7 +80,39 @@ function Dashboard() { {/* Cartes du Dashboard */} - + {/* ✅ Gestion Page d'Accueil - Première carte */} + + 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", + }, + }} + > + + + + + + Gestion Page d'Accueil + + + + + + {/* ✅ Gérer les Articles - Deuxième carte */} + navigate("/admin/gestion-articles")} sx={{ @@ -109,35 +140,6 @@ function Dashboard() { - - 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", - }, - }} - > - - - - - - Gestion Page d'Accueil - - - - diff --git a/frontend/src/components/Pages/GestionPageAccueil.jsx b/frontend/src/components/Pages/GestionPageAccueil.jsx index 8f3c832..f1d011b 100644 --- a/frontend/src/components/Pages/GestionPageAccueil.jsx +++ b/frontend/src/components/Pages/GestionPageAccueil.jsx @@ -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 ( + + + + 🏠 Gestion de la Page d'Accueil + - return ( - - - {/* ✅ En-tête */} - - Gestion de la Page d'Accueil - + {message.text && ( + setMessage({ type: "", text: "" })}> + + {message.text} + + + )} - {/* ✅ Affichage du statut de chargement */} - {loading ? ( - Chargement des données... - ) : error ? ( - - {error} - - ) : ( - <> - {/* ✅ Formulaire de modification */} - setHeroTitle(e.target.value)} - sx={{ mb: 2 }} - /> + {/* ✅ Aperçu de l'image actuelle */} + {heroImage && ( + + + + )} - setHeroText(e.target.value)} - sx={{ mb: 2 }} - /> + {/* ✅ Bouton pour modifier l'image */} + - {/* ✅ Bouton d'enregistrement */} - + setHeroTitle(e.target.value)} + sx={{ "& .MuiInputBase-input": { fontSize: "1.2rem" } }} + /> - {/* ✅ Bouton retour au Dashboard */} - - - )} - - - ); + setHeroText(e.target.value)} + multiline + rows={3} + sx={{ "& .MuiInputBase-input": { fontSize: "1rem" } }} + /> + + + + {/* ✅ Bouton retour Dashboard */} + + + + ); }; export default GestionPageAccueil; \ No newline at end of file diff --git a/server/wp-content/themes/hello-elementor-child/functions.php b/server/wp-content/themes/hello-elementor-child/functions.php index c992f4d..2556a83 100644 --- a/server/wp-content/themes/hello-elementor-child/functions.php +++ b/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, ]