diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index df8db274df67aef7a68df5b5ffe993dbfb79aa85..a9abcd9350d5e6a0e6bdbacfe67f1e6635e5e401 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -80,6 +80,9 @@ body { .tiny-margin { margin: 0.1rem 0 0.1rem 0.1rem !important; } +.tiny-margin-left { + margin-left: 0.1rem !important; +} .ellipsis { text-overflow: ellipsis; overflow: hidden; diff --git a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue index 4e624f10378ccc3b988577ab543db618af3d6ee8..7416a8f72d95420e4d3ab9fc506a6daf38f37ad6 100644 --- a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue +++ b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue @@ -85,7 +85,7 @@ </div> <div v-if="checkedFeatures.length > 0 && massMode === 'modify'" - class="ui dropdown button compact button-hover-green margin-left-25" + class="ui dropdown button compact button-hover-green tiny-margin-left" data-tooltip="Modifier le statut des Signalements" data-position="bottom right" @click="toggleModifyStatus" @@ -107,7 +107,7 @@ v-for="status in availableStatus" :key="status.value" class="item" - @click="modifyStatus(status.value)" + @click="$emit('modify-status', status.value)" > {{ status.name }} </span> @@ -116,10 +116,10 @@ </div> <div v-if="checkedFeatures.length > 0 && massMode === 'delete'" - class="ui button compact button-hover-red margin-left-25" + class="ui button compact button-hover-red tiny-margin-left" data-tooltip="Supprimer tous les signalements sélectionnés" data-position="bottom right" - @click="toggleDeleteModal" + @click="$emit('toggle-delete-modal')" > <i class="grey trash fitted icon" @@ -320,6 +320,14 @@ export default { }, }, + mounted() { + window.addEventListener('mousedown', this.clickOutsideDropdown); + }, + + destroyed() { + window.removeEventListener('mousedown', this.clickOutsideDropdown); + }, + methods: { resetPaginationNfetchFeatures() { this.$emit('reset-pagination'); @@ -330,6 +338,20 @@ export default { this.showAddFeature = !this.showAddFeature; this.showModifyStatus = false; }, + + toggleModifyStatus() { + this.showModifyStatus = !this.showModifyStatus; + this.showAddFeature = false; + }, + + clickOutsideDropdown(e) { + if (!e.target.closest('#button-dropdown')) { + this.showModifyStatus = false; + setTimeout(() => { //* timout necessary to give time to click on link to add feature + this.showAddFeature = false; + }, 500); + } + }, } }; diff --git a/src/views/Project/FeaturesListAndMap.vue b/src/views/Project/FeaturesListAndMap.vue index 6b6af5454d03509df24be6f07478676b40d5138d..ec2d2bd5012c056ab30e1f0f0b4dc52f719368e7 100644 --- a/src/views/Project/FeaturesListAndMap.vue +++ b/src/views/Project/FeaturesListAndMap.vue @@ -12,6 +12,8 @@ @reset-pagination="resetPagination" @fetch-features="fetchPagedFeatures" @show-map="setShowMap" + @modify-status="modifyStatus" + @toggle-delete-modal="toggleDeleteModal" /> <div @@ -143,8 +145,6 @@ export default { pagination: { ...initialPagination }, projectSlug: this.$route.params.slug, showMap: true, - showAddFeature: false, - showModifyStatus: false, sort: { column: '', ascending: true, @@ -223,12 +223,9 @@ export default { } else { this.initMap(); } - - window.addEventListener('mousedown', this.clickOutsideDropdown); }, destroyed() { - window.removeEventListener('mousedown', this.clickOutsideDropdown); //* allow user to change page if ever stuck on loader this.$store.commit('DISCARD_LOADER'); }, @@ -260,24 +257,10 @@ export default { } }, - toggleModifyStatus() { - this.showModifyStatus = !this.showModifyStatus; - this.showAddFeature = false; - }, - toggleDeleteModal() { this.isDeleteModalOpen = !this.isDeleteModalOpen; }, - clickOutsideDropdown(e) { - if (!e.target.closest('#button-dropdown')) { - this.showModifyStatus = false; - setTimeout(() => { //* timout necessary to give time to click on link to add feature - this.showAddFeature = false; - }, 500); - } - }, - async modifyStatus(newStatus) { if (this.checkedFeatures.length > 0) { const feature_id = this.checkedFeatures[0];