diff --git a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue index e9cd4eccf262582149aa6b429eb5e6345724a61a..4de22194dc480dcf123ebbdeeda9bc0ac37293c0 100644 --- a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue +++ b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue @@ -146,9 +146,8 @@ v-model="form.type.selected" :options="featureTypeOptions" :multiple="true" - track-by="slug" - label="title" - :close-on-select="false" + track-by="value" + label="name" > <template slot="clear"> <div @@ -169,14 +168,26 @@ :class="['field column', { 'disabled': !isOnline }]" > <label>Statut</label> - <!-- //* giving an object mapped on key name --> - <Dropdown + <Multiselect + v-model="form.status.selected" :options="filteredStatusChoices" - :selected="form.status.selected.name" - :selection.sync="form.status.selected" - :search="true" - :clearable="true" - /> + :multiple="true" + track-by="value" + label="name" + > + <template slot="clear"> + <div + v-if="form.status.selected" + class="multiselect__clear" + @click.prevent.stop="form.status.selected = ''" + > + <i + class="close icon" + aria-hidden="true" + /> + </div> + </template> + </Multiselect> </div> <div id="name" @@ -218,8 +229,6 @@ import Multiselect from 'vue-multiselect'; import { statusChoices, allowedStatus2change } from '@/utils'; -import Dropdown from '@/components/Dropdown.vue'; - const initialPagination = { currentPage: 1, pagesize: 15, @@ -232,7 +241,6 @@ export default { name: 'FeaturesListAndMapFilters', components: { - Dropdown, Multiselect }, @@ -312,7 +320,7 @@ export default { return this.feature_types.map((el) => el.title); }, featureTypeOptions() { - return this.feature_types.map((el) => ({ title: el.title, slug: el.slug })); + return this.feature_types.map((el) => ({ name: el.title, value: el.slug })); }, filteredStatusChoices() { //* if project is not moderate, remove pending status diff --git a/src/services/map-service.js b/src/services/map-service.js index a864d2cbdad7e2fb1e7f0b73e79324f03649c40c..75f390ff4da64b1c662f4e21380a1ccff128c502 100644 --- a/src/services/map-service.js +++ b/src/services/map-service.js @@ -648,15 +648,16 @@ const mapService = { ); const hiddenStyle = new Style(); // hide the feature to apply filters // Filtre sur le feature type + // TODO: REMOVE 'selected' if (formFilters) { if (formFilters.type && formFilters.type.selected) { - if (featureType.title !== formFilters.type.selected) { + if (!formFilters.type.selected.includes(featureType.slug)) { return hiddenStyle; } } // Filtre sur le statut - if (formFilters.status && formFilters.status.selected.value) { - if (properties.status !== formFilters.status.selected.value) { + if (formFilters.status && formFilters.status.selected) { + if (!formFilters.status.selected.includes(properties.status)) { return hiddenStyle; } } diff --git a/src/views/Project/FeaturesListAndMap.vue b/src/views/Project/FeaturesListAndMap.vue index 51ff2a5729f55da9fbfed2de212889b932713859..681770f195ca39210ebdb6bb800b83bb880128d9 100644 --- a/src/views/Project/FeaturesListAndMap.vue +++ b/src/views/Project/FeaturesListAndMap.vue @@ -253,7 +253,7 @@ export default { const filter = Object.keys(e)[0]; let value = Object.values(e)[0]; if (value && Array.isArray(value)) { - value = value.map(el => el.slug); + value = value.map(el => el.value); } // TODO: REMOVE 'selected' (and simplify method) if (filter === 'title') { @@ -402,7 +402,8 @@ export default { updateQueryParams() { const typeFilter = this.form.type.selected; - const statusFilter = this.form.status.selected.value; + const statusFilter = this.form.status.selected; + console.log(this.form.status); this.queryparams['offset'] = this.pagination.start; if (typeFilter) { this.queryparams['feature_type_slug'] = typeFilter;