I have been trying to get two modal to work on the same table. I have one modal for the edit user and the other one to add user.
I know when you follow the tuttorial on Livewire docs they use one modal for the both action.
My problem is that I want to validate in the input that there is not a duplicate email in the database.
My Blade View:
<div>
<h1 >Users</h1>
<div >
<div >
<div >
<x-input.text wire:model="search" placeholder="Search Users..."/>
</div>
<div>
<x-button.primary wire:click="create"><x-icon.plus/> New</x-button.primary>
</div>
</div>
</div>
<div >
<x-table>
<x-slot name="head">
<x-table.heading sortable multi-column wire:click="sortBy('id')" :direction="$sorts['id'] ?? null">Id</x-table.heading>
<x-table.heading sortable multi-column wire:click="sortBy('email')" :direction="$sorts['email'] ?? null">Email</x-table.heading>
<x-table.heading sortable multi-column wire:click="sortBy('username')" :direction="$sorts['usernames'] ?? null">User Name</x-table.heading>
<x-table.heading sortable multi-column wire:click="sortBy('accesslevel')" :direction="$sorts['accesslevel'] ?? null">Access Level</x-table.heading>
<x-table.heading />
</x-slot>
<x-slot name="body">
@forelse ($users as $user)
<x-table.row wire:loading.class.delay="opacity-50" wire:key="row-{{ $user->id }}">
<x-table.cell>
<p >
{{ $user->id }}
</p>
</x-table.cell>
<x-table.cell>
<span >{{ $user->email }} </span>
</x-table.cell>
<x-table.cell>
<span >
{{ $user->username }}
</span>
</x-table.cell>
<x-table.cell>
{{ $user->accesslevel }}
</x-table.cell>
<x-table.cell>
<x-button.link wire:click="edit({{ $user->id }})">Edit</x-button.link>
</x-table.cell>
</x-table.row>
@empty
<x-table.row>
<x-table.cell colspan="6">
<div >
<x-icon.inbox />
<span >No users found...</span>
</div>
</x-table.cell>
</x-table.row>
@endforelse
</x-slot>
</x-table>
</div>
<!-- Edit User -->
<div>
<form wire:submit.prevent="save">
<x-modal.dialog wire:model.lazy="showEditModal">
<x-slot name='title' >
Edit User
</x-slot>
<x-slot name='content'>
<div>
<div>
<x-input.group for="email" label="Email" :error="$errors->first('editing.email')">
<x-input.text wire:model.lazy="editing.email" id="email" placeholder="Email"/>
</x-input.group>
</div>
</div>
<x-input.group for="username" label="Username" :error="$errors->first('editing.username')">
<x-input.text wire:model.lazzy="editing.username" id="username" placeholder="Username"/>
</x-input.group>
<x-input.group for="accesslevel" label="Access Level" :error="$errors->first('editing.accesslevel')">
<x-input.select wire:model.lazy="editing.accesslevel" id="accesslevel">
@foreach (App\Models\User::LEVEL as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
</x-input.select>
</x-input.group>
</x-slot>
<x-slot name='footer'>
<x-button.secondary wire:click="$set('showEditModal', false)">Cancel</x-button.secondary>
<div>
<x-button.primary type="submit">Save</x-button.primary>
@if ($errors->any())
<div >
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
</div>
</x-slot>
</x-modal.dialog>
</form>
</div>
<!--Create user -->
<form wire:submit.prevent="saveCreate">
<x-modal.dialog wire:model.lazy="showCreateModal">
<x-slot name='title' >
Create User
</x-slot>
<x-slot name='content'>
<x-input.group for="emailCreate" label="Email" :error="$errors->first('creating.email')">
<x-input.text wire:model.lazy="creating.email" id="emailCreate" placeholder="Email"/>
</x-input.group>
<x-input.group for="usernameCreate" label="Username" :error="$errors->first('creating.username')">
<x-input.text wire:model.lazy="creating.username" id="usernameCreate" placeholder="Username"/>
</x-input.group>
<x-input.group for="accesslevelCreate" label="Access Level" :error="$errors->first('creating.accesslevel')">
<x-input.select wire:model.lazy="creating.accesslevel" id="accesslevelCreate">
@foreach (App\Models\User::LEVEL as $value => $label)
<option value="{{ $value }}">{{ $label }}</option>
@endforeach
</x-input.select>
</x-input.group>
</x-slot>
<x-slot name='footer'>
<x-button.secondary wire:click="$set('showCreateModal', false)">Cancel</x-button.secondary>
<div>
<x-button.primary type="submit">Save</x-button.primary>
@if ($errors->any())
<div >
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
</div>
</x-slot>
</x-modal.dialog>
</form>
When I enter my email in my add modal I am getting a validation error saying I need to input an email, but I clearly typed on in.
I guess there is somthing wrong with my validation, or what I want to do is not possible in Livewire.
Livewire component:
namespace App\Http\Livewire;
use App\Models\User;
use CreateUsersTable;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rule;
use Livewire\Component;
class UserTable extends Component
{
public $showEditModal = false;
public $showCreateModal = false;
public $password = '';
public $search = '';
public function mount()
{
$this->editing = User::make();
$this->creating = User::make();
$this->editing = $this->makeBlankUser();
}
public User $editing;
public User $creating;
public function rules()
{
return [
'editing.email' => 'required',
'editing.accesslevel' => 'required|in:'.collect(User::LEVEL)->keys()->implode(','),
'editing.username' => '',
'editing.password' => '',
'creating.accesslevel' => 'required|in:'.collect(User::LEVEL)->keys()->implode(','),
'creating.username' => 'required',
'creating.email' => 'required|email',
];
}
public function edit(User $user)
{
$this->editing = $user;
$this->showEditModal = true;
}
public function makeBlankUser()
{
return User::make([ 'accesslevel' => '3']);
}
public function create()
{
if ($this->creating->getKey()) $this->creating = $this->makeBlankUser();
$this->showCreateModal = true;
}
public function save()
{
$this->validate();
$this->editing->save();
$this->showEditModal = false;
}
public function saveCreate()
{
$this->validate();
$this->creating->save();
$this->showCreateModal = false;
}
public function render()
{
return view('livewire.user-table', [
'users' => User::search('email',$this->search)->paginate(25),
]);
}
}
What am I missing ?
CodePudding user response：
https://laravel-livewire.com/docs/2.x/input-validation#validating-with-other-rules
Create two validations:
- for editing
- for creating
CodePudding user response：
I ended up adding a function inputValidation(). I toggle on and off the array I want to pass to the rules with my create() or edit().
namespace App\Http\Livewire;
use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;
class UserTable extends Component
{
use WithPagination;
public $showEditModal = false;
public $showCreateModal = false;
public $password = '';
public $search = '';
public $createUser = false;
public $editUser =false;
public $rulesEdit = [];
public $rulesCreate = [];
public $sortField;
public $sortDirection = 'asc';
public User $editing;
protected $queryString = ['sortField', 'sortDirection'];
protected $listeners = ['refreshUsers' => '$refresh'];
public function mount()
{
$this->editing = User::make();
$this->editing = $this->makeBlankUser()
}
protected $rules = '';
public function rules()
{
$rules = $this->inputValidation();
return $rules;
}
public function inputValidation()
{
if($this->editUser = true){
$validatedData=[
'editing.email' => 'required',
'editing.accesslevel' => 'required|in:'.collect(User::LEVEL)->keys()->implode(','),
'editing.username' => ''
];
return $validatedData;
}
if($this->createUser = true){
$validatedData=[
'editing.email' => 'required|email|unique:user,email',
'editing.accesslevel' => 'required|in:'.collect(User::LEVEL)->keys()->implode(','),
'editing.username' => ''
];
return $validatedData;
}
}
public function edit(User $user)
{
$this->editUser = true;
$this->editing = $user;
$this->showEditModal = true;
}
public function makeBlankUser()
{
return User::make([ 'accesslevel' => '3']);
}
public function create(User $user)
{
$this->createUser = true;
if ($this->editing->getKey()) $this->editing = $this->makeBlankUser();
$this->showCreateModal = true;
}
public function save()
{
$this->validate();
$this->editing->save();
$this->showEditModal = false;
$this->editUser = false;
$this->showCreateModal = false;
}
public function sortBy($field)
{
$this->sortDirection = $this->sortField === $field
? $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc'
: 'asc';
$this->sortField = $field;
}
public function render()
{
return view('livewire.user-table', [
'users' => User::search('email',$this->search)->orderBy($this->sortField, $this->sortDirection)->paginate(25),
]);
}
}```