save checkboxes state in store

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>
-            <input class="my-4" v-model="query" name="query" ref="search" 
+            <label style="float: right;">
+               {{ $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;
+      }, 
+      selected() {
+         return this.add_persons.selected;
+      }, 
+      selectedCounter() {
+         if (! this.add_persons.selected) { return 0; }
+         return this.add_persons.selected.length;
       },
-      AddPersons() {
+      addPersons() {
          console.log('add persons');
+         // code here
+         this.modal.showModal = false;
       }
    }
 }