This episode is for members only
Sign up to access "Laravel Teams" right now.
Get started
Already a member? Sign in to continue
Playing
17. Making team members look better
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
Let's take a moment just to style up the team member item component so it looks a little bit better and we've got everything within easy reach to build all of the features that we need. So let's start out by just spacing out each of the items that we have here, gives us a little bit more breathing room, and then inside of here let's go ahead and take the
00:19
member name and member email, put them inside of this component and then just style this up with flex and let's say item center and we'll set a space on the x-axis to two. That means that we can bring in a profile image here and then have the member name inside of say a header, we don't even need this as a header actually so let's get rid of that. So we can style this up just so it
00:44
looks a little bit better and feels more like a part of our application, so let's set this to font semi-bold, change the text to a text gray 900 so it fits the rest and we'll set a flex auto on here as well. Now for the profile photo let's go ahead and just style this out and then we'll go ahead and bring this in from any source that we want, so we can either set a height and a width
01:03
of six or we can use size six, be a little bit easier, and let's set a rounded of full just on here. So already if we just take a look at this that is looking a little bit better, we've got that line underneath that we added before and we can add like a drop down here, we can list the roles underneath the name, let's do that next. So just underneath this container here let's go ahead and
01:27
create out a section where we just list out the user role or more appropriately the user's roles. Now we're not really looking at multiple roles but you could add them here if you wanted to, so what we're going to do is we're going to pluck out the name of each of the roles that this user has and then just join them with a comma. At the moment this is just going to be one role but if you
01:47
did decide to have multiple roles later with different permissions you can do that as well. Okay so for this let's go ahead and create out a span so we can style this out slightly differently. Let's put a text to grey let's say 700 in here and then let's just put admin in there for now and we'll start off the rest. So for this outer container let's set a
02:07
margin top of three, let's set the text size to small here and we'll set the text to grey 500. So it looks something like this. So let's go ahead and get these admin roles dumped out of here and to do this we basically just need to take the member, the roles for that member, again we're going to go ahead and use pluck on that collection to pluck out the name but then we're going to go
02:27
ahead and join this as a string separated by a comma. That will give us something like this and of course if we had multiple roles we would see two. Now Mable doesn't have a role at the moment because we manually added that to the database but when we look at inviting users by default they will end up with a team member role and then of course we're going to have a drop down here which we can
02:48
use to change their role a little bit later. So speaking about this drop down we can just add this in here and we can pretty much copy this from anywhere else that we've already used that drop down so we're not going to sort of reinvent the wheel here. So let's grab the drop down here that we used earlier for our navigation stuff and we'll just go ahead and paste it directly into this
03:08
component. Now for this we don't need a label here so we can just get rid of that completely and we can get rid of this div here as well because we don't need any kind of spacing. Let's just use an SVG there and then we can get rid of, in fact let's keep this and get rid of the foreach. So let's pull this out and for this let's get rid of the href and just set it to
03:33
empty and we can get rid of this class with the font semi-bold as well. So in here we're going to have two options the first one is going to be to remove the team member and the second one is going to be to change the team member role. Okay let's take a look and there we go so when we click on this sure enough we have the option to do either of these. Of course later we're going
03:58
to change this up so we don't show these depending on the permissions of that particular user but for now that will do. Okay let's finish off by just adding in a profile photo so over on the user model we'll just do this really basically so let's go and find a place where we can add in a profile photo url method and let's go ahead and return just a profile photo from Gravatar. I've
04:24
pulled this in from my notes we just want to md5 hash the email address add it to this url and we now should be able to use this but of course you can swap this out for any solution you want. Okay so now that we've done that we can basically just pop that directly in here so we can say member and profile photo url and we should be done. Of course you could add an alt in here as well so
04:46
you could output the member name or something similar. Okay there we go so we now have a much nicer list of all of the members this is going to help as well for our invites we can reuse some of the same styles that we've created here and we have this drop down ready to go to build each of these features out.
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!