#90 - wip

resources/js/Pages/VacationRequest/Show.vue

@@ -208,15 +208,23 @@
             </p>
           </div>
           <div class="mt-5">
-            <InertiaLink
+            <ActionButton
               :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>
+            </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>-->
           </div>
         </div>
       </div>

resources/js/Shared/ActionButton.vue

@@ -0,0 +1,18 @@
+<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/app.js

@@ -6,6 +6,7 @@ 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'
 
 createInertiaApp({
   resolve: name => {
@@ -25,6 +26,7 @@ createInertiaApp({
         pauseOnFocusLoss: false,
       })
       .component('InertiaLink', Link)
+      .component('ActionButton', ActionButton)
       .component('InertiaHead', Head)
       .mount(el)
   },

routes/web.php

@@ -80,7 +80,7 @@ Route::middleware(["auth", TrackUserLastActivity::class])->group(function (): vo
         Route::get("/monthly-usage", MonthlyUsageController::class)
             ->name("monthly-usage");
         Route::get("/annual-summary", AnnualSummaryController::class)
-            ->name("annual-summmary");
+            ->name("annual-summary");
     });
 });