Ce commit ajoute la gestion des images pour les produits, l'indexation des produits pour la recherche et la synchronisation avec Stripe. Ajoute un formulaire de création/édition de produits avec gestion de l'image, l'indexation pour la recherche, et la synchronisation des produits avec Stripe. Gère les uploads d'images.
153 lines
5.4 KiB
JavaScript
153 lines
5.4 KiB
JavaScript
import './admin.scss'
|
|
import * as Sentry from "@sentry/browser";
|
|
import * as Turbo from "@hotwired/turbo";
|
|
|
|
// --- INITIALISATION SENTRY (En premier !) ---
|
|
Sentry.init({
|
|
dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
|
|
tunnel: "/sentry-tunnel",
|
|
sendDefaultPii: true,
|
|
integrations: [
|
|
Sentry.browserTracingIntegration(),
|
|
Sentry.replayIntegration()
|
|
],
|
|
tracesSampleRate: 1.0,
|
|
tracePropagationTargets: ["localhost", "esy-web.dev"], // Remplace par ton domaine réel
|
|
replaysSessionSampleRate: 0.1,
|
|
replaysOnErrorSampleRate: 1.0
|
|
});
|
|
|
|
/**
|
|
* Initialise les composants de l'interface d'administration.
|
|
*/
|
|
function initAdminLayout() {
|
|
|
|
|
|
const imageInput = document.getElementById('product_image_input');
|
|
const previewImage = document.getElementById('product-image-preview');
|
|
const placeholderIcon = document.getElementById('product-image-placeholder');
|
|
|
|
if (imageInput) {
|
|
imageInput.addEventListener('change', (event) => {
|
|
const file = event.target.files[0];
|
|
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (e) => {
|
|
previewImage.src = e.target.result;
|
|
previewImage.classList.remove('hidden');
|
|
if (placeholderIcon) {
|
|
placeholderIcon.classList.add('hidden');
|
|
}
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
}
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebar-overlay');
|
|
const toggleBtn = document.getElementById('sidebar-toggle');
|
|
const settingsToggle = document.getElementById('settings-toggle');
|
|
const settingsSubmenu = document.getElementById('settings-submenu');
|
|
|
|
// --- 1. GESTION DE LA SIDEBAR (MOBILE) ---
|
|
if (toggleBtn && sidebar && overlay) {
|
|
toggleBtn.onclick = () => {
|
|
sidebar.classList.toggle('-translate-x-full');
|
|
overlay.classList.toggle('hidden');
|
|
};
|
|
|
|
overlay.onclick = () => {
|
|
sidebar.classList.add('-translate-x-full');
|
|
overlay.classList.add('hidden');
|
|
};
|
|
}
|
|
|
|
// --- 2. GESTION DU DROPDOWN (PARAMÈTRES) ---
|
|
if (settingsToggle && settingsSubmenu) {
|
|
const settingsChevron = settingsToggle.querySelector('svg:last-child');
|
|
|
|
const toggleDropdown = (show, animate = true) => {
|
|
if (!animate) settingsSubmenu.style.transition = 'none';
|
|
|
|
if (show) {
|
|
settingsSubmenu.classList.remove('hidden');
|
|
settingsSubmenu.style.maxHeight = settingsSubmenu.scrollHeight + "px";
|
|
settingsChevron?.classList.add('rotate-180');
|
|
localStorage.setItem('admin_settings_open', 'true');
|
|
} else {
|
|
settingsSubmenu.style.maxHeight = "0px";
|
|
settingsChevron?.classList.remove('rotate-180');
|
|
localStorage.setItem('admin_settings_open', 'false');
|
|
|
|
if (animate) {
|
|
setTimeout(() => {
|
|
if (settingsSubmenu.style.maxHeight === "0px") {
|
|
settingsSubmenu.classList.add('hidden');
|
|
}
|
|
}, 300);
|
|
} else {
|
|
settingsSubmenu.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
if (!animate) {
|
|
settingsSubmenu.offsetHeight; // force redraw
|
|
settingsSubmenu.style.transition = '';
|
|
}
|
|
};
|
|
|
|
settingsToggle.onclick = (e) => {
|
|
e.preventDefault();
|
|
const isClosed = settingsSubmenu.style.maxHeight === "0px" || settingsSubmenu.classList.contains('hidden');
|
|
toggleDropdown(isClosed);
|
|
};
|
|
|
|
// PERSISTANCE
|
|
const isSettingsRoute = window.location.pathname.includes('/crm/administrateur') ||
|
|
window.location.pathname.includes('/crm/logs');
|
|
const wasOpen = localStorage.getItem('admin_settings_open') === 'true';
|
|
|
|
if (isSettingsRoute || wasOpen) {
|
|
toggleDropdown(true, false);
|
|
}
|
|
|
|
// HIGHLIGHT
|
|
settingsSubmenu.querySelectorAll('a').forEach(link => {
|
|
if (window.location.pathname === link.getAttribute('href')) {
|
|
link.classList.add('text-blue-600', 'dark:text-blue-400', 'font-semibold');
|
|
link.classList.remove('text-slate-500');
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- 3. GESTION DES MESSAGES FLASH ---
|
|
document.querySelectorAll('.flash-message').forEach((flash) => {
|
|
setTimeout(() => {
|
|
flash.classList.add('opacity-0', 'translate-x-10');
|
|
setTimeout(() => flash.remove(), 500);
|
|
}, 8000);
|
|
});
|
|
}
|
|
|
|
// --- CORRECTIF DATA-TURBO-CONFIRM ---
|
|
document.addEventListener("turbo:click", (event) => {
|
|
const message = event.target.closest("[data-turbo-confirm]")?.getAttribute("data-turbo-confirm");
|
|
if (message && !confirm(message)) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('turbo:load', initAdminLayout);
|
|
|
|
document.addEventListener('turbo:before-cache', () => {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebar-overlay');
|
|
if (sidebar) sidebar.classList.add('-translate-x-full');
|
|
if (overlay) overlay.classList.add('hidden');
|
|
});
|
|
|
|
|