Update BS4 for new reordering

Author: rappasoft

resources/views/bootstrap-4/components/table/row.blade.php

@@ -1,4 +1,10 @@
-@props(['url' => null, 'customAttributes' => []])
+@props(['url' => null, 'reordering' => false, 'customAttributes' => []])
+
+@if (!$reordering && $attributes->has('wire:sortable.item'))
+    @php
+        $attributes = $attributes->filter(fn ($value, $key) => $key !== 'wire:sortable.item');
+    @endphp
+@endif
 
 <tr
     {{ $attributes->merge($customAttributes) }}

resources/views/bootstrap-4/datatable.blade.php

@@ -19,6 +19,7 @@ class="container-fluid p-0"
 
         <div class="d-md-flex justify-content-between mb-3">
             <div class="d-md-flex">
+                @include('livewire-tables::bootstrap-4.includes.reorder')
                 @include('livewire-tables::bootstrap-4.includes.search')
 
                 @if ($filtersEnabled && $showFilterDropdown)

resources/views/bootstrap-4/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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             @lang('Bulk Actions')

resources/views/bootstrap-4/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::bs4.table.row wire:key="row-message">
         <x-livewire-tables::bs4.table.cell colspan="{{ $colspan }}">
             @if (count($selected) && !$selectAll && !$selectPage)

resources/views/bootstrap-4/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 pl-0 pl-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"

resources/views/bootstrap-4/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"
         >
@@ -22,7 +22,7 @@ class="btn dropdown-toggle d-block w-100 d-md-inline"
             <span class="caret"></span>
         </button>
         <ul
-            class="dropdown-menu w-200 mt-3"
+            class="dropdown-menu w-100 mt-md-3"
             :class="{'show' : open}"
             role="menu"
         >
@@ -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 btn text-center"
                     >
                         @lang('Clear')

resources/views/bootstrap-4/includes/reorder.blade.php

@@ -0,0 +1,15 @@
+@if ($reorderEnabled)
+    <div class="mr-0 mr-md-3 mb-3 mb-md-0">
+        <button
+            wire:click="{{ $reordering ? 'disableReordering' : 'enableReordering' }}"
+            type="button"
+            class="btn btn-default d-block w-100 d-md-inline"
+        >
+            @if ($reordering)
+                @lang('Done Reordering')
+            @else
+                @lang('Reorder')
+            @endif
+        </button>
+    </div>
+@endif

resources/views/bootstrap-4/includes/table.blade.php

@@ -1,10 +1,10 @@
-<x-livewire-tables::bs4.table wire:sortable="{{ $reorderingMethod }}">
+<x-livewire-tables::bs4.table wire:sortable="{{ $reordering ? $reorderingMethod : '' }}">
     <x-slot name="head">
         @if ($reordering)
             <x-livewire-tables::bs4.table.heading />
         @endif
 
-        @if (count($bulkActions))
+        @if ($bulkActionsEnabled && count($bulkActions))
             <x-livewire-tables::bs4.table.heading>
                 <input
                     wire:model="selectPage"
@@ -36,7 +36,7 @@
     <x-slot name="body">
         @php
             $colspan = count($columns);
-            if (count($bulkActions)) $colspan++;
+            if ($bulkActionsEnabled && count($bulkActions)) $colspan++;
             if ($reordering) $colspan++;
         @endphp
 
@@ -47,20 +47,21 @@
                 wire:loading.class.delay="text-muted"
                 wire:key="table-row-{{ $row->{$primaryKey} }}"
                 wire:sortable.item="{{ $row->{$primaryKey} }}"
+                :reordering="$reordering"
                 :url="method_exists($this, 'getTableRowUrl') ? $this->getTableRowUrl($row) : ''"
                 :class="method_exists($this, 'setTableRowClass') ? ' ' . $this->setTableRowClass($row) : ''"
                 :id="method_exists($this, 'setTableRowId') ? $this->setTableRowId($row) : ''"
                 :customAttributes="method_exists($this, 'setTableRowAttributes') ? $this->setTableRowAttributes($row) : []"
             >
                 @if ($reordering)
                     <x-livewire-tables::bs4.table.cell wire:sortable.handle>
-                        <svg xmlns="http://www.w3.org/2000/svg" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="d-inline" style="width:1em;height:1em;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                         </svg>
                     </x-livewire-tables::bs4.table.cell>
                 @endif
 
-                @if (count($bulkActions))
+                @if ($bulkActionsEnabled && count($bulkActions))
                     <x-livewire-tables::bs4.table.cell>
                         <input
                             wire:model="selected"
@@ -76,7 +77,7 @@
             </x-livewire-tables::bs4.table.row>
         @empty
             <x-livewire-tables::bs4.table.row>
-                <x-livewire-tables::bs4.table.cell colspan="{{ count($bulkActions) ? count($columns) + 1 : count($columns) }}">
+                <x-livewire-tables::bs4.table.cell :colspan="$colspan">
                     @lang($emptyMessage)
                 </x-livewire-tables::bs4.table.cell>
             </x-livewire-tables::bs4.table.row>