Refactor ModalLink (move Axios call to modalStack.js)

inertiaui · Sep 28, 2024 · 05666ee · 05666ee
1 parent 3cbff0a
commit 05666ee
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 20 deletions.
diff --git a/vue/src/ModalLink.vue b/vue/src/ModalLink.vue
@@ -1,15 +1,22 @@
 <script setup>
-import { default as Axios } from 'axios'
 import { modalPropNames, useModalStack } from './modalStack'
-import { nextTick, ref, provide, watch, markRaw, onMounted, useAttrs } from 'vue'
+import { nextTick, ref, provide, watch, onMounted, useAttrs } from 'vue'
 import { only, rejectNullValues } from './helpers'
-import { router, usePage } from '@inertiajs/vue3'
 
 const props = defineProps({
     href: {
         type: String,
         required: true,
     },
+    method: {
+        type: String,
+        required: false,
+        default: 'get',
+    },
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
     as: {
         type: String,
         default: 'a',
@@ -23,6 +30,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    queryStringArrayFormat: {
+        type: String,
+        default: 'brackets',
+    },
     // Passthrough to Modal.vue
     closeButton: {
         type: Boolean,
@@ -142,22 +153,10 @@ function handle() {
     loading.value = true
     emit('start')
 
-    Axios({
-        method: 'get',
-        url: props.href,
-        headers: {
-            ...props.headers,
-            Accept: 'text/html, application/xhtml+xml',
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-Inertia': true,
-            'X-Inertia-Version': usePage().version,
-            'X-InertiaUI-Modal': true,
-        },
-    })
-        .then((response) => {
-            router.resolveComponent(response.data.component).then((component) => {
-                modalContext.value = modalStack.push(markRaw(component), response.data, modalProps, onClose, onAfterLeave)
-            })
+    modalStack
+        .visit(props.href, props.method, props.data, props.headers, modalProps, onClose, onAfterLeave, props.queryStringArrayFormat)
+        .then((context) => {
+            modalContext.value = context
         })
         .catch((error) => {
             emit('error', error)

diff --git a/vue/src/modalStack.js b/vue/src/modalStack.js
@@ -1,6 +1,8 @@
-import { computed, readonly, ref } from 'vue'
+import { computed, readonly, ref, markRaw } from 'vue'
 import { default as Axios } from 'axios'
 import { except, only } from './helpers'
+import { router, usePage } from '@inertiajs/vue3'
+import { mergeDataIntoQueryString } from '@inertiajs/core'
 
 const stack = ref([])
 const localModals = ref({})
@@ -89,6 +91,7 @@ class Modal {
 
         Axios.get(this.response.url, {
             headers: {
+                Accept: 'text/html, application/xhtml+xml',
                 'X-Inertia': true,
                 'X-Inertia-Partial-Component': this.response.component,
                 'X-Inertia-Version': this.response.version,
@@ -113,6 +116,34 @@ function callLocalModal(name, modalProps, onClose, afterLeave) {
     }
 }
 
+function visit(href, method, data, headers, modalProps, onClose, onAfterLeave, queryStringArrayFormat = 'brackets') {
+    ;[href, data] = mergeDataIntoQueryString(method, href || '', data, queryStringArrayFormat)
+
+    return new Promise((resolve, reject) => {
+        Axios({
+            url: href,
+            method,
+            data,
+            headers: {
+                ...headers,
+                Accept: 'text/html, application/xhtml+xml',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-Inertia': true,
+                'X-Inertia-Version': usePage().version,
+                'X-InertiaUI-Modal': true,
+            },
+        })
+            .then((response) => {
+                router.resolveComponent(response.data.component).then((component) => {
+                    resolve(push(markRaw(component), response.data, modalProps, onClose, onAfterLeave))
+                })
+            })
+            .catch((error) => {
+                reject(error)
+            })
+    })
+}
+
 function push(component, response, modalProps, onClose, afterLeave) {
     const newModal = new Modal(component, response, modalProps, onClose, afterLeave)
     stack.value.push(newModal)
@@ -126,6 +157,7 @@ export function useModalStack() {
         stack: readonly(stack),
         push,
         reset: () => (stack.value = []),
+        visit,
         callLocalModal,
         registerLocalModal,
         removeLocalModal: (name) => delete localModals.value[name],