Skip to content

Commit 099a2d7

Browse files
rappasoftrappasoft
authored
Merge pull request #748 from rappasoft/develop
v2.3
2 parents f7505f3 + 797463b commit 099a2d7

File tree

10 files changed

+330
-1
lines changed

10 files changed

+330
-1
lines changed

‎CHANGELOG.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ All notable changes to `laravel-livewire-tables` will be documented in this file
44

55
## [Unreleased]
66

7+
## [2.3.0] - 2022-04-28
8+
9+
### Added
10+
11+
- Added ability to define additional select statements outside the scope of a column using the `setAdditionalSelects(array $selects)` configuration method.
12+
- Added 8 configurable areas, see `Configurable Areas` of the `Datatable` section of the documentation.
13+
714
## [2.2.1] - 2022-04-27
815

916
### Changed
@@ -611,7 +618,8 @@ Ground Up Rebuild
611618

612619
- Initial release
613620

614-
[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.2.1...development
621+
[Unreleased]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.3.0...development
622+
[2.3.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.2.1...v2.3.0
615623
[2.2.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.2.0...v2.2.1
616624
[2.2.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.1.0...v2.2.0
617625
[2.1.0]: https://github.com/rappasoft/laravel-livewire-tables/compare/v2.0.0...v2.1.0

‎docs/datatable/available-methods.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,21 @@ public function configure(): void
373373
}
374374
```
375375

376+
## Builder
377+
378+
### setAdditionalSelects
379+
380+
By default the only columns defined in the select statement are the ones defined via columns. If you need to define additional selects that you don't have a column for you may:
381+
382+
```php
383+
public function configure(): void
384+
{
385+
$this->setAdditionalSelects(['users.id as id']);
386+
}
387+
```
388+
389+
Since you probably won't have an `ID` column defined, the ID will not be available on the model to use. In the case of an actions column where you have buttons specific to the row, you probably need that, so you can add the select statement to make it available on the model.
390+
376391
## Misc.
377392

378393
### setEmptyMessage

‎docs/datatable/configurable-areas.md

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: Configurable Areas
3+
weight: 3
4+
---
5+
6+
There are certain areas of the datatable as of `v2.3` where you can include your own view files. This is good for adding additional functionality to the toolbar, for example.
7+
8+
## Available Methods
9+
10+
### setConfigurableAreas
11+
12+
You can use the `setConfigurableAreas` method to set the areas that you want to be configurable.
13+
14+
```php
15+
public function configure(): void
16+
{
17+
$this->setConfigurableAreas([
18+
'toolbar-left-start' => 'path.to.my.view',
19+
'toolbar-left-end' => 'path.to.my.view',
20+
'toolbar-right-start' => 'path.to.my.view',
21+
'toolbar-right-end' => 'path.to.my.view',
22+
'before-toolbar' => 'path.to.my.view',
23+
'after-toolbar' => 'path.to.my.view',
24+
'before-pagination' => 'path.to.my.view',
25+
'after-pagination' => 'path.to.my.view',
26+
]);
27+
}
28+
```
29+
30+
**Note:** Only specify the keys you are actually implementing, otherwise you may get uneven spacing.
31+
32+
## Example View
33+
34+
Example dropdown for the toolbar:
35+
36+
```php
37+
@aware(['component'])
38+
39+
@php
40+
$theme = $component->getTheme();
41+
@endphp
42+
43+
@if ($theme === 'tailwind')
44+
<div class="w-full mb-4 md:w-auto md:mb-0">
45+
<div
46+
x-data="{ open: false }"
47+
@keydown.window.escape="open = false"
48+
x-on:click.away="open = false"
49+
class="relative z-10 inline-block w-full text-left md:w-auto"
50+
wire:key="bulk-actions-button-{{ $component->getTableName() }}"
51+
>
52+
<div>
53+
<span class="rounded-md shadow-sm">
54+
<button
55+
x-on:click="open = !open"
56+
type="button"
57+
class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
58+
aria-haspopup="true"
59+
x-bind:aria-expanded="open"
60+
aria-expanded="true"
61+
>
62+
@lang('My Dropdown')
63+
64+
<svg class="w-5 h-5 ml-2 -mr-1" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
65+
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
66+
</svg>
67+
</button>
68+
</span>
69+
</div>
70+
71+
<div
72+
x-cloak
73+
x-show="open"
74+
x-transition:enter="transition ease-out duration-100"
75+
x-transition:enter-start="transform opacity-0 scale-95"
76+
x-transition:enter-end="transform opacity-100 scale-100"
77+
x-transition:leave="transition ease-in duration-75"
78+
x-transition:leave-start="transform opacity-100 scale-100"
79+
x-transition:leave-end="transform opacity-0 scale-95"
80+
class="absolute right-0 z-50 w-full mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg md:w-48 ring-1 ring-black ring-opacity-5 focus:outline-none"
81+
>
82+
<div class="bg-white rounded-md shadow-xs dark:bg-gray-700 dark:text-white">
83+
<div class="py-1" role="menu" aria-orientation="vertical">
84+
<button
85+
wire:click="my-action"
86+
wire:key="bulk-action-my-action-{{ $component->getTableName() }}"
87+
type="button"
88+
class="flex items-center block w-full px-4 py-2 space-x-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 dark:text-white dark:hover:bg-gray-600"
89+
role="menuitem"
90+
>
91+
<span>My Action 1</span>
92+
</button>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
@elseif ($theme === 'bootstrap-4' || $theme === 'bootstrap-5')
99+
<div><!-- Implement Other Themes if needed--></div>
100+
@endif
101+
```
102+
103+
**Note:** If you don't specify the theme conditional, it will show up on every
104+
105+
## Areas
106+
107+
Here are the placements for the available areas:
108+
109+
Toolbar Left Start
110+
![Toolbar Left Start](https://imgur.com/eDQx67u.png)
111+
112+
Toolbar Left End
113+
![Toolbar Left End](https://imgur.com/hmkfoyH.png)
114+
115+
Toolbar Right Start
116+
![Toolbar Right Start](https://imgur.com/V99PQUv.png)
117+
118+
Toolbar Right End
119+
![Toolbar Right End](https://imgur.com/rZgbeYO.png)
120+
121+
Before Toolbar
122+
![Before Toolbar](https://imgur.com/KK9EiSM.png)
123+
124+
After Toolbar
125+
![After Toolbar](https://imgur.com/VL0OGia.png)
126+
127+
Before Pagination
128+
![Before Pagination](https://imgur.com/lVIGpDW.png)
129+
130+
After Pagination
131+
![After Pagination](https://imgur.com/wJR2LEJ.png)

‎resources/views/components/pagination.blade.php

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
$theme = $component->getTheme();
66
@endphp
77

8+
@if ($component->hasConfigurableAreaFor('before-pagination'))
9+
@include($component->getConfigurableAreaFor('before-pagination'))
10+
@endif
11+
812
@if ($theme === 'tailwind')
913
<div>
1014
@if ($component->paginationVisibilityIsEnabled())
@@ -96,3 +100,7 @@
96100
@endif
97101
</div>
98102
@endif
103+
104+
@if ($component->hasConfigurableAreaFor('after-pagination'))
105+
@include($component->getConfigurableAreaFor('after-pagination'))
106+
@endif

‎resources/views/components/tools/toolbar.blade.php

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,17 @@
44
$theme = $component->getTheme();
55
@endphp
66

7+
@if ($component->hasConfigurableAreaFor('before-toolbar'))
8+
@include($component->getConfigurableAreaFor('before-toolbar'))
9+
@endif
10+
711
@if ($theme === 'tailwind')
812
<div class="md:flex md:justify-between mb-4 px-4 md:p-0">
913
<div class="w-full mb-4 md:mb-0 md:w-2/4 md:flex space-y-4 md:space-y-0 md:space-x-2">
14+
@if ($component->hasConfigurableAreaFor('toolbar-left-start'))
15+
@include($component->getConfigurableAreaFor('toolbar-left-start'))
16+
@endif
17+
1018
@if ($component->reorderIsEnabled())
1119
<button
1220
wire:click="{{ $component->currentlyReorderingIsEnabled() ? 'disableReordering' : 'enableReordering' }}"
@@ -126,9 +134,17 @@ class="w-full inline-flex items-center justify-center px-3 py-2 border border-gr
126134
@endif
127135
</div>
128136
@endif
137+
138+
@if ($component->hasConfigurableAreaFor('toolbar-left-end'))
139+
@include($component->getConfigurableAreaFor('toolbar-left-end'))
140+
@endif
129141
</div>
130142

131143
<div class="md:flex md:items-center space-y-4 md:space-y-0 md:space-x-2">
144+
@if ($component->hasConfigurableAreaFor('toolbar-right-start'))
145+
@include($component->getConfigurableAreaFor('toolbar-right-start'))
146+
@endif
147+
132148
@if ($component->showBulkActionsDropdown())
133149
<div class="w-full md:w-auto mb-4 md:mb-0">
134150
<div
@@ -270,6 +286,10 @@ class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150
270286
</select>
271287
</div>
272288
@endif
289+
290+
@if ($component->hasConfigurableAreaFor('toolbar-right-end'))
291+
@include($component->getConfigurableAreaFor('toolbar-right-end'))
292+
@endif
273293
</div>
274294
</div>
275295

@@ -301,6 +321,10 @@ class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">
301321
@elseif ($theme === 'bootstrap-4')
302322
<div class="d-md-flex justify-content-between mb-3">
303323
<div class="d-md-flex">
324+
@if ($component->hasConfigurableAreaFor('toolbar-left-start'))
325+
@include($component->getConfigurableAreaFor('toolbar-left-start'))
326+
@endif
327+
304328
@if ($component->reorderIsEnabled())
305329
<div class="mr-0 mr-md-2 mb-3 mb-md-0">
306330
<button
@@ -410,9 +434,17 @@ class="dropdown-item btn text-center"
410434
</div>
411435
</div>
412436
@endif
437+
438+
@if ($component->hasConfigurableAreaFor('toolbar-left-end'))
439+
@include($component->getConfigurableAreaFor('toolbar-left-end'))
440+
@endif
413441
</div>
414442

415443
<div class="d-md-flex">
444+
@if ($component->hasConfigurableAreaFor('toolbar-right-start'))
445+
@include($component->getConfigurableAreaFor('toolbar-right-start'))
446+
@endif
447+
416448
@if ($component->showBulkActionsDropdown())
417449
<div class="mb-3 mb-md-0">
418450
<div class="dropdown d-block d-md-inline">
@@ -499,6 +531,10 @@ class="form-control"
499531
</select>
500532
</div>
501533
@endif
534+
535+
@if ($component->hasConfigurableAreaFor('toolbar-right-end'))
536+
@include($component->getConfigurableAreaFor('toolbar-right-end'))
537+
@endif
502538
</div>
503539
</div>
504540

@@ -526,6 +562,10 @@ class="d-block">
526562
@elseif ($theme === 'bootstrap-5')
527563
<div class="d-md-flex justify-content-between mb-3">
528564
<div class="d-md-flex">
565+
@if ($component->hasConfigurableAreaFor('toolbar-left-start'))
566+
@include($component->getConfigurableAreaFor('toolbar-left-start'))
567+
@endif
568+
529569
@if ($component->reorderIsEnabled())
530570
<div class="me-0 me-md-2 mb-3 mb-md-0">
531571
<button
@@ -633,9 +673,17 @@ class="dropdown-item text-center"
633673
</div>
634674
</div>
635675
@endif
676+
677+
@if ($component->hasConfigurableAreaFor('toolbar-left-end'))
678+
@include($component->getConfigurableAreaFor('toolbar-left-end'))
679+
@endif
636680
</div>
637681

638682
<div class="d-md-flex">
683+
@if ($component->hasConfigurableAreaFor('toolbar-right-start'))
684+
@include($component->getConfigurableAreaFor('toolbar-right-start'))
685+
@endif
686+
639687
@if ($component->showBulkActionsDropdown())
640688
<div class="mb-3 mb-md-0">
641689
<div class="dropdown d-block d-md-inline">
@@ -722,6 +770,10 @@ class="form-control"
722770
</select>
723771
</div>
724772
@endif
773+
774+
@if ($component->hasConfigurableAreaFor('toolbar-right-end'))
775+
@include($component->getConfigurableAreaFor('toolbar-right-end'))
776+
@endif
725777
</div>
726778
</div>
727779

@@ -747,3 +799,7 @@ class="d-block">
747799
</div>
748800
@endif
749801
@endif
802+
803+
@if ($component->hasConfigurableAreaFor('after-toolbar'))
804+
@include($component->getConfigurableAreaFor('after-toolbar'))
805+
@endif

‎src/Traits/ComponentUtilities.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,17 @@ trait ComponentUtilities
3131
protected $tdAttributesCallback;
3232
protected $collapsingColumnsStatus = true;
3333
protected string $emptyMessage = 'No items found. Try to broaden your search.';
34+
protected array $additionalSelects = [];
35+
protected array $configurableAreas = [
36+
'toolbar-left-start' => null,
37+
'toolbar-left-end' => null,
38+
'toolbar-right-start' => null,
39+
'toolbar-right-end' => null,
40+
'before-toolbar' => null,
41+
'after-toolbar' => null,
42+
'before-pagination' => null,
43+
'after-pagination' => null,
44+
];
3445

3546
/**
3647
* Set the custom query string array for this specific table

‎src/Traits/Configuration/ComponentConfiguration.php

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,4 +281,32 @@ public function setTableRowUrlTarget(callable $callback): self
281281

282282
return $this;
283283
}
284+
285+
/**
286+
* @param $selects
287+
*
288+
* @return $this
289+
*/
290+
public function setAdditionalSelects($selects): self
291+
{
292+
if (! is_array($selects)) {
293+
$selects = [$selects];
294+
}
295+
296+
$this->additionalSelects = $selects;
297+
298+
return $this;
299+
}
300+
301+
/**
302+
* @param $areas
303+
*
304+
* @return $this
305+
*/
306+
public function setConfigurableAreas(array $areas): self
307+
{
308+
$this->configurableAreas = $areas;
309+
310+
return $this;
311+
}
284312
}

0 commit comments

Comments
 (0)