Skip to content

Commit

Permalink
Merge pull request #372 from consensusnetworks/feature/connect-data-t…
Browse files Browse the repository at this point in the history 
…o-table

Feature/connect data to table
  • Loading branch information
@DemogorGod
DemogorGod authored Jul 17, 2023
2 parents 0036759 + 1e2c10a commit b3b77cc
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 63 deletions.
1 change: 1 addition & 0 deletions apps/web/src/composables/users.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,7 @@ export default function useUsers() {
user: readonly(user),
userAddresses,
userAnalytics,
rawUserAnalytics,
addAccount,
checkIfSecondaryAddress,
checkIfPrimaryUserExists,
Expand Down
8 changes: 6 additions & 2 deletions apps/web/src/mockData/mock_transaction_data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,13 @@ export default function useTxData () {
txDirection: 'incoming',
txId: '0xf46d39ca96e489fb0eb2097f073bfde2dc7960bf8358e0692fa79cc8597d283e',
receivedAt: generateRandomDate(),
amount: '0',
amount: (Math.random() * 20.00).toFixed(2),
price: '0.0',
gasFee: '195178697897910'
gasFee: '195178697897910',
rewards:(Math.random() * 10.00).toFixed(2),
apy: (Math.random() * 10.00).toFixed(2) + '%',
status: Math.random() > 0.5? 'Pending' : 'Active',
opperators: [ 'red', 'green', 'blue', 'orange', 'yellow'] //This is random until I get more info on how it will look like from backend
}

data.push(transaction)
Expand Down
170 changes: 109 additions & 61 deletions apps/web/src/pages/overview/components/BreakdownTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ref, watch, onMounted } from 'vue'
import * as XLSX from 'xlsx'
import VueFeather from 'vue-feather'
import useUsers from '@/composables/users'
const itemsPerPage = ref(7)
const currentPage = ref(1)
const totalPages = ref(1)
const searchInput = ref('')
const tableView = ref('Wallets')
Expand Down Expand Up @@ -72,54 +77,24 @@ const tableHeaderOptions = ref(
}
)
const tableMockedItems = ref({
const { rawUserAnalytics, user } = useUsers()
const tableData = ref({
Wallets: [
{
wallet_provider: 'MetaMask',
act: '12345678910asdfghjkl;qwertyuiopzxcvbnm',
bal: '1.5 ETH',
stk_amt: '0.5 ETH',
stk_rwd: '0.034 ETH'
},
{
wallet_provider: 'CoinbaseWallet',
act: '12345678910asdfghjkl;qwertyuiopzxcvbnm',
bal: '1.5 ETH',
stk_amt: '0.5 ETH',
stk_rwd: '0.034 ETH'
}
],
Transactions: [
{
tx_hash: '1234567890qwertyuiopasdfghjklzxcvbnm',
stk_amt: '1.5 ETH',
stk_rwd: '0.045 ETH',
date: '01/01/2023',
apy: '2.1 %',
status: 'pending',
operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
},
{
tx_hash: '1234567890qwertyuiopasdfghjklzxcvbnm',
stk_amt: '1.5 ETH',
stk_rwd: '0.045 ETH',
date: '01/01/2023',
apy: '2.1 %',
status: 'pending',
operators: ['op 1', 'op 2', 'op 3', 'op 4', 'op 5']
},
],
})
const filteredData = ref(tableMockedItems.value[tableView.value as keyof typeof tableMockedItems.value])
const filteredData = ref(tableData.value[tableView.value as keyof typeof tableData.value])
const filterData = () => {
let filteredDataArray
if (searchInput.value === '') {
filteredDataArray = tableMockedItems.value[tableView.value as keyof typeof tableMockedItems.value]
filteredDataArray = tableData.value[tableView.value as keyof typeof tableData.value]
} else {
const searchTerm = searchInput.value
filteredDataArray = (tableMockedItems.value[tableView.value as keyof typeof tableMockedItems.value] as Array<any>).filter(item => {
filteredDataArray = (tableData.value[tableView.value as keyof typeof tableData.value] as Array<any>).filter(item => {
return (
// Might need to modify to match types each variable
item.wallet_provider?.toLowerCase().includes(searchTerm) ||
Expand Down Expand Up @@ -148,11 +123,14 @@ const filterData = () => {
}
})
}
totalPages.value = Math.round(filteredDataArray.length / itemsPerPage.value)
filteredData.value = filteredDataArray
const start = (currentPage.value - 1) * itemsPerPage.value
const end = start + itemsPerPage.value
filteredData.value = filteredDataArray.slice(start, end) as any
}
watch([searchInput, tableView, selectedHeader, selectedOrientation], ()=>{
watch([searchInput, tableView, selectedHeader, selectedOrientation, currentPage], ()=>{
filterData()
})
Expand All @@ -174,12 +152,10 @@ const convertJsonToCsv = (jsonData: any[]) => {
const csvRows = []
if (!Array.isArray(jsonData)) {
console.error('jsonData is not an array')
return ''
}
if (jsonData.length === 0) {
console.warn('jsonData is an empty array')
return ''
}
Expand Down Expand Up @@ -240,6 +216,70 @@ const removeItemFromCheckedList = (item:any) => {
checkedItems.value.splice(index, 1)
}
}
const setTableData = () =>{
if(!rawUserAnalytics.value) return
const sortedTransactions = rawUserAnalytics.value.sort((a: any, b: any) => {
new Date(a.receivedAt).getTime() - new Date(b.receivedAt).getTime()
})
const newTable = tableData.value
newTable.Transactions = sortedTransactions.map((item: any) =>{
return {
tx_hash: item.txId,
stk_amt: item.amount,
stk_rwd: item.rewards,
date: item.receivedAt,
apy: item.apy,
status: item.status,
operators: item.opperators
}
})
let filteredWallets = [] as any
sortedTransactions.forEach((item: any) => {
const index = filteredWallets.findIndex((i: any)=> i.act === item.walletAddress)
if(index > -1) {
if(new Date(filteredWallets[index].date).getTime() < new Date(item.receivedAt).getTime()){
filteredWallets[index].bal === item.walletBalance
}
} else {
let provider = user.value?.accounts.find(i => i.address.toLocaleLowerCase() === item.walletAddress.toLocaleLowerCase())?.walletProvider
filteredWallets.push(
{
wallet_provider: provider? provider : 'Unknown',
act: item.walletAddress,
bal: item.walletBalance,
stk_amt: item.amount,
stk_rwd: item.rewards,
date: item.receivedAt
}
)
}
})
newTable.Wallets = filteredWallets
tableData.value = newTable
}
watch(rawUserAnalytics, () =>{
setTableData()
filterData()
})
onMounted(() =>{
setTableData()
filterData()
})
</script>

<template>
Expand Down Expand Up @@ -318,7 +358,7 @@ const removeItemFromCheckedList = (item:any) => {
<thead>
<tr class="bg-[#FCFCFD] border-b border-b-[#EAECF0] whitespace-nowrap">
<th
v-for="header in tableHeaderOptions[tableView as keyof typeof tableHeaderOptions].headers"
v-for="header in tableHeaderOptions[tableView].headers"
:key="header.title"
class="table_header "
>
Expand Down Expand Up @@ -379,11 +419,11 @@ const removeItemFromCheckedList = (item:any) => {
>
<tr
v-for="item in filteredData"
:key="(item as any).act || (item as any).tx_hash"
:key="item"
class="w-full text-grey_5 text-body border-b border-grey_2 h-[72px]"
>
<td
v-for="header in tableHeaderOptions[tableView as keyof typeof tableHeaderOptions].headers"
v-for="header in tableHeaderOptions[tableView].headers"
:key="header.title"
class="dynamic_padding"
>
Expand All @@ -403,20 +443,21 @@ const removeItemFromCheckedList = (item:any) => {
/>
</button>
<img
:src="`/${item[header.value as keyof typeof item]}.svg`"
v-if="item[header.value] != 'Unknown'"
:src="`/${item[header.value ]}.svg`"
alt="Avatar "
class="w-[20px] h-[20px]"
>
<h6 class="title_name 800s:w-[20px] w-[50px] truncate">
{{ item[header.value as keyof typeof item] }}
<h6 class="title_name 800s:w-[20px]">
{{ item[header.value ] }}
</h6>
</div>
<div
v-else-if="header.value === 'act'"
class="flex items-center gap-[12px] underline"
>
<a href="">
{{ convertString(item[header.value as keyof typeof item]) }}
{{ convertString(item[header.value ]) }}
</a>
</div>
<div
Expand All @@ -435,22 +476,22 @@ const removeItemFromCheckedList = (item:any) => {
/>
</button>
<a class="">
{{ convertString(item[header.value as keyof typeof item]) }}
{{ convertString(item[header.value ]) }}
</a>
</div>
<div
v-else-if="header.value === 'status'"
class="flex items-center gap-[12px]"
>
<div
v-if="item[header.value as keyof typeof item] === 'staked'"
v-if="item[header.value ] === 'Active'"
class="flex items-center gap-[8px] status_pill bg-[#ECFDF3] text-[#027A48]"
>
<div class="bg-[#027A48] rounded-[999px] w-[8px] h-[8px]" />
Staked
</div>
<div
v-else-if="item[header.value as keyof typeof item] === 'pending'"
v-else-if="item[header.value ] === 'Pending'"
class="flex items-center gap-[8px] status_pill bg-[#FFFAEB] text-[#B54708]"
>
<div class="bg-[#F79009] rounded-[999px] w-[8px] h-[8px]" />
Expand All @@ -462,34 +503,41 @@ const removeItemFromCheckedList = (item:any) => {
class="flex items-center gap-[12px] pl-[20px]"
>
<div
v-for="operator in item[header.value as keyof typeof item]"
v-for="operator in item[header.value ]"
:key="operator"
:class="`w-[24px] h-[24px] border-[2px] border-white bg-blue-300 rounded-[999px]`"
:style="`margin-left: -20px`"
:class="`w-[24px] h-[24px] border-[2px] border-white rounded-[999px]`"
:style="`margin-left: -20px; background-color: ${operator}; opacity: 0.55`"
/>
</div>
<div v-else>
{{ item[header.value as keyof typeof item] }}
{{ item[header.value ] }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Waiting on a bigger data set to do this.. for now will comment out -->
<!-- <div class="flex justify-between items-center mt-[12px]">
<div class="flex justify-between items-center mt-[12px]">
<div class="page_number ml-[56px]">
Page 1 of 10
Page {{ currentPage }} of {{ totalPages }}
</div>
<div class="flex items-center gap-[12px]">
<button class="pagination_button">
<button
class="pagination_button"
:disabled="currentPage === 1"
@click="currentPage > 1? currentPage = currentPage - 1 : ''"
>
Previous
</button>
<button class="pagination_button mr-[33px]">
<button
class="pagination_button mr-[33px]"
:disabled="currentPage === totalPages"
@click="currentPage < totalPages? currentPage = currentPage + 1 : ''"
>
Next
</button>
</div>
</div> -->
</div>
</div>
</template>

Expand Down

0 comments on commit b3b77cc

Please sign in to comment.