feat: moved all spinners into button components

vanguardbackup · Jun 17, 2024 · 0a1376a · 0a1376a
1 parent 3ad16ca
commit 0a1376a
Show file tree

Hide file tree

Showing 14 changed files with 78 additions and 127 deletions.
diff --git a/resources/views/components/danger-button.blade.php b/resources/views/components/danger-button.blade.php
@@ -1,5 +1,26 @@
-@props(['centered' => false, 'iconOnly' => false])
+@props(['centered' => false, 'iconOnly' => false, 'loadingText' => 'Loading...', 'action' => ''])
 
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center ' . ($iconOnly ? 'px-3.5 py-2' : 'px-7 py-2.5') . ' bg-red-600 border border-transparent rounded-[0.70rem] font-semibold text-sm text-white hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150' . ($centered ? ' justify-center w-full' : '')]) }}>
-    {{ $slot }}
+<button
+    {{ $attributes->merge([
+        'type' => 'submit',
+        'class' => 'inline-flex items-center ' .
+                   ($iconOnly ? 'px-3.5 py-2' : 'px-7 py-2.5') .
+                   ' bg-red-600 border border-transparent rounded-[0.70rem] font-semibold text-sm text-white hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150' .
+                   ($centered ? ' justify-center w-full' : ''),
+        'wire:loading.attr' => 'disabled',
+        'wire:loading.class' => 'opacity-50 cursor-not-allowed',
+        'wire:target' => $action
+    ]) }}
+>
+    @if($action)
+        <div wire:loading wire:target="{{ $action }}">
+            <x-spinner class="mr-2 text-white h-4 w-4 inline"/>
+            {{ __($loadingText) }}
+        </div>
+        <div wire:loading.remove wire:target="{{ $action }}">
+            {{ $slot }}
+        </div>
+    @else
+        {{ $slot }}
+    @endif
 </button>
diff --git a/resources/views/components/primary-button.blade.php b/resources/views/components/primary-button.blade.php
@@ -1,5 +1,11 @@
-@props(['centered' => false, 'iconOnly' => false, 'fat' => false])
+@props(['centered' => false, 'iconOnly' => false, 'fat' => false, 'loading' => false, 'loadingText' => 'Saving...', 'action' => ''])
 
 <button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center ' . ($iconOnly ? 'px-3.5 py-2' : ($fat ? 'px-8 py-4 text-lg' : 'px-7 py-2.5')) . ' bg-primary-900 dark:bg-white dark:hover:bg-gray-200 dark:text-gray-900 border border-transparent rounded-[0.70rem] font-semibold text-sm text-white hover:bg-primary-950 focus:bg-primary-950 dark:focus:bg-white active:bg-primary-950 dark:active:bg-white focus:outline-none focus:ring-2 focus:ring-primary-950 focus:ring-offset-2 transition ease-in-out duration-150' . ($centered ? ' justify-center w-full' : '')]) }}>
-    {{ $slot }}
+    <div wire:loading wire:target="{{ $action }}">
+        <x-spinner class="mr-2 text-white dark:text-gray-900 h-4 w-4 inline"/>
+        {{ __($loadingText) }}
+    </div>
+    <div wire:loading.remove wire:target="{{ $action }}">
+        {{ $slot }}
+    </div>
 </button>
diff --git a/resources/views/components/secondary-button.blade.php b/resources/views/components/secondary-button.blade.php
@@ -1,5 +1,26 @@
-@props(['centered' => false, 'iconOnly' => false])
+@props(['centered' => false, 'iconOnly' => false, 'loadingText' => 'Loading...', 'action' => ''])
 
