#90 - wip

resources/js/Pages/VacationRequest/Show.vue

@@ -208,23 +208,15 @@
             </p>
           </div>
           <div class="mt-5">
-            <ActionButton
+            <InertiaLink
               :href="`/vacation/requests/${request.id}/cancel`"
               method="post"
+              as="button"
               preserve-scroll
               class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"
             >
               Anuluj wniosek
-            </ActionButton>
-            <!--            <InertiaLink-->
-            <!--              :href="`/vacation/requests/${request.id}/cancel`"-->
-            <!--              method="post"-->
-            <!--              as="button"-->
-            <!--              preserve-scroll-->
-            <!--              class="inline-flex justify-center items-center py-2 px-4 font-medium text-red-700 bg-red-100 hover:bg-red-200 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:text-sm"-->
-            <!--            >-->
-            <!--              Anuluj wniosek-->
-            <!--            </InertiaLink>-->
+            </InertiaLink>
           </div>
         </div>
       </div>

resources/js/Shared/ActionButton.vue

@@ -1,18 +0,0 @@
-<template>
-  <InertiaLink
-    as="button"
-    :onStart="() => processing = true"
-    :onFinish="() => processing = false"
-    :onBefore="() => ! processing"
-  >
-    <slot />
-  </InertiaLink>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-let processing = ref(false)
-
-watch(processing, (value) => console.log(value))
-</script>

resources/js/Shared/InertiaLink.js

@@ -0,0 +1,65 @@
+import { h, ref } from 'vue'
+import { Inertia, mergeDataIntoQueryString, shouldIntercept } from '@inertiajs/inertia'
+
+export default {
+  name: 'InertiaLink',
+  props: {
+    as: {
+      type: String,
+      default: 'a',
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    href: {
+      type: String,
+    },
+    method: {
+      type: String,
+      default: 'get',
+    },
+    replace: {
+      type: Boolean,
+      default: false,
+    },
+    preserveScroll: {
+      type: Boolean,
+      default: false,
+    },
+    preserveState: {
+      type: Boolean,
+      default: null,
+    },
+  },
+  setup(props, { slots, attrs }) {
+    const processing = ref(false)
+
+    return props => {
+      const as = props.as.toLowerCase()
+      const method = props.method.toLowerCase()
+      const [href, data] = mergeDataIntoQueryString(method, props.href || '', props.data, 'brackets')
+
+      return h(props.as, {
+        ...attrs,
+        ...as === 'a' ? { href } : {},
+        onClick: (event) => {
+          if (shouldIntercept(event)) {
+            event.preventDefault()
+
+            Inertia.visit(href, {
+              data: data,
+              method: method,
+              replace: props.replace,
+              preserveScroll: props.preserveScroll,
+              preserveState: props.preserveState ?? (method !== 'get'),
+              onBefore: () => ! processing.value,
+              onStart: () => processing.value = true,
+              onFinish: () => processing.value = false,
+            })
+          }
+        },
+      }, slots)
+    }
+  },
+}

resources/js/app.js

@@ -1,12 +1,12 @@
 import { createApp, h } from 'vue'
-import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3'
+import { createInertiaApp, Head } from '@inertiajs/inertia-vue3'
 import { InertiaProgress } from '@inertiajs/progress'
 import AppLayout from '@/Shared/Layout/AppLayout'
 import Flatpickr from 'flatpickr'
 import { Settings } from 'luxon'
 import { Polish } from 'flatpickr/dist/l10n/pl.js'
 import Toast from 'vue-toastification'
-import ActionButton from '@/Shared/ActionButton'
+import InertiaLink from '@/Shared/InertiaLink'
 
 createInertiaApp({
   resolve: name => {
@@ -25,8 +25,7 @@ createInertiaApp({
         timeout: 3000,
         pauseOnFocusLoss: false,
       })
-      .component('InertiaLink', Link)
-      .component('ActionButton', ActionButton)
+      .component('InertiaLink', InertiaLink)
       .component('InertiaHead', Head)
       .mount(el)
   },