From 3d45b6687f098f1ba9f3caa770d214329a7a73e8 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 30 Apr 2021 17:10:12 +0200
Subject: [PATCH] adding addPersons component with modal, search field and
 basic suggestions

---
 .../public/modules/bootstrap/bootstrap.scss   |  2 +-
 .../Resources/public/scss/chillmain.scss      | 11 +++
 .../{api/accompanyingCourse.js => api.js}     |  0
 .../components/PersonsAssociated.vue          | 27 +++----
 .../components/Requestor.vue                  |  4 ++
 .../vuejs/AccompanyingCourse/store/index.js   | 39 +++++++---
 .../Resources/public/vuejs/_api/AddPersons.js | 15 ++++
 .../public/vuejs/_components/AddPersons.vue   | 72 +++++++++++++++++++
 .../vuejs/_components/PersonSuggestion.vue    | 13 ++++
 .../Resources/public/vuejs/_js/i18n.js        |  2 +
 10 files changed, 163 insertions(+), 22 deletions(-)
 rename src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/{api/accompanyingCourse.js => api.js} (100%)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
index 4d3b86ed3..922aa1266 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss
@@ -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";
diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 033e55dbb..104b7c8d1 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -93,3 +93,14 @@ div.vue-component {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
 }
+
+//// AddPersons modal
+ul.results {
+   list-style-type: none;
+   padding-left: 1em;
+   &.suggestions {
+      li {
+         line-height: 26pt;
+      }
+   }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api/accompanyingCourse.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
similarity index 100%
rename from src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api/accompanyingCourse.js
rename to src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index a7b474e8a..14e95e7b1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -21,11 +21,12 @@
          </person-item>
       </tbody>
    </table>
+   <add-persons></add-persons>
    <ul class="record_actions">
       <li>
-         <button class="sc-button bt-create" @click="addPerson">
+         <!--button class="sc-button bt-create" @click="addPerson">
             {{ $t('persons_associated.addPerson') }}
-         </button>
+         </button-->
       </li>
       <li>
          <button class="sc-button orange" @click="savePersons">
@@ -39,28 +40,30 @@
 <script>
 import { mapState } from 'vuex';
 import PersonItem from "./PersonItem.vue"
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
-let SimpsonId = 10000
+//let SimpsonId = 10000
 
 export default {
    name: 'PersonsAssociated',
    components: { 
       PersonItem,
+      AddPersons
    },
    computed: mapState({
       participations: state => state.accompanying_course.participations,
       counter: state => state.accompanying_course.participations.length
    }),
    methods: {
-      addPerson() {
-         console.log('[wip] opening add persons modal');
-         this.$store.dispatch('addParticipation', {
-            id: SimpsonId++,
-            person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
-            startDate: { datetime: "1975-09-15T00:00:00+0100" }, 
-            endDate: { datetime: "1975-09-28T00:00:00+0100" }, 
-         })
-      },
+      //addPerson() {
+      //   console.log('[wip] opening add persons modal');
+      //   this.$store.dispatch('addParticipation', {
+      //      id: SimpsonId++,
+      //      person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
+      //      startDate: { datetime: "1975-09-15T00:00:00+0100" }, 
+      //      endDate: { datetime: "1975-09-28T00:00:00+0100" }, 
+      //   })
+      //},
       removePerson(item) {
          this.$store.dispatch('removeParticipation', item)
       },
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 baa1445ee..58a7c8ffd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -18,6 +18,7 @@
       </li>
    </ul>
    
+   <teleport to="body">
    <modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">      
       <template v-slot:header>
          <h3 class="modal-title">Le titre de ma modale</h3>
@@ -35,7 +36,9 @@
             {{ $t('action.next')}}</button>
       </template>
    </modal>
+   </teleport>
    
+   <teleport to="body">
    <modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">      
       <template v-slot:header>
          <h3 class="modal-title">Une autre modale</h3>
@@ -48,6 +51,7 @@
             {{ $t('action.save')}}</button>
       </template>
    </modal>
+   </teleport>
    <!-- END TESTS -->
    
 </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index 60a71d549..b5efae594 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -1,6 +1,7 @@
 import 'es6-promise/auto';
 import { createStore } from 'vuex';
-import { getAccompanyingCourse, postParticipation } from '../api/accompanyingCourse';
+import { getAccompanyingCourse, postParticipation } from '../api';
+import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons'
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -13,6 +14,10 @@ let getDataPromise = getAccompanyingCourse(id)
          strict: debug,
          state: {
             accompanying_course: accompanying_course,
+            add_persons: {
+               query: "",
+               suggested: []
+            },
             errorMsg: []
          },
          getters: {
@@ -22,23 +27,39 @@ let getDataPromise = getAccompanyingCourse(id)
                console.log('remove item', item.id);
                state.accompanying_course.participations = state.accompanying_course.participations.filter(
                   participation => participation !== item
-               )
+               );
             },
             addParticipation(state, item) {
                console.log('add new item');
-               state.accompanying_course.participations.push(item)
+               state.accompanying_course.participations.push(item);
+            },
+            setQuery(state, query) {
+               console.log('q=', query);
+               state.add_persons = Object.assign({}, state.add_persons, query);
+            },
+            loadSuggestions(state, suggestions) {
+               state.add_persons.suggested = suggestions;
             }
          },
          actions: {
             addParticipation({ commit }, payload) {
-               console.log('payload', payload);
-               commit('addParticipation', payload);
-               
+               commit('addParticipation', payload);               
                postParticipation(id, payload.id).catch((error) => {
-                  commit('removeParticipation', payload)
+                  commit('removeParticipation', payload);
                   state.errorMsg.push(error.message);      
-               }) 
-               // result action ??
+               }) // result action ??
+            },
+            setQuery({ commit }, payload) {
+               commit('setQuery', payload);
+               if (payload.query.length >= 3) {
+                  searchPersons(payload.query)
+                     .then(suggested => new Promise((resolve, reject) => {
+                        commit('loadSuggestions', suggested);
+                        resolve();
+                  }));
+               } else {
+                  commit('loadSuggestions', []);
+               }
             }
          }
       });
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
new file mode 100644
index 000000000..ed288d092
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AddPersons.js
@@ -0,0 +1,15 @@
+const 
+   locale = 'fr',
+   format = 'json'
+;
+
+let searchPersons =  (query) => {
+   let url = `/${locale}/search.${format}?name=person_regular&q=${query}`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
+export { searchPersons };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
new file mode 100644
index 000000000..fa7fac3c6
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -0,0 +1,72 @@
+<template>
+   <button class="sc-button bt-create centered mt-4" 
+      @click="modal.showModal = true">
+      {{ $t('add_persons.search_add_others_persons') }}
+   </button>
+   
+   <teleport to="body">
+      <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>
+            
+            <label style="float: right;">{{ $tc('add_persons.counter', counter) }}</label>
+            
+            <input class="my-4" v-model="query" name="query"
+               :placeholder="$t('add_persons.search_some_persons')" />
+         
+            <ul class="results suggestions">
+               <person-suggestion v-for="item in suggested.results"
+                  v-bind:item="item" 
+                  v-bind:key="item.id">
+               </person-suggestion>
+            </ul>
+               
+         </template>
+         <template v-slot:footer>
+            <button class="sc-button green" @click="modal.showModal = false">{{ $t('action.save')}}</button>
+         </template>
+      </modal>
+   </teleport>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import Modal from 'ChillPersonAssets/vuejs/_components/Modal';
+import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
+
+export default {
+   name: 'AddPersons',
+   components: {
+      Modal,
+      PersonSuggestion,
+   },
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         }
+      }
+   },
+   computed: {
+      ...mapState(['add_persons']),
+      query: {
+         set(query) {
+            this.$store.dispatch('setQuery', { query });
+         },
+         get() {
+            return this.add_persons.query;
+         }
+      },
+      suggested() {
+         return this.add_persons.suggested;
+      },
+      counter() {
+         if (! this.add_persons.suggested.results) { return 0; }
+         return this.add_persons.suggested.results.length;
+      }
+   }
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue
new file mode 100644
index 000000000..8d15d8d81
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue
@@ -0,0 +1,13 @@
+<template>
+   <li>
+      {{ item.text }}
+      {{ item.id }}
+   </li>
+</template>
+
+<script>
+export default {
+   name: 'PersonSuggestion',
+   props: ['item'],
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
index 270d0bd2a..a153841ba 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js
@@ -3,6 +3,8 @@ const personMessages = {
       add_persons: {
          search_add_others_persons: "Rechercher et ajouter d'autres usagers",
          title: "Ajouter des usagers",
+         counter: "Pas de résultats | 1 résultat | {count} résultats",
+         search_some_persons: "Rechercher des personnes..",
       }
    }
 };