تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Enabling Auth Features0:00

Okay, now that we've been through all six of the different packages that make up Filament, let's step back and look at the panel once more and look at some of the options we have to configure our app based on the panel. So I'm here on the sign-in page and one of the things that you may notice here is we only have sign-in. We don't have registration, we don't have forgot password. All that stuff is really easy to add if we go into our App\Providers\PanelServiceProvider. And you can see here, it comes with login when you generate that first panel. So we can just add other methods like registration. Let's also have forgot password or password reset.

So we can just add other methods like registration. Let's also have forgot password or password reset. Let's also have email verification when someone signs up. So if we want to allow people to just sign up, do password resets, now we go back here and you can see all of that's been added for us. We can sign up for an account, we can go back to sign in, we can do a password reset. All that is standard out of the box and easily configurable for you based on your panel. Laravel, our company is probably not Laravel. What if we want to change that name? So we can just change the brand.

Customizing Brand and Logo1:03

What if we want to change that name? So we can just change the brand. So we have a brand name here. So let's say My Great Company and refresh. So that's going to show up here. Let's go ahead and log in. We can see My Great Company is there as well. And if we want to use a logo instead of just the name of the company, we can do that as well with our brand logo here. And so we can define an image that we would want to put here.

well with our brand logo here. And so we can define an image that we would want to put here. Also just be aware that you've got light mode and dark mode. So you're going to also have a dark mode logo, which the dark mode brand logo can be set that way. You could actually even force dark mode on your users if you wanted to. So right now we have light mode and dark mode. In order to force it, you would actually pass in another true value here, which is the isForce. And then if I refresh, I don't have the option to switch back and forth.

Configuring Navigation Layout1:58

force. And then if I refresh, I don't have the option to switch back and forth. So light mode and dark mode comes standard. Now let's look at our navigation. We've addressed the logo up here. All these navigation or all of our resources have the same icon. And you've probably seen you define that in the resource itself. So if we go to the Attendee resource, which is at the top, if we want to change this to something else, we can just make it UserGroup looks good here, do a refresh. And now the icon changes so we can customize it that way.

something else, we can just make it UserGroup looks good here, do a refresh. And now the icon changes so we can customize it that way. The other thing that you might want to do is group some of them. So we can go to our panel again, and we would need to set up I like to do this right above the pages, we can set up our navigation groups. And so this is going to be an array of what are the different navigation groups you want to provide. We're going to pass in navigationGroup classes. So we'll make this one we'll say firstGroup, and we might want to give it an icon as well. So let's do a heroicon on Oh, let's say cake, why not?

So we'll make this one we'll say first group, and we might want to give it an icon as well. So let's do a heroicon on Oh, let's say cake, why not? Everyone loves cake. And let's add a second navigation group. And instead of cake, let's make this lightning bolt. Okay, so we have these two groups. Now we just need to assign our different resources to the groups. So if I go back to my attendee resource, instead of having an icon now, because the group has an icon, you actually can't have an icon on the individual resources. So now we just need to add the group here navigation group.

group has an icon, you actually can't have an icon on the individual resources. So now we just need to add the group here navigation group. So we'll put this in the first group. And let's copy this and put it in some other resources. So let's say the conference resource is also in that first group. And again, we need to get that out of here. And then let's go back up and let's say speaker and talk are in the second group. Okay, let's go take a look at the browser, give it a refresh. And so now you can see we have our first group, we can expand and close it. It's got the cake icon and the second group here as well venues because it's not in a

And so now you can see we have our first group, we can expand and close it. It's got the cake icon and the second group here as well venues because it's not in a group is still up at the top. So you get to fully customize how you want your navigation to look. You also might want the ability to give your users an option to collapse the sidebar and we can do that as well. Let's go back to the PanelProvider right here by the navigation groups. Let's just put it here. We'll say sidebar collapsible on desktop or fully collapsible. There's a couple different options when we have it collapsible.

We'll say sidebar collapsible on desktop or fully collapsible. There's a couple different options when we have it collapsible. It looks like this. So there's collapsible and not collapsible. And then if we make it fully and take a look, it just looks a little bit different to where it's completely gone once you collapse it, and then it comes back. So it is up to you which one you want. I kind of like collapsible on desktop. So we'll leave it like that. That way when you close it, you can still hover over here and see where you want to

Adding Navigation Badges4:45

So we'll leave it like that. That way when you close it, you can still hover over here and see where you want to go. Now another thing that can be really great for your users is to give them an indication of where in the app they might want to navigate. Maybe there's something that needs their attention. And so we can do that. Let's go to the attendee resource again. And so we can add actually a badge so that it will show up with a count of how many things maybe need attention on that resource.

And so we can add actually a badge so that it will show up with a count of how many things maybe need attention on that resource. So we can get the navigation badge with this method here. It's going to return a string. So it could be a count. It could be, you know, we could just return new. And so when we do that, we come back here, we get this nice badge that says new. And also we might want to change the color of it. So let's scroll down here. We get the color as well.

