Add search

Author: mugetsu

components/DrawerItem/index.vue

@@ -49,6 +49,7 @@ export default {
   background-color: #343332;
   box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.5);
   transition: .5s ease;
+  overflow: hidden;
 
   &.is-active {
     display: flex;
@@ -72,6 +73,7 @@ export default {
   .drawer-item-content {
     height: 100%;
     color: #f2f2f2;
+    overflow: auto;
   }
 }
 </style>

components/Search/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <div 
+    class="search"
+    :class="{
+      'open': openSuggestion
+    }">
+    <div class="search-container">
+      <div class="countries-wrapper">
+        <input
+          ref="countries"
+          type="text"
+          v-model="country"
+          @keydown.enter="enter"
+          @keydown.down="down"
+          @keydown.up="up"
+          @input="change"
+        />
+      </div>
+      <div
+        class="provinces-wrapper"
+        :class="{
+          'is-show': provinces && provinces.length
+        }">
+        <select ref="provinces">
+          <option 
+            v-for="(province, index) in provinces"
+            :key="index"
+            :label="province"
+            :value="province" />
+        </select>
+      </div>
+      <button @click="onSearch">Search</button>
+    </div>
+    <ul class="dropdown-menu">
+      <li
+        v-for="(suggestion, index) in matches"
+        :key="index"
+        v-bind:class="{'active': isActive(index)}"
+        @click="suggestionClick(index)"
+      >
+        <span>{{ suggestion }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Search',
+  props: {
+    suggestions: {
+      type: Object,
+      required: true
+    },
+    selection: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    setSelection: {
+      get() {
+        return this.selection
+      },
+      set(newSelect) {
+        this.country = newSelect
+        this.provinces = this.suggestions[newSelect].filter(_ => _)
+      } 
+    },
+    matches() {
+      const countries = Object.keys(this.suggestions)
+      const lowerCased = this.country.toLowerCase()
+      return countries.filter(str => {
+        return str.toLowerCase().indexOf(lowerCased) >= 0
+      })
+    },
+    openSuggestion() {
+      return (
+        this.country !== '' && this.matches.length != 0 && this.open === true
+      )
+    }
+  },
+  data() {
+    return {
+      open: false,
+      current: 0,
+      country: '',
+      provinces: ''
+    }
+  },
+  methods: {
+    enter() {
+      this.setSelection = this.matches[this.current]
+      this.open = false
+      this.$nextTick(_ => {
+        if (this.$refs.provinces) this.$refs.provinces.focus()
+      })
+    },
+    up() {
+      if (this.current > 0) this.current--
+    },
+    down() {
+      if (this.current < this.matches.length - 1) this.current++
+    },
+    isActive(index) {
+      return index === this.current
+    },
+    change() {
+      if (!this.open) {
+        this.open = true
+        this.current = 0
+      }
+    },
+    suggestionClick(index) {
+      this.setSelection = this.matches[index]
+      this.open = false
+      this.$nextTick(_ => {
+        if (this.$refs.provinces) this.$refs.provinces.focus()
+      })
+    },
+    onSearch() {
+      this.$store.dispatch('getCasesByCountry', {
+        country: this.country,
+        province: this.$refs.provinces.value
+      })
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.search {
+  position: relative;
+
+  &.open {
+
+    .dropdown-menu {
+      display: block;
+    }
+  }
+
+  .countries-wrapper {
+    input {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      border-bottom: 1px solid #ffffff;
+      color: #ffffff;
+      background-color: transparent;
+      outline: none;
+    }
+  }
+
+  .provinces-wrapper {
+    display: none;
+
+    &.is-show {
+      display: block;
+    }
+  }
+
+  .dropdown-menu {
+    display: none;
+    width: 100%;
+  }
+}
+</style>

pages/index.vue

@@ -42,7 +42,9 @@
           <p>FEATURE TO BE ADDED SOON</p>
         </DrawerItem>
         <DrawerItem title="SEARCH">
-          <p>FEATURE TO BE ADDED SOON</p>
+          <Search
+            :suggestions="countries"
+            :selection.sync="country" />
         </DrawerItem>
       </Drawer>
     </div>
@@ -59,27 +61,31 @@ import { mapGetters } from 'vuex'
 import Map from '~/components/Map'
 import Drawer from '~/components/Drawer'
 import DrawerItem from '~/components/DrawerItem'
+import Search from '~/components/Search'
 import AnimatedNumber from 'animated-number-vue'
 
 export default {
   components: {
     Map,
     Drawer,
     DrawerItem,
-    AnimatedNumber
+    AnimatedNumber,
+    Search
   },
   computed: {
     ...mapGetters([
       'data',
-      'latest'
+      'latest',
+      'countries'
     ])
   },
   data() {
     return {
       isOpen: false,
       isClosed: true,
       duration: 1000,
-      timer: null
+      timer: null,
+      country: ''
     }
   },
   methods: {
@@ -112,10 +118,7 @@ export default {
     .covid-map {
       transform: translate3d(0, 92vh, 0);
     }
-
-    .icon {
-
-    }
+    .icon {}
   }
 }
 

store/actions.js

@@ -5,13 +5,21 @@ export default {
     )
       .then(res => {
         if (res.status === 200) {
-          const { latest } = res.data
+          const {
+            confirmed,
+            latest
+          } = res.data
           commit('SET_DATA', res.data)
           commit('SET_LATEST', latest)
+          commit('SET_COUNTRIES', confirmed)
         }
       })
       .catch(err => {
         console.log('API error.', err)
       })
+  },
+  getCasesByCountry({ state, commit }, payload) {
+    console.log(payload)
+    // console.log(state.data)
   }
 }

store/getters.js

@@ -1,5 +1,5 @@
 export default {
   data: state => state.data,
   latest: state => state.latest,
-  timeline: state => state.timeline
+  countries: state => state.countries
 }