Added checkbox selector to the list-view component

Author: Gustavinho

resources/views/components/buttons/select.blade.php

@@ -14,5 +14,7 @@
   class="border border-transparent hover:border-gray-300 focus:border-gray-300 focus:outline-none flex items-center gap-1 text-xs px-3 py-2 rounded hover:shadow-sm font-medium"
 >
   {{ $slot }}
-  <i data-feather="{{ $icon }}" class="w-4 h-4"></i>
+  @if ($icon)
+    <i data-feather="{{ $icon }}" class="w-4 h-4"></i>
+  @endif
 </button>

resources/views/components/form/input-group.blade.php

@@ -19,7 +19,7 @@
     {{ $label ?? '' }}
   </label>
   <input
-    class="appearance-none w-full bg-white border-gray-300 hover:border-gray-500 px-4 py-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-blue-400 focus:border-2 border"
+    class="appearance-none w-full bg-white border-gray-300 hover:border-gray-500 px-3 py-2 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500 focus:border-2 border"
     type="text"
     name="{{ $name ?? '' }}"
     placeholder="{{ $placeholder ?? ''}}"
@@ -30,7 +30,7 @@ class="appearance-none w-full bg-white border-gray-300 hover:border-gray-500 px-
     wire:model="{{ $model ?? '' }}"
   >
   <div class="absolute right-0 top-0 mt-2 mr-4 text-purple-lighter">
-    <a wire:click="{{ $onClick ?? '' }}" href="#" class="text-gray-400 hover:text-blue-600">
+    <a wire:click.prevent="{{ $onClick ?? '' }}" href="#" class="text-gray-400 hover:text-blue-600">
       <i data-feather="{{ $icon }}" class="w-4"></i>
     </a>
   </div>

resources/views/components/table.blade.php

@@ -13,7 +13,7 @@
   <thead class="border-b border-t border-gray-200 bg-gray-100 text-xs leading-4 font-semibold uppercase tracking-wider text-left">
     <tr>
       @if ($this->hasBulkActions)
-        <th class="px-3 pr-0">
+        <th class="pl-3">
           <span class="flex items-center justify-center">
             <x-lv-checkbox wire:model="allSelected" />
           </span>
@@ -53,7 +53,7 @@
     @foreach ($items as $item)
       <tr class="border-b border-gray-200 text-sm" wire:key="{{ $item->getKey() }}">
         @if ($this->hasBulkActions)
-          <td class="pr-0 px-3">
+          <td class="pl-3">
             <span class="flex items-center justify-center">
               <x-lv-checkbox value="{{ $item->getKey() }}" wire:model="selected" />
             </span>

resources/views/components/toolbar/bulk-actions.blade.php

@@ -0,0 +1,17 @@
+<div class="flex space-x-1">
+  @if (count($selected) > 0)
+    <x-lv-drop-down label='Actions'>
+      <x-lv-drop-down.header label='{{ count($selected) }} Selected' />
+      <x-lv-actions.icon-and-title :actions="$this->bulkActions" />
+    </x-lv-drop-down>
+  @endif
+
+  @if ($this->hasBulkActions && isset($headers) <= 0)
+    <button
+      wire:click="$set('allSelected', {{ !$allSelected }})"
+      class="border border-transparent hover:border-gray-300 focus:border-gray-300 focus:outline-none flex items-center gap-1 text-xs px-3 py-2 rounded hover:shadow-sm font-medium"
+    >
+      {{ __($allSelected ? 'Unselect all' : 'Select all') }}
+    </button>
+  @endif
+</div>

resources/views/components/toolbar/toolbar.blade.php

@@ -13,16 +13,11 @@
   </div>
 
   {{-- Actions on the left --}}
-  <div class="flex gap-2 flex-1 justify-end items-center mb-4">
+  <div class="flex space-x-1 flex-1 justify-end items-center mb-4">
     {{-- Bulk actions --}}
-    @if (count($selected) > 0)
-      <div>
-        <x-lv-drop-down label='Actions'>
-          <x-lv-drop-down.header label='{{ count($selected) }} Selected' />
-          <x-lv-actions.icon-and-title :actions="$this->bulkActions" />
-        </x-lv-drop-down>
-      </div>
-    @endif
+    <div>
+      @include('laravel-views::components.toolbar.bulk-actions')
+    </div>
 
     {{-- Sorting --}}
     @if (isset($sortableBy) && $sortableBy->isNotEmpty())

resources/views/grid-view/grid-view-item.blade.php

