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,6 +212,197 @@
   </ul>
 </template>
 
+<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 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';
+
+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_thirdparty: "Enlever le tiers",
+      remove_handling_thirdparty: "Enlever 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 :",
+    }
+}
+};
+
+export default {
+  name: 'App',
+  components: {
+    ckeditor: CKEditor.component,
+    AddResult,
+    AddEvaluation,
+    NewEvaluation,
+    AddPersons,
+    Person,
+    ShowAddress,
+  },
+  i18n,
+  data() {
+    return {
+      editor: ClassicEditor,
+      showAddObjective: false,
+      showAddEvaluation: false,
+      handlingThirdPartyPicker: {
+        key: 'handling-third-party',
+        options: {
+          type: [ 'thirdparty' ],
+          priority: null,
+          uniq: true,
+          button: {
+             display: false
+          }
+        },
+      },
+      thirdPartyPicker: {
+        key: 'third-party',
+        options: {
+          type: [ 'thirdparty' ],
+          priority: null,
+          uniq: false,
+          button: {
+             display: false
+          }
+        },
+      }
+    };
+  },
+  computed: {
+    ...mapState([
+      'work',
+      'resultsForAction',
+      'evaluationsForAction',
+      'goalsPicked',
+      'personsReachables',
+      'handlingThirdParty',
+      'thirdParties',
+      'isPosting',
+      'errors',
+    ]),
+    ...mapGetters([
+      'hasResultsForAction',
+      'hasEvaluationsForAction',
+      'hasHandlingThirdParty',
+      'hasThirdParties',
+    ]),
+    startDate: {
+      get() {
+        console.log('get start date', this.$store.state.startDate);
+        return dateToISO(this.$store.state.startDate);
+      },
+      set(v) {
+        this.$store.commit('setStartDate', ISOToDate(v));
+      }
+    },
+    endDate: {
+      get() {
+        console.log('get end date', this.$store.state.endDate);
+        return dateToISO(this.$store.state.endDate);
+      },
+      set(v) {
+        this.$store.commit('setEndDate', ISOToDate(v));
+      }
+    },
+    note: {
+      get() {
+        return this.$store.state.note;
+      },
+      set(v) {
+        this.$store.commit('setNote', v);
+      }
+    },
+    availableForCheckGoal() {
+      let pickedIds = this.$store.state.goalsPicked.map(g => g.goal.id);
+      console.log('pickeds goals id', pickedIds);
+      console.log(this.$store.state.goalsForAction);
+
+      return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
+    },
+    personsPicked: {
+      get() {
+        let s = this.$store.state.personsPicked.map(p => p.id);
+        console.log('persons picked', s);
+
+        return s;
+      },
+      set(v) {
+        console.log('persons picked', v);
+        this.$store.commit('setPersonsPickedIds', v);
+      }
+    },
+  },
+  methods: {
+    toggleAddObjective() {
+      this.showAddObjective = !this.showAddObjective;
+    },
+    addGoal(g) {
+      console.log('add Goal', g);
+      this.$store.commit('addGoal', g);
+    },
+    removeGoal(g) {
+      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);
+      this.$refs.handlingThirdPartyPicker.resetSearch();
+      modal.showModal = false;
+    },
+    removeHandlingThirdParty() {
+      console.log('removeHandlingThirdParty');
+      this.$store.commit('setHandlingThirdParty', null);
+    },
+    addThirdParties({ selected, modal}) {
+      console.log('addThirdParties', selected);
+      this.$store.commit('addThirdParties', selected.map(r => r.result));
+      this.$refs.thirdPartyPicker.resetSearch();
+      modal.showModal = false;
+    },
+    removeThirdParty(t) {
+      console.log('remove third party', t);
+      this.$store.commit('removeThirdParty', t);
+    },
+    submit() {
+      this.$store.dispatch('submit');
+    },
+  }
+};
+
+</script>
+
 <style lang="scss">
 @import '~ChillMainAssets/module/bootstrap/shared';
 @import '~ChillMainAssets/chill/scss/mixins';
