Blade Minimisation & ColumnSelect Cleanup (#1806)

* Minor Adjustments to remove unnecessary blades * Remove default customView method, clean up WithColumnSelect trait * Clean Up ColumnSelect * Fix Collapsed Row Attribute Merging * Text Left when collapsed * Add Basic Visible Tests * Remove unused methods * Migrate to Computed, fix Reorder striping * Update DateRangeFilterTest * Tidy Up DateRangeFilter --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Jul 31, 2024 · a12f07c · a12f07c
1 parent 321d58f
commit a12f07c
Show file tree

Hide file tree

Showing 20 changed files with 325 additions and 208 deletions.
diff --git a/resources/js/laravel-livewire-tables.js b/resources/js/laravel-livewire-tables.js
@@ -196,6 +196,9 @@ document.addEventListener('alpine:init', () => {
         hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'),
         reorderDisplayColumn: wire.entangle('reorderDisplayColumn'),
         dragStart(event) {
+            this.$nextTick(() => { this.setupEvenOddClasses() });
+
+
             this.sourceID = event.target.id;
             event.dataTransfer.effectAllowed = 'move';
             event.dataTransfer.setData('text/plain', event.target.id);
@@ -266,11 +269,13 @@ document.addEventListener('alpine:init', () => {
             }
         },
         reorderToggle() {
+            this.$nextTick(() => { this.setupEvenOddClasses() });
             if (this.currentlyReorderingStatus) {
                 wire.disableReordering();
 
             }
             else {
+                this.setupEvenOddClasses();
                 if (this.hideReorderColumnUnlessReorderingStatus) {
                     this.reorderDisplayColumn = true;
                 }
@@ -294,8 +299,8 @@ document.addEventListener('alpine:init', () => {
             wire.storeReorder(orderedRows);
         },
         setupEvenOddClasses() {
-            if (this.currentlyReorderingStatus === true) {
-
+            if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0)
+            {
                 let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
                 let evenRowClassArray = [];
                 let oddRowClassArray = [];
@@ -305,15 +310,15 @@ document.addEventListener('alpine:init', () => {
                     oddRowClassArray = Array.from(tbody.rows[1].classList);
                     this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element));
                     this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element));
+                    console.log("EvenNotInOdd:"+this.evenNotInOdd);
+                    console.log("oddNotInEven:"+this.oddNotInEven);
+
                     evenRowClassArray = []
                     oddRowClassArray = []
                 }
             }
         },
         init() {
-            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/resources/views/components/table/collapsed-columns.blade.php b/resources/views/components/table/collapsed-columns.blade.php
@@ -1,6 +1,10 @@
 @aware(['component', 'tableName'])
 @props(['row', 'rowIndex'])
 
+@php
+    $customAttributes = $component->getTrAttributes($row, $rowIndex);
+@endphp
+
 @if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns())
     @php
         $colspan = $component->getColspanCount();
@@ -28,16 +32,20 @@
 
         wire:key="{{ $tableName }}-row-{{ $row->{$this->getPrimaryKey()} }}-collapsed-contents"
         wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
+        {{
+        $attributes->merge($customAttributes)
+                ->class(['hidden bg-white dark:bg-gray-700 dark:text-white rappasoft-striped-row' => ($component->isTailwind() && ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0)])
+                ->class(['hidden bg-gray-50 dark:bg-gray-800 dark:text-white rappasoft-striped-row' => ($component->isTailwind() && ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0)])
+                ->class(['d-none bg-light rappasoft-striped-row' => ($component->isBootstrap() && $rowIndex % 2 === 0 && ($customAttributes['default'] ?? true))])
+                ->class(['d-none bg-white rappasoft-striped-row' => ($component->isBootstrap() && $rowIndex % 2 !== 0 && ($customAttributes['default'] ?? true))])
+                ->except(['default'])
+        }}
 
-        @class([
-            'hidden bg-white dark:bg-gray-700 dark:text-white' => $component->isTailwind(),
-            'd-none' => $component->isBootstrap()
-        ])
     >
         <td
             @class([
-                'pt-4 pb-2 px-4' => $component->isTailwind(),
-                'pt-3 p-2' => $component->isBootstrap(),
+                'text-left pt-4 pb-2 px-4' => $component->isTailwind(),
+                'text-start pt-3 p-2' => $component->isBootstrap(),
             ])
             colspan="{{ $colspan }}"
         >