feat: add failed payments toggle to wallet page (#2794)

* feat: add failed payments toggle to wallet page

---------

Co-authored-by: Tiago Vasconcelos <talvasconcelos@gmail.com>

lnbits/core/models/payments.py

@@ -127,6 +127,7 @@ class Payment(BaseModel):
 class PaymentFilters(FilterModel):
     __search_fields__ = ["memo", "amount"]
 
+    status: str
     checking_id: str
     amount: int
     fee: int

lnbits/static/js/base.js

@@ -378,6 +378,7 @@ window.LNbits = {
     prepareFilterQuery(tableConfig, props) {
       if (props) {
         tableConfig.pagination = props.pagination
+        tableConfig.filter = props.filter
       }
       let pagination = tableConfig.pagination
       tableConfig.loading = true

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

@@ -6,6 +6,7 @@ window.app.component('payment-list', {
   data: function () {
     return {
       denomination: LNBITS_DENOMINATION,
+      failedPaymentsToggle: false,
       payments: [],
       paymentsTable: {
         columns: [
@@ -32,6 +33,9 @@ window.app.component('payment-list', {
           rowsNumber: 10
         },
         search: null,
+        filter: {
+          'status[ne]': 'failed'
+        },
         loading: false
       },
       exportTagName: '',
@@ -107,7 +111,6 @@ window.app.component('payment-list', {
             field: row => row.extra.wallet_fiat_amount
           }
         ],
-        filter: null,
         loading: false
       }
     }
@@ -215,6 +218,16 @@ window.app.component('payment-list', {
     }
   },
   watch: {
+    failedPaymentsToggle(newVal) {
+      if (newVal === false) {
+        this.paymentsTable.filter = {
+          'status[ne]': 'failed'
+        }
+      } else {
+        this.paymentsTable.filter = null
+      }
+      this.fetchPayments()
+    },
     lazy: function (newVal) {
       if (newVal === true) this.fetchPayments()
     },

lnbits/templates/components.vue

@@ -570,7 +570,10 @@
 <template id="payment-list">
   <div class="row items-center no-wrap q-mb-sm">
     <div class="col">
-      <h5 class="text-subtitle1 q-my-none" :v-text="$t('transactions')"></h5>
+      <span
+        class="text-subtitle1 q-my-none col q-mr-sm"
+        v-text="$t('transactions')"
+      ></span>
     </div>
     <div class="gt-sm col-auto">
       <q-btn-dropdown
@@ -578,7 +581,7 @@
         persistent
         class="q-mr-sm"
         color="grey"
-        :label="$t('export_csv')"
+        label="Export"
         split
         @click="exportCSV(false)"
       >
@@ -627,26 +630,38 @@
           </q-item>
         </q-list>
       </q-btn-dropdown>
-      <payment-chart :wallet="wallet" />
+      <payment-chart :wallet="wallet"></payment-chart>
+      <q-checkbox
+        v-model="failedPaymentsToggle"
+        checked-icon="warning"
+        unchecked-icon="warning_off"
+        :color="failedPaymentsToggle ? 'yellow' : 'grey'"
+        size="xs"
+      >
+        <q-tooltip>
+          <span v-text="`View failed payments`"></span>
+        </q-tooltip>
+      </q-checkbox>
     </div>
   </div>
-  <q-input
-    :style="
-      $q.screen.lt.md
-        ? {
-            display: mobileSimple ? 'none !important' : ''
-          }
-        : ''
-    "
-    filled
-    dense
-    clearable
-    v-model="paymentsTable.search"
-    debounce="300"
-    :placeholder="$t('search_by_tag_memo_amount')"
-    class="q-mb-md"
-  >
-  </q-input>
+  <div class="row q-my-md">
+    <q-input
+      :style="
+        $q.screen.lt.md
+          ? {
+              display: mobileSimple ? 'none !important' : ''
+            }
+          : ''
+      "
+      filled
+      dense
+      clearable
+      v-model="paymentsTable.search"
+      debounce="300"
+      :placeholder="$t('search_by_tag_memo_amount')"
+      class="col"
+    />
+  </div>
   <q-table
     dense
     flat