WEBVTT 00:00.020 --> 00:05.000 Okay, let's continue our journey into our Crud operations, and we're going to move on to the client 00:05.000 --> 00:11.510 side now and configure an inventory page so that we can display the list of products in a table that 00:11.510 --> 00:18.890 the admin user can then go ahead and update or do whatever they need to do with the products create, 00:18.890 --> 00:20.570 update, delete, etc.. 00:20.570 --> 00:26.150 So inside Note Solution Explorer, but we'll go back to our File Explorer view and inside the client 00:26.150 --> 00:32.630 folder, inside the source folder and features folder, we'll create a new feature for our admin user 00:32.630 --> 00:35.360 and we'll say new folder and admin. 00:35.360 --> 00:42.110 And inside here we'll create a new file and call it Inventory page dot TSX. 00:42.110 --> 00:45.680 And we'll create a boilerplate for a standard component. 00:45.680 --> 00:53.630 And this one will be a bit boilerplate because we've got a table that we are going to effectively use 00:53.630 --> 00:55.070 for our products inside here. 00:55.070 --> 00:56.750 So it's not going to be complicated. 00:56.750 --> 01:01.640 Let's consider it practice to practice what we've been doing so far on this training course. 01:01.640 --> 01:06.020 And let's begin with bringing in what we need. 01:06.050 --> 01:10.430 So we're going to have hold of our product programs because we're going to get a list of our products, 01:10.430 --> 01:14.840 which means we need to send up programs to our API with this. 01:14.840 --> 01:19.130 So we'll say product params and use app selector to get these from the store. 01:19.130 --> 01:23.720 And we'll say state and add the arrow and state dot catalog. 01:26.900 --> 01:29.750 And we also need to get our products data in here as well. 01:29.750 --> 01:33.380 So we'll specify const and then data in curly brackets. 01:33.380 --> 01:40.100 And we'll use our Use fetch products query to do this and pass in the product params. 01:40.700 --> 01:47.240 And we'll also use or bring in our dispatch in here as well, because we are going to include pagination 01:48.530 --> 01:52.490 so that we can page between our different pages of products. 01:52.490 --> 01:56.000 And we'll use our use app dispatch to do that. 01:56.750 --> 02:03.950 And then we're going to return inside this div and we'll make this a fragment actually as we're not 02:03.950 --> 02:11.010 going to have styling at this level and VSCode didn't link them. 02:12.510 --> 02:21.000 And inside the first step here, we'll have a box and bring this in from UI material, and we'll give 02:21.000 --> 02:34.050 this a display of flex, and we'll have justify content and set this to space between and inside here 02:34.050 --> 02:40.290 we'll have typography and we'll give it the SE property and just give it padding two all around. 02:40.380 --> 02:44.790 And we'll give it a variant of H4. 02:45.630 --> 02:50.100 And we'll just use a title of inventory for this below list. 02:50.130 --> 02:55.410 We'll just have a button and we'll give this the SE property as well. 02:55.410 --> 02:58.950 And inside here we'll just give it margin of two all around. 02:59.280 --> 03:07.080 We'll give it a size equal to large and the variance equal to contained. 03:07.140 --> 03:10.620 And we'll use this one for creating a product. 03:10.620 --> 03:12.570 So we'll just call the button label create. 03:12.570 --> 03:15.750 And below the box this is where it gets a bit boilerplate. 03:15.900 --> 03:21.150 We're going to have a table container and we'll give it a component of paper. 03:21.150 --> 03:24.660 So it has the white or dark background. 03:24.690 --> 03:28.050 And inside a table container goes a table. 03:28.380 --> 03:35.400 And we'll give this TSX property and give it min width of 650. 03:35.430 --> 03:40.410 In this case and inside here we'll have a table head. 03:42.240 --> 03:45.450 And inside the table head we'll have a table row. 03:47.760 --> 03:51.810 And inside our table row we'll have table cells. 03:51.840 --> 03:56.010 And inside our first table cell this is just going to be our header row. 03:56.010 --> 04:00.900 So we'll just have a hash which is going to represent the ID of the product. 04:00.930 --> 04:03.750 And we'll copy this down just one time. 04:03.750 --> 04:07.620 And we'll use align left for this one. 04:07.680 --> 04:09.780 And this can be products. 04:10.350 --> 04:11.940 We'll copy this down again. 04:11.940 --> 04:14.430 And this one can be a line. 04:14.430 --> 04:15.210 Right. 04:15.210 --> 04:18.120 And this is going to be for the price. 04:19.710 --> 04:24.960 And we'll copy it down again and we'll use align center. 04:25.470 --> 04:27.840 And this will be for the type. 04:28.380 --> 04:34.020 And we'll copy this down two more times the underneath the type we'll have brand. 04:34.170 --> 04:37.980 And underneath the brand we'll have quantity. 04:38.310 --> 04:44.550 And we'll just have another table cell aligned to the right with no label. 04:44.640 --> 04:47.370 But inside here will be an action button. 04:47.370 --> 04:52.020 And below the table head we'll have our table body. 04:52.020 --> 04:55.500 And inside here we can loop over our different products. 04:55.500 --> 04:59.760 So we'll use data and we'll use double ampersand to be a bit defensive here. 04:59.760 --> 05:05.490 And make sure we have it and specify data dot items dot map. 05:05.490 --> 05:08.310 And we're going to map over the products. 05:08.310 --> 05:15.850 So we'll add the arrow open parentheses and then have table row inside here. 05:18.040 --> 05:23.830 And inside the right closing angle bracket. 05:23.860 --> 05:24.970 We need to give this a key. 05:24.970 --> 05:27.250 So we'll specify the key as the product ID. 05:28.900 --> 05:31.480 And we'll give this an SX property. 05:31.630 --> 05:40.840 And we'll give this some styling as I want to specifically remove the border from the bottom here. 05:40.840 --> 05:45.580 And the way that we can target that is we can use in quotes. 05:45.580 --> 05:50.980 We can specify ampersand colon and the last child. 05:51.340 --> 06:01.750 So effectively the last table row which will specify TD to be as specific as we can add a comma ampersand 06:01.750 --> 06:07.660 colon, last dash child and t h. 06:09.490 --> 06:15.730 And to the right of the quote we'll add a colon and in curly brackets we'll specify border of zero. 06:19.210 --> 06:21.970 To give that some very specific styling. 06:22.360 --> 06:26.440 And then inside the table row we'll go table cells. 06:26.440 --> 06:29.200 So we'll have a table cell. 06:29.200 --> 06:38.290 And for this one we'll give it a component of t h and give it scope of row. 06:39.520 --> 06:42.520 And this can be for the products ID. 06:44.320 --> 06:46.990 And then we'll have another table cell. 06:48.430 --> 06:52.090 And we'll give this one a line equal to the left. 06:52.090 --> 06:55.600 And inside this table cell we'll have a box. 06:56.950 --> 07:06.520 And we'll give the box the display flex property and align items to the center. 07:06.760 --> 07:11.140 And inside the box we're going to have our product image and the product name. 07:11.140 --> 07:16.630 So we'll use an image tag and give the source property the product. 07:17.980 --> 07:25.960 dot picture URL, and we'll give it the alt of the product dot name. 07:25.960 --> 07:33.970 And let's move this down, because by nature of using a table, we end up going quite far to the right. 07:34.240 --> 07:40.660 So below the alt tag we'll give this some style and open double curly brackets, and we'll just give 07:40.660 --> 07:47.680 it a height of 50 and margin rights of 20. 07:49.060 --> 07:51.220 And below the image we'll have a span. 07:51.220 --> 07:54.220 And inside here can go to products dot name. 07:56.740 --> 07:57.100 Okay. 07:57.100 --> 08:01.120 Below the box and the table cell we'll have another table cell. 08:02.260 --> 08:06.550 And we'll give this a line to the right. 08:07.180 --> 08:15.040 And inside here we'll use our currency format method and pass in the product dot price. 08:15.790 --> 08:24.020 And we'll copy this table cell below, and this one is going to be aligned to the left. 08:24.020 --> 08:30.530 And instead of product price this is going to be the product type. 08:31.100 --> 08:34.850 And I'll copy this table cell down two more times. 08:36.410 --> 08:39.440 And this should be aligned to the center. 08:39.440 --> 08:42.110 And same for the next two as well. 08:42.110 --> 08:43.550 So I'll just overwrite those. 08:43.550 --> 08:46.430 And below the product type can go to product brand. 08:46.610 --> 08:52.310 And then this one can be for the quantity in stock. 08:52.670 --> 08:55.340 And I'll just copy this down one more time. 08:55.460 --> 08:57.680 But this one will align to the right. 08:57.680 --> 09:04.700 And instead of the product quantity in stock this is going to be for our action buttons. 09:05.870 --> 09:07.190 So we're going to have two buttons. 09:07.190 --> 09:08.300 We'll have a button. 09:08.300 --> 09:11.720 And actually we'll make this button self-closing. 09:12.200 --> 09:15.080 And we'll use a slightly different approach for an icon button. 09:15.080 --> 09:20.660 We'll just give it a start icon equals and then in curly brackets left angle brackets. 09:20.660 --> 09:27.890 And then we'll use edit, which we get from icons material and then add its self-closing tag. 09:28.310 --> 09:30.170 And I'll copy this down below. 09:30.170 --> 09:35.990 And for the next one we'll have delete and get that from icons material. 09:36.020 --> 09:40.910 And to the right of the curly brackets we'll give it a color equal to error. 09:40.910 --> 09:44.570 And then we'll just deal with the pagination as well inside here. 09:44.570 --> 09:48.200 So just above the table container. 09:48.230 --> 09:50.990 This is where we'll add our pagination. 09:50.990 --> 09:52.460 We'll use a box. 09:54.170 --> 09:57.590 And we'll check to make sure that we've got the pagination. 09:57.590 --> 10:06.650 So inside curly brackets we'll use data dot pagination double ampersand and then check the data dot 10:06.680 --> 10:10.850 items dot length is greater than zero. 10:12.290 --> 10:15.920 Double ampersand again and then open parentheses. 10:15.920 --> 10:20.840 And we can use our app pagination components to make this self-closing. 10:20.840 --> 10:22.700 And we'll give it the properties it needs. 10:22.700 --> 10:32.310 We'll pass in metadata equal to data dot pagination, and we'll use the on page change method and pass 10:32.310 --> 10:35.820 through the page which is a type of number. 10:36.150 --> 10:38.520 And then we'll use our dispatch. 10:38.820 --> 10:44.340 And we'll use the set page number method and pass through the page. 10:44.430 --> 10:46.530 And that should be that. 10:46.560 --> 10:48.690 So we'll need a route for this component. 10:48.690 --> 10:50.430 So we'll open up our routes. 10:50.760 --> 10:59.310 And inside here we don't have the ability yet to restrict access just to the admin user. 10:59.310 --> 11:04.830 But we'll put it in our require auth for the short term so that we can test our functionality here. 11:04.950 --> 11:08.340 And this is going to be for the inventory. 11:09.600 --> 11:18.630 And we'll use our new inventory page as the component that we load. 11:18.630 --> 11:23.160 And again a short term thing at the moment we'll go to our user menu. 11:23.970 --> 11:29.480 And let's see we'll put a link in here for the inventory as well. 11:29.480 --> 11:35.660 So I'll just copy the my orders and paste it below. 11:35.660 --> 11:39.410 And we will call it inventory. 11:41.870 --> 11:43.280 As the link. 11:43.310 --> 11:50.330 And instead of the history icon we'll use the inventory icon from icons material. 11:52.370 --> 11:57.050 And this is going to work for the normal Bob user or the admin user. 11:57.050 --> 11:59.960 Right now we're not differentiating on the client. 11:59.960 --> 12:04.430 And when it comes to displaying the inventory and getting the products, well, that's going to work 12:04.430 --> 12:10.310 for both of them as well, because the fetch method we're using, we're just using the get products 12:10.340 --> 12:10.850 at the moment. 12:10.850 --> 12:15.200 We're not doing anything specific that only an admin can do yet. 12:15.200 --> 12:17.510 But let's go to our browser. 12:17.510 --> 12:20.810 Let's go back to our application and I'll log in. 12:20.810 --> 12:28.340 Even though it's not going to make any difference, I'll log in as admin at test.com with the password. 12:29.460 --> 12:34.950 And what we should have in our user menu now is the inventory. 12:35.070 --> 12:38.970 And what we should have is my orders. 12:39.000 --> 12:42.840 Of course, I didn't change the route inside the user menu. 12:42.870 --> 12:44.340 I just changed the icon. 12:44.340 --> 12:47.190 So we need to go to inventory. 12:47.670 --> 12:49.290 Inventory. 12:49.650 --> 12:50.280 Okay. 12:50.310 --> 12:52.080 So let's give that another go. 12:52.560 --> 12:55.620 And I'll go to inventory again. 12:55.620 --> 12:59.670 And this time we get taken to our products page and we can see our list of products. 12:59.670 --> 13:01.050 We've got our create button. 13:01.080 --> 13:05.730 We've got our edit and delete icons buttons. 13:05.760 --> 13:10.290 And we've got our pagination available inside here as well. 13:10.320 --> 13:15.600 And we can go through and see our list of products working just like we'd expect it to. 13:15.630 --> 13:17.550 So now we've got our inventory page. 13:17.550 --> 13:18.840 Could do with a bit of styling. 13:18.840 --> 13:22.980 I've got things squashed up against the edge there, but that will be okay for the short term. 13:22.980 --> 13:29.400 And what we'll take a look at next is adding the create and edit form that we need for our products, 13:29.400 --> 13:31.560 and we'll take a look at that next.