accompanying course: add client-side validation if no origin

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

@@ -10,7 +10,7 @@
          <div class="alert alert-warning">
             {{ $t('confirm.alert_validation') }}
             <ul class="mt-2">
-               <li v-for="k in validationKeys">
+               <li v-for="k in validationKeys" :key=k>
                   {{ $t(notValidMessages[k].msg) }}
                   <a :href="notValidMessages[k].anchor">
                      <i class="fa fa-level-up fa-fw"></i>
@@ -83,7 +83,11 @@ export default {
             },
             location: {
                msg: 'confirm.location_not_valid',
-               anchor: '#section-20' //
+               anchor: '#section-20'
+            },
+            origin: {
+               msg: 'confirm.origin_not_valid',
+               anchor: '#section-30'
             },
             socialIssue: {
                msg: 'confirm.socialIssue_not_valid',
@@ -103,6 +107,7 @@ export default {
       ...mapGetters([
          'isParticipationValid',
          'isSocialIssueValid',
+         'isOriginValid',
          'isLocationValid',
          'validationKeys',
          'isValidToBeConfirmed'

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

@@ -19,15 +19,18 @@
             :options="options"
             @select="updateOrigin">
          </VueMultiselect>
-
       </div>
+
+      <div v-if="!isOriginValid" class="alert alert-warning to-confirm">
+        {{ $t('origin.not_valid') }}
+     </div>
    </div>
 </template>
 
 <script>
 import VueMultiselect from 'vue-multiselect';
 import { getListOrigins } from '../api';
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
    name: 'OriginDemand',
@@ -41,6 +44,9 @@ export default {
       ...mapState({
          value: state => state.accompanyingCourse.origin,
       }),
+      ...mapGetters([
+         'isOriginValid'
+      ])
    },
    mounted() {
       this.getOptions();