v3.4.17 - Development to Master (#1917)

## [v3.4.17] - 2024-09-01 ### New Features - Add hide table option by @lrljoe in #1914 - Add column select session methods by @lrljoe in #1913 - Save filter selection to session (BETA) by @lrljoe in #1910 ### Tweaks - Use Core Attribute Bag by @lrljoe in #1916 - Use Core HasTheme Methods by @lrljoe in #1915
rappasoft · Sep 1, 2024 · abce65a · abce65a
1 parent c576c28
commit abce65a
Show file tree

Hide file tree

Showing 39 changed files with 705 additions and 433 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [v3.4.17] - 2024-09-01
+### New Features
+- Add hide table option by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1914
+- Add column select session methods by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1913
+- Save filter selection to session (BETA) by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1910
+
+### Tweaks
+- Use Core Attribute Bag by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1916
+- Use Core HasTheme Methods by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1915
+
 ## [v3.4.16] - 2024-08-27
 ### New Features
 - Add icon column by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1902

diff --git a/docs/filters/available-methods.md b/docs/filters/available-methods.md
@@ -182,6 +182,30 @@ public function configure(): void
 }
 ```
 
+### storeFiltersInSessionEnabled
+
+Optional behaviour - stores filter values in the session (specific to table - based on the table name)
+
+#### Exercise Caution 
+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
+
+```php
+public function configure(): void
+{
+    $this->storeFiltersInSessionEnabled();
+}
+```
+### storeFiltersInSessionDisabled
+
+Default behaviour - does not store filters in the session
+
+```php
+public function configure(): void
+{
+    $this->storeFiltersInSessionDisabled();
+}
+```
+
 
 ----
 

diff --git a/docs/misc/hiding-the-table.md b/docs/misc/hiding-the-table.md
@@ -0,0 +1,78 @@
+---
+title: Hiding The Table (beta)
+weight: 8
+---
+
+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!
+
+```php
+    public function mount()
+    {
+        $this->setShouldBeHidden();
+    }
+```
+
+### Using Events To Display/Hide
+
+For example, you may have a "Sales" table that you wish to hide by default: 
+```php
+class SalesTable extends DataTableComponent
+{
+    public string $tableName = 'sales'; // Required to keep the call specific
+
+    public function mount()
+    {
+        $this->setShouldBeHidden(); // Defaults the table to be hidden, note that this is in MOUNT and not CONFIGURE
+    }
+
+    // Configure/Columns/Filters etc
+}
+```
+
+The Table allows for different approaches, out-of-the-box it supports the more efficient client-side listeners.
+
+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:
+
+```php
+    #[On('showTable.{tableName}')] 
+    public function showTable(): void
+    {
+        $this->setShouldBeDisplayed();
+    }
+
+    #[On('hideTable.{tableName}')] 
+    public function hideTable(): void
+    {
+        $this->setShouldBeHidden();
+    }
+```
+
+
+### Secondary Table
+Below are the two approaches.  Note that you can customise the Livewire "On" to pass additional details should you wish.
+
+#### Using Client Side Listeners
+```php
+    Column::make('Show')
+        ->label(
+            fn($row, Column $column) => "<button x-on:click=\"\$dispatch('show-table',{'tableName': 'sales' })\">Show Sales Table</button>"
+        )->html(),
+    Column::make('Hide')
+        ->label(
+            fn($row, Column $column) => "<button x-on:click=\"\$dispatch('hide-table',{'tableName': 'sales' })\">Hide Sales Table</button>"
+        )->html(),
+```
+
+
+#### Using Livewire "On" Style Listeners:
+```php
+    Column::make('Show')
+    ->label(
+        fn($row, Column $column) => "<button x-on:click=\"\$dispatch('showTable.sales')\">Show Sales Table</button>"
+    )->html(),
+    Column::make('Hide')
+    ->label(
+        fn($row, Column $column) => "<button x-on:click=\"\$dispatch('hideTable.sales')\">Hide Sales Table</button>"
+    )->html(),
+
+```
diff --git a/resources/js/laravel-livewire-tables.js b/resources/js/laravel-livewire-tables.js
@@ -2,7 +2,13 @@
 
 document.addEventListener('alpine:init', () => {
 
-    Alpine.data('laravellivewiretable', (wire, showBulkActionsAlpine, tableID, primaryKeyName) => ({
+    Alpine.data('laravellivewiretable', (wire) => ({
+        tableId: '',
+        showBulkActionsAlpine: false,
+        primaryKeyName: '',
+        shouldBeDisplayed: wire.entangle('shouldBeDisplayed'),
+        tableName: wire.entangle('tableName'),
+        dataTableFingerprint: wire.entangle('dataTableFingerprint'),
         listeners: [],
         childElementOpen: false,
         filtersOpen: wire.entangle('filterSlideDownDefaultVisible'),
@@ -67,7 +73,7 @@ document.addEventListener('alpine:init', () => {
             element.classList.remove("laravel-livewire-table-dragging");
             let originalPosition = element.rowIndex;
             let newPosition = target.rowIndex;
-            let table = document.getElementById(tableID);
+            let table = document.getElementById(this.tableId);
             let loopStart = originalPosition;
             if (event.offsetY > (target.getBoundingClientRect().height / 2)) {
                 parent.insertBefore(element, target.nextSibling);
@@ -123,17 +129,17 @@ document.addEventListener('alpine:init', () => {
 
         },
         updateOrderedItems() {
-            let table = document.getElementById(tableID);
+            let table = document.getElementById(this.tableId);
             let orderedRows = [];
             for (let i = 1, row; row = table.rows[i]; i++) {
-            orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
+            orderedRows.push({ [this.primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i });
             }
             wire.storeReorder(orderedRows);
         },
         setupEvenOddClasses() {
             if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0)
             {
-                let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0];
+                let tbody = document.getElementById(this.tableId).getElementsByTagName('tbody')[0];
                 let evenRowClassArray = [];
                 let oddRowClassArray = [];
 
@@ -149,7 +155,7 @@ document.addEventListener('alpine:init', () => {
             }
         },
         toggleSelectAll() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
 
@@ -168,14 +174,14 @@ document.addEventListener('alpine:init', () => {
             }
         },
         setAllItemsSelected() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
             this.selectAllStatus = true;
             this.selectAllOnPage();
         },
         setAllSelected() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
             if (this.delaySelectAll)
@@ -189,14 +195,14 @@ document.addEventListener('alpine:init', () => {
             }
         },
         clearSelected() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
             this.selectAllStatus = false;
             wire.clearSelected();
         },
         selectAllOnPage() {
-            if (!showBulkActionsAlpine) {
+            if (!this.showBulkActionsAlpine) {
                 return;
             }
 
@@ -207,6 +213,36 @@ document.addEventListener('alpine:init', () => {
             }
             this.selectedItems = [...new Set(tempSelectedItems)];
         },
+        setTableId(tableId)
+        {
+            this.tableId = tableId;
+        },
+        setAlpineBulkActions(showBulkActionsAlpine)
+        {
+            this.showBulkActionsAlpine = showBulkActionsAlpine;
+        },
+        setPrimaryKeyName(primaryKeyName)
+        {
+            this.primaryKeyName = primaryKeyName;
+        },
+        showTable(event)
+        {
+            let eventTableName = event.detail.tableName ?? '';
+            let eventTableFingerprint = event.detail.tableFingerpint ?? '';
+
+            if (((eventTableName ?? '') != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { 
+                this.shouldBeDisplayed = true; 
+            } 
+        },
+        hideTable(event)
+        {
+            let eventTableName = event.detail.tableName ?? '';
+            let eventTableFingerprint = event.detail.tableFingerpint ?? '';
+
+            if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { 
+                this.shouldBeDisplayed = false; 
+            } 
+        },
         destroy() {
             this.listeners.forEach((listener) => {
                 listener();
@@ -373,6 +409,7 @@ document.addEventListener('alpine:init', () => {
 
 
     Alpine.data('tableWrapper', (wire, showBulkActionsAlpine) => ({
+        shouldBeDisplayed: wire.entangle('shouldBeDisplayed'),
         listeners: [],
         childElementOpen: false,
         filtersOpen: wire.entangle('filterSlideDownDefaultVisible'),