Merge pull request #990 from rappasoft/develop

v2.9.0

Author: rappasoft

CHANGELOG.md

@@ -4,15 +4,32 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
+## [2.9.0] - 2022-12-21
+
+### Added
+
+- Added support for optgroups in SelectFilter - https://github.com/rappasoft/laravel-livewire-tables/pull/962
+- Added information about applying filters on boot - https://github.com/rappasoft/laravel-livewire-tables/pull/949
+- Added ComponentColumn - https://github.com/rappasoft/laravel-livewire-tables/pull/827
+- Added ability to set the pagination mode of `standard` or `simple`
+
+### Changed
+
+- Fixed formatting for relational column - https://github.com/rappasoft/laravel-livewire-tables/pull/757
+- Fixed errors when filter does not exist - https://github.com/rappasoft/laravel-livewire-tables/pull/979
+- Update basic example to represent V2 requirements - https://github.com/rappasoft/laravel-livewire-tables/pull/944
+- Fixed responsive on bootstrap 4 & 5 - https://github.com/rappasoft/laravel-livewire-tables/pull/903
+- Fix for select and checkbox inputs styling with Bootstrap 5 theme - https://github.com/rappasoft/laravel-livewire-tables/pull/864
+
 ## [2.8.0] - 2022-07-24
 
 ### Added
 
 - Added functionality to bookmark or deep link column selection
 - Added functionality to identify different datatable components as unique in column selection
-- Added funcitonality to configure query string alias
-- Added funcitonality to configure session key for column selection (dataTableFingerprint)
-- Added functionality to select/desect all columns in column selection dropdown
+- Added functionality to configure query string alias
+- Added functionality to configure session key for column selection (dataTableFingerprint)
+- Added functionality to select/deselect all columns in column selection dropdown
 - Added French translation - https://github.com/rappasoft/laravel-livewire-tables/pull/816
 - Added Malay translation - https://github.com/rappasoft/laravel-livewire-tables/pull/821
 - Added Dutch translation - https://github.com/rappasoft/laravel-livewire-tables/pull/834

README.md

@@ -41,23 +41,24 @@ use Rappasoft\LaravelLivewireTables\Views\Column;
 
 class UsersTable extends DataTableComponent
 {
-
     protected $model = User::class;
 
+    public function configure(): void
+    {
+        $this->setPrimaryKey('id');
+    }
+
     public function columns(): array
     {
         return [
+            Column::make('ID', 'id')
+                ->sortable(),
             Column::make('Name')
-                ->sortable()
-                ->searchable(),
-            Column::make('E-mail', 'email')
-                ->sortable()
-                ->searchable(),
-            Column::make('Verified', 'email_verified_at')
                 ->sortable(),
         ];
     }
 }
+
 ```
 
 ### [See advanced example](https://rappasoft.com/docs/laravel-livewire-tables/v2/examples/advanced-example)

docs/columns/other-column-types.md

@@ -159,3 +159,28 @@ ButtonGroupColumn::make('Actions')
             }),
     ]),
 ```
+
+## Component Columns
+
+Component columns let you specify a component name and attributes and provides the column value to the slot.
+
+```php
+// Before
+Column::make("Email", "email")
+    ->format(function ($value) {
+        return view('components.alert')
+            ->with('attributes', new ComponentAttributeBag([
+                'type' => Str::endsWith($value, 'example.org') ? 'success' : 'danger',
+                'dismissible' => true,
+            ]))
+            ->with('slot', $value);
+    }),
+
+// After
+ComponentColumn::make('E-mail', 'email')
+    ->component('email')
+    ->attributes(fn ($value, $row, Column $column) => [
+        'type' => Str::endsWith($value, 'example.org') ? 'success' : 'danger',
+        'dismissible' => true,
+    ]),
+```

docs/examples/advanced-example.md