-<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center ' . ($iconOnly ? 'px-3 py-2' : 'px-7 py-2.5') . ' bg-gray-100/75 dark:bg-gray-800 dark:border-gray-600 border border-gray-400/25 rounded-[0.70rem] font-semibold text-sm text-gray-700 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-gray-800 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150' . ($centered ? ' justify-center w-full' : '')]) }}>
-    {{ $slot }}
+<button
+    {{ $attributes->merge([
+        'type' => 'button',
+        'class' => 'inline-flex items-center ' .
+                   ($iconOnly ? 'px-3 py-2' : 'px-7 py-2.5') .
+                   ' bg-gray-100/75 dark:bg-gray-800 dark:border-gray-600 border border-gray-400/25 rounded-[0.70rem] font-semibold text-sm text-gray-700 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-gray-800 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150' .
+                   ($centered ? ' justify-center w-full' : ''),
+        'wire:loading.attr' => 'disabled',
+        'wire:loading.class' => 'opacity-50 cursor-not-allowed',
+        'wire:target' => $action
+    ]) }}
+>
+    @if($action)
+        <div wire:loading wire:target="{{ $action }}">
+            <x-spinner class="mr-2 text-gray-700 dark:text-gray-100 h-4 w-4 inline"/>
+            {{ __($loadingText) }}
+        </div>
+        <div wire:loading.remove wire:target="{{ $action }}">
+            {{ $slot }}
+        </div>
+    @else
+        {{ $slot }}
+    @endif
 </button>
diff --git a/resources/views/livewire/backup-destinations/create-backup-destination-form.blade.php b/resources/views/livewire/backup-destinations/create-backup-destination-form.blade.php
@@ -74,17 +74,8 @@
             <div class="mt-6 max-w-3xl mx-auto">
                 <div class="flex space-x-5">
                     <div class="w-4/6">
-                        <x-primary-button type="submit" class="mt-4" centered wire:loading.attr="disabled"
-                                          wire:loading.class="opacity-50 cursor-not-allowed">
-
-                            <div wire:loading wire:target="submit">
-                                <x-spinner class="mr-2 text-white dark:text-gray-900 h-4 w-4 inline"/>
-                                {{ __('Saving..') }}
-                            </div>
-
-                            <div wire:loading.remove wire:target="submit">
-                                {{ __('Save') }}
-                            </div>
+                        <x-primary-button type="submit" class="mt-4" centered action="submit">
+                            {{ __('Save') }}
                         </x-primary-button>
                     </div>
                     <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/backup-destinations/delete-backup-destination-form.blade.php b/resources/views/livewire/backup-destinations/delete-backup-destination-form.blade.php
@@ -19,17 +19,8 @@
             </p>
             <div class="flex space-x-5">
                 <div class="w-4/6">
-                    <x-danger-button type="button" wire:click="delete" class="mt-4" centered wire:loading.attr="disabled"
-                                     wire:loading.class="opacity-50 cursor-not-allowed">
-
-                        <div wire:loading wire:target="delete">
-                            <x-spinner class="mr-2 text-white h-4 w-4 inline"/>
-                            {{ __('Removing...') }}
-                        </div>
-
-                        <div wire:loading.remove wire:target="delete">
-                            {{ __('Confirm Removal') }}
-                        </div>
+                    <x-danger-button type="button" wire:click="delete" class="mt-4" centered action="delete" loadingText="Removing...">
+                        {{ __('Confirm Removal') }}
                     </x-danger-button>
                 </div>
                 <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/backup-destinations/update-backup-destination-form.blade.php b/resources/views/livewire/backup-destinations/update-backup-destination-form.blade.php
@@ -74,17 +74,8 @@
             <div class="mt-6 max-w-3xl mx-auto">
                 <div class="flex space-x-5">
                     <div class="w-4/6">
-                        <x-primary-button type="submit" class="mt-4" centered wire:loading.attr="disabled"
-                                          wire:loading.class="opacity-50 cursor-not-allowed">
-
-                            <div wire:loading wire:target="submit">
-                                <x-spinner class="mr-2 text-white dark:text-gray-900 h-4 w-4 inline"/>
-                                {{ __('Saving changes..') }}
-                            </div>
-
-                            <div wire:loading.remove wire:target="submit">
-                                {{ __('Save changes') }}
-                            </div>
+                        <x-primary-button type="submit" class="mt-4" centered action="submit" loadingText="Saving changes...">
+                            {{ __('Save changes') }}
                         </x-primary-button>
                     </div>
                     <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/backup-tasks/clear-log-button.blade.php b/resources/views/livewire/backup-tasks/clear-log-button.blade.php
