fix modal style, click event in button not icon & reload only features after delete

src/components/Dropdown.vue

@@ -112,7 +112,9 @@ export default {
       setTimeout(() => {
         this.isOpen = false;
       }, 0);
-      if (this.filteredOptions) this.$emit("update:selection", this.filteredOptions[index]);
+      if (this.filteredOptions) {
+        this.$emit("update:selection", this.filteredOptions[index]);
+      }
       this.input = "";
     },
 

src/views/feature/Feature_list.vue

@@ -75,12 +75,13 @@
 
             <div
               v-if="checkedFeatures.length"
+              @click="modalAllDelete"
               class="ui button compact button-hover-red margin-left-25"
               data-tooltip="Effacer tous les types de signalements sélectionnés"
               data-position="left center"
               data-variation="mini"
             >
-              <i class="grey trash fitted icon" @click="modalAllDelete"></i>
+              <i class="grey trash fitted icon"></i>
             </div>
           </div>
         </div>
@@ -170,7 +171,7 @@
           <button
             @click="deleteAllFeatureSelection"
             type="button"
-            class="ui red compact fluid button"
+            class="ui red compact fluid button no-margin"
           >
             Confirmer la suppression
           </button>
@@ -303,12 +304,14 @@ export default {
     },
 
     deleteFeature(feature) {
-      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${feature.feature_id}`;
+      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${feature.feature_id}/?project__slug=${this.project.slug}`;
       axios
         .delete(url, {})
         .then(() => {
           if (!this.modalAllDeleteOpen) {
-            this.$router.go();
+            this.$store
+              .dispatch("feature/GET_PROJECT_FEATURES", this.project.slug)
+              .then(() => this.getFeaturesAsGeojson());
           }
         })
         .catch(() => {
@@ -329,27 +332,27 @@ export default {
       if (this.featureGroup) {
         const features = this.filteredFeatures;
         this.featureGroup.clearLayers();
-        this.featureGroup = mapUtil.addFeatures(features, {},false,this.$store.state.feature_type.feature_types);
+        this.featureGroup = mapUtil.addFeatures(
+          features,
+          {},
+          false,
+          this.$store.state.feature_type.feature_types
+        );
         mapUtil.getMap().invalidateSize();
-        mapUtil.getMap()._onResize();// force refresh for vector tiles
-        
-        if(this.featureGroup.getLayers().length>0){
+        mapUtil.getMap()._onResize(); // force refresh for vector tiles
+
+        if (this.featureGroup.getLayers().length > 0) {
           mapUtil
             .getMap()
             .fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] });
+        } else {
+          mapUtil.getMap().zoomOut(1);
         }
-        else{
-          mapUtil
-            .getMap()
-            .zoomOut(1);
-        }
-        
-
       }
     },
 
     initMap() {
-      console.log(this)
+      console.log(this);
       this.zoom = this.$route.query.zoom || "";
       this.lat = this.$route.query.lat || "";
       this.lng = this.$route.query.lng || "";
@@ -373,47 +376,60 @@ export default {
       });
 
       // --------- End sidebar events ----------
-        const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
-        this.$store.commit(
-          "DISPLAY_LOADER",
-          "Récupération des signalements en cours..."
-        );
-        axios
-          .get(url)
-          .then((response) => {
-            if (response.status === 200 && response.data.features.length > 0) {
-              this.loadFeatures(response.data.features);
-            }
-            this.$store.commit("DISCARD_LOADER");
-          })
-          .catch((error) => {
-            this.$store.commit("DISCARD_LOADER");
-            throw error;
-          });
-      
+      this.getFeaturesAsGeojson();
 
       setTimeout(
         function () {
-          let project_id=this.$route.params.slug.split('-')[0];
+          let project_id = this.$route.params.slug.split("-")[0];
           const mvtUrl = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}/features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;
-          mapUtil.addVectorTileLayer(mvtUrl,this.$route.params.slug,this.$store.state.feature_type.feature_types,this.form);
+          mapUtil.addVectorTileLayer(
+            mvtUrl,
+            this.$route.params.slug,
+            this.$store.state.feature_type.feature_types,
+            this.form
+          );
           mapUtil.addGeocoders(this.$store.state.configuration);
         }.bind(this),
         1000
       );
     },
 
+    getFeaturesAsGeojson() {
+      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+      this.$store.commit(
+        "DISPLAY_LOADER",
+        "Récupération des signalements en cours..."
+      );
+      axios
+        .get(url)
+        .then((response) => {
+          if (response.status === 200 && response.data.features.length > 0) {
+            this.loadFeatures(response.data.features);
+          }
+          this.$store.commit("DISCARD_LOADER");
+        })
+        .catch((error) => {
+          this.$store.commit("DISCARD_LOADER");
+          throw error;
+        });
+    },
+
     loadFeatures(features) {
       this.geojsonFeatures = features;
       const urlParams = new URLSearchParams(window.location.search);
       const featureType = urlParams.get("feature_type");
       const featureStatus = urlParams.get("status");
       const featureTitle = urlParams.get("title");
-      this.featureGroup = mapUtil.addFeatures(this.geojsonFeatures, {
-        featureType,
-        featureStatus,
-        featureTitle,
-      },false,this.$store.state.feature_type.feature_types);
+      this.featureGroup = mapUtil.addFeatures(
+        this.geojsonFeatures,
+        {
+          featureType,
+          featureStatus,
+          featureTitle,
+        },
+        false,
+        this.$store.state.feature_type.feature_types
+      );
       // Fit the map to bound only if no initial zoom and center are defined
       if (
         (this.lat === "" || this.lng === "" || this.zoom === "") &&