Added checkbox selector to the grid-view component

Gustavinho · Gustavinho · commit b0217bacf1d2 · 2021-06-19T14:38:29.000-05:00
diff --git a/doc/grid-view.md b/doc/grid-view.md
@@ -99,11 +99,14 @@ Name|Description|Type|Value
 model|Model instance for this card|||
 actions|Actions defined in this view class|Array
 hasDefaultAction|Checks if the Grid View has defined a `onCardClick` method|Boolean|true,false
+selected|Defines if the item was selected when the grid view has bulk actions|Boolean|true,false
 
-With all this data you can build your own card component as you need, remember to include the `actions` component.
+With all this data you can build your own card component as you need, remember to include an `actions` component.
 
 ```html
 <x-lv-actions :actions="$actions" :model="$model" />
+<!-- Or -->
+<x-lv-actions.drop-down :actions="$actions" :model="$model" />
 ```
 
 
diff --git a/resources/views/components/actions/drop-down.blade.php b/resources/views/components/actions/drop-down.blade.php
@@ -0,0 +1,8 @@
+@props(['actions' => [], 'model' => null])
+
+<x-lv-drop-down>
+  <x-slot name="trigger">
+    <x-lv-icon-button icon="more-horizontal" size="sm"/>
+  </x-slot>
+  <x-lv-actions.icon-and-title :actions="$actions" :model="$model" />
+</x-lv-drop-down>
diff --git a/resources/views/components/actions/responsive.blade.php b/resources/views/components/actions/responsive.blade.php
@@ -1,16 +1,10 @@
-@props(['actions', 'model'])
+@props(['actions' => [], 'model' => null])
 
 <div>
   @if (count($actions))
     {{-- Mobile actions dropdown --}}
     <div class="lg:hidden text-right relative">
-      <x-lv-drop-down>
-        <x-slot name="trigger">
-          <x-lv-icon-button icon="more-horizontal" size="sm" />
-        </x-slot>
-
-        <x-lv-actions.icon-and-title :actions="$actions" :model="$model" />
-      </x-lv-drop-down>
+      <x-lv-actions.drop-down :actions="$actions" :model="$model" />
     </div>
 
     {{-- Desktop action buttons --}}
diff --git a/resources/views/components/form/checkbox.blade.php b/resources/views/components/form/checkbox.blade.php
@@ -0,0 +1 @@
+<input type="checkbox" {{ $attributes->merge(['class' => 'w-4 h-4 rounded']) }}>
diff --git a/resources/views/components/table.blade.php b/resources/views/components/table.blade.php
@@ -15,7 +15,7 @@
       @if ($this->hasBulkActions)
         <th class="px-3 pr-0">
           <span class="flex items-center justify-center">
-            <input type="checkbox" wire:model="allSelected">
+            <x-lv-checkbox wire:model="allSelected" />
           </span>
         </th>
       @endif
@@ -55,7 +55,7 @@
         @if ($this->hasBulkActions)
           <td class="pr-0 px-3">
             <span class="flex items-center justify-center">
-              <input wire:model="selected" type="checkbox" value="{{ $item->getKey() }}">
+              <x-lv-checkbox value="{{ $item->getKey() }}" wire:model="selected" />
             </span>
           </td>
         @endif
diff --git a/resources/views/grid-view/grid-view-item.blade.php b/resources/views/grid-view/grid-view-item.blade.php
@@ -1,21 +1,22 @@
 @props([
-  'image',
-  'title',
-  'subtitle',
-  'description',
-  'withBackground',
+  'image' => '',
+  'title' => '',
+  'subtitle' => '',
+  'description' => '',
+  'withBackground' => false,
   'model',
-  'actions',
-  'hasDefaultAction'
+  'actions' => [],
+  'hasDefaultAction' => false,
+  'selected' => false
 ])
 
 <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' : '' }}">
+      <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" : "" }}">
     </a>
   @else
