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>