From 3156706c2b6b8c8768fd9594e0aae3db25d9c2a9 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 9 Aug 2021 16:22:28 +0200
Subject: [PATCH] vue accompanyingcourse_work: prepare evaluations, +
 translations chains + styles border

---
 .../vuejs/AccompanyingCourseWorkEdit/App.vue  | 187 ++++++++++++------
 .../components/AddEvaluation.vue              |  14 ++
 .../components/AddResult.vue                  |   4 +-
 .../vuejs/AccompanyingCourseWorkEdit/store.js |   6 +-
 .../AccompanyingCourseWork/edit.html.twig     |   4 +-
 5 files changed, 149 insertions(+), 66 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index 47feed87e..4ab929c02 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -1,29 +1,34 @@
 <template>
   <div id="workEditor">
+
     <div id="title">
       <label class="action_title_label">{{ $t('action_title') }}</label>
       <p class="action_title">{{ work.socialAction.text }}</p>
     </div>
+
     <div id="startDate">
       <label>{{ $t('startDate') }}</label>
       <input type="date" v-model="startDate" />
     </div>
+
     <div id="endDate">
       <label>{{ $t('endDate') }}</label>
       <input type="date" v-model="endDate" />
     </div>
+
     <div id="comment">
-      <label>Commentaire</label>
+      <label>{{ $t('comments') }}</label>
       <ckeditor
         :editor="editor"
         v-model="note"
         tag-name="textarea"
       ></ckeditor>
     </div>
+
     <div id="objectives" class="objectives_list">
       <div class="title" aria="hidden">
-        <div><h3>Motifs - objectifs - dispositifs</h3></div>
-        <div><h3>Orientations - résultats</h3></div>
+        <div><h3>{{ $t('goals_title') }}</h3></div>
+        <div><h3>{{ $t('results_title') }}</h3></div>
       </div>
 
       <!-- results which are not attached to an objective -->
@@ -54,7 +59,7 @@
         <div>
           <div v-if="showAddObjective">
 
-            <p>Motifs, objectifs et dispositifs disponibles pour ajout&nbsp;:</p>
+            <p>{{ $t('available_goals_text')}}</p>
 
             <ul class="list-objectives">
               <li v-for="g in availableForCheckGoal" @click="addGoal(g)" class="badge bg-primary">
@@ -65,9 +70,7 @@
           </div>
           <ul class="record_actions">
             <li>
-              <button @click="toggleAddObjective" class="btn btn-create">
-                Ajouter un objectif
-              </button>
+              <button @click="toggleAddObjective" class="btn btn-create" :title="$t('add_an_objective')"></button>
             </li>
           </ul>
         </div>
@@ -75,9 +78,32 @@
       </div>
     </div>
 
+    <div id="evaluations">
+      <div class="title" aria="hidden">
+        <div><h3>{{ $t('Evaluations') }}</h3></div>
+      </div>
+
+      <!-- results which are not attached to an objective -->
+      <div v-if="hasEvaluationsForAction">
+        <add-evaluation :availableEvaluations="evaluationsForAction" destination="action"></add-evaluation>
+      </div>
+
+      <!-- box to add evaluation -->
+      <div class="add_evaluation">
+        <div v-if="showAddEvaluation">
+           bim
+        </div>
+        <ul class="record_actions">
+          <li>
+            <button @click="toggleAddEvaluation" class="btn btn-create" :title="$t('add_an_evaluation')"></button>
+          </li>
+        </ul>
+        <div><!-- empty for results --></div>
+      </div>
+    </div>
 
     <div id="persons">
-      <h2>{{ $t('persons_involved') }}</h2>
+      <h3>{{ $t('persons_involved') }}</h3>
 
       <ul>
         <li v-for="p in personsReachables" :key="p.id">
@@ -87,20 +113,19 @@
       </ul>
     </div>
 
-
     <div id="handlingThirdParty">
-      <h2>Tiers traitant</h2>
+      <h3>{{ $t('handling_thirdparty') }}</h3>
 
       <div v-if="!hasHandlingThirdParty">
         <p class="chill-no-data-statement">
-          Aucun tiers traitant
+           {{ $t('no_handling_thirdparty') }}
         </p>
 
         <ul class="record_actions">
           <li>
             <add-persons
-               buttonTitle="Indiquer un tiers traitant"
-               modalTitle="Choisir un tiers"
+               v-bind:buttonTitle="$t('precise_handling_thirdparty')"
+               v-bind:modalTitle="$t('choose_a_thirdparty')"
                v-bind:key="handlingThirdPartyPicker.key"
                v-bind:options="handlingThirdPartyPicker.options"
                @addNewPersons="setHandlingThirdParty"
@@ -116,7 +141,7 @@
         <ul class="record_actions">
           <li>
             <button class="btn btn-delete" @click="removeHandlingThirdParty">