-    <img src="{{ $image }}" alt="{{ $image }}" class="rounded-md h-48 w-full object-cover {{ $withBackground ? 'rounded-b-none' : '' }}">
+    <img src="{{ $image }}" alt="{{ $image }}" class="rounded-md h-48 w-full object-cover {{ $withBackground ? 'rounded-b-none' : '' }}  {{ $selected ? "border-2 border-blue-500" : "" }}">
   @endif
 
   <div class="pt-4 {{ $withBackground ? 'bg-white rounded-b-md p-4' : '' }}">
@@ -38,12 +39,7 @@
       </div>
 
       <div class="flex justify-end items-center">
-        <x-lv-drop-down>
-          <x-slot name="trigger">
-            <x-lv-icon-button icon="more-horizontal" size="sm"/>
-          </x-slot>
-          <x-lv-actions.icon-and-title :actions="$actions" :model="$model" />
-        </x-lv-drop-down>
+        <x-lv-actions.drop-down :actions="$actions" :model="$model" />
       </div>
     </div>
 
diff --git a/resources/views/grid-view/grid-view.blade.php b/resources/views/grid-view/grid-view.blade.php
@@ -15,14 +15,23 @@
 
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-{{ $maxCols }} gap-8 md:gap-8">
     @foreach ($items as $item)
-      <x-lv-dynamic-component
+      <div class="relative">
+        @if ($this->hasBulkActions)
+          <div class="absolute top-0 lef-0 p-2">
+            <x-lv-checkbox wire:model="selected" value="{{ $item->getKey() }}"/>
+          </div>
+        @endif
+        <x-lv-dynamic-component
         :view="$cardComponent"
         :data="array_merge($this->card($item), [
             'withBackground' => $withBackground,
             'model' => $item,
             'actions' => $actionsByRow,
-            'hasDefaultAction' => $this->hasDefaultAction])"
+            'hasDefaultAction' => $this->hasDefaultAction,
+            'selected' => in_array($item->getKey(), $selected)
+          ])"
         />
+      </div>
     @endforeach
   </div>
 
diff --git a/resources/views/table-view/table-view.blade.php b/resources/views/table-view/table-view.blade.php
@@ -27,7 +27,7 @@
 
     {{-- Empty data message --}}
     <div class="flex justify-center items-center p-4">
-      <h1>There are no items in this table</h1>
+      <h3>{{ __('There are no items in this table') }}</h3>
     </div>
 
   @endif
diff --git a/src/LaravelViews.php b/src/LaravelViews.php
@@ -20,15 +20,17 @@ public function components()
             'buttons.button' => 'button',
             'dropdown.drop-down' => 'drop-down',
             'dropdown.header' => 'drop-down.header',
-            'actions.actions' => 'actions',
+            'actions.responsive' => 'actions',
+            'actions.drop-down' => 'actions.drop-down',
             'actions.icon-and-title' => 'actions.icon-and-title',
             'actions.icon' => 'actions.icon',
             'attributes-list' => 'attributes-list',
             'alert' => 'alert',
             'alerts-handler' => 'alerts-handler',
             'form.input-group' => 'form.input-group',
             'icon' => 'icon',
-            'modal' => 'modal'
+            'modal' => 'modal',
+            'form.checkbox' => 'checkbox'
         ];
     }
 
diff --git a/src/Views/DataView.php b/src/Views/DataView.php
@@ -2,11 +2,11 @@
 
 namespace LaravelViews\Views;
 
-use LaravelViews\Actions\WithActions;
 use LaravelViews\Data\Contracts\Filterable;
 use LaravelViews\Data\Contracts\Searchable;
 use LaravelViews\Data\Contracts\Sortable;
 use LaravelViews\Data\QueryStringData;
+use LaravelViews\Views\Traits\WithActions;
 use Livewire\WithPagination;
 
 abstract class DataView extends View
@@ -131,14 +131,6 @@ public function updatedAllSelected($value)
         }) : [];
     }
 
