Skip to content

Instantly share code, notes, and snippets.

@stephan-v
Created July 10, 2017 09:01
Show Gist options
  • Save stephan-v/a5fd0b6bae854276666536da445bbf86 to your computer and use it in GitHub Desktop.
Save stephan-v/a5fd0b6bae854276666536da445bbf86 to your computer and use it in GitHub Desktop.
<template>
<div class="filter">
<h4>{{ translation }}</h4>
<div class="checkbox" v-for="(value, index) in range" :key="index">
<label>
<input type="checkbox" :value="index" v-model.number="values">
<span class="value">{{ value }}</span>
<span class="background"></span>
<span class="remove-filter">
<svg-inline name="delete"></svg-inline>
</span>
<span class="hotels">{{ count(index) }}</span>
<div class="spinner" v-show="loading"></div>
</label>
</div><!-- /.checkbox -->
</div><!-- /.filter -->
</template>
<script>
import { mapGetters } from 'vuex';
import SvgInline from '../../../svg/SvgInline.vue';
export default {
data() {
return {
name: '',
values: [],
translation: this.trans.search.facilities_filter
};
},
components: {
SvgInline
},
props: {
range: {
required: true,
type: Object
}
},
created() {
if (!this.name.length) {
throw new Error(
'Please provide a name as a data property for your concrete filter component'
);
}
if (typeof this.filter !== 'function') {
throw new Error(
'Please provide a filter function as a method for your concrete filter component'
);
}
this.$store.commit('addToFilterStack', {
filter: this.filter,
name: this.name
});
},
watch: {
values(values) {
this.$store.commit('filter', {
name: this.name,
values
});
}
},
computed: {
...mapGetters([
'allHotels',
'filteredHotels',
'loading',
'filters'
])
},
methods: {
/* eslint-disable */
count(value) {
console.log('count');
// Get the filtered AJAX data.
let hotels = this.allHotels;
const filters = Object.entries(this.filters);
for (let i = 0; i < filters.length; i += 1) {
// Get the Object from the array(index 0 being the name).
const filter = filters[i][1];
// Break the v-model reference by creating a shallow copy.
const values = filter.values.slice(0);
// Merge any selected checkbox values with the one we are currently iterating.
if (!values.includes(value)) values.push(Number(value));
// Check if the current filter has selected checkboxes and filter if it does.
hotels = filter.function(hotels, values);
}
return hotels.length;
}
}
};
</script>
<style lang="scss" scoped>
.remove-filter {
display: none;
fill: white;
}
input[type=checkbox]:checked {
z-index: 1;
~ .background {
background: #87B800;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
~ .value {
color: white;
position: relative;
z-index: 1;
}
~ .remove-filter {
display: block;
float: right;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment