Changes

- Added loading message to table body if $loadingIndicator is true
- Add clear button option to search box
- $disableSearchOnLoading default to false
- Trim the search term when processing
- Existing loading subview for tbody message

Author: rappasoft

CHANGELOG.md

@@ -12,13 +12,19 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 - Make docblocks work with psalm
 - Added searching method either debounce or lazy
 - Allow dot notation for customer attributes
+- Added loading message to table body if $loadingIndicator is true
+- Add clear button option to search box
 
 ### Changed
 
 - Updated Livewire to 1.3
+- $disableSearchOnLoading default to false
+- Trim the search term when processing
 
 ### Removed
 
+- Existing loading subview for tbody message
+
 ## [0.1.6] - 2020-06-15
 
 ### Changed

README.md

@@ -162,10 +162,13 @@ You can override any of these in your table component:
 | $searchEnabled | true | Whether or not searching is enabled |
 | $searchUpdateMethod | debounce | debounce or lazy |
 | $searchDebounce | 350 | Amount of time in ms to wait to send the search query and refresh the table |
-| $disableSearchOnLoading | true | Whether or not to disable the search bar when it is searching/loading new data | 
+| $disableSearchOnLoading | false | Whether or not to disable the search bar when it is searching/loading new data | 
 | $search | *none* | The initial search string |
 | $searchLabel | Search... | The placeholder for the search box |
 | $noResultsMessage | There are no results to display for this query. | The message to display when there are no results |
+| $clearSearchButton | false | Adds a clear button to the search input |
+| $clearSearchButtonClass | btn btn-outline-dark | The class applied to the clear button |
+| $clearSearchButtonLabel | Search | The label of the search button |
 
 #### Sorting
 

resources/views/includes/_body.blade.php

@@ -1,4 +1,12 @@
-<tbody>
+@if ($loadingIndicator)
+    <tbody wire:loading>
+        <tr><td colspan="{{ collect($columns)->count() }}">{{ $loadingMessage }}</td></tr>
+    </tbody>
+
+    <tbody wire:loading.remove>
+@else
+    <tbody>
+@endif
     @if($models->isEmpty())
         <tr><td colspan="{{ collect($columns)->count() }}">{{ $noResultsMessage }}</td></tr>
     @else

resources/views/includes/_loading.blade.php

@@ -20,14 +20,23 @@
 
         @if ($searchEnabled)
             <div class="col">
-                <input
-                    @if (is_numeric($searchDebounce) && $searchUpdateMethod === 'debounce') wire:model.debounce.{{ $searchDebounce }}ms="search" @endif
-                    @if ($searchUpdateMethod === 'lazy') wire:model.lazy="search" @endif
-                    @if ($disableSearchOnLoading) wire:loading.attr="disabled" @endif
-                    class="form-control"
-                    type="text"
-                    placeholder="{{ $searchLabel }}"
-                />
+                @if ($clearSearchButton)
+                    <div class="input-group">
+                @endif
+                    <input
+                        @if (is_numeric($searchDebounce) && $searchUpdateMethod === 'debounce') wire:model.debounce.{{ $searchDebounce }}ms="search" @endif
+                        @if ($searchUpdateMethod === 'lazy') wire:model.lazy="search" @endif
+                        @if ($disableSearchOnLoading) wire:loading.attr="disabled" @endif
+                        class="form-control"
+                        type="text"
+                        placeholder="{{ $searchLabel }}"
+                    />
+                @if ($clearSearchButton)
+                        <div class="input-group-append">
+                            <button class="{{ $clearSearchButtonClass }}" type="button" wire:click="clearSearch">{{ $clearSearchButtonLabel }}</button>
+                        </div>
+                    </div>
+                @endif
             </div>
         @endif
     </div>

resources/views/includes/_options.blade.php

@@ -7,7 +7,6 @@
 @endif
     @include('laravel-livewire-tables::includes._offline')
     @include('laravel-livewire-tables::includes._options')
-    @include('laravel-livewire-tables::includes._loading')
 
     @if (is_string($responsive))
         <div class="{{ $responsive }}">

resources/views/table-component.blade.php

@@ -72,6 +72,7 @@ public function setTranslationStrings()
         $this->noResultsMessage = __('There are no results to display for this query.');
         $this->perPageLabel = __('Per Page');
         $this->searchLabel = __('Search...');
+        $this->clearSearchButtonLabel = __('Clear');
     }
 
     /**

src/TableComponent.php

@@ -16,7 +16,14 @@ trait Loading
      *
      * @var bool
      */
-    public $loadingIndicator = false;
+    public $loadingIndicator = true;
+
+    /**
+     * Whether or not to disable the search bar when it is searching/loading new data.
+     *
+     * @var bool
+     */
+    public $disableSearchOnLoading = false;
 
     /**
      * The loading message that gets displayed.

src/Traits/Loading.php

@@ -32,13 +32,6 @@ trait Search
      */
     public $searchDebounce = 350;
 
-    /**
-     * Whether or not to disable the search bar when it is searching/loading new data.
-     *
-     * @var bool
-     */
-    public $disableSearchOnLoading = true;
-
     /**
      * The initial search string.
      *
@@ -59,4 +52,33 @@ trait Search
      * @var string
      */
     public $noResultsMessage;
+
+    /**
+     * A button to clear the search box
+     *
+     * @var bool
+     */
+    public $clearSearchButton = false;
+
+    /**
+     * The text for the clear search box button
+     *
+     * @var
+     */
+    public $clearSearchButtonLabel;
+
+    /**
+     * The classes to apply to the clear search box button
+     *
+     * @var string
+     */
+    public $clearSearchButtonClass = 'btn btn-outline-dark';
+
+    /**
+     * Resets the search string
+     */
+    public function clearSearch() : void
+    {
+        $this->search = '';
+    }
 }