Merge pull request #739 from rappasoft/develop

v2.2.0

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
 
 ## [Unreleased]
 
+## [2.2.0] - 2022-04-25
+
+### Added
+
+- Added space to include custom markup at the end of the component.
+- Added events documentation
+- Added ability to set columns as deselected by default - https://github.com/rappasoft/laravel-livewire-tables/pull/731
+- Added NumberFilter - https://github.com/rappasoft/laravel-livewire-tables/pull/729
+### Changed 
+
+- Fixed issue with Postgres and quotes - https://github.com/rappasoft/laravel-livewire-tables/pull/734
+
 ## [2.1.0] - 2022-04-12
 
 ### Added
@@ -593,7 +605,8 @@ Ground Up Rebuild
 
 - Initial release
 
-[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.1.0...development
+[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.2.0...development
+[2.2.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.1.0...v2.2.0
 [2.1.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.0.0...v2.1.0
 [2.0.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.20.1...v2.0.0
 [1.21.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v1.20.1...v1.21.0

docs/columns/column-selection.md

@@ -14,6 +14,15 @@ Column::make('Address', 'address.address')
     ->excludeFromColumnSelect(),
 ```
 
+## Deselected by default
+
+If you would like a column to be included in the column select but deselected by default, you can specify:
+
+```php
+Column::make('Address', 'address.address')
+    ->deselected(),
+```
+
 ## Available Methods
 
 ### setColumnSelectStatus

docs/datatable/events.md

@@ -0,0 +1,14 @@
+---
+title: Events
+weight: 2
+---
+
+These are the available events on the datatable component that you can fire from your application:
+
+### refreshDatatable
+
+```php
+$this->emit('refreshDatatable');
+```
+
+Calls `$refresh` on the component. Good for updating from external sources or as an alternative to polling.

docs/examples/advanced-example.md

@@ -222,4 +222,67 @@ class UsersTable extends DataTableComponent
         }
     }
 }
+```
+
+**input-search.blade.php**
+
+```html
+@if (config('livewire-tables.theme') === 'tailwind')
+    <div class="flex rounded-md shadow-sm">
+        <input
+            wire:model.debounce="columnSearch.{{ $field }}"
+            placeholder="Search {{ ucfirst($field) }}"
+            type="text"
+            class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-800 dark:text-white dark:border-gray-600 @if (isset($columnSearch[$field]) && strlen($columnSearch[$field])) rounded-none rounded-l-md focus:ring-0 focus:border-gray-300 @else focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md @endif"
+        />
+
+        @if (isset($columnSearch[$field]) && strlen($columnSearch[$field]))
+            <span wire:click="$set('columnSearch.{{ $field }}', null)" class="inline-flex items-center px-3 text-gray-500 border border-l-0 border-gray-300 cursor-pointer bg-gray-50 rounded-r-md sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </span>
+        @endif
+    </div>
+@endif
+
+@if (config('livewire-tables.theme') === 'bootstrap-4')
+    <div class="mb-3 mb-md-0 input-group">
+        <input
+            wire:model.debounce="columnSearch.{{ $field }}"
+            placeholder="Search {{ ucfirst($field) }}"
+            type="text"
+            class="form-control"
+        >
+
+        @if (isset($columnSearch[$field]) && strlen($columnSearch[$field]))
+            <div class="input-group-append">
+                <button wire:click="$set('columnSearch.{{ $field }}', null)" class="btn btn-outline-secondary" type="button">
+                    <svg style="width:.75em;height:.75em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+        @endif
+    </div>
+@endif
+
+@if (config('livewire-tables.theme') === 'bootstrap-5')
+    <div class="mb-3 mb-md-0 input-group">
+        <input
+            wire:model.debounce="columnSearch.{{ $field }}"
+            placeholder="Search {{ ucfirst($field) }}"
+            type="text"
+            class="form-control"
+        >
+
+        @if (isset($columnSearch[$field]) && strlen($columnSearch[$field]))
+            <button wire:click="$set('columnSearch.{{ $field }}', null)" class="btn btn-outline-secondary" type="button">
+                <svg style="width:.75em;height:.75em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        @endif
+    </div>
+@endif
 ```

docs/misc/custom-markup.md

@@ -0,0 +1,15 @@
+---
+title: Adding Custom Markup
+weight: 3
+---
+
+If you would like to append any custom markup right before the end of the component, you may use the `customView` method and return a view.
+
+This is good for loading extra content such as modals.
+
+```php
+public function customView(): string
+{
+    return 'includes.custom';
+}
+```

docs/misc/debugging.md

@@ -1,6 +1,6 @@
 ---
 title: Debugging
-weight: 3
+weight: 4
 ---
 
 ## Configuration

docs/upgrade-guide.md

@@ -55,3 +55,7 @@ New:
 ```php
 $this->getAppliedFilterWithValue('active');
 ```
+
+## Modals
+
+`modalsView()` was changed to `customView()`

docs/usage/creating-components.md

@@ -22,15 +22,17 @@ class UsersTable extends DataTableComponent
 
     public function configure(): void
     {
-        $this->setPrimaryKey('id')
+        $this->setPrimaryKey('id');
     }
 
     public function columns(): array
     {
-        Column::make('ID', 'id')
-            ->sortable(),
-        Column::make('Name')
-            ->sortable(),
+        return [
+            Column::make('ID', 'id')
+                ->sortable(),
+            Column::make('Name')
+                ->sortable(),
+        ];
     }
 }
 ```

resources/views/components/tools/filters/number.blade.php

@@ -0,0 +1,29 @@
+@php
+    $theme = $component->getTheme();
+@endphp
+
+@if ($theme === 'tailwind')
+    <div class="rounded-md shadow-sm">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="number"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600"
+        />
+    </div>
+@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
+    <div class="mb-3 mb-md-0 input-group">
+        <input
+            wire:model.stop="{{ $component->getTableName() }}.filters.{{ $filter->getKey() }}"
+            wire:key="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            id="{{ $component->getTableName() }}-filter-{{ $filter->getKey() }}"
+            type="number"
+            @if($filter->hasConfig('min')) min="{{ $filter->getConfig('min') }}" @endif
+            @if($filter->hasConfig('max')) max="{{ $filter->getConfig('max') }}" @endif
+            class="form-control"
+        />
+    </div>
+@endif

resources/views/datatable.blade.php

@@ -60,4 +60,8 @@
     </x-livewire-tables::table>
 
     <x-livewire-tables::pagination :rows="$rows" />
+
+    @isset($customView)
+        @include($customView)
+    @endisset
 </x-livewire-tables::wrapper>

src/DataTableComponent.php

@@ -96,6 +96,16 @@ public function builder(): Builder
         throw new DataTableConfigurationException('You must either specify a model or implement the builder method.');
     }
 
+    /**
+     * The view to add any modals for the table, could also be used for any non-visible html
+     *
+     * @return string
+     */
+    public function customView(): string
+    {
+        return 'livewire-tables::stubs.custom';
+    }
+
     /**
      * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
      */
@@ -105,6 +115,7 @@ public function render()
             ->with([
                 'columns' => $this->getColumns(),
                 'rows' => $this->getRows(),
+                'customView' => $this->customView(),
             ]);
     }
 }

src/Traits/WithColumnSelect.php

@@ -29,7 +29,7 @@ public function mountWithColumnSelect(): void
         // Get a list of visible default columns that are not excluded
         $columns = collect($this->getColumns())
             ->filter(function ($column) {
-                return $column->isVisible() && $column->isSelectable();
+                return $column->isVisible() && $column->isSelectable() && $column->isSelected();
             })
             ->map(fn ($column) => $column->getHash())
             ->values()

src/Traits/WithSorting.php

@@ -80,7 +80,7 @@ public function applySorting(Builder $builder): Builder
             } elseif ($column->isBaseColumn()) {
                 $builder->orderBy($column->getColumnSelectName(), $direction);
             } else {
-                $builder->orderByRaw('`'.$column->getColumnSelectName().'`' . ' ' . $direction);
+                $builder->orderByRaw('"'.$column->getColumnSelectName().'"' . ' ' . $direction);
             }
         }
 

src/Views/Column.php

@@ -49,6 +49,7 @@ class Column
     protected $labelCallback;
     protected bool $hidden = false;
     protected bool $selectable = true;
+    protected bool $selected = true;
     protected bool $secondaryHeader = false;
     protected $secondaryHeaderCallback;
     protected bool $footer = false;

src/Views/Filters/NumberFilter.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Views\Filters;
+
+use Rappasoft\LaravelLivewireTables\DataTableComponent;
+use Rappasoft\LaravelLivewireTables\Views\Filter;
+
+class NumberFilter extends Filter
+{
+    public function validate($value)
+    {
+        return is_numeric($value) ? $value : false;
+    }
+
+    public function isEmpty($value): bool
+    {
+        return $value === '';
+    }
+
+    public function render(DataTableComponent $component)
+    {
+        return view('livewire-tables::components.tools.filters.number', [
+            'component' => $component,
+            'filter' => $this,
+        ]);
+    }
+}

src/Views/Traits/Configuration/ColumnConfiguration.php

@@ -149,6 +149,16 @@ public function excludeFromColumnSelect(): self
         return $this;
     }
 
+    /**
+     * @return $this
+     */
+    public function deselected(): self
+    {
+        $this->selected = false;
+
+        return $this;
+    }
+
     /**
      * @param  string  $field
      *

src/Views/Traits/Helpers/ColumnHelpers.php

@@ -413,6 +413,14 @@ public function isSelectable(): bool
         return $this->selectable === true;
     }
 
+    /**
+     * @return bool
+     */
+    public function isSelected(): bool
+    {
+        return $this->selected === true;
+    }
+
     /**
      * @return bool
      */

tests/Views/Traits/Configuration/ColumnConfigurationTest.php

@@ -96,4 +96,16 @@ public function can_make_column_unclickable(): void
 
         $this->assertFalse($column->isClickable());
     }
+
+    /** @test */
+    public function can_deselect_column(): void
+    {
+        $column = Column::make('Name');
+
+        $this->assertTrue($column->isSelected());
+
+        $column->deselected();
+
+        $this->assertFalse($column->isSelected());
+    }
 }