feat: Add tab navigation (#530)

aeternity · Oct 19, 2023 · 85927f4 · 85927f4
1 parent 9489d33
commit 85927f4
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 6 deletions.
diff --git a/src/pages/accounts/[id].vue b/src/pages/accounts/[id].vue
@@ -16,7 +16,9 @@
       :account-details="accountDetails"/>
 
     <client-only>
-      <app-tabs v-if="isTabsVisible">
+      <app-tabs
+        v-if="isTabsVisible"
+        v-model="activeTabIndex">
         <app-tab title="Activities">
           <account-activities-panel/>
         </app-tab>
@@ -39,7 +41,7 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
-import { useRoute } from 'nuxt/app'
+import { useRoute, useRouter } from 'nuxt/app'
 import { useAccountStore } from '@/stores/accountDetails'
 import AppTabs from '@/components/AppTabs'
 import AppTab from '@/components/AppTab'
@@ -52,7 +54,10 @@ import AccountDetailsPanel from '@/components/AccountDetailsPanel'
 import { accountHints } from '@/utils/hints/accountHints'
 import { isDesktop } from '@/utils/screen'
 
+const TAB_KEYS = ['activities', 'transactions', 'aens-names', 'tokens']
+
 const { isLoading } = useLoading()
+const { push, replace } = useRouter()
 
 const accountStore = useAccountStore()
 const { accountDetails, accountTokens } = storeToRefs(accountStore)
@@ -67,6 +72,32 @@ const isTokensTabSelected = computed(() => process.client &&
     accountDetails.value?.notExistent &&
     !!accountTokens.value?.data.length)
 
+const activeTabIndex = computed({
+  get() {
+    const { type: activeTabName } = route.query
+
+    if (activeTabName === undefined) {
+      return 0
+    }
+
+    return TAB_KEYS.indexOf(activeTabName)
+  },
+  set(index) {
+    const newRoute = {
+      query: {
+        type: TAB_KEYS[index],
+      },
+    }
+
+    if (activeTabIndex.value === index) {
+      // if navigating back
+      return replace(newRoute)
+    }
+
+    return push(newRoute)
+  },
+})
+
 if (process.client) {
   const limit = isDesktop() ? null : 3
   await fetchAccount(route.params.id, { limit })

diff --git a/src/pages/contracts/[id].vue b/src/pages/contracts/[id].vue
@@ -21,7 +21,9 @@
       class="contract-details__panel"
       :contract-details="contractDetails"/>
 
-    <app-tabs v-if="contractDetails">
+    <app-tabs
+      v-if="contractDetails"
+      v-model="activeTabIndex">
       <app-tab title="Call Transactions">
         <contract-call-transactions-panel/>
       </app-tab>
@@ -35,6 +37,7 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
+import { useRouter } from '#app'
 import ContractDetailsPanel from '@/components/ContractDetailsPanel'
 import PageHeader from '@/components/PageHeader'
 import { useContractDetailsStore } from '@/stores/contractDetails'
@@ -49,6 +52,35 @@ const contractDetailsStore = useContractDetailsStore()
 const { contractDetails } = storeToRefs(contractDetailsStore)
 const { fetchContractDetails, fetchContractEvents } = contractDetailsStore
 const route = useRoute()
+const { push, replace } = useRouter()
+
+const TAB_KEYS = ['call-transactions', 'events']
+
+const activeTabIndex = computed({
+  get() {
+    const { type: activeTabName } = route.query
+
+    if (activeTabName === undefined) {
+      return 0
+    }
+
+    return TAB_KEYS.indexOf(activeTabName)
+  },
+  set(index) {
+    const newRoute = {
+      query: {
+        type: TAB_KEYS[index],
+      },
+    }
+
+    if (activeTabIndex.value === index) {
+      // if navigating back
+      return replace(newRoute)
+    }
+
+    return push(newRoute)
+  },
+})
 
 const { isLoading } = useLoading()
 

diff --git a/src/pages/nfts/[id].vue b/src/pages/nfts/[id].vue
@@ -14,7 +14,7 @@
       v-if="nft"
       class="nft-details__panel"
       :nft-details="nft"/>
-    <app-tabs>
+    <app-tabs v-model="activeTabIndex">
       <app-tab title="Transfers">
         <nfts-transfers-panel/>
       </app-tab>
@@ -35,18 +35,48 @@ import { useNftDetailsStore } from '@/stores/nftDetails'
 import NftDetailsPanel from '@/components/NftsDetailsPanel'
 import NftInventoryPanel from '@/components/NftsInventoryPanel'
 import NftOwnersPanel from '@/components/NftsOwnersPanel'
+import AppTabs from '~/components/AppTabs'
 
 const nftDetailsStore = useNftDetailsStore()
 const { nft } = storeToRefs(nftDetailsStore)
 const { fetchNftDetails } = nftDetailsStore
 const route = useRoute()
+const { push, replace } = useRouter()
 
 const { isLoading } = useLoading()
 
 const hasTemplates = computed(() => {
   return nft.value?.extensions.includes('mintable_templates_limit')
 })
 
+const TAB_KEYS = ['transfers', 'inventory']
+
+const activeTabIndex = computed({
+  get() {
+    const { type: activeTabName } = route.query
+
+    if (activeTabName === undefined) {
+      return 0
+    }
+
+    return TAB_KEYS.indexOf(activeTabName)
+  },
+  set(index) {
+    const newRoute = {
+      query: {
+        type: TAB_KEYS[index],
+      },
+    }
+
+    if (activeTabIndex.value === index) {
+      // if navigating back
+      return replace(newRoute)
+    }
+
+    return push(newRoute)
+  },
+})
+
 try {
   await fetchNftDetails(route.params.id)
 } catch (error) {

diff --git a/src/pages/search/[id].vue b/src/pages/search/[id].vue
@@ -7,7 +7,7 @@
   </page-header>
 
   <template v-if="!isLoading">
-    <app-tabs>
+    <app-tabs v-model="activeTabIndex">
       <app-tab title="Names">
         <search-names-panel/>
       </app-tab>
@@ -24,5 +24,36 @@ import PageHeader from '@/components/PageHeader'
 import AppTabs from '@/components/AppTabs'
 import AppTab from '@/components/AppTab'
 
+const route = useRoute()
+const { push, replace } = useRouter()
+
+const TAB_KEYS = ['names', 'tokens']
+
+const activeTabIndex = computed({
+  get() {
+    const { type: activeTabName } = route.query
+
+    if (activeTabName === undefined) {
+      return 0
+    }
+
+    return TAB_KEYS.indexOf(activeTabName)
+  },
+  set(index) {
+    const newRoute = {
+      query: {
+        type: TAB_KEYS[index],
+      },
+    }
+
+    if (activeTabIndex.value === index) {
+      // if navigating back
+      return replace(newRoute)
+    }
+
+    return push(newRoute)
+  },
+})
+
 const { isLoading } = useLoading()
 </script>
diff --git a/src/pages/tokens/[id].vue b/src/pages/tokens/[id].vue
@@ -16,7 +16,7 @@
       class="token-details__panel"
       :token-details="tokenDetails"/>
 
-    <app-tabs>
+    <app-tabs v-model="activeTabIndex">
       <app-tab title="Holders">
         <token-holders-panel/>
       </app-tab>
@@ -30,6 +30,7 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
+import { useRouter } from '#app'
 import TokenDetailsPanel from '@/components/TokenDetailsPanel'
 import TokenHoldersPanel from '@/components/TokenHoldersPanel'
 import PageHeader from '@/components/PageHeader'
@@ -40,12 +41,40 @@ import { tokensHints } from '@/utils/hints/tokensHints'
 import TokenEventsPanel from '@/components/TokenEventsPanel'
 
 const route = useRoute()
+const { push, replace } = useRouter()
 
 const tokenDetailsStore = useTokenDetailsStore()
 const { tokenDetails } = storeToRefs(tokenDetailsStore)
 const { fetchTokenDetails } = tokenDetailsStore
 
 const { isLoading } = useLoading()
+const TAB_KEYS = ['holders', 'events']
+
+const activeTabIndex = computed({
+  get() {
+    const { type: activeTabName } = route.query
+
+    if (activeTabName === undefined) {
+      return 0
+    }
+
+    return TAB_KEYS.indexOf(activeTabName)
+  },
+  set(index) {
+    const newRoute = {
+      query: {
+        type: TAB_KEYS[index],
+      },
+    }
+
+    if (activeTabIndex.value === index) {
+      // if navigating back
+      return replace(newRoute)
+    }
+
+    return push(newRoute)
+  },
+})
 
 try {
   await fetchTokenDetails(route.params.id)