Skip to content

Commit ed54f83

Browse files
mugetsumugetsu
committed
Added Overview component
1 parent 3fd9d0b commit ed54f83

File tree

6 files changed

+212
-141
lines changed

6 files changed

+212
-141
lines changed

‎components/Overview/index.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="overview">
3+
<div class="close" @click="onClose">
4+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
5+
<g opacity="0.3">
6+
<path d="M1.5 1.5L15 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
7+
<path d="M15 1.5L1.5 15" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
8+
</g>
9+
</svg>
10+
</div>
11+
<div class="content">
12+
<p class="title">{{ title }}</p>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
name: 'Overview',
20+
props: {
21+
data: Object
22+
},
23+
computed: {
24+
title() {
25+
const o = this.data
26+
return o.province ? `${o.province}, ${o.country}` : o.country
27+
}
28+
},
29+
data() {
30+
return {
31+
isOpen: false
32+
}
33+
},
34+
methods: {
35+
onClose() {
36+
this.$emit('close')
37+
}
38+
},
39+
mounted() {
40+
if (this.data.country) this.isOpen = true
41+
}
42+
}
43+
</script>
44+
45+
<style lang="scss" scoped>
46+
.overview {
47+
width: 100%;
48+
background-color: #ffffff;
49+
50+
.close {
51+
position: absolute;
52+
top: 8px;
53+
right: 8px;
54+
width: 16px;
55+
height: 16px;
56+
cursor: pointer;
57+
z-index: 1;
58+
transition: all .3s;
59+
fill: rgba(0,0,0,.5);
60+
}
61+
62+
.content {
63+
padding: 0 24px;
64+
color: #000000;
65+
}
66+
67+
.title {
68+
border-bottom: 1px solid #cccccc;
69+
margin: 32px 0 12px;
70+
padding-bottom: 8px;
71+
font-size: 32px;
72+
font-weight: 300;
73+
}
74+
}
75+
</style>

‎components/Search/index.vue‎

