Okay, let's continue our journey into our Crud operations, and we're going to move on to the client
side now and configure an inventory page so that we can display the list of products in a table that
the admin user can then go ahead and update or do whatever they need to do with the products create,
update, delete, etc..
So inside Note Solution Explorer, but we'll go back to our File Explorer view and inside the client
folder, inside the source folder and features folder, we'll create a new feature for our admin user
and we'll say new folder and admin.
And inside here we'll create a new file and call it Inventory page dot TSX.
And we'll create a boilerplate for a standard component.
And this one will be a bit boilerplate because we've got a table that we are going to effectively use
for our products inside here.
So it's not going to be complicated.
Let's consider it practice to practice what we've been doing so far on this training course.
And let's begin with bringing in what we need.
So we're going to have hold of our product programs because we're going to get a list of our products,
which means we need to send up programs to our API with this.
So we'll say product params and use app selector to get these from the store.
And we'll say state and add the arrow and state dot catalog.
And we also need to get our products data in here as well.
So we'll specify const and then data in curly brackets.
And we'll use our Use fetch products query to do this and pass in the product params.
And we'll also use or bring in our dispatch in here as well, because we are going to include pagination
so that we can page between our different pages of products.
And we'll use our use app dispatch to do that.
And then we're going to return inside this div and we'll make this a fragment actually as we're not
going to have styling at this level and VSCode didn't link them.
And inside the first step here, we'll have a box and bring this in from UI material, and we'll give
this a display of flex, and we'll have justify content and set this to space between and inside here
we'll have typography and we'll give it the SE property and just give it padding two all around.
And we'll give it a variant of H4.
And we'll just use a title of inventory for this below list.
We'll just have a button and we'll give this the SE property as well.
And inside here we'll just give it margin of two all around.
We'll give it a size equal to large and the variance equal to contained.
And we'll use this one for creating a product.
So we'll just call the button label create.
And below the box this is where it gets a bit boilerplate.
We're going to have a table container and we'll give it a component of paper.
So it has the white or dark background.
And inside a table container goes a table.
And we'll give this TSX property and give it min width of 650.
In this case and inside here we'll have a table head.
And inside the table head we'll have a table row.
And inside our table row we'll have table cells.
And inside our first table cell this is just going to be our header row.
So we'll just have a hash which is going to represent the ID of the product.
And we'll copy this down just one time.
And we'll use align left for this one.
And this can be products.
We'll copy this down again.
And this one can be a line.
Right.
And this is going to be for the price.
And we'll copy it down again and we'll use align center.
And this will be for the type.
And we'll copy this down two more times the underneath the type we'll have brand.
And underneath the brand we'll have quantity.
And we'll just have another table cell aligned to the right with no label.
But inside here will be an action button.
And below the table head we'll have our table body.
And inside here we can loop over our different products.
So we'll use data and we'll use double ampersand to be a bit defensive here.
And make sure we have it and specify data dot items dot map.
And we're going to map over the products.
So we'll add the arrow open parentheses and then have table row inside here.
And inside the right closing angle bracket.
We need to give this a key.
So we'll specify the key as the product ID.
And we'll give this an SX property.
And we'll give this some styling as I want to specifically remove the border from the bottom here.
And the way that we can target that is we can use in quotes.
We can specify ampersand colon and the last child.
So effectively the last table row which will specify TD to be as specific as we can add a comma ampersand
colon, last dash child and t h.
And to the right of the quote we'll add a colon and in curly brackets we'll specify border of zero.
To give that some very specific styling.
And then inside the table row we'll go table cells.
So we'll have a table cell.
And for this one we'll give it a component of t h and give it scope of row.
And this can be for the products ID.
And then we'll have another table cell.
And we'll give this one a line equal to the left.
And inside this table cell we'll have a box.
And we'll give the box the display flex property and align items to the center.
And inside the box we're going to have our product image and the product name.
So we'll use an image tag and give the source property the product.
dot picture URL, and we'll give it the alt of the product dot name.
And let's move this down, because by nature of using a table, we end up going quite far to the right.
So below the alt tag we'll give this some style and open double curly brackets, and we'll just give
it a height of 50 and margin rights of 20.
And below the image we'll have a span.
And inside here can go to products dot name.
Okay.
Below the box and the table cell we'll have another table cell.
And we'll give this a line to the right.
And inside here we'll use our currency format method and pass in the product dot price.
And we'll copy this table cell below, and this one is going to be aligned to the left.
And instead of product price this is going to be the product type.
And I'll copy this table cell down two more times.
And this should be aligned to the center.
And same for the next two as well.
So I'll just overwrite those.
And below the product type can go to product brand.
And then this one can be for the quantity in stock.
And I'll just copy this down one more time.
But this one will align to the right.
And instead of the product quantity in stock this is going to be for our action buttons.
So we're going to have two buttons.
We'll have a button.
And actually we'll make this button self-closing.
And we'll use a slightly different approach for an icon button.
We'll just give it a start icon equals and then in curly brackets left angle brackets.
And then we'll use edit, which we get from icons material and then add its self-closing tag.
And I'll copy this down below.
And for the next one we'll have delete and get that from icons material.
And to the right of the curly brackets we'll give it a color equal to error.
And then we'll just deal with the pagination as well inside here.
So just above the table container.
This is where we'll add our pagination.
We'll use a box.
And we'll check to make sure that we've got the pagination.
So inside curly brackets we'll use data dot pagination double ampersand and then check the data dot
items dot length is greater than zero.
Double ampersand again and then open parentheses.
And we can use our app pagination components to make this self-closing.
And we'll give it the properties it needs.
We'll pass in metadata equal to data dot pagination, and we'll use the on page change method and pass
through the page which is a type of number.
And then we'll use our dispatch.
And we'll use the set page number method and pass through the page.
And that should be that.
So we'll need a route for this component.
So we'll open up our routes.
And inside here we don't have the ability yet to restrict access just to the admin user.
But we'll put it in our require auth for the short term so that we can test our functionality here.
And this is going to be for the inventory.
And we'll use our new inventory page as the component that we load.
And again a short term thing at the moment we'll go to our user menu.
And let's see we'll put a link in here for the inventory as well.
So I'll just copy the my orders and paste it below.
And we will call it inventory.
As the link.
And instead of the history icon we'll use the inventory icon from icons material.
And this is going to work for the normal Bob user or the admin user.
Right now we're not differentiating on the client.
And when it comes to displaying the inventory and getting the products, well, that's going to work
for both of them as well, because the fetch method we're using, we're just using the get products
at the moment.
We're not doing anything specific that only an admin can do yet.
But let's go to our browser.
Let's go back to our application and I'll log in.
Even though it's not going to make any difference, I'll log in as admin at test.com with the password.
And what we should have in our user menu now is the inventory.
And what we should have is my orders.
Of course, I didn't change the route inside the user menu.
I just changed the icon.
So we need to go to inventory.
Inventory.
Okay.
So let's give that another go.
And I'll go to inventory again.
And this time we get taken to our products page and we can see our list of products.
We've got our create button.
We've got our edit and delete icons buttons.
And we've got our pagination available inside here as well.
And we can go through and see our list of products working just like we'd expect it to.
So now we've got our inventory page.
Could do with a bit of styling.
I've got things squashed up against the edge there, but that will be okay for the short term.
And what we'll take a look at next is adding the create and edit form that we need for our products,
and we'll take a look at that next.