WIP:paginated results with title and status filters working

src/views/feature/Feature_list.vue

@@ -90,6 +90,7 @@
       <div class="field wide four column no-margin-mobile">
         <label>Type</label>
         <Dropdown
+          v-on:update:selection="updateTypeFeatures"
           :options="form.type.choices"
           :selected="form.type.selected"
           :selection.sync="form.type.selected"
@@ -101,6 +102,7 @@
         <label>Statut</label>
         <!--  //* giving an object mapped on key name -->
         <Dropdown
+          v-on:update:selection="updateStatusFeatures"
           :options="statusChoices"
           :selected="form.status.selected.name"
           :selection.sync="form.status.selected"
@@ -117,7 +119,7 @@
               type="text"
               name="title"
               v-model="form.title"
-              @input="onFilterChange"
+              @input="updateFeatures"
             />
             <button
               type="button"
@@ -297,15 +299,36 @@ export default {
     },
   },
 
-  /* watch: {
+  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;
     },
@@ -338,7 +361,8 @@ export default {
       this.modalAllDelete();
     },
 
-    onFilterChange() {
+    //onFilterChange() {
+    updateFeaturesOnMap() {
       // ? Besoin de faire un fetch avec nouveau filtres ici ?
       if (this.featureGroup) {
         //const features = this.filteredFeatures;
@@ -348,7 +372,7 @@ export default {
           features,
           {},
           true,
-          this.$store.state.feature_type.feature_types
+          this.feature_types
         );
         mapUtil.getMap().invalidateSize();
         mapUtil.getMap()._onResize(); // force refresh for vector tiles
@@ -392,18 +416,43 @@ export default {
       setTimeout(() => {
         let 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,
-          this.$store.state.feature_type.feature_types,
+          this.feature_types,
           this.form
         );
         mapUtil.addGeocoders(this.$store.state.configuration);
       }, 1000);
     },
 
-    updateFeatures() {
-      const url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
+    updateTypeFeatures(selected) {
+      console.log(selected)
+      if (selected !== undefined && selected !== null) {
+        this.updateFeatures(`&feature_type__slug=${selected}`);
+      }
+    },
+
+    updateStatusFeatures(selected) {
+      if (selected !== undefined && selected !== null) {
+        this.updateFeatures(`&status__value=${selected.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);
+
+      if (selected) {
+        url += selected;
+      }
+      if (this.form.title) {
+        url += `&title=${this.form.title}`;
+      }
+
       this.$store.commit(
         "DISPLAY_LOADER",
         "Récupération des signalements en cours..."
@@ -417,6 +466,7 @@ export default {
             this.next = response.data.next;
             if (response.data.results.features.length > 0) {
               this.loadFeatures(response.data.results.features);
+              this.updateFeaturesOnMap();
             }
           }
           this.$store.commit("DISCARD_LOADER");
@@ -433,6 +483,11 @@ export default {
       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,
         {
@@ -441,7 +496,7 @@ export default {
           featureTitle,
         },
         true,
-        this.$store.state.feature_type.feature_types
+        this.feature_types
       );
       // Fit the map to bound only if no initial zoom and center are defined
       if (
@@ -458,6 +513,7 @@ export default {
           this.geojsonFeatures.map((el) => el.properties.feature_type.title)
         ), //* use Set to eliminate duplicate values
       ];
+      console.log(this.form.type.choices);
     },
   },
 
@@ -466,7 +522,7 @@ export default {
       this.$store.dispatch(
         "GET_PROJECT_INFO",
         this.$route.params.slug,
-        "noFeatures"
+        "noFeatures" //* not fetching classic features, too heavy, using paginated features instead
       );
     }
   },