Add more properties to WithReordering

rappasoft · rappasoft · commit d02a13cc41d6 · 2021-06-19T23:48:59.000-04:00
- Change all @ to x-on as @ apparently has issues with livewire
- Fix dropdowns on tailwind to be uniform
- Add bulkActionsEnabled to bs5
diff --git a/resources/views/bootstrap-5/includes/bulk-actions.blade.php b/resources/views/bootstrap-5/includes/bulk-actions.blade.php
@@ -1,4 +1,4 @@
-@if (count($bulkActions))
+@if ($bulkActionsEnabled && count($bulkActions))
     <div class="dropdown mb-3 mb-md-0 d-block d-md-inline">
         <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="bulkActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             @lang('Bulk Actions')
diff --git a/resources/views/bootstrap-5/includes/bulk-select-row.blade.php b/resources/views/bootstrap-5/includes/bulk-select-row.blade.php
@@ -1,4 +1,4 @@
-@if (count($bulkActions) && (($selectPage && $rows->total() > $rows->count()) || count($selected)))
+@if ($bulkActionsEnabled && count($bulkActions) && (($selectPage && $rows->total() > $rows->count()) || count($selected)))
     <x-livewire-tables::bs5.table.row wire:key="row-message">
         <x-livewire-tables::bs5.table.cell colspan="{{ $colspan }}">
             @if (count($selected) && !$selectAll && !$selectPage)
diff --git a/resources/views/bootstrap-5/includes/column-select.blade.php b/resources/views/bootstrap-5/includes/column-select.blade.php
@@ -2,12 +2,12 @@
     <div
         x-cloak
         x-data="{ open: false }"
-        @keydown.escape.stop="open = false"
-        @mousedown.away="open = false"
+        x-on:keydown.escape.stop="open = false"
+        x-on:mousedown.away="open = false"
         class="dropdown mb-3 mb-md-0 md-0 ms-md-3 d-block d-md-inline"
     >
         <button
-            @click="open = !open"
+            x-on:click="open = !open"
             class="btn dropdown-toggle d-block w-100 d-md-inline"
             type="button"
             id="columnSelect"
diff --git a/resources/views/bootstrap-5/includes/filters.blade.php b/resources/views/bootstrap-5/includes/filters.blade.php
@@ -2,12 +2,12 @@
     <div
         x-cloak
         x-data="{ open: false }"
-        @keydown.escape.stop="open = false"
-        @mousedown.away="open = false"
+        x-on:keydown.escape.stop="open = false"
+        x-on:mousedown.away="open = false"
         class="btn-group d-block d-md-inline"
     >
         <button
-            @click="open = !open"
+            x-on:click="open = !open"
             type="button"
             class="btn dropdown-toggle d-block w-100 d-md-inline"
         >
@@ -50,7 +50,7 @@ class="dropdown-menu w-200 mt-3"
 
                     <button
                         wire:click.prevent="resetFilters"
-                        @click="open = false"
+                        x-on:click="open = false"
                         class="dropdown-item text-center"
                     >
                         @lang('Clear')
diff --git a/resources/views/bootstrap-5/includes/table.blade.php b/resources/views/bootstrap-5/includes/table.blade.php
@@ -4,7 +4,7 @@
             <x-livewire-tables::bs5.table.heading />
         @endif
 
-        @if (count($bulkActions))
+        @if ($bulkActionsEnabled && count($bulkActions))
             <x-livewire-tables::bs5.table.heading>
                 <input
                     wire:model="selectPage"
@@ -37,7 +37,7 @@ class="form-check-input"
     <x-slot name="body">
         @php
             $colspan = count($columns);
-            if (count($bulkActions)) $colspan++;
+            if ($bulkActionsEnabled && count($bulkActions)) $colspan++;
             if ($reordering) $colspan++;
         @endphp
 
@@ -61,7 +61,7 @@ class="form-check-input"
                     </x-livewire-tables::bs5.table.cell>
                 @endif
 
-                @if (count($bulkActions))
+                @if ($bulkActionsEnabled && count($bulkActions))
                     <x-livewire-tables::bs5.table.cell class="align-middle">
                         <input
                             wire:model="selected"
@@ -78,7 +78,7 @@ class="form-check-input"
             </x-livewire-tables::bs5.table.row>
         @empty
             <x-livewire-tables::bs5.table.row>
-                <x-livewire-tables::bs5.table.cell colspan="{{ count($bulkActions) ? count($columns) + 1 : count($columns) }}">
+                <x-livewire-tables::bs5.table.cell :colspan="$colspan">
                     @lang($emptyMessage)
                 </x-livewire-tables::bs5.table.cell>
             </x-livewire-tables::bs5.table.row>