-              Supprimer le tiers traitant
+               {{ $t('remove_handling_thirdparty') }}
             </button>
           </li>
         </ul>
@@ -124,14 +149,13 @@
 
     </div>
 
-
     <div id="thirdParties">
-      <h2>Tiers intervenants</h2>
+      <h3>{{ $t('thirdparty_intervener') }}</h3>
 
       <div v-if="!hasThirdParties">
-        <p class="chill-no-data-statement">Aucun tiers intervenant</p>
-
+        <p class="chill-no-data-statement">{{ $t('no_thirdparty_intervener') }}</p>
       </div>
+
       <div v-else>
         <ul>
           <li v-for="t in thirdParties">
@@ -148,8 +172,8 @@
       <ul class="record_actions">
         <li>
           <add-persons
-             buttonTitle="Ajouter des tiers"
-             modalTitle="Choisir des tiers"
+             v-bind:buttonTitle="$t('add_thirdparties')"
+             v-bind:modalTitle="$t('choose_thirdparties')"
              v-bind:key="thirdPartyPicker.key"
              v-bind:options="thirdPartyPicker.options"
              @addNewPersons="addThirdParties"
@@ -160,35 +184,33 @@
     </div>
 
     <div id="errors" v-if="errors.length > 0">
-      <p>Veuillez corriger les erreurs suivantes:</p>
+      <p>{{ $t('fix_these_errors') }}</p>
       <ul>
         <li v-for="e in errors">{{ e }}</li>
       </ul>
     </div>
+
   </div>
-
   <ul class="record_actions sticky-form-buttons">
-    <li v-if="!isPosting">
-      <button
-        class="btn btn-save"
-        @click="submit"
-      >
-        {{ $t('action.save') }}
-      </button>
-    </li>
-    <li v-if="isPosting">
-      <button
-        class="btn btn-save"
-        disabled
-      >
-        {{ $t('action.save') }}
-      </button>
-    </li>
-  </ul>
 
+    <li v-if="!isPosting">
+      <button class="btn btn-save" @click="submit">
+        {{ $t('action.save') }}
+      </button>
+    </li>
+
+    <li v-if="isPosting">
+      <button class="btn btn-save" disabled>
+        {{ $t('action.save') }}
+      </button>
+    </li>
+
+  </ul>
 </template>
 
 <style lang="scss">
+@import '~ChillMainAssets/module/bootstrap/shared';
+@import '~ChillMainAssets/chill/scss/mixins';
 
 #workEditor {
   display: grid;
@@ -197,6 +219,7 @@
     "startDate endDate"
     "comment comment"
     "objectives objectives"
+    "evaluations evaluations"
     "persons persons"
     "handling handling"
     "tparties tparties"
@@ -204,7 +227,12 @@
     ;
 
   grid-template-columns: 50%;
-  column-gap: 1rem;
+  column-gap: 0rem;
+
+  & > div {
+     @include border-collapse;
+     padding: 1em;
+  }
 
   #title {
     grid-area: title;
@@ -230,22 +258,16 @@
   #objectives {
     grid-area: objectives;
 
