refactor: add prepareFilterQuery to utils (#2219)

* refactor: add `prepareFilterQuery` to utils
factored out the preparation of the url params for a paginated table and its requests.
usermanager will also use that.

lnbits/core/templates/core/wallet.html

@@ -146,7 +146,7 @@
               filled
               dense
               clearable
-              v-model="paymentsTable.filter"
+              v-model="paymentsTable.search"
               debounce="300"
               :placeholder="$t('search_by_tag_memo_amount')"
               class="q-mb-md"
@@ -160,7 +160,7 @@
               :columns="paymentsTable.columns"
               :pagination.sync="paymentsTable.pagination"
               :no-data-label="$t('no_transactions')"
-              :filter="paymentsTable.filter"
+              :filter="paymentsTable.search"
               :loading="paymentsTable.loading"
               :hide-header="mobileSimple"
               :hide-bottom="mobileSimple"

lnbits/static/js/base.js

@@ -130,8 +130,7 @@ window.LNbits = {
         }
       )
     },
-    getPayments: function (wallet, query) {
-      const params = new URLSearchParams(query)
+    getPayments: function (wallet, params) {
       return this.request(
         'get',
         '/api/v1/payments/paginated?' + params,
@@ -366,6 +365,24 @@ window.LNbits = {
         return data
       }
     },
+    prepareFilterQuery(tableConfig, props) {
+      if (props) {
+        tableConfig.pagination = props.pagination
+      }
+      let pagination = tableConfig.pagination
+      tableConfig.loading = true
+      const query = {
+        limit: pagination.rowsPerPage,
+        offset: (pagination.page - 1) * pagination.rowsPerPage,
+        sortby: pagination.sortBy ?? '',
+        direction: pagination.descending ? 'desc' : 'asc',
+        ...tableConfig.filter
+      }
+      if (tableConfig.search) {
+        query.search = tableConfig.search
+      }
+      return new URLSearchParams(query)
+    },
     exportCSV: function (columns, data, fileName) {
       var wrapCsvValue = function (val, formatFn) {
         var formatted = formatFn !== void 0 ? formatFn(val) : val

lnbits/static/js/service-worker.js

@@ -1,6 +1,6 @@
 // update cache version every time there is a new deployment
 // so the service worker reinitializes the cache
-const CACHE_VERSION = 104
+const CACHE_VERSION = 105
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
 
 const getApiKey = request => {

lnbits/static/js/wallet.js

@@ -150,7 +150,7 @@ new Vue({
           descending: true,
           rowsNumber: 10
         },
-        filter: null,
+        search: null,
         loading: false
       },
       paymentsCSV: {
@@ -268,7 +268,7 @@ new Vue({
       }
     },
     filteredPayments: function () {
-      var q = this.paymentsTable.filter
+      var q = this.paymentsTable.search
       if (!q || q === '') return this.payments
 
       return LNbits.utils.search(this.payments, q)
@@ -749,23 +749,9 @@ new Vue({
         })
     },
     fetchPayments: function (props) {
-      // Props are passed by qasar when pagination or sorting changes
-      if (props) {
-        this.paymentsTable.pagination = props.pagination
-      }
-      const pagination = this.paymentsTable.pagination
-      this.paymentsTable.loading = true
-      const query = {
-        limit: pagination.rowsPerPage,
-        offset: (pagination.page - 1) * pagination.rowsPerPage,
-        sortby: pagination.sortBy ?? 'time',
-        direction: pagination.descending ? 'desc' : 'asc'
-      }
-      if (this.paymentsTable.filter) {
-        query.search = this.paymentsTable.filter
-      }
+      const params = LNbits.utils.prepareFilterQuery(this.paymentsTable, props)
       return LNbits.api
-        .getPayments(this.g.wallet, query)
+        .getPayments(this.g.wallet, params)
         .then(response => {
           this.paymentsTable.loading = false
           this.paymentsTable.pagination.rowsNumber = response.data.total
@@ -817,7 +803,8 @@ new Vue({
         sortby: pagination.sortBy ?? 'time',
         direction: pagination.descending ? 'desc' : 'asc'
       }
-      LNbits.api.getPayments(this.g.wallet, query).then(response => {
+      const params = new URLSearchParams(query)
+      LNbits.api.getPayments(this.g.wallet, params).then(response => {
         const payments = response.data.data.map(LNbits.map.payment)
         LNbits.utils.exportCSV(
           this.paymentsCSV.columns,