Livewire - Assigning multiple values through checboxes - laravel

Question

I need to add multiple values through checkboxes to the company_user pivot table
This is what i have tried so far
Livewire Component
<?php
namespace App\Http\Livewire;
use App\Models\User;
use App\Models\Company;
use Livewire\Component;
use Livewire\WithPagination;
class UserAssignCompanySection extends Component
{
use WithPagination;
public $sortBy = 'id';
public $sortAsc = false;
public $user;
public $companies;
public $search;
public $confirmingCompanyRemoval = false;
public $selected = [];
protected $rules = [
'user.name' => 'required',
'user.email' => 'required',
'user.title' => 'required',
'user.first_name' => 'required',
'user.last_name' => 'nullable',
'user.mobile' => 'nullable',
'user.phone' => 'nullable',
'user.is_customer' => 'boolean',
'user.is_provider' => 'boolean',
];
// Table Sort
public function sortBy($field)
{
if($field == $this->sortBy){
$this->sortAsc = !$this->sortAsc;
}
$this->sortBy = $field;
}
public function updatedSelected()
{
$this->user->companies()->sync($this->selected);
}
public function mount(User $user)
{
$this->user = $user;
$this->companies = Company::all();
$this->selected = $this->user->companies->pluck('id')->toArray();
}
public function render()
{
return view('livewire.user-assign-company-section');
}
}
<div>
<div class="grid grid-cols-1 text-left xl:grid-cols-6">
<div class="col-span-3 p-4">
<p class="text-lg underline">Name</p>
<x-jet-input wire:model.defer="user.name" id="name" type="text" disabled class="block w-full mt-1 bg-gray-100" />
<x-jet-input-error for="user.name" class="mt-2" />
<br>
<p class="text-lg underline">Assigned Company List</p>
#json($selected);
#foreach($companies as $company)
<div class="mt-1">
<input type="checkbox" value="{{ $company->id }}" wire:model="selected">
{{ $company->name }} <br>
</div>
#endforeach
<br>
<x-jet-button>Back</x-jet-button>
<br>
</div>
</div>
</div>
Syncing records to the pivot table doesn't work properly
#json($selected)
Gives the proper results when the page gets loaded.
When i add a new chckbox, it includes the id of the company as a string "1"
#json($selected) shows
[2,3,4,"1"]
At this moment the new pivot record is been added
Then when i select the back button
#json($selected) shows something like this
[2,3,4,1]
The back button doesn't take me back(I will be placed on the same page)
Then when it comes to Unchecking. It doesn't work at all
#json($selected) doesn't show sync with unchecked values
Edit :
Company Model
<?php
namespace App\Models;
use App\Models\User;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
use Illuminate\Database\Eloquent\Factories\HasFactory;
class Company extends Model
{
use SoftDeletes;
use HasFactory;
protected $fillable = [
'name',
'phone',
'vat_no',
'address',
'is_customer',
'is_provider',
'is_self',
];
public function jobs()
{
return $this->hasMany(Job::class);
}
public function users()
{
return $this->belongsToMany(User::class);
}
}
User Model
<?php
namespace App\Models;
use App\Models\Company;
use Laravel\Jetstream\HasProfilePhoto;
use Illuminate\Notifications\Notifiable;
use Illuminate\Database\Eloquent\SoftDeletes;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
{
use SoftDeletes;
use HasApiTokens;
use HasFactory;
use HasProfilePhoto;
use Notifiable;
use TwoFactorAuthenticatable;
use Historyable;
/**
* The attributes that are mass assignable.
*
* #var array
*/
protected $fillable = [
'name',
'email',
'password',
'title',
'first_name',
'last_name',
'mobile',
'phone',
'is_customer',
'is_provider',
];
/**
* The attributes that should be hidden for arrays.
*
* #var array
*/
protected $hidden = [
'password',
'remember_token',
'two_factor_recovery_codes',
'two_factor_secret',
];
/**
* The attributes that should be cast to native types.
*
* #var array
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
/**
* The accessors to append to the model's array form.
*
* #var array
*/
protected $appends = [
'profile_photo_url',
];
public function companies()
{
return $this->belongsToMany(Company::class);
}
}
I did this
public function updatedSelected()
{
dd($this->user, $this->selected);
$this->user->companies()->sync($this->selected);
}
and it gives
App\Models\User {#1683 ▼
#fillable: array:10 [▼
0 => "name"
1 => "email"
2 => "password"
3 => "title"
4 => "first_name"
5 => "last_name"
6 => "mobile"
7 => "phone"
8 => "is_customer"
9 => "is_provider"
]
#hidden: array:4 [▼
0 => "password"
1 => "remember_token"
2 => "two_factor_recovery_codes"
3 => "two_factor_secret"
]
#casts: array:2 [▼
"email_verified_at" => "datetime"
"deleted_at" => "datetime"
]
#appends: array:1 [▼
0 => "profile_photo_url"
]
#connection: "mysql"
#table: "users"
#primaryKey: "id"
#keyType: "int"
+incrementing: true
#with: []
#withCount: []
+preventsLazyLoading: false
#perPage: 15
+exists: true
+wasRecentlyCreated: false
#attributes: array:26 [▶]
#original: array:26 [▶]
#changes: []
#classCastCache: []
#dates: []
#dateFormat: null
#dispatchesEvents: []
#observables: []
#relations: array:1 [▼
"companies" => Illuminate\Database\Eloquent\Collection {#1688 ▼
#items: []
}
]
#touches: []
+timestamps: true
#visible: []
#guarded: array:1 [▶]
#rememberTokenName: "remember_token"
#forceDeleting: false
#accessToken: null
}
array:1 [▼
0 => "1"
]

Answer 1

You could add a function in livewire component, whenever the user click on checkbox you add the value to $selected attribute.
In livewire component(this add/remove company id):
public function addCompany($companyId) {
if (!in_array($companyId, $this->selected)) {
$this->selected [] = $companyId;
}else{
$this->selected = array_diff($this->selected, [$companyId]);
}
}
And in your view add this your input:
wire:click="addStyle({{ $collection['id'] }})"