From d18922ed985bce9bda9a8816be3dcb59502138eb Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 29 Apr 2021 12:54:27 +0200
Subject: [PATCH] permit multiple modals in same component

---
 .../components/Requestor.vue                  | 40 +++++++++++++++----
 .../public/vuejs/_components/Modal.vue        |  2 +-
 2 files changed, 34 insertions(+), 8 deletions(-)

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 89eb4525f..a7d017c04 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -5,11 +5,20 @@
    {{ accompanying_course.remark }}<br><br>
    
    <!-- TESTS AREA -->
-   <button id="show-modal" class="sc-button bt-create" @click="showModal = true">
-      {{ $t('action.showModal') }}
-   </button>
+   <ul class="record_actions">
+      <li>
+         <button class="sc-button bt-create" @click="modal1.showModal = true">
+            {{ $t('action.showModal') }}
+         </button>
+      </li>
+      <li>
+         <button class="sc-button bt-create" @click="modal2.showModal = true">
+            Ouvrir une seconde modale
+         </button>
+      </li>
+   </ul>
    
-   <modal v-if="showModal" @close="showModal = false" :modalDialogClass="modalDialogClass">
+   <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
       <template v-slot:header>
          <h3 class="modal-title">Le titre de ma modale</h3>
       </template>
@@ -22,7 +31,18 @@
          <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="showModal = false">{{ $t('action.save')}}</button>
+         <button class="sc-button green" @click="modal1.showModal = false">{{ $t('action.save')}}</button>
+      </template>
+   </modal>
+   
+   <modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
+      <template v-slot:header>
+         <h3 class="modal-title">Une autre modale</h3>
+      </template>
+      <template v-slot:body>
+         <p>modal 2</p>
+      </template>
+      <template v-slot:footer>
       </template>
    </modal>
    <!-- END TESTS -->
@@ -40,8 +60,14 @@ export default {
    },
    data() {
       return {
-         showModal: false,
-         modalDialogClass: "modal-dialog modal-dialog-scrollable modal-xl"  // modal-lg modal-md modal-sm
+         modal1: {
+            showModal: false,
+            modalDialogClass: "modal-dialog 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
+         }
       }
    },
    computed: {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
index 04afcd398..2945f9f78 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
@@ -35,7 +35,7 @@
  */
 export default {
    name: 'Modal',
-   props: ['showModal', 'modalDialogClass'],
+   props: ['modalDialogClass'],
    emits: ['close']
 }
 </script>