get filters functionnal

src/views/feature/Feature_list.vue

@@ -266,31 +266,6 @@ export default {
       return this.$store.state.configuration.VUE_APP_DJANGO_API_BASE;
     },
 
-    /* filteredFeatures() {
-      let results = this.geojsonFeatures;
-      if (this.form.type.selected) {
-        results = results.filter(
-          (el) => el.properties.feature_type.title === this.form.type.selected
-        );
-      }
-      if (this.form.status.selected.value) {
-        results = results.filter(
-          (el) => el.properties.status.value === this.form.status.selected.value
-        );
-      }
-      if (this.form.title) {
-        results = results.filter((el) => {
-          if (el.properties.title) {
-            return el.properties.title
-              .toLowerCase()
-              .includes(this.form.title.toLowerCase());
-          } else
-            return el.id.toLowerCase().includes(this.form.title.toLowerCase());
-        });
-      }
-      return results;
-    }, */
-
     statusChoices() {
       //* if project is not moderate, remove pending status
       return this.form.status.choices.filter((el) =>
@@ -299,36 +274,7 @@ export default {
     },
   },
 
-  watch: {
-    form: {
-      deep: true,
-      handler(newValue, oldValue) {
-        console.log(newValue, oldValue);
-        console.log(newValue.type.selected, oldValue.type.selected);
-        console.log(
-          newValue.status.selected.value,
-          oldValue.status.selected.value
-        );
-        if (
-          newValue.type.selected !== oldValue.type.selected ||
-          newValue.status.selected.value !== oldValue.status.selected.value
-        ) {
-          this.updateFeatures();
-        }
-      },
-    } /* 
-    filteredFeatures(newValue, oldValue) {
-      if (newValue && newValue !== oldValue) {
-        this.onFilterChange();
-      }
-    },
-   */,
-  },
-
   methods: {
-    test() {
-      console.log("test");
-    },
     modalAllDelete() {
       this.modalAllDeleteOpen = !this.modalAllDeleteOpen;
     },
@@ -361,11 +307,8 @@ export default {
       this.modalAllDelete();
     },
 
-    //onFilterChange() {
     updateFeaturesOnMap() {
-      // ? Besoin de faire un fetch avec nouveau filtres ici ?
       if (this.featureGroup) {
-        //const features = this.filteredFeatures;
         const features = this.geojsonFeatures;
         this.featureGroup.clearLayers();
         this.featureGroup = mapUtil.addFeatures(
@@ -414,10 +357,8 @@ export default {
       this.updateFeatures();
 
       setTimeout(() => {
-        let project_id = this.$route.params.slug.split("-")[0];
+        const project_id = this.$route.params.slug.split("-")[0];
         const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;
-        //const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}&feature_type__slug=88-poopo`;
-        //const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&feature_type__slug=88-poopo`;
         mapUtil.addVectorTileLayer(
           mvtUrl,
           this.$route.params.slug,
@@ -428,31 +369,86 @@ export default {
       }, 1000);
     },
 
-    updateTypeFeatures(selected) {
-      console.log(selected)
-      if (selected !== undefined && selected !== null) {
-        this.updateFeatures(`&feature_type__slug=${selected}`);
-      }
+    getFeatureTypeSlug(title) {
+      const featureType = this.feature_types.find((el) => el.title === title);
+      return featureType ? featureType.slug : null;
     },
 
-    updateStatusFeatures(selected) {
-      if (selected !== undefined && selected !== null) {
-        this.updateFeatures(`&status__value=${selected.value}`);
+    buildFilterParams({ filterType, filterValue }) {
+      console.log({ filterType, filterValue });
+      let params = "";
+      let typeFilter, statusFilter;
+      //*** feature type ***//
+      if (filterType === "featureType") {
+        if (filterValue === "" && !this.form.type.selected) {
+          //* s'il y n'avait pas de filtre et qu'il a été supprimé --> ne pas mettre à jour les features
+          return "abort";
+        } else if (filterValue !== undefined && filterValue !== null) {
+          //* s'il y a un nouveau filtre --> ajouter une params
+          typeFilter = this.getFeatureTypeSlug(filterValue);
+        } //* sinon il n'y a pas de param ajouté, ce qui supprime la query
+
+        //*** status ***//
+      } else if (filterType === "status") {
+        if (filterValue === "" && !this.form.status.selected.value) {
+          return "abort";
+        } else if (filterValue !== undefined && filterValue !== null) {
+          statusFilter = filterValue.value;
+        }
       }
-    },
 
-    updateFeatures(selected) {
-      console.log("selected", selected);
-      let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
-      console.log(this.form.type.selected, this.form.status.selected.value);
+      //* after possibilities of aborting features fetch, empty geojson to make sure even no result would update
 
-      if (selected) {
-        url += selected;
+      if (
+        (filterType === undefined || filterType === "status") &&
+        this.form.type.selected
+      ) {
+        //* s'il y a déjà un filtre sélectionné, maintenir le params
+        typeFilter = this.getFeatureTypeSlug(this.form.type.selected);
+      }
+      if (
+        (filterType === undefined || filterType === "featureType") &&
+        this.form.status.selected.value
+      ) {
+        statusFilter = this.form.status.selected.value;
       }
+
+      if (typeFilter) {
+        let typeParams = `&feature_type__slug=${typeFilter}`;
+        params += typeParams;
+      }
+      if (statusFilter) {
+        let statusParams = `&status__value=${statusFilter}`;
+        params += statusParams;
+      }
+
+      //*** title ***//
       if (this.form.title) {
-        url += `&title=${this.form.title}`;
+        params += `&title=${this.form.title}`;
       }
 
+      return params;
+    },
+
+    updateTypeFeatures(filterValue) {
+      //* only update:selection custom event can trigger the filter update,
+      //* but it happens before the value is updated, thus using selected value from event to update query
+      this.updateFeatures({ filterType: "featureType", filterValue });
+    },
+
+    updateStatusFeatures(filterValue) {
+      this.updateFeatures({ filterType: "status", filterValue });
+    },
+
+    updateFeatures(filterParams) {
+      let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
+      if (filterParams) {
+        const params = this.buildFilterParams(filterParams);
+        if (params === "abort") return;
+        url += params;
+      }
+      console.log("url -->", url);
+
       this.$store.commit(
         "DISPLAY_LOADER",
         "Récupération des signalements en cours..."
@@ -464,10 +460,11 @@ export default {
             this.featuresCount = response.data.count;
             this.previous = response.data.previous;
             this.next = response.data.next;
-            if (response.data.results.features.length > 0) {
-              this.loadFeatures(response.data.results.features);
-              this.updateFeaturesOnMap();
-            }
+            this.geojsonFeatures = response.data.results.features;
+            //if (response.data.results.features.length > 0) {
+            this.loadFeatures();
+            this.updateFeaturesOnMap();
+            //}
           }
           this.$store.commit("DISCARD_LOADER");
         })
@@ -477,17 +474,11 @@ export default {
         });
     },
 
-    loadFeatures(features) {
-      this.geojsonFeatures = features;
+    loadFeatures() {
       const urlParams = new URLSearchParams(window.location.search);
       const featureType = urlParams.get("feature_type");
       const featureStatus = urlParams.get("status");
       const featureTitle = urlParams.get("title");
-      console.log({
-        featureType,
-        featureStatus,
-        featureTitle,
-      });
       this.featureGroup = mapUtil.addFeatures(
         this.geojsonFeatures,
         {
@@ -513,7 +504,6 @@ export default {
           this.geojsonFeatures.map((el) => el.properties.feature_type.title)
         ), //* use Set to eliminate duplicate values
       ];
-      console.log(this.form.type.choices);
     },
   },