This episode is for members only
Sign up to access "Laravel Teams" right now.
Get started
Already a member? Sign in to continue
Playing
16. Displaying team members
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
Okay so we're now going to output a list of team members which will lead us nicely on to
00:05
inviting members and also changing the role for each of the members as well. So let's get started by just thinking about our permissions first or our roles first. So if we open up the admin role cedar we have the ability to update a team but we also want to give the ability to view team members as well. Now what we also want to do is do this for the
00:30
member as well the member role cedar so we're going to do exactly the same thing here for this team member role and in fact this is pretty much the only permission that we're going to give for team members throughout the course but of course you can change this up if you need to. Okay so because we're only using first or create here it's safe to go ahead and do a
00:50
dbc on the member role cedar and also on the admin role cedar as well and we should be left here with the view team members permission for both of these roles. Okay let's go over to our edit page here and we'll go ahead and duplicate pretty much all of this here and we'll paste this in here and we could either do an overriding view team members check now inside of this include
01:18
that we're going to add here will be the ability to invite team members so what we're really doing is stacking permissions here we've got an overall view team members which will show this entire thing and then we'll have inside of here the ability to invite now we're kind of going on the assumption that to invite a member you should be able to view all team members but you can switch
01:39
up these permissions and checks if you want to. Okay let's go ahead and create out another partial here so over in our team section under partials let's create out a teammembers.blade.php file and why don't we just copy over the edit team form here paste in the general structure for this and we'll just get rid of this form and this will be a list of our team members just here so let's just
02:03
update the title here team members these are the members of your team whatever you want to say. Okay let's go ahead and include this in here so let's do an include on team partials and team members and we should see that just inside of here great okay so we want to start listing through our team members now so let's open up that team members and for here let's go ahead and give this
02:29
a margin top of six and inside of here let's create out an unordered list and inside of here we're going to create our component but for now let's just go ahead and iterate over all of the team members for this team now we already have access to the team but we don't have a members relationship so let's go ahead and just scaffold this out first of all team members as member
02:51
and then we'll just output the member name inside of here which should just be me at the moment now this isn't going to work at the moment of course we are going to write a very simple test for this but let's go over to our team model and let's add in the members relationship here and it's going to be exactly the same thing as we did for our user just the opposite way around so it's
03:09
going to be a belongs to many again let's return this belongs to many but this time it's just going to be a user okay great so if we come over and give that a refresh there we go we are listed out with just one member now for the sake of just manually testing this let's go ahead and create out a new user so we can either do that with tinker or just create this out in the database
03:31
manually and assign them to that team because we don't have the ability to invite at the moment we'll set the current id for this user to seven for the team and let's hook them up to this team so user id let's just take a look that's five so let's set them into that team as well and we see both of them users okay so let's go over to our team members partial here and let's make this
03:57
a little bit more interesting so let's put a divide in here on y on the y-axis and we'll set a divide color to say gray 100 it doesn't really matter and then in here rather than just dumping out all of this information in here because we are going to be including a lot in here let's go ahead and create out a blade component for this so we can either do that manually by creating that
04:16
out in our file list or we could say make component and let's call this team member so let's say team member and let's call that team member item we're going to pass the view flag in here so it doesn't create a class associated with this because we don't need a class associated with this component we're just going to use this almost like an include so what we can now do is say x
04:40
team member item and we can self-close this because we don't need to pass any proper any default slots through to it and we're just going to pass the member through so let's pass in that member let's go over to team member item dot blade dot php and let's just do exactly what we did before by outputting the member name and we shouldn't see any difference here but we now have
05:01
this separated out into a nice component so what I'm going to do for now is just roughly output this data we'll tidy this up as we go because we're going to be adding quite a lot to this as we saw so I'm going to output the member name and the member email let's just write a really quick test to make sure that we can see the team members and then we at least know that they're on the page and
05:21
if we break anything or change a permission somewhere we know that this is going to fail okay so over in our team controller test let's add this in so it should show a list of members again you could break this up into a separate test file as we get more we might do that later but let's go ahead and add it in here for now so we'll create out a user that's the first step
05:45
because we need to hit this page as a user but let's just go ahead and add a new user or another user to our current team so we're going to say current team members attach I'm going to add maybe a couple of additional members to this so let's assign this to a variable so we can extract the data from it later and let's say user factory but let's say times two and create so we've attached
06:12
two additional members to this particular team now acting as that user we can go ahead and view the page this is slightly different to the other tests that we've created so let's go ahead and view the team page which shows all of our members and we can do something now like assert c text or whatever we want to do so basically we want to be able to see all of the members emails
06:36
and all of the members names we're not making this really specific that we see them in a certain order we could probably do that but we just want to basically say that we can see them on the page so generally when I'm working with a list of data like this I'll do something like this so I'll pluck out the email address which will give us back a collection so from that members collection
06:56
we just pluck the email then we cast it to an array so let's just take a look at this just so we know what we're talking about we'll die dump on that and let's go ahead and run this test and yeah we've got an error here with that so let's just fix that up first and there we go so it's basically just a list of email addresses for each of their members now what we can do is when we
07:18
assert we see all of these we can actually pass an array in and it will just make sure this method will just make sure it can see each of the values in this array so we can do this and then we can do exactly the same thing for the name and this just gives us a really rough test to say can we see both of these users on the page obviously don't add too much detail here because things
07:41
might switch around but this should be enough let's go ahead and run that test and yeah let's get rid of the die dump first of course and we should see that go green perfect so we know that we can see them on the page now now because both of our roles so our member role has the ability to view team members as well as our admin we're not going to write a test to see if we can see
08:05
them if they don't have permission we could do that we maybe add that later but for now we know that all users can see all members so we're going to miss that test off just for now okay there we go so we can now see a list of our members we're going to adjust these a little bit later to make them a little bit better in fact the first thing i am going to do since we had in our team members
08:24
partial and unordered list for this team member item i'm going to make this a list item just so it's a little bit clearer okay so we can now see a list of our team members and now any of the actions associated with these now like changing the roles or removing them from the team we can just add into this partial
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!