AccompanyingCourse: check if conditions of confirmation are met, or display alert

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

@@ -3,24 +3,43 @@
    <h2><a name="section-90"></a>
       {{ $t('confirm.title') }}
    </h2>
-
    <div>
-      <p>
+      <p v-html="$t('confirm.text_draft', [$t('course.step.draft')])"></p>
-         {{ $t('confirm.text_draft') }}
+
-         <span class="badge bg-secondary">{{ $t('course.step.draft') }}</span>
+      <div v-if="!isValidToBeConfirmed">
-      </p>
+         <div class="alert alert-warning">
-      <p>
+            {{ $t('confirm.alert_validation') }}
-         {{ $t('confirm.text_active') }}
+            <ul class="mt-2">
-         <span class="badge bg-primary">{{ $t('course.step.active') }}</span>
+               <li v-for="k in validationKeys">
-      </p>
+                  {{ $t(notValidMessages[k].msg) }}
+                  <a :href="notValidMessages[k].anchor">
+                     <i class="fa fa-level-up fa-fw"></i>
+                  </a>
+               </li>
+            </ul>
+         </div>
+         <ul class="record_actions">
+            <li>
+               <button class="btn btn-save" disabled>
+                  {{ $t('confirm.ok') }}
+               </button>
+            </li>
+         </ul>
+      </div>
+
+      <div v-else>
+         <p v-html="$t('confirm.text_active', [$t('course.step.active')])"></p>
+         <ul class="record_actions">
+            <li>
+               <button
+                  class="btn btn-save"
+                  @click="modal.showModal = true">
+                  {{ $t('confirm.ok') }}
+               </button>
+            </li>
+         </ul>
+      </div>
 
-      <ul class="record_actions">
-         <li>
-            <button class="btn btn-save" @click="modal.showModal = true">
-               {{ $t('confirm.ok') }}
-            </button>
-         </li>
-      </ul>
    </div>
 
    <teleport to="body">
@@ -43,6 +62,7 @@
 </template>
 
 <script>
+import {mapGetters, mapState} from "vuex";
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 
 export default {
@@ -55,13 +75,34 @@ export default {
          modal: {
             showModal: false,
             modalDialogClass: "modal-dialog-centered modal-md"
+         },
+         notValidMessages: {
+            participation: {
+               msg: 'confirm.participation_not_valid',
+               anchor: '#section-10'
+            },
+            socialIssue: {
+               msg: 'confirm.socialIssue_not_valid',
+               anchor: '#section-40'
+            },
+            location: {
+               msg: 'confirm.location_not_valid',
+               anchor: '#section-50'
+            }
          }
       }
    },
    computed: {
-      accompanyingCourse() {
+      ...mapState([
-         return this.$store.state.accompanyingCourse
+         'accompanyingCourse'
-      }
+      ]),
+      ...mapGetters([
+         'isParticipationValid',
+         'isSocialIssueValid',
+         'isLocationValid',
+         'validationKeys',
+         'isValidToBeConfirmed'
+      ])
    },
    methods: {
       confirmCourse() {
@@ -72,9 +113,3 @@ export default {
    }
 }
 </script>
-
-<style lang="scss" scoped>
-div.vue-component > div {
-    //margin: 1em;
-}
-</style>

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

@@ -97,10 +97,14 @@ const appMessages = {
       },
       confirm: {
          title: "Confirmation",
-         text_draft: "Le parcours est actuellement à l'état de ",
+         text_draft: "Le parcours est actuellement à l'état de <b>{0}</b>.",
-         text_active: "En validant cette étape, vous lui donnez le statut ",
+         text_active: "En validant cette étape, vous lui donnez le statut <b>{0}</b>.",
+         alert_validation: "Certaines conditions ne sont pas remplies pour pouvoir confirmer le parcours :",
+         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",
          sure: "Êtes-vous sûr ?",
-         sure_description: "Une fois le changement confirmé, il n'est plus possible de le remettre à l'état de brouillon !",
+         sure_description: "Une fois le changement confirmé, il ne sera plus possible de le remettre à l'état de brouillon !",
          ok: "Confirmer le parcours"
       },
       // catch errors

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

@@ -25,6 +25,29 @@ let initPromise = getAccompanyingCourse(id)
             errorMsg: []
          },
          getters: {
+            isParticipationValid(state) {
+               return state.accompanyingCourse.participations.length > 0;
+            },
+            isSocialIssueValid(state) {
+               return state.accompanyingCourse.socialIssues.length > 0;
+            },
+            isLocationValid(state) {
+               return state.accompanyingCourse.location !== null;
+            },
+            validationKeys(state, getters) {
+               let keys = [];
+               if (!getters.isParticipationValid) { keys.push('participation'); }
+               if (!getters.isSocialIssueValid) { keys.push('socialIssue'); }
+               if (!getters.isLocationValid) { keys.push('location'); }
+               //console.log('getter keys', keys);
+               return keys;
+            },
+            isValidToBeConfirmed(state, getters) {
+               if (getters.validationKeys.length === 0) {
+                  return true;
+               }
+               return false;
+            }
          },
          mutations: {
             catchError(state, error) {