prepare subcomponents for evaluation, share addResult styles

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

@@ -1,11 +1,88 @@
 <template>
-boum
+   affiche les évaluations
+   <div class="addEvaluation" v-if="hasEvaluation">
+
+      <p class="chill-no-data-statement" v-if="pickedEvaluations.length === 0">
+         {{ $t('no_evaluation_associated') }}
+      </p>
+
+      <ul class="list-evaluations">
+         <li v-for="e in pickedEvaluations" @click="removeEvaluation(e)" class="badge bg-primary">
+            <i class="fa fa-times"></i>
+            {{ e.id }}
+         </li>
+         <template v-if="isExpanded">
+            <li v-for="e in availableForCheckEvaluations" @click="addEvaluation(e)" class="badge bg-primary">
+               <i class="fa fa-plus"></i>
+               {{ e.id }}
+            </li>
+         </template>
+      </ul>
+
+      <ul class="record_actions">
+         <li>
+            actions
+         </li>
+      </ul>
+
+   </div>
+   <div class="noEvaluation" v-if="!hasEvaluation">
+      <div class="chill-no-data-statement">
+         {{ $t('evaluation_has_no_evaluation') }}
+      </div>
+   </div>
 </template>
 
 <script>
+const i18n = {
+   messages: {
+      fr: {
+         no_evaluation_associated: "Aucune évaluation associée",
+         add_an_evaluation: "Évaluations disponibles",
+         evaluation_has_no_evaluation: "Aucune évaluation disponible",
+      }
+   }
+};
+
 export default {
    name: "AddEvaluation",
-   props: ['destination', 'availableEvaluations'],
+   props: ['availableEvaluations'],
+   i18n,
+   data() {
+      return {
+         isExpanded: false,
+      };
+   },
+   computed: {
+      hasEvaluation() {
+         return this.$store.state.evaluationsForAction.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('removeEvaluationPicked', e);
+         return;
+      }
+   }
 }
 </script>
 

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

@@ -36,45 +36,7 @@
   </div>
 </template>
 
-<style lang="scss">
-
-button.hide {
-  background-color: rgb(51, 77, 92);
-}
-
-ul.list-results {
-  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;
-    }
-  }
-}
-
-</style>
-
 <script>
-
 const i18n = {
   messages: {
     fr: {

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

@@ -0,0 +1,10 @@
+<template>
+   le formulaire d'ajout
+</template>
+
+<script>
+export default {
+   name: "NewEvaluation",
+   props: [],
+}
+</script>