@@ -21,18 +21,8 @@
                 </p>
                 <div class="flex space-x-5">
                     <div class="w-4/6">
-                        <x-danger-button type="button" wire:click="clearAllLogs" class="mt-4" centered
-                                         wire:loading.attr="disabled"
-                                         wire:loading.class="opacity-50 cursor-not-allowed">
-
-                            <div wire:loading wire:target="clearAllLogs">
-                                <x-spinner class="mr-2 text-white h-4 w-4 inline"/>
-                                {{ __('Clearing...') }}
-                            </div>
-
-                            <div wire:loading.remove wire:target="clearAllLogs">
-                                {{ __('Confirm') }}
-                            </div>
+                        <x-danger-button type="button" class="mt-4" centered wire:click="clearAllLogs" action="clearAllLogs" loadingText="Clearing...">
+                            {{ __('Confirm') }}
                         </x-danger-button>
                     </div>
                     <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/backup-tasks/create-backup-task-form.blade.php b/resources/views/livewire/backup-tasks/create-backup-task-form.blade.php
@@ -201,15 +201,8 @@ class="text-sm text-gray-600 dark:text-gray-400 underline hover:text-gray-900 da
             <div class="mt-6 max-w-3xl mx-auto">
                 <div class="flex space-x-5">
                     <div class="w-4/6">
-                        <x-primary-button type="submit" class="mt-4" centered wire:loading.attr="disabled"
-                                          wire:loading.class="opacity-50 cursor-not-allowed">
-                            <div wire:loading wire:target="submit">
-                                <x-spinner class="mr-2 text-white dark:text-gray-900 h-4 w-4 inline"/>
-                                {{ __('Saving..') }}
-                            </div>
-                            <div wire:loading.remove wire:target="submit">
-                                {{ __('Save') }}
-                            </div>
+                        <x-primary-button type="submit" class="mt-4" centered action="submit">
+                            {{ __('Save') }}
                         </x-primary-button>
                     </div>
                     <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/backup-tasks/delete-backup-task-form.blade.php b/resources/views/livewire/backup-tasks/delete-backup-task-form.blade.php
@@ -19,17 +19,8 @@
             </p>
             <div class="flex space-x-5">
                 <div class="w-4/6">
-                    <x-danger-button type="button" wire:click="delete" class="mt-4" centered wire:loading.attr="disabled"
-                                     wire:loading.class="opacity-50 cursor-not-allowed">
-
-                        <div wire:loading wire:target="delete">
-                            <x-spinner class="mr-2 text-white h-4 w-4 inline"/>
-                            {{ __('Removing...') }}
-                        </div>
-
-                        <div wire:loading.remove wire:target="delete">
-                            {{ __('Confirm Removal') }}
-                        </div>
+                    <x-danger-button type="button" class="mt-4" centered wire:click="delete" action="delete" loadingText="Removing...">
+                        {{ __('Confirm Removal') }}
                     </x-danger-button>
                 </div>
                 <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/backup-tasks/delete-backup-task-log-button.blade.php b/resources/views/livewire/backup-tasks/delete-backup-task-log-button.blade.php
@@ -12,18 +12,8 @@
             </p>
             <div class="flex space-x-5">
                 <div class="w-4/6">
-                    <x-danger-button type="button" wire:click="delete" class="mt-4" centered
-                                     wire:loading.attr="disabled"
-                                     wire:loading.class="opacity-50 cursor-not-allowed">
-
-                        <div wire:loading wire:target="delete">
-                            <x-spinner class="mr-2 text-white h-4 w-4 inline"/>
-                            {{ __('Clearing...') }}
-                        </div>
-
-                        <div wire:loading.remove wire:target="delete">
-                            {{ __('Confirm') }}
-                        </div>
+                    <x-danger-button type="button" class="mt-4" centered wire:click="delete" action="delete" loadingText="Clearing...">
+                        {{ __('Confirm') }}
                     </x-danger-button>
                 </div>
                 <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/backup-tasks/update-backup-task-form.blade.php b/resources/views/livewire/backup-tasks/update-backup-task-form.blade.php
