Level 3
@emokores Can you please share the how did you implement the users roles relation in the database and the models ?
Feb 15, 2022
8
Level 2
Show many-to-many (roles) in table - Inertia with React
I have a table that shows a list of users. Each user can be assigned more than one role. I would like to display the user roles in the column ROLES.
My backend:
use Inertia\Response as InertiaResponse;
public function index() : InertiaResponse
{
return inertia('Users/Index', [
'users' => User::query()->when($search, fn ($query) =>
$query->where('name', 'LIKE', "%{$search}%")->orWhere('email', 'LIKE', "%{$search}%")
)->orderByDesc('created_at')->paginate(10)->withQueryString(),
'roles' => Role::all(),
]);
}
In my frontend:
const { users, roles } = usePage().props, { data } = users;
return (
{data.map((user, index) => (
<tr key={index}>
<td>{user.name}</td>
<td>{/* TODO: userRoles */}</td>
</tr>
))}
);
I'm stuck on how to bring in to display the user roles for each user. I know I have to first declare it in the backend, then pass it to React to render it. But how??
Level 2
@ehab.aboshehab This is how I implemented it:
In the User model:
public function roles()
{
return $this->belongsToMany(Role::class);
}
In the Role model:
public function users()
{
return $this->belongsToMany(User::class);
}
Level 2
In the database, I created a role_user table:
Schema::create('role_user', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->constrained('users')->cascadeOnDelete();
$table->foreignId('role_id')->constrained('roles')->cascadeOnDelete();
$table->timestamps();
});
Level 3
@emokores Why not return all the data processed from the backend ?
You can do something like this :
return $users = User::with('roles')->get();
and then you will get a collection of roles inside each of user collection
Level 2
@ehab.aboshehab oh I had forgotten about the with() method.
Level 2
@ehab.aboshehab will it also work for the array of roles?
Level 2
@ehab.aboshehab I edited the query in the question. I actually had a query() method in the query. But I thought I would use it with the with() method but I get a BadMethodCallException: Call to undefined method Illuminate\Database\Eloquent\Builder::query(). @sinnbeck any ideas?
Level 2
I solved the issue. This is what I used in my index method:
//* index() method of the Users controller:
return inertia('Users/Index', [
'users' => User::query()->when($search, fn ($query) =>
$query->where('name', 'LIKE', "%{$search}%")->orWhere('email', 'LIKE', "%{$search}%")
)->with('roles')->orderByDesc('created_at')->paginate(10)->withQueryString()
]);
I then declared the Object.values(user.roles) object in a setState({roles: []}) method and mapped through the object's array with state.roles.map() to output the role names. I displayed this in a modal instead.
Please or to participate in this conversation.