Content doesn't refresh upon method completion
Hi folks, I'm currently working on some import functionality (CSV -> DB). I'm having a Livewire component to cover the multi-step process (Upload File > Map fields > Import). To do so, my Component looks like:
class Import extends Component
{
use WithFileUploads;
#[Validate(['csv_file' => 'required|file|mimes:csv,txt|max:102400'])]
public $csv_file;
...
public int $step = 1;
public $total_records = 100;
public $current_record = 0;
My component view looks like:
<div class="max-w-7xl mx-auto">
@if($step == 1)
....
@elseif($step == 2)
....
@elseif($step == 3)
<div class="text-sm font-bold text-indigo-600 text-right">{{ $current_record }} / {{ $total_records }}</div>
<div class="h-2 rounded-full bg-indigo-600 animate-pulse"
style="width: {{ $current_record == 0 ? 0 : ($current_record / $total_records * 100) }}%"></div>
@endif
Now, within the second step, the operation completes by invoking a method "startImport()". This method looks like:
function startImport()
{
$recordsIterator = $reader->getRecords();
iterator_apply($recordsIterator, function (Iterator $iterator) {
$row = $iterator->current();
// Fancy Model creation that works
$this->current_record++;
return true;
}, array($recordsIterator));
}
I reckon, that the frontend isn't updated until startImport() completes, which hijacks my idea of having some frontend progress bar. I tried varius wire:poll configurations or to switch from an iterator to a foreach array construct - but without success.
You've any idea in how to have the frontend refresh (periodically - no real time update needed) with the current "current_record" status?
Thanks!
Please or to participate in this conversation.