Skip to content

Commit 9a44b3d

Browse files
xdeqxdeq
committed
feat: save selected tab in route query
1 parent af9436c commit 9a44b3d

6 files changed

Lines changed: 132 additions & 65 deletions

File tree

‎components/modules/address/AddressOverview.vue‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,10 @@ const tabs = ref([
101101
},
102102
])
103103
104-
const activeTab = ref(tabs.value[0].alias)
104+
const preselectedTab =
105+
route.query.tab && tabs.value.map((tab) => tab.alias).includes(route.query.tab) ? route.query.tab : tabs.value[0].alias
106+
const activeTab = ref(preselectedTab)
107+
105108
const tabsEl = ref(null)
106109
107110
const handleSelect = (tab) => {
@@ -200,7 +203,7 @@ const searchTerm = ref("")
200203
201204
/** Parse route query */
202205
Object.keys(route.query).forEach((key) => {
203-
if (key === "page") return
206+
if (key === "page" || key === "tab") return
204207
205208
if (route.query[key].split(",").length) {
206209
route.query[key].split(",").forEach((item) => {
@@ -359,8 +362,6 @@ const getBlobs = async () => {
359362
isRefetching.value = false
360363
}
361364
362-
await getTransactions()
363-
364365
/** Delegation */
365366
const isActiveDelegator = props.address.balance.delegated > 0 || props.address.balance.unbonding > 0
366367
const collapseBalances = ref(!isActiveDelegator)
@@ -421,10 +422,22 @@ const getUndelegations = async () => {
421422
isRefetching.value = false
422423
}
423424
425+
if (activeTab.value === "transactions") await getTransactions()
426+
if (activeTab.value === "messages") await getMessages()
427+
if (activeTab.value === "blobs") await getBlobs()
428+
if (activeTab.value === "delegations") await getDelegations()
429+
if (activeTab.value === "redelegations") await getRedelegations()
430+
424431
/** Refetch transactions */
425432
watch(
426433
() => activeTab.value,
427434
() => {
435+
router.replace({
436+
query: {
437+
tab: activeTab.value,
438+
},
439+
})
440+
428441
page.value = 1
429442
430443
switch (activeTab.value) {

‎components/modules/block/BlockOverview.vue‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import AmountInCurrency from "@/components/AmountInCurrency.vue"
1414
1515
/** Shared Components */
1616
import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
17-
import Events from "@/components/shared/tables/Events.vue";
17+
import Events from "@/components/shared/tables/Events.vue"
1818
1919
/** Services */
2020
import { comma, formatBytes, reverseMapping, space, shortHex, tia } from "@/services/utils"
@@ -56,12 +56,12 @@ const bookmarkText = computed(() => {
5656
return isBookmarked.value ? "Saved" : "Save"
5757
})
5858
59-
const activeTab = ref("transactions")
59+
const preselectedTab = route.query.tab && ["transactions", "events"].includes(route.query.tab) ? route.query.tab : "transactions"
60+
const activeTab = ref(preselectedTab)
6061
6162
const isLoading = ref(false)
6263
const transactions = ref([])
6364
64-
6565
const page = ref(1)
6666
const pages = computed(() => 1)
6767
const handleNext = () => {
@@ -247,7 +247,7 @@ onMounted(() => {
247247
watch(
248248
() => page.value,
249249
() => {
250-
if (activeTab.value === 'transactions') {
250+
if (activeTab.value === "transactions") {
251251
getTransactions()
252252
}
253253
},
@@ -256,8 +256,14 @@ watch(
256256
watch(
257257
() => activeTab.value,
258258
() => {
259+
router.replace({
260+
query: {
261+
tab: activeTab.value,
262+
},
263+
})
264+
259265
page.value = 1
260-
266+
261267
getTransactions()
262268
},
263269
)
@@ -325,13 +331,8 @@ const handleViewRawTransactions = () => {
325331
</Flex>
326332

327333
<Flex align="center" gap="8">
328-
<Button
329-
@click="router.push(`/block/${block.height - 1}`)"
330-
type="secondary"
331-
size="mini"
332-
:disabled="block.height === 1"
333-
>
334-
<Icon name="arrow-redo-right" size="16" color="secondary" :style="{transform: 'scaleX(-1)'}" />
334+
<Button @click="router.push(`/block/${block.height - 1}`)" type="secondary" size="mini" :disabled="block.height === 1">
335+
<Icon name="arrow-redo-right" size="16" color="secondary" :style="{ transform: 'scaleX(-1)' }" />
335336
Prev
336337
</Button>
337338

@@ -464,7 +465,10 @@ const handleViewRawTransactions = () => {
464465
</Flex>
465466
<Flex align="center" justify="between">
466467
<Text size="12" weight="600" color="tertiary"> Total Fees </Text>
467-
<AmountInCurrency :amount="{ value: block.stats.fee, decimal: 6 }" :styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }" />
468+
<AmountInCurrency
469+
:amount="{ value: block.stats.fee, decimal: 6 }"
470+
:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
471+
/>
468472
</Flex>
469473
<Flex align="center" justify="between">
470474
<Text size="12" weight="600" color="tertiary"> Bytes in block </Text>
@@ -605,7 +609,7 @@ const handleViewRawTransactions = () => {
605609
</Flex>
606610
</template>
607611
</Popover>
608-
</Flex>
612+
</Flex>
609613

610614
<Flex v-if="transactions.length" :class="$style.table_scroller">
611615
<table>
@@ -710,7 +714,10 @@ const handleViewRawTransactions = () => {
710714
</td>
711715
<td>
712716
<NuxtLink :to="`/tx/${tx.hash}`">
713-
<AmountInCurrency :amount="{ value: tx.fee, decimal: 6 }" :styles="{ amount: { size: '13' }, currency: { size: '13' } }" />
717+
<AmountInCurrency
718+
:amount="{ value: tx.fee, decimal: 6 }"
719+
:styles="{ amount: { size: '13' }, currency: { size: '13' } }"
720+
/>
714721
</NuxtLink>
715722
</td>
716723
</tr>
@@ -763,9 +770,7 @@ const handleViewRawTransactions = () => {
763770
</Button>
764771
</Flex>
765772
</Flex>
766-
<Events v-else :block="block">
767-
768-
</Events>
773+
<Events v-else :block="block"> </Events>
769774
</Flex>
770775
</Flex>
771776
</Flex>

‎components/modules/namespace/NamespaceOverview.vue‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const cacheStore = useCacheStore()
2525
const bookmarksStore = useBookmarksStore()
2626
const notificationsStore = useNotificationsStore()
2727
28+
const route = useRoute()
2829
const router = useRouter()
2930
3031
const props = defineProps({
@@ -51,7 +52,8 @@ const tabs = ref([
5152
icon: "message",
5253
},
5354
])
54-
const activeTab = ref(tabs.value[0].name)
55+
const preselectedTab = route.query.tab && tabs.value.map((tab) => tab.name).includes(route.query.tab) ? route.query.tab : tabs.value[0].name
56+
const activeTab = ref(preselectedTab)
5557
5658
const isRefetching = ref(false)
5759
const messages = ref([])
@@ -117,7 +119,8 @@ const getRollups = async () => {
117119
}
118120
119121
/** Initital fetch for blobs and rollups */
120-
await getBlobs()
122+
if (activeTab.value === "Blobs") await getBlobs()
123+
if (activeTab.value === "Messages") await getMessages()
121124
await getRollups()
122125
123126
onMounted(() => {
@@ -144,6 +147,12 @@ watch(
144147
watch(
145148
() => activeTab.value,
146149
() => {
150+
router.replace({
151+
query: {
152+
tab: activeTab.value,
153+
},
154+
})
155+
147156
page.value = 1
148157
149158
switch (activeTab.value) {

‎components/modules/rollup/RollupOverview.vue‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ import { useNotificationsStore } from "@/store/notifications"
2626
const cacheStore = useCacheStore()
2727
const notificationsStore = useNotificationsStore()
2828
29+
const route = useRoute()
30+
const router = useRouter()
31+
2932
const props = defineProps({
3033
rollup: {
3134
type: Object,
@@ -43,14 +46,15 @@ const tabs = ref([
4346
icon: "namespace",
4447
},
4548
])
46-
const activeTab = ref(tabs.value[0].name)
49+
const preselectedTab = route.query.tab && tabs.value.map((tab) => tab.name).includes(route.query.tab) ? route.query.tab : tabs.value[0].name
50+
const activeTab = ref(preselectedTab)
4751
4852
const isRefetching = ref(false)
4953
const namespaces = ref([])
5054
const blobs = ref([])
5155
5256
const page = ref(1)
53-
const pages = computed(() => activeTab.value === "Blobs" ? Math.ceil(props.rollup.blobs_count / 10) : 1)
57+
const pages = computed(() => (activeTab.value === "Blobs" ? Math.ceil(props.rollup.blobs_count / 10) : 1))
5458
5559
const handleNext = () => {
5660
page.value += 1
@@ -93,7 +97,8 @@ const getNamespaces = async () => {
9397
}
9498
9599
/** Initital fetch for blobs */
96-
await getBlobs()
100+
if (activeTab.value === "Blobs") await getBlobs()
101+
if (activeTab.value === "Namespaces") await getNamespaces()
97102
98103
/** Refetch Blobs/Messages on new page */
99104
watch(
@@ -115,6 +120,12 @@ watch(
115120
watch(
116121
() => activeTab.value,
117122
() => {
123+
router.replace({
124+
query: {
125+
tab: activeTab.value,
126+
},
127+
})
128+
118129
page.value = 1
119130
120131
switch (activeTab.value) {
@@ -160,7 +171,7 @@ const handleCSVDownload = async (period) => {
160171
break
161172
}
162173
let to = parseInt(DateTime.now().toMillis() / 1_000)
163-
174+
164175
const { data } = await fetchRollupExportData({
165176
id: props.rollup.id,
166177
from: from,
@@ -180,13 +191,13 @@ const handleCSVDownload = async (period) => {
180191
return
181192
}
182193
183-
const blob = new Blob([data.value], { type: 'text/csv;charset=utf-8;' })
194+
const blob = new Blob([data.value], { type: "text/csv;charset=utf-8;" })
184195
const link = document.createElement("a")
185196
186197
link.href = URL.createObjectURL(blob)
187198
link.download = `${props.rollup.slug}-blobs-last-${period}.csv`
188199
189-
link.style.visibility = 'hidden'
200+
link.style.visibility = "hidden"
190201
document.body.appendChild(link)
191202
link.click()
192203
document.body.removeChild(link)
@@ -200,7 +211,6 @@ const handleCSVDownload = async (period) => {
200211
},
201212
})
202213
}
203-
204214
</script>
205215
206216
<template>
@@ -307,7 +317,10 @@ const handleCSVDownload = async (period) => {
307317
308318
<Flex align="center" justify="between">
309319
<Text size="12" weight="600" color="tertiary">Blob Fees Paid</Text>
310-
<AmountInCurrency :amount="{ value: rollup.fee }" :styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }" />
320+
<AmountInCurrency
321+
:amount="{ value: rollup.fee }"
322+
:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
323+
/>
311324
</Flex>
312325
313326
<Flex align="start" justify="between">
@@ -387,7 +400,7 @@ const handleCSVDownload = async (period) => {
387400
<Icon name="arrow-right-stop" size="12" color="primary" />
388401
</Button>
389402
</Flex>
390-
</template>
403+
</template>
391404
<!-- Namespaces Table -->
392405
<template v-if="activeTab === 'Namespaces'">
393406
<NamespacesTable v-if="namespaces.length" :namespaces="namespaces" />
@@ -416,7 +429,6 @@ const handleCSVDownload = async (period) => {
416429
<Icon name="arrow-right" size="12" color="primary" />
417430
</Button>
418431
</Flex>
419-
420432
</template>
421433
</Flex>
422434
</Flex>

‎components/modules/tx/TxOverview.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const cacheStore = useCacheStore()
2828
const bookmarksStore = useBookmarksStore()
2929
const notificationsStore = useNotificationsStore()
3030
31+
const route = useRoute()
3132
const router = useRouter()
3233
3334
const props = defineProps({
@@ -44,9 +45,20 @@ const bookmarkText = computed(() => {
4445
return isBookmarked.value ? "Saved" : "Save"
4546
})
4647
47-
const activeTab = ref("messages")
48+
const preselectedTab = route.query.tab && ["messages", "events"].includes(route.query.tab) ? route.query.tab : "messages"
49+
const activeTab = ref(preselectedTab)
4850
const messages = ref([])
4951
52+
watch(
53+
() => activeTab.value,
54+
() =>
55+
router.replace({
56+
query: {
57+
tab: activeTab.value,
58+
},
59+
}),
60+
)
61+
5062
onMounted(async () => {
5163
isBookmarked.value = !!bookmarksStore.bookmarks.txs.find((t) => t.id === props.tx.hash)
5264
@@ -251,7 +263,10 @@ const handleViewRawTransaction = () => {
251263
</Flex>
252264
<Flex align="center" justify="between">
253265
<Text size="12" weight="600" color="tertiary"> Fee </Text>
254-
<AmountInCurrency :amount="{ value: tx.fee, decimal: 6 }" :styles="{ amount: {color: 'secondary' }, currency: {color: 'secondary' } }" />
266+
<AmountInCurrency
267+
:amount="{ value: tx.fee, decimal: 6 }"
268+
:styles="{ amount: { color: 'secondary' }, currency: { color: 'secondary' } }"
269+
/>
255270
</Flex>
256271
<Flex v-if="tx.codespace" align="center" justify="between">
257272
<Text size="12" weight="600" color="tertiary">Codespace</Text>

0 commit comments

Comments
 (0)