Merge pull request #215 from rappasoft/develop

Develop

Author: rappasoft

CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.4] - 2021-04-18
+
+### Added
+
+- `$searchFilterDebounce`, `$searchFilterDefer`, `$searchFilterLazy`, for defining the search input data binding property. https://github.com/rappasoft/laravel-livewire-tables/pull/211
+- Remove ability to need to define filters if not defining defaults. https://github.com/rappasoft/laravel-livewire-tables/pull/213
+
+### Changed
+
+- Rearrange wire:keys
+
 ## [1.0.3] - 2021-04-18
 
 ### Added
@@ -181,7 +192,8 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 - Initial release
 
-[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.3...development
+[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.4...development
+[1.0.4]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.3...v1.0.4
 [1.0.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.2...v1.0.3
 [1.0.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.0.0...v1.0.1

README.md

@@ -234,22 +234,7 @@ You will see how to get more out of this base query using filters and search bel
 
 Creating filters is not required, and the filters box will be hidden if none are defined.
 
-Creating filters requires a few easy steps.
-
-#### Adding to the filters array
-
-You must first define a filter key in the **$filters** array, this tells the component to save the filter status in the query string for page reloads, as well as let you set a default.
-
-```php
-public array $filters = [
-    'type' => null,
-    'active' => null,
-];
-```
-
-#### Defining the filter UI
-
-After you define the filters for the component, you must specify their options using the **filters()** method.
+#### Defining the filters
 
 Right now the only supported filter type is a select dropdown.
 
@@ -273,10 +258,21 @@ public function filters(): array
 }
 ```
 
-You specify your filters array using the **key** as the filter name supplied in the **$filters** array on the component.
-
 The keys of the options you supply will be validated on select to make sure they match one of the options on the backend, otherwise it will be changed to _null_ for safety.
 
+#### Setting filter defaults
+
+When you define the filters, a class property of $filters is generated for you.
+
+```php
+public array $filters = [
+    'type' => null,
+    'active' => null,
+];
+```
+
+You may overwrite this property to set defaults to your filters if you would like.
+
 #### Alternate: Defining a filter view
 
 If you want full control over your filters, you can omit the **filters()** method and instead add a **filtersView()** method that return the string view name, which will be included in the master component on render. This is useful when you have different types of filters than the package offers:
@@ -386,15 +382,18 @@ In the component you have access to `$this->selectedRowsQuery` which is a **Buil
 
 There are some class level properties you can set:
 
-| Property | Default | Usage |
-| -------- | ------- | ----- |
-| $showSearch | true | Show the search box |
-| $showPerPage | true | Show the per page selector |
-| $showPagination | true | Show the pagination |
-| $showSorting | true | Show the sorting pills |
-| $showFilters | true | Show the filter pills |
-| $refresh | false | Whether or not to refresh the table at a certain interval. false = off, int = ms, string = functionCall |
-| $offlineIndicator | true | Shows a red banner when there is no internet connection. |
+| Property | Default | Options | Usage |
+| -------- | ------- | ------- | ----- |
+| $showSearch | true | bool | Show the search box |
+| $showPerPage | true | bool | Show the per page selector |
+| $showPagination | true | bool | Show the pagination |
+| $showSorting | true | bool | Show the sorting pills |
+| $showFilters | true | bool | Show the filter pills |
+| $searchFilterDebounce | null | null/int | Adds a debounce of `$searchFilterDebounce` ms to the search input |
+| $searchFilterDefer | null | null/bool | Adds `.defer` to the search input |
+| $searchFilterLazy | null | null/bool | Adds `.lazy` to the search input |
+| $refresh | false | false/int/string | Whether or not to refresh the table at a certain interval. false = off, int = ms, string = functionCall |
+| $offlineIndicator | true | bool | Shows a red banner when there is no internet connection. |
 
 #### Using more than one table on a page
 
@@ -618,9 +617,11 @@ The final result would look like:
 ## To-do/Roadmap
 
 - [x] Bootstrap 4 Template
+- [x] Bootstrap 5 Template
 - [ ] Sorting By Relationships
 - [ ] Test Suite
 - [ ] Column Search
+- [ ] Greater Configurability
 
 ## Changelog
 

resources/views/bootstrap-4/includes/bulk-actions.blade.php

@@ -6,7 +6,14 @@
 
         <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="bulkActions">
             @foreach($bulkActions as $action => $title)
-                <a href="#" wire:click.prevent="{{ $action }}" class="dropdown-item">{{ $title }}</a>
+                <a
+                    href="#"
+                   wire:click.prevent="{{ $action }}"
+                   wire:key="bulk-action-{{ $action }}"
+                   class="dropdown-item"
+                >
+                    {{ $title }}
+                </a>
             @endforeach
         </div>
     </div>

resources/views/bootstrap-4/includes/filter-pills.blade.php

@@ -1,11 +1,11 @@
 @if ($showFilters && count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
-    <div wire:key="filter-badges" class="mb-3">
+    <div class="mb-3">
         <small class="text-secondary">@lang('Applied Filters'):</small>
 
         @foreach($filters as $key => $value)
             @if ($key !== 'search' && strlen($value))
                 <span
-                    wire:key="filter-{{ $key }}"
+                    wire:key="filter-pill-{{ $key }}"
                     class="badge badge-pill badge-info d-inline-flex align-items-center"
                 >
                     {{ $filterNames[$key] ?? ucwords(strtr($key, ['_' => ' ', '-' => ' '])) }}: {{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}

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

@@ -17,7 +17,7 @@
                     @include($filtersView)
                 @elseif (count($customFilters))
                     @foreach ($customFilters as $key => $filter)
-                        <div class="p-2">
+                        <div wire:key="filter-{{ $key }}" class="p-2">
                             @if ($filter->isSelect())
                                 <label for="filter-{{ $key }}" class="mb-2">
                                     {{ $filter->name() }}

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

@@ -1,7 +1,7 @@
 @if ($showSearch)
     <div class="mb-3 mb-md-0 input-group">
         <input
-            wire:model.debounce.250ms="filters.search"
+            wire:model{{ $this->searchFilterOptions }}="filters.search"
             placeholder="{{ __('Search') }}"
             type="text"
             class="form-control"

resources/views/bootstrap-4/includes/sorting-pills.blade.php

@@ -1,10 +1,10 @@
 @if ($showSorting && count($sorts))
-    <div wire:key="sort-badges" class="mb-3">
+    <div class="mb-3">
         <small class="text-secondary">@lang('Applied Sorting'):</small>
 
         @foreach($sorts as $col => $dir)
             <span
-                wire:key="sort-{{ $col }}"
+                wire:key="sorting-pill-{{ $col }}"
                 class="badge badge-pill badge-info d-inline-flex align-items-center"
             >
                 <span>{{ $sortNames[$col] ?? ucwords(strtr($col, ['_' => ' ', '-' => ' '])) }}: {{ $dir === 'asc' ? 'A-Z' : 'Z-A' }}</span>

resources/views/bootstrap-5/includes/bulk-actions.blade.php

@@ -6,7 +6,14 @@
 
         <div class="dropdown-menu dropdown-menu-end w-100" aria-labelledby="bulkActions">
             @foreach($bulkActions as $action => $title)
-                <a href="#" wire:click.prevent="{{ $action }}" class="dropdown-item">{{ $title }}</a>
+                <a
+                    href="#"
+                    wire:click.prevent="{{ $action }}"
+                    wire:key="bulk-action-{{ $action }}"
+                    class="dropdown-item"
+                >
+                    {{ $title }}
+                </a>
             @endforeach
         </div>
     </div>

resources/views/bootstrap-5/includes/filter-pills.blade.php

@@ -1,11 +1,11 @@
 @if ($showFilters && count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
-    <div wire:key="filter-badges" class="mb-3">
+    <div class="mb-3">
         <small class="text-secondary">@lang('Applied Filters'):</small>
 
         @foreach($filters as $key => $value)
             @if ($key !== 'search' && strlen($value))
                 <span
-                    wire:key="filter-{{ $key }}"
+                    wire:key="filter-pill-{{ $key }}"
                     class="badge rounded-pill bg-info d-inline-flex align-items-center"
                 >
                     {{ $filterNames[$key] ?? ucwords(strtr($key, ['_' => ' ', '-' => ' '])) }}: {{ ucwords(strtr($value, ['_' => ' ', '-' => ' '])) }}

resources/views/bootstrap-5/includes/filters.blade.php

@@ -17,7 +17,7 @@
                     @include($filtersView)
                 @elseif (count($customFilters))
                     @foreach ($customFilters as $key => $filter)
-                        <div class="p-2">
+                        <div wire:key="filter-{{ $key }}" class="p-2">
                             @if ($filter->isSelect())
                                 <label for="filter-{{ $key }}" class="mb-2">
                                     {{ $filter->name() }}