https://scoutbasketball.com/assets/controllers/my-folders/folder-sortable_controller-uPLMC8L.js

1/* stimulusFetch: 'lazy' */
2import { Controller } from '@hotwired/stimulus';
3import Sortable from 'sortablejs';
4export default class extends Controller {
5  static values = {
6    options: Object,
7    url: String
8  }
9
10  static defaults = {
11    animation: 150,
12    ghostClass: 'sortable-ghost',
13    dragClass: 'sortable-drag'
14  }
15
16  connect() {
17    // Merge default options with user provided options
18    const options = { ...this.constructor.defaults, ...this.optionsValue };
19
20    // Initialize Sortable with onSortEnd callback
21    this.sortable = Sortable.create(this.element, {
22      ...options,
23      onEnd: this.onSortEnd.bind(this)
24    });
25
26    // Store initial positions
27    this.initialPositions = this.getCurrentPositions();
28  }
29
30  disconnect() {
31    // Clean up when the controller is disconnected
32    if (this.sortable) {
33      this.sortable.destroy();
34    }
35  }
36
37  getCurrentPositions() {
38    return Array.from(this.element.children).map(item => item.dataset.id);
39  }
40
41  async onSortEnd(_event) {
42    // Get all folders
43    const items = Array.from(this.element.children);
44    
45    // Create an array of folder ids in their new order
46    const folderIds = items.map(item => item.dataset.id);
47
48    // Check if positions have changed
49    if (JSON.stringify(folderIds) === JSON.stringify(this.initialPositions)) {
50      return;
51    }
52
53    try {
54      const response = await fetch(this.urlValue, {
55        method: 'POST',
56        headers: {
57          'Content-Type': 'application/json',
58          'X-Requested-With': 'XMLHttpRequest'
59        },
60        body: JSON.stringify({ folders: folderIds })
61      });
62
63      if (!response.ok) {
64        throw new Error(`HTTP error! status: ${response.status}`);
65      }
66
67      // Update initial positions
68      this.initialPositions = folderIds;
69    } catch (error) {
70      console.error('Error updating folder positions:', error);
71      alert('Error updating folder positions. Please try again.');
72
73      // Revert to original order
74      this.sortable.sort(this.initialPositions);
75    }
76  }
77}