This episode is for members only
Sign up to access "Laravel Teams" right now.
Get started
Already a member? Sign in to continue
Playing
27. Displaying a modal to change a member’s role
Episodes
01. Introduction and demo
4m 49s
0%
02. Setup with Pest
4m 2s
0%
03. Building the user teams relations
6m 5s
0%
04. Creating a personal team when registering
6m 3s
0%
05. Leaving all teams when an account is deleted
3m 55s
0%
06. Tracking the current team
4m 50s
0%
07. Showing team details in the UI
2m 55s
0%
08. Switching to another team
7m 24s
0%
09. Authorising team switching
6m 53s
0%
10. Updating a team name
10m 48s
0%
11. Basic roles and permissions setup
5m 26s
0%
12. Team roles and permissions middleware
9m 18s
0%
13. Authorising current team updates
3m 43s
0%
14. Testing team permissions through HTTP requests
3m 58s
0%
15. Leaving a team
10m 50s
0%
16. Displaying team members
8m 42s
0%
17. Making team members look better
5m 3s
0%
18. Removing a team member
15m 18s
0%
19. Preventing self removal from a team
4m 7s
0%
20. Storing invitations
13m 31s
0%
21. Validating invitations
6m 38s
0%
22. Authorising team invitation creation
6m 22s
0%
23. Displaying invitations
3m 16s
0%
24. Revoking invitations
12m 46s
0%
25. Sending an invitation email
13m 6s
0%
26. Accepting an invitation
12m 22s
0%
27. Displaying a modal to change a member’s role
10m 31s
0%
28. Updating a member’s role
9m 5s
0%
29. More authorisation and checks for role changing
10m 14s
0%
30. Fixing up the email sending test details
49s
0%
31. Fixing and validating email addresses for invites
1m 32s
0%
32. Tidying up @can directive checks
3m 25s
0%
33. Detaching roles when removing users
5m
0%
34. Adding an extra layer of protection to the team middleware
6m 35s
0%
35. Getting related models through teams
5m 37s
0%
36. Building a helper to access the current team
10m 47s
0%
37. Getting all related models through all teams
7m 15s
0%
38. Creating new teams
13m 7s
0%
Transcript
00:00
Over the next few episodes we're going to focus on changing member roles. The first thing that we want to do is figure out this drop down item just here. Of course we want to get rid of it if the role that is assigned to the user who's currently authenticated hasn't got the ability to change
00:14
member roles and then when we want to click on this we just want to launch a really simple modal to show the options and select the current role as well. Now of course launching this in a modal is completely optional so you can follow the rest of this
00:27
and build it in any way you want. Okay so the first thing that we want to do is head over to our admin role seeder and we want to add in a new permission here. Let's add this as change member roles that kind of makes sense and we'll go over
00:43
and we will see the database with that. That should of course give us that option in there and it's hooked up to the admin now. So let's go ahead and build out the policy and then just hide these items. So if we go up to our team policy let's create out a new
00:58
method in here called change member roles and of course we're going to get the user in there. Once again we're going to hook this up to the team that this applies to because we don't want to allow this to happen across team although our context of where
01:15
permissions will prevent that anyway and then we want the member who we are going to change this role for. So actually this is probably good as change member role so we want to know who we can change as well. Okay so for now let's just go ahead and return user can
01:32
and we'll use that permission so change member roles and let's go ahead and add this to our template. So if we come over to our team member item we've got this drop down link here let's go ahead and wrap that in can change member role and what do we
01:47
need to pass in here? It's pretty much the same as what we have here so the current team and the member that we are trying to change the role for. Let's go ahead and end that can and let's go ahead and pull that in. Okay let's just
01:58
check this out so I'm signed into Alex at the moment of course I'm a team admin I should see that option for both of these we'll exclude it for the current member as well although we could just leave it and allow ourselves to change ourselves to another role and if we're logged in
02:13
as Mabel over here sure enough she doesn't see that option. Now because Mabel is just a team member and doesn't have the ability to do either of these things that's where we want to go ahead and wrap this entire thing so the entire drop down here in a can any that's where this is really
02:29
useful. So let's use a can any here and of course the two things that we're looking for is remove team member and change member role and as the second argument we'll just pass whatever is needed here so that's going to be the team that we're working with
02:44
and the member in there as well so let's basically get rid of this drop down and say end can any and we should be good so now over here we should be good because we can do some of these things we can remove this user from the team
02:59
over here though it just completely disappears so not super important but it's more of a UI thing. Okay so now what we're going to do if we just open up this drop down let's take the can change member role block and let's implement just somewhere in this
03:13
component it doesn't matter where we do this we can do this either within or underneath the list item this is going to be the modal and then we'll go ahead and open this up so we'll have the same check in here because we don't really want to even render the modal if that's
03:26
not the case so obviously that doesn't appear here but it does appear just here and of course that's going to be modal. Okay so where do we find a modal well if we head over to the profile edit section if we look at the delete user form which
03:39
is part of Breeze we can actually go ahead and open this up and steal the trigger for the modal and the modal itself so let's grab just both of these I'm just going to copy and paste these directly over to our component
03:51
so let's pull both of these over we might just need to do this so let's find both of them copy them over and let's paste them directly over into here now the trigger button so let's take that trigger button first of all that's not going to go directly
04:06
inside of here that's going to be for the link that we have here so I'm just going to paste this directly in here and let's change over some of the names that we have so we're not going to have this as a danger button we're just going to have this as a standard button
04:19
so let's change that over first of all this is going to be change member role or whatever we want to say and then we want to dispatch a named modal so this is confirm user deletion but we want to say change member now
04:33
because we're going to have multiple of these rendered on the page we need this to be somewhat unique so we need something like the following with the member's id directly in here so we can basically just take the member id and then we can give the the modal in the same component the id
04:52
of the user who's trying to open this so we can get rid of this x data we don't necessarily need that and let's name that modal get rid of everything in it and just make sure we can open this modal up so here's the modal confirm user's deletion is now not the name
05:06
it's change member and the member id role and we don't need this show option because that's just for the validation over on the delete user form and we should be good so let's get rid of the action here we'll fix this up to our own stuff in just a bit and let's just
05:21
leave that as it is leave that as it is let's get rid of the text input here because we're not going to need that and we'll get rid of the error messages and we may as well get rid of this label as well so we'll just put form directly in there okay so we're going to have a secondary button to cancel that
05:36
that will close the modal and then here we will have change role let's just figure this out we might have left something in there that we didn't need but let's just make sure that this opens and great it does so we can change a role for each of these members and each of
05:51
these are now specific to that user okay so let's go ahead and just get rid of some of the stuff that we don't need in here so we can get rid of this paragraph of course you can add whatever you want inside of here let's make this a little bit more unique
06:04
to each of these users so change role for let's grab the member name and let's have their email in there as well just in case two people share one name and we should be good so let's just try change that so yeah that looks good so really all we need to do now is just add
06:25
in this form and we can change over the button here as well because we don't need this as a danger button so let's change that to a primary button just so that looks a little bit better great okay so in terms of the form what do we need well we need a drop down
06:41
if we take a look inside of the components directory within laravel breeze we do have a drop down but that's the navigation drop down so let's go ahead and create out a new component and let's call this select input i know that's technically not correct but we'll go ahead and give
06:54
it that name and let's just rename this with a double a.qhp extension okay so we're just going to take something like the text input for the styles copy it over to here and let's go ahead and just change this over to a select
07:06
and inside of here we will have a slot which will be where we can render out our options that's pretty much what we need to do here so let's go and add this component to our form just here so x select input and then in here is going to be a bunch of options
07:25
so let's just add a couple of manual options we'll just say one and two and let's see what that gives us make sure it's looking okay first of all and yeah that looks okay-ish let's go ahead and style this up to be a width of full
07:41
and let's check this out again and yeah that will just about do okay so next up for each of these options we want to go ahead and list through all of the roles that we have in our application there's a couple of ways to do this we could create some sort of partial we
07:55
could use view partials to pass this data down but i would always say in this circumstance let's just go ahead and do a for each on the for the options and let's go ahead and just use the model directly
08:09
so we're using sparsity permission and models and role and then we're just getting all of the roles and just going through them as a role and then of course we can grab the role name from this so let's take the role name and we're good to go so we don't
08:24
really need to worry too much about it if it's something as simple as that now we have both of the role names in there and of course if you wanted to change up these role names to capitalize them and stuff there's nothing wrong with doing that i've just chosen to use all lowercase
08:37
okay so to actually get this form to eventually submit we're going to need a value in this role and for that we're just going to give either the role name or the role id it doesn't really matter let's just choose the role name and let's take a look at this so we want
08:50
when we click on change member role we want this to be selected to the one that the user already has so we can do that really easily as well so we can actually use the selected directive on directly inside of here
09:03
and we can just say member so the member that we're currently iterating through has role which is part of that package and we can just pass the entire role model into that and that will select the one that they're on so let's go ahead and open up this for mabel you can see team
09:17
member is selected if i choose this for myself team admin is selected so pretty straightforward to get that working and list through all of the roles here let's finally just add our label up here so let's add an x input label
09:33
let's pull label in here and let's say for role give this a value of role and we'll set a class here of screen reader only at least so we have a label at least physically on the page and then for the input itself we can go ahead and give
09:48
this a name of role which is obviously going to match up to the label but also come through to the back end and we'll give this an id of role as well so the id will match up to this okay that should just be about it so let's just see what we've done here and yeah that should be input label let's
10:05
change that over quickly and there we go great okay so we now have permission to see this option we have permission to click on this option to actually show the modal whereas over here on a team member we don't it shows the
10:17
correct one that we're currently on now it's our job to click on and change this over when we hit change role go through and actually post this through of course make sure that the user has permission really importantly so let's go ahead and cover that next
38 episodes•4 hrs 36 mins•5 months ago
Overview
Need team functionality in your Laravel application? Let’s build it from scratch.
We’ll cover the basics of creating teams, switching between them, sending secure team invites by email, and managing team members.
Powering everything will be roles and permissions for each member, with the ability to switch roles directly from your team dashboard.
Once you’re done, you’ll have mastered team functionality in Laravel.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!