✨ feat(admin.scss): Améliore le style global et ajoute le thème TomSelect.
✨ feat(admin.js): Regroupe l'enregistrement des custom elements et améliore l'UI. ✨ feat(app.js): Initialise Sentry et ajoute une gestion des erreurs Turbo. ✨ feat(reserve.js): Optimise le chargement des images et améliore l'UI.
This commit is contained in:
Serreau Jovann
198
assets/admin.js
198
assets/admin.js
@@ -6,141 +6,117 @@ import { RepeatLine } from "./libs/RepeatLine.js";
|
||||
import { DevisManager } from "./libs/DevisManager.js";
|
||||
import { CrmEditor } from "./libs/CrmEditor.js";
|
||||
import { initTomSelect } from "./libs/initTomSelect.js";
|
||||
import { SearchProduct,SearchOptions } from "./libs/SearchProduct.js";
|
||||
import { SearchProductDevis,SearchOptionsDevis } from "./libs/SearchProductDevis.js";
|
||||
import { SearchProductFormule,SearchOptionsFormule } from "./libs/SearchProductFormule.js";
|
||||
// --- INITIALISATION SENTRY ---
|
||||
import { SearchProduct, SearchOptions } from "./libs/SearchProduct.js";
|
||||
import { SearchProductDevis, SearchOptionsDevis } from "./libs/SearchProductDevis.js";
|
||||
import { SearchProductFormule, SearchOptionsFormule } from "./libs/SearchProductFormule.js";
|
||||
|
||||
// --- CONFIGURATION SENTRY ---
|
||||
Sentry.init({
|
||||
dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
|
||||
tunnel: "/sentry-tunnel",
|
||||
sendDefaultPii: true,
|
||||
integrations: [
|
||||
Sentry.browserTracingIntegration(),
|
||||
Sentry.replayIntegration()
|
||||
],
|
||||
integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
|
||||
tracesSampleRate: 1.0,
|
||||
tracePropagationTargets: ["localhost", "esy-web.dev"],
|
||||
replaysSessionSampleRate: 0.1,
|
||||
replaysOnErrorSampleRate: 1.0
|
||||
});
|
||||
|
||||
/**
|
||||
* Enregistre les Custom Elements de manière groupée
|
||||
*/
|
||||
const registerCustomElements = () => {
|
||||
const elements = [
|
||||
{ name: 'repeat-line', class: RepeatLine, extends: 'div' },
|
||||
{ name: 'devis-manager', class: DevisManager, extends: 'div' },
|
||||
{ name: 'search-product', class: SearchProduct, extends: 'button' },
|
||||
{ name: 'search-productformule', class: SearchProductFormule, extends: 'button' },
|
||||
{ name: 'search-optionsformule', class: SearchOptionsFormule, extends: 'button' },
|
||||
{ name: 'search-options', class: SearchOptions, extends: 'button' },
|
||||
{ name: 'search-productdevis', class: SearchProductDevis, extends: 'button' },
|
||||
{ name: 'search-optionsdevis', class: SearchOptionsDevis, extends: 'button' },
|
||||
{ name: 'crm-editor', class: CrmEditor, extends: 'textarea' }
|
||||
];
|
||||
|
||||
elements.forEach(el => {
|
||||
if (!customElements.get(el.name)) {
|
||||
customElements.define(el.name, el.class, { extends: el.extends });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Preview d'image optimisée
|
||||
*/
|
||||
function initImagePreview() {
|
||||
const input = document.getElementById('product_image_input');
|
||||
const preview = document.getElementById('product-image-preview');
|
||||
const placeholder = document.getElementById('product-image-placeholder');
|
||||
|
||||
if (input && preview) {
|
||||
input.addEventListener('change', function(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
preview.src = e.target.result;
|
||||
preview.classList.remove('hidden');
|
||||
if (placeholder) placeholder.classList.add('hidden');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
input?.addEventListener('change', ({ target }) => {
|
||||
const file = target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
if (preview) {
|
||||
preview.src = e.target.result;
|
||||
preview.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
placeholder?.classList.add('hidden');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gère le filtrage dynamique des listes (Contrats, Devis, etc.)
|
||||
* Filtrage dynamique (Contrats, Devis, etc.)
|
||||
*/
|
||||
function initDynamicSearch() {
|
||||
const searchInput = document.getElementById('searchContrat');
|
||||
const listContainer = document.getElementById('contratsList');
|
||||
|
||||
if (searchInput && listContainer) {
|
||||
searchInput.addEventListener('input', function() {
|
||||
const filter = this.value.toLowerCase();
|
||||
const cards = listContainer.querySelectorAll('.contrat-card');
|
||||
searchInput?.addEventListener('input', (e) => {
|
||||
const filter = e.target.value.toLowerCase();
|
||||
const cards = listContainer?.querySelectorAll('.contrat-card');
|
||||
|
||||
cards.forEach(card => {
|
||||
// On récupère tout le texte de la carte pour une recherche globale
|
||||
const content = card.textContent.toLowerCase();
|
||||
|
||||
if (content.includes(filter)) {
|
||||
card.classList.remove('hidden');
|
||||
// Optionnel : petite animation de ré-apparition
|
||||
card.style.opacity = "1";
|
||||
card.style.transform = "scale(1)";
|
||||
} else {
|
||||
card.classList.add('hidden');
|
||||
card.style.opacity = "0";
|
||||
card.style.transform = "scale(0.95)";
|
||||
}
|
||||
});
|
||||
cards?.forEach(card => {
|
||||
const isVisible = card.textContent.toLowerCase().includes(filter);
|
||||
card.classList.toggle('hidden', !isVisible);
|
||||
card.style.opacity = isVisible ? "1" : "0";
|
||||
card.style.transform = isVisible ? "scale(1)" : "scale(0.95)";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialise les composants de l'interface d'administration.
|
||||
* Gestion UI : Sidebar, Submenus et Flash messages
|
||||
*/
|
||||
function initAdminLayout() {
|
||||
initDynamicSearch();
|
||||
initImagePreview();
|
||||
// Enregistrement des Custom Elements
|
||||
if (!customElements.get('repeat-line')) {
|
||||
customElements.define('repeat-line', RepeatLine, { extends: 'div' });
|
||||
}
|
||||
if (!customElements.get('devis-manager')) {
|
||||
customElements.define('devis-manager', DevisManager, { extends: 'div' });
|
||||
}
|
||||
function initUI() {
|
||||
// Sidebar
|
||||
const elements = {
|
||||
sidebar: document.getElementById('sidebar'),
|
||||
overlay: document.getElementById('sidebar-overlay'),
|
||||
toggleBtn: document.getElementById('sidebar-toggle'),
|
||||
settingsToggle: document.getElementById('settings-toggle'),
|
||||
settingsSubmenu: document.getElementById('settings-submenu')
|
||||
};
|
||||
|
||||
if (!customElements.get('search-product')) {
|
||||
customElements.define('search-product', SearchProduct, { extends: 'button' });
|
||||
}
|
||||
if (!customElements.get('search-productformule')) {
|
||||
customElements.define('search-productformule', SearchProductFormule, { extends: 'button' });
|
||||
}
|
||||
if (!customElements.get('search-optionsformule')) {
|
||||
customElements.define('search-optionsformule', SearchOptionsFormule, { extends: 'button' });
|
||||
}
|
||||
if (!customElements.get('search-options')) {
|
||||
customElements.define('search-options', SearchOptions, { extends: 'button' });
|
||||
}
|
||||
if (!customElements.get('search-productdevis')) {
|
||||
customElements.define('search-productdevis', SearchProductDevis, { extends: 'button' });
|
||||
}
|
||||
if (!customElements.get('search-optionsdevis')) {
|
||||
customElements.define('search-optionsdevis', SearchOptionsDevis, { extends: 'button' });
|
||||
}
|
||||
if (!customElements.get('crm-editor')) {
|
||||
customElements.define('crm-editor', CrmEditor, { extends: 'textarea' });
|
||||
}
|
||||
// S
|
||||
// Sidebar & UI
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const overlay = document.getElementById('sidebar-overlay');
|
||||
const toggleBtn = document.getElementById('sidebar-toggle');
|
||||
const toggleSidebar = () => {
|
||||
elements.sidebar?.classList.toggle('-translate-x-full');
|
||||
elements.overlay?.classList.toggle('hidden');
|
||||
};
|
||||
|
||||
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');
|
||||
};
|
||||
}
|
||||
elements.toggleBtn?.addEventListener('click', toggleSidebar);
|
||||
elements.overlay?.addEventListener('click', toggleSidebar);
|
||||
|
||||
// Dropdown Paramètres
|
||||
const settingsToggle = document.getElementById('settings-toggle');
|
||||
const settingsSubmenu = document.getElementById('settings-submenu');
|
||||
if (settingsToggle && settingsSubmenu) {
|
||||
settingsToggle.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
settingsSubmenu.classList.toggle('hidden');
|
||||
const isOpen = !settingsSubmenu.classList.contains('hidden');
|
||||
localStorage.setItem('admin_settings_open', isOpen);
|
||||
};
|
||||
}
|
||||
// Settings Submenu
|
||||
elements.settingsToggle?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const isHidden = elements.settingsSubmenu?.classList.toggle('hidden');
|
||||
localStorage.setItem('admin_settings_open', !isHidden);
|
||||
});
|
||||
|
||||
// Flash messages
|
||||
document.querySelectorAll('.flash-message').forEach((flash) => {
|
||||
// Flash Messages (Délégation pour performance)
|
||||
document.querySelectorAll('.flash-message').forEach(flash => {
|
||||
setTimeout(() => {
|
||||
flash.classList.add('opacity-0', 'translate-x-10');
|
||||
setTimeout(() => flash.remove(), 500);
|
||||
@@ -148,15 +124,19 @@ function initAdminLayout() {
|
||||
});
|
||||
}
|
||||
|
||||
// Turbo Hooks
|
||||
// --- INITIALISATION ---
|
||||
document.addEventListener('turbo:load', () => {
|
||||
initAdminLayout();
|
||||
initTomSelect(); // Init au chargement de la page
|
||||
registerCustomElements();
|
||||
initDynamicSearch();
|
||||
initImagePreview();
|
||||
initUI();
|
||||
initTomSelect();
|
||||
});
|
||||
|
||||
// Confirmation de suppression Turbo
|
||||
document.addEventListener("turbo:click", (event) => {
|
||||
const message = event.target.closest("[data-turbo-confirm]")?.getAttribute("data-turbo-confirm");
|
||||
if (message && !confirm(message)) {
|
||||
const attr = event.target.closest("[data-turbo-confirm]")?.getAttribute("data-turbo-confirm");
|
||||
if (attr && !confirm(attr)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user