confirm modal "are you sure ?"

This commit is contained in:
Mathieu Jaumotte 2021-05-20 15:43:10 +02:00
parent 54d03275cf
commit 199e5a73d8
3 changed files with 70 additions and 37 deletions

View File

@ -1,42 +1,71 @@
<template> <template>
<div class="vue-component"> <div class="vue-component">
<h2><a name="section-70"></a> <h2><a name="section-70"></a>
{{ $t('confirm.title') }} {{ $t('confirm.title') }}
</h2> </h2>
<div> <div>
<p> <p>
{{ $t('confirm.text_draft') }} {{ $t('confirm.text_draft') }}
<span class="badge badge-secondary">{{ $t('course.step.draft') }}</span> <span class="badge badge-secondary">{{ $t('course.step.draft') }}</span>
</p> </p>
<p> <p>
{{ $t('confirm.text_active') }} {{ $t('confirm.text_active') }}
<span class="badge badge-primary">{{ $t('course.step.active') }}</span> <span class="badge badge-primary">{{ $t('course.step.active') }}</span>
</p> </p>
</div> </div>
<dl v-if="accompanyingCourse.closingDate"> <dl v-if="accompanyingCourse.closingDate">
<dt>{{ $t('course.closing_date') }}</dt> <dt>{{ $t('course.closing_date') }}</dt>
<dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd> <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
<dt>{{ $t('course.closing_motive') }}</dt> <dt>{{ $t('course.closing_motive') }}</dt>
<dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd> <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
</dl> </dl>
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<button class="sc-button bt-save" <button class="sc-button bt-save" @click="modal.showModal = true">
@click="confirmCourse"> {{ $t('confirm.ok') }}
{{ $t('confirm.ok') }} </button>
</button> </li>
</li> </ul>
</ul>
</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>
</template>
<template v-slot:footer>
<button class="sc-button red" @click="confirmCourse">
{{ $t('confirm.ok') }}
</button>
</template>
</modal>
</teleport>
</div>
</template> </template>
<script> <script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
export default { export default {
name: "Confirm", name: "Confirm",
components: {
Modal,
},
data() {
return {
modal: {
showModal: false,
modalDialogClass: "modal-dialog-centered modal-md"
}
}
},
computed: { computed: {
accompanyingCourse() { accompanyingCourse() {
return this.$store.state.accompanyingCourse return this.$store.state.accompanyingCourse
@ -46,13 +75,14 @@ export default {
confirmCourse() { confirmCourse() {
console.log('@@ CLICK confirmCourse'); console.log('@@ CLICK confirmCourse');
this.$store.dispatch('confirmAccompanyingCourse'); this.$store.dispatch('confirmAccompanyingCourse');
console.log('confirm last');
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
div.vue-component > div { div.vue-component > div {
margin: 1em; margin: 1em;
} }
</style> </style>

View File

@ -68,13 +68,15 @@ const appMessages = {
}, },
comment: { comment: {
title: "Observations", title: "Observations",
label: "Ajout d'une première note", label: "Ajout d'une note",
content: "Rédigez une première note..." content: "Rédigez une première note..."
}, },
confirm: { confirm: {
title: "Confirmation", title: "Confirmation",
text_draft: "Le parcours est actuellement à l'état de ", text_draft: "Le parcours est actuellement à l'état de ",
text_active: "En validant cette étape, vous lui donnez le statut ", text_active: "En validant cette étape, vous lui donnez le statut ",
sure: "Êtes-vous sûr ?",
sure_description: "Une fois le changement confirmé, il n'est plus possible de le remettre à l'état de brouillon !",
ok: "Confirmer le parcours" ok: "Confirmer le parcours"
}, },

View File

@ -180,6 +180,7 @@ let initPromise = getAccompanyingCourse(id)
confirmAccompanyingCourse(id) confirmAccompanyingCourse(id)
.then(response => new Promise((resolve, reject) => { .then(response => new Promise((resolve, reject) => {
commit('confirmAccompanyingCourse', response); commit('confirmAccompanyingCourse', response);
console.log('fetch resolve'); // redirection with #top anchor
resolve(); resolve();
})).catch((error) => { commit('catchError', error) }); })).catch((error) => { commit('catchError', error) });
} }