@@ -201,15 +201,8 @@ class="text-sm text-gray-600 dark:text-gray-400 underline hover:text-gray-900 da
             <div class="mt-6 max-w-3xl mx-auto">
                 <div class="flex space-x-5">
                     <div class="w-4/6">
-                        <x-primary-button type="submit" class="mt-4" centered wire:loading.attr="disabled"
-                                          wire:loading.class="opacity-50 cursor-not-allowed">
-                            <div wire:loading wire:target="submit">
-                                <x-spinner class="mr-2 text-white dark:text-gray-900 h-4 w-4 inline"/>
-                                {{ __('Saving changes..') }}
-                            </div>
-                            <div wire:loading.remove wire:target="submit">
-                                {{ __('Save changes') }}
-                            </div>
+                        <x-primary-button type="submit" class="mt-4" centered action="submit" loadingText="Saving changes...">
+                            {{ __('Save changes') }}
                         </x-primary-button>
                     </div>
                     <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/remote-servers/create-remote-server-form.blade.php b/resources/views/livewire/remote-servers/create-remote-server-form.blade.php
@@ -124,17 +124,8 @@ class="mx-3 py-3.5 px-4 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 text-gra
                         <div class="mt-6 max-w-3xl mx-auto">
                             <div class="flex space-x-5">
                                 <div class="w-4/6">
-                                    <x-primary-button type="submit" class="mt-4" centered wire:loading.attr="disabled"
-                                                      wire:loading.class="opacity-50 cursor-not-allowed">
-
-                                        <div wire:loading wire:target="submit">
-                                            <x-spinner class="mr-2 text-white dark:text-gray-900 h-4 w-4 inline"/>
-                                            {{ __('Verifying Connection...') }}
-                                        </div>
-
-                                        <div wire:loading.remove wire:target="submit">
-                                            {{ __('Test Connection') }}
-                                        </div>
+                                    <x-primary-button type="submit" class="mt-4" centered action="submit" loadingText="Verifying Connection...">
+                                        {{ __('Test Connection') }}
                                     </x-primary-button>
                                 </div>
                                 <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/remote-servers/delete-remote-server-form.blade.php b/resources/views/livewire/remote-servers/delete-remote-server-form.blade.php
@@ -24,17 +24,8 @@
 
             <div class="flex space-x-5">
                 <div class="w-4/6">
-                    <x-danger-button type="button" wire:click="delete" class="mt-4" centered wire:loading.attr="disabled"
-                                      wire:loading.class="opacity-50 cursor-not-allowed">
-
-                        <div wire:loading wire:target="delete">
-                            <x-spinner class="mr-2 text-white h-4 w-4 inline"/>
-                            {{ __('Removing...') }}
-                        </div>
-
-                        <div wire:loading.remove wire:target="delete">
-                            {{ __('Confirm Removal') }}
-                        </div>
+                    <x-danger-button type="button" class="mt-4" centered wire:click="delete" action="delete" loadingText="Removing...">
+                        {{ __('Confirm Removal') }}
                     </x-danger-button>
                 </div>
                 <div class="w-2/6 ml-2">

diff --git a/resources/views/livewire/remote-servers/update-remote-server-form.blade.php b/resources/views/livewire/remote-servers/update-remote-server-form.blade.php
@@ -43,17 +43,8 @@
                 <div class="mt-6 max-w-3xl mx-auto">
                     <div class="flex space-x-5">
                         <div class="w-4/6">
-                            <x-primary-button type="submit" class="mt-4" centered wire:loading.attr="disabled"
-                                              wire:loading.class="opacity-50 cursor-not-allowed">
-
-                                <div wire:loading wire:target="submit">
-                                    <x-spinner class="mr-2 text-white dark:text-gray-900 h-4 w-4 inline"/>
-                                    {{ __('Saving changes...') }}
-                                </div>
-
-                                <div wire:loading.remove wire:target="submit">
-                                    {{ __('Save Changes') }}
-                                </div>
+                            <x-primary-button type="submit" class="mt-4" centered action="submit" loadingText="Saving changes...">
+                                {{ __('Save changes') }}
                             </x-primary-button>
                         </div>
                         <div class="w-2/6 ml-2">