From db6513474377b702cc2258be3e2ba720d007bc11 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Mon, 17 Jan 2022 12:17:22 +0100
Subject: [PATCH] add person: increase z-index of toast and wait for validation
 before closing modal

---
 .../Resources/public/chill/chillmain.scss       |  5 +++++
 .../vuejs/OnTheFly/components/OnTheFly.vue      | 17 ++++++++++++++---
 .../public/vuejs/_components/AddPersons.vue     | 10 +++++++---
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
index a570b645a..03eb7f281 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
index d4342fdee..8c93eec71 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue
+++ b/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') {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 1cf6b4b0b..59647e160 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/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') {