So let's scroll down here. We get the color as well. And you know, you can just return something hard-coded like I'm doing now. Or you could do some logic and decide, should it be red? Should it be green? Whatever you like. So this is what it looks like passing a string. And you might just want to, you know, you could say attendeeCount. If we do that, now we can see we have 306. Maybe it would be a little more complex.

Setting Up Global Search5:55

If we do that, now we can see we have 306. Maybe it would be a little more complex. You'd say maybe attendees that need review. And then ideally when you get there, there's a nice filter that can be applied that show you which need your attention and you take care of those. Now another way to get around your app, which would be really useful, would be to have a global search. So you can just find what you need without having to go to the sidebar. You notice when I'm in my IDE, I almost never pull out the navigation. I'm always just going to where I need to go.

You notice when I'm in my IDE, I almost never pull out the navigation. I'm always just going to where I need to go. So Filament actually has that built in as well. And we just need to tell Filament, what should I search for? So for attendees, we probably want to search for the name. So while we're here in the attendee resource, we just need to add another method here. Or actually it's not a method, it's a property. This is the recordTitle attribute. And so in this case, it would be name. And so all I've done is added this one property here.

And so in this case, it would be name. And so all I've done is added this one property here. Now let's go back to the browser and take a look at how this changed when I give it a refresh. I now have a search up here. And so if I search for Kevin, you'll see now it's showing me the attendees where the name is Kevin. Now I can do this for other ones as well. So let's go to the Conference resource. And if we do that same thing, record title attribute, and I believe it's called name.

So let's go to the conference resource. And if we do that same thing, record title attribute, and I believe it's called name on this model, let's go back to the browser, give it a refresh. And actually, let's go to conferences. And let's change one of these, where the conference name has Kevin somewhere in it. So we'll do that, save. And now if I go to my global search and type Kevin, you'll see I see both attendees and conferences. So when I click here, it's actually going to take me to the edit for that record. Now I can also add some details in here.

So when I click here, it's actually going to take me to the edit for that record. Now I can also add some details in here. So we give the User even more information about what they might be navigating to. So if we go back to our IDE, let's go back to the attendee resource. And maybe we want to know what conference they're signed up for as we're searching them. So we would just add in here. We need a method for getGlobalSearchResultDetails. And so this is going to return an array. And let's just say that the conference is recordConference. And let's do the name here.

And let's just say that the conference is record conference. And let's do the name here. Okay, and we go back. And now let's find Kevin here. You can see that now we're showing a little bit more information about the User as well. So obviously, you can customize this to return whatever information is useful to your users, so that you have the most information you need to get where you need to go. So we spent this video talking about the app panel, which is what the Laravel team would use to manage all these conferences. We also did show you how to add a public page so that someone could maybe register as like

Creating a Second Panel8:32

use to manage all these conferences. We also did show you how to add a public page so that someone could maybe register as like a marketing page and integrate with your filament app. Another thing you could do is add a second panel. Like maybe when you choose a speaker, you want the speaker to be able to log in and do some things, maybe upload their slides or whatever you want them to do. So we can do that by creating a new panel. So let's go into our terminal, we're going to do a php artisan make:filament-panel. And when we run this command, the ID, we're going to call this speakers. And now we have a speakers panel provider.

And when we run this command, the ID, we're going to call this speakers. And now we have a speakers panel provider. So let's pull up that record speakers panel provider. And so now we have another class that defines all of these things that we want for our speakers. So we probably want a login page here as well, we can add all the other authentication things. The path here is really important because we want to make sure we don't collide with some of the other things that we have. So we already have a speakers path. So let's actually just make it speaker.

So we already have a speakers path. So let's actually just make it speaker. And if I go back to the browser, and let's just log out here. So I'm here at larikonf.test. Now if I go to larikonf.test/speaker, now I have a completely new panel. And so I can have my speakers log in here. When they do log in, I'll do a login right now. And you can see it doesn't have any resources here. So now, if I go back to the terminal, and let's say I want to make a filament resource. Let's do this.

So now, if I go back to the terminal, and let's say I want to make a filament resource. Let's do this. And it's going to ask, okay, I want the attendee. And which panel am I going to create this in? So now I can create a different resource to be used in my speakers panel versus the app panel. And this allows me to fully customize the experience for each of the different types of users. So I'm just going to cancel this out. And then if you're going to have multiple panels in production, you are going to need

So I'm just going to cancel this out. And then if you're going to have multiple panels in production, you are going to need to define who can actually access which panel. So to do that, we need to go to our User model. So we need to implement a contract for FilamentUser. And what this is going to do is make sure that we have a method for canAccessPanel. So we've added that here. And then we can just pass in what is the userType, maybe have a role field on the User, and it can define whether they can access the panel or not. So basically, the way you would do this is the panel has a getId method.

and it can define whether they can access the panel or not. So basically, the way you would do this is the panel has a getId method. And so that will be either, you know, speakers or app, in our case. And so you can check, okay, which panel are they trying to access? Does this User have permissions to access that panel? And because I'm not ready to do this, I'm going to delete this. But in your app, you can go ahead and implement that if you add a second panel.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