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);
+    },
   }
 };
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/_components/AddResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="addResult">
+  <div class="addResult" v-if="hasResult">
     <ul>
       <li v-for="r in pickedResults" @click="removeResult(r)">
         <i class="fa fa-times"></i>
@@ -20,38 +20,62 @@
       {{ $t('add_a_result') }}
     </button>
   </div>
+  <div class="noResult" v-if="!hasResult">
+    <div>
+      {{ $t('goal_has_ho_result') }}
+    </div>
+  </div>
 </template>
 
 <script>
 
 export default {
   name: "AddResult",
-  props: [ 'availableResults', 'destination' ],
+  props: [ 'destination', 'goal' ],
   data() {
     return {
       isExpanded: false,
     };
   },
   computed: {
+    hasResult() {
+      if (this.destination === 'action') {
+        return this.$store.state.resultsForAction.length > 0;
+      } else if (this.destination === 'goal') {
+        return this.$store.getters.resultsForGoal(this.goal).length > 0;
+      }
+
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    },
     pickedResults() {
       console.log('get checked');
       console.log('this.destination', this.destination);
+      console.log('this.goal', this.goal);
       if (this.destination === 'action') {
         return this.$store.state.resultsPicked;
+      } else if (this.destination === 'goal') {
+        return this.$store.getters.resultsPickedForGoal(this.goal);
       }
 
       throw Error(`this.destination is not implemented: ${this.destination}`);
     },
     availableForCheckResults() {
       console.log('availableForCheckResults');
+      console.log('this.destination', this.destination);
+      console.log('this.goal', this.goal);
       if (this.destination === 'action') {
         let pickedIds = this.$store.state.resultsPicked.map(r => r.id);
         console.log('picked ids', pickedIds);
 
         return this.$store.state.resultsForAction.filter(r => !pickedIds.includes(r.id));
+      } else if (this.destination === 'goal') {
+        console.log('results picked for goal', this.$store.getters.resultsPickedForGoal(this.goal));
+        let pickedIds = this.$store.getters.resultsPickedForGoal(this.goal).map(r => r.id);
+
+        return this.$store.getters.resultsForGoal(this.goal).filter(r => !pickedIds.includes(r.id));
       }
 
-      console.log('destination not implemented', this.destination);
+      throw Error(`this.destination is not implemented: ${this.destination}`);
     }
   },
   methods: {
@@ -62,13 +86,23 @@ export default {
       console.log('addResult', r);
       if (this.destination === 'action') {
         this.$store.commit('addResultPicked', r);
+        return;
+      } else if (this.destination === 'goal') {
+        this.$store.commit('addResultForGoalPicked', { goal: this.goal, result: r });
+        return;
       }
+      throw Error(`this.destination is not implemented: ${this.destination}`);
     },
     removeResult(r) {
       console.log('removeresult', r);
       if (this.destination === 'action') {
         this.$store.commit('removeResultPicked', r);
+        return;
+      } else if (this.destination === 'goal') {
+        this.$store.commit('removeResultForGoalPicked', { goal: this.goal, result: r });
+        return;
       }
+      throw Error(`this.destination is not implemented: ${this.destination}`);
     }
   }
 }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js

@@ -28,6 +28,16 @@ const store = createStore({
     },
     hasResultsForAction(state) {
       return state.resultsForAction.length > 0;
+    },
+    resultsForGoal: (state) => (goal) => {
+      let founds = state.resultsForGoal.filter(r => r.goalId === goal.id);
+
+      return founds === undefined ? [] : founds;
+    },
+    resultsPickedForGoal: (state) => (goal) => {
+      let found = state.goalsPicked.find(g => g.id === goal.id);
+      
+      return found === undefined ? [] : found.results;
     }
   },
   mutations: {
@@ -43,7 +53,7 @@ const store = createStore({
     },
     setResultsForGoal(state, { goal, results }) {
       console.log('set results for goal', results);
-      state.goalsForAction = goal;
+      state.goalsForAction.push(goal);
       for (let i in results) {
         let r = results[i];
         r.goalId = goal.id;
@@ -57,6 +67,33 @@ const store = createStore({
     removeResultPicked(state, result) {
       state.resultsPicked = state.resultsPicked.filter(r => r.id !== result.id);
     },
+    addGoal(state, goal) {
+      let g = goal;
+      // initialize results to empty array
+      g.results = []
+      state.goalsPicked.push(g);
+    },
+    removeGoal(state, goal) {
+      state.goalsPicked = state.goalsPicked.filter(g => g.id !== goal.id);
+    },
+    addResultForGoalPicked(state, { goal, result}) {
+      let found = state.goalsPicked.find(g => g.id === goal.id);
+
+      if (found === undefined) {
+        return;
+      }
+
+      found.results.push(result);
+    },
+    removeResultForGoalPicked(state, { goal, result}) {
+      let found = state.goalsPicked.find(g => g.id === goal.id);
+
+      if (found === undefined) {
+        return;
+      }
+
+      found.results = found.results.filter(r => r.id !== result.id);
+    },
     addErrors(state, errors) {
       console.log('handling errors', errors);
       for (let i in errors) {