Skip to content

Commit 2322e8d

Browse files
lrljoelrljoe
authored
Use Core Attribute Bag (rappasoft#1916)
* Initial Commit * Fix styling * Add Missing Test * Fix styling * Adjustments * Fix styling * Adjust Test * Fix styling * Fix Sorting Visual Test --------- Co-authored-by: lrljoe <[email protected]>
1 parent 2ebaf3b commit 2322e8d

File tree

8 files changed

+86
-17
lines changed

8 files changed

+86
-17
lines changed

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

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
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: '',
69
shouldBeDisplayed: wire.entangle('shouldBeDisplayed'),
710
tableName: wire.entangle('tableName'),
811
dataTableFingerprint: wire.entangle('dataTableFingerprint'),
@@ -70,7 +73,7 @@ document.addEventListener('alpine:init', () => {
7073
element.classList.remove("laravel-livewire-table-dragging");
7174
let originalPosition = element.rowIndex;
7275
let newPosition = target.rowIndex;
73-
let table = document.getElementById(tableID);
76+
let table = document.getElementById(this.tableId);
7477
let loopStart = originalPosition;
7578
if (event.offsetY > (target.getBoundingClientRect().height / 2)) {
7679
parent.insertBefore(element, target.nextSibling);
@@ -126,17 +129,17 @@ document.addEventListener('alpine:init', () => {
126129

127130
},
128131
updateOrderedItems() {
129-
let table = document.getElementById(tableID);
132+
let table = document.getElementById(this.tableId);
130133
let orderedRows = [];
131134
for (let i = 1, row; row = table.rows[i]; i++) {
132-
orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
135+
orderedRows.push({ [this.primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
133136
}
134137
wire.storeReorder(orderedRows);
135138
},
136139
setupEvenOddClasses() {
137140
if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0)
138141
{
139-
let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
142+
let tbody = document.getElementById(this.tableId).getElementsByTagName('tbody')[0];
140143
let evenRowClassArray = [];
141144
let oddRowClassArray = [];
142145

@@ -152,7 +155,7 @@ document.addEventListener('alpine:init', () => {
152155
}
153156
},
154157
toggleSelectAll() {
155-
if (!showBulkActionsAlpine) {
158+
if (!this.showBulkActionsAlpine) {
156159
return;
157160
}
158161

@@ -171,14 +174,14 @@ document.addEventListener('alpine:init', () => {
171174
}
172175
},
173176
setAllItemsSelected() {
174-
if (!showBulkActionsAlpine) {
177+
if (!this.showBulkActionsAlpine) {
175178
return;
176179
}
177180
this.selectAllStatus = true;
178181
this.selectAllOnPage();
179182
},
180183
setAllSelected() {
181-
if (!showBulkActionsAlpine) {
184+
if (!this.showBulkActionsAlpine) {
182185
return;
183186
}
184187
if (this.delaySelectAll)
@@ -192,14 +195,14 @@ document.addEventListener('alpine:init', () => {
192195
}
193196
},
194197
clearSelected() {
195-
if (!showBulkActionsAlpine) {
198+
if (!this.showBulkActionsAlpine) {
196199
return;
197200
}
198201
this.selectAllStatus = false;
199202
wire.clearSelected();
200203
},
201204
selectAllOnPage() {
202-
if (!showBulkActionsAlpine) {
205+
if (!this.showBulkActionsAlpine) {
203206
return;
204207
}
205208

@@ -210,14 +213,32 @@ document.addEventListener('alpine:init', () => {
210213
}
211214
this.selectedItems = [...new Set(tempSelectedItems)];
212215
},
213-
showTable(eventTableName = '', eventTableFingerpint = '')
216+
setTableId(tableId)
214217
{
215-
if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) {
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)) {
216234
this.shouldBeDisplayed = true;
217235
}
218236
},
219-
hideTable(eventTableName = '', eventTableFingerpint = '')
237+
hideTable(event)
220238
{
239+
let eventTableName = event.detail.tableName ?? '';
240+
let eventTableFingerprint = event.detail.tableFingerpint ?? '';
241+
221242
if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) {
222243
this.shouldBeDisplayed = false;
223244
}

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
{{ $attributes->merge($customAttributes['table'])
2222
->class(['min-w-full divide-y divide-gray-200 dark:divide-none' => $customAttributes['table']['default'] ?? true])
2323
->except('default') }}
24+
2425
>
2526
<thead wire:key="{{ $tableName }}-thead"
2627
{{ $attributes->merge($customAttributes['thead'])

‎resources/views/datatable.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
@php($isBootstrap4 = $this->isBootstrap4)
77
@php($isBootstrap5 = $this->isBootstrap5)
88

9-
<div x-data="laravellivewiretable($wire, '{{ $this->showBulkActionsDropdownAlpine() }}', '{{ $tableId }}', '{{ $primaryKey }}')" x-cloak x-show="shouldBeDisplayed" x-on:show-table.window="showTable(event.detail.tableName ?? '', event.detail.tableFingerpint ?? '')" x-on:hide-table.window="hideTable(event.detail.tableName ?? '', event.detail.tableFingerpint ?? '')">
9+
<div {{ $this->getTopLevelAttributes() }}>
1010
<x-livewire-tables::wrapper :component="$this" :tableName="$tableName" :$primaryKey :$isTailwind :$isBootstrap :$isBootstrap4 :$isBootstrap5>
1111
@if($this->hasActions && !$this->showActionsInToolbar)
1212
<x-livewire-tables::includes.actions/>

‎src/Traits/Helpers/ComponentHelpers.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ public function getTableName(): string
9494
#[Computed]
9595
public function getTableId(): string
9696
{
97-
return $this->getTableAttributes()['id'];
97+
return $this->getTableAttributes()['id'] ?? 'table-'.$this->getTableName();
9898
}
9999

100100
public function isTableNamed(string $name): bool

‎src/Traits/Helpers/TableAttributeHelpers.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
44

55
use Illuminate\Database\Eloquent\Model;
6+
use Illuminate\View\ComponentAttributeBag;
67
use Livewire\Attributes\Computed;
78
use Rappasoft\LaravelLivewireTables\Views\Column;
89

@@ -82,4 +83,22 @@ public function getShouldBeDisplayed(): bool
8283
{
8384
return $this->shouldBeDisplayed;
8485
}
86+
87+
public function getTopLevelAttributesArray(): array
88+
{
89+
return [
90+
'x-data' => 'laravellivewiretable($wire)',
91+
'x-init' => "setTableId('".$this->getTableAttributes()['id']."'); setAlpineBulkActions('".$this->showBulkActionsDropdownAlpine()."'); setPrimaryKeyName('".$this->getPrimaryKey()."');",
92+
'x-cloak',
93+
'x-show' => 'shouldBeDisplayed',
94+
'x-on:show-table.window' => 'showTable(event)',
95+
'x-on:hide-table.window' => 'hideTable(event)',
96+
];
97+
}
98+
99+
#[Computed]
100+
public function getTopLevelAttributes(): ComponentAttributeBag
101+
{
102+
return new ComponentAttributeBag($this->getTopLevelAttributesArray());
103+
}
85104
}

‎tests/Traits/Helpers/TableAttributeHelpersTest.php‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
3+
namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Helpers;
4+
5+
use Rappasoft\LaravelLivewireTables\Tests\TestCase;
6+
7+
final class TableAttributeHelpersTest extends TestCase
8+
{
9+
public function test_top_level_attributes_match(): void
10+
{
11+
$topLevelAttributesArray = $this->basicTable->getTopLevelAttributesArray();
12+
$this->assertSame('shouldBeDisplayed', $topLevelAttributesArray['x-show']);
13+
$this->assertSame('showTable(event)', $topLevelAttributesArray['x-on:show-table.window']);
14+
$this->assertSame('hideTable(event)', $topLevelAttributesArray['x-on:hide-table.window']);
15+
$this->assertSame('laravellivewiretable($wire)', $topLevelAttributesArray['x-data']);
16+
}
17+
18+
public function test_top_level_attribute_bag_matches(): void
19+
{
20+
$topLevelAttributeBag = $this->basicTable->getTopLevelAttributes();
21+
22+
$topLevelAttributesArray = $topLevelAttributeBag->getAttributes();
23+
24+
$this->assertSame('shouldBeDisplayed', $topLevelAttributesArray['x-show']);
25+
$this->assertSame('showTable(event)', $topLevelAttributesArray['x-on:show-table.window']);
26+
$this->assertSame('hideTable(event)', $topLevelAttributesArray['x-on:hide-table.window']);
27+
$this->assertSame('laravellivewiretable($wire)', $topLevelAttributesArray['x-data']);
28+
}
29+
}

‎tests/Traits/Visuals/SortingVisualsTest.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,6 @@ public function test_multiple_sorting_pill_shows_with_single_column_off(): void
121121
public function test_sorting_pill_shows_correct_name_and_direction(): void
122122
{
123123
Livewire::test(PetsTable::class)
124-
->assertDontSee('Key')
125124
->call('sortBy', 'id')
126125
->assertSee('Key')
127126
->assertSee('0-9')

0 commit comments

Comments
 (0)