[feat] Add payment status filters (#3203)

lnbits/core/templates/payments/index.html

@@ -232,15 +232,57 @@
                     />
                   </template>
                 </q-input>
-                <q-select
+                <q-btn
                   v-else-if="['status'].includes(col.name)"
-                  v-model="searchData[col.name]"
+                  flat
-                  :options="searchOptions[col.name]"
+                  dense
-                  @update:model-value="searchPaymentsBy()"
+                  :label="$q.screen.gt.md ? 'Status' : null"
-                  :label="col.label"
+                  icon="filter_alt"
-                  clearable
+                  color="grey"
-                  style="width: 100px"
+                  class="text-capitalize"
-                ></q-select>
+                >
+                  <q-menu anchor="top right" self="top start">
+                    <q-item dense>
+                      <q-checkbox
+                        v-model="statusFilters.success"
+                        @click="handleFilterChanged"
+                        label="Success Payments"
+                      ></q-checkbox>
+                    </q-item>
+                    <q-item dense>
+                      <q-checkbox
+                        v-model="statusFilters.pending"
+                        @click="handleFilterChanged"
+                        label="Pending Payments"
+                      ></q-checkbox>
+                    </q-item>
+                    <q-item dense>
+                      <q-checkbox
+                        v-model="statusFilters.failed"
+                        @click="handleFilterChanged"
+                        label="Failed Payments"
+                      ></q-checkbox>
+                    </q-item>
+                    <q-separator></q-separator>
+                    <q-item dense>
+                      <q-checkbox
+                        v-model="statusFilters.incoming"
+                        @click="handleFilterChanged"
+                        label="Incoming Payments"
+                      ></q-checkbox>
+                    </q-item>
+                    <q-item dense>
+                      <q-checkbox
+                        v-model="statusFilters.outgoing"
+                        @click="handleFilterChanged"
+                        label="Outgoing Payments"
+                      ></q-checkbox>
+                    </q-item>
+                  </q-menu>
+                  <q-tooltip>
+                    <span v-text="$t('filter_payments')"></span>
+                  </q-tooltip>
+                </q-btn>
                 <q-select
                   v-else-if="['tag'].includes(col.name)"
                   v-model="searchData[col.name]"

lnbits/static/js/payments.js

@@ -8,9 +8,15 @@ window.PaymentsPageLogic = {
       searchData: {
         wallet_id: null,
         payment_hash: null,
-        status: null,
         memo: null
       },
+      statusFilters: {
+        success: true,
+        pending: true,
+        failed: true,
+        incoming: true,
+        outgoing: true
+      },
       chartData: {
         showPaymentStatus: true,
         showPaymentTags: true,
@@ -131,6 +137,7 @@ window.PaymentsPageLogic = {
       if (this.searchDate.to) {
         filter['time[le]'] = this.searchDate.to + 'T23:59:59'
       }
+
       this.paymentsTable.filter = filter
 
       try {
@@ -198,7 +205,38 @@ window.PaymentsPageLogic = {
 
       this.fetchPayments()
     },
+    handleFilterChanged() {
+      const {success, pending, failed, incoming, outgoing} = this.statusFilters
 
+      delete this.searchData['status[ne]']
+      delete this.searchData['status[eq]']
+      if (success && pending && failed) {
+        // do nothing, all statuses are selected
+      } else if (success && pending) {
+        this.searchData['status[ne]'] = 'failed'
+      } else if (success && failed) {
+        this.searchData['status[ne]'] = 'pending'
+      } else if (failed && pending) {
+        this.searchData['status[ne]'] = 'success'
+      } else if (success) {
+        this.searchData['status[eq]'] = 'success'
+      } else if (pending) {
+        this.searchData['status[eq]'] = 'pending'
+      } else if (failed) {
+        this.searchData['status[eq]'] = 'failed'
+      }
+
+      delete this.searchData['amount[ge]']
+      delete this.searchData['amount[le]']
+      if (incoming && outgoing) {
+        // do nothing
+      } else if (incoming) {
+        this.searchData['amount[ge]'] = '0'
+      } else if (outgoing) {
+        this.searchData['amount[le]'] = '0'
+      }
+      this.fetchPayments()
+    },
     showDetailsToggle(payment) {
       this.paymentDetails = payment
       return (this.showDetails = !this.showDetails)