From 4cf77a9b0e7b38d9aa22a8c5327e614de47c8b3e Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Tue, 27 Apr 2021 17:27:06 +0200
Subject: [PATCH] adapt multi components to new store and new api endpoints

* base of i18n (yarn add new deps)
---
 .../public/js/AccompanyingCourse/App.vue      | 34 +++-------
 .../public/js/AccompanyingCourse/App_test.vue | 19 ------
 .../api/accompanyingCourse.js                 | 12 ++--
 .../AccompanyingCourse/api/participations.js  |  5 --
 .../components/AccompanyingCourse.vue         | 22 ++++---
 .../components/PersonItem.vue                 | 35 ++++++++---
 .../components/PersonsAssociated.vue          | 63 +++++++++----------
 .../components/Requestor.vue                  |  8 ++-
 .../public/js/AccompanyingCourse/index.js     | 19 ++++--
 .../js/AccompanyingCourse/store/index.js      | 18 ++++--
 .../Resources/public/js/_components/i18n.js   | 57 +++++++++++++++++
 11 files changed, 172 insertions(+), 120 deletions(-)
 delete mode 100644 src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App_test.vue
 delete mode 100644 src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/participations.js
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/js/_components/i18n.js

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App.vue
index 971eca1c7..3357bffa9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App.vue
@@ -1,10 +1,12 @@
 <template>
-   <accompanying-course v-bind:accompanying_course="accompanying_course"/>
-   <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
-   <requestor v-bind:accompanying_course="accompanying_course"/>
+   <accompanying-course></accompanying-course>
+   <persons-associated></persons-associated>
+   <requestor></requestor>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 import AccompanyingCourse from './components/AccompanyingCourse.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
@@ -16,29 +18,9 @@ export default {
       PersonsAssociated, 
       Requestor
    },
-   data() {
-      return {
-         accompanying_course: {}
-      };
-   },
-   computed: {
-      accompanyingCourseId() {
-         return window.accompanyingCourseId;
-      }
-   },
-   methods: {
-      async getAccompanyingCourse() {
-         let data_;
-         return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)
-            .then(response => response.json())
-            .then(data => {
-               this.$data.accompanying_course = data;
-            });
-      }
-   },
-   async mounted() {
-      await this.getAccompanyingCourse();
-   }
+   computed: mapState([
+      'accompanying_course'
+   ])
 };
 </script>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App_test.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App_test.vue
deleted file mode 100644
index 5e8bd0d09..000000000
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App_test.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
---: {{ course.id }} :-- 
-</template>
-
-<script>
-import { mapState } from 'vuex'
-
-export default {
-   name: 'App',
-   computed: mapState([
-      'course'
-   ])
-   //computed: {
-   //   courseId() {
-   //      return this.$store.state.course.id;
-   //   }
-   //}
-};
-</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/accompanyingCourse.js b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/accompanyingCourse.js
index 1da9261c4..0448ba459 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/accompanyingCourse.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/accompanyingCourse.js
@@ -7,19 +7,21 @@ const
 // 1. chill_person_accompanying_course_api_show
 let getAccompanyingCourse = (accompanying_period_id) => {
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/show.${format}`;
-   return fetch(url).then(response => response.json());
+   return fetch(url)
+      .then(response => response.json());
 };
 
 // 2. chill_person_accompanying_course_api_add_participation (POST)
 let getParticipations = (accompanying_period_id) => {
    const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`
-   return fetch(url).then(response => response.json());
+   return fetch(url)
+      .then(response => response.json());
 };
 
 export { getAccompanyingCourse, getParticipations };
 
 
 
-///
-// cfr. promise.all() pour plusieurs promesses
-// catch throw sur le dernier then pour capturer l'erreur
+/// TODO
+// * cfr. promise.all() pour plusieurs promesses
+// * catch throw sur le dernier then pour capturer l'erreur
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/participations.js b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/participations.js
deleted file mode 100644
index f0341ccd9..000000000
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/participations.js
+++ /dev/null
@@ -1,5 +0,0 @@
-
-const _participations = []
-
-export default {
-}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/AccompanyingCourse.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/AccompanyingCourse.vue
index d08798c00..cecd12917 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/AccompanyingCourse.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/AccompanyingCourse.vue
@@ -1,16 +1,16 @@
 <template>
    <div class="vue-component">
-      <h3>Parcours</h3>
+      <h3>{{ $t('title.course') }}</h3>
       <dl>
-         <dt>id</dt>
+         <dt>{{ $t('course.id') }}</dt>
             <dd>{{ accompanying_course.id }}</dd>
