91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
import { Controller } from '@hotwired/stimulus'
|
|
import Sortable from 'sortablejs'
|
|
|
|
export default class extends Controller {
|
|
|
|
static targets = [ 'list', 'item', 'handle', 'positionField', 'positionLabel', 'status' ]
|
|
|
|
static values = {
|
|
url: String,
|
|
}
|
|
|
|
connect() {
|
|
this.abortController = null
|
|
|
|
// The sortable container may be nested (e.g. a tbody) when the controller element also
|
|
// has to wrap elements that must not be dragged, like the status message.
|
|
new Sortable(this.hasListTarget ? this.listTarget : this.element, {
|
|
draggable: '[data-sortable-target="item"]',
|
|
handle: '[data-sortable-target="handle"]',
|
|
sort: true,
|
|
fallbackOnBody: true,
|
|
onEnd: e => {
|
|
this.updateOrdering()
|
|
this.persist()
|
|
}
|
|
})
|
|
}
|
|
|
|
disconnect() {
|
|
this.abortController?.abort()
|
|
}
|
|
|
|
updateOrdering() {
|
|
this.positionFieldTargets.forEach((field, index) => {
|
|
field.value = index + 1
|
|
})
|
|
this.positionLabelTargets.forEach((label, index) => {
|
|
label.innerText = index + 1
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Sends the new order to the server. Only active when a url value is present, so the
|
|
* controller stays usable for plain form ordering.
|
|
*/
|
|
persist() {
|
|
if (!this.hasUrlValue || this.urlValue === '') {
|
|
return
|
|
}
|
|
|
|
// A drag while the previous request is still running makes that request obsolete.
|
|
this.abortController?.abort()
|
|
this.abortController = new AbortController()
|
|
|
|
const ids = this.itemTargets
|
|
.map(item => Number(item.dataset.sortableId))
|
|
.filter(id => Number.isInteger(id) && id > 0)
|
|
|
|
this.setStatus('speichert …')
|
|
|
|
fetch(this.urlValue, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
signal: this.abortController.signal,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ ids }),
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`Unexpected response ${response.status}`)
|
|
}
|
|
this.setStatus('Reihenfolge gespeichert')
|
|
})
|
|
.catch(error => {
|
|
if (error.name === 'AbortError') {
|
|
return
|
|
}
|
|
console.error('Failed to persist ordering', error)
|
|
this.setStatus('Speichern fehlgeschlagen')
|
|
})
|
|
}
|
|
|
|
setStatus(message) {
|
|
this.statusTargets.forEach(status => {
|
|
status.innerText = message
|
|
})
|
|
}
|
|
}
|