From b018a50a7ee83c182d86a39765a3e4147266a8b7 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Wed, 19 May 2021 13:41:51 +0200
Subject: [PATCH] encore_entry_link_tags allows to use <style scoped> in vue
 files

---
 .../Resources/public/scss/chillmain.scss      | 142 +-----------------
 .../public/vuejs/_components/Modal.vue        |  95 ++++++++----
 .../public/vuejs/AccompanyingCourse/App.vue   |  22 ++-
 .../components/ToggleFlags.vue                |  14 ++
 .../public/vuejs/_components/AddPersons.vue   |  41 +++++
 .../AddPersons/PersonSuggestion.vue           |  43 +++++-
 .../views/AccompanyingCourse/show.html.twig   |   6 +-
 7 files changed, 188 insertions(+), 175 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index f5eb1dc09..6cf4d23f2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -49,148 +49,8 @@ div.subheader {
    }
 }
 
-//// VUEJS ////
-div.vue-component {
-  padding: 1.5em;
-  margin: 2em 0;
-  border: 2px dashed grey;
-  position: relative;
-  &:before {
-    content: "vuejs component";
-    position: absolute;
-    left: 1.5em;
-    top: -0.9em;
-    background-color: white;
-    color: grey;
-    padding: 0 0.3em;
-  }
-  dd { margin-left: 1em; }
-}
-
-//// MODAL ////
-.modal-mask {
-   position: fixed;
-   z-index: 9998;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background-color: rgba(0, 0, 0, 0.75);
-   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
-* transition="modal" when their visibility is toggled
-* by Vue.js.
-*
-* You can easily play with the modal transition by editing
-* these styles.
-*/
-.modal-enter {
-   opacity: 0;
-}
-.modal-leave-active {
-   opacity: 0;
-}
-.modal-enter .modal-container,
-.modal-leave-active .modal-container {
-   -webkit-transform: scale(1.1);
-   transform: scale(1.1);
-}
-
-//// AddPersons modal
-div.body-head {
-   overflow-y: unset;
-   div.modal-body:first-child {
-      margin: auto 4em;
-      div.search {
-         position: relative;
-         input { 
-            padding: 1.2em 1.5em 1.2em 2.5em;
-            margin: 1em 0;
-         }
-         i {
-            position: absolute;
-            opacity: 0.5;
-            padding: 0.65em 0;
-            top: 50%; 
-         }
-         i.fa-search {
-            left: 0.5em;
-         }
-         i.fa-times {
-            right: 1em;
-            padding: 0.75em 0;
-            cursor: pointer;
-         }
-      }
-   }
-   div.modal-body:last-child {
-      padding-bottom: 0;
-   }
-}
-div.count {
-   margin: -0.5em 0 0.7em;
-   display: flex;
-   justify-content: space-between;
-   a {
-      cursor: pointer;
-   }
-}
-div.results {   
-   div.list-item {
-      padding: 0.4em 0.8em;
-      display: flex;
-      flex-direction: row;
-      &.checked {
-         background-color: #ececec;
-         border-bottom: 1px dotted #8b8b8b;
-      }
-      div.container {
-         & > input {
-            margin-right: 0.8em;
-         }
-         span:not(.name) {
-            margin-left: 0.5em;
-            opacity: 0.5;
-            font-size: 90%;
-            font-style: italic;
-         }
-      }
-      div.right_actions {
-         margin: 0 0 0 auto;
-         display: flex;
-         align-items: flex-end;
-         & > * {
-            margin-left: 0.5em;
-            align-self: baseline;
-         }
-         a.sc-button {
-            border: 1px solid lightgrey;
-            font-size: 70%;
-            padding: 4px;
-         } 
-      }
-   }
-}
+//// à ranger
 .discret {
    color: grey;
    margin-right: 1em;
 }
-
-a.flag-toggle {
-   color: white;
-   padding: 0 10px;
-   cursor: pointer;
-   &:hover {
-      color: white;
-      //border: 1px solid rgba(255,255,255,0.2);
-      text-decoration: underline;
-      border-radius: 20px;
-   }
-}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index e6c1475e2..7498d66f3 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -1,41 +1,40 @@
 <template>
-<transition name="modal">
-   <div class="modal-mask">
-      <!-- :: styles bootstrap :: -->
-      <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>
-            </div>
-            <div class="body-head">
-               <slot name="body-head"></slot>
-            </div>
-            <div class="modal-body">
-               <slot name="body"></slot>
-            </div>
-            <div class="modal-footer">
-               <button class="sc-button cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
-               <slot name="footer"></slot>
+   <transition name="modal">
+      <div class="modal-mask">
+         <!-- :: styles bootstrap :: -->
+         <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>
+               </div>
+               <div class="body-head">
+                  <slot name="body-head"></slot>
+               </div>
+               <div class="modal-body">
+                  <slot name="body"></slot>
+               </div>
+               <div class="modal-footer">
+                  <button class="sc-button cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
+                  <slot name="footer"></slot>
+               </div>
             </div>
          </div>
+         <!-- :: end styles bootstrap :: -->
       </div>
-      <!-- :: end styles bootstrap :: -->
-   </div>
-</transition>
+   </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.6 _modal.scss module
- *      => using bootstrap css classes, the modal have a responsive behaviour, 
- *      => modal design can be configured using css classes (size, scroll)
+ *    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
+ *    and 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)
  */
 export default {
    name: 'Modal',
@@ -43,3 +42,39 @@ export default {
    emits: ['close']
 }
 </script>
+
+<style lang="scss">
+   .modal-mask {
+      position: fixed;
+      z-index: 9998;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.75);
+      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
+   * transition="modal" when their visibility is toggled
+   * by Vue.js.
+   *
+   * You can easily play with the modal transition by editing
+   * these styles.
+   */
+   .modal-enter {
+      opacity: 0;
+   }
+   .modal-leave-active {
+      opacity: 0;
+   }
+   .modal-enter .modal-container,
+   .modal-leave-active .modal-container {
+      -webkit-transform: scale(1.1);
+      transform: scale(1.1);
+   }
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 758b49313..ce413290f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -12,7 +12,6 @@
 
 <script>
 import { mapState } from 'vuex'
-
 import AccompanyingCourse from './components/AccompanyingCourse.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
@@ -41,3 +40,24 @@ export default {
    ])
 };
 </script>
