https://symfony.com/assets/admin-bundles-CPqXpWD.js

1import Sortable from 'sortablejs';
2
3window.addEventListener('DOMContentLoaded', () => {
4    new BundlesAdmin();
5});
6
7class BundlesAdmin {
8    #listOfBundlesElement;
9
10    constructor() {
11        this.#listOfBundlesElement = document.querySelector('#list-of-bundles');
12        this.#createSortableList();
13    }
14
15    #createSortableList() {
16        const sortable = Sortable.create(this.#listOfBundlesElement, {
17            dataIdAttr: 'data-slug',
18            onUpdate: (_event) => {
19                this.#updateListSortingInBrowser();
20                this.#updateListSortingInBackend(sortable.toArray());
21            },
22        });
23    }
24
25    #updateListSortingInBrowser() {
26        let index = 1;
27        this.#listOfBundlesElement.querySelectorAll('li').forEach((listItem) => {
28            listItem.querySelector('.number').innerHTML = index++;
29        });
30    }
31
32    #updateListSortingInBackend(newSortingData) {
33        fetch(window.location, {
34            method: 'POST',
35            headers: { 'Content-Type': 'application/json' },
36            body: JSON.stringify({ positions: newSortingData }),
37        })
38            .then((response) => {
39                if (200 === response.status) {
40                    console.log('Changes saved.');
41                } else {
42                    console.error('Changes were not saved because of some error');
43                    console.error(response);
44                }
45            })
46            .catch((error) => {
47                console.log(`Changes were not saved because of some error: ${error}`);
48            });
49    }
50}