fix: use x-show for activity monitors to enable reactive visibility
- Add importRunning to x-data entangle bindings - Change S3 download activity monitor from @if to x-show for real-time visibility - Change database restore activity monitor from @if to x-show for real-time visibility - Activity monitors now display reactively as state changes instead of only on page load - Both monitors now visible immediately when processes start 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
d8037de8d2
commit
32929a9fe7
1 changed files with 21 additions and 24 deletions
|
|
@ -8,7 +8,8 @@
|
||||||
s3DownloadedFile: $wire.entangle('s3DownloadedFile'),
|
s3DownloadedFile: $wire.entangle('s3DownloadedFile'),
|
||||||
s3FileSize: $wire.entangle('s3FileSize'),
|
s3FileSize: $wire.entangle('s3FileSize'),
|
||||||
s3StorageId: $wire.entangle('s3StorageId'),
|
s3StorageId: $wire.entangle('s3StorageId'),
|
||||||
s3Path: $wire.entangle('s3Path')
|
s3Path: $wire.entangle('s3Path'),
|
||||||
|
importRunning: $wire.entangle('importRunning')
|
||||||
}">
|
}">
|
||||||
<script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
|
<script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
|
||||||
@script
|
@script
|
||||||
|
|
@ -147,25 +148,23 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if ($s3DownloadInProgress)
|
<div x-show="s3DownloadInProgress" class="pt-2">
|
||||||
<div class="pt-2">
|
<div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
|
||||||
<div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
|
backups.</div>
|
||||||
backups.</div>
|
<livewire:activity-monitor :activityId="$currentActivityId" header="S3 Download Progress" :showWaiting="false" />
|
||||||
<livewire:activity-monitor :activityId="$currentActivityId" header="S3 Download Progress" :showWaiting="false" />
|
</div>
|
||||||
|
|
||||||
|
<div x-show="s3DownloadedFile && !s3DownloadInProgress" class="pt-2">
|
||||||
|
<div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
|
||||||
|
<div class="flex gap-2 pt-2">
|
||||||
|
<x-forms.button class="w-full" wire:click='restoreFromS3'>
|
||||||
|
Restore Database from S3
|
||||||
|
</x-forms.button>
|
||||||
|
<x-forms.button class="w-full" wire:click='cancelS3Download'>
|
||||||
|
Cancel
|
||||||
|
</x-forms.button>
|
||||||
</div>
|
</div>
|
||||||
@elseif ($s3DownloadedFile)
|
</div>
|
||||||
<div class="pt-2">
|
|
||||||
<div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
|
|
||||||
<div class="flex gap-2 pt-2">
|
|
||||||
<x-forms.button class="w-full" wire:click='restoreFromS3'>
|
|
||||||
Restore Database from S3
|
|
||||||
</x-forms.button>
|
|
||||||
<x-forms.button class="w-full" wire:click='cancelS3Download'>
|
|
||||||
Cancel
|
|
||||||
</x-forms.button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
|
|
@ -174,11 +173,9 @@
|
||||||
<div>Location: <span x-text="filename ?? 'N/A'"></span> <span x-text="filesize">/ </span></div>
|
<div>Location: <span x-text="filename ?? 'N/A'"></span> <span x-text="filesize">/ </span></div>
|
||||||
<x-forms.button class="w-full my-4" wire:click='runImport'>Restore Backup</x-forms.button>
|
<x-forms.button class="w-full my-4" wire:click='runImport'>Restore Backup</x-forms.button>
|
||||||
</div>
|
</div>
|
||||||
@if ($importRunning)
|
<div class="container w-full mx-auto" x-show="importRunning">
|
||||||
<div class="container w-full mx-auto">
|
<livewire:activity-monitor :activityId="$currentActivityId" header="Database Restore Output" :showWaiting="false" />
|
||||||
<livewire:activity-monitor :activityId="$currentActivityId" header="Database Restore Output" :showWaiting="false" />
|
</div>
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@else
|
@else
|
||||||
<div>Database must be running to restore a backup.</div>
|
<div>Database must be running to restore a backup.</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue