-
Notifications
You must be signed in to change notification settings - Fork 1
/
Filters.vue
81 lines (74 loc) · 1.79 KB
/
Filters.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
<div class="filters">
<p>
Show
<span class="dropdown">
<select v-model='openValue' @change='openChange'>
<option value="{{ constants.ALL_LOCATIONS }}">all</option>
<option value="{{ constants.OPEN_LOCATIONS }}">open</option>
<option value="{{ constants.CLOSED_LOCATIONS }}">closed</option>
</select>
</span>
redemption centers
<span class="dropdown">
<select v-model='distanceValue' @change='distanceChange'>
<option value="{{ constants.ALL_LOCATIONS }}">on O`ahu</option>
<option value="5">within 5 miles</option>
<option value="10">within 10 miles</option>
</select>
</span>
</p>
<p>
near
<search></search>
</p>
</div>
</template>
<script>
import Search from 'src/components/Search'
import store from 'src/store'
import { ALL_LOCATIONS, OPEN_LOCATIONS, CLOSED_LOCATIONS } from 'src/constants'
export default {
data () {
return {
distanceValue: ALL_LOCATIONS,
openValue: ALL_LOCATIONS,
constants: { ALL_LOCATIONS, OPEN_LOCATIONS, CLOSED_LOCATIONS }
}
},
methods: {
openChange () {
store.dispatch('SET_OPEN', this.openValue)
},
distanceChange () {
let value = this.distanceValue
if (this.distanceValue !== ALL_LOCATIONS) {
value = +value
}
store.dispatch('SET_DISTANCE', value)
}
},
components: { Search }
}
</script>
<style scoped>
.filters {
padding: 10px 20px 0;
font-size: 16px;
}
.filters p {
margin: 0;
line-height: 2.4rem;
}
.dropdown {
border-bottom: 1px solid #2979FF;
}
.dropdown select {
display: inline-block;
font-family: inherit;
background-color: transparent;
border: none;
font-size: inherit;
border-radius: 0;
}
</style>