Counting Stats for our Admin Dashboard

In This Lesson

We'll perform various counts against our models to display on our admin dashboard page.

Created by: @tomgobich
Published: 1 year ago

🕰️ Chapters
00:00 - Querying Total Movie Count
00:56 - Creating A Stat Component
02:15 - Querying Writer & Director Counts
03:26 - Converting Counts to Numbers
04:40 - Counting Total Watched Movies

Join the Discussion 0 comments

Be the first to comment!

Transcript

[MUSIC] So what good is an admin dashboard if we're not doing some form of an aggregation to
show our administrators how we're doing? So let's aggregate some numbers, maybe like our total movie count, user count, and the like to show on our dashboard. So we can go back into our dashboard
controller and start aggregating. So first, let's go and just do our total movie counts. We'll do const movieCount equals weight, and we can use our movie model to query.count,
and let's just count the ID column as that will uniquely identify the movie. Now, this will return back an array, and then the movie count will be inside of
the first array index extras object. So what we can do is just grab the first or fail there, and that will allow us to just do moviesCount.extras.
Let's give this, say, an alias of count so that we can just do.count. Let's provide that into our page state. So moviesCount.
Okay, let's make both of those names match. There we go. Jump on down to our dashboard page, and let's do div class flex items center justify around,
add a gap of four, and let's also let these wrap. So we can do flex wrap too.
Let's do now another div class flex flex call div class text extra large, and this is where our number will go,
and then we'll have a div class text slate, maybe 400 text extra small, font bold, and this is where our label will go.
Actually, let's make this just LG rather than extra large. So that we're not copying and pasting this for each stat that we do, we can scroll on down to our components, right-click that, new file,
and we do a stat folder with an index.edge inside of it, and we can now paste that inside of here. Inside of our number div,
we can now do value.to local string, and then we can do label for our label. Jump back into our dashboard, and we can now get rid of that,
and just do @stat label total movies value is our moviesCount.extras. It should be named count. This is a self-closing text,
we also need to add an exclamation point there to assert that. Cool. So let's go and jump into our browser and see what we have. Cool. So it looks like we have 420 total movies. If you really wanted to,
you could also jump into your dashboard controller, filter down these individually by released, not yet released, releasing soon,
or just generally by the overall status of the movie as well. Let's also grab our writers and directors counts. So writers count equals await,
and this will want to reach for our Cineasts model, query where has movies written, and this expects just a query callback of some sort,
but we don't need to filter that down any further. So we'll just leave that as is. We can give that a copy, paste that one more time for our directors count, and instead of where has movies written,
this will be where has movies directed. Let's add that into our page state as well. So writers count and directors count, just like so. Jump into our dashboard page,
give this stat here a copy and a paste two times, total writers and total directors. And then this will be our writers count, and this will be directors count.
If that is saved, we can check that out in the browser now. And cannot read properties of undefined reading count. Oh yeah, no, we forgot to count it all together. My bad. Okay, dashboard controller. We just did the where has.
What we need to do now after the where has is also counted by the Cineasts ID. There we go. And then we'll also want to do first or default
where has count ID dot first or fail. Cool. All right. Let's go give that a test one more time. So jump back in here, refresh. There we go.
We have 420 movies, 109 writers, and 108 directors. Now within our stat, we did two local string, but I think these are probably already coming through
as string and our intention there was to format. So let's go jump back into our stat here and I'm just gonna do a quick type of value
and let's get rid of the two local string here momentarily just to see what this is coming through as. I bet you it's a string. Yep, sure is. Okay.
So let's switch this to parse int value and we'll default that to zero if it's not provided. And then we'll convert it to a local string.
And of course we can get rid of our type of there as well. And what this two local string is doing is let's say we had something like 1500 as our number. It's going to take that number
and it'll convert it into a legible string. So it's adding in the comma there for us. So that's our intention with that. Furthermore, if all of our counts are gonna come through as extras dot count,
we can go ahead and normalize that altogether as well by just moving that into our stat component. That is completely up to you. And that is a design decision. We'll go ahead and move forward with it here
because all of ours should match that. So it'll just simplify things a little bit here for us. Give that a save and let's double check everything. I think this error is from before we actually saved the dashboard page.
Let's give it a refresh for sanity sake. And sure enough, it was. Okay, cool. Hide that back away. All right. So we should have a pretty good premise on how we can count overall items.
So we'll leave users out here and move onward. So let's go ahead and now count the total number of movies watched.
So for this, we can do const watched movies count equals await. And we can reach for our watch list as that's what discerns that query.
Where not null watched at. Go ahead and count the ID of our watch lists as we can only ever have one watch list per user per movie.
So that should be distinct. And then we can do first or default to keep with our theme. And it does look like the default name for count is count as our directors and writers count have been working.
So we can go ahead and get rid of the alias here as well. And then let's add our movies watch list count into our page state. So watched movies count.
Jump into our dashboard and we can do at stat label movies watched value watch movies count. Give that a save. And let's go check that out real quick.
There we go. So six movies have been watched out of a total of 420 movies that we have comprised of 108 total writers and 109 total directors. I did that backwards.
109 total writers and 108 total directors.

Let's Learn AdonisJS 6

113 Lessons

14h 15m

Introduction

Fundamentals

Building Views with EdgeJS

Database and Lucid ORM Basics

Lucid ORM Relationships

Working With Forms

Authentication & Middleware

Filtering and Paginating Queries

User Watchlist

User Profiles

Admin Panel

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.