From 77d3b4df0d43bcd7fc540bced7faea1f2c3d3692 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Fri, 10 Jun 2022 12:44:24 +0200
Subject: [PATCH] #153 - button behaviour in form editing (#164)

* #153 - behaviour of buttons has been changed

* #153 - changed the gray background to opacity

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

* #153 - added for created forms

* #153 - default value for downloaded types is set

* #153 - removed hover for disabled buttons

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
---
 resources/js/Pages/Holidays/Create.vue        | 5 +++--
 resources/js/Pages/Holidays/Edit.vue          | 5 +++--
 resources/js/Pages/Resumes/Create.vue         | 4 +++-
 resources/js/Pages/Resumes/Edit.vue           | 4 +++-
 resources/js/Pages/Technologies.vue           | 5 +++--
 resources/js/Pages/Users/Create.vue           | 5 +++--
 resources/js/Pages/Users/Edit.vue             | 5 +++--
 resources/js/Pages/VacationLimits.vue         | 4 +++-
 resources/js/Pages/VacationRequest/Create.vue | 6 ++++--
 9 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/resources/js/Pages/Holidays/Create.vue b/resources/js/Pages/Holidays/Create.vue
index 4b8f3c1..2dfe7a9 100644
--- a/resources/js/Pages/Holidays/Create.vue
+++ b/resources/js/Pages/Holidays/Create.vue
@@ -67,8 +67,9 @@
           </InertiaLink>
           <button
             type="submit"
-            :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/Holidays/Edit.vue b/resources/js/Pages/Holidays/Edit.vue
index 215ae45..74162b6 100644
--- a/resources/js/Pages/Holidays/Edit.vue
+++ b/resources/js/Pages/Holidays/Edit.vue
@@ -66,8 +66,9 @@
           </InertiaLink>
           <button
             type="submit"
-            :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/Resumes/Create.vue b/resources/js/Pages/Resumes/Create.vue
index a70c461..a872021 100644
--- a/resources/js/Pages/Resumes/Create.vue
+++ b/resources/js/Pages/Resumes/Create.vue
@@ -531,7 +531,9 @@
             </InertiaLink>
             <button
               type="submit"
-              class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
             >
               Zapisz
             </button>
diff --git a/resources/js/Pages/Resumes/Edit.vue b/resources/js/Pages/Resumes/Edit.vue
index 2476cab..0d8feb5 100644
--- a/resources/js/Pages/Resumes/Edit.vue
+++ b/resources/js/Pages/Resumes/Edit.vue
@@ -531,7 +531,9 @@
             </InertiaLink>
             <button
               type="submit"
-              class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              class="inline-flex justify-center py-2 px-4 ml-3 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+              :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+              :disabled="form.processing || !form.isDirty"
             >
               Zapisz
             </button>
diff --git a/resources/js/Pages/Technologies.vue b/resources/js/Pages/Technologies.vue
index f578cc4..499e671 100644
--- a/resources/js/Pages/Technologies.vue
+++ b/resources/js/Pages/Technologies.vue
@@ -187,8 +187,9 @@
                 </button>
                 <button
                   type="submit"
-                  :disabled="form.processing"
-                  class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
+                  class="inline-flex justify-center py-2 px-4 text-base font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm sm:text-sm"
+                  :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                  :disabled="form.processing || !form.isDirty"
                 >
                   Dodaj
                 </button>
diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index 18d7e96..e894d24 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/resources/js/Pages/Users/Create.vue
@@ -290,8 +290,9 @@
           </InertiaLink>
           <button
             type="submit"
-            :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index 922cb40..d573297 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/resources/js/Pages/Users/Edit.vue
@@ -297,8 +297,9 @@
           </InertiaLink>
           <button
             type="submit"
-            :disabled="form.processing"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/VacationLimits.vue b/resources/js/Pages/VacationLimits.vue
index f525679..38b7315 100644
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -121,7 +121,9 @@
         <div class="flex justify-end py-3 px-4">
           <button
             type="submit"
-            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+            :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>
diff --git a/resources/js/Pages/VacationRequest/Create.vue b/resources/js/Pages/VacationRequest/Create.vue
index b990620..17a575c 100644
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -296,8 +296,9 @@
               </InertiaLink>
               <button
                 type="submit"
-                :disabled="form.processing"
-                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 hover:bg-blumilk-700 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
+                :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :disabled="form.processing || !form.isDirty"
               >
                 Zapisz
               </button>
@@ -465,6 +466,7 @@ async function refreshAvailableTypes(user) {
 
   vacationTypes.value = res.data
   form.vacationType = vacationTypes.value[0]
+  form.defaults('vacationType', vacationTypes.value[0])
 }
 
 </script>