feat: sort payments in wallet (#3642)

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

lnbits/core/migrations.py

@@ -794,9 +794,11 @@ async def m039_index_payments(db: Connection):
         "checking_id",
         "payment_hash",
         "amount",
+        "fee",
         "labels",
         "time",
         "status",
+        "memo",
         "created_at",
         "updated_at",
     ]

lnbits/core/models/payments.py

@@ -196,7 +196,15 @@ class PaymentFilters(FilterModel):
         "labels",
     ]
 
-    __sort_fields__ = ["created_at", "amount", "fee", "memo", "time", "tag"]
+    __sort_fields__ = [
+        "created_at",
+        "updated_at",
+        "amount",
+        "fee",
+        "memo",
+        "time",
+        "tag",
+    ]
 
     status: str | None
     tag: str | None

lnbits/static/js/components/lnbits-payment-list.js

@@ -29,6 +29,13 @@ window.app.component('lnbits-payment-list', {
           descending: true,
           rowsNumber: 10
         },
+        sortFields: [
+          {name: 'amount', label: 'Amount'},
+          {name: 'fee', label: 'Fee'},
+          {name: 'memo', label: 'Memo'},
+          {name: 'time', label: 'Creation Date'},
+          {name: 'updated_at', label: 'Last Updated'}
+        ],
         search: '',
         loading: false
       },
@@ -243,6 +250,16 @@ window.app.component('lnbits-payment-list', {
           }
         })
     },
+    sortByColumn(columnName) {
+      if (this.paymentsTable.pagination.sortBy === columnName) {
+        this.paymentsTable.pagination.descending =
+          !this.paymentsTable.pagination.descending
+      } else {
+        this.paymentsTable.pagination.sortBy = columnName
+        this.paymentsTable.pagination.descending = false
+      }
+      this.fetchPayments()
+    },
     fetchPaymentsAsAdmin(walletId, params) {
       params = (params || '') + '&wallet_id=' + walletId
       return LNbits.api

lnbits/templates/components/lnbits-payment-list.vue

@@ -119,6 +119,46 @@
           <span v-text="$t('filter_payments')"></span>
         </q-tooltip>
       </q-btn>
+      <q-btn color="grey" icon="sort" class="q-pa-sm" flat>
+        <q-menu>
+          <q-list>
+            <template
+              class="full-width"
+              v-for="column in paymentsTable.sortFields"
+              :key="column.name"
+            >
+              <q-item
+                @click="sortByColumn(column.name)"
+                clickable
+                v-ripple
+                v-close-popup
+                dense
+              >
+                <q-item-section>
+                  <q-item-label lines="1" class="full-width"
+                    ><span v-text="column.label"></span
+                  ></q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <template
+                    v-if="paymentsTable.pagination.sortBy === column.name"
+                  >
+                    <q-icon
+                      v-if="paymentsTable.pagination.descending"
+                      name="arrow_downward"
+                    ></q-icon>
+                    <q-icon v-else name="arrow_upward"></q-icon>
+                  </template>
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-list>
+        </q-menu>
+        <q-tooltip>
+          <span v-text="$t('filter_payments')"></span>
+        </q-tooltip>
+      </q-btn>
+
       <q-btn-dropdown
         dense
         outline