add coach-filter
This commit is contained in:
parent
2897e9fe61
commit
c1edc75733
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<base-card>
|
||||||
|
<h2>Find Your Coach</h2>
|
||||||
|
<span class="filter-option">
|
||||||
|
<input type="checkbox" id="frontend" checked @chanced="setFilter" />
|
||||||
|
<label for="frontend">Frontend</label>
|
||||||
|
</span>
|
||||||
|
<span class="filter-option">
|
||||||
|
<input type="checkbox" id="backend" checked @chanced="setFilter" />
|
||||||
|
<label for="backend">Backend</label>
|
||||||
|
</span>
|
||||||
|
<span class="filter-option">
|
||||||
|
<input type="checkbox" id="career" checked @chanced="setFilter" />
|
||||||
|
<label for="career">Career</label>
|
||||||
|
</span>
|
||||||
|
</base-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
emits: ['change-filter'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
filters: {
|
||||||
|
backend: true,
|
||||||
|
frontend: true,
|
||||||
|
career: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setFilter(event) {
|
||||||
|
const inputId = event.target.id;
|
||||||
|
const isActive = event.target.checked;
|
||||||
|
const updatedFilters = {
|
||||||
|
...this.filters,
|
||||||
|
[inputId]: isActive
|
||||||
|
};
|
||||||
|
this.filters = updatedFilters;
|
||||||
|
this.$emit('change-filter', updatedFilters);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h2 {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-option {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-option label,
|
||||||
|
.filter-option input {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-option label {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-option.active label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<section>
|
<section>
|
||||||
Filter
|
<coach-filter @change-filter="setFilter"></coach-filter>
|
||||||
</section>
|
</section>
|
||||||
<base-card>
|
<base-card>
|
||||||
<section>
|
<section>
|
||||||
|
@ -25,17 +25,44 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import CoachFilter from '../../components/coaches/CoachFilter.vue';
|
||||||
import CoachItem from '../../components/coaches/CoachItem.vue';
|
import CoachItem from '../../components/coaches/CoachItem.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { CoachItem },
|
components: { CoachItem, CoachFilter },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeFilters: {
|
||||||
|
backend: true,
|
||||||
|
frontend: true,
|
||||||
|
career: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
filteredCoaches() {
|
filteredCoaches() {
|
||||||
return this.$store.getters['coaches/coaches'];
|
const coaches = this.$store.getters['coaches/coaches'];
|
||||||
|
return coaches.filter(coach => {
|
||||||
|
if (this.activeFilters.backend && coach.areas.includes('backend')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (this.activeFilters.frontend && coach.areas.includes('frontend')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (this.activeFilters.career && coach.areas.includes('career')) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
hasCoaches() {
|
hasCoaches() {
|
||||||
return this.$store.getters['coaches/hasCoaches'];
|
return this.$store.getters['coaches/hasCoaches'];
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setFilter(updatedFilters) {
|
||||||
|
this.activeFilters = updatedFilters;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Reference in New Issue