WIP

src/views/feature/Feature_list.vue

@@ -30,9 +30,7 @@
           ></a>
           <div class="item">
             <h4>
-              {{ filteredFeatures.length }} signalement{{
-                filteredFeatures.length > 1 ? "s" : ""
-              }}
+              {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }}
             </h4>
           </div>
 
@@ -139,11 +137,11 @@
 
     <div v-show="showMap" class="ui tab active map-container" data-tab="map">
       <div id="map" ref="map"></div>
-      <SidebarLayers v-if="baseMaps && map" />
+      <SidebarLayers v-if="basemaps && map" />
     </div>
     <FeatureListTable
       v-show="!showMap"
-      :filteredFeatures="filteredFeatures"
+      :filteredFeatures="geojsonFeatures"
       :checkedFeatures.sync="checkedFeatures"
     />
 
@@ -188,11 +186,11 @@ import FeatureListTable from "@/components/feature/FeatureListTable";
 import Dropdown from "@/components/Dropdown.vue";
 const axios = require("axios");
 
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
+axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
   var re = new RegExp(name + "=([^;]+)");
   var value = re.exec(document.cookie);
-  return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+  return value !== null ? unescape(value[1]) : null;
+})("csrftoken");
 
 export default {
   name: "Feature_list",
@@ -239,6 +237,9 @@ export default {
       },
 
       geojsonFeatures: [],
+      featuresCount: 0,
+      previous: null,
+      next: null,
       filterStatus: null,
       filterType: null,
       baseUrl: this.$store.state.configuration.BASE_URL,
@@ -246,6 +247,8 @@ export default {
       zoom: null,
       lat: null,
       lng: null,
+      limit: 15,
+      offset: 0,
       showMap: true,
       showAddFeature: false,
     };
@@ -255,12 +258,13 @@ export default {
     ...mapGetters(["project", "permissions"]),
     ...mapState("feature", ["checkedFeatures"]),
     ...mapState("feature_type", ["feature_types"]),
+    ...mapState("map", ["basemaps"]),
 
-    baseMaps() {
-      return this.$store.state.map.basemaps;
+    API_BASE_URL() {
+      return this.$store.state.configuration.VUE_APP_DJANGO_API_BASE;
     },
 
-    filteredFeatures() {
+    /* filteredFeatures() {
       let results = this.geojsonFeatures;
       if (this.form.type.selected) {
         results = results.filter(
@@ -283,7 +287,7 @@ export default {
         });
       }
       return results;
-    },
+    }, */
 
     statusChoices() {
       //* if project is not moderate, remove pending status
@@ -293,13 +297,13 @@ export default {
     },
   },
 
-  watch: {
+  /* watch: {
     filteredFeatures(newValue, oldValue) {
       if (newValue && newValue !== oldValue) {
         this.onFilterChange();
       }
     },
-  },
+  }, */
 
   methods: {
     modalAllDelete() {
@@ -307,15 +311,15 @@ export default {
     },
 
     deleteFeature(feature_id) {
-      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${feature_id}/?project__slug=${this.project.slug}`;
+      const url = `${this.API_BASE_URL}features/${feature_id}/?project__slug=${this.project.slug}`;
       axios
         .delete(url, {})
         .then(() => {
           if (!this.modalAllDeleteOpen) {
             this.$store
-              .dispatch("feature/GET_PROJECT_FEATURES", this.project.slug)
+              .dispatch("feature/GET_PROJECT_FEATURES", this.project.slug) // ? Toujours nécessaire de mettre à jour les features classiques ?
               .then(() => {
-                this.getNloadGeojsonFeatures();
+                this.updateFeatures();
                 this.checkedFeatures.splice(feature_id);
               });
           }
@@ -335,8 +339,10 @@ export default {
     },
 
     onFilterChange() {
+      // ? Besoin de faire un fetch avec nouveau filtres ici ?
       if (this.featureGroup) {
-        const features = this.filteredFeatures;
+        //const features = this.filteredFeatures;
+        const features = this.geojsonFeatures;
         this.featureGroup.clearLayers();
         this.featureGroup = mapUtil.addFeatures(
           features,
@@ -381,26 +387,23 @@ export default {
       });
 
       // --------- End sidebar events ----------
-      this.getNloadGeojsonFeatures();
-
-      setTimeout(
-        function () {
-          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.addGeocoders(this.$store.state.configuration);
-        }.bind(this),
-        1000
-      );
+      this.updateFeatures();
+
+      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}`;
+        mapUtil.addVectorTileLayer(
+          mvtUrl,
+          this.$route.params.slug,
+          this.$store.state.feature_type.feature_types,
+          this.form
+        );
+        mapUtil.addGeocoders(this.$store.state.configuration);
+      }, 1000);
     },
 
-    getNloadGeojsonFeatures() {
-      const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+    updateFeatures() {
+      const url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
       this.$store.commit(
         "DISPLAY_LOADER",
         "Récupération des signalements en cours..."
@@ -408,8 +411,13 @@ export default {
       axios
         .get(url)
         .then((response) => {
-          if (response.status === 200 && response.data.features.length > 0) {
-            this.loadFeatures(response.data.features);
+          if (response.status === 200) {
+            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.$store.commit("DISCARD_LOADER");
         })
@@ -455,7 +463,11 @@ export default {
 
   created() {
     if (!this.project) {
-      this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug, "noFeatures");
+      this.$store.dispatch(
+        "GET_PROJECT_INFO",
+        this.$route.params.slug,
+        "noFeatures"
+      );
     }
   },