#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

@@ -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 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 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="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>

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 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 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="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>

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>

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>

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 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 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="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                  :disabled="form.processing || !form.isDirty"
                 >
                   Dodaj
                 </button>

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 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 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="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>

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 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 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="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+            :disabled="form.processing || !form.isDirty"
           >
             Zapisz
           </button>

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>

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 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 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="[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>