Vue admin table manually reloading and adjusting query params

CHANGELOG-WIP.md

@@ -40,6 +40,8 @@
 ### Extensibility
 - Filesystem types can now register custom file uploaders. ([#13313](https://github.com/craftcms/cms/pull/13313))
 - When applying a draft, the canonical elements’ `getDirtyAttributes()` and `getDirtyFields()` methods now return the attribute names and field handles that were modified on the draft for save events. ([#12967](https://github.com/craftcms/cms/issues/12967))
+- Admin tables can be configured to pass custom query params to the data endpoint. ([#13416](https://github.com/craftcms/cms/pull/13416))
+- Admin tables can now be programatically reloaded. ([#13416](https://github.com/craftcms/cms/pull/13416))
 - Added `craft\addresses\SubdivisionRepository`. ([#13361](https://github.com/craftcms/cms/pull/13361))
 - Added `craft\base\ElementInterface::getThumbSvg()`. ([#13262](https://github.com/craftcms/cms/pull/13262))
 - Added `craft\base\ElementInterface::setDirtyFields()`.

packages/craftcms-vue/admintable/App.vue

@@ -79,6 +79,7 @@
             :detail-row-component="detailRowComponent"
             :fields="fields"
             :per-page="perPage"
+            :query-params="queryParams"
             pagination-path="pagination"
             @vuetable:loaded="init"
             @vuetable:loading="loading"
@@ -363,6 +364,9 @@
       onSelect: {
         default: function () {},
       },
+      onQueryParams: {
+        default: function () {},
+      },
     },
 
     data() {
@@ -501,10 +505,6 @@
       },
 
       handleSearch: debounce(function () {
-        if (this.$refs.vuetable) {
-          this.$refs.vuetable.gotoPage(1);
-        }
-
         this.reload();
       }, 350),
 
@@ -538,6 +538,10 @@
       },
 
       reload() {
+        if (this.$refs.vuetable) {
+          this.$refs.vuetable.gotoPage(1);
+        }
+
         this.isLoading = true;
         this.deselectAll();
         this.$refs.vuetable.reload();
@@ -595,6 +599,20 @@
           this.onSelect(checks);
         }
       },
+
+      queryParams(sortOrder, currentPage, perPage) {
+        let params = {
+          sort: sortOrder,
+          page: currentPage,
+          per_page: perPage,
+        };
+
+        if (this.onQueryParams instanceof Function) {
+          params = this.onQueryParams(params);
+        }
+
+        return params;
+      },
     },
 
     computed: {

src/web/assets/admintable/README.md

@@ -79,25 +79,58 @@ new Craft.VueAdminTable({
 });
 ```
 
+### Properties
+
+| Name          |                                                                                             |
+|---------------|---------------------------------------------------------------------------------------------|
+| instance      | The Vue instance (table is wrapped in a skeleton Vue app).                                  |
+| $table        | The instance of the VueAdminTable component. Gives direct access to properties and methods. |
+
+### Methods
+
+| Name     |                        |
+|----------|------------------------|
+| reload() | Reload the table data. |
+
+#### `reload()` example
+
+```js
+const adminTable = new Craft.VueAdminTable({
+    // ...
+});
+
+// Reload table every 15 seconds
+setInterval(function() {
+    adminTable.reload();
+}, 15000);
+```
+
 ### Events
 
 #### JS Events
 
-| Name         | Data             | Scenario                                                                                                                             |
-| ------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| onSelect     | Array of IDs     | When a checkbox or select all is selected or de-selected.                                                                            |
-| onData       | Array of objects | On successful load or page change.                                                                                                   |
-| onLoaded     | -                | When the table has loaded (regardless of data loading).                                                                              |
-| onLoading    | -                | When the table is in a loading state.                                                                                                |
-| onPagination | Object           | When pagination has loaded (also occurs on first load). Object contains pagination information (e.g. current page, total pages etc). |
+| Name          | Data             | Return | Scenario                                                                                                                             |
+|---------------| ---------------- |--------|--------------------------------------------------------------------------------------------------------------------------------------|
+| onSelect      | Array of IDs     |        | When a checkbox or select all is selected or de-selected.                                                                            |
+| onData        | Array of objects |        | On successful load or page change.                                                                                                   |
+| onLoaded      | -                |        | When the table has loaded (regardless of data loading).                                                                              |
+| onLoading     | -                |        | When the table is in a loading state.                                                                                                |
+| onPagination  | Object           |        | When pagination has loaded (also occurs on first load). Object contains pagination information (e.g. current page, total pages etc). |
+| onQueryParams | Object           | Object | Called when the query parameters are being generated for the table data enpoint.                                                     |
 
 Example usage:
 
 ```js
 new Craft.VueAdminTable({
   // ...
   onLoaded: function() { console.log('LOADED!'); },
-  onData: function(data) { console.log('Data:', data); }
+  onData: function(data) { console.log('Data:', data); },
+  onQueryParams: function(params) { 
+    console.log('Query Params:', params); 
+
+    params.foo = 'bar';
+    return params; 
+  },
   // ...
 });
 ```

src/web/assets/admintable/src/main.js

@@ -8,12 +8,15 @@ import AdminTable from '@craftcms/vue/admintable/App';
 
 Craft.VueAdminTable = Garnish.Base.extend(
   {
+    instance: null,
+    $table: null,
+
     init: function (settings) {
       this.setSettings(settings, Craft.VueAdminTable.defaults);
 
       const props = this.settings;
 
-      return new Vue({
+      this.instance = new Vue({
         components: {
           AdminTable,
         },
@@ -22,10 +25,20 @@ Craft.VueAdminTable = Garnish.Base.extend(
         },
         render: (h) => {
           return h(AdminTable, {
+            ref: 'admin-table',
             props: props,
           });
         },
-      }).$mount(this.settings.container);
+      });
+
+      this.instance.$mount(this.settings.container);
+      this.$table = this.instance.$refs['admin-table'];
+
+      return this.instance;
+    },
+
+    reload() {
+      this.$table.reload();
     },
   },
   {
@@ -51,6 +64,7 @@ Craft.VueAdminTable = Garnish.Base.extend(
       onData: $.noop,
       onPagination: $.noop,
       onSelect: $.noop,
+      onQueryParams: $.noop,
     },
   }
 );