Fix add multiple pagination instances possible

Author: Joeri

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.0.4] - 2024-11-25
+
+Fixed multiple pagination instances possible \
+Update README
+
 ## [1.0.4] - 2024-04-23
 
 Fixed table style 'tight' \

README.md

@@ -232,3 +232,15 @@ class LatestOrders extends TableCard
 }
 ```
 ![Nova Table Card](https://github.com/Whitespacecode/nova-table-card/blob/master/examplePaginate.png)
+
+### Multiple TableCards with pagination per page
+Sometimes you may need to render multiple `TableCard` instances with pagination on the same page or dashboard. However, those paginator instances use the `page` query string to track the current page and the paginators will conflict. <br/>To resolve this, you can customize the query string the name of the query string used by each paginator by passing a third argument to the `paginate` method. <br/>
+Official documentation in the [Laravel Pagination Docs](https://laravel.com/docs/11.x/pagination#multiple-paginator-instances-per-page).
+
+```php
+// Set a unique query key for this paginator
+$this->queryKey('orders'); 
+
+// Pass the query key to paginate
+$orders = Orders::paginate(5, ['*'], 'orders');
+```

dist/js/card.js

@@ -47,7 +47,12 @@
             </a>
         </div>
 
-        <Pagination v-if="paginator" v-model="paginator" @update-rows="update"></Pagination>
+        <Pagination 
+            v-if="paginator" 
+            v-model="paginator" 
+            :query-key="queryKey"
+            @update-rows="update"
+        ></Pagination>
     </div>
 </template>
 
@@ -71,6 +76,7 @@ export default {
             header: [],
             title: '',
             viewAll: null,
+            queryKey: '',
             paginator: null,
         }
     },
@@ -97,21 +103,22 @@ export default {
         },
         viewAllBottomPosition() {
             return this.viewAll && this.viewAll.position && this.viewAll.position === 'bottom';
-        }
+        },
     },
     methods: {
         update(event){
             this.rows = event;
         }
     },
     created () {
-		const {header, rows, title, paginator, viewAll} = this.card;
+		const {header, rows, title, paginator, viewAll, queryKey} = this.card;
 
 		this.header = header;
 		this.title = title;
         this.rows = rows;
         this.paginator = paginator;
         this.viewAll = viewAll;
+        this.queryKey = queryKey;
 	},
 }
 </script>

resources/js/components/Card.vue

@@ -29,6 +29,7 @@ export default {
     name: 'Pagination',
     props: {
         modelValue: Object,
+		queryKey: '',
     },
     mixins: [
 		Paginatable,
@@ -72,11 +73,13 @@ export default {
 	},
     methods: {
 		selectPage(page) {
+			const queryKey = this.queryKey;
+
 			this.currentPage = page;
 
 			Nova.request().get(this.path, {
 				params: {
-					page: this.currentPage,
+					[queryKey || 'page']: page
 				}
 			}).then(response => {
 				let cards = response.data;
@@ -85,7 +88,9 @@ export default {
 					cards = response.data.cards;
 				}
 
-                const paginationCard = cards.find(card => card.component === 'nova-table-card');
+				const paginationCard = cards.find(card =>
+					card.queryKey === queryKey || (queryKey === '' && card.component === 'nova-table-card')
+				);
 
                 this.$emit('update:modelValue', paginationCard.paginator);
                 this.$emit('updateRows', paginationCard.rows);

resources/js/components/Pagination.vue

@@ -29,7 +29,7 @@ class TableCard extends Card
      * @param string $title
      * @param array $viewAll
      */
-    public function __construct(array $header = [], array $data = [], string $title = '', array $viewAll = [])
+    public function __construct(array $header = [], array $data = [], string $title = '', array $viewAll = [], string $queryKey = '')
     {
         parent::__construct();
 
@@ -40,6 +40,7 @@ public function __construct(array $header = [], array $data = [], string $title
             'rows' =>  $data,
             'title' =>  $title,
             'viewAll' =>  $viewAll,
+            'queryKey' =>  $queryKey,
             'showBorders' => false,
         ]);
     }
@@ -64,6 +65,11 @@ public function viewAll(array $viewAll)
         return $this->withMeta(['viewAll' => $viewAll]);
     }
 
+    public function queryKey(string $queryKey)
+    {  
+        return $this->withMeta(['queryKey' => $queryKey]);
+    }
+
     public function paginator(LengthAwarePaginator $paginator)
 	{
 		return $this->withMeta([