add Comment component, make POST comment request

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js

@@ -14,9 +14,8 @@ const datetimeFormats = {
       },
       long: {
          year: "numeric",
-         month: "short",
+         month: "numeric",
          day: "numeric",
-         weekday: "short",
          hour: "numeric",
          minute: "numeric",
          hour12: false

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -3,6 +3,7 @@
    <persons-associated></persons-associated>
    <requestor></requestor>
    <resources></resources>
+   <comment></comment>
    <!--test></test-->
 </template>
 
@@ -13,6 +14,7 @@ import AccompanyingCourse from './components/AccompanyingCourse.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
 import Resources from './components/Resources.vue';
+import Comment from './components/Comment.vue';
 //import Test from './components/Test.vue';
 
 export default {
@@ -22,6 +24,7 @@ export default {
       PersonsAssociated, 
       Requestor,
       Resources,
+      Comment,
       //Test
    },
    computed: mapState([

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js

@@ -121,18 +121,27 @@ const postResource = (id, payload, method) => {
 
 /*
 * Endpoint v.2 chill_api_single_accompanying_course_comment, 
-* method POST/DELETE, add/remove a comment to the accompanyingCourse
+* method POST/DELETE/PATCH, add/remove a comment to the accompanyingCourse
 *
 *  @id               integer - id of accompanyingCourse
 *  @payload          
-*  @method           string - POST or DELETE
+*  @method           string - POST, DELETE or PATCH
 */
-const postComment = (id, payload, method) => {
+const postComment = (id, payload) => {
    console.log('payload', payload);
+   const body = { type: "accompanying_period_comment" };
+   switch (payload.method) {
+      case 'POST':
+         body['content'] = payload.content;
+         break;
+      case 'DELETE':
+         body['id'] = 42;
+         break;
+   }
    console.log('body', body);
-   const url = `/1.0/person/accompanying-course/${id}/comment.json`;
+   const url = `/api/1.0/person/accompanying-course/${id}/comment.json`;
    return fetch(url, {
-         method: method,
+         method: payload.method,
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          },
@@ -142,7 +151,7 @@ const postComment = (id, payload, method) => {
          if (response.ok) { return response.json(); }
          throw Error('Error with request resource response'); 
       });
-}
+};
 
 export { 
    getAccompanyingCourse,

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue

@@ -0,0 +1,76 @@
+<template>
+   <div class="vue-component">
+      <h3>{{ $t('comment.title') }}</h3>
+      
+      <div class="error flash_message" v-if="errors.length > 0">
+         {{ errors[0] }}
+      </div>
+      
+      <div v-if="firstComment">
+         créé par {{ firstComment.creator.text }}
+         le {{ $d(firstComment.createdAt.datetime, 'long') }}
+         <div v-if="firstComment.updatedAt.datetime !== firstComment.createdAt.datetime">
+            modifié par {{ firstComment.updatedBy.text }}
+            le {{ $d(firstComment.updatedAt.datetime, 'long') }}
+         </div>
+      </div>
+      
+      <form @submit.prevent="submitform">
+         <textarea 
+            name="content" 
+            v-bind:placeholder="$t('comment.content')"
+            rows="8" 
+            cols="80"
+            ckeditor="ckeditor"
+            v-model="content">
+         </textarea>
+         <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
+      </form>
+      
+   </div>
+</template>
+
+<script>
+export default {
+   name: "Comment",
+   data() {
+      return {
+         formdata: { 
+            content: ''
+         }
+      }
+   },
+   computed: {
+      comments() {
+         return this.$store.state.accompanyingCourse.comments;
+      },
+      firstComment() {
+         return this.comments[0];
+      },
+      content: {
+         set(value) {
+            this.formdata.content = value;
+         },
+         get() {
+            return (this.comments.length > 0) ? this.comments[0].content : null ;
+         }
+      },
+      errors() {
+         return this.$store.state.errorMsg;
+      }
+   },
+   methods: {
+      submitform() {
+         this.formdata['method'] = (!this.firstComment)? 'POST' : 'PATCH';
+         this.$store.dispatch('postFirstComment', this.formdata);
+      }
+   }
+}
+/*
+* TODO
+* - patch endpoint to update Content
+* - delete/reset button ?
+* - manage flash messages => specific component ?
+* - ckeditor
+*/
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -54,6 +54,10 @@ const appMessages = {
          text: "Dénomination",
          description: "Description",
          add_resources: "Ajouter des interlocuteurs",
+      },
+      comment: {
+         title: "Ajout d'une note",
+         content: "Rédigez une première note..."
       }
    }
 };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -4,7 +4,8 @@ import { getAccompanyingCourse,
    patchAccompanyingCourse, 
    postParticipation, 
    postRequestor,
-   postResource } from '../api';
+   postResource, 
+   postComment } from '../api';
 
 const debug = process.env.NODE_ENV !== 'production';
 const id = window.accompanyingCourseId;
@@ -68,6 +69,9 @@ let initPromise = getAccompanyingCourse(id)
             toggleConfidential(state, value) {
                //console.log('### mutation: toggleConfidential');
                state.accompanyingCourse.confidential = value;
+            },
+            postFirstComment(state, comment) {
+               state.accompanyingCourse.comments.push(comment);
             }
          },
          actions: {
@@ -145,6 +149,13 @@ let initPromise = getAccompanyingCourse(id)
                   commit('toggleConfidential', course.confidential);
                   resolve();
                })).catch((error) => { commit('catchError', error) });
+            },
+            postFirstComment({ commit }, payload) {
+               postComment(id, payload)
+               .then(comment => new Promise((resolve, reject) => {
+                  commit('postFirstComment', comment);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
             }
          }
       });