REDMINE_ISSUE-11784

src/views/feature/Feature_list.vue

@@ -22,7 +22,7 @@
             ><i class="map fitted icon"></i
           ></a>
           <a
-            @click="showMap = false"
+            @click="showTable"
             :class="['item no-margin', { active: !showMap }]"
             data-tab="list"
             data-tooltip="Liste"
@@ -30,7 +30,10 @@
           ></a>
           <div class="item">
             <h4>
-              {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }}
+              <!-- {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }} -->
+              {{ geojsonFeatures.length }} signalement{{
+                geojsonFeatures.length > 1 ? "s" : ""
+              }}
             </h4>
           </div>
 
@@ -119,7 +122,7 @@
               type="text"
               name="title"
               v-model="form.title"
-              @input="updateFeatures"
+              @input="fetchPagedFeatures"
             />
             <button
               type="button"
@@ -145,7 +148,7 @@
     <FeatureListTable
       v-show="!showMap"
       v-on:update:page="handlePageChange"
-      :geojsonFeatures="geojsonFeatures"
+      :geojsonFeatures="geojsonFeaturesPaginated"
       :checkedFeatures.sync="checkedFeatures"
       :featuresCount="featuresCount"
       :pagination="pagination"
@@ -244,6 +247,7 @@ export default {
       },
 
       geojsonFeatures: [],
+      geojsonFeaturesPaginated: [],
       baseUrl: this.$store.state.configuration.BASE_URL,
       map: null,
       zoom: null,
@@ -264,6 +268,7 @@ export default {
       next: null,
       showMap: true,
       showAddFeature: false,
+      paginatedFeaturesDone: true,
     };
   },
 
@@ -296,6 +301,14 @@ export default {
   },
 
   methods: {
+    showTable() {
+      if (this.paginatedFeaturesDone) {
+        this.fetchPagedFeatures();
+        this.paginatedFeaturesDone = false;
+      }
+      this.showMap = false;
+    },
+
     modalAllDelete() {
       this.modalAllDeleteOpen = !this.modalAllDeleteOpen;
     },
@@ -311,7 +324,8 @@ export default {
                 project_slug: this.project.slug,
               })
               .then(() => {
-                this.updateFeatures();
+                this.fetchPagedFeatures();
+                this.getNloadGeojsonFeatures();
                 this.checkedFeatures.splice(feature_id);
               });
           }
@@ -379,7 +393,8 @@ export default {
       });
 
       // --------- End sidebar events ----------
-      this.updateFeatures();
+      //this.fetchPagedFeatures();
+      this.getNloadGeojsonFeatures();
 
       setTimeout(() => {
         const project_id = this.$route.params.slug.split("-")[0];
@@ -394,6 +409,62 @@ export default {
       }, 1000);
     },
 
+    getNloadGeojsonFeatures() {
+      console.log("getNloadGeojsonFeatures");
+      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) => {
+          console.log(response);
+          if (response.status === 200 && response.data.features.length > 0) {
+            this.geojsonFeatures = response.data.features;
+            this.loadFeatures();
+          }
+          this.$store.commit("DISCARD_LOADER");
+        })
+        .catch((error) => {
+          this.$store.commit("DISCARD_LOADER");
+          throw error;
+        });
+    },
+
+    loadFeatures() {
+      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,
+        },
+        true,
+        this.feature_types
+      );
+      // Fit the map to bound only if no initial zoom and center are defined
+      if (
+        (this.lat === "" || this.lng === "" || this.zoom === "") &&
+        this.geojsonFeatures.length > 0
+      ) {
+        mapUtil
+          .getMap()
+          .fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] });
+      }
+      this.form.type.choices = [
+        //* converting Set to an Array with spread "..."
+        ...new Set(
+          this.geojsonFeatures.map((el) => el.properties.feature_type.title)
+        ), //* use Set to eliminate duplicate values
+      ];
+    },
+
+    //* Paginated Features for table *//
     getFeatureTypeSlug(title) {
       const featureType = this.feature_types.find((el) => el.title === title);
       return featureType ? featureType.slug : null;
@@ -458,14 +529,16 @@ export default {
     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 });
+      this.fetchPagedFeatures({ filterType: "featureType", filterValue });
     },
 
     updateStatusFeatures(filterValue) {
-      this.updateFeatures({ filterType: "status", filterValue });
+      this.fetchPagedFeatures({ filterType: "status", filterValue });
     },
 
-    updateFeatures(params) {
+    fetchPagedFeatures(params) {
+      this.onFilterChange(); //* temporary, use paginated event to watch change in filters, to modify geojson on map
+      //* replace function calls in watcher and on input
       let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.pagination.pagesize}&offset=${this.pagination.start}`;
 
       if (params) {
@@ -492,10 +565,10 @@ export default {
             this.featuresCount = response.data.count;
             this.previous = response.data.previous;
             this.next = response.data.next;
-            this.geojsonFeatures = response.data.results.features;
+            this.geojsonFeaturesPaginated = response.data.results.features;
             //if (response.data.results.features.length > 0) {
-            this.loadFeatures();
-            this.onFilterChange();
+            //this.loadFeatures();
+            //this.onFilterChange();
             //}
           }
           this.$store.commit("DISCARD_LOADER");
@@ -506,37 +579,7 @@ export default {
         });
     },
 
-    loadFeatures() {
-      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,
-        },
-        true,
-        this.feature_types
-      );
-      // Fit the map to bound only if no initial zoom and center are defined
-      if (
-        (this.lat === "" || this.lng === "" || this.zoom === "") &&
-        this.geojsonFeatures.length > 0
-      ) {
-        mapUtil
-          .getMap()
-          .fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] });
-      }
-      this.form.type.choices = [
-        //* converting Set to an Array with spread "..."
-        ...new Set(
-          this.geojsonFeatures.map((el) => el.properties.feature_type.title)
-        ), //* use Set to eliminate duplicate values
-      ];
-    },
+    //* Pagination for table *//
 
     handlePageChange(page) {
       if (page === "next") {
@@ -555,7 +598,7 @@ export default {
       this.pagination.start += toAddOrRemove;
       this.pagination.end += toAddOrRemove;
       this.pagination.currentPage = pageNumber;
-      this.updateFeatures();
+      this.fetchPagedFeatures();
     },
 
     toPreviousPage() {
@@ -565,7 +608,7 @@ export default {
           this.pagination.end -= this.pagination.pagesize;
           this.pagination.currentPage -= 1;
         }
-        this.updateFeatures(this.previous);
+        this.fetchPagedFeatures(this.previous);
       }
     },
 
@@ -576,7 +619,7 @@ export default {
           this.pagination.end += this.pagination.pagesize;
           this.pagination.currentPage += 1;
         }
-        this.updateFeatures(this.next);
+        this.fetchPagedFeatures(this.next);
       }
     },
   },