diff --git a/resources/views/tailwind/includes/bulk-actions.blade.php b/resources/views/tailwind/includes/bulk-actions.blade.php
@@ -3,13 +3,13 @@
         <div
             x-data="{ open: false }"
             @keydown.window.escape="open = false"
-            @click.away="open = false"
+            x-on:click.away="open = false"
             class="relative inline-block text-left z-10 w-full md:w-auto"
         >
             <div>
                 <span class="rounded-md shadow-sm">
                     <button
-                        @click="open = !open"
+                        x-on:click="open = !open"
                         type="button"
                         class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                         id="options-menu"
@@ -35,7 +35,7 @@ class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
-                class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg z-50"
+                class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
             >
                 <div class="rounded-md bg-white shadow-xs">
                     <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
diff --git a/resources/views/tailwind/includes/column-select.blade.php b/resources/views/tailwind/includes/column-select.blade.php
@@ -3,13 +3,13 @@
         <div
             x-data="{ open: false }"
             @keydown.window.escape="open = false"
-            @click.away="open = false"
-            class="relative inline-block text-left z-10 w-full md:w-auto"
+            x-on:click.away="open = false"
+            class="relative inline-block text-left w-full md:w-auto"
         >
             <div>
                 <span class="rounded-md shadow-sm">
                     <button
-                        @click="open = !open"
+                        x-on:click="open = !open"
                         type="button"
                         class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
                         id="column-select-menu"
@@ -35,7 +35,7 @@ class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
-                class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg z-50"
+                class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
             >
                 <div class="rounded-md bg-white shadow-xs">
                     <div class="p-2" role="menu" aria-orientation="vertical" aria-labelledby="column-select-menu">
diff --git a/resources/views/tailwind/includes/filters.blade.php b/resources/views/tailwind/includes/filters.blade.php
@@ -1,16 +1,16 @@
 @if ($filtersEnabled && $showFilterDropdown && ($filtersView || count($customFilters)))
     <div
         x-data="{ open: false }"
-        @keydown.escape.stop="open = false"
-        @mousedown.away="open = false"
+        x-on:keydown.escape.stop="open = false"
+        x-on:mousedown.away="open = false"
         class="relative block md:inline-block text-left"
     >
         <div>
             <button
                 type="button"
                 class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo"
                 id="filters-menu"
-                @click="open = !open"
+                x-on:click="open = !open"
                 aria-haspopup="true"
                 x-bind:aria-expanded="open"
                 aria-expanded="true"
@@ -71,7 +71,7 @@ class="block text-sm font-medium leading-5 text-gray-700">
                     <div class="block px-4 py-2 text-sm text-gray-700" role="menuitem">
                         <button
                             wire:click.prevent="resetFilters"
-                            @click="open = false"
+                            x-on:click="open = false"
                             type="button"
                             class="w-full inline-flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                         >
diff --git a/src/Traits/WithReordering.php b/src/Traits/WithReordering.php
@@ -52,6 +52,9 @@ private function setReorderingProperties(): void
         if ($this->hasReorderingSession()) {
             $this->reordering = true;
             $this->bulkActionsEnabled = false;
+            $this->selectPage = false;
+            $this->selectAll = false;
+            $this->selected = [];
             $this->showSorting = false;
             $this->sortingEnabled = false;
             $this->filtersEnabled = false;
@@ -67,6 +70,9 @@ private function setReorderingProperties(): void
             $this->reordering = false;
             $this->reset([
                 'bulkActionsEnabled',
+                'selectPage',
+                'selectAll',
+                'selected',
                 'showSorting',
                 'sortingEnabled',
                 'filtersEnabled',

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@if (count($bulkActions))`
	`1`	`+@if ($bulkActionsEnabled && count($bulkActions))`
`2`	`2`	`<div class="dropdown mb-3 mb-md-0 d-block d-md-inline">`
`3`	`3`	`<button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="bulkActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">`
`4`	`4`	`@lang('Bulk Actions')`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@if (count($bulkActions) && (($selectPage && $rows->total() > $rows->count()) \|\| count($selected)))`
	`1`	`+@if ($bulkActionsEnabled && count($bulkActions) && (($selectPage && $rows->total() > $rows->count()) \|\| count($selected)))`
`2`	`2`	`<x-livewire-tables::bs5.table.row wire:key="row-message">`
`3`	`3`	`<x-livewire-tables::bs5.table.cell colspan="{{ $colspan }}">`
`4`	`4`	`@if (count($selected) && !$selectAll && !$selectPage)`