wip

src/views/project/Project_detail.vue

@@ -17,7 +17,7 @@
             :src="
               project.thumbnail.includes('default')
                 ? require('@/assets/img/default.png')
-                : DJANGO_BASE_URL + project.thumbnail
+                : DJANGO_BASE_URL + project.thumbnail + refreshId()
             "
           />
           <div class="ui hidden divider"></div>
@@ -500,6 +500,10 @@ export default {
   },
 
   methods: {
+    refreshId() {
+      return "?ver="+ Math.random()
+    },
+
     toNewFeatureType() {
       this.$router.push({
         name: "ajouter-type-signalement",
@@ -546,7 +550,7 @@ export default {
       document
         .getElementById("message")
         .scrollIntoView({ block: "end", inline: "nearest" });
-      setTimeout(() => {
+      setTimeout(() => { //* hide message after 5 seconds
         this.tempMessage = null;
       }, 5000);
     }

src/views/project/Project_edit.vue

@@ -31,9 +31,12 @@
             v-if="form.thumbnail"
             class="ui small image"
             id="form-input-file-logo"
-            :src="form.thumbnail"
+            :src="
+              thumbnailFileSrc
+                ? thumbnailFileSrc
+                : DJANGO_BASE_URL + form.thumbnail
+            "
           />
-          <!--  @click.prevent="selectImg" -->
           <label class="ui icon button" for="thumbnail"
             ><!-- // todo : send image to the backend and display it after -->
             <i class="file icon"></i>
@@ -101,7 +104,7 @@
             >Visibilité des signalements publiés</label
           >
           <Dropdown
-            :options="level_permissions_choices"
+            :options="levelPermissions"
             :selected="form.access_level_pub_feature.name"
             :selection.sync="form.access_level_pub_feature"
           />
@@ -111,7 +114,7 @@
             Visibilité des signalements archivés
           </label>
           <Dropdown
-            :options="level_permissions_choices"
+            :options="levelPermissions"
             :selected="form.access_level_arch_feature.name"
             :selection.sync="form.access_level_arch_feature"
           />
@@ -168,7 +171,7 @@ export default {
   data() {
     return {
       action: "create",
-      level_permissions_choices: [
+      levelPermissions: [
         { name: "Utilisateur anonyme", value: "anonymous" },
         { name: "Utilisateur connecté", value: "logged_user" },
         { name: "Contributeur", value: "contributor" },
@@ -198,11 +201,13 @@ export default {
         nb_contributors: 0,
         is_project_type: false,
       },
+      thumbnailFileSrc: null,
     };
   },
 
   computed: {
     ...mapGetters(["project"]),
+    DJANGO_BASE_URL: () => process.env.VUE_APP_DJANGO_BASE,
   },
 
   methods: {
@@ -225,33 +230,39 @@ export default {
       return filename + "." + ext;
     },
 
-    goBackNrefresh() {
-      let _this = this;
-      this.$router.push("/", function () { // * go back and
-        _this.$store.dispatch("GET_ALL_PROJECTS"); //* refresh project list
-      });
-    },
-
     onFileChange(e) {
       // * read image file
       const files = e.target.files || e.dataTransfer.files;
       if (!files.length) return; //* abort if no file
       this.fileToImport = files[0]; //* stock the file to post later
       let reader = new FileReader(); //* read the file to display in the page
-      let _this = this; //* this will be different in onload function
+      let _this = this; //* 'this' is different in onload function
       reader.onload = function (e) {
-        _this.form.thumbnail = e.target.result;
+        _this.thumbnailFileSrc = e.target.result;
       };
       reader.readAsDataURL(this.fileToImport);
     },
 
-    // todo : send file to the back
+    goBackNrefresh(slug) {
+      let _this = this;
+      // * go back to project list
+      this.$router.push(
+        {
+          name: "project_detail",
+          params: { slug },
+        },
+        function () {
+          _this.$store.dispatch("GET_ALL_PROJECTS"); //* & refresh project list
+        }
+      );
+    },
+
     postProjectThumbnail(projectSlug) {
       //* send img to the backend when feature_type is created
       if (this.fileToImport.size > 0) {
         let formData = new FormData();
         formData.append("file", this.fileToImport);
-        let url =
+        const url =
           process.env.VUE_APP_DJANGO_API_BASE +
           "projects/" +
           projectSlug +
@@ -265,7 +276,7 @@ export default {
           .then((response) => {
             if (response && response.status === 200) {
               //dispatch("GET_IMPORTS", feature_type_slug); // ? Besoin de vérifier le statut de l'import ?
-              this.goBackNrefresh();
+              this.goBackNrefresh(projectSlug);
             }
           })
           .catch((error) => {
@@ -275,9 +286,8 @@ export default {
     },
 
     async postForm() {
-      //const data = JSON.stringify(this.project);
-      //* create project
       // todo: check form
+      //let url = `${process.env.VUE_APP_DJANGO_API_BASE}projects/`;
       const projectData = {
         title: this.form.title,
         description: this.form.description,
@@ -289,21 +299,40 @@ export default {
         moderation: this.form.moderation,
       };
 
-      await axios
-        .post(`${process.env.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
-        .then((response) => {
-          if (response && response.status === 201 && response.data) {
-            this.$store.commit("ADD_PROJECT", response.data);
-            //* send thumbnail after feature_type was created
-            if (this.fileToImport)
-              this.postProjectThumbnail(response.data.slug);
-          } else {
-            this.goBackNrefresh();
-          }
-        })
-        .catch((error) => {
-          throw error;
-        });
+      if (this.action === "create" || this.action === "duplicate") {
+        await axios
+          .post(`${process.env.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
+          .then((response) => {
+            if (response && response.status === 201 && response.data) {
+              //* send thumbnail after feature_type was created
+              if (this.fileToImport)
+                this.postProjectThumbnail(response.data.slug);
+            } else {
+              this.goBackNrefresh(response.data.slug);
+            }
+          })
+          .catch((error) => {
+            throw error;
+          });
+      } else if (this.action === "edit") {
+        await axios
+          .put(
+            `${process.env.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/`,
+            projectData
+          )
+          .then((response) => {
+            if (response && response.status === 200) {
+              //* send thumbnail after feature_type was created
+              if (this.fileToImport)
+                this.postProjectThumbnail(this.project.slug);
+            } else {
+              this.goBackNrefresh(this.project.slug);
+            }
+          })
+          .catch((error) => {
+            throw error;
+          });
+      }
     },
   },
 
@@ -312,10 +341,23 @@ export default {
     if (this.action !== "create") {
       if (!this.project) {
         this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
-        this.form = this.project;
-      } else {
-        this.form = this.project;
       }
+      this.form = this.project;
+      /* this.form.thumbnail = //* add api base to display image src
+        process.env.VUE_APP_DJANGO_BASE + this.form.thumbnail; */
+      //* transform string values to objects for dropdowns display (could be in a computed)
+      this.form.access_level_pub_feature = {
+        name: this.project.access_level_pub_feature,
+        value: this.levelPermissions.find(
+          (el) => (el.name = this.project.access_level_pub_feature)
+        ).value,
+      };
+      this.form.access_level_arch_feature = {
+        name: this.project.access_level_arch_feature,
+        value: this.levelPermissions.find(
+          (el) => (el.name = this.project.access_level_arch_feature)
+        ).value,
+      };
     }
   },
 };