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() {

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="addResult">
+    <ul>
+      <li v-for="r in pickedResults" @click="removeResult(r)">
+        <i class="fa fa-times"></i>
+        {{ r.title.fr }}
+      </li>
+    </ul>
+    <div v-if="isExpanded">
+      <p>pick result</p>
+
+      <ul>
+        <li v-for="r in availableForCheckResults" @click="addResult(r)">
+          <i class="fa fa-plus"></i>
+          {{ r.title.fr }}
+        </li>
+      </ul>
+    </div>
+    <button @click="toggleSelect">
+      {{ $t('add_a_result') }}
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "AddResult",
+  props: [ 'availableResults', 'destination' ],
+  data() {
+    return {
+      isExpanded: false,
+    };
+  },
+  computed: {
+    pickedResults() {
+      console.log('get checked');
+      console.log('this.destination', this.destination);
+      if (this.destination === 'action') {
+        return this.$store.state.resultsPicked;
+      }
+
+      throw Error(`this.destination is not implemented: ${this.destination}`);
+    },
+    availableForCheckResults() {
+      console.log('availableForCheckResults');
+      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));
+      }
+
+      console.log('destination not implemented', this.destination);
+    }
+  },
+  methods: {
+    toggleSelect() {
+      this.isExpanded = !this.isExpanded; 
+    },
+    addResult(r) {
+      console.log('addResult', r);
+      if (this.destination === 'action') {
+        this.$store.commit('addResultPicked', r);
+      }
+    },
+    removeResult(r) {
+      console.log('removeresult', r);
+      if (this.destination === 'action') {
+        this.$store.commit('removeResultPicked', r);
+      }
+    }
+  }
+}
+
+</script>

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

@@ -26,6 +26,9 @@ const store = createStore({
     socialAction(state) {
       return state.work.socialAction;
     },
+    hasResultsForAction(state) {
+      return state.resultsForAction.length > 0;
+    }
   },
   mutations: {
     setStartDate(state, date) {
@@ -48,6 +51,12 @@ const store = createStore({
         state.resultsForGoal.push(r);
       }
     },
+    addResultPicked(state, result) {
+      state.resultsPicked.push(result);
+    },
+    removeResultPicked(state, result) {
+      state.resultsPicked = state.resultsPicked.filter(r => r.id !== result.id);
+    },
     addErrors(state, errors) {
       console.log('handling errors', errors);
       for (let i in errors) {