Lines changed: 100 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,95 @@
11
<template>
2-
<div
3-
class="search"
4-
:class="{
5-
'is-open': openSuggestion
6-
}">
7-
<div class="search-container">
8-
<div class="countries-wrapper">
9-
<input
10-
ref="countries"
11-
type="text"
12-
:value="country"
13-
placeholder="Country"
14-
@keydown.enter="enter"
15-
@keydown.down="down"
16-
@keydown.up="up"
17-
@input="change"
18-
/>
2+
<div>
3+
<div
4+
class="search"
5+
:class="{
6+
'is-open': openSuggestion
7+
}">
8+
<div class="search-container">
9+
<div class="countries-wrapper">
10+
<input
11+
ref="countries"
12+
type="text"
13+
:value="country"
14+
placeholder="Country"
15+
@keydown.enter="enter"
16+
@keydown.down="down"
17+
@keydown.up="up"
18+
@input="change"
19+
/>
20+
</div>
21+
<div
22+
class="provinces-wrapper"
23+
:class="{
24+
'is-show': hasSelected && provinces.length && provinces[0].province
25+
}">
26+
<select
27+
ref="provinces"
28+
@change="onChange">
29+
<option
30+
label="Select State"
31+
value=""
32+
selected
33+
disabled />
34+
<option
35+
v-for="(item, index) in provinces"
36+
:key="index"
37+
:label="item.province"
38+
:value="item.id" />
39+
</select>
40+
</div>
41+
<button
42+
ref="search"
43+
:class="{ 'is-disabled': !hasSelected }"
44+
:disabled="!hasSelected"
45+
@click="onSearch">
46+
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
47+
width="30" height="30"
48+
viewBox="0 0 172 172"
49+
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><path d="M74.53333,17.2c-31.59642,0 -57.33333,25.73692 -57.33333,57.33333c0,31.59642 25.73692,57.33333 57.33333,57.33333c13.73998,0 26.35834,-4.87915 36.24766,-12.97839l34.23203,34.23203c1.43802,1.49778 3.5734,2.10113 5.5826,1.57735c2.0092,-0.52378 3.57826,-2.09284 4.10204,-4.10204c0.52378,-2.0092 -0.07957,-4.14458 -1.57735,-5.5826l-34.23203,-34.23203c8.09924,-9.88932 12.97839,-22.50768 12.97839,-36.24766c0,-31.59642 -25.73692,-57.33333 -57.33333,-57.33333zM74.53333,28.66667c25.39937,0 45.86667,20.4673 45.86667,45.86667c0,25.39937 -20.46729,45.86667 -45.86667,45.86667c-25.39937,0 -45.86667,-20.46729 -45.86667,-45.86667c0,-25.39937 20.4673,-45.86667 45.86667,-45.86667z"></path></g></g>
50+
</svg>
51+
</button>
1952
</div>
20-
<div
21-
class="provinces-wrapper"
22-
:class="{
23-
'is-show': hasSelected && provinces && provinces.length
24-
}">
25-
<select
26-
ref="provinces"
27-
@change="onChange">
28-
<option
29-
label="Select State"
30-
value=""
31-
selected
32-
disabled />
33-
<option
34-
v-for="(province, index) in provinces"
35-
:key="index"
36-
:label="province"
37-
:value="province" />
38-
</select>
39-
</div>
40-
<button
41-
ref="search"
42-
:class="{ 'is-disabled': !hasSelected }"
43-
:disabled="!hasSelected"
44-
@click="onSearch">
45-
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
46-
width="30" height="30"
47-
viewBox="0 0 172 172"
48-
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><path d="M74.53333,17.2c-31.59642,0 -57.33333,25.73692 -57.33333,57.33333c0,31.59642 25.73692,57.33333 57.33333,57.33333c13.73998,0 26.35834,-4.87915 36.24766,-12.97839l34.23203,34.23203c1.43802,1.49778 3.5734,2.10113 5.5826,1.57735c2.0092,-0.52378 3.57826,-2.09284 4.10204,-4.10204c0.52378,-2.0092 -0.07957,-4.14458 -1.57735,-5.5826l-34.23203,-34.23203c8.09924,-9.88932 12.97839,-22.50768 12.97839,-36.24766c0,-31.59642 -25.73692,-57.33333 -57.33333,-57.33333zM74.53333,28.66667c25.39937,0 45.86667,20.4673 45.86667,45.86667c0,25.39937 -20.46729,45.86667 -45.86667,45.86667c-25.39937,0 -45.86667,-20.46729 -45.86667,-45.86667c0,-25.39937 20.4673,-45.86667 45.86667,-45.86667z"></path></g></g>
49-
</svg>
50-
</button>
53+
<ul class="dropdown-menu">
54+
<li
55+
v-for="(suggestion, index) in matches"
56+
:key="index"
57+
v-bind:class="{ 'is-active': isActive(index) }"
58+
@click="suggestionClick(index)"
59+
>
60+
<span>{{ suggestion }}</span>
61+
</li>
62+
</ul>
63+
</div>
64+
<div class="overview-wrapper" :class="{ 'is-open': hasSearched }">
65+
<Overview :data="result" @close="hasSearched = !hasSearched" />
5166
</div>
52-
<ul class="dropdown-menu">
53-
<li
54-
v-for="(suggestion, index) in matches"
55-
:key="index"
56-
v-bind:class="{ 'is-active': isActive(index) }"
57-
@click="suggestionClick(index)"
58-
>
59-
<span>{{ suggestion }}</span>
60-
</li>
61-
</ul>
6267
</div>
6368
</template>
6469

