1 00:00:02,390 --> 00:00:03,687 Now, if we do log in 2 00:00:03,687 --> 00:00:06,053 as an administrator here, 3 00:00:09,380 --> 00:00:11,570 you can also click on manage orders 4 00:00:11,570 --> 00:00:13,770 and you'll see a similar list here, 5 00:00:13,770 --> 00:00:15,190 but, here 6 00:00:15,190 --> 00:00:16,190 as I mentioned, 7 00:00:16,190 --> 00:00:19,060 you also see more details about the user. 8 00:00:19,060 --> 00:00:21,370 And this here is a clickable link, the name here, 9 00:00:21,370 --> 00:00:23,340 which would open your mail client, 10 00:00:23,340 --> 00:00:26,150 drafting an email to that user, 11 00:00:26,150 --> 00:00:28,150 and you have this drop down where you can 12 00:00:28,150 --> 00:00:31,090 change the order status and then click update. 13 00:00:31,090 --> 00:00:33,030 And this then updates this part, 14 00:00:33,030 --> 00:00:36,410 this batch here as well without reloading the page, 15 00:00:36,410 --> 00:00:38,930 because this is handled as an Ajax request 16 00:00:38,930 --> 00:00:41,730 behind the scenes. And the Dom is manipulated, 17 00:00:41,730 --> 00:00:44,060 Once the response comes back. 18 00:00:44,060 --> 00:00:45,710 This is all nothing new 19 00:00:45,710 --> 00:00:46,833 we did this multiple times 20 00:00:46,833 --> 00:00:49,270 throughout this course section already. 21 00:00:49,270 --> 00:00:51,770 And therefore I provided this code to you, 22 00:00:51,770 --> 00:00:54,743 but I still of course, want to explain to you how it works. 23 00:00:55,670 --> 00:00:56,503 So for this, 24 00:00:56,503 --> 00:00:58,180 let's start in the views folder. 25 00:00:58,180 --> 00:01:00,030 In the admin orders, 26 00:01:00,030 --> 00:01:04,290 EJS file, which isn't the orders folder in the admin folder. 27 00:01:04,290 --> 00:01:05,810 And this is a new file, 28 00:01:05,810 --> 00:01:07,823 which you also of course find attached. 29 00:01:08,960 --> 00:01:11,380 Admin orders is not too fancy. 30 00:01:11,380 --> 00:01:12,600 It is worth noting though, 31 00:01:12,600 --> 00:01:16,790 that I do include this order management JS file. 32 00:01:16,790 --> 00:01:19,540 I also include orders CSS, 33 00:01:19,540 --> 00:01:21,160 and I forgot about that before. 34 00:01:21,160 --> 00:01:24,470 This is also included in the user-facing 35 00:01:24,470 --> 00:01:26,850 all orders EJS file. 36 00:01:26,850 --> 00:01:30,220 Orders CSS is a new CSS file I wrote 37 00:01:30,220 --> 00:01:34,230 with pretty standard CSS code in there. 38 00:01:34,230 --> 00:01:35,760 You can take a look at it. 39 00:01:35,760 --> 00:01:37,820 I'm just setting a bunch of colors, 40 00:01:37,820 --> 00:01:40,790 margins paddings and font sizes there in the end. 41 00:01:40,790 --> 00:01:45,300 And using a little bit of Flex box for positioning items. 42 00:01:45,300 --> 00:01:48,150 So really nothing fancy, nothing new there. 43 00:01:48,150 --> 00:01:50,720 I'm really just doing things in there that we did 44 00:01:51,811 --> 00:01:54,710 multiple times for all the this course section already. 45 00:01:54,710 --> 00:01:56,570 So that's what's happening in here. 46 00:01:56,570 --> 00:02:00,280 The most noteworthy part probably is lists style square, 47 00:02:00,280 --> 00:02:03,390 where I ensure that we don't have round bullet points here, 48 00:02:03,390 --> 00:02:06,370 but squares, but also not too difficult, I guess. 49 00:02:06,370 --> 00:02:08,970 And they'll for debts, this CSS file. 50 00:02:08,970 --> 00:02:11,620 And with that back to admin order, EJS. 51 00:02:11,620 --> 00:02:14,720 Here, I did also include this JavaScript file 52 00:02:16,150 --> 00:02:17,770 besides that I just included 53 00:02:17,770 --> 00:02:19,740 that same order list code snippet 54 00:02:19,740 --> 00:02:22,740 we saw before for the all orders EJS file 55 00:02:22,740 --> 00:02:25,790 for our regular users that we saw before. 56 00:02:25,790 --> 00:02:27,050 So let's take a look at 57 00:02:27,050 --> 00:02:30,883 this browser side order management JS filed in. 58 00:02:31,730 --> 00:02:32,563 In there, 59 00:02:32,563 --> 00:02:34,510 What I'm doing is I'm getting access to 60 00:02:34,510 --> 00:02:38,060 all the form elements for all the order items. 61 00:02:38,060 --> 00:02:42,000 And I use query selector all here to select all the forums 62 00:02:42,000 --> 00:02:44,410 that are inside of order actions. 63 00:02:44,410 --> 00:02:47,160 So instead of elements that have to order actions, 64 00:02:47,160 --> 00:02:48,543 class on them. 65 00:02:49,560 --> 00:02:52,320 And if we take a look at the order item, each as file, 66 00:02:52,320 --> 00:02:55,570 we see that order actions is to class on this section 67 00:02:55,570 --> 00:02:56,973 that contains this forum. 68 00:02:57,890 --> 00:03:00,070 So I'm selecting all these forms in the end. 69 00:03:00,070 --> 00:03:02,130 And I select multiple elements because 70 00:03:02,130 --> 00:03:04,959 we could have multiple order items on this page here. 71 00:03:04,959 --> 00:03:09,040 Every order that's placed by any user will 72 00:03:09,040 --> 00:03:11,160 be a separate order item. 73 00:03:11,160 --> 00:03:12,610 And in every order item, 74 00:03:12,610 --> 00:03:15,700 we have the form with the dropdown and therefore, of course, 75 00:03:15,700 --> 00:03:18,310 I need to select all these forums if I want 76 00:03:18,310 --> 00:03:21,543 to react to clicks or to submissions of those forums. 77 00:03:22,700 --> 00:03:25,080 And that's the next thing at the bottom of 78 00:03:25,080 --> 00:03:27,090 this order management JS file, 79 00:03:27,090 --> 00:03:29,990 I loop through all these form elements and 80 00:03:29,990 --> 00:03:33,720 to every form element ID, then add a submit listener. 81 00:03:33,720 --> 00:03:35,800 And when that submission happens, 82 00:03:35,800 --> 00:03:39,470 I want the update order function to trigger, 83 00:03:39,470 --> 00:03:42,040 which is that main function that's defined in 84 00:03:42,040 --> 00:03:44,193 that order management JS file. 85 00:03:45,260 --> 00:03:46,093 In here, 86 00:03:46,093 --> 00:03:48,150 I first prevent the default because 87 00:03:48,150 --> 00:03:51,710 I don't want the browser to automatically generate 88 00:03:51,710 --> 00:03:54,100 and send a HTTP request. 89 00:03:54,100 --> 00:03:55,740 Instead, I want to do that manually 90 00:03:55,740 --> 00:03:57,860 with an Ajax request here. 91 00:03:57,860 --> 00:04:01,053 Therefore, the browser default must be prevented. 92 00:04:02,490 --> 00:04:04,030 Then I just get access 93 00:04:04,030 --> 00:04:06,140 to forum on which does event occurred 94 00:04:06,140 --> 00:04:08,700 and store that in a helper constant. 95 00:04:08,700 --> 00:04:12,370 And then I extract the data of that forum that was 96 00:04:12,370 --> 00:04:15,880 submitted with help of this foreign data class 97 00:04:15,880 --> 00:04:18,220 that's built into JavaScript. 98 00:04:18,220 --> 00:04:21,470 We saw that class in action earlier in the course already, 99 00:04:21,470 --> 00:04:24,200 what this class does at the end 100 00:04:24,200 --> 00:04:27,950 is it can be wrapped around a form element. 101 00:04:27,950 --> 00:04:29,690 So we can pass a form element 102 00:04:29,690 --> 00:04:32,690 to this class constructor function. 103 00:04:32,690 --> 00:04:36,810 And that then gives us a form data object where we can call 104 00:04:36,810 --> 00:04:40,220 the get method to get the different values 105 00:04:40,220 --> 00:04:42,540 that are part of that form. 106 00:04:42,540 --> 00:04:44,520 So in our case, if we have a look at 107 00:04:44,520 --> 00:04:46,500 the order item EJS file. 108 00:04:46,500 --> 00:04:48,450 This form has two hidden inputs 109 00:04:48,450 --> 00:04:50,580 and then this select input 110 00:04:50,580 --> 00:04:53,330 and all these inputs, including the select input, 111 00:04:53,330 --> 00:04:56,400 have names, and it's these names, 112 00:04:56,400 --> 00:04:59,340 which we can get access to with the get method 113 00:04:59,340 --> 00:05:03,170 in this order management JS file 114 00:05:03,170 --> 00:05:06,570 with help of that built in foreign data object. 115 00:05:06,570 --> 00:05:09,400 So it's really just a helper object that makes it 116 00:05:09,400 --> 00:05:12,880 really easy to extract the data of a form 117 00:05:12,880 --> 00:05:15,363 in browser sites JavaScript code. 118 00:05:16,940 --> 00:05:20,640 Then I added a response variable for scoping reasons 119 00:05:20,640 --> 00:05:23,780 because then I try to send the request 120 00:05:23,780 --> 00:05:26,690 and stored a response for later use 121 00:05:26,690 --> 00:05:29,363 to admin orders order ID. 122 00:05:30,490 --> 00:05:34,580 This is a route that's defined the admin routes JS file. 123 00:05:34,580 --> 00:05:37,250 It's this patched route here at the bottom. 124 00:05:37,250 --> 00:05:40,040 I also added the get orders route there 125 00:05:40,040 --> 00:05:42,860 for getting all the orders for an Admin. 126 00:05:42,860 --> 00:05:45,340 And these two routes trigger actions 127 00:05:45,340 --> 00:05:47,220 in the admin controller. 128 00:05:47,220 --> 00:05:50,830 The patch route also has a dynamic path parameter, 129 00:05:50,830 --> 00:05:54,540 for the ID of the order that should be updated. 130 00:05:54,540 --> 00:05:57,140 And in the admin controller, 131 00:05:57,140 --> 00:06:02,140 we then either get all the orders here by calling find all 132 00:06:02,710 --> 00:06:06,100 because we want to get all orders for all users 133 00:06:06,100 --> 00:06:08,080 or by calling update order. 134 00:06:08,080 --> 00:06:10,180 And we'll take a look at that in a second. 135 00:06:11,140 --> 00:06:13,810 Back to your order management JS file. 136 00:06:13,810 --> 00:06:17,130 Here, I then send such a patch request to that path. 137 00:06:17,130 --> 00:06:19,820 We just saw in the routes file. 138 00:06:19,820 --> 00:06:23,830 I add a request body because patch requests like post 139 00:06:23,830 --> 00:06:27,420 and push requests can carry request bodies. 140 00:06:27,420 --> 00:06:31,260 And here I include the new order status that I want to set 141 00:06:31,260 --> 00:06:33,320 and to see us RF token, of course, 142 00:06:33,320 --> 00:06:35,752 we always need to add that. 143 00:06:35,752 --> 00:06:38,140 I don't add to the order ID 144 00:06:38,140 --> 00:06:39,480 of the order that should 145 00:06:39,480 --> 00:06:43,458 be updated because that's part of the path already. 146 00:06:43,458 --> 00:06:48,110 I do add the contents type application, Json header, 147 00:06:48,110 --> 00:06:49,630 so that on the backend, 148 00:06:49,630 --> 00:06:52,983 this incoming request can be parsed successfully. 149 00:06:53,860 --> 00:06:54,935 I then show an alert 150 00:06:54,935 --> 00:06:57,690 here on the front end if that fails, 151 00:06:57,690 --> 00:07:00,840 and then I ensure that no other code runs. 152 00:07:00,840 --> 00:07:02,960 I also check if the response is okay, 153 00:07:02,960 --> 00:07:04,870 or if it has an error code, 154 00:07:04,870 --> 00:07:08,610 in which case I also show an error and return. 155 00:07:08,610 --> 00:07:12,620 And if everything works, I extracted the response data, 156 00:07:12,620 --> 00:07:16,250 which contains information about the new status 157 00:07:16,250 --> 00:07:18,330 that was set for this order. 158 00:07:18,330 --> 00:07:21,600 And then I pick up this and use status in my response, 159 00:07:21,600 --> 00:07:25,599 converted to opera case and set it as a value for 160 00:07:25,599 --> 00:07:29,300 the batch of the order item that was updated 161 00:07:29,300 --> 00:07:31,070 by selecting dispatch. 162 00:07:31,070 --> 00:07:33,733 By first of all, taking the form that was submitted, 163 00:07:33,733 --> 00:07:36,180 then taking the parent element of that. 164 00:07:36,180 --> 00:07:38,890 And then the parent element of that, 165 00:07:38,890 --> 00:07:43,890 which if we have a look at order item EJS is Indian d 166 00:07:44,010 --> 00:07:46,660 article because the parent element of the forum 167 00:07:46,660 --> 00:07:47,710 is the section. 168 00:07:47,710 --> 00:07:51,130 And the parent element of the section is this article. 169 00:07:51,130 --> 00:07:53,600 So I selected this article in the end here 170 00:07:53,600 --> 00:07:55,463 with the code I just showed you. 171 00:07:55,463 --> 00:07:56,980 And on this article, 172 00:07:56,980 --> 00:07:58,450 I call query selector 173 00:07:58,450 --> 00:08:02,000 because you can call query selector on any Dom element 174 00:08:02,000 --> 00:08:05,400 to then search for the descendants of that element. 175 00:08:05,400 --> 00:08:08,580 And here I searched a child or descendant element 176 00:08:08,580 --> 00:08:11,170 with a class of badge on it. 177 00:08:11,170 --> 00:08:14,530 And then I know that's the batch for the updated order item 178 00:08:14,530 --> 00:08:15,640 that I want to update. 179 00:08:15,640 --> 00:08:18,820 And hence I set the text content to this new status 180 00:08:18,820 --> 00:08:20,293 in all upper case. 181 00:08:21,210 --> 00:08:24,010 That's this fronted code, really nothing new 182 00:08:24,010 --> 00:08:25,300 or fancy in there. 183 00:08:25,300 --> 00:08:26,816 Just sending an Ajax request 184 00:08:26,816 --> 00:08:29,113 and then updating the Dawn thereafter. 185 00:08:30,100 --> 00:08:33,789 Now, if we now take a look at the admin controller again. 186 00:08:33,789 --> 00:08:37,863 We can see that get orders is robber straightforward, 187 00:08:37,863 --> 00:08:40,558 update order takes the order ID 188 00:08:40,558 --> 00:08:44,760 and then use status where the order ID is extracted 189 00:08:44,760 --> 00:08:45,730 from the parents. 190 00:08:45,730 --> 00:08:47,870 So from the request path et the end. 191 00:08:47,870 --> 00:08:51,210 It's this dynamic a path parameter 192 00:08:51,210 --> 00:08:55,120 and you state as is taken from the incoming request body. 193 00:08:55,120 --> 00:08:59,330 We add the status to the body as you saw a second ago. 194 00:08:59,330 --> 00:09:00,163 And then with that, 195 00:09:00,163 --> 00:09:04,330 I identify an order with that find by ID static method 196 00:09:04,330 --> 00:09:06,630 that is defined in the order model. 197 00:09:06,630 --> 00:09:09,580 I showed that method to you before as well. 198 00:09:09,580 --> 00:09:12,150 It's this method, nothing fancy in there. 199 00:09:12,150 --> 00:09:14,720 Just selecting an order by ID. 200 00:09:14,720 --> 00:09:15,910 And then here, 201 00:09:15,910 --> 00:09:19,127 I in the end set the status of 202 00:09:20,527 --> 00:09:21,841 that order object that I got here 203 00:09:21,841 --> 00:09:22,674 to the new status. 204 00:09:22,674 --> 00:09:24,100 And then I called saved thereafter. 205 00:09:24,100 --> 00:09:27,083 And since I got my order, by finding it by ID, 206 00:09:27,083 --> 00:09:28,950 this order object here, 207 00:09:28,950 --> 00:09:32,051 which was created will have an ID and they offer 208 00:09:32,051 --> 00:09:35,350 in the order model. When calling the save method, 209 00:09:35,350 --> 00:09:38,020 we will have an ID and therefore will not create 210 00:09:38,020 --> 00:09:38,853 a new order, 211 00:09:38,853 --> 00:09:41,883 but instead update the status of an existing order. 212 00:09:42,870 --> 00:09:45,460 And that's what I use here in the admin controller, 213 00:09:45,460 --> 00:09:48,140 when I call orders savior. 214 00:09:48,140 --> 00:09:50,730 And then I just sent back a Json response 215 00:09:50,730 --> 00:09:54,910 because this action is triggered with help of Ajax requests. 216 00:09:54,910 --> 00:09:58,720 Hence I don't redirect or sent back a HTML page, 217 00:09:58,720 --> 00:10:02,160 but I just sent back raw data in the Jason format. 218 00:10:02,160 --> 00:10:03,580 And that's just a message. 219 00:10:03,580 --> 00:10:05,963 And then that new status that was set. 220 00:10:06,990 --> 00:10:08,773 This is the admin controller here.