43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
import { Controller } from '@hotwired/stimulus'
|
|
import Sortable from 'sortablejs'
|
|
import { useFetch } from '../mixins/use_fetch'
|
|
|
|
/* stimulusFetch: 'lazy' */
|
|
export default class extends Controller {
|
|
|
|
static targets = [ 'item', 'handle', 'positionField', 'positionLabel' ]
|
|
static values = { url: String }
|
|
|
|
connect() {
|
|
useFetch(this)
|
|
new Sortable(this.element, {
|
|
item: '[data-sortable-target="item"]',
|
|
handle: '[data-sortable-target="handle"]',
|
|
sort: true,
|
|
onEnd: () => {
|
|
this.updateOrdering()
|
|
if (this.urlValue) {
|
|
this.saveOrdering()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
updateOrdering() {
|
|
this.positionFieldTargets.forEach((field, index) => {
|
|
field.value = index + 1
|
|
})
|
|
this.positionLabelTargets.forEach((label, index) => {
|
|
label.innerText = index + 1
|
|
})
|
|
}
|
|
|
|
saveOrdering() {
|
|
const body = new FormData()
|
|
this.positionFieldTargets.forEach(field => {
|
|
body.append(`sorting[${field.dataset.id}]`, field.value)
|
|
})
|
|
fetch(this.urlValue, this.getInitObject('post', body))
|
|
}
|
|
}
|