Sign in Get started

This episode is for members only

Sign up to access "Laravel Teams" right now.

Already a member? Sign in to continue

Playing

17. Making team members look better

Episodes

0%

Your progress

Total: 4h 36m
Played: 0m
Remaining: 4h 36m

Join or sign in to track your progress

01. Introduction and demo

02. Setup with Pest

03. Building the user teams relations

04. Creating a personal team when registering

05. Leaving all teams when an account is deleted

06. Tracking the current team

07. Showing team details in the UI

08. Switching to another team

09. Authorising team switching

10. Updating a team name

11. Basic roles and permissions setup

12. Team roles and permissions middleware

13. Authorising current team updates

14. Testing team permissions through HTTP requests

15. Leaving a team

16. Displaying team members

17. Making team members look better

18. Removing a team member

19. Preventing self removal from a team

20. Storing invitations

21. Validating invitations

22. Authorising team invitation creation

23. Displaying invitations

24. Revoking invitations

25. Sending an invitation email

26. Accepting an invitation

27. Displaying a modal to change a member’s role

28. Updating a member’s role

29. More authorisation and checks for role changing

30. Fixing up the email sending test details

31. Fixing and validating email addresses for invites

32. Tidying up @can directive checks

33. Detaching roles when removing users

34. Adding an extra layer of protection to the team middleware

35. Getting related models through teams

36. Building a helper to access the current team

37. Getting all related models through all teams

38. Creating new teams

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.

Episode summary

In this episode, we focus on giving the team member list some visual love so it actually feels at home in the app. We take the existing team member item component and redo its layout, spacing out the items for better readability and using flex to keep everything neat and lined up. The profile photo gets a proper style now—rounded, nicely sized, and pulled from Gravatar for the time being (we talk about swapping this out later if you want).

We also tidy up the member's name and email, update their font weights and colors to match the rest of the app, and introduce a dedicated section underneath their name to show user roles. Even though it's just one role per person right now, we make sure it's flexible enough to support multiple roles if needed down the road.

To finish things off, we add a dropdown menu (recycled from our nav component) right on each team member item, letting us quickly access actions like removing a member or changing their role (with permission checks to come later!). All of this sets the stage for easier development of invite features and team management. Now, your team list is both functional and looks way better!

Episode discussion

No comments, yet. Be the first!