WIP:testing partial_update -> bug feature disappear + bug page number missing first one

src/components/feature/FeatureListTable.vue

@@ -83,6 +83,7 @@
               <!-- :class="['ui checkbox', {disabled: canDeleteFeature(feature)}]" -->
               <input
                 type="checkbox"
+                @input="storeClickedFeature(feature)"
                 :id="feature.id"
                 :value="feature.id"
                 v-model="checked"
@@ -254,6 +255,7 @@ export default {
   props: [
     "paginatedFeatures",
     "checkedFeatures",
+    "clickedFeatures",
     "featuresCount",
     "pagination",
     "sort",
@@ -311,6 +313,10 @@ export default {
   },
 
   methods: {
+    storeClickedFeature(feature) {
+      this.clickedFeatures.push({feature_id: feature.id, feature_type: feature.properties.feature_type.slug})
+    },
+
     canDeleteFeature(feature) {
       return feature.properties.creator.username !== this.user.username &&
                   !this.user.is_superuser &&

src/services/feature-api.js

@@ -62,6 +62,21 @@ const featureAPI = {
     }
   },
 
+  async updateFeature({ feature_id, feature_type__slug, project__slug, newStatus }) {
+    let url = `${baseUrl}features/${feature_id}/?feature_type__slug=${feature_type__slug}&project__slug=${project__slug}`
+
+    const response = await axios({
+      url,
+      method: "PATCH",
+      data: { id: feature_id, status: newStatus, feature_type: feature_type__slug }
+    })
+    if (response.status === 200 && response.data) {
+      return response;
+    } else {
+      return null;
+    }
+  },
+
   async postComment({ featureId, comment }) {
     const response = await axios.post(
       `${baseUrl}features/${featureId}/comments/`, { comment }

src/store/modules/feature.js

@@ -172,7 +172,6 @@ const feature = {
 
     SEND_FEATURE({ state, rootState, commit, dispatch }, routeName) {
       commit("DISPLAY_LOADER", "Le signalement est en cours de création", { root: true })
-      const message = routeName === "editer-signalement" ? "Le signalement a été mis à jour" : "Le signalement a été crée";
       function redirect(featureId) {
         dispatch(
           'GET_PROJECT_FEATURE',
@@ -188,7 +187,7 @@ const feature = {
               params: {
                 slug_type_signal: rootState.feature_type.current_feature_type_slug,
                 slug_signal: featureId,
-                message,
+                message: routeName === "editer-signalement" ? "Le signalement a été mis à jour" : "Le signalement a été crée"
               },
             });
             dispatch("GET_ALL_PROJECTS", null, {root:true}) //* & refresh project list
@@ -201,30 +200,32 @@ const feature = {
         redirect(featureId);
       }
 
-      //* prepare feature data to send
-      let extraFormObject = {}; //* prepare an object to be flatten in properties of geojson
-      for (const field of state.extra_form) {
-        extraFormObject[field.name] = field.value;
-      }
-      const geojson = {
-        "id": state.form.feature_id,
-        "type": "Feature",
-        "geometry": state.form.geometry,
-        "properties": {
-          "title": state.form.title,
-          "description": state.form.description.value,
-          "status": state.form.status.value,
-          "project": rootState.project_slug,
-          "feature_type": rootState.feature_type.current_feature_type_slug,
-          ...extraFormObject
+      function createGeojson() { //* prepare feature data to send
+        let extraFormObject = {}; //* prepare an object to be flatten in properties of geojson
+        for (const field of state.extra_form) {
+          extraFormObject[field.name] = field.value;
+        }
+        return {
+          "id": state.form.feature_id,
+          "type": "Feature",
+          "geometry": state.form.geometry,
+          "properties": {
+            "title": state.form.title,
+            "description": state.form.description.value,
+            "status": state.form.status.value,
+            "project": rootState.project_slug,
+            "feature_type": rootState.feature_type.current_feature_type_slug,
+            ...extraFormObject
+          }
         }
       }
 
+      const geojson = createGeojson();
       let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/`
       if (routeName === "editer-signalement") {
-        url += `${state.form.feature_id}/?` +
-        `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
-        `&project__slug=${rootState.project_slug}`
+        url += `${state.form.feature_id}/?
+        feature_type__slug=${rootState.feature_type.current_feature_type_slug} 
+        &project__slug=${rootState.project_slug}`
       }
 
       return axios({

src/views/feature/Feature_list.vue

@@ -164,12 +164,14 @@
       <SidebarLayers v-if="basemaps && map" />
     </div>
     <!-- | -->
+      <!-- v-on:update:clickedFeatures="handleClickedFeatures" -->
     <FeatureListTable
       v-show="!showMap"
       v-on:update:page="handlePageChange"
       v-on:update:sort="handleSortChange"
       :paginatedFeatures="paginatedFeatures"
       :checkedFeatures.sync="checkedFeatures"
+      :clickedFeatures.sync="clickedFeatures"
       :featuresCount="featuresCount"
       :pagination="pagination"
       :sort="sort"
@@ -256,6 +258,7 @@ export default {
         title: null,
       },
       baseUrl: this.$store.state.configuration.BASE_URL,
+      clickedFeatures: [],
       modalAllDeleteOpen: false,
       map: null,
       zoom: null,
@@ -351,10 +354,8 @@ export default {
       );
     },
 
-    availableStatus() {
-
+    availableStatus() { //* attente de réponse sur le ticket
       return this.statusChoices.filter((status) => status)
-
     },
 
     featureTypeChoices() {
@@ -364,7 +365,8 @@ export default {
 
   methods: {
     ...mapActions('feature', [
-      'GET_PROJECT_FEATURES'
+      'GET_PROJECT_FEATURES',
+      'SEND_FEATURE'
     ]),
 
     toggleAddFeature() {
@@ -382,18 +384,27 @@ export default {
     },
 
     clickOutsideDropdown(e) {
-      if (!e.target.closest('#button-dropdown'))
+      if (!e.target.closest("#button-dropdown")) {
         this.showModifyStatus = false;
-        this.showAddFeature = false;
+        setTimeout(() => { //* timout necessary to give time to click on link to add feature
+          this.showAddFeature = false;
+        }, 500);
+      }
     },
 
-    modifyStatus(newValue) {
-      console.log("newValue", newValue)
+    modifyStatus(newStatus) {
+      console.log("newStatus", newStatus)
+      this.checkedFeatures.forEach((feature_id) => {
+        let feature_type__slug = this.clickedFeatures.find((el) => el.feature_id === feature_id).feature_type
+        console.log("feature_type__slug", feature_type__slug)
+        featureAPI.updateFeature({feature_id, feature_type__slug, project__slug: this.$route.params.slug, newStatus})
+      })
     },
 
+
     deleteFeature(feature_id) {
       const url = `${this.API_BASE_URL}features/${feature_id}/?project__slug=${this.project.slug}`;
-      axios
+      axios //TODO: REFACTO -> Delete function already exist in store
         .delete(url, {})
         .then(() => {
           if (!this.modalAllDeleteOpen) {
@@ -415,8 +426,8 @@ export default {
     deleteAllFeatureSelection() {
       let feature = {};
       this.checkedFeatures.forEach((feature_id) => {
-        feature = { feature_id: feature_id };
-        this.deleteFeature(feature.feature_id);
+        feature = { feature_id: feature_id }; // ? Is this usefull ?
+        this.deleteFeature(feature.feature_id); //? since property feature_id is directly used after...
       });
       this.modalAllDelete();
     },