From ac550e05e81996ad3944e886c2263c276ca272c7 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Wed, 5 May 2021 09:29:57 +0200
Subject: [PATCH] improve addPersons modal ux

---
 .../Resources/public/scss/chillmain.scss      | 23 +++++++++-
 .../Resources/public/vuejs/_js/i18n.js        |  1 +
 .../public/vuejs/_components/AddPersons.vue   | 46 +++++++++++--------
 .../public/vuejs/_components/Modal.vue        |  2 +-
 4 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 288cdcf89..568268b0c 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -95,7 +95,28 @@ div.vue-component {
 }
 
 //// 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;;
+   }
    div.list-item {
       line-height: 26pt;
       padding: 0.3em 0.8em;
@@ -103,7 +124,7 @@ div.results {
       flex-direction: row;
       &.checked {
          background-color: #ececec;
-         border-bottom: 1px dotted #d9d9d9;
+         border-bottom: 1px dotted #8b8b8b;
       }
       div.container {
          & > input {
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index 39933ec0f..b6f80daf4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -36,6 +36,7 @@ const messages = {
          next: "Suivant",
          previous: "Précédent",
          back: "Retour",
+         check_all: "cocher tout"
       },
    }
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 6f17f32fc..7b57c0dc8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -4,46 +4,54 @@
    </button>
    
    <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" 
+      <modal v-if="modal.showModal" 
+         :modalDialogClass="modal.modalDialogClass" 
          @close="modal.showModal = false">      
+            
          <template v-slot:header>
-            
             <h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
-
          </template>
+
          <template v-slot:body-fixed>
-
-            <label style="float: right;">
-               {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
-            </label>
-            
-            <input class="my-4" 
-               name="query" 
-               ref="search" 
-               v-model="query" 
-               :placeholder="$t('add_persons.search_some_persons')" />
+            <div class="search">
+               <label style="float: right;">
+                  {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
+               </label>
                
-            <div v-if="selectedCounter > 0">
-               {{ $tc('add_persons.selected_counter', selectedCounter) }}
+               <input id="search-persons"
+                  name="query" 
+                  v-model="query" 
+                  :placeholder="$t('add_persons.search_some_persons')" 
+                  ref="search" />
+               <i class="fa fa-search fa-lg"></i>
             </div>
-                  
          </template>
-         <template v-slot:body>
                
+         <template v-slot:body>
             <!--span class="discret">Selection: {{ selected }}</span-->
             <div class="results">
+               <div class="count">
+                  <span v-if="suggestedCounter > 0" style="">
+                        <a href="#">{{ $t('action.check_all')}}</a>
+                  </span>
+                  <span v-if="selectedCounter > 0" style="float:right;">
+                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
+                  </span>
+               </div>
                <person-suggestion 
                   v-for="item in this.selectedAndSuggested"
                   v-bind:item="item" 
                   v-bind:key="item.id">
                </person-suggestion>
             </div>
-               
          </template>
+               
          <template v-slot:footer>
             <button class="sc-button green" @click="addPersons">
-               <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}</button>
+               <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
+            </button>
          </template>
+         
       </modal>
    </teleport>
 </template>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
index ce3f58553..cbd2d0738 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
@@ -9,7 +9,7 @@
                <button class="close sc-button grey" @click="$emit('close')">
                   <i class="fa fa-times" aria-hidden="true"></i></button>
             </div>
-            <div class="modal-body" style="overflow-y: unset;">
+            <div class="modal-body up" style="overflow-y: unset;">
                <slot name="body-fixed"></slot>
             </div>
             <div class="modal-body">