-
Notifications
You must be signed in to change notification settings - Fork 9
/
TokenBalanceTable.vue
127 lines (105 loc) · 4.43 KB
/
TokenBalanceTable.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!--
-
- Hedera Mirror Node Explorer
-
- Copyright (C) 2021 - 2024 Hedera Hashgraph, LLC
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-
-->
<!-- --------------------------------------------------------------------------------------------------------------- -->
<!-- TEMPLATE -->
<!-- --------------------------------------------------------------------------------------------------------------- -->
<template>
<o-table
:data="tokenBalances"
:loading="loading"
paginated
backend-pagination
pagination-order="left"
:range-before="0"
:range-after="0"
:total="total"
v-model:current-page="currentPage"
:per-page="perPage"
@page-change="onPageChange"
@cell-click="handleClick"
:hoverable="true"
:narrowed="true"
:striped="true"
:mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"
aria-current-label="Current page"
aria-next-label="Next page"
aria-page-label="Page"
aria-previous-label="Previous page"
customRowKey="account"
>
<o-table-column v-slot="props" field="account" label="Account ID">
<AccountIOL :account-id="props.row.account"/>
</o-table-column>
<o-table-column v-slot="props" field="balance" label="Balance" position="right">
<TokenAmount v-bind:amount="BigInt(props.row.balance)" v-bind:token-id="tokenId"/>
</o-table-column>
</o-table>
<EmptyTable v-if="!tokenBalances.length"/>
</template>
<!-- --------------------------------------------------------------------------------------------------------------- -->
<!-- SCRIPT -->
<!-- --------------------------------------------------------------------------------------------------------------- -->
<script lang="ts">
import {ComputedRef, defineComponent, inject, PropType, Ref} from 'vue';
import {TokenDistribution} from "@/schemas/HederaSchemas";
import {routeManager} from "@/router";
import TokenAmount from "@/components/values/TokenAmount.vue";
import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
import EmptyTable from "@/components/EmptyTable.vue";
import {TokenBalanceTableController} from "@/components/token/TokenBalanceTableController";
import AccountIOL from "@/components/values/link/AccountIOL.vue";
export default defineComponent({
name: 'TokenBalanceTable',
components: {AccountIOL, EmptyTable, TokenAmount},
props: {
controller: {
type: Object as PropType<TokenBalanceTableController>,
required: true
},
},
setup(props) {
const isTouchDevice = inject('isTouchDevice', false)
const isMediumScreen = inject('isMediumScreen', true)
const handleClick = (t: TokenDistribution, c: unknown, i: number, ci: number, event: MouseEvent) => {
if (t.account) {
routeManager.routeToAccount(t.account, event.ctrlKey || event.metaKey)
}
}
return {
isTouchDevice,
isMediumScreen,
tokenId: props.controller.tokenId.value,
tokenBalances: props.controller.rows as ComputedRef<TokenDistribution[]>,
loading: props.controller.loading as ComputedRef<boolean>,
total: props.controller.totalRowCount as ComputedRef<number>,
currentPage: props.controller.currentPage as Ref<number>,
onPageChange: props.controller.onPageChange,
perPage: props.controller.pageSize as Ref<number>,
handleClick,
ORUGA_MOBILE_BREAKPOINT
}
}
});
</script>
<!-- --------------------------------------------------------------------------------------------------------------- -->
<!-- STYLE -->
<!-- --------------------------------------------------------------------------------------------------------------- -->
<style scoped>
</style>