add validation to accompanying periods

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

@@ -16,16 +16,16 @@
    <comment v-if="accompanyingCourse.step === 'DRAFT'"></comment>
    <confirm v-if="accompanyingCourse.step === 'DRAFT'"></confirm>
 
-    <div v-for="error in errorMsg" class="vue-component errors alert alert-danger">
+    <!-- <div v-for="error in errorMsg" v-bind:key="error.id" class="vue-component errors alert alert-danger">
        <p>
           <span>{{ error.sta }} {{ error.txt }}</span><br>
           <span>{{ $t(error.msg) }}</span>
        </p>
-    </div>
+    </div> -->
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import Banner from './components/Banner.vue';
 import StickyNav from './components/StickyNav.vue';
 import OriginDemand from './components/OriginDemand.vue';
@@ -55,11 +55,12 @@ export default {
       Comment,
       Confirm,
    },
-   computed: mapState([
-      'accompanyingCourse',
-      'addressContext',
-      'errorMsg'
-   ])
+   computed: {
+      ...mapState([
+         'accompanyingCourse',
+         'addressContext'
+      ]),
+   },
 };
 </script>
 

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

@@ -86,7 +86,8 @@ const postParticipation = (id, payload, method) => {
       })
       .then(response => {
          if (response.ok) { return response.json(); }
-         throw { msg: 'Error while sending AccompanyingPeriod Course participation.', sta: response.status, txt: response.statusText, err: new Error(), body: response.body };
+         // TODO: adjust message according to status code? Or how to access the message from the violation array?
+         throw { msg: 'Error while sending AccompanyingPeriod Course participation', sta: response.status, txt: response.statusText, err: new Error(), body: response.body };
       });
 };
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/OriginDemand.vue

@@ -10,13 +10,13 @@
          <VueMultiselect
             name="selectOrigin"
             label="text"
-            v-bind:custom-label="transText"
+            :custom-label="transText"
             track-by="id"
-            v-bind:multiple="false"
-            v-bind:searchable="true"
-            v-bind:placeholder="$t('origin.placeholder')"
+            :multiple="false"
+            :searchable="true"
+            :placeholder="$t('origin.placeholder')"
             v-model="value"
-            v-bind:options="options"
+            :options="options"
             @select="updateOrigin">
          </VueMultiselect>
 
@@ -47,18 +47,18 @@ export default {
    },
    methods: {
       getOptions() {
-         //console.log('loading origins list');
          getListOrigins().then(response => new Promise((resolve, reject) => {
             this.options = response.results;
             resolve();
          }));
       },
       updateOrigin(value) {
-         //console.log('value', value);
+         console.log('value', value);
          this.$store.dispatch('updateOrigin', value);
       },
       transText ({ text }) {
-         return text.fr //TODO multilang
+         const parsedText = JSON.parse(text);
+         return parsedText.fr;
       },
    }
 }

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

@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { appMessages } from './js/i18n'
 import { initPromise } from './store'
+import VueToast from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';
 
 import App from './App.vue';
 import Banner from './components/Banner.vue';
@@ -21,6 +23,7 @@ if (root === 'app') {
       })
       .use(store)
       .use(i18n)
+      .use(VueToast)
       .component('app', App)
       .mount('#accompanying-course');
    });

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

@@ -77,7 +77,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
          },
          mutations: {
             catchError(state, error) {
-               console.log('### mutation: a new error have been catched and pushed in store !', error);
+               // console.log('### mutation: a new error have been catched and pushed in store !', error);
                state.errorMsg.push(error);
             },
             removeParticipation(state, participation) {