modal addPerson design, search field: focus and position fixed

src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/bootstrap.scss

@@ -28,7 +28,7 @@
 // @import "bootstrap/scss/card";
 // @import "bootstrap/scss/breadcrumb";
 // @import "bootstrap/scss/pagination";
-// @import "bootstrap/scss/badge";
+@import "bootstrap/scss/badge";
 // @import "bootstrap/scss/jumbotron";
 // @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/progress";

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -66,7 +66,7 @@ div.vue-component {
    left: 0;
    width: 100%;
    height: 100%;
-   background-color: rgba(0, 0, 0, 0.6);
+   background-color: rgba(0, 0, 0, 0.75);
    display: table;
    transition: opacity 0.3s ease;
 }
@@ -95,12 +95,29 @@ div.vue-component {
 }
 
 //// AddPersons modal
-ul.results {
-   list-style-type: none;
-   padding-left: 1em;
-   &.suggestions {
-      li {
-         line-height: 26pt;
+div.results {
+   padding: 0 1.3em;
+   div.list-item {
+      line-height: 26pt;
+      display: flex;
+      flex-direction: row;
+      div.right_actions {
+         margin: 0 0 0 auto;
+         & > * {
+            margin-left: 0.5em;
+         }
+         a.sc-button {
+            border: 1px solid lightgrey;
+            font-size: 70%;
+            padding: 4px;
+         }
+         span {
+         } 
       }
    }
 }
+
+a.discret {
+   color: grey;
+   margin-right: 1em;
+}

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

@@ -28,13 +28,14 @@ const messages = {
          remove: "Enlever",
          delete: "Supprimer",
          save: "Enregistrer",
+         add: "Ajouter",
          show_modal: "Ouvrir une modale",
          ok: "OK",
          cancel: "Annuler",
          close: "Fermer",
          next: "Suivant",
          previous: "Précédent",
-         back: "Retour"
+         back: "Retour",
       },
    }
 };

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"
       }
    }
 };