fixing project_mapping forms (WIP)

src/components/project/ProjectMappingContextLayer.vue

@@ -32,11 +32,7 @@
             @click="updateLayer({ ...layer, queryable: !layer.queryable })"
             class="ui checkbox"
           >
-            <input
-              type="checkbox"
-              :checked="layer.queryable"
-              name="queryable"
-            />
+            <input type="checkbox" v-model="layer.queryable" name="queryable" />
             <label for="queryable"> Requêtable</label>
           </div>
           <!-- {{ form.queryable.errors }} -->
@@ -65,25 +61,41 @@ export default {
   components: {
     Dropdown,
   },
+/* 
+  data() {
+    return {
+      matchingLayer: null,
+    };
+  },
+
+  watch: {
+    layer(newVal) {
+      console.log()
+      this.matchingLayer = this.layers.find((el) => el.title === newVal.title);
+    },
+  }, */
 
   computed: {
     ...mapState("map", ["layers", "availableLayers"]),
 
     selectedLayer: {
       get() {
+        const matchingLayer = this.retrieveLayer(this.layer.title);
         return {
-          name: this.layer
-            ? this.layers.find((el) => el.title === this.layer.title).service
-            : "",
+          name: matchingLayer ? matchingLayer.service : "",
           value: this.layer ? this.layer.title : "",
+          // id: matchingLayer ? matchingLayer.id : null, //? what could be the default value ?
         };
       },
 
       set(newValue) {
+        // console.log(newValue)
+        const matchingLayer = this.retrieveLayer(this.layer.title);
         this.updateLayer({
           ...this.layer,
           service: newValue.name,
           title: newValue.value,
+          id: matchingLayer.id,
         });
       },
     },
@@ -111,13 +123,19 @@ export default {
   },
 
   methods: {
+    retrieveLayer(title) {
+     return this.layers.find((el) => el.title === title);
+    },
+
     removeLayer() {
       this.$store.commit("map/DELETE_BASEMAP_LAYER", {
         basemapId: this.basemapid,
         layerId: this.layer.dataKey,
       });
     },
+
     updateLayer(layer) {
+      console.log(layer);
       this.$store.commit("map/UPDATE_BASEMAP_LAYER", {
         basemapId: this.basemapid,
         layerId: this.layer.dataKey,
@@ -125,5 +143,15 @@ export default {
       });
     },
   },
+
+  mounted() {
+    const matchingLayer = this.retrieveLayer(this.layer.title);
+    this.updateLayer({
+      ...this.layer,
+      service: matchingLayer.service,
+      title: matchingLayer.title,
+      id: matchingLayer.id,
+    });
+  },
 };
 </script>
\ No newline at end of file

src/components/project/project_mapping_basemap.vue

@@ -2,7 +2,14 @@
   <div class="ui segment">
     <div class="field required">
       <label for="basemap-title">Titre</label>
-      <input v-model="title" type="text" name="basemap-title" required />
+      <!-- v-model="title"  -->
+      <input
+        :value="basemap.title"
+        @blur="updateTitle"
+        type="text"
+        name="basemap-title"
+        required
+      />
       <!-- {{ basemapForm.title.errors }} -->
     </div>
 
@@ -68,18 +75,6 @@ export default {
         }
       }, 0);
     },
-
-    title: {
-      get() {
-        return this.basemap.title || `Fond ${this.basemap.id}`;
-      },
-      set(newValue) {
-        this.$store.commit("map/UPDATE_BASEMAP", {
-          id: this.basemap.id,
-          title: newValue,
-        });
-      },
-    },
   },
 
   methods: {
@@ -98,6 +93,15 @@ export default {
       this.$store.commit("map/UPDATE_BASEMAP", {
         layers: [...this.basemap.layers, newLayer],
         id: this.basemap.id,
+        title: this.basemap.title,
+      });
+    },
+
+    updateTitle(evt) {
+      console.log(evt);
+      this.$store.commit("map/UPDATE_BASEMAP", {
+        id: this.basemap.id,
+        title: evt.target.value,
       });
     },
 
@@ -105,6 +109,15 @@ export default {
       this.layers = this.layers.filter((layer) => layer.dataKey !== dataKey);
     },
   },