-         <dt>opening_date</dt>
-            <dd>{{ accompanying_course.opening_date }}</dd>
-         <dt>closing_date</dt>
-            <dd>{{ accompanying_course.closing_date }}</dd>
-         <dt>remark</dt>
+         <dt>{{ $t('course.opening_date') }}</dt>
+            <dd>{{ $d(accompanying_course.openingDate.datetime, 'short') }}</dd>
+         <dt>{{ $t('course.closing_date') }}</dt>
+            <dd>{{ $d(accompanying_course.closingDate.datetime, 'short') }}</dd>
+         <dt>{{ $t('course.remark') }}</dt>
             <dd>{{ accompanying_course.remark }}</dd>
-         <dt>closing_motive</dt>
+         <dt>{{ $t('course.closing_motive') }}</dt>
             <dd>{{ accompanying_course.closing_motive }}</dd>
       </dl>
    </div>
@@ -19,8 +19,10 @@
 <script>
 export default {
    name: 'AccompanyingCourse',
-   props: {
-      accompanying_course: Object
+   computed: {
+      accompanying_course() {
+         return this.$store.state.accompanying_course
+      }
    }
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonItem.vue
index f75f0779b..45d39064a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonItem.vue
@@ -1,14 +1,31 @@
 <template>
 <tr>
-   <td>{{ person.firstname }}</td>
-   <td>{{ person.lastname }}</td>
-   <td>{{ person.startdate }}</td>
-   <td>{{ person.enddate }}</td>
+   <td>{{ participation.person.firstName }}</td>
+   <td>{{ participation.person.lastName }}</td>
+   <td><span v-if="participation.startDate">
+       {{ $d(participation.startDate.datetime, 'short') }}</span>
+   </td>
+   <td><span v-if="participation.endDate">
+       {{ $d(participation.endDate.datetime, 'short') }}</span>
+   </td>
    <td>
       <ul class="record_actions">
-         <li><button class="sc-button bt-show"></button></li>
-         <li><button class="sc-button bt-update"></button></li>
-         <li><button class="sc-button bt-delete" @click.prevent="$emit('remove', person)"></button></li>
+         <li>
+            <button class="sc-button bt-show"
+               :title="$t('action.show')">
+            </button>
+         </li>
+         <li>
+            <button class="sc-button bt-update"
+               :title="$t('action.edit')">
+            </button>
+         </li>
+         <li>
+            <button class="sc-button bt-delete"
+               :title="$t('action.remove')" 
+               @click.prevent="$emit('remove', participation)">
+            </button>
+         </li>
       </ul>
    </td>
 </tr>
@@ -17,9 +34,7 @@
 <script>
 export default {
    name: 'PersonItem',
-   props: {
-      person: { type: Object, required: true }
-   },
+   props: ['participation'],
    emits: ['remove']
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonsAssociated.vue
index f4ccf6964..18c91c87a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonsAssociated.vue
@@ -1,32 +1,33 @@
 <template>
 <div class="vue-component">
-   <h3>Usagers concernés</h3>
-    
-   <label>{{ counter }} usagers</label>
-   
+   <h3>{{ $t('title.persons_associated')}}</h3>
+   <label>{{ $tc('persons_associated.counter', counter) }}</label>
    <table class="rounded"> 
       <thead>
          <tr>
-            <th class="chill-orange">firstname</th>
-            <th class="chill-orange">lastname</th>
-            <th class="chill-orange">startdate</th>
-            <th class="chill-orange">enddate</th>
-            <th class="chill-orange">actions</th>
+            <th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
+            <th class="chill-orange">{{ $t('persons_associated.lastname') }}</th>
+            <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
+            <th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
+            <th class="chill-orange">{{ $t('action.actions') }}</th>
          </tr>
       </thead>
       <tbody> 
          <person-item 
-            v-for="person in persons_associated" 
-            v-bind:person="person" 
-            v-bind:key="person.id" 
-            @remove="removePerson" />
+            v-for="participation in participations" 
+            v-bind:participation="participation" 
+            v-bind:key="participation.id" 
+            @remove="removePerson">
+         </person-item>
       </tbody>
    </table>
-   
    <ul class="record_actions">
-      <li><button class="sc-button bt-create" @click="addPerson">Ajouter un usager</button></li>
+      <li>
+         <button class="sc-button bt-create" @click="addPerson">
+            {{ $t('persons_associated.addPerson') }}
+         </button>
+      </li>
    </ul>
-   
 </div>
 </template>
 
@@ -38,31 +39,27 @@ export default {
    components: { 
       PersonItem 
    },
-   props: { 
-      persons_associated: Array 
-   },
-   data() {
-      return {
-         persons: this.persons_associated
-      }
-   },
    computed: {
-      async counter() {
-         // Pourquoi je peux pas compter un tableau avec length ???!!!
-         return this.persons_associated.length //     <= boum !
+      accompanying_course() {
+         return this.$store.state.accompanying_course
+      },
+      participations() {
+         return this.accompanying_course.participations
+      },
+      counter() {
+         return this.participations.length
       }
    },
    methods: {
       addPerson() {
-         this.persons_associated.push({
-            "firstname": "Lisa",
-            "lastname": "Simpson",
-            "startdate": "1975-09-15",
-            "enddate": "2021-04-20"
+         this.$store.commit('addParticipation', {
+            person: { firstName: "Lisa", lastName: "Simpson", },
+            startDate: "1975-09-15", endDate: "2021-04-20"
          })
+         return this.accompanying_course
       },
       removePerson(item) {
-         this.persons_associated = this.persons_associated.filter(person => person !== item)
+         this.$store.commit('removeParticipation', item)
       }
    }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/Requestor.vue
index 75a95e241..ba82b3b9d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/Requestor.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="vue-component">
-      <h3>Demandeur</h3>
+      <h3>{{ $t('title.requestor') }}</h3>
       {{ accompanying_course.id }}
       {{ accompanying_course.remark }}
    </div>
@@ -9,8 +9,10 @@
 <script>
 export default {
    name: 'Requestor',
-   props: {
-      accompanying_course: Object
+   computed: {
+      accompanying_course() {
+         return this.$store.state.accompanying_course
+      }
    }
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/index.js b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/index.js
index 6d738de33..fcd83a785 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/index.js
@@ -1,16 +1,27 @@
-import { createApp } from 'vue';
-import createStore from './store';
-import App from './App_test.vue';
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import { datetimeFormats, messages } from '../_components/i18n.js'
+import createStore from './store'
+
+import App from './App.vue';
 
 createStore.then(store => {
 
    //console.log('store in create_store', store);
-   console.log('store course', store.state.course);
+   console.log('store accompanyingCourse', store.state.accompanying_course);
 
+   const i18n = createI18n({
+      datetimeFormats,
+      messages,
+      locale: 'fr',
+      fallbackLocale: 'fr'
+   });
+  
    const app = createApp({
       template: `<app></app>`,
    })
    .use(store)
+   .use(i18n)
    .component('app', App)
    .mount('#accompanying-course');
 });
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/store/index.js
index e9bae629b..6d5d710e3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/store/index.js
@@ -7,12 +7,20 @@ const debug = process.env.NODE_ENV !== 'production';
 let promise = getAccompanyingCourse(window.accompanyingCourseId)
    .then(accompanying_course => new Promise((resolve, reject) => {
       let store = createStore({
-         state() {
-            return {
-               course: accompanying_course
-            }
+         strict: debug,
+         state: {
+            accompanying_course: accompanying_course
          },
-         strict: debug
+         mutations: {
+            removeParticipation(state, item) {
+               console.log('remove item', item.id);
+               state.accompanying_course.participations = state.accompanying_course.participations.filter(participation => participation !== item)
+            },
+            addParticipation(state, item) {
+               console.log('add new item');
+               state.accompanying_course.participations.push(item)
+            }
+         }
       });
       //console.log('store', store);
       resolve(store);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/_components/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/js/_components/i18n.js
new file mode 100644
index 000000000..fedee69e3
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/_components/i18n.js
@@ -0,0 +1,57 @@
+const datetimeFormats = {
+   fr: {
+      short: {
+         year: "numeric",
+         month: "numeric",
+         day: "numeric"
+      },
+      long: {
+         year: "numeric",
+         month: "short",
+         day: "numeric",
+         weekday: "short",
+         hour: "numeric",
+         minute: "numeric",
+         hour12: false
+      }
+   }
+}
+const messages = {
+   fr: {
+      title: {
+         course: "Parcours",
+         persons_associated: "Usagers concernés",
+         requestor: "Demandeur",
+      },
+      course: {
+         id: "id",
+         opening_date: "Date d'ouverture",
+         closing_date: "Date de clôture",
+         remark: "Commentaire",
+         closing_motive: "Motif de clôture",
+      },
+      persons_associated: {
+         counter: "Pas d'usager | 1 usager | {count} usagers",
+         firstname: "Prénom", 
+         lastname: "Nom", 
+         startdate: "Date d'entrée", 
+         enddate: "Date de sortie",
+         addPerson: "Ajouter un usager",
+         
+      },
+      action: {
+         actions: "Actions", 
+         show: "Voir",
+         edit: "Modifier",
+         create: "Créer",
+         remove: "Enlever",
+         delete: "Supprimer",
+         
+      }
+   }
+}
+
+export {
+   datetimeFormats,
+   messages
+};