From 25bd170f6b0aaef0674a3a6fb8c4349cd35d591a Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 29 Apr 2021 15:42:31 +0200
Subject: [PATCH] improve modal system, test when a modal call next modal

---
 .../ChillMainBundle/Resources/public/scss/chillmain.scss | 3 +++
 .../vuejs/AccompanyingCourse/components/Requestor.vue    | 9 ++++++---
 .../Resources/public/vuejs/AccompanyingCourse/js/i18n.js | 5 ++++-
 .../Resources/public/vuejs/_components/Modal.vue         | 7 ++++---
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 25638ec78..033e55dbb 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -70,6 +70,9 @@ div.vue-component {
    display: table;
    transition: opacity 0.3s ease;
 }
+.modal-header .close { // bootstrap classes, override sc-button 0 radius
+   border-top-right-radius: 0.3rem;
+} 
 
 /*
 * The following styles are auto-applied to elements with
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index a7d017c04..7e082d5b1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -31,7 +31,8 @@
          <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
       </template>
       <template v-slot:footer>
-         <button class="sc-button green" @click="modal1.showModal = false">{{ $t('action.save')}}</button>
+         <button class="sc-button green" @click="modal1.showModal = false; modal2.showModal = true">
+            {{ $t('action.next')}}</button>
       </template>
    </modal>
    
@@ -43,6 +44,8 @@
          <p>modal 2</p>
       </template>
       <template v-slot:footer>
+         <button class="sc-button green" @click="modal2.showModal = false">
+            {{ $t('action.save')}}</button>
       </template>
    </modal>
    <!-- END TESTS -->
@@ -62,11 +65,11 @@ export default {
       return {
          modal1: {
             showModal: false,
-            modalDialogClass: "modal-dialog modal-dialog-scrollable modal-xl"  // modal-lg modal-md modal-sm
+            modalDialogClass: "modal-dialog-scrollable modal-xl"  // modal-lg modal-md modal-sm
          },
          modal2: {
             showModal: false,
-            modalDialogClass: "modal-dialog modal-dialog-centered modal-sm"  // modal-lg modal-md modal-sm
+            modalDialogClass: "modal-dialog-centered modal-sm"  // modal-lg modal-md modal-sm
          }
       }
    },
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 440bd9ff8..9cfa8f10d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -34,7 +34,10 @@ const messages = {
          showModal: "Ouvrir une modale",
          ok: "OK",
          cancel: "Annuler",
-         close: "Fermer"
+         close: "Fermer",
+         next: "Suivant",
+         previous: "Précédent",
+         back: "Retour"
       }
    }
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
index 2945f9f78..494735e5c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
@@ -2,11 +2,12 @@
 <transition name="modal">
    <div class="modal-mask">
       <!-- :: styles bootstrap :: -->
-      <div :class="modalDialogClass">
+      <div class="modal-dialog" :class="modalDialogClass">
          <div class="modal-content">
             <div class="modal-header">
                <slot name="header"></slot>
-               <button class="close sc-button grey" @click="$emit('close')"><i class="fa fa-times" aria-hidden="true"></i></button>
+               <button class="close sc-button grey" @click="$emit('close')">
+                  <i class="fa fa-times" aria-hidden="true"></i></button>
             </div>
             <div class="modal-body">
                <slot name="body"></slot>
@@ -29,7 +30,7 @@
  *      => with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
  *      => with slot we can pass content from parent component
  *      => some classes are passed from parent component
- *    - Bootstrap 4.4 _modal.scss module
+ *    - Bootstrap 4.6 _modal.scss module
  *      => using bootstrap css classes, the modal have a responsive behaviour, 
  *      => modal design can be configured using css classes (size, scroll)
  */