@@ -221,8 +418,7 @@
     "persons persons"
     "handling handling"
     "tparties tparties"
-    "errors errors"
+    "errors errors";
-    ;
 
    grid-template-columns: 50%;
    column-gap: 0rem;
@@ -365,193 +561,37 @@
    }
 }
 
+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>
-
-<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';
-
-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_thirdparty: "Enlever le tiers",
-      remove_handling_thirdparty: "Enlever 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 :",
-    }
-}
-};
-
-export default {
-  name: 'App',
-  components: {
-    ckeditor: CKEditor.component,
-    AddResult,
-    AddEvaluation,
-    AddPersons,
-    Person,
-    ShowAddress,
-  },
-  i18n,
-  data() {
-    return {
-      editor: ClassicEditor,
-      showAddObjective: false,
-      showAddEvaluation: false,
-      handlingThirdPartyPicker: {
-        key: 'handling-third-party',
-        options: {
-          type: [ 'thirdparty' ],
-          priority: null,
-          uniq: true,
-          button: {
-             display: false
-          }
-        },
-      },
-      thirdPartyPicker: {
-        key: 'third-party',
-        options: {
-          type: [ 'thirdparty' ],
-          priority: null,
-          uniq: false,
-          button: {
-             display: false
-          }
-        },
-      }
-    };
-  },
-  computed: {
-    ...mapState([
-      'work',
-      'resultsForAction',
-      'evaluationsForAction',
-      'goalsPicked',
-      'personsReachables',
-      'handlingThirdParty',
-      'thirdParties',
-      'isPosting',
-      'errors',
-    ]),
-    ...mapGetters([
-      'hasResultsForAction',
-      'hasEvaluationsForAction',
-      'hasHandlingThirdParty',
-      'hasThirdParties',
-    ]),
-    startDate: {
-      get() {
-        console.log('get start date', this.$store.state.startDate);
-        return dateToISO(this.$store.state.startDate);
-      },
-      set(v) {
-        this.$store.commit('setStartDate', ISOToDate(v));
-      }
-    },
-    endDate: {
-      get() {
-        console.log('get end date', this.$store.state.endDate);
-        return dateToISO(this.$store.state.endDate);
-      },
-      set(v) {
-        this.$store.commit('setEndDate', ISOToDate(v));
-      }
-    },
-    note: {
-      get() {
-        return this.$store.state.note;
-      },
-      set(v) {
-        this.$store.commit('setNote', v);
-      }
-    },
-    availableForCheckGoal() {
-      let pickedIds = this.$store.state.goalsPicked.map(g => g.goal.id);
-      console.log('pickeds goals id', pickedIds);
-      console.log(this.$store.state.goalsForAction);
-
-      return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
-    },
-    personsPicked: {
-      get() {
-        let s = this.$store.state.personsPicked.map(p => p.id);
-        console.log('persons picked', s);
-
-        return s;
-      },
-      set(v) {
-        console.log('persons picked', v);
-        this.$store.commit('setPersonsPickedIds', v);
-      }
-    },
-  },
-  methods: {
-    toggleAddObjective() {
-      this.showAddObjective = !this.showAddObjective;
-    },
-    addGoal(g) {
-      console.log('add Goal', g);
-      this.$store.commit('addGoal', g);
-    },
-    removeGoal(g) {
-      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);
-      this.$refs.handlingThirdPartyPicker.resetSearch();
-      modal.showModal = false;
-    },
-    removeHandlingThirdParty() {
-      console.log('removeHandlingThirdParty');
-      this.$store.commit('setHandlingThirdParty', null);
-    },
-    addThirdParties({ selected, modal}) {
-      console.log('addThirdParties', selected);
-      this.$store.commit('addThirdParties', selected.map(r => r.result));
-      this.$refs.thirdPartyPicker.resetSearch();
-      modal.showModal = false;
-    },
-    removeThirdParty(t) {
-      console.log('remove third party', t);
-      this.$store.commit('removeThirdParty', t);
-    },
-    submit() {
-      this.$store.dispatch('submit');
-    },
-  }
-};
-
-</script>

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)