-    > div.title {
-      background-color: var(--chill-light-gray);
-      color: white;
-
-      h3 {
-        text-align: center;
-      }
-    }
-
-    > div {
+    & > div {
       display: grid;
       grid-template-areas: "obj res";
       grid-template-columns: 50%;
-      column-gap: 1rem;
+      column-gap: 0rem;
+
+      & > div {
+        @include border-collapse;
+        padding: 1em;
 
-      > div {
         &:nth-child(1) {
           grid-area: obj;
         }
@@ -255,13 +277,13 @@
         }
       }
 
-      > div.results_without_objective {
+      & > div.results_without_objective {
         background: repeating-linear-gradient(
         45deg,
-        var(--chill-light-gray),
-        var(--chill-light-gray) 10px,
-        var(--chill-llight-gray) 10px,
-        var(--chill-llight-gray) 20px
+        $gray-500,
+        $gray-500 10px,
+        $gray-100 10px,
+        $gray-100 20px
       );
 
         text-align: center;
@@ -291,8 +313,8 @@
       }
 
       i.fa-times {
-        background-color: red;
-        color: white;
+        background-color: $red;
+        color: $white;
       }
     }
 
@@ -306,11 +328,30 @@
       }
 
       i.fa-plus {
-        background-color: green;
+        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;
   }
@@ -328,12 +369,12 @@
 </style>
 
 <script>
-
 import { mapState, mapGetters, } from 'vuex';
 import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
 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 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';
@@ -342,11 +383,28 @@ const i18n = {
   messages: {
     fr: {
       action_title: "Action d'accompagnement",
+      comments: "Commentaire",
       startDate: "Date de début",
       endDate: "Date de fin",
+      goals_title: "Motifs - objectifs - dispositifs",
+      available_goals_text: "Motifs, objectifs et dispositifs disponibles pour ajout :",
+      results_title: "Orientations - résultats",
       results_without_objective: "Résultats - orientations sans objectifs",
       add_objectif: "Ajouter un motif - objectif - dispositif",
+      add_an_objective: "Ajouter un objectif",
+      Evaluations: "Évaluations",
+      add_an_evaluation: "Ajouter une évaluation",
       persons_involved: "Usagers concernés",
+      handling_thirdparty: "Tiers traitant",
+      no_handling_thirdparty: "Aucun tiers traitant",
+      precise_handling_thirdparty: "Indiquer un tiers traitant",
+      choose_a_thirdparty: "Choisir un tiers",
+      remove_handling_thirdparty: "Supprimer le tiers traitant",
+      thirdparty_intervener: "Tiers intervenants",
+      no_thirdparty_intervener: "Aucun tiers intervenant",
+      add_thirdparties: "Ajouter des tiers",
+      choose_thirdparties: "Choisir des tiers",
+      fix_these_errors: "Veuillez corriger les erreurs suivantes :",
     }
 }
 };
@@ -356,6 +414,7 @@ export default {
   components: {
     ckeditor: CKEditor.component,
     AddResult,
+    AddEvaluation,
     AddPersons,
     Person,
     ShowAddress,
@@ -365,6 +424,7 @@ export default {
     return {
       editor: ClassicEditor,
       showAddObjective: false,
+      showAddEvaluation: false,
       handlingThirdPartyPicker: {
         key: 'handling-third-party',
         options: {
@@ -387,6 +447,7 @@ export default {
     ...mapState([
       'work',
       'resultsForAction',
+      'evaluationsForAction',
       'goalsPicked',
       'personsReachables',
       'handlingThirdParty',
@@ -396,6 +457,7 @@ export default {
     ]),
     ...mapGetters([
       'hasResultsForAction',
+      'hasEvaluationsForAction',
       'hasHandlingThirdParty',
       'hasThirdParties',
     ]),
@@ -457,6 +519,9 @@ export default {
       console.log('remove goal', g);
       this.$store.commit('removeGoal', g);
     },
+    toggleAddEvaluation() {
+       this.showAddEvaluation = !this.showAddEvaluation;
+    },
     setHandlingThirdParty({ selected, modal }) {
       console.log('setHandlingThirdParty', selected);
       this.$store.commit('setHandlingThirdParty', selected.shift().result);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
new file mode 100644
index 000000000..ac1b47cdc
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
@@ -0,0 +1,14 @@
+<template>
+boum
+</template>
+
+<script>
+export default {
+   name: "AddEvaluation",
+   props: ['destination', 'availableEvaluations'],
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
index 252b1d810..3c68dfd38 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
@@ -86,7 +86,7 @@ const i18n = {
 
 export default {
   name: "AddResult",
-  props: [ 'destination', 'goal' ],
+  props: [ 'destination', 'goal', 'availableResults' ],
   i18n,
   data() {
     return {
@@ -136,7 +136,7 @@ export default {
   },
   methods: {
     toggleSelect() {
-      this.isExpanded = !this.isExpanded; 
+      this.isExpanded = !this.isExpanded;
     },
     addResult(r) {
       console.log('addResult', r);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
index 603a2b218..8b7af4dc4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
@@ -20,6 +20,7 @@ const store = createStore({
     resultsForAction: [],
     goalsForAction: [],
     resultsForGoal: [],
+    evaluationsForAction: [],
     personsPicked: window.accompanyingCourseWork.persons,
     personsReachables: window.accompanyingCourseWork.accompanyingPeriod.participations.filter(p => p.endDate == null)
       .map(p => p.person),
@@ -45,6 +46,9 @@ const store = createStore({
 
       return found === undefined ? [] : found.results;
     },
+    hasEvaluationsForAction(state) {
+      return state.evaluationsForAction.length > 0;
+    },
     hasHandlingThirdParty(state) {
       return state.handlingThirdParty !== null;
     },
@@ -259,7 +263,7 @@ const store = createStore({
         errors = []
       ;
 
-      console.log('action subitting', payload, url);
+      console.log('action submitting', payload, url);
       commit('setIsPosting', true);
 
       window.fetch(url, {
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
index bb670d9d6..506d51d5e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/edit.html.twig
@@ -6,9 +6,9 @@
 {% block content %}
 <div class="accompanying_course_work-edit">
 
-            <h1>{{ block('title') }}</h1>
+    <h1>{{ block('title') }}</h1>
 
-            <div id="accompanying_course_work_edit"></div>
+    <div id="accompanying_course_work_edit"></div>
 
 </div>
 {% endblock %}