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();

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

@@ -34,6 +34,7 @@ const appMessages = {
          title: "Origine de la demande",
          label: "Origine de la demande",
          placeholder: "Renseignez l'origine de la demande",
+         not_valid: "Indiquez une origine de la demande",
       },
       persons_associated: {
          title: "Usagers concernés",
@@ -124,6 +125,7 @@ const appMessages = {
          participation_not_valid: "sélectionnez au minimum 1 usager",
          socialIssue_not_valid: "sélectionnez au minimum une problématique sociale",
          location_not_valid: "indiquez au minimum une localisation temporaire du parcours",
+         origin_not_valid: "indiquez une origine de la demande",
          set_a_scope: "indiquez au moins un service",
          sure: "Êtes-vous sûr ?",
          sure_description: "Une fois le changement confirmé, il ne sera plus possible de le remettre à l'état de brouillon !",

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

@@ -52,6 +52,9 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
             isSocialIssueValid(state) {
                return state.accompanyingCourse.socialIssues.length > 0;
             },
+            isOriginValid(state) {
+               return state.accompanyingCourse.origin !== null;
+            },
             isLocationValid(state) {
                return state.accompanyingCourse.location !== null;
             },
@@ -64,6 +67,7 @@ let initPromise = Promise.all([scopesPromise, accompanyingCoursePromise])
                if (!getters.isParticipationValid) { keys.push('participation'); }
                if (!getters.isLocationValid) { keys.push('location'); }
                if (!getters.isSocialIssueValid) { keys.push('socialIssue'); }
+               if (!getters.isOriginValid) { keys.push('origin'); }
                if (!getters.isScopeValid) { keys.push('scopes'); }
                //console.log('getter keys', keys);
                return keys;