admin/e-ticket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add category edit page, edit button, and drag & drop sortable with native HTML5

Browse Source 
- Add /mon-compte/evenement/{id}/categorie/{categoryId}/modifier route (GET/POST)
- Create edit_category.html.twig with name and date fields
- Add edit button (pencil icon) on category list items
- Add sortable.js module: native HTML5 drag & drop with fetch reorder API
- Auto-correct endAt < startAt on category edit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-03-20 23:16:52 +01:00
parent ca0527b0db
commit 0358025fe7
5 changed files with 155 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/app.js
View File

@@ -5,6 +5,7 @@ import { registerEditor } from "./modules/editor.js"
import { initCookieConsent } from "./modules/cookie-consent.js"
import { initEventMap } from "./modules/event-map.js"
import { initCopyUrl } from "./modules/copy-url.js"
import { initSortable } from "./modules/sortable.js"
document.addEventListener('DOMContentLoaded', () => {
initMobileMenu()
@@ -13,4 +14,5 @@ document.addEventListener('DOMContentLoaded', () => {
initCookieConsent()
initCopyUrl()
initEventMap()
initSortable()
})

54
assets/modules/sortable.js Normal file
View File

@@ -0,0 +1,54 @@
export function initSortable() {
const list = document.getElementById('categories-list')
if (!list) return
const reorderUrl = list.dataset.reorderUrl
if (!reorderUrl) return
let dragEl = null
list.addEventListener('dragstart', (e) => {
dragEl = e.target.closest('[data-id]')
if (dragEl) {
dragEl.classList.add('opacity-50')
e.dataTransfer.effectAllowed = 'move'
}
})
list.addEventListener('dragend', () => {
if (dragEl) {
dragEl.classList.remove('opacity-50')
dragEl = null
}
})
list.addEventListener('dragover', (e) => {
e.preventDefault()
const target = e.target.closest('[data-id]')
if (target && target !== dragEl) {
const rect = target.getBoundingClientRect()
const mid = rect.top + rect.height / 2
if (e.clientY < mid) {
list.insertBefore(dragEl, target)
} else {
list.insertBefore(dragEl, target.nextSibling)
}
}
})
list.addEventListener('drop', (e) => {
e.preventDefault()
const items = list.querySelectorAll('[data-id]')
const order = Array.from(items).map(el => Number.parseInt(el.dataset.id, 10))
globalThis.fetch(reorderUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(order),
})
})
list.querySelectorAll('[data-id]').forEach(el => {
el.setAttribute('draggable', 'true')
})
}

52
src/Controller/AccountController.php
View File

@@ -429,6 +429,58 @@ class AccountController extends AbstractController
return $this->redirectToRoute('app_account_edit_event', ['id' => $event->getId(), 'tab' => 'categories']);
}
#[Route('/mon-compte/evenement/{id}/categorie/{categoryId}/modifier', name: 'app_account_event_edit_category', methods: ['GET', 'POST'])]
public function editCategory(Event $event, int $categoryId, Request $request, EntityManagerInterface $em): Response
{
$this->denyAccessUnlessGranted('ROLE_ORGANIZER');
/** @var User $user */
$user = $this->getUser();
if ($event->getAccount()->getId() !== $user->getId()) {
throw $this->createAccessDeniedException();
}
$category = $em->getRepository(Category::class)->find($categoryId);
if (!$category || $category->getEvent()->getId() !== $event->getId()) {
throw $this->createNotFoundException();
}
if ($request->isMethod('POST')) {
$category->setName(trim($request->request->getString('name')));
$startAt = $request->request->getString('start_at');
if ('' !== $startAt) {
$category->setStartAt(new \DateTimeImmutable($startAt));
}
$endAt = $request->request->getString('end_at');
if ('' !== $endAt) {
$category->setEndAt(new \DateTimeImmutable($endAt));
}
if ($category->getEndAt() < $category->getStartAt()) {
$category->setEndAt($category->getStartAt()->modify('+30 days'));
}
$em->flush();
$this->addFlash('success', 'Categorie modifiee.');
return $this->redirectToRoute('app_account_edit_event', ['id' => $event->getId(), 'tab' => 'categories']);
}
return $this->render('account/edit_category.html.twig', [
'event' => $event,
'category' => $category,
'breadcrumbs' => [
self::BREADCRUMB_HOME,
self::BREADCRUMB_ACCOUNT,
['name' => $event->getTitle(), 'url' => '/mon-compte/evenement/'.$event->getId().'/modifier?tab=categories'],
['name' => $category->getName(), 'url' => ''],
],
]);
}
#[Route('/mon-compte/evenement/{id}/categorie/{categoryId}/supprimer', name: 'app_account_event_delete_category', methods: ['POST'])]
public function deleteCategory(Event $event, int $categoryId, EntityManagerInterface $em): Response
{

45
templates/account/edit_category.html.twig Normal file
View File

@@ -0,0 +1,45 @@
{% extends 'base.html.twig' %}
{% block title %}Modifier {{ category.name }} - E-Ticket{% endblock %}
{% block body %}
<div class="page-container">
<a href="{{ path('app_account_edit_event', {id: event.id, tab: 'categories'}) }}" class="inline-flex items-center gap-2 text-sm font-black uppercase tracking-widest text-gray-500 hover:text-gray-900 transition-colors mb-8">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"/></svg>
Retour aux categories
</a>
<h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page">Modifier la categorie</h1>
<p class="font-bold text-gray-600 italic mb-8">{{ event.title }}</p>
{% for message in app.flashes('error') %}
<div class="flash-error"><p class="font-black text-sm">{{ message }}</p></div>
{% endfor %}
<div class="card-brutal">
<form method="post" action="{{ path('app_account_event_edit_category', {id: event.id, categoryId: category.id}) }}" class="form-col">
<div>
<label for="cat_name" class="text-xs font-black uppercase tracking-widest form-label">Nom de la categorie</label>
<input type="text" id="cat_name" name="name" required class="form-input focus:border-indigo-600" value="{{ category.name }}">
</div>
<div class="form-row">
<div class="form-group">
<label for="cat_start" class="text-xs font-black uppercase tracking-widest form-label">Debut vente</label>
<input type="datetime-local" id="cat_start" name="start_at" class="form-input focus:border-indigo-600" value="{{ category.startAt|date('Y-m-d\\TH:i') }}">
</div>
<div class="form-group">
<label for="cat_end" class="text-xs font-black uppercase tracking-widest form-label">Fin vente</label>
<input type="datetime-local" id="cat_end" name="end_at" class="form-input focus:border-indigo-600" value="{{ category.endAt|date('Y-m-d\\TH:i') }}">
</div>
</div>
<div>
<button type="submit" class="btn-brutal font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
Enregistrer
</button>
</div>
</form>
</div>
</div>
{% endblock %}

3
templates/account/edit_event.html.twig
View File

@@ -183,7 +183,7 @@
</form>
{% if categories|length > 0 %}
<div id="categories-list">
<div id="categories-list" data-reorder-url="{{ path('app_account_event_reorder_categories', {id: event.id}) }}">
{% for category in categories %}
<div class="flex flex-wrap items-center gap-4 p-4 border-2 border-gray-900 mb-2 bg-white cursor-move" data-id="{{ category.id }}">
<span class="text-gray-400 cursor-grab">&#9776;</span>
@@ -194,6 +194,7 @@
{% else %}
<span class="badge-red text-xs font-black uppercase">Inactive</span>
{% endif %}
<a href="{{ path('app_account_event_edit_category', {id: event.id, categoryId: category.id}) }}" class="px-2 py-1 border-2 border-gray-900 bg-white text-xs font-black uppercase hover:bg-gray-100 transition-all">&#9998;</a>
<form method="post" action="{{ path('app_account_event_delete_category', {id: event.id, categoryId: category.id}) }}" data-confirm="Supprimer cette categorie ?" class="inline">
<button type="submit" class="px-2 py-1 border-2 border-red-800 bg-red-600 text-white text-xs font-black uppercase cursor-pointer hover:bg-red-800 transition-all">&#10005;</button>
</form>