Merge pull request #100 from Gustavinho/refactor/use-card-item-as-blade-components

Refactor/use card item as blade components

Author: Gustavinho

doc/grid-view.md

@@ -62,12 +62,35 @@ These are the fields by default but you can add more if you want to customize yo
 
 ## Customizing card data
 
-The grid view has a card component by default with some data but you can either create your own card and use as much data as you need in the `card` mthod and just use your own card implementation, you just need to specify a blade file.
+The grid view has a card component by default with some data, however, you can create your own card component and use as much data as you need in the `card` method, you just need to specify a blade file with your Grid View and return the data that you need in the `card` method.
 
 ```php
 public $cardComponent = 'components.my-card';
+
+public function card($model) {
+    return [
+        'name' => $model->name,
+        'email' => $model->email,
+        'model' => $model
+    ];
+}
+```
+
+All the data returned in the `card` method will be received as a prop in your blade component alog with these other default props that you can use based on your needs.
+
+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
+
+With all this data you can build your own card component as you need, remember to include the `actions` component.
+
+```html
+<x-lv-actions :actions="$actions" :model="$model" />
 ```
 
+
 ## Default card item action
 You can define a default action that will be fired clicking on the card image or the card title, this action gets the model instance that fired it.
 

resources/views/components/actions/drop-down.blade.php

@@ -0,0 +1,9 @@
+@props(['actions', 'model'])
+
+<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>

resources/views/components/card.blade.php …views/grid-view/grid-view-item.blade.phpresources/views/components/card.blade.php renamed to resources/views/grid-view/grid-view-item.blade.php resources/views/components/card.blade.php renamed to resources/views/grid-view/grid-view-item.blade.php

@@ -1,16 +1,21 @@
+@props([
+  'image',
+  'title',
+  'subtitle',
+  'description',
+  'withBackground',
+  'model',
+  'actions',
+  'hasDefaultAction'
+])
+
 <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' : '' }}">
     </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' : '' }}">
   @endif
 
   <div class="pt-4 {{ $withBackground ? 'bg-white rounded-b-md p-4' : '' }}">
@@ -38,7 +43,6 @@ class="rounded-md h-48 w-full object-cover {{ $withBackground ? 'rounded-b-none'
             <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>
       </div>
     </div>

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

@@ -5,11 +5,7 @@
 
 You can customize all the html and css classes but YOU MUST KEEP THE BLADE AND LIVEWIERE DIRECTIVES
 
-UI components used:
-  - table-view.filters
-  - components.alert
-  - components.card
-  - components.paginator --}}
+--}}
 
 <x-lv-layout>
   {{-- Search input and filters --}}
@@ -19,16 +15,14 @@
 
   <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)
-      @component($cardComponent, array_merge(
-          $view->card($item),
-          [
+      <x-lv-dynamic-component
+        :view="$cardComponent"
+        :data="array_merge($this->card($item), [
             'withBackground' => $withBackground,
             'model' => $item,
             'actions' => $actionsByRow,
-            'hasDefaultAction' => $this->hasDefaultAction
-          ]
-        ))
-      @endcomponent
+            'hasDefaultAction' => $this->hasDefaultAction])"
+        />
     @endforeach
   </div>
 

src/Views/GridView.php

@@ -7,7 +7,7 @@ class GridView extends DataView
     /** Component name */
     protected $view = 'grid-view.grid-view';
 
-    public $cardComponent = 'laravel-views::components.card';
+    public $cardComponent = 'laravel-views::grid-view.grid-view-item';
 
     /** Add a white background on each card */
     public $withBackground = false;

stubs/grid-view.stub

@@ -20,9 +20,9 @@ class DummyClass extends GridView
     /**
      * Sets the data to every card on the view
      *
-     * @param $item Current model for each card
+     * @param $model Current model for each card
      */
-    public function card($item)
+    public function card($model)
     {
         return [
             'image' => '',