adding addPersons component with modal, search field and basic suggestions

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)
       },

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>

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', []);
+               }
             }
          }
       });