search results page working again

peterwilli · Jul 26, 2017 · 502d028 · 502d028
1 parent 932b067
commit 502d028
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 32 deletions.
diff --git a/tangle-explorer-web/src/components/SearchField.vue b/tangle-explorer-web/src/components/SearchField.vue
@@ -82,6 +82,29 @@ export default {
 }
 </script>
 
+<style lang="stylus">
+.search-field
+  .results
+    position absolute
+    width 80%
+    right 0
+    top 37px
+    background #fff
+    border-left 1px solid #121728
+    border-right 1px solid #121728
+    border-bottom 1px solid #121728
+
+    .result:hover
+      background #eee
+
+    .result
+      padding 5px
+      padding-left 10px
+      cursor pointer
+      .result-cat
+        font-weight bold
+</style>
+
 <style lang="stylus" scoped>
 .search
   width 100%

diff --git a/tangle-explorer-web/src/components/SearchResults.vue b/tangle-explorer-web/src/components/SearchResults.vue
@@ -6,7 +6,7 @@
         <span class="result-cat">No transaction or address found</span>
       </div>
     </div>
-  
+
     <div class="result" @click="goTo('Transaction', result.hash)" v-for="result in txResults">
       <div class="cut-text hash">
       <ceri-icon name="fa-hashtag"></ceri-icon>
@@ -71,25 +71,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus" scoped>
-.results
-  position absolute
-  width 80%
-  right 0
-  top 37px
-  background #fff
-  border-left 1px solid #121728
-  border-right 1px solid #121728
-  border-bottom 1px solid #121728
-
-  .result:hover
-    background #eee
-
-  .result
-    padding 5px
-    padding-left 10px
-    cursor pointer
-    .result-cat
-      font-weight bold
-</style>
diff --git a/tangle-explorer-web/src/pages/Search.vue b/tangle-explorer-web/src/pages/Search.vue
@@ -1,27 +1,30 @@
 <template lang="html">
-  <div class="container">
+  <div class="container search-page" v-if="!searching">
     <legend>
       Results
     </legend>
-    <search-results v-if="addrResults !== null && txResults !== null && bundleResults !== null" :bundleResults='bundleResults' :txResults='txResults' :addrResults='addrResults'></search-results>
+    <search-results v-if="addrResults !== null || txResults !== null || bundleResults !== null" :bundleResults='bundleResults' :txResults='txResults' :addrResults='addrResults'></search-results>
     <div class="absence error" v-else>
       No transaction or address found :(
     </div>
   </div>
+  <div v-else class="container page-loading">
+    <pulse-loader :color="'#000'" size='30px'></pulse-loader>
+  </div>
 </template>
 
 <script>
 require('@/lib/iota')
 const iotaNode = require("@/utils/iota-node")
 const iotaSearch = require('@/utils/iota-search-engine.js')
 
-import IotaBalanceView from '@/components/IotaBalanceView.vue'
-import RelativeTime from '@/components/RelativeTime.vue'
 import SearchResults from '@/components/SearchResults.vue'
+import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
 
 export default {
   components: {
-    SearchResults
+    SearchResults,
+    PulseLoader
   },
   mounted() {
     var val = this.$route.params.query
@@ -32,10 +35,13 @@ export default {
       _this.addrResults = addresses
     }, (bundles) => {
       _this.bundleResults = bundles
+    }, () => {
+      _this.searching = false
     })
   },
   data() {
     return {
+      searching: true,
       txResults: null,
       addrResults: null,
       bundleResults: null
@@ -44,7 +50,20 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped>
-.container
-  position relative
+<style lang="stylus">
+.search-page
+  .results
+    right 0
+    top 37px
+    background #fff
+
+    .result:hover
+      background #eee
+
+    .result
+      padding 5px
+      padding-left 10px
+      cursor pointer
+      .result-cat
+        font-weight bold
 </style>
diff --git a/tangle-explorer-web/src/utils/iota-search-engine.js b/tangle-explorer-web/src/utils/iota-search-engine.js
@@ -2,7 +2,17 @@ require('@/lib/iota')
 const iotaNode = require("@/utils/iota-node")
 const _ = require('lodash')
 
-module.exports = (val, callbackTxs, callbackAddresses, callbackBundles) => {
+module.exports = (val, callbackTxs, callbackAddresses, callbackBundles, fullyDone) => {
+  var callbackStack = 3
+  var callbackCheck = () => {
+    callbackStack--
+    if(callbackStack === 0) {
+      if(fullyDone !== undefined) {
+        fullyDone()
+      }
+    }
+  }
+
   iotaNode.iota.api.getBalances([val], 20, function(e, r) {
     if(r !== undefined) {
       var balance = parseInt(r.balances[0])
@@ -13,19 +23,24 @@ module.exports = (val, callbackTxs, callbackAddresses, callbackBundles) => {
             balance: balance
           }])
         }
+        callbackCheck()
       })
+    } else {
+      callbackCheck()
     }
   })
   iotaNode.iota.api.getTransactionsObjects([val], function(e, r) {
     callbackTxs(_.filter(r, (tx) => {
       return tx.hash !== '999999999999999999999999999999999999999999999999999999999999999999999999999999999'
     }))
+    callbackCheck()
   })
   iotaNode.iota.api.findTransactionObjects({ bundles: [val] }, function(e, r) {
     if(r !== undefined && r.length > 0) {
       callbackBundles([{
         hash: r[0].bundle
       }])
     }
+    callbackCheck()
   })
 }