fix: Livewire state errors

vanguardbackup · Aug 24, 2024 · 03c85e0 · 03c85e0
1 parent 61c09fc
commit 03c85e0
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 19 deletions.
diff --git a/app/Livewire/BackupTasks/Buttons/RunTaskButton.php b/app/Livewire/BackupTasks/Buttons/RunTaskButton.php
@@ -41,7 +41,7 @@ public function runTask(): void
         $this->backupTask->run();
 
         $this->dispatch('task-button-clicked-' . $this->backupTask->getAttribute('id'));
-
+        $this->dispatch('backup-task-status-changed', ['taskId' => $this->backupTask->getAttribute('id')]);
         $this->dispatch('refresh-backup-tasks-table');
 
         Toaster::success('Backup task is running.');
@@ -65,8 +65,9 @@ protected function getListeners(): array
         return [
             sprintf('echo-private:backup-tasks.%s,BackupTaskStatusChanged', $this->backupTask->getAttribute('id')) => 'refreshSelf',
             'update-run-button-' . $this->backupTask->getAttribute('id') => 'refreshSelf',
-            'pause-button-clicked-' . $this->backupTask->getAttribute('id') => 'refreshSelf',
-            'refresh-backup-tasks-table' => 'refreshSelf', // Refresh everything!
+            'toggle-pause-button-clicked-' . $this->backupTask->getAttribute('id') => 'refreshSelf',
+            'backup-task-status-changed' => 'refreshSelf',
+            'refresh-backup-tasks-table' => 'refreshSelf',
         ];
     }
 }
diff --git a/app/Livewire/BackupTasks/Buttons/TogglePauseButton.php b/app/Livewire/BackupTasks/Buttons/TogglePauseButton.php
@@ -72,6 +72,8 @@ protected function getListeners(): array
         return [
             "task-button-clicked-{$taskId}" => 'refreshSelf',
             "echo-private:backup-tasks.{$taskId},BackupTaskStatusChanged" => 'refreshSelf',
+            'backup-task-status-changed' => 'refreshSelf',
+            'refresh-backup-tasks-table' => 'refreshSelf',
         ];
     }
 
@@ -89,7 +91,7 @@ private function ensureNotRateLimited(): void
      * Execute the state toggle action.
      *
      * Determines the current state and calls the appropriate method to change it.
-     * Dispatches an event after the state change.
+     * Dispatches events after the state change.
      */
     private function executeStateToggle(): void
     {
@@ -100,6 +102,8 @@ private function executeStateToggle(): void
         $toggleAction();
 
         $this->dispatch('toggle-pause-button-clicked-' . $this->backupTask->getAttribute('id'));
+        $this->dispatch('backup-task-status-changed', ['taskId' => $this->backupTask->getAttribute('id')]);
+        $this->dispatch('refresh-backup-tasks-table');
     }
 
     /**

diff --git a/app/Livewire/BackupTasks/Modals/CopyTaskModal.php b/app/Livewire/BackupTasks/Modals/CopyTaskModal.php
@@ -26,11 +26,15 @@ class CopyTaskModal extends Component
 
     public function mount(): void
     {
-        $user = Auth::user();
-        $this->backupTasks = $user instanceof User ? $user->getAttribute('backupTasks') : new Collection;
+        $this->resetModal();
     }
 
     #[On('open-modal.copy-backup-task')]
+    public function openModal(): void
+    {
+        $this->resetModal();
+    }
+
     public function resetModal(): void
     {
         $this->reset(['backupTaskToCopyId', 'optionalNewLabel', 'frequency', 'timeToRun']);

diff --git a/app/Livewire/BackupTasks/Tables/BackupTaskHistoryTable.php b/app/Livewire/BackupTasks/Tables/BackupTaskHistoryTable.php
@@ -74,6 +74,15 @@ public function backupTaskLogs(): LengthAwarePaginator
             );
     }
 
+    /**
+     * Refresh the component data.
+     */
+    public function refreshData(): void
+    {
+        $this->resetPage();
+        $this->dispatch('$refresh');
+    }
+
     /**
      * Render the backup task history table.
      */
@@ -92,7 +101,8 @@ public function render(): View
     protected function getListeners(): array
     {
         return [
-            'refreshBackupTaskHistory' => '$refresh',
+            'refreshBackupTaskHistory' => 'refreshData',
+            'backup-task-status-changed' => 'refreshData',
         ];
     }
 }
diff --git a/app/Livewire/BackupTasks/Tables/IndexItem.php b/app/Livewire/BackupTasks/Tables/IndexItem.php
@@ -44,6 +44,7 @@ public function echoBackupTaskLogCreatedEvent(array $event): void
         }
 
         $this->dispatch('backup-task-item-updated-' . $this->backupTask->getAttribute('id'));
