add/remove evaluation from evaluation list

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

@@ -85,25 +85,22 @@
          </div>
 
          <!-- list evaluations -->
-         <div v-if="hasEvaluationsForAction">
+         <add-evaluation v-if="hasEvaluationsForAction"></add-evaluation>
-            <add-evaluation
-               :availableEvaluations="evaluationsForAction">
-            </add-evaluation>
-         </div>
 
          <!-- box to add new evaluation -->
          <div class="add_evaluation">
             <div v-if="showAddEvaluation">
-               <new-evaluation>
+               <p>{{ $t('available_evaluations_text') }}</p>
-               </new-evaluation>
+               <ul class="list-evaluations">
+                  <li v-for="e in availableForCheckEvaluation" class="badge bg-primary" @click="addEvaluation(e)">
+                     <i class="fa fa-plus"></i>
+                     {{ e.title.fr }}
+                  </li>
+               </ul>
             </div>
             <ul class="record_actions">
                <li>
-                  <button
+                  <button :title="$t('add_an_evaluation')" class="btn btn-create" @click="toggleAddEvaluation"></button>
-                     :title="$t('add_an_evaluation')"
-                     class="btn btn-create"
-                     @click="toggleAddEvaluation">
-                  </button>
                </li>
             </ul>
          </div>
@@ -222,7 +219,7 @@ import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import AddResult from './components/AddResult.vue';
 import AddEvaluation from './components/AddEvaluation.vue';
-import NewEvaluation from './components/NewEvaluation.vue';
+//import FormEvaluation from './components/FormEvaluation.vue';
 import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
@@ -254,6 +251,7 @@ const i18n = {
          add_thirdparties: "Ajouter des tiers",
          choose_thirdparties: "Choisir des tiers",
          fix_these_errors: "Veuillez corriger les erreurs suivantes :",
+         available_evaluations_text: "Évaluations disponibles pour ajout :",
       }
    }
 };
@@ -264,7 +262,7 @@ export default {
       ckeditor: CKEditor.component,
       AddResult,
       AddEvaluation,
-      NewEvaluation,
+      //FormEvaluation,
       AddPersons,
       Person,
       ShowAddress,
@@ -350,6 +348,12 @@ export default {
 
          return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
       },
+      availableForCheckEvaluation() {
+         console.log('evaluationsPicked', this.$store.state.evaluationsPicked);
+         console.log('evaluationsForAction', this.$store.state.evaluationsForAction);
+         let pickedIds = this.$store.state.evaluationsPicked.map(e => e.evaluation.id);
+         return this.$store.state.evaluationsForAction.filter(e => !pickedIds.includes(e.id));
+      },
       personsPicked: {
          get() {
             let s = this.$store.state.personsPicked.map(p => p.id);
@@ -375,6 +379,10 @@ export default {
          //console.log('remove goal', g);
          this.$store.commit('removeGoal', g);
       },
+      addEvaluation(e) {
+         console.log('add Evaluation', e);
+         this.$store.commit('addEvaluation', e);
+      },
       toggleAddEvaluation() {
          this.showAddEvaluation = !this.showAddEvaluation;
       },
@@ -487,40 +495,12 @@ export default {
                   $gray-100 10px,
                   $gray-100 20px
             );
-
             text-align: center;
             font-weight: 700;
             padding-top: 1.5rem;
          }
       }
 
-      ul.list-objectives {
-         list-style-type: none;
-         padding: 0;
-
-         li {
-            margin: 0.5rem;
-         }
-      }
-
-      div.objective-title {
-         font-weight: bold;
-         /*
-         margin-top: 1rem;
-         font-size: 1.5rem;
-         text-align: center;
-         */
-
-         i.fa {
-            padding: 0.25rem;
-         }
-
-         i.fa-times {
-            background-color: $red;
-            color: $white;
-         }
-      }
-
       li.badge, div.badge {
          padding-bottom: 0;
          padding-top: 0;
@@ -533,20 +513,6 @@ export default {
          i.fa-plus {
             background-color: $green;
          }
-
-      }
-   }
-
-   #objectives, #evaluations {
-      padding: 0;
-
-      & > div.title {
-         background-color: $gray-200;
-         color: $gray-700;
-
-         h3 {
-            text-align: center;
-         }
       }
    }
 
@@ -574,39 +540,70 @@ export default {
    #errors {
       grid-area: errors;
    }
-}
 
-button.hide {
+   #objectives, #evaluations {
-   background-color: $primary;
+      padding: 0;
-}
 
