Merge branch 'evol/redmine-ticket-11442-comments' into 'develop'

implement comment post & comment attachment post

See merge request geocontrib/geocontrib-frontend!19

src/services/feature-api.js

@@ -18,20 +18,40 @@ const featureAPI = {
     }
   },
 
-  /* async subscribeProject({ projectSlug, suscribe }) {
-    const response = await axios.put(
-      `${baseUrl}projects/${projectSlug}/subscription/`,
-      { is_suscriber: suscribe }
+  async postComment({ featureId, comment }) {
+    const response = await axios.post(
+      `${baseUrl}features/${featureId}/comments/`, { comment }
     );
     if (
       response.status === 200 &&
       response.data
     ) {
-      return response.data;
+      return response;
+    } else {
+      return null;
+    }
+  },
+
+  async postCommentAttachment({ featureId, file, fileName, comment }) {
+    let formdata = new FormData();
+    formdata.append("file", file, fileName);
+    const data = {
+      comment
+    }
+    formdata.append("data", JSON.stringify(data));
+
+    const response = await axios.post(
+      `${baseUrl}features/${featureId}/attachments/`, formdata
+    );
+    if (
+      response.status === 200 &&
+      response.data
+    ) {
+      return response;
     } else {
       return null;
     }
-  }, */
+  },
 }
 
 export default featureAPI;

src/views/feature/Feature_detail.vue

@@ -275,7 +275,7 @@
             method="POST"
             enctype="multipart/form-data"
           >
-            <div
+            <!-- <div
               v-if="comment_form.non_field_errors"
               class="alert alert-danger"
               role="alert"
@@ -283,7 +283,7 @@
               <span v-for="error in comment_form.non_field_errors" :key="error">
                 {{ error }}
               </span>
-            </div>
+            </div> -->
             <div class="required field">
               <label :for="comment_form.comment.id_for_label"
                 >Ajouter un commentaire</label
@@ -306,7 +306,6 @@
                       : "Sélectionner un fichier ..."
                   }}</span>
                 </label>
-                <!--  // todo : get image from "C:\\fakepath\..." -->
                 <input
                   type="file"
                   accept="application/pdf, image/jpeg, image/png"
@@ -315,7 +314,7 @@
                   id="attachment_file"
                   @change="getAttachmentFileData($event)"
                 />
-                {{ comment_form.attachment_file.errors }}
+                <!-- {{ comment_form.attachment_file.errors }} -->
               </div>
               <div class="field">
                 <input
@@ -412,6 +411,7 @@ export default {
         attachment_file: {
           errors: null,
           value: null,
+          file: null,
         },
         title: {
           id_for_label: "title",
@@ -435,6 +435,7 @@ export default {
     DJANGO_BASE_URL: function () {
       return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
     },
+
     feature: function () {
       return (
         this.$store.state.feature.features.find(
@@ -442,6 +443,7 @@ export default {
         ) || []
       );
     },
+
     linked_features: function () {
       // todo: vérifier avec données réels si ça fonctionne correctement
       //return this.mock_linked_features.filter((el) => el.feature_to);
@@ -451,29 +453,41 @@ export default {
 
   methods: {
     postComment() {
-      /* const data = {
-        comment: this.comment_form.comment.value,
-        title: this.comment_form.title.value,
-        attachment_file: this.comment_form.attachment_file.value,
-      }; */
-      this.$store.dispatch("feature/POST_COMMENT");
-      //console.log("POST comment", data);
+      featureAPI
+        .postComment({
+          featureId: this.$route.params.slug_signal,
+          comment: this.comment_form.comment.value,
+        })
+        .then((response) => {
+          if (response && this.comment_form.attachment_file.file) {
+            featureAPI.postCommentAttachment({
+              featureId: this.$route.params.slug_signal,
+              file: this.comment_form.attachment_file.file,
+              fileName: this.comment_form.title.file,
+              comment: response.data.id,
+            });
+          }
+        });
     },
+
     getAttachmentFileData(evt) {
       const files = evt.target.files || evt.dataTransfer.files;
       const period = files[0].name.lastIndexOf(".");
       const fileName = files[0].name.substring(0, period);
       const fileExtension = files[0].name.substring(period + 1);
       const shortName = fileName.slice(0, 10) + "[...]." + fileExtension;
+      this.comment_form.attachment_file.file = files[0];
       this.comment_form.attachment_file.value = shortName;
       this.comment_form.title.value = shortName;
     },
+
     deleteFeature() {
       this.$store.dispatch(
         "feature/DELETE_FEATURE",
         this.$route.params.slug_signal
       );
     },
+
     initMap() {
       var mapDefaultViewCenter =
         this.$store.state.configuration.DEFAULT_MAP_VIEW.center;