1 00:00:00,230 --> 00:00:03,830 So now we want to be able to mark the order as delivered. 2 00:00:03,830 --> 00:00:06,760 And of course only admins should be able to do this. 3 00:00:06,770 --> 00:00:09,350 So the first step is on the back end. 4 00:00:09,380 --> 00:00:16,370 If we go to our order controller, you should already have the method here, the function update order 5 00:00:16,370 --> 00:00:16,960 to deliver. 6 00:00:17,030 --> 00:00:18,640 We just need to finish it. 7 00:00:18,650 --> 00:00:20,150 So let's get rid of that. 8 00:00:20,150 --> 00:00:23,690 And first thing we want to do is get the order right. 9 00:00:23,690 --> 00:00:29,690 So we're going to get it by the ID because we're getting it's going to be passed in right here and then 10 00:00:29,690 --> 00:00:31,670 we're going to check for the order. 11 00:00:32,090 --> 00:00:37,910 And if it's there, then we're going to set the is delivered to true. 12 00:00:37,940 --> 00:00:41,480 We're going to set delivered at to the current date and time. 13 00:00:41,480 --> 00:00:42,950 We're going to save it. 14 00:00:42,950 --> 00:00:48,230 Put the result which is the the updated order into a variable and then respond with it. 15 00:00:48,230 --> 00:00:49,400 So very simple. 16 00:00:49,400 --> 00:00:56,930 And then we'll just have an else here where if there is no order, we have we throw an error with a 17 00:00:56,960 --> 00:00:58,910 404 and that's it. 18 00:00:58,910 --> 00:01:00,500 So let's save that. 19 00:01:00,500 --> 00:01:09,350 And now we can go over to the front end and let's go into slices and order slices. 20 00:01:09,380 --> 00:01:15,140 We'll go right under, get orders and we're going to call this one deliver order. 21 00:01:15,820 --> 00:01:19,780 And that's going to be a mutation because we're changing something. 22 00:01:20,230 --> 00:01:25,150 Our query is going to take in an order ID, The URL is going to be that. 23 00:01:25,150 --> 00:01:28,860 Let's just double check, make sure that's yep, that looks correct. 24 00:01:28,870 --> 00:01:32,200 And then the method will be put because we're changing something. 25 00:01:32,860 --> 00:01:33,250 All right. 26 00:01:33,250 --> 00:01:40,600 So we just need to export that, let's say use deliver order mutation, make sure you use mutation because 27 00:01:40,770 --> 00:01:42,880 it's not a query, it's a mutation. 28 00:01:43,150 --> 00:01:50,680 So now what we want to do is go into our order screen, not the list order screen, but the actual order 29 00:01:50,680 --> 00:01:51,430 screen. 30 00:01:53,270 --> 00:01:56,810 And we want to bring that mutation in. 31 00:01:56,810 --> 00:02:00,320 So we're already bringing in a few things from that file. 32 00:02:00,320 --> 00:02:03,560 Now we want to bring use deliver. 33 00:02:04,190 --> 00:02:05,720 Order mutation. 34 00:02:05,720 --> 00:02:07,340 And then we'll. 35 00:02:08,350 --> 00:02:08,889 Go. 36 00:02:08,889 --> 00:02:09,580 Let's see. 37 00:02:09,580 --> 00:02:10,960 We'll just go like. 38 00:02:11,830 --> 00:02:13,150 I guess, right here. 39 00:02:13,480 --> 00:02:20,800 And we want to in brackets, we want to get deliver order and then we'll also get the loading. 40 00:02:21,740 --> 00:02:26,480 R is loading, but we want to rename that because we're already using is loading. 41 00:02:26,480 --> 00:02:28,820 Let's call it loading deliver. 42 00:02:30,820 --> 00:02:31,600 Okay. 43 00:02:31,600 --> 00:02:34,480 Now we do need a handler. 44 00:02:34,480 --> 00:02:35,740 Actually, we'll do that after. 45 00:02:35,740 --> 00:02:37,780 Let's create the button first. 46 00:02:37,780 --> 00:02:42,280 So we should have a placeholder down here. 47 00:02:43,370 --> 00:02:44,780 If you've been following along. 48 00:02:44,780 --> 00:02:50,240 So right here, Mark is delivered placeholder and we first want to check if it's loading. 49 00:02:50,240 --> 00:02:55,160 So we'll say if loading deliver, then show the loader. 50 00:02:56,120 --> 00:02:59,570 And then underneath that, I don't know why it's doing these indents. 51 00:02:59,780 --> 00:03:03,590 Underneath that, this is where we're going to use the user info. 52 00:03:03,710 --> 00:03:06,170 So I'll just type this out. 53 00:03:06,170 --> 00:03:09,770 So we'll say use if user info, right. 54 00:03:09,770 --> 00:03:12,170 And we want to make sure the user is an admin. 55 00:03:12,170 --> 00:03:15,140 So and user info dot. 56 00:03:15,990 --> 00:03:17,730 Is admin. 57 00:03:19,970 --> 00:03:21,860 So if that's true. 58 00:03:22,470 --> 00:03:24,720 Then let's see. 59 00:03:24,780 --> 00:03:26,760 Just trying to make sure that this is correct. 60 00:03:26,760 --> 00:03:27,060 Yeah. 61 00:03:27,060 --> 00:03:30,330 So then we also want to make sure the order is paid. 62 00:03:30,330 --> 00:03:35,130 We're not going to deliver it without being paid and we want to make sure it's not already delivered. 63 00:03:35,130 --> 00:03:39,990 So if all that's true, then we can proceed to add our list group item. 64 00:03:43,040 --> 00:03:46,340 And in that list group item, we'll have a button. 65 00:03:46,340 --> 00:03:54,200 It's going to have a type of button class name, BTN, BTN, Block, and then an onClick handler called 66 00:03:54,200 --> 00:03:57,620 Deliver Deliver order handler. 67 00:03:57,740 --> 00:04:01,460 And inside the button we'll just say Mark as delivered. 68 00:04:01,670 --> 00:04:06,950 So if I save that, we're going to get an error because we don't have this handler yet, so let's go 69 00:04:06,950 --> 00:04:08,510 ahead and create that. 70 00:04:10,070 --> 00:04:12,650 And that should be the last thing we have to do and it should work. 71 00:04:12,650 --> 00:04:13,910 So let's come up here. 72 00:04:16,459 --> 00:04:18,500 Okay, we'll create our handler. 73 00:04:18,709 --> 00:04:23,030 And what we're going to want to do in here is simply call deliver order. 74 00:04:23,240 --> 00:04:26,080 And yeah, we can put it in a try catch. 75 00:04:26,090 --> 00:04:32,210 So we're awaiting on deliver order, which is from our slice, which communicates with our back end, 76 00:04:32,570 --> 00:04:38,660 our mutation and pass in the order ID then we're going to just re fetch because we want that read to 77 00:04:38,660 --> 00:04:41,900 change to green and then a success. 78 00:04:41,900 --> 00:04:44,480 And if there's an error, then we'll show the message. 79 00:04:44,750 --> 00:04:48,350 So let's save that and let's see. 80 00:04:48,350 --> 00:04:49,880 Oh, use info. 81 00:04:50,880 --> 00:04:52,770 Is not to find deliver order. 82 00:04:52,770 --> 00:04:53,490 Handler Yeah. 83 00:04:53,490 --> 00:04:56,640 So this should be deliver order Handler And it looks like. 84 00:04:58,100 --> 00:05:02,030 I put u's info instead of user info down here. 85 00:05:04,180 --> 00:05:04,600 Okay. 86 00:05:04,600 --> 00:05:06,430 So now. 87 00:05:07,100 --> 00:05:09,380 This says, Oh, never mind. 88 00:05:09,380 --> 00:05:09,800 I'm sorry. 89 00:05:09,800 --> 00:05:11,900 The button is actually going to be over here. 90 00:05:11,900 --> 00:05:19,070 I was thinking it was going to be over here, but yeah, so if if the order is not paid, then you're 91 00:05:19,070 --> 00:05:20,990 going to see the pay buttons here. 92 00:05:20,990 --> 00:05:26,810 If it is paid and you're logged in as admin and it's not delivered, you're going to see this button. 93 00:05:26,810 --> 00:05:28,220 So let's try it out. 94 00:05:28,640 --> 00:05:35,330 It shows the loading for a second, shows the order delivered and it changes to Green because it refreshes 95 00:05:35,330 --> 00:05:39,650 and updates the page, updates the database and now we're all good. 96 00:05:39,650 --> 00:05:42,650 If I reload, that should still be delivered. 97 00:05:43,280 --> 00:05:49,370 And now if we go to the order list page, we should see instead of a red x, you should see the date 98 00:05:49,370 --> 00:05:50,570 of order delivered. 99 00:05:52,090 --> 00:05:52,870 All right, cool. 100 00:05:52,870 --> 00:05:54,840 So everything is going really smooth. 101 00:05:54,850 --> 00:06:00,790 So in the next video, what I want to do is move to products because obviously you need a way to add 102 00:06:00,790 --> 00:06:04,270 products to your your application to your store. 103 00:06:04,660 --> 00:06:06,520 So we're going to do that in the next video.