fix props mutation warning in featureListTable

src/components/feature/FeatureListTable.vue

@@ -71,8 +71,7 @@
                 type="checkbox"
                 :id="feature.id"
                 :value="feature.id"
-                v-model="checkedFeatures"
-                :checked="checkedFeatures[feature.id]"
+                v-model="checked"
               />
               <label></label>
             </div>
@@ -280,6 +279,15 @@ export default {
       return arr;
     },
 
+    checked: {
+      get() {
+        return this.checkedFeatures;
+      },
+      set(newChecked) {
+        this.$store.commit("feature/UPDATE_CHECKED_FEATURES", newChecked);
+      },
+    },
+
     displayedPageEnd() {
       return this.filteredFeatures.length <= this.pagination.end
         ? this.filteredFeatures.length

src/store/modules/feature.js

@@ -14,10 +14,11 @@ const feature = {
     attachmentFormset: [],
     attachmentsToDelete: [],
     attachmentsToPut: [],
-    linkedFormset: [],
+    checkedFeatures: [],
+    extra_form: [],
     features: [],
     form: null,
-    extra_form: [],
+    linkedFormset: [],
     linked_features: [],
   },
   mutations: {
@@ -79,6 +80,9 @@ const feature = {
     REMOVE_ATTACHMENTS_ID_TO_DELETE(state, attachementId) {
       state.attachmentsToDelete = state.attachmentsToDelete.filter(el => el !== attachementId);
     },
+    UPDATE_CHECKED_FEATURES(state, checkedFeatures) {
+      state.checkedFeatures = checkedFeatures;
+    }
   },
   getters: {
   },
@@ -137,9 +141,9 @@ const feature = {
       if (routeName === "editer-signalement") {
         axios
           .put(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${state.form.feature_id}/?` +
-            `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` + 
-            `&project__slug=${rootState.project_slug}` 
-          , geojson)
+            `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
+            `&project__slug=${rootState.project_slug}`
+            , geojson)
           .then((response) => {
             if (response.status === 200 && response.data) {
               if (state.attachmentFormset.length > 0 || state.linkedFormset.length > 0) {
@@ -189,7 +193,7 @@ const feature = {
               console.error(error);
               return error
             });
-            
+
         }
       }
 
@@ -203,7 +207,7 @@ const feature = {
         if (attachment.title)
           data['info'] = attachment.info
         formdataToUpdate.append("data", JSON.stringify(data));
-        let payload ={
+        let payload = {
           'attachmentsId': attachment.id,
           'featureId': featureId,
           'formdataToUpdate': formdataToUpdate
@@ -213,7 +217,7 @@ const feature = {
       }
 
       function deleteAttachement(attachmentsId, featureId) {
-        let payload ={
+        let payload = {
           'attachmentsId': attachmentsId,
           'featureId': featureId
         }
@@ -224,7 +228,7 @@ const feature = {
         ...state.attachmentFormset.map((attachment) => postAttachement(attachment)),
         ...state.attachmentsToPut.map((attachments) => putAttachement(attachments, featureId)),
         ...state.attachmentsToDelete.map((attachmentsId) => deleteAttachement(attachmentsId, featureId))
-        ]
+      ]
       );
       state.attachmentsToDelete = []
       state.attachmentsToPut = []
@@ -280,8 +284,8 @@ const feature = {
     DELETE_FEATURE({ state, rootState }, feature_id) {
       console.log("Deleting feature:", feature_id, state)
       const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${feature_id}/?` +
-      `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` + 
-      `&project__slug=${rootState.project_slug}`;
+        `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
+        `&project__slug=${rootState.project_slug}`;
       return axios
         .delete(url)
         .then((response) => response)

src/views/feature/Feature_list.vue

@@ -199,7 +199,6 @@ export default {
   data() {
     return {
       modalAllDeleteOpen: false,
-      checkedFeatures: [],
       form: {
         type: {
           selected: null,
@@ -249,7 +248,7 @@ export default {
   computed: {
     ...mapGetters(["project", "permissions"]),
     ...mapState(["user"]),
-    ...mapState("feature", ["features"]),
+    ...mapState("feature", ["features", "checkedFeatures"]),
     ...mapState("feature_type", ["feature_types"]),
 
     baseMaps() {