+        $this->dispatch('backup-task-status-changed', ['taskId' => $this->backupTask->getAttribute('id')]);
     }
 
     /**
@@ -57,9 +58,8 @@ public function echoBackupTaskStatusReceivedEvent(): void
 
         $this->dispatch('$refresh');
         $this->dispatch('update-run-button-' . $this->backupTask->getAttribute('id'));
-
         $this->dispatch('refresh-backup-tasks-table');
-        $this->dispatch('refreshBackupTaskHistory');
+        $this->dispatch('backup-task-status-changed', ['taskId' => $this->backupTask->getAttribute('id')]);
     }
 
     /**
@@ -102,10 +102,10 @@ protected function getListeners(): array
         return [
             sprintf('echo-private:new-backup-task-log.%s,CreatedBackupTaskLog', $this->backupTask->getAttribute('id')) => 'echoBackupTaskLogCreatedEvent',
             sprintf('echo-private:backup-tasks.%s,BackupTaskStatusChanged', $this->backupTask->getAttribute('id')) => 'echoBackupTaskStatusReceivedEvent',
-
             'task-button-clicked-' . $this->backupTask->getAttribute('id') => '$refresh',
-            'pause-button-clicked-' . $this->backupTask->getAttribute('id') => '$refresh',
+            'toggle-pause-button-clicked-' . $this->backupTask->getAttribute('id') => '$refresh',
             'log-modal-updated-' . $this->backupTask->getAttribute('id') => '$refresh',
+            'backup-task-status-changed' => '$refresh',
         ];
     }
 }
diff --git a/resources/views/livewire/backup-tasks/index.blade.php b/resources/views/livewire/backup-tasks/index.blade.php
@@ -6,7 +6,7 @@
     <x-slot name="action">
         @if (!Auth::user()->backupTasks->isEmpty())
          <div class="space-x-2 flex">
-             <x-secondary-button x-on:click="$dispatch('open-modal', 'copy-backup-task'); $dispatch('open-modal.copy-backup-task')">
+             <x-secondary-button x-data="" x-on:click="$dispatch('open-modal', 'copy-backup-task')">
                  @svg('heroicon-o-document-duplicate', 'h-5 w-5')
              </x-secondary-button>
              <a href="{{ route('backup-tasks.create') }}" wire:navigate>

diff --git a/resources/views/livewire/backup-tasks/modals/copy-task-modal.blade.php b/resources/views/livewire/backup-tasks/modals/copy-task-modal.blade.php
@@ -1,5 +1,5 @@
 <div>
-    <x-modal name="copy-backup-task" :show="$errors->isNotEmpty()" focusable>
+    <x-modal name="copy-backup-task" focusable>
         <x-slot name="title">
             {{ __('Copy Backup Task') }}
         </x-slot>
@@ -83,7 +83,7 @@ class="mt-1 block w-full"
                         </x-primary-button>
                     </div>
                     <div class="w-2/6 ml-2">
-                        <x-secondary-button type="button" class="mt-4" centered x-on:click="$dispatch('close')">
+                        <x-secondary-button type="button" class="mt-4" centered x-on:click="$dispatch('close-modal', 'copy-backup-task')">
                             {{ __('Cancel') }}
                         </x-secondary-button>
                     </div>

diff --git a/resources/views/livewire/backup-tasks/tables/backup-task-history-table.blade.php b/resources/views/livewire/backup-tasks/tables/backup-task-history-table.blade.php
@@ -17,7 +17,7 @@
                 </x-table.table-header>
                 <x-table.table-body>
                     @foreach ($backupTaskLogs as $backupTaskLog)
-                        <x-table.table-row>
+                        <x-table.table-row wire:key="log-{{ $backupTaskLog->id }}">
                             <div class="col-span-12 sm:col-span-2 flex flex-col sm:flex-row sm:items-center">
                                 <p class="font-medium text-gray-900 dark:text-gray-100">{{ $backupTaskLog->backupTask->label }}</p>
                                 <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 sm:hidden">

diff --git a/resources/views/livewire/backup-tasks/tables/index-item.blade.php b/resources/views/livewire/backup-tasks/tables/index-item.blade.php
@@ -117,7 +117,8 @@ class="font-medium">{{ __('Last ran') }}:</span> {{ $backupTask->lastRunFormatte
 
             <!-- Actions - Always visible, but reorganized for responsive view -->
             <div class="flex flex-wrap justify-start space-x-2 mt-3">
-                <livewire:backup-tasks.buttons.run-task-button :$backupTask :key="'run-task-button-' . $backupTask->id"/>
+                <livewire:backup-tasks.buttons.run-task-button :$backupTask
+                                                               :wire:key="'run-task-button-' . $backupTask->id"/>
 
                 <x-secondary-button
                     x-data=""
@@ -132,7 +133,7 @@ class="!p-2"
 
                 <livewire:backup-tasks.buttons.toggle-pause-button
                     :backupTask="$backupTask"
-                    :key="'toggle-pause-button-' . $backupTask->id"
+                    :wire:key="'toggle-pause-button-' . $backupTask->id"
                 />
 
                 <a href="{{ route('backup-tasks.edit', $backupTask) }}" wire:navigate>
@@ -247,7 +248,8 @@ class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {
 
             <!-- Actions -->
             <div class="col-span-12 md:col-span-2 flex justify-end space-x-2">
-                <livewire:backup-tasks.buttons.run-task-button :$backupTask :key="'run-task-button-' . $backupTask->id"/>
+                <livewire:backup-tasks.buttons.run-task-button :$backupTask
+                                                               :wire:key="'run-task-button-large-' . $backupTask->id"/>
 
                 <x-secondary-button
                     x-data=""
@@ -262,7 +264,7 @@ class="!p-2"
 
                 <livewire:backup-tasks.buttons.toggle-pause-button
                     :backupTask="$backupTask"
-                    :key="'toggle-pause-button-' . $backupTask->id"
+                    :wire:key="'toggle-pause-button-large-' . $backupTask->id"
                 />
 
                 <a href="{{ route('backup-tasks.edit', $backupTask) }}" wire:navigate>