add results for actions in course edit form

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

@@ -2,30 +2,41 @@
   <h1>Hello</h1>
 
   <div id="workEditor">
-    <div>
+    <div id="title">
       <label>{{ $t('action_title') }}</label>
       <p>{{ work.socialAction.text }}</p>
     </div>
-    <div>
+    <div id="startDate">
       <label>{{ $t('startDate') }}</label>
       <input type="date" v-model="startDate" />
     </div>
-    <div>
+    <div id="endDate">
       <label>{{ $t('endDate') }}</label>
       <input type="date" v-model="endDate" />
     </div>
-    <div>
+    <div id="comment">
       <ckeditor 
         :editor="editor"
         v-model="note"
         tag-name="textarea"
       ></ckeditor>
     </div>
-    <div class="objectives_list">
+    <div id="objectives" class="objectives_list">
       <div class="title" aria="hidden">
         <div><h3>Objectifs</h3></div>
         <div><h3>Résultats</h3></div>
       </div>
+
+      <!-- résultats sans objectifs -->
+
+      <div v-if="hasResultsForAction">
+        <div>
+          {{ $t('results_without_objective') }}
+        </div>
+        <div>
+          <add-result :availableResults="resultsForAction" destination="action"></add-result>  
+        </div>
+      </div> 
     </div>
   </div>
 
@@ -33,20 +44,64 @@
 
 <style lang="scss">
 
+#workEditor {
+  display: grid;
+  grid-template-areas: 
+    "title title"
+    "startDate endDate"
+    "comment comment"
+    "objectives objectives"
+    ;
+  
+  #title {
+    grid-area: title;
+  }
+  #startDate {
+    grid-area: startDate;
+  }
+  #endDate {
+    grid-area: endDate;
+  }
+  #comment {
+    grid-area: comment;
+  }
+  #objectives {
+    grid-area: objectives;
+
+    > div {
+      display: grid;
+      grid-template-areas: "obj res";
+      grid-template-columns: "50% 50%";
+      column-gap: 1rem;
+
+      > div {
+        &:nth-child(1) {
+          grid-area: obj;
+        }
+
+        &:nth-child(2) {
+          grid-area: res;
+        }
+      }
+    }
+  }
+}
 
 </style>
 
 <script>
 
-import { mapState } from 'vuex';
+import { mapState, mapGetters, } from 'vuex';
 import { dateToISO, ISOToDatetime } from 'ChillMainAssets/js/date.js';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/modules/ckeditor5/index.js';
+import AddResult from './_components/AddResult.vue';
 
 export default {
   name: 'App',
   components: {
     ckeditor: CKEditor.component,
+    AddResult,
   },
   data() {
     return {
@@ -55,7 +110,11 @@ export default {
   },
   computed: {
     ...mapState([
-      'work'
+      'work',
+      'resultsForAction',
+    ]),
+    ...mapGetters([
+      'hasResultsForAction',
     ]),
     startDate: {
       get() {