save checkboxes state in store

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

@@ -96,11 +96,20 @@ div.vue-component {
 
 //// AddPersons modal
 div.results {
-   padding: 0 1.3em;
    div.list-item {
       line-height: 26pt;
+      padding: 0.3em 0.8em;
       display: flex;
       flex-direction: row;
+      &.checked {
+         background-color: #ececec;
+         border-bottom: 1px dotted #d9d9d9;
+      }
+      div.container {
+         & > input {
+            margin-right: 0.8em;
+         }
+      }
       div.right_actions {
          margin: 0 0 0 auto;
          & > * {
@@ -111,13 +120,11 @@ div.results {
             font-size: 70%;
             padding: 4px;
          } 
-         span {
-         } 
       }
    }
 }
 
-a.discret {
+.discret {
    color: grey;
    margin-right: 1em;
 }

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

@@ -18,6 +18,14 @@ const datetimeFormats = {
       }
    }
 };
+//const pluralizationRules = {
+//   'fr': (choice, choicesLength) => {
+//      if (choice === 0) {
+//         return 0;
+//      }
+//      return (choicesLength < 4) ? 2 : 3;
+//   }
+//};
 const messages = {
    fr: {
       action: {
@@ -43,10 +51,11 @@ const messages = {
 const _createI18n = (appMessages) => {
    Object.assign(messages.fr, appMessages.fr);
    return createI18n({
+      locale: 'fr',
+      fallbackLocale: 'fr',
       datetimeFormats,
       messages,
-      locale: 'fr',
+      //pluralizationRules
-      fallbackLocale: 'fr'
    })
 };
 

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

@@ -16,7 +16,8 @@ let getDataPromise = getAccompanyingCourse(id)
             accompanying_course: accompanying_course,
             add_persons: {
                query: "",
-               suggested: []
+               suggested: [],
+               selected: []
             },
             errorMsg: []
          },
@@ -24,21 +25,25 @@ let getDataPromise = getAccompanyingCourse(id)
          },
          mutations: {
             removeParticipation(state, item) {
-               console.log('remove item', item.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');
+               //console.log('add new item');
                state.accompanying_course.participations.push(item);
             },
             setQuery(state, query) {
-               console.log('q=', query);
+               //console.log('q=', query);
                state.add_persons = Object.assign({}, state.add_persons, query);
             },
             loadSuggestions(state, suggestions) {
                state.add_persons.suggested = suggestions;
+            },
+            updateSelected(state, value) {
+               console.log('update value', value);
+               state.add_persons.selected = value;
             }
          },
          actions: {
@@ -49,8 +54,8 @@ let getDataPromise = getAccompanyingCourse(id)
                commit('addParticipation', payload);               
                postParticipation(id, payload.id).catch((error) => {
                   commit('removeParticipation', payload);
-                  state.errorMsg.push(error.message);      
+                  state.errorMsg.push(error.message); // result action ??  
-               }) // result action ??
+               }); 
             },
             setQuery({ commit }, payload) {
                commit('setQuery', payload);
@@ -63,6 +68,9 @@ let getDataPromise = getAccompanyingCourse(id)
                } else {
                   commit('loadSuggestions', []);
                }
+            },
+            updateSelected({ commit }, payload) {
+               commit('updateSelected', payload);
             }
          }
       });

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

@@ -13,15 +13,27 @@
          </template>
          <template v-slot:body-fixed>
 
-            <label style="float: right;">{{ $tc('add_persons.counter', counter) }}</label>
+            <label style="float: right;">
-            <input class="my-4" v-model="query" name="query" ref="search" 
+               {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
+               <span v-if="selectedCounter > 0">
+                  {{ $tc('add_persons.selected_counter', selectedCounter) }}
+               </span>
+            </label>
+            
+            <input class="my-4" 
+               name="query" 
+               ref="search" 
+               v-model="query" 
                :placeholder="$t('add_persons.search_some_persons')" />
                   
          </template>
          <template v-slot:body>
                
+            <!--span class="discret">Selection: {{ selected }}</span-->
+            
             <div class="results">
-               <person-suggestion v-for="item in suggested.results"
+               <person-suggestion 
+                  v-for="item in suggested.results"
                   v-bind:item="item" 
                   v-bind:key="item.id">
                </person-suggestion>
@@ -29,7 +41,7 @@
                
          </template>
          <template v-slot:footer>
-            <button class="sc-button green" @click="AddPersons">
+            <button class="sc-button green" @click="addPersons">
                <i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}</button>
          </template>
       </modal>
@@ -76,12 +88,21 @@ export default {
       suggested() {
          return this.add_persons.suggested;
       },
-      counter() {
+      suggestedCounter() {
          if (! this.add_persons.suggested.results) { return 0; }
          return this.add_persons.suggested.results.length;
       }, 
-      AddPersons() {
+      selected() {
+         return this.add_persons.selected;
+      }, 
+      selectedCounter() {
+         if (! this.add_persons.selected) { return 0; }
+         return this.add_persons.selected.length;
+      },
+      addPersons() {
          console.log('add persons');
+         // code here
+         this.modal.showModal = false;
       }
    }
 }

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

@@ -1,20 +1,30 @@
 <template>
-   <div class="list-item">
+   <div class="list-item" :class="{ checked: isChecked }">
-      <div>
+      <div class="container">
-         <a class="discret" target="_blank" :href="url.show">{{ item.id }}</a>
+         
+         <!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
+         <input class="" 
+            type="checkbox" 
+            v-model="selected" 
+            :value="item" />
+            
          {{ 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>
+import { mapState } from 'vuex';
+
 export default {
    name: 'PersonSuggestion',
    props: ['item'],
@@ -26,5 +36,18 @@ export default {
          }
       }
    },
+   computed: {
+      selected: {
+         set(value) {
+            this.$store.dispatch('updateSelected', value);
+         },
+         get() {
+            return this.$store.state.add_persons.selected;
+         }
+      },
+      isChecked() {
+         return (this.selected.indexOf(this.item) === -1) ? false : true;
+      }
+   }
 };
 </script>

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

@@ -3,7 +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",
+         suggested_counter: "Pas de résultats | 1 résultat | {count} résultats",
+         selected_counter: " / 1 sélectionné | / {count} sélectionnés",
          search_some_persons: "Rechercher des personnes..",
       },
       item: {