Merge remote-tracking branch 'origin/fix-getParticipationsContainsPerson' into fix-person-tests

src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss

@@ -28,7 +28,7 @@
 // @import "bootstrap/scss/card";
 // @import "bootstrap/scss/breadcrumb";
 // @import "bootstrap/scss/pagination";
-// @import "bootstrap/scss/badge";
+@import "bootstrap/scss/badge";
 // @import "bootstrap/scss/jumbotron";
 // @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/progress";
@@ -41,7 +41,7 @@
 // @import "bootstrap/scss/popover";
 // @import "bootstrap/scss/carousel";
 // @import "bootstrap/scss/spinners";
-// @import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities";
 // @import "bootstrap/scss/print";
 
 @import "custom";

src/Bundle/ChillMainBundle/Resources/public/modules/scratch/custom/modules/_buttons.scss

@@ -5,7 +5,7 @@
         @include button($green, $white);
     }
 
-    &.bt-reset, &.bt-delete {
+    &.bt-reset, &.bt-delete, &.bt-remove {
         @include button($red, $white);
     }
 
@@ -24,6 +24,7 @@
         &.bt-save::before,
         &.bt-new::before,
         &.bt-delete::before,
+        &.bt-remove::before,
         &.bt-update::before,
         &.bt-edit::before,
         &.bt-cancel::before,
@@ -56,7 +57,12 @@
             // add a trash
             content: "";
         }
-
+        
+       &.bt-remove::before {
+           // add a times
+           content: "";
+       }
+                
         &.bt-edit::before, &.bt-update::before {
             // add a pencil
             content: "";
@@ -94,6 +100,7 @@
             &.bt-save::before,
             &.bt-new::before,
             &.bt-delete::before,
+            &.bt-remove::before,
             &.bt-update::before,
             &.bt-edit::before,
             &.bt-cancel::before,
@@ -123,6 +130,7 @@
             &.bt-save::before,
             &.bt-new::before,
             &.bt-delete::before,
+            &.bt-remove::before,
             &.bt-update::before,
             &.bt-edit::before,
             &.bt-cancel::before,

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -39,6 +39,8 @@ div.subheader {
   height: 130px;
 }
 
+//// VUEJS ////
+
 div.vue-component {
   padding: 1.5em;
   margin: 2em 0;
@@ -55,3 +57,97 @@ div.vue-component {
   }
   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.modal-body.up {
+   margin: auto 4em;
+   div.search {
+      position: relative;
+      input { 
+         padding: 1.2em 1.5em 1.2em 2.5em;
+         margin: 1em 0;
+      }
+      i {
+         position: absolute;
+         top: 50%; 
+         left: 0.5em;
+         padding: 0.65em 0;
+         opacity: 0.5;
+      }
+         
+   }
+}
+div.results {
+   div.count {
+      margin: -0.5em 0 0.7em;
+      display: flex;
+      justify-content: space-between;
+   }
+   div.list-item {
+      line-height: 26pt;
+      padding: 0.3em 0.8em;
+      display: flex;
+      flex-direction: row;
+      &.checked {
+         background-color: #ececec;
+         border-bottom: 1px dotted #8b8b8b;
+      }
+      div.container {
+         & > input {
+            margin-right: 0.8em;
+         }
+      }
+      div.right_actions {
+         margin: 0 0 0 auto;
+         & > * {
+            margin-left: 0.5em;
+         }
+         a.sc-button {
+            border: 1px solid lightgrey;
+            font-size: 70%;
+            padding: 4px;
+         } 
+      }
+   }
+}
+
+.discret {
+   color: grey;
+   margin-right: 1em;
+}

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue

@@ -0,0 +1,45 @@
+<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="modal-body up" style="overflow-y: unset;">
+               <slot name="body-fixed"></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>
+</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)
+ */
+export default {
+   name: 'Modal',
+   props: ['modalDialogClass'],
+   emits: ['close']
+}
+</script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js

@@ -0,0 +1,55 @@
+import { createI18n } from 'vue-i18n'
+
+const datetimeFormats = {
+   fr: {
+      short: {
+         year: "numeric",
+         month: "numeric",
+         day: "numeric"
+      },
+      long: {
+         year: "numeric",
+         month: "short",
+         day: "numeric",
+         weekday: "short",
+         hour: "numeric",
+         minute: "numeric",
+         hour12: false
+      }
+   }
+};
+const messages = {
+   fr: {
+      action: {
+         actions: "Actions",
+         show: "Voir",
+         edit: "Modifier",
+         create: "Créer",
+         remove: "Enlever",
+         delete: "Supprimer",
+         save: "Enregistrer",
+         add: "Ajouter",
+         show_modal: "Ouvrir une modale",
+         ok: "OK",
+         cancel: "Annuler",
+         close: "Fermer",
+         next: "Suivant",
+         previous: "Précédent",
+         back: "Retour",
+         check_all: "cocher tout",
+         reset: "réinitialiser"
+      },
+   }
+};
+
+const _createI18n = (appMessages) => {
+   Object.assign(messages.fr, appMessages.fr);
+   return createI18n({
+      locale: 'fr',
+      fallbackLocale: 'fr',
+      datetimeFormats,
+      messages,
+   })
+};
+
+export { _createI18n }