v-for loop on add-evaluation subcomponent

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

@@ -85,7 +85,11 @@
          </div>
 
          <!-- list evaluations -->
-         <add-evaluation v-if="hasEvaluationsForAction"></add-evaluation>
+         <add-evaluation
+            v-for="e in pickedEvaluations"
+            v-bind:key="e.id"
+            v-bind:evaluation="e">
+         </add-evaluation>
 
          <!-- box to add new evaluation -->
          <div class="add_evaluation">
@@ -309,7 +313,6 @@ export default {
       ]),
       ...mapGetters([
          'hasResultsForAction',
-         'hasEvaluationsForAction',
          'hasHandlingThirdParty',
          'hasThirdParties',
       ]),
@@ -352,6 +355,9 @@ export default {
          let pickedIds = this.$store.state.evaluationsPicked.map(e => e.evaluation.id);
          return this.$store.state.evaluationsForAction.filter(e => !pickedIds.includes(e.id));
       },
+      pickedEvaluations() {
+         return this.$store.state.evaluationsPicked;
+      },
       personsPicked: {
          get() {
             let s = this.$store.state.personsPicked.map(p => p.id);

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

@@ -1,32 +1,32 @@
 <template>
-   <div v-for="e in pickedEvaluations">
+   <div>
       <div class="item-title" @click="removeEvaluation(e)">
          <i class="fa fa-fw fa-times"></i>
-         {{ e.evaluation.title.fr }}
+         {{ evaluation.evaluation.title.fr }}
       </div>
       <div v-if="!editEvaluation">
          <dl class="item-details definition-inline">
 
-            <dt v-if="e.startDate">{{ $t('startDate') }} :</dt>
-            <dd v-if="e.startDate">{{ $d(e.startDate.datetime, 'short') }}</dd>
+            <dt v-if="evaluation.startDate">{{ $t('startDate') }} :</dt>
+            <dd v-if="evaluation.startDate">{{ $d(evaluation.startDate.datetime, 'short') }}</dd>
 
-            <dt v-if="e.endDate">{{ $t('endDate') }} :</dt>
-            <dd v-if="e.endDate">{{ $d(e.endDate.datetime, 'short') }}</dd>
+            <dt v-if="evaluation.endDate">{{ $t('endDate') }} :</dt>
+            <dd v-if="evaluation.endDate">{{ $d(evaluation.endDate.datetime, 'short') }}</dd>
 
-            <dt v-if="e.maxDate">{{ $t('maxDate') }} :</dt>
-            <dd v-if="e.maxDate">{{ $d(e.maxDate.datetime, 'short') }}</dd>
+            <dt v-if="evaluation.maxDate">{{ $t('maxDate') }} :</dt>
+            <dd v-if="evaluation.maxDate">{{ $d(evaluation.maxDate.datetime, 'short') }}</dd>
 
-            <dt v-if="e.warningInterval">{{ $t('warningInterval') }} :</dt>
-            <dd v-if="e.warningInterval">{{ e.warningInterval }}</dd>
+            <dt v-if="evaluation.warningInterval">{{ $t('warningInterval') }} :</dt>
+            <dd v-if="evaluation.warningInterval">{{ evaluation.warningInterval }}</dd>
 
-            <dt v-if="e.documents && e.documents.length > 0">{{ $t('documents') }} :</dt>
-            <dd v-if="e.documents && e.documents.length > 0">{{ e.documents.length }}</dd>
+            <dt v-if="evaluation.documents && evaluation.documents.length > 0">{{ $t('documents') }} :</dt>
+            <dd v-if="evaluation.documents && evaluation.documents.length > 0">{{ evaluation.documents.length }}</dd>
 
          </dl>
          <dl class="item-details">
 
-            <dt v-if="e.comment">{{ $t('comment') }} :</dt>
-            <dd v-if="e.comment">{{ e.comment }}</dd>
+            <dt v-if="evaluation.comment">{{ $t('comment') }} :</dt>
+            <dd v-if="evaluation.comment">{{ evaluation.comment }}</dd>
 
          </dl>
          <ul class="record_actions">
@@ -36,7 +36,7 @@
          </ul>
       </div>
       <div v-if="editEvaluation">
-         <form-evaluation ref="FormEvaluation" :key="e.id" :evaluation="e"></form-evaluation>
+         <form-evaluation ref="FormEvaluation" :key="evaluation.id" :evaluation="evaluation"></form-evaluation>
          <ul class="record_actions">
             <li>
                <button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
@@ -70,7 +70,7 @@ export default {
    components: {
       FormEvaluation
    },
-   props: [],
+   props: ['evaluation'],
    i18n,
    data() {
       return {

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

@@ -47,9 +47,6 @@ const store = createStore({
 
       return found === undefined ? [] : found.results;
     },
-    hasEvaluationsForAction(state) {
-      return state.evaluationsForAction.length > 0;
-    },
     hasHandlingThirdParty(state) {
       return state.handlingThirdParty !== null;
     },