Skip to content

Commit abce65a

Browse files
lrljoelrljoe
authored
v3.4.17 - Development to Master (rappasoft#1917)
## [v3.4.17] - 2024-09-01 ### New Features - Add hide table option by @lrljoe in rappasoft#1914 - Add column select session methods by @lrljoe in rappasoft#1913 - Save filter selection to session (BETA) by @lrljoe in rappasoft#1910 ### Tweaks - Use Core Attribute Bag by @lrljoe in rappasoft#1916 - Use Core HasTheme Methods by @lrljoe in rappasoft#1915
1 parent c576c28 commit abce65a

39 files changed

+705
-433
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
All notable changes to `laravel-livewire-tables` will be documented in this file
44

5+
## [v3.4.17] - 2024-09-01
6+
### New Features
7+
- Add hide table option by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1914
8+
- Add column select session methods by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1913
9+
- Save filter selection to session (BETA) by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1910
10+
11+
### Tweaks
12+
- Use Core Attribute Bag by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1916
13+
- Use Core HasTheme Methods by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1915
14+
515
## [v3.4.16] - 2024-08-27
616
### New Features
717
- Add icon column by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1902

‎docs/filters/available-methods.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,30 @@ public function configure(): void
182182
}
183183
```
184184

185+
### storeFiltersInSessionEnabled
186+
187+
Optional behaviour - stores filter values in the session (specific to table - based on the table name)
188+
189+
#### Exercise Caution
190+
If re-using the same Livewire Table Component multiple times in your site, with the same table name, this may cause clashes in filter values
191+
192+
```php
193+
public function configure(): void
194+
{
195+
$this->storeFiltersInSessionEnabled();
196+
}
197+
```
198+
### storeFiltersInSessionDisabled
199+
200+
Default behaviour - does not store filters in the session
201+
202+
```php
203+
public function configure(): void
204+
{
205+
$this->storeFiltersInSessionDisabled();
206+
}
207+
```
208+
185209

186210
----
187211

‎docs/misc/hiding-the-table.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: Hiding The Table (beta)
3+
weight: 8
4+
---
5+
6+
You may wish to hide the table on load. To do so, you should use the following in the mount method. Note that this is in mount, not boot nor configure!
7+
8+
```php
9+
public function mount()
10+
{
11+
$this->setShouldBeHidden();
12+
}
13+
```
14+
15+
### Using Events To Display/Hide
16+
17+
For example, you may have a "Sales" table that you wish to hide by default:
18+
```php
19+
class SalesTable extends DataTableComponent
20+
{
21+
public string $tableName = 'sales'; // Required to keep the call specific
22+
23+
public function mount()
24+
{
25+
$this->setShouldBeHidden(); // Defaults the table to be hidden, note that this is in MOUNT and not CONFIGURE
26+
}
27+
28+
// Configure/Columns/Filters etc
29+
}
30+
```
31+
32+
The Table allows for different approaches, out-of-the-box it supports the more efficient client-side listeners.
33+
34+
However - should you wish to use Livewire listeners in your table component, for example if you wish to pass more detail into the Table then you can:
35+
36+
```php
37+
#[On('showTable.{tableName}')]
38+
public function showTable(): void
39+
{
40+
$this->setShouldBeDisplayed();
41+
}
42+
43+
#[On('hideTable.{tableName}')]
44+
public function hideTable(): void
45+
{
46+
$this->setShouldBeHidden();
47+
}
48+
```
49+
50+
51+
### Secondary Table
52+
Below are the two approaches. Note that you can customise the Livewire "On" to pass additional details should you wish.
53+
54+
#### Using Client Side Listeners
55+
```php
56+
Column::make('Show')
57+
->label(
58+
fn($row, Column $column) => "<button x-on:click=\"\$dispatch('show-table',{'tableName': 'sales' })\">Show Sales Table</button>"
59+
)->html(),
60+
Column::make('Hide')
61+
->label(
62+
fn($row, Column $column) => "<button x-on:click=\"\$dispatch('hide-table',{'tableName': 'sales' })\">Hide Sales Table</button>"
63+
)->html(),
64+
```
65+
66+
67+
#### Using Livewire "On" Style Listeners:
68+
```php
69+
Column::make('Show')
70+
->label(
71+
fn($row, Column $column) => "<button x-on:click=\"\$dispatch('showTable.sales')\">Show Sales Table</button>"
72+
)->html(),
73+
Column::make('Hide')
74+
->label(
75+
fn($row, Column $column) => "<button x-on:click=\"\$dispatch('hideTable.sales')\">Hide Sales Table</button>"
76+
)->html(),
77+
78+
```

‎resources/js/laravel-livewire-tables.js‎

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22

33
document.addEventListener('alpine:init', () => {
44

5-
Alpine.data('laravellivewiretable', (wire, showBulkActionsAlpine, tableID, primaryKeyName) => ({
5+
Alpine.data('laravellivewiretable', (wire) => ({
6+
tableId: '',
7+
showBulkActionsAlpine: false,
8+
primaryKeyName: '',
9+
shouldBeDisplayed: wire.entangle('shouldBeDisplayed'),
10+
tableName: wire.entangle('tableName'),
11+
dataTableFingerprint: wire.entangle('dataTableFingerprint'),
612
listeners: [],
713
childElementOpen: false,
814
filtersOpen: wire.entangle('filterSlideDownDefaultVisible'),
@@ -67,7 +73,7 @@ document.addEventListener('alpine:init', () => {
6773
element.classList.remove("laravel-livewire-table-dragging");
6874
let originalPosition = element.rowIndex;
6975
let newPosition = target.rowIndex;
70-
let table = document.getElementById(tableID);
76+
let table = document.getElementById(this.tableId);
7177
let loopStart = originalPosition;
7278
if (event.offsetY > (target.getBoundingClientRect().height / 2)) {
7379
parent.insertBefore(element, target.nextSibling);
@@ -123,17 +129,17 @@ document.addEventListener('alpine:init', () => {
123129

124130
},
125131
updateOrderedItems() {
126-
let table = document.getElementById(tableID);
132+
let table = document.getElementById(this.tableId);
127133
let orderedRows = [];
128134
for (let i = 1, row; row = table.rows[i]; i++) {
129-
orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
135+
orderedRows.push({ [this.primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
130136
}
131137
wire.storeReorder(orderedRows);
132138
},
133139
setupEvenOddClasses() {
134140
if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0)
135141
{
136-
let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
142+
let tbody = document.getElementById(this.tableId).getElementsByTagName('tbody')[0];
137143
let evenRowClassArray = [];
138144
let oddRowClassArray = [];
139145

@@ -149,7 +155,7 @@ document.addEventListener('alpine:init', () => {
149155
}
150156
},
151157
toggleSelectAll() {
152-
if (!showBulkActionsAlpine) {
158+
if (!this.showBulkActionsAlpine) {
153159
return;
154160
}
155161

@@ -168,14 +174,14 @@ document.addEventListener('alpine:init', () => {
168174
}
169175
},
170176
setAllItemsSelected() {
171-
if (!showBulkActionsAlpine) {
177+
if (!this.showBulkActionsAlpine) {
172178
return;
173179
}
174180
this.selectAllStatus = true;
175181
this.selectAllOnPage();
176182
},
177183
setAllSelected() {
178-
if (!showBulkActionsAlpine) {
184+
if (!this.showBulkActionsAlpine) {
179185
return;
180186
}
181187
if (this.delaySelectAll)
@@ -189,14 +195,14 @@ document.addEventListener('alpine:init', () => {
189195
}
190196
},
191197
clearSelected() {
192-
if (!showBulkActionsAlpine) {
198+
if (!this.showBulkActionsAlpine) {
193199
return;
194200
}
195201
this.selectAllStatus = false;
196202
wire.clearSelected();
197203
},
198204
selectAllOnPage() {
199-
if (!showBulkActionsAlpine) {
205+
if (!this.showBulkActionsAlpine) {
200206
return;
201207
}
202208

@@ -207,6 +213,36 @@ document.addEventListener('alpine:init', () => {
207213
}
208214
this.selectedItems = [...new Set(tempSelectedItems)];
209215
},
216+
setTableId(tableId)
217+
{
218+
this.tableId = tableId;
219+
},
220+
setAlpineBulkActions(showBulkActionsAlpine)
221+
{
222+
this.showBulkActionsAlpine = showBulkActionsAlpine;
223+
},
224+
setPrimaryKeyName(primaryKeyName)
225+
{
226+
this.primaryKeyName = primaryKeyName;
227+
},
228+
showTable(event)
229+
{
230+
let eventTableName = event.detail.tableName ?? '';
231+
let eventTableFingerprint = event.detail.tableFingerpint ?? '';
232+
233+
if (((eventTableName ?? '') != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) {
234+
this.shouldBeDisplayed = true;
235+
}
236+
},
237+
hideTable(event)
238+
{
239+
let eventTableName = event.detail.tableName ?? '';
240+
let eventTableFingerprint = event.detail.tableFingerpint ?? '';
241+
242+
if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) {
243+
this.shouldBeDisplayed = false;
244+
}
245+
},
210246
destroy() {
211247
this.listeners.forEach((listener) => {
212248
listener();
@@ -373,6 +409,7 @@ document.addEventListener('alpine:init', () => {
373409

374410

375411
Alpine.data('tableWrapper', (wire, showBulkActionsAlpine) => ({
412+
shouldBeDisplayed: wire.entangle('shouldBeDisplayed'),
376413
listeners: [],
377414
childElementOpen: false,
378415
filtersOpen: wire.entangle('filterSlideDownDefaultVisible'),

0 commit comments

Comments
 (0)