prepare subcomponents for evaluation, share addResult styles

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="workEditor">
+  <div id="workEditor" class="my-4">
 
     <div id="title">
       <label class="action_title_label">{{ $t('action_title') }}</label>
@@ -83,22 +83,28 @@
         <div><h3>{{ $t('Evaluations') }}</h3></div>
       </div>
 
-      <!-- results which are not attached to an objective -->
+      <!-- list evaluations -->
       <div v-if="hasEvaluationsForAction">
-        <add-evaluation :availableEvaluations="evaluationsForAction" destination="action"></add-evaluation>
+        <add-evaluation
+          :availableEvaluations="evaluationsForAction">
+        </add-evaluation>
       </div>
 
-      <!-- box to add evaluation -->
+      <!-- box to add new evaluation -->
       <div class="add_evaluation">
         <div v-if="showAddEvaluation">
-           bim
+          <new-evaluation>
+          </new-evaluation>
         </div>
         <ul class="record_actions">
           <li>
-            <button @click="toggleAddEvaluation" class="btn btn-create" :title="$t('add_an_evaluation')"></button>
+            <button
+              class="btn btn-create"
+              @click="toggleAddEvaluation"
+              :title="$t('add_an_evaluation')">
+            </button>
           </li>
         </ul>
-        <div><!-- empty for results --></div>
       </div>
     </div>
 
@@ -206,167 +212,6 @@
   </ul>
 </template>
 
-<style lang="scss">
-@import '~ChillMainAssets/module/bootstrap/shared';
-@import '~ChillMainAssets/chill/scss/mixins';
-
-#workEditor {
-  display: grid;
-  grid-template-areas:
-    "title title"
-    "startDate endDate"
-    "comment comment"
-    "objectives objectives"
-    "evaluations evaluations"
-    "persons persons"
-    "handling handling"
-    "tparties tparties"
-    "errors errors"
-    ;
-
-  grid-template-columns: 50%;
-  column-gap: 0rem;
-
-  & > div {
-     @include border-collapse;
-     padding: 1em;
-  }
-
-  #title {
-    grid-area: title;
-
-    .action_title_label {
-      margin-bottom: 0;
-    }
-    .action_title {
-      margin-top: 0;
-      font-weight: bold;
-      font-size: 1.5rem;
-    }
-  }
-  #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%;
-      column-gap: 0rem;
-
-      & > div {
-        @include border-collapse;
-        padding: 1em;
-
-        &:nth-child(1) {
-          grid-area: obj;
-        }
-
-        &:nth-child(2) {
-          grid-area: res;
-        }
-      }
-
-      & > div.results_without_objective {
-        background: repeating-linear-gradient(
-        45deg,
-        $gray-500,
-        $gray-500 10px,
-        $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;
-      padding-left: 0;
-
-      i.fa {
-        padding: 0.25rem;
-      }
-
-      i.fa-plus {
-        background-color: $green;
-      }
-
-    }
-  }
-  #objectives, #evaluations {
-    padding: 0;
-
-    & > div.title {
-      background-color: $gray-200;
-      color: $gray-700;
-
-      h3 {
-        text-align: center;
-      }
-    }
-  }
-  #evaluations {
-    grid-area: evaluations;
-    & > div {
-      @include border-collapse;
-      padding: 1em;
-    }
-  }
-  #persons {
-    grid-area: persons;
-  }
-  #handlingThirdParty {
-    grid-area: handling;
-  }
-  #thirdParties {
-    grid-area: tparties;
-  }
-  #errors {
-    grid-area: errors;
-  }
-}
-
-</style>
-
 <script>
 import { mapState, mapGetters, } from 'vuex';
 import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
@@ -374,6 +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 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';
@@ -415,6 +261,7 @@ export default {
     ckeditor: CKEditor.component,
     AddResult,
     AddEvaluation,
+    NewEvaluation,
     AddPersons,
     Person,
     ShowAddress,
@@ -555,3 +402,196 @@ export default {
 };
 
 </script>
+
+<style lang="scss">
+@import '~ChillMainAssets/module/bootstrap/shared';
+@import '~ChillMainAssets/chill/scss/mixins';
+
+#workEditor {
+   display: grid;
+   grid-template-areas:
+    "title title"
+    "startDate endDate"
+    "comment comment"
+    "objectives objectives"
+    "evaluations evaluations"
+    "persons persons"
+    "handling handling"
+    "tparties tparties"
+    "errors errors";
+
+   grid-template-columns: 50%;
+   column-gap: 0rem;
+
+   & > div {
+      @include border-collapse;
+      padding: 1em;
+   }
+
+   #title {
+      grid-area: title;
+
+      .action_title_label {
+         margin-bottom: 0;
+      }
+      .action_title {
+         margin-top: 0;
+         font-weight: bold;
+         font-size: 1.5rem;
+      }
+   }
+   #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%;
+         column-gap: 0rem;
+
+         & > div {
+            @include border-collapse;
+            padding: 1em;
+
+            &:nth-child(1) {
+               grid-area: obj;
+            }
+
+            &:nth-child(2) {
+               grid-area: res;
+            }
+         }
+
+         & > div.results_without_objective {
+            background: repeating-linear-gradient(
+                  45deg,
+                  $gray-500,
+                  $gray-500 10px,
+                  $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;
+         padding-left: 0;
+
+         i.fa {
+            padding: 0.25rem;
+         }
+
+         i.fa-plus {
+            background-color: $green;
+         }
+
+      }
+   }
+   #objectives, #evaluations {
+      padding: 0;
+
+      & > div.title {
+         background-color: $gray-200;
+         color: $gray-700;
+
+         h3 {
+            text-align: center;
+         }
+      }
+   }
+   #evaluations {
+      grid-area: evaluations;
+      & > div {
+         @include border-collapse;
+         padding: 1em;
+      }
+   }
+   #persons {
+      grid-area: persons;
+   }
+   #handlingThirdParty {
+      grid-area: handling;
+   }
+   #thirdParties {
+      grid-area: tparties;
+   }
+   #errors {
+      grid-area: errors;
+   }
+}
+
+button.hide {
+   background-color: $primary;
+}
+
+ul.list-results,
+ul.list-evaluations {
+   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>

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>

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

@@ -16,10 +16,11 @@ const store = createStore({
       ISOToDatetime(window.accompanyingCourseWork.endDate.datetime) : null),
     note: window.accompanyingCourseWork.note,
     goalsPicked: window.accompanyingCourseWork.goals,
+    goalsForAction: [],
     resultsPicked: window.accompanyingCourseWork.results,
     resultsForAction: [],
-    goalsForAction: [],
     resultsForGoal: [],
+    evaluationsPicked: window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations,
     evaluationsForAction: [],
     personsPicked: window.accompanyingCourseWork.persons,
     personsReachables: window.accompanyingCourseWork.accompanyingPeriod.participations.filter(p => p.endDate == null)