From 636e83b71fca40ed798ef7dc0799111835140742 Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Wed, 13 Apr 2022 14:48:56 +0200
Subject: [PATCH] #90 - wip

---
 resources/js/Pages/VacationRequest/Show.vue | 14 +++++++++++---
 resources/js/Shared/ActionButton.vue        | 18 ++++++++++++++++++
 resources/js/app.js                         |  2 ++
 routes/web.php                              |  2 +-
 4 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/Shared/ActionButton.vue

diff --git a/resources/js/Pages/VacationRequest/Show.vue b/resources/js/Pages/VacationRequest/Show.vue
index 36ccb91..575893d 100644
--- a/resources/js/Pages/VacationRequest/Show.vue
+++ b/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>
diff --git a/resources/js/Shared/ActionButton.vue b/resources/js/Shared/ActionButton.vue
new file mode 100644
index 0000000..c47272e
--- /dev/null
+++ b/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>
diff --git a/resources/js/app.js b/resources/js/app.js
index ad83dce..1792ed7 100644
--- a/resources/js/app.js
+++ b/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)
   },
diff --git a/routes/web.php b/routes/web.php
index c155293..b67244b 100644
--- a/routes/web.php
+++ b/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");
     });
 });