deps: update vue-good-table (#1494)

* deps: update vue-good-table * fix: table wallet sorting by vote * fix: delegate table sort params * fix: table header text alignment * fix: wallet and contact table sort params * refactor: get correct sort options in transactions table * refactor: properly pluralize new transactions notice * fix: transaction table sort params * refactor: call mergeTableTransactions with sort params * refactor: compare bignums in mergeTableTransactions * refactor: set totalAmount as string * fix: change BigNumber import * fix: programmatically set current page
ArkEcosystem · Oct 31, 2019 · 9cf8b56 · 9cf8b56
1 parent dcd3c05
commit 9cf8b56
Show file tree

Hide file tree

Showing 19 changed files with 202 additions and 116 deletions.
diff --git a/__tests__/unit/components/utils/merge-table-transactions.spec.js b/__tests__/unit/components/utils/merge-table-transactions.spec.js
@@ -5,12 +5,12 @@ describe('Utils > mergeTableTransactions', () => {
 
   beforeEach(() => {
     transactions = [
-      { id: 'tx1', timestamp: 1 },
-      { id: 'tx2', timestamp: 2 },
-      { id: 'tx3', timestamp: 8 },
-      { id: 'tx4', timestamp: 9 },
-      { id: 'tx5', timestamp: 5 },
-      { id: 'tx6', timestamp: 6 }
+      { id: 'tx1', timestamp: 1, amount: '6' },
+      { id: 'tx2', timestamp: 2, amount: '5' },
+      { id: 'tx3', timestamp: 8, amount: '9' },
+      { id: 'tx4', timestamp: 9, amount: '8' },
+      { id: 'tx5', timestamp: 5, amount: '2' },
+      { id: 'tx6', timestamp: 6, amount: '1' }
     ]
   })
 
@@ -31,6 +31,40 @@ describe('Utils > mergeTableTransactions', () => {
     ])
   })
 
+  it('should return the transactions sorted by `timestamp` ascendently', () => {
+    const a = [
+      transactions[0],
+      transactions[2]
+    ]
+    const b = [
+      transactions[1],
+      transactions[5]
+    ]
+    expect(mergeTableTransactions(a, b, { field: 'timestamp', type: 'asc' })).toEqual([
+      transactions[0],
+      transactions[1],
+      transactions[5],
+      transactions[2]
+    ])
+  })
+
+  it('should return the transactions sorted by `amount` ascendently', () => {
+    const a = [
+      transactions[0],
+      transactions[2]
+    ]
+    const b = [
+      transactions[1],
+      transactions[5]
+    ]
+    expect(mergeTableTransactions(a, b, { field: 'amount', type: 'asc' })).toEqual([
+      transactions[5],
+      transactions[1],
+      transactions[0],
+      transactions[2]
+    ])
+  })
+
   describe('when there are duplicates', () => {
     it('should not return duplicates', () => {
       const a = [

diff --git a/__tests__/unit/pages/Profile/ProfileAll.spec.js b/__tests__/unit/pages/Profile/ProfileAll.spec.js
@@ -36,7 +36,7 @@ describe('pages > ProfileAll', () => {
             'network/byToken': token => networkBy('token', token),
             'network/bySymbol': symbol => networkBy('symbol', symbol),
             'profile/all': profiles,
-            'profile/balanceWithLedger': _id => 13700000,
+            'profile/balanceWithLedger': _id => new BigNumber(13700000),
             'wallet/byProfileId': id => wallets[id]
           }
         },
@@ -62,20 +62,20 @@ describe('pages > ProfileAll', () => {
     ]
     wallets = {
       p1: [
-        { address: 'M0', balance: 1000 },
-        { address: 'M1', balance: 15089900 }
+        { address: 'M0', balance: '1000' },
+        { address: 'M1', balance: '15089900' }
       ],
       p2: [
-        { address: 'O0', balance: 12000000 },
-        { address: 'O1', balance: 190000 }
+        { address: 'O0', balance: '12000000' },
+        { address: 'O1', balance: '190000' }
       ],
       p3: [
-        { address: 'M2', balance: 0 },
-        { address: 'M3', balance: 50000000000 }
+        { address: 'M2', balance: '0' },
+        { address: 'M3', balance: '50000000000' }
       ],
       p4: [
-        { address: 'D0', balance: 1110000 },
-        { address: 'D1', balance: 50900000 }
+        { address: 'D0', balance: '1110000' },
+        { address: 'D1', balance: '50900000' }
       ]
     }
     ledgerWallets = []
@@ -110,8 +110,8 @@ describe('pages > ProfileAll', () => {
     describe('when the Ledger has wallets on the current network', () => {
       beforeEach(() => {
         ledgerWallets = [
-          { address: 'MxLedger0', balance: 9883102007 },
-          { address: 'MxLedger1', balance: 6723900701 }
+          { address: 'MxLedger0', balance: '9883102007' },
+          { address: 'MxLedger1', balance: '6723900701' }
         ]
       })
 
@@ -150,8 +150,8 @@ describe('pages > ProfileAll', () => {
     describe('when the Ledger has wallets on the current network', () => {
       beforeEach(() => {
         ledgerWallets = [
-          { address: 'MxLedger0', balance: 9883102007 },
-          { address: 'MxLedger1', balance: 6723900701 }
+          { address: 'MxLedger0', balance: '9883102007' },
+          { address: 'MxLedger1', balance: '6723900701' }
         ]
       })
 

diff --git a/__tests__/unit/services/client.spec.js b/__tests__/unit/services/client.spec.js
@@ -421,8 +421,8 @@ describe('Services > Client', () => {
 
       transactions.forEach((transaction, i) => {
         expect(transaction).toHaveProperty('totalAmount')
-        expect(transaction.totalAmount).toBeInstanceOf(BigNumber)
-        expect(transaction.totalAmount.toString()).toBe((data[i].amount + data[i].fee).toString())
+        expect(transaction.totalAmount).toBeString()
+        expect(transaction.totalAmount).toEqual(new BigNumber(data[i].amount).plus(data[i].fee).toString())
         expect(transaction).toHaveProperty('timestamp', data[i].timestamp.unix * 1000)
         expect(transaction).toHaveProperty('isSender')
         expect(transaction).toHaveProperty('isRecipient')

diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
     "vm2": "^3.8.4",
     "vue": "^2.6.10",
     "vue-chartjs": "^3.4.2",
-    "vue-good-table": "2.16.5",
+    "vue-good-table": "^2.18.0",
     "vue-i18n": "^8.12.0",
     "vue-qrcode-reader": "^2.0.3",
     "vue-router": "^3.0.7",

diff --git a/src/renderer/components/Transaction/TransactionConfirm/TransactionConfirm.vue b/src/renderer/components/Transaction/TransactionConfirm/TransactionConfirm.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="TransactionConfirm">
     <TransactionDetail
-      :amount="formatter_networkCurrency(totalAmount)"
+      :amount="formatter_networkCurrency(transaction.totalAmount)"
       :recipient-address="transaction.recipientId"
       :sender-address="address"
       :type="transaction.type"
@@ -27,7 +27,7 @@
         >
           {{ $t('TRANSACTION.SEND') }}
           <span class="px-2 py-1 bg-theme-button-inner-box rounded">
-            {{ formatter_networkCurrency(totalAmount) }}
+            {{ formatter_networkCurrency(transaction.totalAmount) }}
           </span>
         </button>
       </div>
@@ -98,9 +98,6 @@ export default {
   }),
 
   computed: {
-    totalAmount () {
-      return this.currency_toBuilder(this.transaction.amount).add(this.transaction.fee).value
-    },
     currentWallet () {
       return this.wallet || this.wallet_fromRoute
     },

diff --git a/src/renderer/components/Transaction/TransactionTable.vue b/src/renderer/components/Transaction/TransactionTable.vue
@@ -249,11 +249,11 @@ export default {
       this.network_openExplorer('transaction', id)
     },
 
-    onSortChange ({ columnIndex, sortType }) {
-      if (this.columns[columnIndex]) {
-        const columnName = this.columns[columnIndex].field
-        this.$emit('on-sort-change', { columnName, sortType })
-      }
+    onSortChange (sortOptions) {
+      this.$emit('on-sort-change', {
+        source: 'transactionsTab',
+        ...sortOptions[0]
+      })
     },
 
     onRowClick ({ row }) {

diff --git a/src/renderer/components/Wallet/WalletDelegates/WalletDelegates.vue b/src/renderer/components/Wallet/WalletDelegates/WalletDelegates.vue
@@ -31,9 +31,13 @@
       :is-loading="isLoading"
       :is-remote="true"
       :rows="delegates"
-      :sort-query="queryParams.sort"
+      :sort-query="{
+        field: queryParams.sort.field,
+        type: queryParams.sort.type
+      }"
       :total-rows="totalCount"
       :no-data-message="$t('TABLE.NO_DELEGATES')"
+      :current-page="currentPage"
       :per-page="queryParams.limit"
       :per-page-dropdown="[25, 51]"
       class="WalletDelegates__table"
@@ -68,6 +72,7 @@
 </template>
 
 <script>
+import isEqual from 'lodash/isEqual'
 import { ButtonClose } from '@/components/Button'
 import TableWrapper from '@/components/utils/TableWrapper'
 
@@ -193,16 +198,15 @@ export default {
     },
 
     onSortChange (sortOptions) {
-      const columnName = sortOptions[0].field
-      const sortType = sortOptions[0].type
-      this.__updateParams({
-        sort: {
-          field: columnName,
-          type: sortType
-        },
-        page: 1
-      })
-      this.fetchDelegates()
+      const params = sortOptions[0]
+
+      if (!isEqual(params, this.queryParams.sort)) {
+        this.__updateParams({
+          sort: params,
+          page: 1
+        })
+        this.fetchDelegates()
+      }
     },
 
     reset () {

diff --git a/src/renderer/components/Wallet/WalletTable.vue b/src/renderer/components/Wallet/WalletTable.vue
@@ -58,7 +58,7 @@
         </div>
 
         <div
-          v-else-if="data.column.field === 'delegate'"
+          v-else-if="data.column.field === 'vote'"
         >
           <span class="flex items-center">
             {{ getDelegateProperty(data.row.vote, 'username') }}
@@ -69,7 +69,7 @@
                   delegate: getDelegateProperty(data.row.vote, 'username'),
                   rank: getDelegateProperty(data.row.vote, 'rank')
                 }),
-                trigger:'hover'
+                trigger: 'hover'
               }"
               class="bg-theme-button-special-choice cursor-pointer rounded-full w-2 h-2 ml-2"
             />
@@ -178,7 +178,8 @@ export default {
         },
         {
           label: this.$t('PAGES.WALLET_ALL.VOTING_FOR'),
-          field: 'delegate',
+          field: 'vote',
+          sortFn: this.sortByVote,
           thClass: 'w-full whitespace-no-wrap',
           tdClass: 'w-full'
         },
@@ -224,6 +225,13 @@ export default {
       return a.localeCompare(b, undefined, { sensitivity: 'base', numeric: true })
     },
 
+    sortByVote (x, y, col, rowX, rowY) {
+      const a = x ? this.getDelegateProperty(x, 'username') : ''
+      const b = y ? this.getDelegateProperty(y, 'username') : ''
+
+      return a.localeCompare(b, undefined, { sensitivity: 'base', numeric: true })
+    },
+
     getDelegate (publicKey) {
       return this.$store.getters['delegate/byPublicKey'](publicKey)
     },

diff --git a/src/renderer/components/Wallet/WalletTransactions/WalletTransactions.vue b/src/renderer/components/Wallet/WalletTransactions/WalletTransactions.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="WalletTransactions">
     <div
-      v-if="newTransactionsNotice"
+      v-if="newTransactionsNotice && newTransactionsNotice !== '0'"
       class="bg-theme-feature flex flex-row"
     >
       <div
@@ -17,7 +17,10 @@
       :is-loading="isLoading"
       :is-remote="true"
       :has-pagination="totalCount > 0"
-      :sort-query="queryParams.sort"
+      :sort-query="{
+        field: queryParams.sort.field,
+        type: queryParams.sort.type
+      }"
       :per-page="transactionTableRowCount"
       @on-per-page-change="onPerPageChange"
       @on-page-change="onPageChange"
@@ -27,7 +30,7 @@
 </template>
 
 <script>
-import at from 'lodash/at'
+import { at, isEqual } from 'lodash'
 import mergeTableTransactions from '@/components/utils/merge-table-transactions'
 import TransactionTable from '@/components/Transaction/TransactionTable'
 
@@ -170,7 +173,7 @@ export default {
           profileId: this.session_profile.id
         })
 
-        const transactions = mergeTableTransactions(response.transactions, this.getStoredTransactions(address))
+        const transactions = mergeTableTransactions(response.transactions, this.getStoredTransactions(address), this.queryParams.sort)
 
         if (this.wallet_fromRoute && address === this.wallet_fromRoute.address) {
           this.$set(this, 'fetchedTransactions', transactions)
@@ -225,7 +228,7 @@ export default {
       try {
         let newTransactions = 0
         const response = await this.getTransactions(address)
-        const transactions = mergeTableTransactions(response.transactions, this.getStoredTransactions(address))
+        const transactions = mergeTableTransactions(response.transactions, this.getStoredTransactions(address), this.queryParams.sort)
         for (const existingTransaction of this.fetchedTransactions) {
           for (const transaction of transactions) {
             if (existingTransaction.id === transaction.id) {
@@ -251,9 +254,8 @@ export default {
         // Avoid throwing an Error if the user changes to a different route
         if (this.wallet_fromRoute) {
           if (address === this.wallet_fromRoute.address && newTransactions > 0) {
-            this.newTransactionsNotice = this.$t('WALLET_TRANSACTIONS.NEW_TRANSACTIONS', {
-              count: newTransactions,
-              plural: newTransactions > 1 ? 's' : ''
+            this.newTransactionsNotice = this.$tc('WALLET_TRANSACTIONS.NEW_TRANSACTIONS', {
+              count: newTransactions
             })
           }
         }
@@ -269,23 +271,26 @@ export default {
     },
 
     onPerPageChange ({ currentPerPage }) {
+      this.transactionTableRowCount = currentPerPage
       this.__updateParams({ limit: currentPerPage, page: 1 })
       this.loadTransactions()
-      this.transactionTableRowCount = currentPerPage
     },
 
-    onSortChange (sortOptions) {
-      const columnName = sortOptions[0].field
-      const sortType = sortOptions[0].type
+    onSortChange ({ source, field, type }) {
+      if (!source || source !== 'transactionsTab') {
+        return
+      }
 
-      this.__updateParams({
-        sort: {
-          field: columnName,
-          type: sortType
-        },
-        page: 1
-      })
-      this.loadTransactions()
+      if (!isEqual({ field, type }, this.queryParams.sort)) {
+        this.__updateParams({
+          sort: {
+            field,
+            type
+          },
+          page: 1
+        })
+        this.loadTransactions()
+      }
     },
 
     reset () {

diff --git a/src/renderer/components/utils/TableWrapper.js b/src/renderer/components/utils/TableWrapper.js
@@ -53,6 +53,7 @@ export default {
         },
         paginationOptions: {
           enabled: this.hasPagination,
+          setCurrentPage: this.currentPage,
           dropdownAllowAll: false,
           perPage: this.perPage,
           perPageDropdown: this.perPageDropdown,