+
+<style lang="scss" scoped>
+   div.vue-component {
+      padding: 1.5em;
+      margin: 2em 0;
+      border: 2px dashed grey;
+      position: relative;
+      &:before { 
+         content: "vuejs component";
+         position: absolute;
+         left: 1.5em;
+         top: -0.9em;
+         background-color: white;
+         color: grey;
+         padding: 0 0.3em;
+      }
+      dd { 
+         margin-left: 1em; 
+      }
+   }
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
index ac5960d19..5dfcaf67c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
@@ -66,3 +66,17 @@ export default {
    }
 }
 </script>
+
+<style lang="scss" scoped>
+   a.flag-toggle {
+      color: white;
+      padding: 0 10px;
+      cursor: pointer;
+      &:hover {
+         color: white;
+         //border: 1px solid rgba(255,255,255,0.2);
+         text-decoration: underline;
+         border-radius: 20px;
+      }
+   }
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 83143f1b5..18d9043ee 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -207,3 +207,44 @@ export default {
    },
 }
 </script>
+
+<style lang="scss">
+   div.body-head {
+      overflow-y: unset;
+      div.modal-body:first-child {
+         margin: auto 4em;
+         div.search {
+            position: relative;
+            input { 
+               padding: 1.2em 1.5em 1.2em 2.5em;
+               margin: 1em 0;
+            }
+            i {
+               position: absolute;
+               opacity: 0.5;
+               padding: 0.65em 0;
+               top: 50%; 
+            }
+            i.fa-search {
+               left: 0.5em;
+            }
+            i.fa-times {
+               right: 1em;
+               padding: 0.75em 0;
+               cursor: pointer;
+            }
+         }
+      }
+      div.modal-body:last-child {
+         padding-bottom: 0;
+      }
+      div.count {
+         margin: -0.5em 0 0.7em;
+         display: flex;
+         justify-content: space-between;
+         a {
+            cursor: pointer;
+         }
+      }
+   }
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
index d71fce599..3846f7b39 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue
@@ -7,7 +7,7 @@
                v-model="selected"
                name="item"
                v-bind:id="item"
-               v-bind:value="setValueIfType(item, type)" />
+               v-bind:value="setValueByType(item, type)" />
          </div>
             
          <suggestion-person 
@@ -54,9 +54,48 @@ export default {
       },
    },
    methods: {
-      setValueIfType(value, type) {
+      setValueByType(value, type) {
          return (type === 'radio')? [value] : value;
       }
    }
 };
 </script>
+
+<style lang="scss">
+   div.results {   
+      div.list-item {
+         padding: 0.4em 0.8em;
+         display: flex;
+         flex-direction: row;
+         &.checked {
+            background-color: #ececec;
+            border-bottom: 1px dotted #8b8b8b;
+         }
+         div.container {
+            & > input {
+               margin-right: 0.8em;
+            }
+            span:not(.name) {
+               margin-left: 0.5em;
+               opacity: 0.5;
+               font-size: 90%;
+               font-style: italic;
+            }
+         }
+         div.right_actions {
+            margin: 0 0 0 auto;
+            display: flex;
+            align-items: flex-end;
+            & > * {
+               margin-left: 0.5em;
+               align-self: baseline;
+            }
+            a.sc-button {
+               border: 1px solid lightgrey;
+               font-size: 70%;
+               padding: 4px;
+            } 
+         }
+      }
+   }
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
index 427f5f0ac..76b6e1d4e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
@@ -6,7 +6,11 @@
 
 {% block content %}
    <h1>{{ block('title') }}</h1>
-   <div id="accompanying-course"></div>    
+   <div id="accompanying-course"></div> {#  <== insert accompanyingCourse vue component  #}
+{% endblock %}
+
+{% block css %}
+   {{ encore_entry_link_tags('accompanying_course') }}
 {% endblock %}
 
 {% block js %}