use data-status-id instead of id to avoid id conflict with records wh…

…en enum is int backed
mokhosh · Feb 28, 2024 · f8dfe3a · f8dfe3a
1 parent 40fd2f6
commit f8dfe3a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/resources/views/kanban-scripts.blade.php b/resources/views/kanban-scripts.blade.php
@@ -13,7 +13,7 @@ function setData(dataTransfer, el) {
 
     function onAdd(e) {
         const recordId = e.item.id
-        const status = e.to.id
+        const status = e.to.dataset.statusId
         const fromOrderedIds = [].slice.call(e.from.children).map(child => child.id)
         const toOrderedIds = [].slice.call(e.to.children).map(child => child.id)
 
@@ -22,7 +22,7 @@ function onAdd(e) {
 
     function onUpdate(e) {
         const recordId = e.item.id
-        const status = e.from.id
+        const status = e.from.dataset.statusId
         const orderedIds = [].slice.call(e.from.children).map(child => child.id)
 
         Livewire.dispatch('sort-changed', {recordId, status, orderedIds})
@@ -31,7 +31,7 @@ function onUpdate(e) {
     document.addEventListener('livewire:navigated', () => {
         const statuses = @js($statuses->map(fn ($status) => $status['id']))
 
-        statuses.forEach(status => Sortable.create(document.getElementById(status), {
+        statuses.forEach(status => Sortable.create(document.querySelector(`[data-status-id='${status}']`), {
             group: 'filament-kanban',
             ghostClass: 'opacity-50',
             animation: 150,

diff --git a/resources/views/kanban-status.blade.php b/resources/views/kanban-status.blade.php
@@ -4,7 +4,7 @@
     @include(static::$headerView)
 
     <div
-        id="{{ $status['id'] }}"
+        data-status-id="{{ $status['id'] }}"
         class="flex flex-col flex-1 gap-2 p-3 bg-gray-200 dark:bg-gray-800 rounded-xl"
     >
         @foreach($status['records'] as $record)