-    /**
-     * Computed properties
-     */
-    public function getHasBulkActionsProperty()
-    {
-        return method_exists($this, 'bulkActions') && count($this->bulkActions) > 0;
-    }
-
     /**
      * Returns the items from the database regarding to the filters selected by the user
      * applies the search query, the filters used and the total of items found
diff --git a/src/Views/DetailView.php b/src/Views/DetailView.php
@@ -4,8 +4,8 @@
 
 use Exception;
 use Illuminate\Support\Arr;
-use LaravelViews\Actions\WithActions;
 use LaravelViews\Facades\UI;
+use LaravelViews\Views\Traits\WithActions;
 
 class DetailView extends View
 {
diff --git a/src/Views/Traits/WithActions.php b/src/Views/Traits/WithActions.php
@@ -1,10 +1,9 @@
 <?php
 
-namespace LaravelViews\Actions;
+namespace LaravelViews\Views\Traits;
 
 use Exception;
 use LaravelViews\Actions\Action;
-use LaravelViews\Actions\ExecuteAction;
 
 trait WithActions
 {
@@ -44,14 +43,12 @@ private function executeActionHandler($actionId, $actionableItemId = null)
         $action = $this->findAction($actionId);
 
         if ($action) {
-            /** If the action needs confirmation */
+            // If the action needs confirmation
             if ($this->shouldVerifyConfirmation && $action->shouldBeConfirmed()) {
                 $this->confirmAction($action, $actionableItemId);
             } else {
-                /**
-                 * If $actionableItemId is null then it is a bulk action
-                 * and it uses the current selection
-                 */
+                // If $actionableItemId is null then it is a bulk action
+                // and it uses the current selection
                 $actionableItems = $actionableItemId ? $this->getModelWhoFiredAction($actionableItemId) : $this->selected;
                 $action->view = $this;
                 $action->handle($actionableItems, $this);
@@ -61,24 +58,6 @@ private function executeActionHandler($actionId, $actionableItemId = null)
         }
     }
 
-    public function getActionsProperty()
-    {
-        /**
-         * This `getActions()` function needs to be defined by the
-         * view that is using actions
-         */
-        return $this->getActions();
-    }
-
-    public function getBulkActionsProperty()
-    {
-        if (method_exists($this, 'bulkActions')) {
-            return $this->bulkActions();
-        }
-
-        return [];
-    }
-
     /**
      * Opens confirmation modal for a specific action
      * @param Action $action
@@ -109,4 +88,28 @@ function ($actionToFind) use ($actionId) {
             }
         );
     }
+
+    /**
+     * Computed properties
+     */
+    public function getActionsProperty()
+    {
+         // This `getActions()` function needs to be defined by the
+         // view that is using actions
+        return $this->getActions();
+    }
+
+    public function getBulkActionsProperty()
+    {
+        if (method_exists($this, 'bulkActions')) {
+            return $this->bulkActions();
+        }
+
+        return [];
+    }
+
+    public function getHasBulkActionsProperty()
+    {
+        return method_exists($this, 'bulkActions') && count($this->bulkActions) > 0;
+    }
 }
diff --git a/tests/Feature/BulkActionsTest.php b/tests/Feature/BulkActionsTest.php
@@ -16,7 +16,7 @@ class BulkActionsTest extends TestCase
     public function testSeeCheckBoxesWhenBulkActionsIsDefiend()
     {
         $user = factory(UserTest::class)->create();
-        $input = '<input wire:model="selected" type="checkbox" value="'.$user->getKey().'">';
+        $input = '<input type="checkbox" class="w-4 h-4 rounded" value="'.$user->getKey().'" wire:model="selected">';
 
         Livewire::test(MockTableViewWithActions::class)
             ->assertDontSeeHtml($input);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<input type="checkbox" {{ $attributes->merge(['class' => 'w-4 h-4 rounded']) }}>`