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

<template>
<div class="vue-component">
   <h2><a id="section-110"></a>
      {{ $t('confirm.title') }}
   </h2>
   <div>
      <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" :key=k>
                  {{ $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>
            <li>
               <a class="btn btn-delete" :href="deleteLink">
                  {{ $t('confirm.delete') }}
               </a>
            </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>
            <li>
               <a class="btn btn-delete" :href="deleteLink">
                  {{ $t('confirm.delete') }}
               </a>
            </li>
         </ul>
      </div>

   </div>

   <teleport to="body">
      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
         <template v-slot:header>
            <h2 class="modal-title">{{ $t('confirm.sure') }}</h2>
         </template>
         <template v-slot:body>
            <p>{{ $t('confirm.sure_description') }}</p>
            <div v-if="accompanyingCourse.user === null">
                <div v-if="usersSuggestedFilteredByJob.length === 0">
                   <p class="alert alert-warning">{{ $t('confirm.no_suggested_referrer') }}</p>
                </div>
                <div v-if="usersSuggestedFilteredByJob.length === 1" class="alert alert-info">
                   <p>{{ $t('confirm.one_suggested_referrer') }}:</p>
                   <ul class="list-suggest add-items inline">
                     <li>
                       <user-render-box-badge :user="usersSuggestedFilteredByJob[0]"></user-render-box-badge>
                     </li>
                   </ul>
                   <p>{{ $t('confirm.choose_suggested_referrer') }}</p>
                   <ul class="record_actions">
                      <li>
                     <button class="btn btn-save mr-5" @click="chooseSuggestedReferrer">
                        {{ $t('confirm.choose_button') }}
                     </button>
                      </li>
                      <li>
                     <button class="btn btn-secondary" @click="doNotChooseSuggestedReferrer">
                        {{ $t('confirm.do_not_choose_button') }}
                     </button>
                     </li>
                   </ul>
                </div>
            </div>
         </template>
         <template v-slot:footer>
            <button class="btn btn-danger" :disabled="disableConfirm" @click="confirmCourse">
               {{ $t('confirm.ok') }}
            </button>
         </template>
      </modal>
   </teleport>

</div>
</template>

<script>
import {mapGetters, mapState} from "vuex";
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge";

export default {
   name: "Confirm",
   components: {
      Modal,
      UserRenderBoxBadge
   },
   data() {
      return {
         modal: {
            showModal: false,
            modalDialogClass: "modal-dialog-centered modal-md"
         },
         notValidMessages: {
            participation: {
               msg: 'confirm.participation_not_valid',
               anchor: '#section-10'
            },
            location: {
               msg: 'confirm.location_not_valid',
               anchor: '#section-20'
            },
            origin: {
               msg: 'confirm.origin_not_valid',
               anchor: '#section-30'
            },
            adminLocation: {
               msg: 'confirm.adminLocation_not_valid',
               anchor: '#section-40'
            },
            socialIssue: {
               msg: 'confirm.socialIssue_not_valid',
               anchor: '#section-60'
            },
            scopes: {
              msg: 'confirm.set_a_scope',
              anchor: '#section-70'
            },
            job: {
               msg: 'confirm.job_not_valid',
               anchor: '#section-80'
            },
         },
         clickedDoNotChooseReferrer: false
      }
   },
   computed: {
      ...mapState({
         accompanyingCourse: state => state.accompanyingCourse,
      }),
      ...mapGetters([
         'isParticipationValid',
         'isSocialIssueValid',
         'isOriginValid',
         'isAdminLocationValid',
         'isLocationValid',
         'isJobValid',
         'validationKeys',
         'isValidToBeConfirmed',
         'usersSuggestedFilteredByJob',
      ]),
      deleteLink() {
         return `/fr/parcours/${this.accompanyingCourse.id}/delete`; //TODO locale
      },
      disableConfirm() {
        return (this.accompanyingCourse.user === null
            && this.usersSuggestedFilteredByJob.length === 1
            && this.clickedDoNotChooseReferrer === false);
      }
   },
   methods: {
      confirmCourse() {
         this.$store.dispatch('confirmAccompanyingCourse')
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            });
      },
      chooseSuggestedReferrer() {
         this.$store.dispatch('updateReferrer', this.usersSuggestedFilteredByJob[0])
            .catch(({name, violations}) => {
               if (name === 'ValidationException' || name === 'AccessException') {
                  violations.forEach((violation) => this.$toast.open({message: violation}));
               } else {
                  this.$toast.open({message: 'An error occurred'})
               }
            });
      },
      doNotChooseSuggestedReferrer() {
         this.clickedDoNotChooseReferrer = true;
      }
   }
}
</script>