Search Bar Added (Search by ID, Name and Tag)

.env.local

@@ -1,8 +1,7 @@
-VUE_APP_ACCOUNT_API_URL=http://localhost:8419
+VUE_APP_ACCOUNT_API_URL=https://api.account.test.network
 VUE_APP_CRISP_WEBSITE_ID=
 VUE_APP_EXPLORER_URL=https://test.network
-VUE_APP_GATEWAY_URL=http://gateway.local.network:3000
+VUE_APP_GATEWAY_URL=https://gateway.test.network
 VUE_APP_INDEX_URL=https://index.test.network
 VUE_APP_PRODUCT_ID_PRIORITYSUPPORT=priority-support
-VUE_APP_PRODUCT_ID_MANAGEDHOSTING=managed-hosting
-VUE_APP_STRIPE_PUBLISHABLE_KEY=
+VUE_APP_STRIPE_PUBLISHABLE_KEY=pk_test_2n7wQ4HrkYxQPX6TEqo56xTG00Jg7YQHLA

package.json

@@ -13,7 +13,7 @@
   ],
   "scripts": {
     "build": "vue-cli-service build",
-    "dev": "node -r dotenv/config ./node_modules/.bin/vue-cli-service --port 8000 serve",
+    "dev": "vue-cli-service serve --port 8419",
     "dev:local": "DOTENV_CONFIG_PATH=.env.local npm run dev",
     "lint": "eslint --ext .js,.vue src",
     "lint:fix": "eslint --fix --ext .js,.vue src",

src/components/Search.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="search"
     :class="[
-      (size==='large' ? 'search--lge' : ''),
-      (size==='full' ? 'search--full' : '' ),
-      (border ? 'search--border' : '' ),
-      (background === 'transparent' ? 'search--transparent' : '' )
+      (size === 'large' ? 'search--lge' : ''),
+      (size === 'full' ? 'search--full' : ''),
+      (border ? 'search--border' : ''),
+      (background === 'transparent' ? 'search--transparent' : '')
     ]"
   >
-    <input @keyup.enter="search" class="search__input" v-model="searchInput" type="text" placeholder="Search servers by IP, name or tag" />
+    <input
+      @keyup.enter="search"
+      class="search__input"
+      v-model="searchInput"
+      type="text"
+      placeholder="Search servers by IP, name, or tag"
+    />
     <button
       class="search__submit"
       @click="search"
@@ -56,46 +62,22 @@ export default {
       type: String
     }
   },
-  data: function () {
+  data() {
     return {
       isSearching: false,
-      searchFeedback: '',
-      searchInput: '',
-      showFeedback: false
+      searchInput: ''
     }
   },
   methods: {
-    async search () {
+    async search() {
       this.isSearching = true
 
-      // const result = await search(this.searchInput)
-
-      // const { address, blocks, transactions } = result
-
-      // Edge case - resets searching flag in case the search was
-      // performed from the same page.
-      // if (
-      //   address
-      //   || (blocks && blocks[0])
-      //   || (transactions && transactions[0])
-      // ) {
-      //   this.isSearching = false
-      // }
-
-      // if (address) {
-      //   this.$router.push(`/wallet/${address}`)
-      // } else if (blocks && blocks[0]) {
-      //   this.$router.push(`/block/${blocks[0].height}`)
-      // } else if (transactions && transactions[0]) {
-      //   this.$router.push(`/transaction/${transactions[0].hash}`)
-      // } else {
-      //   // No result.
-      //   setTimeout(() => {
-      //     this.searchFeedback = "That doesn't appear to be a valid Address, Tx or Block ID."
-      //     this.showFeedback = true
-      //     this.isSearching = false
-      //   }, 1000)
-      // }
+      // Emit the search input value to parent component
+      this.$emit('search', this.searchInput)
+      // Simulate an API search or processing delay
+      setTimeout(() => {
+        this.isSearching = false
+      }, 1000)
     }
   }
 }

src/views/dashboard/Servers.vue

@@ -11,6 +11,9 @@
       </router-link>
     </div>
 
+    <!-- Search Component -->
+    <Search @search="handleSearch" />
+
     <div v-if="!loaded" class="flex items-center">
       <span>Loading servers</span>
       <div class="ml-2"><LoadingSpinner /></div>
@@ -60,6 +63,7 @@ import ListSortingMenu from '@/components/ListSortingMenu'
 import LoadingSpinner from '@/components/icons/LoadingSpinner'
 import Pagination from '@/components/Pagination'
 import ServerListItem from '@/components/server/ServerListItem'
+import Search from '../../components/Search.vue'
 import { mapState } from 'vuex'
 
 const sortFields = [
@@ -83,7 +87,8 @@ export default {
     ListSortingMenu,
     LoadingSpinner,
     Pagination,
-    ServerListItem
+    ServerListItem,
+    Search
   },
   data() {
     return {
@@ -95,7 +100,8 @@ export default {
       regions: [],
       servers: [],
       sortFields: sortFields,
-      sortQuery: ''
+      sortQuery: '',
+      searchQuery: ''
     }
   },
   computed: {
@@ -113,16 +119,24 @@ export default {
       this.regions = results
     },
     async updateServers() {
-      const params = { limit: this.limit, page: this.currentPage }
+      const params = { limit: this.limit, page: this.currentPage, search: this.searchQuery }
       if (this.sortQuery) params.sort = [this.sortQuery, '-created']
-
+    try{
       const { results, metadata } = await utils.getServers(process.env.VUE_APP_ACCOUNT_API_URL, this.session._key, params)
       this.servers = results
       this.metadata = metadata
       this.loaded = true
+    } catch (error) {
+        console.error("Failed to fetch servers:", error)
+        this.loaded = true // Ensure loading state is properly set
+      }
     },
     updateSortQuery (newQuery) {
       this.sortQuery = newQuery
+    },
+    handleSearch(query) {
+      this.searchQuery = query
+      this.updateServers()
     }
   },
   async mounted() {
@@ -141,6 +155,9 @@ export default {
     },
     sortQuery() {
       this.updateServers()
+    },
+    searchQuery() {
+      this.updateServers() // Update servers when searchQuery changes
     }
   }
 }