Wait for callback before closing dialog

[emulienfou]

Hi there, I created a custom dialog including a form and I'm trying to not to close to dialog when user click on Save button.

Here is a simple example of my current code:

const result = await this.$dialog.showAndWait(CreateEditUser, {
    actions: {
       false: 'Cancel',
       true: {text: 'Save'}
   }
})
if (result) {
axios.post('users', {user: result})
   .then(() => {
      // Close dialog pro grammatically 
   })
   .catch() => {
      // Display error message without closing modal
   })
}

However it seems the modal is closing if the Save button has been hit.
I would like to receive the form data in result, pass it to the axios call then, if the call succeed when to close the dialog manually.

I have a handleSubmit method passed to the DialogCard component using the props handler to check if my form is validate already, here is the code:

handleSubmit(res, action) {
      if (!action.key) {
        this.$emit('submit', action.key)
      }
      const valid = this.$refs.form.validate()
      if (!valid) return false
      this.$emit('submit', action.key ? this.formData : action.key)
    }

I also check the section Programmatically close dialog but the dialog is closing anyway if user is clicking on the Save button even if waitForResult: false

[yariksav]

You have to implement all api logic within CreateEditUser component I've tried to write component example for you here

<template>
  <DialogCard
    :title="$t('Supplier')"
    :actions="actions"
    class="SupplierDialog"
  >
    <v-text-field
      v-model="name"
      :label="$t('Name')"
    />
  </DialogCard>
</template>

<script>
export default {
  props: {
    someId: String
  },
  asyncData ({ params, $axios, props }) {
    // here some logic for get data
    return $axios.$get(.....)
  },
  data () {
    return {
      name: null
    }
  },
  computed: {
    actions () {
      return {
        cancel: this.$t('Cancel'),
        save: {
          text: this.$t('Save'),
          handle: () => this.save()
        }
      }
    }
  },
  methods: {
    save () {
      try {
         const res = await this.$axios.$post(....)
         console.log(res)
      } catch(e) {
        // handle and show exception
        this.$dialog.notify.show('Error')
        return false // <-- important for not autoclosing dialog
      }
    }
  }
}
</script>

[emulienfou]

Thanks @yariksav exactly what I was searching for