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>
-         {{ $t('confirm.text_draft') }}
-         <span class="badge bg-secondary">{{ $t('course.step.draft') }}</span>
-      </p>
-      <p>
-         {{ $t('confirm.text_active') }}
-         <span class="badge bg-primary">{{ $t('course.step.active') }}</span>
-      </p>
+      <p v-html="$t('confirm.text_draft', [$t('course.step.draft')])"></p>
+
+      <div v-if="!isValidToBeConfirmed">
+         <div class="alert alert-warning">
+            {{ $t('confirm.alert_validation') }}
+            <ul class="mt-2">
+               <li v-for="k in validationKeys">
+                  {{ $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() {
-         return this.$store.state.accompanyingCourse
-      }
+      ...mapState([
+         '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>