replace all links and buttons involved by OnTheFly component

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

@@ -65,9 +65,14 @@
                   @updateSelected="updateSelected">
                </person-suggestion>
 
-               <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
-                  {{ $t('action.create') }} "{{ query }}"
-               </button>
+               <div class="create-button">
+                  <on-the-fly
+                     v-if="query.length >= 3" 
+                     v-bind:buttonText="$t('onthefly.create.button', {q: query})"
+                     action="create">
+                  </on-the-fly>
+               </div>
+               
             </div>
          </template>
 
@@ -84,6 +89,7 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import PersonSuggestion from './AddPersons/PersonSuggestion';
 import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 
@@ -92,6 +98,7 @@ export default {
    components: {
       Modal,
       PersonSuggestion,
+      OnTheFly
    },
    props: [
       'buttonTitle',
@@ -251,4 +258,8 @@ export default {
          }
       }
    }
+   .create-button > a {
+      margin-top: 0.5em;
+      margin-left: 2.6em;
+   }
 </style>