6570
<script>
6671
import { mapGetters } from 'vuex'
67-
import AnimatedNumber from 'animated-number-vue'
68-
import Results from '~/components/Results'
72+
import Overview from '~/components/Overview'
6973
7074
export default {
7175
name: 'Search',
7276
components: {
73-
Results,
74-
AnimatedNumber
77+
Overview
7578
},
7679
computed: {
7780
...mapGetters([
78-
'countries'
81+
'countries',
82+
'result'
7983
]),
8084
setSelection: {
8185
get() {
8286
return this.selection
8387
},
8488
set(newSelect) {
89+
const selected = this.countries[newSelect]
8590
this.country = newSelect
86-
this.provinces = this.countries[newSelect].filter(_ => _)
91+
this.provinces = selected
92+
if (!selected[0].province) this.locationId = selected[0].id
8793
}
8894
},
8995
matches() {
@@ -106,6 +112,7 @@ export default {
106112
selection: '',
107113
country: '',
108114
provinces: [],
115+
locationId: null,
109116
tempValue: null,
110117
hasSelected: false,
111118
hasSearched: false
@@ -158,32 +165,29 @@ export default {
158165
this.open = false
159166
this.hasSelected = true
160167
this.hasSearched = false
161-
this.$nextTick(_ => {
162-
if (this.$refs.provinces) this.$refs.provinces.focus()
163-
})
168+
if (this.$refs.provinces) this.$refs.provinces.focus()
164169
this.$gtag('event', 'click', {
165170
event_category: 'select',
166171
event_label: 'select click',
167172
value: this.country
168173
})
169174
},
170175
onSearch() {
171-
// this.$store
172-
// .dispatch('getCasesByCountry', {
173-
// country: this.country,
174-
// province: this.$refs.provinces.value
175-
// })
176-
// .then(_ => {
177-
// this.hasSearched = true
178-
// this.$gtag('event', 'click', {
179-
// event_category: 'search',
180-
// event_label: 'search click',
181-
// value: `${this.country}${this.$refs.provinces.value ? ', ' + this.$refs.provinces.value : ''}`
182-
// })
183-
// })
176+
this.$store
177+
.dispatch('getOverviewByCountry', this.locationId)
178+
.then(_ => {
179+
this.hasSearched = true
180+
this.$gtag('event', 'click', {
181+
event_category: 'search',
182+
event_label: 'search click',
183+
value: this.locationId
184+
})
185+
})
186+
184187
},
185-
onChange() {
188+
onChange(e) {
186189
this.hasSearched = false
190+
this.locationId = e.target.value
187191
this.$refs.search.focus()
188192
}
189193
}
@@ -283,4 +287,19 @@ export default {
283287
}
284288
}
285289
}
290+
291+
.overview-wrapper {
292+
position: fixed;
293+
z-index: -1;
294+
top: 0;
295+
left: 0;
296+
display: flex;
297+
justify-content: stretch;
298+
width: 100%;
299+
height: 100%;
300+
301+
&.is-open {
302+
z-index: 9;
303+
}
304+
}
286305
</style>

‎store/actions.js‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,7 @@ export default {
1414
console.log('API error.', err)
1515
})
1616
},
17-
// getCasesByCountry({ state, commit }, payload) {
18-
// const country_case = state.data.features.filter(feature => {
19-
// if (payload.country) {
20-
// if (payload.province) {
21-
// return feature.properties.country === payload.country && feature.properties.province === payload.province
22-
// } else {
23-
// return feature.properties.country === payload.country
24-
// }
25-
// }
26-
// })
27-
// commit('SET_COUNTRY_CASE', country_case)
28-
// },
29-
async getResultByCountry({ commit }, id) {
17+
async getOverviewByCountry({ commit }, id) {
3018
await this.$axios
3119
.get(
3220
process.env.NODE_ENV !== 'production' ? 'location-14.json' : `/locations/${id}`

‎store/getters.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export default {
22
data: state => state.data,
33
latest: state => state.latest,
4-
countries: state => state.countries
4+
countries: state => state.countries,
5+
result: state => state.result
56
}

0 commit comments

Comments
 (0)