You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.3 KiB
51 lines
1.3 KiB
import { Controller } from "@hotwired/stimulus"
|
|
import Sortable from 'sortablejs'
|
|
|
|
export default class extends Controller {
|
|
connect() {
|
|
this.sortable = new Sortable(this.element, {
|
|
onEnd: this.end.bind(this),
|
|
handle: '.handle'
|
|
})
|
|
|
|
}
|
|
|
|
disconnect() {
|
|
this.sortable.destroy()
|
|
}
|
|
|
|
end(event) {
|
|
|
|
// sortableUrl
|
|
if (this.element.dataset.sortableUrl != undefined) {
|
|
const item = this.element.children[event.newIndex]
|
|
const url = this.element.dataset.sortableUrl
|
|
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
|
|
|
|
const formData = new FormData()
|
|
formData.append('id', item.dataset.id)
|
|
formData.append('new_index', event.newIndex)
|
|
// console.log("Move", event.oldIndex, "to", event.newIndex);
|
|
|
|
fetch(url, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Accept': "text/vnd.turbo-stream.html",
|
|
'X-CSRF-Token': token
|
|
},
|
|
body: formData
|
|
})
|
|
.then (response => response.text())
|
|
.then(html => Turbo.renderStreamMessage(html))
|
|
.catch((err) => {
|
|
console.info('rejected', err)
|
|
})
|
|
} else {
|
|
this.element.querySelectorAll('input.position').forEach((input, index) => {
|
|
input.value = index + 1
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
}
|