This episode is for members only
Sign up to access "Laravel Teams" right now.
Get started
Already a member? Sign in to continue
Playing
07. Showing team details in the UI
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'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.
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!