@@ -13,10 +13,10 @@
 <div class="{{ $withBackground ? 'rounded-md shadow-md' : '' }}">
   @if ($hasDefaultAction)
     <a href="#!" wire:click.prevent="onCardClick({{ $model->id }})">
-      <img src="{{ $image }}" alt="{{ $image }}" class="hover:shadow-lg cursor-pointer rounded-md h-48 w-full object-cover {{ $withBackground ? 'rounded-b-none' : '' }} {{ $selected ? "border-2 border-blue-500" : "" }}">
+      <img src="{{ $image }}" alt="{{ $image }}" class="hover:shadow-lg cursor-pointer rounded-md h-48 w-full object-cover {{ $withBackground ? 'rounded-b-none' : '' }} {{ $selected ? variants('gridView.selected') : "" }}">
     </a>
   @else
-    <img src="{{ $image }}" alt="{{ $image }}" class="rounded-md h-48 w-full object-cover {{ $withBackground ? 'rounded-b-none' : '' }}  {{ $selected ? "border-2 border-blue-500" : "" }}">
+    <img src="{{ $image }}" alt="{{ $image }}" class="rounded-md h-48 w-full object-cover {{ $withBackground ? 'rounded-b-none' : '' }}  {{ $selected ? variants('gridView.selected') : "" }}">
   @endif
 
   <div class="pt-4 {{ $withBackground ? 'bg-white rounded-b-md p-4' : '' }}">

resources/views/list-view/list-view.blade.php

@@ -6,8 +6,15 @@
 
   <div>
     @foreach ($items as $item)
-      <div class="border-b border-gray-200 py-2 px-4">
-        <x-lv-dynamic-component :view="$itemComponent" :data="array_merge($this->data($item), ['actions' => $actionsByRow, 'model' => $item])" />
+      <div class="flex items-center border-b border-gray-200 ">
+        @if ($this->hasBulkActions)
+          <div class="h-full flex items-center pl-3 md:pl-4">
+            <x-lv-checkbox wire:model="selected" value="{{ $item->getKey() }}" />
+          </div>
+        @endif
+        <div class="py-2 px-3 md:px-4 flex-1">
+          <x-lv-dynamic-component :view="$itemComponent" :data="array_merge($this->data($item), ['actions' => $actionsByRow, 'model' => $item])" />
+        </div>
       </div>
     @endforeach
   </div>

src/Views/DataView.php

@@ -128,7 +128,7 @@ public function updatedAllSelected($value)
     {
         $this->selected = $value ? $this->query->pluck('id')->map(function ($id) {
             return (string)$id;
-        }) : [];
+        })->toArray() : [];
     }
 
     /**

src/config/laravel-views.php

@@ -14,10 +14,6 @@
         "primary-light" => "text-blue-700 border border-blue-600 hover:bg-blue-600 hover:text-white focus:bg-blue-600 focus:text-white active:bg-blue-600 active:text-white",
     ],
 
-    "paginator" => [
-        "primary" => "bg-blue-600 border-blue-600"
-    ],
-
     "alerts" => [
         "success" => [
             "base" => "bg-green-100 border-green-300 text-green-700",
@@ -57,5 +53,9 @@
 
     'links' => [
         'default' => 'hover:text-blue-600 hover:underline'
+    ],
+
+    'gridView' => [
+        'selected' => 'border-2 border-blue-500'
     ]
 ];

tests/Feature/BulkActionsTest.php

@@ -41,7 +41,7 @@ public function testSelectUnselectAll()
 
         Livewire::test(MockTableViewWithBulkActions::class)
             ->set('allSelected', true)
-            ->assertSet('selected', $users->pluck('id'))
+            ->assertSet('selected', $users->pluck('id')->toArray())
             ->set('allSelected', false)
             ->assertSet('selected', []);
     }
@@ -51,7 +51,7 @@ public function testExecuteActionToSelectedRows()
         $users = factory(UserTest::class, 7)->create();
 
         Livewire::test(MockTableViewWithBulkActions::class)
-            ->set('selected', $users->pluck('id'))
+            ->set('allSelected', true)
             ->call('executeBulkAction', 'test-delete-users-action', true)
             ->assertEmitted('notify', [
                 'message' => 'Action was executed successfully',
@@ -87,6 +87,4 @@ public function testExecuteBulkActionsWithConfirmationMessage()
             $this->assertDatabaseMissing('users', $user->toArray());
         }
     }
-
-    // Execute bulk actions with confirmation
 }