@@ -171,6 +171,19 @@ class UsersTable extends DataTableComponent
                         $builder->where('active', false);
                     }
                 }),
+            SelectFilter::make('Address Group')
+                ->options([
+                    '' => 'All',
+                    AddressGroup::query()
+                        ->orderBy('type')
+                        ->get()
+                        ->groupBy('type')
+                        ->map(fn ($addressGroup) => $addressGroup->pluck('type', 'id')->filter())
+                        ->toArray(),
+                ])
+                ->filter(function(Builder $builder, string $value) {
+                    $builder->where('address_groups.type', $value);
+                }),
             DateFilter::make('Verified From')
                 ->config([
                     'min' => '2020-01-01',

docs/filters/applying-filters.md

@@ -41,6 +41,16 @@ public function builder(): Builder
 
 You can use the `getAppliedFilterWithValue()` method to grab the current value of the filter or null if it is not applied.
 
+## Apply Filters at the Component Boot Level
+
+You may wish to apply default filters i.e. current month on accessing the view in this case you can use:
+
+```php
+public function mount() {
+    $this->setFilter('created_after', date('Y-m-d', strtotime('now -1 month'));
+}
+```
+
 ### A note about integer values
 
 Even if you have your values as strings, but are still using integers, you may have unexpected results when using Eloquent's `when()` method to apply your filters (if going that route).

docs/filters/creating-filters.md

@@ -38,6 +38,34 @@ public function filters(): array
 
 You should supply the first option as the default value. I.e. nothing selected, so the filter is not applied. This value should be an empty string. When this value is selected, the filter will be removed from the query and the query string.
 
+### Option Groups
+
+To use `<optgroup>` elements, pass a nested array of options to the select filter.
+
+```php
+use Rappasoft\LaravelLivewireTables\Views\Filters\SelectFilter;
+
+public function filters(): array
+{
+    return [
+        SelectFilter::make('Active')
+            ->options([
+                '' => 'All',
+                'Open' => [
+                    1 => 'Type A',
+                    2 => 'Type B',
+                    3 => 'Type C',
+                ],
+                'Closed' => [
+                    24 => 'Type X',
+                    25 => 'Type Y',
+                    26 => 'Type Z',
+                ],
+            ]),
+    ];
+}
+```
+
 ## Multi-select Filters
 
 Multi-select filters are a list of checkboxes. The user can select multiple options from the list. There is also an 'All' option that will select all values.

docs/pagination/available-methods.md

@@ -159,3 +159,16 @@ public function configure(): void
 ```
 
 **Note:** The value set must be included in the `per page accepted` values.
+
+## setPaginationMethod
+
+Set the pagination method. By default, the table will use the `paginate` method.
+
+You may specify `simplePaginate` like so:
+
+```php
+public function configure(): void
+{
+    $this->setPaginationMethod('simple');
+}
+```

resources/views/components/pagination.blade.php

@@ -14,7 +14,7 @@
         @if ($component->paginationVisibilityIsEnabled())
             <div class="mt-4 px-4 md:p-0 sm:flex justify-between items-center space-y-4 sm:space-y-0">
                 <div>
-                    @if ($component->paginationIsEnabled() && $rows->lastPage() > 1)
+                    @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
                         <p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
                             <span>@lang('Showing')</span>
                             <span class="font-medium">{{ $rows->firstItem() }}</span>
@@ -24,6 +24,13 @@
                             <span class="font-medium">{{ $rows->total() }}</span>
                             <span>@lang('results')</span>
                         </p>
+                    @elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
+                        <p class="paged-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
+                            <span>@lang('Showing')</span>
+                            <span class="font-medium">{{ $rows->firstItem() }}</span>
+                            <span>@lang('to')</span>
+                            <span class="font-medium">{{ $rows->lastItem() }}</span>
+                        </p>
                     @else
                         <p class="total-pagination-results text-sm text-gray-700 leading-5 dark:text-white">
                             @lang('Showing')
@@ -42,7 +49,7 @@
 @elseif ($theme === 'bootstrap-4')
     <div>
         @if ($component->paginationVisibilityIsEnabled())
-            @if ($component->paginationIsEnabled() && $rows->lastPage() > 1)
+            @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
                 <div class="row mt-3">
                     <div class="col-12 col-md-6 overflow-auto">
                         {{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
@@ -58,6 +65,19 @@
                         <span>@lang('results')</span>
                     </div>
                 </div>
+            @elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
+                <div class="row mt-3">
+                    <div class="col-12 col-md-6 overflow-auto">
+                        {{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
+                    </div>
+
+                    <div class="col-12 col-md-6 text-center text-md-right text-muted">
+                        <span>@lang('Showing')</span>
+                        <strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
+                        <span>@lang('to')</span>
+                        <strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
+                    </div>
+                </div>
             @else
                 <div class="row mt-3">
                     <div class="col-12 text-muted">
@@ -72,7 +92,7 @@
 @elseif ($theme === 'bootstrap-5')
     <div>
         @if ($component->paginationVisibilityIsEnabled())
-            @if ($component->paginationIsEnabled() && $rows->lastPage() > 1)
+            @if ($component->paginationIsEnabled() && $component->isPaginationMethod('standard') && $rows->lastPage() > 1)
                 <div class="row mt-3">
                     <div class="col-12 col-md-6 overflow-auto">
                         {{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
@@ -88,6 +108,19 @@
                         <span>@lang('results')</span>
                     </div>
                 </div>
+            @elseif ($component->paginationIsEnabled() && $component->isPaginationMethod('simple'))
+                <div class="row mt-3">
+                    <div class="col-12 col-md-6 overflow-auto">
+                        {{ $rows->links('livewire-tables::specific.bootstrap-4.pagination') }}
+                    </div>
+
+                    <div class="col-12 col-md-6 text-center text-md-end text-muted">
+                        <span>@lang('Showing')</span>
+                        <strong>{{ $rows->count() ? $rows->firstItem() : 0 }}</strong>
+                        <span>@lang('to')</span>
+                        <strong>{{ $rows->count() ? $rows->lastItem() : 0 }}</strong>
+                    </div>
+                </div>
             @else
                 <div class="row mt-3">
                     <div class="col-12 text-muted">
@@ -103,4 +136,4 @@
 
 @if ($component->hasConfigurableAreaFor('after-pagination'))
     @include($component->getConfigurableAreaFor('after-pagination'), $component->getParametersForConfigurableArea('after-pagination'))
-@endif
+@endif

resources/views/components/table/td/bulk-actions.blade.php

@@ -18,7 +18,7 @@ class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150
                 />
             </div>
         </x-livewire-tables::table.td.plain>
-    @elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    @elseif ($theme === 'bootstrap-4')
         <x-livewire-tables::table.td.plain>
             <input
                 wire:model="selected"
@@ -27,5 +27,17 @@ class="rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150
                 type="checkbox"
             />
         </x-livewire-tables::table.td.plain>
+    @elseif ($theme === 'bootstrap-5')
+        <x-livewire-tables::table.td.plain>
+            <div class="form-check">
+                <input
+                    wire:model="selected"
+                    wire:loading.attr.delay="disabled"
+                    value="{{ $row->{$this->getPrimaryKey()} }}"
+                    type="checkbox"
+                    class="form-check-input"
+                />
+            </div>
+        </x-livewire-tables::table.td.plain>
     @endif
 @endif

resources/views/components/table/td/plain.blade.php

@@ -17,8 +17,8 @@
     <td {{ $attributes
         ->merge($customAttributes)
         ->class(['' => $customAttributes['default'] ?? true])
-        ->class(['none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
-        ->class(['none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
+        ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()])
+        ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()])
         ->except('default')
     }}>{{ $slot }}</td>
 @endif