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

07. Showing team details in the UI

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

Okay so we've got everything we need to list the teams that we belong to and also the current

00:05

team that we are within. So we can now show these in a drop down within the UI. Okay let's go over to the navigation and inside here we'll find the drop down that we can already see which is the settings drop down just here with the current user's name. We're pretty much going to take that just copy and paste it just so we have two of these next to each other. Now let's go ahead

00:25

and run npm run dev to build all of our client changes and let's give that a refresh and you can see we get exactly the same drop down. We can now switch this over to show the team that we are currently in and then list all of the teams. So really we can just switch this over to show the current team. So let's prefix this with team and let's grab the currently authenticated user.

00:48

We now know that we've got that current team relationship and we can just show the current team's name and we know that just because we've created an account we have a personal team. Now let's switch this over to auth user not auth and there we go so we're in team Alex. Let's go down and just fill in a couple of more things in here. So this could be the team settings so whichever

01:10

team that we're currently in we'll be able to click on this drop down link here which we'll adjust later because we have a bit of a page for it to go into the settings for that current team and we can get rid of this just here because we don't need that and let's go ahead and build out a list of all of the teams that we're currently in. So pretty straightforward we just want to do

01:30

a for each here on the current user and teams and we'll call each of them team and then in here we can pull in an x drop down link which is just a component registered as part of Breeze and then in here we can just add in the team name. Now eventually this is going to become a button which will submit a form and that will go ahead and switch the team but we know that we can at

01:52

least just list them out for now. Okay so if we just go ahead and open this up we've got this team settings button here and all of the teams that we're currently in. Let's just go ahead and adjust the class on this to be a font of semi-bold just so it looks a little bit different to all of the other teams and of course you can adjust this however you want. So there we go let's go ahead

02:12

and add another team to this user and we'll just do this manually over in the database. So let's go and just duplicate this down and create out a code course team and save that out and then of course over in team user we'll want to go ahead and associate the user id of two to team three and now we should belong to another team there we go. So the goal now is to be able to

02:36

click on either of these teams to switch between them you could exclude this one if you want to but I'm just going to leave it here and we want to be able to click on this to switch over to a team and of course the ability to click on team settings to go through to the settings for that current team. Let's work on switching teams next.

Episode summary

In this episode, we focus on displaying team details in the UI. We start by leveraging the relationships we've set up to list all the teams the user belongs to, as well as identifying which team they're currently viewing. We take the existing user settings dropdown in the navigation and essentially duplicate it, setting up a new dropdown just for teams.

We hook up this new dropdown so it displays the name of the current team, making use of the authentication details. Inside the dropdown, we add a link to the team settings (for the currently selected team) and then build a list of all the teams the user is a part of. For each team, we render a dropdown item with the team's name using a simple foreach loop and the prebuilt dropdown link component.

To visually distinguish the current team, we make a minor styling adjustment. As an extra step, we manually add another team for the user directly in the database to demonstrate how the UI behaves with multiple teams.

By the end of this episode, you'll have a navigation dropdown showing your current team, a settings shortcut, and a list of all your teams. The next step (teased at the end) will be enabling the actual switching between teams when clicking on them.

Episode discussion

No comments, yet. Be the first!