fix modify statusand delete features and more

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;

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);
+      }
+    },
   }
 
 };

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];