removeComment button replaced by link

that allows to keep it both inside <form> and in <ul class="record_actions">

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

@@ -7,39 +7,40 @@
          TODO fix errors flashbag for app component
       </div-->
       
-      <div v-if="initialComment">
-         créé par {{ initialComment.creator.text }}
-         le {{ $d(initialComment.createdAt.datetime, 'long') }}
-         <div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
-            modifié par {{ initialComment.updatedBy.text }}
-            le {{ $d(initialComment.updatedAt.datetime, 'long') }}
+      <div>
+         <div v-if="initialComment">
+            créé par {{ initialComment.creator.text }}
+            le {{ $d(initialComment.createdAt.datetime, 'long') }}
+            <div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
+               modifié par {{ initialComment.updatedBy.text }}
+               le {{ $d(initialComment.updatedAt.datetime, 'long') }}
+            </div>
          </div>
+         
+         <form @submit.prevent="submitform">
+            <label for="content">{{ $t('comment.label') }}</label>
+            <textarea 
+               name="content" 
+               v-bind:placeholder="$t('comment.content')"
+               rows="8" 
+               cols="80"
+               ckeditor="ckeditor"
+               v-model="content">
+            </textarea>
+            <ul class="record_actions">
+               <li>
+                  <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
+               </li>
+               <li v-if="initialComment !== null">
+                  <a class="sc-button bt-delete" 
+                     @click="removeComment">
+                     {{ $t('action.delete') }}
+                  </a>
+               </li>
+            </ul>
+         </form>
       </div>
       
-      <form @submit.prevent="submitform">
-         <textarea 
-            name="content" 
-            v-bind:placeholder="$t('comment.content')"
-            rows="8" 
-            cols="80"
-            ckeditor="ckeditor"
-            v-model="content">
-         </textarea>
-         <ul class="record_actions">
-            <li>
-               <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
-            </li>
-            <li id="xyz">
-            </li>
-         </ul>
-      </form>
-      
-      <button v-if="initialComment !== null"
-         class="sc-button bt-delete" 
-         @click="removeComment">
-         {{ $t('action.delete') }}
-      </button>
-      
    </div>
 </template>
 
@@ -83,9 +84,14 @@ export default {
 }
 /*
 * TODO
-* - patch endpoint to update Content
-* - delete/reset button ?
-* - manage flash messages => specific component ?
-* - ckeditor
+* - [x] delete button in ul record_actions, but not in form
+* - [ ] display updatedAt => initialComment fetch PATCH content changes MUST NOT change object id !!
+* - [ ] ckeditor integration
 */
 </script>
+
+<style lang="scss" scoped>
+   div.vue-component > div {
+      margin: 1em;
+   }
+</style>

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

@@ -64,7 +64,8 @@ const appMessages = {
          add_resources: "Ajouter des interlocuteurs",
       },
       comment: {
-         title: "Ajout d'une note",
+         title: "Observations",
+         label: "Ajout d'une première note",
          content: "Rédigez une première note..."
       },
       confirm: {