Refactor expandable search

src/components/ExpandableSearch.vue

@@ -18,150 +18,28 @@
       </v-btn>
     </template>
 
-    <v-combobox
-      v-show="expanded"
-      v-model="model"
-      class="hash search-box"
-      :search-input.sync="searchText"
-      :items="suggests"
-      item-text="value"
-      background-color="grey lighten-4"
-      return-object
-      placeholder="Search anything"
-      autocomplete="off"
-      no-filter
-      append-icon
-      clearable
-      hide-selected
-      hide-details
-      solo
-      dense
-      @change="onSearch"
-    >
-      <template v-slot:item="{ item }">
-        <v-list-item-avatar>
-          <v-icon v-if="item.type == 'contract'">mdi-code-tags</v-icon>
-          <v-icon v-else-if="item.type == 'operation'">mdi-swap-horizontal</v-icon>
-        </v-list-item-avatar>
-        <v-list-item-content>
-          <v-list-item-title class="hash" v-text="item.value"></v-list-item-title>
-          <v-list-item-subtitle>Found in {{item.body.found_by}}</v-list-item-subtitle>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-list-item-action-text class="overline primary--text" v-text="item.body.network"></v-list-item-action-text>
-        </v-list-item-action>
-      </template>
-    </v-combobox>
+    <template v-show="expanded">
+      <SearchBox :expandable="true" />
+    </template>
+
   </v-menu>
 </template>
 
 <script>
-import { mapActions } from "vuex";
-
-import * as api from "@/api/index.js";
-import { checkAddress, checkOperation } from "@/utils/tz.js";
+import SearchBox from "@/components/SearchBox.vue";
 
 export default {
   name: "ExpandableSearch",
-  props: {
-    toolbar: Boolean
-  },
-  computed: {
-    background() {
-      if (this.toolbar) {
-        return "rgba(255, 255, 255, 0)";
-      }
-      return "transparent";
-    }
+  components: {
+    SearchBox
   },
   data: () => ({
-    history: [],
-    suggests: [],
-    model: null,
-    searchText: null,
     expanded: false
   }),
-  methods: {
-    ...mapActions(["showError"]),
-    onSearch() {
-      if (!this.model) return;
-      let value = this.model.value || this.model;
-
-      if (this.model.type === "operation" && checkOperation(value)) {
-        this.expanded = false;
-        this.model = null;
-        this.$router.push({ path: `/opg/${value}` });
-      }
-      if (this.model.type === "contract" && checkAddress(value)) {
-        this.expanded = false;
-        let network = this.model.body.network;
-        this.model = null;
-        this.$router.push({
-          path: `/${network}/${value}`
-        });
-      }
-    }
-  },
   watch: {
-    searchText(val) {
-      if (val != null && val != undefined && val.length > 1) {
-        api
-          .search(val)
-          .then(res => {
-            this.suggests = res.items;
-          })
-          .catch(err => {
-            console.log(err);
-            this.showError(err);
-          });
-      }
+    '$route.params': function () {
+        this.expanded = false;
     }
   }
 };
 </script>
-
-
-<style lang="scss">
-.v-autocomplete.error--text {
-  .v-messages {
-    font-size: 13px;
-  }
-  input {
-    color: #ff5252 !important;
-  }
-}
-.v-autocomplete__content {
-  .v-list {
-    padding: 4px 0;
-  }
-  .v-list-item__avatar {
-    margin: 0;
-    margin-right: 16px !important;
-  }
-  .v-list-item__action {
-    margin: 0;
-  }
-  .v-list-item__content {
-    flex-direction: column;
-
-    .v-list-item__title {
-      margin-right: auto;
-    }
-    .v-list-item__subtitle {
-      margin-right: auto;
-      opacity: 0.65;
-      max-width: 100%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-}
-</style>
-
-<style scoped>
-.search-box {
-  font-size: 12px;
-  margin-bottom: 1px;
-}
-</style>

src/components/SearchBox.vue

@@ -4,21 +4,22 @@
     :search-input.sync="searchText"
     :items="suggests"
     item-text="value"
+    @change="onSearch"
+    @keyup.enter="onEnter"
     return-object
-    prepend-inner-icon="mdi-magnify"
     placeholder="Search anything"
     autocomplete="off"
     no-filter
     append-icon
     clearable
     hide-selected
-    :background-color="background"
-    :hide-details="toolbar"
-    :solo="toolbar"
-    :flat="toolbar"
-    :outlined="!toolbar"
-    @change="onSearch"
-    @keyup.enter="onEnter"
+    :prepend-inner-icon="expandable? null : 'mdi-magnify'"
+    :outlined="!expandable"
+    :background-color="expandable ? 'grey lighten-4' : 'transparent'"
+    :hide-details="expandable"
+    :solo="expandable"
+    :dense="expandable"
+    :class="expandable ? 'expandable-search' : ''"
   >
     <template v-slot:item="{ item }">
         <v-list-item-avatar>
@@ -64,7 +65,7 @@ import dayjs from "dayjs";
 
 export default {
   props: {
-    toolbar: Boolean
+    expandable: Boolean
   },
   computed: {
     background() {
@@ -126,9 +127,9 @@ export default {
     },
     shortcut(value, size=18) {
       if (value !== undefined
-        && value.length > 2 * size + 1
+        && value.length > 2 * size + 2
         && (value.startsWith('KT') || value.startsWith('tz') || value.startsWith('o'))) {
-        return value.substr(0, size) + `\u2026` + value.substr(value.length - size, size);
+        return value.substr(0, size) + `\u2026\u202F` + value.substr(value.length - size, size);
       } else {
         return value;
       }
@@ -179,5 +180,20 @@ export default {
       text-overflow: ellipsis;
     }
   }
+  .v-list-item__content {
+    flex-direction: column;
+
+    .v-list-item__title {
+      margin-right: auto;
+      font-family: "Roboto Mono";
+    }
+    .v-list-item__subtitle {
+      margin-right: auto;
+    }
+  }
+}
+.expandable-search {
+  font-size: 12px;
+  margin-bottom: 1px;
 }
 </style>

src/views/Home.vue

@@ -9,7 +9,7 @@
         </v-row>
         <v-row justify="center" no-gutters>
           <v-col cols="12" sm="8" lg="6" xl="4">
-            <SearchBox />
+            <SearchBox :expandable="false" />
           </v-col>
           <v-col cols="12" align="center">
             <v-btn large depressed tile color="primary" class="mr-5" to="/search">Advanced Search</v-btn>