From 2050460bb3c3cd621b90a13942ca39047d153b00 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 29 Apr 2021 10:33:15 +0200
Subject: [PATCH] add modal system, added/removed managed by vue, appearence
 managed by bootstrap

Modal component is an hybrid solution between :
- Vue3 modal implementation
  => 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
  => using bootstrap css classes, the modal have a responsive behaviour,
  => modal design can be configured using css classes (size, scroll)

See
* https://v3.vuejs.org/examples/modal.html#modal-component
* https://github.com/bootstrap-vue/bootstrap-vue/issues/5196
---
 .../Resources/public/scss/chillmain.scss      | 26 +------------
 .../components/Requestor.vue                  | 37 +++++++------------
 .../public/vuejs/_components/Modal.vue        | 30 +++++++++------
 .../vuejs/_components/ModalBootstrap.vue      | 36 ------------------
 4 files changed, 34 insertions(+), 95 deletions(-)
 delete mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/ModalBootstrap.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index ca7dde4a4..25638ec78 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -66,34 +66,10 @@ div.vue-component {
    left: 0;
    width: 100%;
    height: 100%;
-   background-color: rgba(0, 0, 0, 0.5);
+   background-color: rgba(0, 0, 0, 0.6);
    display: table;
    transition: opacity 0.3s ease;
 }
-.modal-wrapper {
-   display: table-cell;
-   vertical-align: middle;
-}
-.modal-container {
-   width: 500px;
-   margin: 0px auto;
-   background-color: #fff;
-   border-radius: 0px;
-   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
-   transition: all 0.3s ease;
-   font-family: Helvetica, Arial, sans-serif;
-}
-.modal-header h2 {
-   margin-top: 0;
-   color: #42b983;
-}
-.modal-body {
-   margin: 0;
-}
-.modal-default-button {
-   display: block;
-   margin-top: 1rem;
-}
 
 /*
 * 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 416c6ed42..89eb4525f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -3,54 +3,45 @@
    <h3>{{ $t('title.requestor') }}</h3>
    {{ accompanying_course.id }}
    {{ accompanying_course.remark }}<br><br>
-
    
-   <!--button id="show-modal" class="sc-button bt-create"
-      @click="showModal = true">{{ $t('action.showModal') }}
-   </button-->
-   
-   <button id="show-modal" class="sc-button bt-create" 
-      data-toggle="modal" data-target="#myModal"
-      @click="showModal = true">
+   <!-- TESTS AREA -->
+   <button id="show-modal" class="sc-button bt-create" @click="showModal = true">
       {{ $t('action.showModal') }}
    </button>
-
-   <!--modal v-if="showModal" @close="showModal = false">
-   </modal-->
    
-   <modal-bootstrap v-if="showModal" @close="showModal = false">
+   <modal v-if="showModal" @close="showModal = false" :modalDialogClass="modalDialogClass">
       <template v-slot:header>
-         <h5 class="modal-title">Le titre de ma modale</h5>
+         <h3 class="modal-title">Le titre de ma modale</h3>
       </template>
       <template v-slot:body>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
          <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>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <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>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <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>
-         <li>
-            <button class="sc-button green" 
-               @click="$emit('close')">{{ $t('action.ok')}}
-            </button>
-         </li>
+         <button class="sc-button green" @click="showModal = false">{{ $t('action.save')}}</button>
       </template>
-   </modal-bootstrap>
+   </modal>
+   <!-- END TESTS -->
    
 </div>
 </template>
 
 <script>
 import Modal from 'ChillPersonAssets/vuejs/_components/Modal'
-import ModalBootstrap from 'ChillPersonAssets/vuejs/_components/ModalBootstrap'
 
 export default {
    name: 'Requestor',
    components: {
-      //Modal,
-      ModalBootstrap
+      Modal,
    },
    data() {
       return {
-         showModal: false
+         showModal: false,
+         modalDialogClass: "modal-dialog modal-dialog-scrollable modal-xl"  // 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 75107b1b1..04afcd398 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
@@ -1,33 +1,41 @@
 <template>
 <transition name="modal">
    <div class="modal-mask">
-      <div class="modal-wrapper">
-         <div class="modal-container">
+      <!-- :: styles bootstrap :: -->
+      <div :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>
             </div>
             <div class="modal-body">
                <slot name="body"></slot>
             </div>
             <div class="modal-footer">
-               <ul class="record_actions">
-                  <slot name="footer"></slot>
-                  <li>
-                     <button class="sc-button grey" @click="$emit('close')">
-                        {{ $t('action.close') }}
-                     </button>
-                  </li>
-               </ul>
+               <button class="sc-button cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
+               <slot name="footer"></slot>
             </div>
          </div>
       </div>
+      <!-- :: end styles bootstrap :: -->
    </div>
 </transition>
 </template> 
 
 <script>
+/*
+ *    This Modal component is a mix between :
+ *    - Vue3 modal implementation 
+ *      => 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
+ *      => using bootstrap css classes, the modal have a responsive behaviour, 
+ *      => modal design can be configured using css classes (size, scroll)
+ */
 export default {
    name: 'Modal',
-   props: ['showModal']
+   props: ['showModal', 'modalDialogClass'],
+   emits: ['close']
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/ModalBootstrap.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/ModalBootstrap.vue
deleted file mode 100644
index bb2e04491..000000000
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/ModalBootstrap.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-<transition name="modal-bootstrap">
-<div id="myModal" class="modal"><!--  tabindex="-1" role="dialog" -->
-   <div class="modal-dialog" role="document">
-      <div class="modal-content">
-         <div class="modal-header">
-            <slot name="header">
-               <h5 class="modal-title">Modal title</h5>
-            </slot>
-            <!--button type="button" class="close" data-dismiss="modal" aria-label="Close">
-               <span aria-hidden="true">&times;</span>
-            </button-->
-         </div>
-         <div class="modal-body">
-            <slot name="body"></slot>
-         </div>
-         <div class="modal-footer">
-            <!--button type="button" class="sc-button grey" data-dismiss="modal">Close</button>
-            <button type="button" class="sc-button green">Save changes</button-->
-            <button class="sc-button grey" @click="$emit('close')">
-               {{ $t('action.close') }}
-            </button>
-         </div>
-      </div>
-   </div>
-</div>
-</transition>
-</template> 
-
-<script>
-export default {
-   name: 'ModalBootstrap',
-   props: ['showModal'],
-   emits: ['close']
-}
-</script>