modal addPerson design, search field: focus and position fixed

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -42,6 +42,9 @@ let getDataPromise = getAccompanyingCourse(id)
             }
          },
          actions: {
+            removeParticipation({ commit }, payload) {
+               commit('removeParticipation', payload);
+            },
             addParticipation({ commit }, payload) {
                commit('addParticipation', payload);               
                postParticipation(id, payload.id).catch((error) => {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -1,31 +1,36 @@
 <template>
-   <button class="sc-button bt-create centered mt-4" 
-      @click="modal.showModal = true">
+   <button class="sc-button bt-create centered mt-4" @click="openModal">
       {{ $t('add_persons.search_add_others_persons') }}
    </button>
    
    <teleport to="body">
-      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">      
+      <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.counter', counter) }}</label>
+            <input class="my-4" v-model="query" name="query" ref="search" 
+               :placeholder="$t('add_persons.search_some_persons')" />
+                  
          </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">
+               
+            <div class="results">
                <person-suggestion v-for="item in suggested.results"
                   v-bind:item="item" 
                   v-bind:key="item.id">
                </person-suggestion>
-            </ul>
+            </div>
                
          </template>
          <template v-slot:footer>
-            <button class="sc-button green" @click="modal.showModal = false">{{ $t('action.save')}}</button>
+            <button class="sc-button green" @click="AddPersons">
+               <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}</button>
          </template>
       </modal>
    </teleport>
@@ -50,6 +55,14 @@ export default {
          }
       }
    },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+         this.$nextTick(function() {
+            this.$refs.search.focus();
+         })
+      }
+   },
    computed: {
       ...mapState(['add_persons']),
       query: {
@@ -66,6 +79,9 @@ export default {
       counter() {
          if (! this.add_persons.suggested.results) { return 0; }
          return this.add_persons.suggested.results.length;
+      },
+      AddPersons() {
+         console.log('add persons');
       }
    }
 }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue

@@ -9,6 +9,9 @@
                <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;">
+               <slot name="body-fixed"></slot>
+            </div>
             <div class="modal-body">
                <slot name="body"></slot>
             </div>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/PersonSuggestion.vue

@@ -1,13 +1,30 @@
 <template>
-   <li>
-      {{ item.text }}
-      {{ item.id }}
-   </li>
+   <div class="list-item">
+      <div>
+         <a class="discret" target="_blank" :href="url.show">{{ item.id }}</a>
+         {{ item.text }}
+      </div>
+      <div class="right_actions">
+         <span class="badge badge-pill badge-secondary" :title="item.id">
+            {{ $t('item.type_person') }}
+         </span>
+         <a class="sc-button bt-show" target="_blank" :title="item.id" :href="url.show"></a>
+         <input class="" type="checkbox" name="" value="" />
+      </div>
+   </div>
 </template>
 
 <script>
 export default {
    name: 'PersonSuggestion',
    props: ['item'],
-}
+   data() {
+      return {
+         url: {
+            show: '/fr/person/' + this.item.id + '/general',
+            edit: '/fr/person/' + this.item.id + '/general/edit'
+         }
+      }
+   },
+};
 </script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js

@@ -5,6 +5,12 @@ const personMessages = {
          title: "Ajouter des usagers",
          counter: "Pas de résultats | 1 résultat | {count} résultats",
          search_some_persons: "Rechercher des personnes..",
+      },
+      item: {
+         type_person: "Usager",
+         type_tms: "TMS",
+         type_3rdparty: "Tiers",
+         type_menage: "Ménage"
       }
    }
 };