V3 - Reordering Fixes (#1373)

* Reordering Fixes - Performance & Toggling * Fix styling --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Sep 26, 2023 · 19b79b2 · 19b79b2
1 parent 65ce494
commit 19b79b2
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [Unreleased] - 3.x Fixes for reordering striping
+- Force calculation of even/odd only once in reorder mode
+- Call internal method for reordering, and pass to configured method to process
+
 ## [Unreleased] - 3.x - Updates to Injection Methods
 - Amend AutoInjection/FrontendAsset to ensure it returns the original content correctly
 - Remove errant disabling of Blade Directives when disabling auto-injection

diff --git a/resources/js/laravel-livewire-tables.js b/resources/js/laravel-livewire-tables.js
@@ -61,21 +61,16 @@ document.addEventListener('alpine:init', () => {
         evenNotInOdd: {},
         oddNotInEven: {},
         orderedRows: [],
-        defaultReorderColumn: wire.entangle('defaultReorderColumn'),
-        reorderStatus: wire.entangle('reorderStatus'),
+        defaultReorderColumn: wire.get('defaultReorderColumn'),
+        reorderStatus: wire.get('reorderStatus'),
         currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'),
         hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'),
         reorderDisplayColumn: wire.entangle('reorderDisplayColumn'),
-        reorderCurrentPageOnly: wire.entangle('reorderCurrentPageOnly'),
         dragStart(event) {
             this.sourceID = event.target.id;
             event.dataTransfer.effectAllowed = 'move';
             event.dataTransfer.setData('text/plain', event.target.id);
             event.target.classList.add("laravel-livewire-tables-dragging");
-
-            if (this.evenNotInOdd.length == 0 || this.oddNotInEven.length == 0) {
-                this.setupEvenOddClasses();
-            }
         },
         dragOverEvent(event) {
             if (typeof this.currentlyHighlightedElement == 'object') {
@@ -95,7 +90,6 @@ document.addEventListener('alpine:init', () => {
         },
         dragLeaveEvent(event) {
             event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top');
-
         },
         dropEvent(event) {
             if (typeof this.currentlyHighlightedElement == 'object') {
@@ -127,10 +121,8 @@ document.addEventListener('alpine:init', () => {
             });
             */
             let nextLoop = 'even';
-            this.orderedRows = [];
             for (let i = 1, row; row = table.rows[i]; i++) {
-                if (!row.classList.contains('hidden')) {
-                    this.orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
+                if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) {
                     if (nextLoop === 'even') {
                         row.classList.remove(...this.oddNotInEven);
                         row.classList.add(...this.evenNotInOdd);
@@ -150,50 +142,48 @@ document.addEventListener('alpine:init', () => {
 
             }
             else {
-                this.currentlyReorderingStatus = true;
                 if (this.hideReorderColumnUnlessReorderingStatus) {
                     this.reorderDisplayColumn = true;
-                    wire.enableReordering();
                 }
+                wire.enableReordering();
+
             }
         },
         cancelReorder() {
-            this.currentlyReorderingStatus = false;
             if (this.hideReorderColumnUnlessReorderingStatus) {
                 this.reorderDisplayColumn = false;
             }
+            wire.disableReordering();
 
         },
         updateOrderedItems() {
-            this.currentlyReorderingStatus = false;
-            if (this.hideReorderColumnUnlessReorderingStatus) {
-                this.reorderDisplayColumn = false;
-            }
-            wire.set('orderedItems', this.orderedRows);
-            if (!this.reorderCurrentPageOnly) {
-                wire.disableReordering();
+            let table = document.getElementById(tableID);
+            let orderedRows = [];
+            for (let i = 1, row; row = table.rows[i]; i++) {
+               orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
             }
+            wire.storeReorder(orderedRows);
         },
         setupEvenOddClasses() {
-            let table = document.getElementById(tableID);
-            let tbody = table.getElementsByTagName('tbody')[0];
-            let evenRowClassArray = [];
-            let oddRowClassArray = [];
+            if (this.currentlyReorderingStatus === true) {
 
-            if (tbody.rows[2] !== undefined) {
-                evenRowClassArray = Array.from(tbody.rows[2].classList);
-            }
+                let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
+                let evenRowClassArray = [];
+                let oddRowClassArray = [];
 
-            if (tbody.rows[3] !== undefined) {
-                oddRowClassArray = Array.from(tbody.rows[3].classList);
+                if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) {
+                    evenRowClassArray = Array.from(tbody.rows[0].classList);
+                    oddRowClassArray = Array.from(tbody.rows[1].classList);
+                    this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element));
+                    this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element));
+                    evenRowClassArray = []
+                    oddRowClassArray = []
+                }
             }
-
-            this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element));
-            this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element));
-
         },
         init() {
-            this.setupEvenOddClasses();
+            this.$watch('currentlyReorderingStatus', value => this.setupEvenOddClasses());
+
         }
     }));
 

diff --git a/resources/js/laravel-livewire-tables.min.js b/resources/js/laravel-livewire-tables.min.js
diff --git a/src/Traits/Configuration/ReorderingConfiguration.php b/src/Traits/Configuration/ReorderingConfiguration.php
@@ -81,11 +81,4 @@ public function setDefaultReorderSort(string $field, string $direction = 'asc'):
 
         return $this;
     }
-
-    public function setReorderCurrentPageOnly(bool $reorderCurrentPageOnly): self
-    {
-        $this->reorderCurrentPageOnly = $reorderCurrentPageOnly;
-
-        return $this;
-    }
 }
diff --git a/src/Traits/Helpers/ReorderingHelpers.php b/src/Traits/Helpers/ReorderingHelpers.php
@@ -88,9 +88,4 @@ public function getReorderingBackupSessionKey(): string
     {
         return $this->getTableName().'-reordering-backup';
     }
-
-    public function getReorderCurrentPageOnly(): bool
-    {
-        return $this->reorderCurrentPageOnly;
-    }
 }