#1774, #1771 - Bug-fixes in Payment.vue

frontend/assets/style/components/_forms.scss

@@ -421,6 +421,7 @@ p.error {
 
 .checkbox {
   > :last-child {
+    height: max-content;
     white-space: nowrap;
 
     &::before,

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_NOT_RECEIVED } 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,6 +367,7 @@ 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 })
           }
         }
@@ -388,6 +390,7 @@ 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 })
               }
             }
@@ -425,17 +428,22 @@ const getters = {
     const isOurPayment = (payment) => {
       return isNeeder ? payment.to === ourUsername : payment.from === ourUsername
     }
+    const sumUpAmountReducer = (acc, payment) => acc + payment.amount
     const cPeriod = getters.currentPaymentPeriod
     const ourAdjustedPayments = getters.groupIncomeAdjustedDistribution.filter(isOurPayment)
     const receivedOrSent = isNeeder
       ? getters.ourPaymentsReceivedInPeriod(cPeriod)
       : getters.ourPaymentsSentInPeriod(cPeriod)
+
+    const markedAsNotReceived = receivedOrSent.filter(payment => payment.data.status === PAYMENT_NOT_RECEIVED)
+    const markedAsNotReceivedTotal = markedAsNotReceived.reduce(sumUpAmountReducer, 0)
+
     const paymentsTotal = ourAdjustedPayments.length + receivedOrSent.length
     const nonLateAdjusted = ourAdjustedPayments.filter((p) => !p.isLate)
-    const paymentsDone = paymentsTotal - nonLateAdjusted.length
+    const paymentsDone = paymentsTotal - nonLateAdjusted.length - markedAsNotReceived.length
     const hasPartials = ourAdjustedPayments.some(p => p.partial)
-    const amountDone = receivedOrSent.reduce((acc, payment) => acc + payment.amount, 0)
-    const amountLeft = ourAdjustedPayments.reduce((acc, payment) => acc + payment.amount, 0)
+    const amountDone = receivedOrSent.reduce(sumUpAmountReducer, 0) - markedAsNotReceivedTotal
+    const amountLeft = ourAdjustedPayments.reduce((acc, payment) => acc + payment.amount, 0) + markedAsNotReceivedTotal
     const amountTotal = amountDone + amountLeft
     return {
       paymentsDone,

frontend/views/components/graphs/Progress.vue

@@ -33,11 +33,14 @@ export default ({
   },
   computed: {
     percent () {
-      return `${100 * this.value / this.max}%`
+      return !this.max
+        ? '0%' // When this.max 0, the calculation below becomes 'NaN%', so manually specifying 0% here.
+        : `${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%'

frontend/views/containers/contributions/TodoHistory.vue

@@ -18,6 +18,7 @@ div(:class='isReady ? "" : "c-ready"')
 import { mapGetters } from 'vuex'
 import { comparePeriodStamps } from '@model/contracts/shared/time.js'
 import { MAX_HISTORY_PERIODS } from '@model/contracts/shared/constants.js'
+import { PAYMENT_NOT_RECEIVED } from '@model/contracts/shared/payments/index.js'
 import PaymentsMixin from '@containers/payments/PaymentsMixin.js'
 import BarGraph from '@components/graphs/bar-graph/BarGraph.vue'
 import { L } from '@common/common.js'
@@ -57,14 +58,17 @@ export default ({
 
         const paymentDetails = await this.getPaymentDetailsByPeriod(period)
         const { lastAdjustedDistribution } = await this.getPaymentPeriod(period)
+
         const doneCount = getLen(paymentDetails)
+        const markedAsNotReceivedCount = Object.values(paymentDetails)
+          .filter(({ data }) => data.status === PAYMENT_NOT_RECEIVED).length
         const missedCount = getLen(lastAdjustedDistribution || {})
         this.history.unshift({
-          total: doneCount === 0 ? 0 : doneCount / (doneCount + missedCount),
+          total: doneCount === 0 ? 0 : (doneCount - markedAsNotReceivedCount) / (doneCount + missedCount),
           title: this.getPeriodFromStartToDueDate(period),
           tooltipContent: [
             L('Total: {total}', { total: doneCount + missedCount }),
-            L('Completed: {completed}', { completed: doneCount })
+            L('Completed: {completed}', { completed: doneCount - markedAsNotReceivedCount })
           ]
         })
       }

frontend/views/containers/payments/MonthOverview.vue

@@ -19,8 +19,8 @@
         :secValue='item.hasPartials ? item.value + 0.5 : 0'
         :hasMarks='item.hasMarks'
       )
-      p(:class='{"has-text-success": item.max === item.value}')
-        i.icon-check.is-prefix(v-if='item.max === item.value')
+      p(:class='{ "has-text-success": item.max && (item.max === item.value) }')
+        i.icon-check.is-prefix(v-if='item.max && (item.max === item.value)')
         span.has-text-1 {{ item.label }}
 
     li.c-summary-item(v-if='notReceivedPayments')

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;