fix the payment status not being updated / the UI bug in payment table

okTurtles · Oct 20, 2023 · 02e460d · 02e460d
1 parent e12a939
commit 02e460d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/frontend/assets/style/components/_forms.scss b/frontend/assets/style/components/_forms.scss
@@ -421,6 +421,7 @@ p.error {
 
 .checkbox {
   > :last-child {
+    height: max-content;
     white-space: nowrap;
 
     &::before,
@@ -442,6 +443,7 @@ p.error {
     &::after {
       @include icon(check);
       font-size: 10px;
+
       position: absolute;
       width: 6px;
       height: 6px;

diff --git a/frontend/model/state.js b/frontend/model/state.js
@@ -9,6 +9,7 @@ import { EVENT_HANDLED, CONTRACT_REGISTERED } from '~/shared/domains/chelonia/ev
 import Vuex from 'vuex'
 import { CHATROOM_PRIVACY_LEVEL, MESSAGE_NOTIFY_SETTINGS, MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
 import { compareISOTimestamps } from '@model/contracts/shared/time.js'
+import { PAYMENT_COMPLETED } from '@model/contracts/shared/payments/index.js'
 import { omit, merge, cloneDeep, debounce } from '@model/contracts/shared/giLodash.js'
 import { unadjustedDistribution, adjustedDistribution } from '@model/contracts/shared/distribution/distribution.js'
 import { applyStorageRules } from '~/frontend/model/notifications/utils.js'
@@ -366,7 +367,9 @@ const getters = {
         for (const toUser in paymentsFrom[ourUsername]) {
           for (const paymentHash of paymentsFrom[ourUsername][toUser]) {
             const { data, meta } = allPayments[paymentHash]
-            payments.push({ hash: paymentHash, data, meta, amount: data.amount, period })
+            if (data.status === PAYMENT_COMPLETED) {
+              payments.push({ hash: paymentHash, data, meta, amount: data.amount, period })
+            }
           }
         }
       }
@@ -388,7 +391,10 @@ const getters = {
             if (toUser === ourUsername) {
               for (const paymentHash of paymentsFrom[fromUser][toUser]) {
                 const { data, meta } = allPayments[paymentHash]
-                payments.push({ hash: paymentHash, data, meta, amount: data.amount })
+
+                if (data.status === PAYMENT_COMPLETED) {
+                  payments.push({ hash: paymentHash, data, meta, amount: data.amount })
+                }
               }
             }
           }

diff --git a/frontend/views/components/graphs/Progress.vue b/frontend/views/components/graphs/Progress.vue
@@ -33,11 +33,12 @@ export default ({
   },
   computed: {
     percent () {
-      return `${100 * this.value / this.max}%`
+      return !this.max ? '0%' : `${100 * this.value / this.max}%`
     },
     percentSoft () {
       if (!this.secValue) return false
-      return `${100 * this.secValue / this.max}%`
+
+      return !this.max ? '0%' : `${100 * this.secValue / this.max}%`
     },
     marksStyle () {
       const color = this.percent === '100%'

diff --git a/frontend/views/containers/payments/PaymentsList.vue b/frontend/views/containers/payments/PaymentsList.vue
@@ -154,6 +154,7 @@ export default ({
   &.c-is-todo {
     th.c-th-check-all {
       width: 1.125rem;
+      font-size: 14px; // font-size here has to be fixed. Otherwise, it leads to a UI bug(The check icon moving downwards)
 
       .checkbox {
         margin-right: 0.2rem;