Serverside Pagination for payments (#1613)

* initial backend support

* implement payments pagination on frontend

* implement search for payments api

* fix pyright issues

* sqlite support for searching

* backwards compatability

* formatting, small fixes

* small optimization

* fix sorting issue, add error handling

* GET payments test

* filter by dates, use List instead of list

* fix sqlite

* update bundle

* test old payments endpoint aswell

* refactor for easier review

* optimise test

* revert unnecessary change

---------

Co-authored-by: dni ⚡ <office@dnilabs.com>

lnbits/core/static/js/wallet.js

@@ -152,14 +152,14 @@ new Vue({
             field: 'memo'
           },
           {
-            name: 'date',
+            name: 'time',
             align: 'left',
             label: this.$t('date'),
             field: 'date',
             sortable: true
           },
           {
-            name: 'sat',
+            name: 'amount',
             align: 'right',
             label: this.$t('amount') + ' (' + LNBITS_DENOMINATION + ')',
             field: 'sat',
@@ -173,9 +173,14 @@ new Vue({
           }
         ],
         pagination: {
-          rowsPerPage: 10
+          rowsPerPage: 10,
+          page: 1,
+          sortBy: 'time',
+          descending: true,
+          rowsNumber: 10
         },
-        filter: null
+        filter: null,
+        loading: false
       },
       paymentsChart: {
         show: false
@@ -695,16 +700,35 @@ new Vue({
           LNbits.href.deleteWallet(walletId, user)
         })
     },
-    fetchPayments: function () {
-      return LNbits.api.getPayments(this.g.wallet).then(response => {
-        this.payments = response.data
-          .map(obj => {
+    fetchPayments: function (props) {
+      // Props are passed by qasar when pagination or sorting changes
+      if (props) {
+        this.paymentsTable.pagination = props.pagination
+      }
+      let 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
+      }
+      return LNbits.api
+        .getPayments(this.g.wallet, query)
+        .then(response => {
+          this.paymentsTable.loading = false
+          this.paymentsTable.pagination.rowsNumber = response.data.total
+          this.payments = response.data.data.map(obj => {
             return LNbits.map.payment(obj)
           })
-          .sort((a, b) => {
-            return b.time - a.time
-          })
-      })
+        })
+        .catch(err => {
+          this.paymentsTable.loading = false
+          LNbits.utils.notifyApiError(err)
+        })
     },
     fetchBalance: function () {
       LNbits.api.getWallet(this.g.wallet).then(response => {