admin/ludikevent_crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

```

Browse Source 
✨ feat(FormulesController): Gère l'ajout et la mise à jour des produits inclus.

Ajoute la logique pour ajouter et mettre à jour les produits inclus dans une formule, avec persistance en base de données. Affiche également les produits inclus existants.
✨ feat(admin.js): Enregistre le composant SearchProductFormule.

Enregistre le composant SearchProductFormule pour permettre son utilisation dans les templates.
✨ feat(config-pack.twig): Affiche et permet la gestion des produits inclus.

Affiche une liste des produits inclus dans une formule et permet leur ajout, modification et suppression via un formulaire.
✨ feat(SearchProductFormule.js): Crée un composant de recherche de produits.

Crée un composant web personnalisé pour rechercher et sélectionner des produits à ajouter à une formule.
```
This commit is contained in:
Serreau Jovann
2026-01-28 10:54:05 +01:00
parent 08334b0298
commit 61d3c8d3dd
4 changed files with 254 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/admin.js
View File

@@ -8,6 +8,7 @@ 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 } from "./libs/SearchProductFormule.js";
// --- INITIALISATION SENTRY ---
Sentry.init({
dsn: "https://803814be6540031b1c37bf92ba9c0f79@sentry.esy-web.dev/24",
@@ -91,6 +92,9 @@ function initAdminLayout() {
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-options')) {
customElements.define('search-options', SearchOptions, { extends: 'button' });
}

142
assets/libs/SearchProductFormule.js Normal file
View File

@@ -0,0 +1,142 @@
export class SearchProductFormule extends HTMLButtonElement {
constructor() {
super();
this.allProducts = []; // Stockage local pour la recherche
}
connectedCallback() {
this.addEventListener('click', () => this.openModal());
}
async openModal() {
let modal = document.getElementById('modal-search-product');
if (!modal) {
modal = this.createModalStructure();
document.body.appendChild(modal);
this.setupSearchEvent(modal);
}
modal.classList.remove('hidden');
const container = modal.querySelector('#results-container');
const searchInput = modal.querySelector('#modal-search-input');
searchInput.value = ''; // Reset recherche
container.innerHTML = '<div class="text-white p-8 text-center animate-pulse tracking-widest text-[10px] uppercase font-black">Synchronisation catalogue...</div>';
try {
const response = await fetch('/crm/products/json');
this.allProducts = await response.json();
this.renderProducts(this.allProducts, container, modal);
searchInput.focus();
} catch (error) {
container.innerHTML = '<div class="text-red-400 p-8 text-center">Erreur catalogue.</div>';
}
}
createModalStructure() {
const div = document.createElement('div');
div.id = 'modal-search-product';
div.className = 'fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-md hidden animate-in fade-in duration-300';
div.innerHTML = `
<div class="bg-slate-900 border border-white/10 w-full max-w-2xl max-h-[85vh] rounded-[3rem] shadow-2xl overflow-hidden flex flex-col scale-in-center">
<div class="p-8 border-b border-white/5 bg-white/5 space-y-6">
<div class="flex justify-between items-center">
<h3 class="text-white font-black uppercase tracking-[0.3em] text-[11px] flex items-center">
<span class="w-2 h-2 bg-purple-500 rounded-full mr-3 animate-pulse"></span>
Sélection Produit
</h3>
<button type="button" onclick="this.closest('#modal-search-product').classList.add('hidden')" class="p-2 text-slate-400 hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="relative">
<input type="text" id="modal-search-input" placeholder="RECHERCHER UN NOM, UNE RÉFÉRENCE..."
class="w-full bg-slate-950/50 border border-white/10 rounded-2xl py-4 pl-12 pr-5 text-white text-xs font-black tracking-widest focus:ring-purple-500/20 focus:border-purple-500 transition-all uppercase placeholder:text-slate-600">
<svg class="w-5 h-5 absolute left-4 top-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
</div>
<div id="results-container" class="overflow-y-auto p-6 space-y-2 custom-scrollbar flex-grow min-h-[300px]"></div>
<div class="p-4 bg-white/5 text-center">
<p class="text-[9px] text-slate-500 font-black uppercase tracking-widest line-clamp-1">Appuyez sur Échap pour fermer</p>
</div>
</div>
`;
return div;
}
setupSearchEvent(modal) {
const input = modal.querySelector('#modal-search-input');
const container = modal.querySelector('#results-container');
input.oninput = () => {
const query = input.value.toLowerCase().trim();
const filtered = this.allProducts.filter(p =>
p.name.toLowerCase().includes(query)
);
this.renderProducts(filtered, container, modal);
};
// Fermeture sur Echap
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') modal.classList.add('hidden');
});
}
renderProducts(products, container, modal) {
container.innerHTML = '';
if (products.length === 0) {
container.innerHTML = '<div class="text-slate-600 p-12 text-center text-[10px] font-black uppercase tracking-[0.2em]">Aucun produit trouvé</div>';
return;
}
products.forEach(product => {
const card = document.createElement('div');
card.className = 'flex items-center gap-5 p-4 bg-white/5 border border-white/5 rounded-2xl hover:bg-purple-500/10 hover:border-purple-500/40 transition-all cursor-pointer group animate-in fade-in slide-in-from-bottom-2';
const imgHtml = product.image
? `<img src="${product.image}" class="w-14 h-14 rounded-xl object-cover shadow-lg group-hover:scale-110 transition-transform">`
: `<div class="w-14 h-14 bg-slate-950 rounded-xl flex items-center justify-center text-[8px] text-slate-700 font-black border border-white/5">IMG</div>`;
card.innerHTML = `
${imgHtml}
<div class="flex-grow">
<div class="text-white font-black text-xs uppercase tracking-wider mb-1">${product.name}</div>
<div class="flex gap-4">
<span class="text-purple-400 text-[10px] font-mono">1J: ${product.price1day}€</span>
<span class="text-slate-500 text-[10px] font-mono">SUP: ${product.priceSup}€</span>
<span class="text-amber-500/80 text-[10px] font-mono">CAUTION: ${product.caution}€</span>
</div>
</div>
<div class="w-10 h-10 rounded-full bg-purple-500/0 group-hover:bg-purple-500/20 flex items-center justify-center text-purple-500 transition-all">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
</div>
`;
card.onclick = () => {
this.fillFormLine(product);
modal.classList.add('hidden');
};
container.appendChild(card);
});
}
fillFormLine(product) {
const row = this.closest('.form-repeater__row');
if (row) {
row.querySelector('input[name*="[product]"]').value = product.name;
const fieldset = row.querySelector('fieldset');
fieldset.classList.add('border-emerald-500/50', 'bg-emerald-500/5');
setTimeout(() => fieldset.classList.remove('border-emerald-500/50', 'bg-emerald-500/5'), 800);
}
}
}