To implement four modals, each containing a different form, and ensure that the user cannot open subsequent modals until the previous one is completed, you can extend the existing code with additional properties and methods to handle multiple modals and their completion status. Here's how you can achieve this:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ModalComponent extends Component
{
public $showModal1 = false;
public $showModal2 = false;
public $showModal3 = false;
public $showModal4 = false;
public $modal1Completed = false;
public $modal2Completed = false;
public $modal3Completed = false;
public $modal4Completed = false;
public function openModal($modal)
{
switch ($modal) {
case 'modal1':
if (!$this->modal1Completed) {
$this->showModal1 = true;
}
break;
case 'modal2':
if ($this->modal1Completed && !$this->modal2Completed) {
$this->showModal2 = true;
}
break;
case 'modal3':
if ($this->modal2Completed && !$this->modal3Completed) {
$this->showModal3 = true;
}
break;
case 'modal4':
if ($this->modal3Completed && !$this->modal4Completed) {
$this->showModal4 = true;
}
break;
}
}
public function closeModal($modal)
{
switch ($modal) {
case 'modal1':
$this->showModal1 = false;
$this->modal1Completed = true;
break;
case 'modal2':
$this->showModal2 = false;
$this->modal2Completed = true;
break;
case 'modal3':
$this->showModal3 = false;
$this->modal3Completed = true;
break;
case 'modal4':
$this->showModal4 = false;
$this->modal4Completed = true;
break;
}
}
public function render()
{
return view('livewire.modal-component');
}
}
In the Blade file (modal-component.blade.php), you can use these properties and methods to handle the modals and their completion status:
<div>
<button wire:click="openModal('modal1')">Open Modal 1</button>
@if($showModal1)
<div>
<!-- Modal 1 content -->
<h2>Modal Window 1</h2>
<button wire:click="closeModal('modal1')">Close</button>
</div>
@endif
<button wire:click="openModal('modal2')" @if(!$modal1Completed) disabled @endif>Open Modal 2</button>
@if($showModal2)
<div>
<!-- Modal 2 content -->
<h2>Modal Window 2</h2>
<button wire:click="closeModal('modal2')">Close</button>
</div>
@endif
<button wire:click="openModal('modal3')" @if(!$modal2Completed) disabled @endif>Open Modal 3</button>
@if($showModal3)
<div>
<!-- Modal 3 content -->
<h2>Modal Window 3</h2>
<button wire:click="closeModal('modal3')">Close</button>
</div>
@endif
<button wire:click="openModal('modal4')" @if(!$modal3Completed) disabled @endif>Open Modal 4</button>
@if($showModal4)
<div>
<!-- Modal 4 content -->
<h2>Modal Window 4</h2>
<button wire:click="closeModal('modal4')">Close</button>
</div>
@endif
</div>
Add form data in each modal to save
<div>
<button wire:click="openModal('modal1')">Open Modal 1</button>
@if($showModal1)
<div>
<!-- Modal 1 content -->
<h2>Modal Window 1</h2>
<form wire:submit.prevent="saveModal1Data">
<input type="text" wire:model="formData1.field1" placeholder="Field 1">
@error('formData1.field1') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="formData1.field2" placeholder="Field 2">
@error('formData1.field2') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save</button>
</form>
<button wire:click="closeModal('modal1')">Close</button>
</div>
@endif
<button wire:click="openModal('modal2')" @if(!$modal1Completed) disabled @endif>Open Modal 2</button>
@if($showModal2)
<div>
<!-- Modal 2 content -->
<h2>Modal Window 2</h2>
<form wire:submit.prevent="saveModal2Data">
<input type="text" wire:model="formData2.field1" placeholder="Field 1">
@error('formData2.field1') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="formData2.field2" placeholder="Field 2">
@error('formData2.field2') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save</button>
</form>
<button wire:click="closeModal('modal2')">Close</button>
</div>
@endif
<button wire:click="openModal('modal3')" @if(!$modal2Completed) disabled @endif>Open Modal 3</button>
@if($showModal3)
<div>
<!-- Modal 3 content -->
<h2>Modal Window 3</h2>
<form wire:submit.prevent="saveModal3Data">
<input type="text" wire:model="formData3.field1" placeholder="Field 1">
@error('formData3.field1') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="formData3.field2" placeholder="Field 2">
@error('formData3.field2') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save</button>
</form>
<button wire:click="closeModal('modal3')">Close</button>
</div>
@endif
<button wire:click="openModal('modal4')" @if(!$modal3Completed) disabled @endif>Open Modal 4</button>
@if($showModal4)
<div>
<!-- Modal 4 content -->
<h2>Modal Window 4</h2>
<form wire:submit.prevent="saveModal4Data">
<input type="text" wire:model="formData4.field1" placeholder="Field 1">
@error('formData4.field1') <span class="error">{{ $message }}</span> @enderror
<input type="text" wire:model="formData4.field2" placeholder="Field 2">
@error('formData4.field2') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save</button>
</form>
<button wire:click="closeModal('modal4')">Close</button>
</div>
@endif
</div>
In livewire component save data
public function saveModal1Data()
{
$this->validate([
'formData1.field1' => 'required',
'formData1.field2' => 'required',
]);
ModalData::create([
'field1' => $this->formData1['field1'],
'field2' => $this->formData1['field2'],
]);
$this->modal1Completed = true;
$this->showModal1 = false;
}
*for tracking *
<div style="width: 20px; height: 20px; border-radius: 50%; background-color: {{ $allModalsCompleted ? 'green' : 'grey' }}; display: inline-block;"></div>
Top comments (0)