Add category edit page, edit button, and drag & drop sortable with native HTML5
- 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:
54
assets/modules/sortable.js
Normal file
54
assets/modules/sortable.js
Normal 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')
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user