adapt multi components to new store and new api endpoints

* base of i18n (yarn add new deps)

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App.vue

@@ -1,10 +1,12 @@
 <template>
-   <accompanying-course v-bind:accompanying_course="accompanying_course"/>
+   <accompanying-course></accompanying-course>
-   <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
+   <persons-associated></persons-associated>
-   <requestor v-bind:accompanying_course="accompanying_course"/>
+   <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() {
+   computed: mapState([
-      return {
+      'accompanying_course'
-         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();
-   }
 };
 </script>
 

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App_test.vue

@@ -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>

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 };
 
 
 
-///
+/// TODO
-// cfr. promise.all() pour plusieurs promesses
+// * cfr. promise.all() pour plusieurs promesses
-// catch throw sur le dernier then pour capturer l'erreur
+// * catch throw sur le dernier then pour capturer l'erreur

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/participations.js

@@ -1,5 +0,0 @@
-
-const _participations = []
-
-export default {
-}

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>
+         <dt>{{ $t('course.opening_date') }}</dt>
-            <dd>{{ accompanying_course.opening_date }}</dd>
+            <dd>{{ $d(accompanying_course.openingDate.datetime, 'short') }}</dd>
-         <dt>closing_date</dt>
+         <dt>{{ $t('course.closing_date') }}</dt>
-            <dd>{{ accompanying_course.closing_date }}</dd>
+            <dd>{{ $d(accompanying_course.closingDate.datetime, 'short') }}</dd>
-         <dt>remark</dt>
+         <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: {
+   computed: {
-      accompanying_course: Object
+      accompanying_course() {
+         return this.$store.state.accompanying_course
+      }
    }
 }
 </script>

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonItem.vue

@@ -1,14 +1,31 @@
 <template>
 <tr>
-   <td>{{ person.firstname }}</td>
+   <td>{{ participation.person.firstName }}</td>
-   <td>{{ person.lastname }}</td>
+   <td>{{ participation.person.lastName }}</td>
-   <td>{{ person.startdate }}</td>
+   <td><span v-if="participation.startDate">
-   <td>{{ person.enddate }}</td>
+       {{ $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>
-         <li><button class="sc-button bt-update"></button></li>
+            <button class="sc-button bt-show"
-         <li><button class="sc-button bt-delete" @click.prevent="$emit('remove', person)"></button></li>
+               :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: {
+   props: ['participation'],
-      person: { type: Object, required: true }
-   },
    emits: ['remove']
 }
 </script>

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/components/PersonsAssociated.vue

@@ -1,32 +1,33 @@
 <template>
 <div class="vue-component">
-   <h3>Usagers concernés</h3>
+   <h3>{{ $t('title.persons_associated')}}</h3>
-    
+   <label>{{ $tc('persons_associated.counter', counter) }}</label>
-   <label>{{ counter }} usagers</label>
-   
    <table class="rounded"> 
       <thead>
          <tr>
-            <th class="chill-orange">firstname</th>
+            <th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
-            <th class="chill-orange">lastname</th>
+            <th class="chill-orange">{{ $t('persons_associated.lastname') }}</th>
-            <th class="chill-orange">startdate</th>
+            <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
-            <th class="chill-orange">enddate</th>
+            <th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
-            <th class="chill-orange">actions</th>
+            <th class="chill-orange">{{ $t('action.actions') }}</th>
          </tr>
       </thead>
       <tbody> 
          <person-item 
-            v-for="person in persons_associated" 
+            v-for="participation in participations" 
-            v-bind:person="person" 
+            v-bind:participation="participation" 
-            v-bind:key="person.id" 
+            v-bind:key="participation.id" 
-            @remove="removePerson" />
+            @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() {
+      accompanying_course() {
-         // Pourquoi je peux pas compter un tableau avec length ???!!!
+         return this.$store.state.accompanying_course
-         return this.persons_associated.length //     <= boum !
+      },
+      participations() {
+         return this.accompanying_course.participations
+      },
+      counter() {
+         return this.participations.length
       }
    },
    methods: {
       addPerson() {
-         this.persons_associated.push({
+         this.$store.commit('addParticipation', {
-            "firstname": "Lisa",
+            person: { firstName: "Lisa", lastName: "Simpson", },
-            "lastname": "Simpson",
+            startDate: "1975-09-15", endDate: "2021-04-20"
-            "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)
       }
    }
 }

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: {
+   computed: {
-      accompanying_course: Object
+      accompanying_course() {
+         return this.$store.state.accompanying_course
+      }
    }
 }
 </script>

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/index.js

@@ -1,16 +1,27 @@
-import { createApp } from 'vue';
+import { createApp } from 'vue'
-import createStore from './store';
+import { createI18n } from 'vue-i18n'
-import App from './App_test.vue';
+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');
 });

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() {
+         strict: debug,
-            return {
+         state: {
-               course: accompanying_course
+            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);

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
+};