Finish search bar

src/@core/layouts/components/app-navbar/components/SearchBar.vue

@@ -30,10 +30,11 @@
         placeholder="Search Height/Transaction/Address"
         autofocus
         autocomplete="off"
+        @keyup.enter="doQuery"
       />
       <div
         class="search-input-close"
-        @click="showSearchBar = false; resetsearchQuery()"
+        @click="showSearchBar = false;"
       >
         <feather-icon icon="XIcon" />
       </div>
@@ -45,7 +46,7 @@
 import { BFormInput } from 'bootstrap-vue'
 import { ref } from '@vue/composition-api'
 import { title } from '@core/utils/filter'
-import searchAndBookmarkData from '../search-and-bookmark-data'
+import store from '@/store'
 
 export default {
   components: {
@@ -61,10 +62,34 @@ export default {
     return {
       showSearchBar,
       perfectScrollbarSettings,
-      searchAndBookmarkData,
       title,
     }
   },
+  data() {
+    return {
+      searchQuery: null,
+    }
+  },
+  methods: {
+    doQuery() {
+      const height = /^\d+$/
+      const txhash = /^[A-Z\d]{64}$/
+      const addr = /^[a-z]{2,6}1[a-z\d]{38}$/
+      const key = this.searchQuery
+
+      const c = store.state.chains.selected
+      if (!Object.values(this.$route.params).includes(key)) {
+        if (height.test(key)) {
+          this.$router.push({ name: 'block', params: { chain: c.chain_name, height: key } })
+        } else if (txhash.test(key)) {
+          this.$router.push({ name: 'transaction', params: { chain: c.chain_name, hash: key } })
+        } else if (addr.test(key)) {
+          // console.log('address', key)
+        }
+      }
+      // this.$router.push('/')
+    },
+  },
 }
 </script>
 

src/views/Block.vue

@@ -66,24 +66,36 @@ export default {
       ],
     }
   },
+  beforeRouteUpdate(to, from, next) {
+    const { height } = to.params
+    if (height > 0 && height !== from.params.height) {
+      this.initData(height)
+      next()
+    }
+  },
   created() {
     const { height } = this.$route.params
-    this.$http.getBlockByHeight(height).then(res => {
-      this.block = res
-      const { txs } = res.block.data
-      const array = []
-      for (let i = 0; i <= txs.length; i += 1) {
-        try {
-          const origin = decodeTxRaw(fromBase64(txs[i]))
-          const tx = Tx.create(origin)
-          tx.setHash(txs[i])
-          array.push(tx)
-        } catch (e) {
+    this.initData(height)
+  },
+  methods: {
+    initData(height) {
+      this.$http.getBlockByHeight(height).then(res => {
+        this.block = res
+        const { txs } = res.block.data
+        const array = []
+        for (let i = 0; i <= txs.length; i += 1) {
+          try {
+            const origin = decodeTxRaw(fromBase64(txs[i]))
+            const tx = Tx.create(origin)
+            tx.setHash(txs[i])
+            array.push(tx)
+          } catch (e) {
           // catch errors
+          }
         }
-      }
-      if (array.length > 0) this.txs = array
-    })
+        if (array.length > 0) this.txs = array
+      })
+    },
   },
 }
 </script>

src/views/Transaction.vue

@@ -25,7 +25,10 @@
         <b-tr>
           <b-td>
             {{ 'height' }}
-          </b-td><b-td>{{ tx.height }}</b-td>
+          </b-td><b-td>
+            <router-link :to="`../blocks/${tx.height}`">
+              {{ tx.height }}
+            </router-link></b-td>
         </b-tr>
         <b-tr>
           <b-td>
@@ -103,6 +106,16 @@ export default {
       tx: { tx: {} },
     }
   },
+  beforeRouteUpdate(to, from, next) {
+    const { hash } = to.params
+    console.log(hash !== from.params.hash, hash, from.params)
+    if (hash !== from.params.hash) {
+      this.$http.getTxs(hash).then(res => {
+        this.tx = res
+      })
+      next()
+    }
+  },
   created() {
     const { hash } = this.$route.params
     this.$http.getTxs(hash).then(res => {