-ul.list-results,
+      & > div.title {
-ul.list-evaluations {
+         background-color: $gray-200;
-   list-style-type: none;
+         color: $gray-700;
-   padding: 0;
 
-   li {
+         h3 {
-      margin: 0.5rem;
+            text-align: center;
-   }
+         }
-
-   li.badge {
-      padding-bottom: 0;
-      padding-top: 0;
-      padding-left: 0;
-
-      i.fa {
-         /*border-radius: 0.25rem; */
-         padding: 0.25rem;
       }
 
-      i.fa-plus {
+      ul.list-evaluations, ul.list-results {
-         background-color: $green;
+         list-style-type: none;
+         padding: 0;
+
+         li {
+            margin: 0.5rem;
+         }
+
+         li.badge {
+            padding-bottom: 0;
+            padding-top: 0;
+            padding-left: 0;
+
+            i.fa {
+               /*border-radius: 0.25rem; */
+               padding: 0.25rem;
+            }
+
+            i.fa-plus {
+               background-color: $green;
+            }
+
+            i.fa-times {
+               background-color: $red;
+               color: $white;
+            }
+         }
       }
 
-      i.fa-times {
+      ul.list-evaluations, ul.list-objectives {
-         background-color: $red;
+         list-style-type: none;
-         color: $white;
+         padding: 0;
+
+         li {
+            margin: 0.5rem;
+         }
+      }
+
+      div.evaluation-title, div.objective-title {
+         font-weight: bold;
+
+         i.fa {
+            padding: 0.25rem;
+         }
+
+         i.fa-times {
+            background-color: $red;
+            color: $white;
+         }
       }
    }
 }
+
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue

@@ -1,35 +1,13 @@
 <template>
-   affiche les évaluations
+   <div v-if="hasEvaluation">
-   <div v-if="hasEvaluation" class="addEvaluation">
 
-      <p v-if="pickedEvaluations.length === 0" class="chill-no-data-statement">
+      <div>
-         {{ $t('no_evaluation_associated') }}
+         <div v-for="e in pickedEvaluations" class="evaluation-title" @click="removeEvaluation(e)">
-      </p>
-
-      <ul class="list-evaluations">
-         <li v-for="e in pickedEvaluations" class="badge bg-primary" @click="removeEvaluation(e)">
             <i class="fa fa-times"></i>
-            {{ e.id }}
+            {{ e.evaluation.title.fr }}
-         </li>
+         </div>
-         <template v-if="isExpanded">
-            <li v-for="e in availableForCheckEvaluations" class="badge bg-primary" @click="addEvaluation(e)">
-               <i class="fa fa-plus"></i>
-               {{ e.id }}
-            </li>
-         </template>
-      </ul>
-
-      <ul class="record_actions">
-         <li>
-            actions
-         </li>
-      </ul>
-
-   </div>
-   <div v-if="!hasEvaluation" class="noEvaluation">
-      <div class="chill-no-data-statement">
-         {{ $t('evaluation_has_no_evaluation') }}
       </div>
+
    </div>
 </template>
 
@@ -46,40 +24,23 @@ const i18n = {
 
 export default {
    name: "AddEvaluation",
-   props: ['availableEvaluations'],
+   props: [],
    i18n,
    data() {
       return {
-         isExpanded: false,
       };
    },
    computed: {
       hasEvaluation() {
-         return this.$store.state.evaluationsForAction.length > 0;
+         return this.$store.state.evaluationsPicked.length > 0;
       },
       pickedEvaluations() {
          return this.$store.state.evaluationsPicked;
-      },
-      availableForCheckEvaluations() {
-
-         let pickedIds = this.$store.state.evaluationsPicked.map(e => e.id);
-         ////console.log('picked ids', pickedIds);
-
-         return this.$store.state.evaluationsForAction.filter(e => !pickedIds.includes(e.id));
       }
    },
    methods: {
-      toggleSelect() {
-         this.isExpanded = !this.isExpanded;
-      },
-      addEvaluation(e) {
-         ////console.log('addEvaluation', e);
-         this.$store.commit('addEvaluationPicked', e);
-         return;
-      },
       removeEvaluation(e) {
-         ////console.log('removeEvaluation', e);
+         this.$store.commit('removeEvaluation', e);
-         this.$store.commit('removeEvaluationPicked', e);
          return;
       }
    }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue

@@ -1,4 +1,6 @@
 <template>
+   affiche le formulaire
+   <!--
    <div>
       <h3>
          {{ $t('evaluation_title') }}
@@ -19,6 +21,7 @@
 {{ $t('evaluation_add_a_document') }}
 {{ $t('evaluation_add') }}
 </pre>
+   -->
 </template>
 
 <script>

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

@@ -5,7 +5,7 @@ import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
 
 const debug = process.env.NODE_ENV !== 'production';
 
-//console.log(window.accompanyingCourseWork);
+console.log('acw', window.accompanyingCourseWork);
 
 const store = createStore({
   strict: debug,
@@ -159,6 +159,18 @@ const store = createStore({
 
       found.results = found.results.filter(r => r.id !== result.id);
     },
+    addEvaluation(state, evaluation) {
+      let e = {
+        type: "accompanying_period_work_evaluation",
+        evaluation: evaluation,
+        note: '',
+        results: []
+      }
+      state.evaluationsPicked.push(e);
+    },
+    removeEvaluation(state, evaluation) {
+      state.evaluationsPicked = state.evaluationsPicked.filter(e => e.id !== evaluation.id);
+    },
     setPersonsPickedIds(state, ids) {
       //console.log('persons ids', ids);
       state.personsPicked = state.personsReachables