From e521d06702ce7d3eb418aba7bab3379440448ffb Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 9 May 2021 00:28:28 +0200
Subject: [PATCH] addpersons better ux with reset and selectall features

---
 .../Resources/public/scss/chillmain.scss      | 55 +++++++++-----
 .../public/vuejs/_components/Modal.vue        |  4 +-
 .../public/vuejs/_components/AddPersons.vue   | 75 +++++++++++++------
 3 files changed, 88 insertions(+), 46 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 63825ec6c..9ae26379e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -104,30 +104,45 @@ 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;
+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;
+         }
       }
-      i {
-         position: absolute;
-         top: 50%; 
-         left: 0.5em;
-         padding: 0.65em 0;
-         opacity: 0.5;
-      }
-         
+   }
+   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.count {
-      margin: -0.5em 0 0.7em;
-      display: flex;
-      justify-content: space-between;
-   }
    div.list-item {
       line-height: 26pt;
       padding: 0.3em 0.8em;
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
index cbd2d0738..e6c1475e2 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
@@ -9,8 +9,8 @@
                <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 class="body-head">
+               <slot name="body-head"></slot>
             </div>
             <div class="modal-body">
                <slot name="body"></slot>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index de2a1f6f3..eb62c0d7d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -12,35 +12,48 @@
             <h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
          </template>
 
-         <template v-slot:body-fixed>
-            <div class="search">
-               <label style="float: right;">
-                  {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
-               </label>
+         <template v-slot:body-head>
+            <div class="modal-body">
+               <div class="search">
+                  
+                  <label style="float: right;">
+                     {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
+                  </label>
 
-               <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>
+                  <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>
+                  <i class="fa fa-times" v-if="queryLength >= 3" @click="resetSuggestion"></i>
+
+               </div>
+            </div>
+            <div class="modal-body">
+               <div class="count">
+               
+                  <span>
+                     <a v-if="suggestedCounter > 2" @click="selectAll">
+                        {{ $t('action.check_all')}}
+                     </a>
+                     <a v-if="selectedCounter > 0" @click="resetSelection">
+                        <i v-if="suggestedCounter > 0"> • </i>
+                        {{ $t('action.reset')}}
+                     </a>
+                  </span>
+                  
+                  <span v-if="selectedCounter > 0">
+                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
+                  </span>
+                  
+               </div>
             </div>
          </template>
 
          <template v-slot:body>
             <!--span class="discret">Selection: {{ selected }}</span-->
             <div class="results">
-               <div class="count">
-                  <span>
-                     <a  v-if="suggestedCounter > 0" href="#">
-                        {{ $t('action.check_all')}}</a>
-                     <a  v-if="selectedCounter > 0" href="#">
-                        {{ $t('action.reset')}}</a>
-                  </span>
-                  <span v-if="selectedCounter > 0">
-                     {{ $tc('add_persons.selected_counter', selectedCounter) }}
-                  </span>
-               </div>
 
                <person-suggestion
                   v-for="item in this.selectedAndSuggested.slice().reverse()"
@@ -105,6 +118,9 @@ export default {
             return this.search.query;
          }
       },
+      queryLength() {
+         return this.search.query.length;
+      },
       suggested() {
          return this.search.suggested;
       },
@@ -141,7 +157,7 @@ export default {
          })
       },
       setQuery(query) {
-         console.log('options 1', this.options);
+         //console.log('options 1', this.options);
          this.search.query = query;
          if (query.length >= 3) {
             searchPersons({ query, options: this.options })
@@ -160,9 +176,20 @@ export default {
          this.search.selected = value;
       },
       resetSearch() {
-         this.search.selected = [];
+         this.resetSelection();
+         this.resetSuggestion();
+      },
+      resetSuggestion() {
          this.search.query = "";
          this.search.suggested = [];
+      },
+      resetSelection() {
+         this.search.selected = [];
+      },
+      selectAll() {
+         this.search.suggested.forEach(function(item) {
+            this.search.selected.push(item);
+         }, this);
       }
    },
 }