add person: increase z-index of toast and wait for validation before closing modal

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

@@ -418,3 +418,8 @@ span.item-key {
     background-color: #0000000a;
     //text-decoration: dotted underline;
 }
+
+// increase toast message z-index (above all modals)
+div.v-toast {
+   z-index: 10000!important;
+}

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue

@@ -90,7 +90,7 @@ export default {
       OnTheFlyThirdparty,
       OnTheFlyCreate
    },
-   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent'],
+   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent', 'canCloseModal'],
    emits: ['saveFormOnTheFly'],
    data() {
       return {
@@ -162,7 +162,20 @@ export default {
          return 'entity-' + this.type + ' badge-' + this.type;
       }
    },
+   watch: {
+      canCloseModal: {
+         handler: function(val, oldVal) {
+            if (val) {
+               this.closeModal();
+            }
+         },
+         deep: true
+      }
+   },
    methods: {
+      closeModal() {
+         this.modal.showModal = false;
+      },
       openModal() {
          //console.log('## OPEN ON THE FLY MODAL');
          //console.log('## type:', this.type, ', action:', this.action);
@@ -200,8 +213,6 @@ export default {
 
          // pass datas to parent
          this.$emit('saveFormOnTheFly', { type: type, data: data });
-
-         this.modal.showModal = false;
       },
       buildLocation(id, type) {
          if (type === 'person') {

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

@@ -66,9 +66,10 @@
                <div class="create-button">
                   <on-the-fly
                      v-if="query.length >= 3"
-                     v-bind:buttonText="$t('onthefly.create.button', {q: query})"
+                     :buttonText="$t('onthefly.create.button', {q: query})"
                      action="create"
-                     @saveFormOnTheFly="saveFormOnTheFly">
+                     @saveFormOnTheFly="saveFormOnTheFly"
+                     :canCloseModal="canCloseOnTheFlyModal">
                   </on-the-fly>
                </div>
 
@@ -119,7 +120,8 @@ export default {
             suggested: [],
             selected: [],
             priorSuggestion: {}
-         }
+         },
+         canCloseOnTheFlyModal: false
       }
    },
    computed: {
@@ -269,6 +271,7 @@ export default {
             makeFetch('POST', '/api/1.0/person/person.json', data)
                .then(response => {
                   this.newPriorSuggestion(response);
+                  this.canCloseOnTheFlyModal = true;
                })
                .catch((error) => {
                   if (error.name === 'ValidationException') {
@@ -284,6 +287,7 @@ export default {
             makeFetch('POST', '/api/1.0/thirdparty/thirdparty.json', data)
                .then(response => {
                   this.newPriorSuggestion(response);
+                  this.canCloseOnTheFlyModal = true;
                })
                .catch((error) => {
                   if (error.name === 'ValidationException') {