In this episode, we're going to add some more information to each of these book cards. It would be great to see the average rating of each of the books here, right? So let's first modify the Eloquent query to get an average rating instead of running into n+1 query issue. So in the book resource, let's add a public function, public static function, get eloquent query and return parent eloquent query with the average of ratings. So we'll use the width average method and the relation here is users.

query and return parent eloquent query with the average of ratings. So we'll use the width average method and the relation here is users. That's how we've defined it. The column is book user table, we need to specify the table name book user dot rating. And we would like to get the column as average rating like so. So in the book stable, book stable now, let's create a text column to start with text column, make average rating, and let's see if we have this and yes, we are able to see 3 and 3.55.

make average rating, and let's see if we have this and yes, we are able to see 3 and 3.55. That means the average is, we're getting the average. Now to show the rating in stars, the way we see it everywhere, let's create a custom column. Open terminal, use the command PHP artisan make filament table column. The column name is rating column. Do you want to embed the HTML? No. Okay.

No. Okay. It's created. Let's open it. We have the rating column class and the rate column view. So without changing anything here, we should just be able to see the state if we use this column right now. So instead of text column, let me just replace this with the rating column we created, refresh

So instead of text column, let me just replace this with the rating column we created, refresh as expected. Nothing changes. We still see the rating. So let's replace this with some HTML. We first need, yes, I think this is almost auto completed it for us. So we have flex item center, if get state, that is, if there is a rating, we round it and for the number of stars, we show a solid star, otherwise we show only the

round it and for the number of stars, we show a solid star, otherwise we show only the outline star. Okay. And yes, if we don't have a rating, we will simply show no rating in a very small text. Okay. Let's go and check. We are able to see no rating, but not the stars.

Let's go and check. We are able to see no rating, but not the stars. Let's see what's wrong. Let's just do npm run dev. Usually that fixes things we are not able to see these blade icons probably could be because of the tail then classes. Let's check now go back and refresh. Yes. We can see the stars now and no rating.

Yes. We can see the stars now and no rating. Okay. This is good to fix the spacing issue here. If we're using the stack and spacing of one between all three of them, that's not what we would need probably. So what I do is I go back to the books table, I create another stack and wrap these two. So just copy this, put it here.

these two. So just copy this, put it here. Wrap only the text columns with it and let me not add any space between these two, but add a spacing of two or even three here. So that separates it well enough. The last thing we do here is add the status. Now, suppose I have probably borrowed this book or I'm currently reading it. It's great to show that badge for that. We will have to once again modify the eloquent query.

It's great to show that badge for that. We will have to once again modify the eloquent query. So let's go back to get the status here. We have to add another method in our book model here. We want to get the currently requested book. So we can call this method public function current borrow or something. Yeah. The currently borrowed book or currently requested whatever that is current borrow and return. This has one book user where user ID is or tidy.

borrow and return. This has one book user where user ID is or tidy. That's perfect. Let's modify the table query to include this. So we will save with current borrow, exactly. And now in the books table, let's use a text column to show the status exactly text column, make status, but here we need to use the state method to specify the state of this. So here we pass a closure with the record and we say dollar record current

this. So here we pass a closure with the record and we say dollar record current borrow status. But they could be null. So let's do this and let's see if we are able to see the status, go to the browser refresh and yes, we are able to see borrowed here requested here. Let's turn this into a nice badge with different colors, but first we need to capitalize and change the words.

capitalize and change the words. So let's use the format state using method and use the function here. Yes, take the state match it and yes, if it's requested, say requested, if it's borrowed currently reading and if it's returned, we say read before that's perfect. And now let's turn this into a badge using the badge method like so. And then for the color of the badge, yes, we use the warning, which actually is also like pending or something like that we use that color.

also like pending or something like that we use that color. So this is where we use those colors, which we first defined in the app panel, remember. So if you want to change the warning color, we can change it there success as we using the default for I think all of these and gray, we changed it to slate. So these colors will take effect now. Everything should look good. Let's refresh.

Everything should look good. Let's refresh. Yeah, we do have this as currently reading in the green color that we like requested in the warning color. Yes, that's perfect next. And this has been read before. But the last thing we need here is a custom action. So that's what we do in the next episode.

So that's what we do in the next episode.