add goals to work, and add results for each goal

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

@@ -27,8 +27,7 @@
         <div><h3>Résultats</h3></div>
       </div>
 
-      <!-- résultats sans objectifs -->
-
+      <!-- results which are not attached to an objective -->
       <div v-if="hasResultsForAction">
         <div>
           {{ $t('results_without_objective') }}
@@ -37,6 +36,38 @@
           <add-result :availableResults="resultsForAction" destination="action"></add-result>  
         </div>
       </div> 
+
+      <!-- results which **are** attached to an objective -->
+      <div v-for="g in goalsPicked">
+        <div>
+          <span @click="removeGoal(g)">
+            <i class="fa fa-times"></i>
+            {{ g.title.fr }}
+          </span> 
+        </div>
+        <div>
+          <add-result destination="goal" :goal="g"></add-result>  
+        </div>
+      </div>
+
+      <!-- box to add goal -->
+      <div class="add_goal">
+        <div>
+          <div v-if="showAddObjective">
+            <ul>
+              <li v-for="g in availableForCheckGoal" @click="addGoal(g)">
+                <i class="fa fa-plus"></i>
+                {{ g.title.fr }} 
+              </li>
+            </ul>
+          </div>
+          <div @click="toggleAddObjective">
+            <i class="fa fa-plus"></i>
+            {{ $t('add_objective') }}
+          </div>
+        </div>
+        <div><!-- empty for results --></div>
+      </div>
     </div>
   </div>
 
@@ -106,12 +137,14 @@ export default {
   data() {
     return {
       editor: ClassicEditor,
+      showAddObjective: false,
     };
   },
   computed: {
     ...mapState([
       'work',
       'resultsForAction',
+      'goalsPicked',
     ]),
     ...mapGetters([
       'hasResultsForAction',
@@ -142,6 +175,26 @@ export default {
         this.$store.mutate('setNote', note);
       }
     },
+    availableForCheckGoal() {
+      let pickedIds = this.$store.state.goalsPicked.map(g => g.id);
+      console.log('pickeds goals id', pickedIds);
+      console.log(this.$store.state.goalsForAction);
+
+      return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
+    },
+  },
+  methods: {
+    toggleAddObjective() {
+      this.showAddObjective = !this.showAddObjective;
+    },
+    addGoal(g) {
+      console.log('add Goal', g);
+      this.$store.commit('addGoal', g);
+    },
+    removeGoal(g) {
+      console.log('remove goal', g);
+      this.$store.commit('removeGoal', g);
+    },
   }
 };