+
+  // mounted() { //* not present in original
+  //   if (!this.basemap.title) {
+  //     this.$store.commit("map/UPDATE_BASEMAP", {
+  //       id: this.basemap.id,
+  //       title: newValue,
+  //     });
+  //   }
+  // },
 };
 </script>
 

src/store/modules/map.js

@@ -33,6 +33,7 @@ const map = {
       state.basemaps = basemaps;
     },
     UPDATE_BASEMAP(state, { title, id, layers }) {
+      console.log(title, id, layers)
       const index = state.basemaps.findIndex((el) => el.id === id);
       if (index !== -1) {
         if (title) {
@@ -41,6 +42,7 @@ const map = {
         if (layers) {
           state.basemaps[index].layers = layers
         }
+        console.log(state.basemaps[index])
       }
     },
     DELETE_BASEMAP(state, basemapId) {
@@ -142,11 +144,12 @@ const map = {
     },
 
 
-    SAVE_BASEMAPS({ state, dispatch }) {
+    SAVE_BASEMAPS({ state, rootState, dispatch }) {
       console.log("SAVE_BASEMAPS", state.basemaps);
       for (let basemap of state.basemaps) {
+        basemap["project"] = rootState.project_slug
         console.log("BASEMAP", basemap);
-        // TODO: À transformer en PUT dès que dispo
+        // TODO: différencier PUT & POST
         axios
           .post(`${DJANGO_API_BASE}base-maps/`, basemap)
           .then((response) => (console.log(response.data)))

src/views/project/Project_edit.vue

@@ -23,7 +23,7 @@
             id="title"
             v-model="form.title"
           />
-          <!-- {{ form.title.errors }} // ? des erreurs possibles ? -->
+          <!-- {{ form.title.errors }} -->
         </div>
         <div class="field">
           <label>Illustration du projet</label>
@@ -36,8 +36,7 @@
                 : DJANGO_BASE_URL + form.thumbnail
             "
           />
-          <label class="ui icon button" for="thumbnail"
-            ><!-- // todo : send image to the backend and display it after -->
+          <label class="ui icon button" for="thumbnail">
             <i class="file icon"></i>
             <span class="label">{{
               form.thumbnail_name ? form.thumbnail_name : fileToImport.name
@@ -124,7 +123,7 @@
         <div class="ui checkbox">
           <input
             type="checkbox"
-            :checked="form.moderation"
+            v-model="form.moderation"
             name="moderation"
             id="moderation"
           />
@@ -137,7 +136,7 @@
         <div class="ui checkbox">
           <input
             type="checkbox"
-            :checked="form.is_project_type"
+            v-model="form.is_project_type"
             name="is_project_type"
             id="is_project_type"
           />
@@ -201,7 +200,7 @@ export default {
         nb_contributors: 0,
         is_project_type: false,
       },
-      thumbnailFileSrc: require('@/assets/img/default.png'),
+      thumbnailFileSrc: "",
     };
   },
 
@@ -303,7 +302,14 @@ export default {
 
       if (this.action === "create" || this.action === "duplicate") {
         await axios
+<<<<<<< Updated upstream
           .post(`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
+=======
+          .post(
+            `${configuration.VUE_APP_DJANGO_API_BASE}projects/`,
+            projectData
+          )
+>>>>>>> Stashed changes
           .then((response) => {
             if (response && response.status === 201 && response.data) {
               //* send thumbnail after feature_type was created
@@ -340,7 +346,9 @@ export default {
 
   created() {
     this.definePageType();
-    if (this.action !== "create") {
+    if (this.action === "create") {
+      this.thumbnailFileSrc = require("@/assets/img/default.png");
+    } else if (this.action === "edit") {
       if (!this.project) {
         this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
       }

src/views/project/Project_mapping.vue

@@ -24,7 +24,7 @@
       <div class="ui">
         <ProjectMappingBasemap
           v-for="basemap in basemaps"
-          :key="basemap.dataKey"
+          :key="basemap.id"
           :basemap="basemap"
         />
       </div>
@@ -62,6 +62,8 @@ export default {
     },
 
     saveChanges() {
+
+      // ToDo : check if values are filled
       this.$store.dispatch("map/SAVE_BASEMAPS");
     },
   },