Now, if we do log in
as an administrator here,
you can also click on manage orders
and you'll see a similar list here,
but, here
as I mentioned,
you also see more details about the user.
And this here is a clickable link, the name here,
which would open your mail client,
drafting an email to that user,
and you have this drop down where you can
change the order status and then click update.
And this then updates this part,
this batch here as well without reloading the page,
because this is handled as an Ajax request
behind the scenes. And the Dom is manipulated,
Once the response comes back.
This is all nothing new
we did this multiple times
throughout this course section already.
And therefore I provided this code to you,
but I still of course, want to explain to you how it works.
So for this,
let's start in the views folder.
In the admin orders,
EJS file, which isn't the orders folder in the admin folder.
And this is a new file,
which you also of course find attached.
Admin orders is not too fancy.
It is worth noting though,
that I do include this order management JS file.
I also include orders CSS,
and I forgot about that before.
This is also included in the user-facing
all orders EJS file.
Orders CSS is a new CSS file I wrote
with pretty standard CSS code in there.
You can take a look at it.
I'm just setting a bunch of colors,
margins paddings and font sizes there in the end.
And using a little bit of Flex box for positioning items.
So really nothing fancy, nothing new there.
I'm really just doing things in there that we did
multiple times for all the this course section already.
So that's what's happening in here.
The most noteworthy part probably is lists style square,
where I ensure that we don't have round bullet points here,
but squares, but also not too difficult, I guess.
And they'll for debts, this CSS file.
And with that back to admin order, EJS.
Here, I did also include this JavaScript file
besides that I just included
that same order list code snippet
we saw before for the all orders EJS file
for our regular users that we saw before.
So let's take a look at
this browser side order management JS filed in.
In there,
What I'm doing is I'm getting access to
all the form elements for all the order items.
And I use query selector all here to select all the forums
that are inside of order actions.
So instead of elements that have to order actions,
class on them.
And if we take a look at the order item, each as file,
we see that order actions is to class on this section
that contains this forum.
So I'm selecting all these forms in the end.
And I select multiple elements because
we could have multiple order items on this page here.
Every order that's placed by any user will
be a separate order item.
And in every order item,
we have the form with the dropdown and therefore, of course,
I need to select all these forums if I want
to react to clicks or to submissions of those forums.
And that's the next thing at the bottom of
this order management JS file,
I loop through all these form elements and
to every form element ID, then add a submit listener.
And when that submission happens,
I want the update order function to trigger,
which is that main function that's defined in
that order management JS file.
In here,
I first prevent the default because
I don't want the browser to automatically generate
and send a HTTP request.
Instead, I want to do that manually
with an Ajax request here.
Therefore, the browser default must be prevented.
Then I just get access
to forum on which does event occurred
and store that in a helper constant.
And then I extract the data of that forum that was
submitted with help of this foreign data class
that's built into JavaScript.
We saw that class in action earlier in the course already,
what this class does at the end
is it can be wrapped around a form element.
So we can pass a form element
to this class constructor function.
And that then gives us a form data object where we can call
the get method to get the different values
that are part of that form.
So in our case, if we have a look at
the order item EJS file.
This form has two hidden inputs
and then this select input
and all these inputs, including the select input,
have names, and it's these names,
which we can get access to with the get method
in this order management JS file
with help of that built in foreign data object.
So it's really just a helper object that makes it
really easy to extract the data of a form
in browser sites JavaScript code.
Then I added a response variable for scoping reasons
because then I try to send the request
and stored a response for later use
to admin orders order ID.
This is a route that's defined the admin routes JS file.
It's this patched route here at the bottom.
I also added the get orders route there
for getting all the orders for an Admin.
And these two routes trigger actions
in the admin controller.
The patch route also has a dynamic path parameter,
for the ID of the order that should be updated.
And in the admin controller,
we then either get all the orders here by calling find all
because we want to get all orders for all users
or by calling update order.
And we'll take a look at that in a second.
Back to your order management JS file.
Here, I then send such a patch request to that path.
We just saw in the routes file.
I add a request body because patch requests like post
and push requests can carry request bodies.
And here I include the new order status that I want to set
and to see us RF token, of course,
we always need to add that.
I don't add to the order ID
of the order that should
be updated because that's part of the path already.
I do add the contents type application, Json header,
so that on the backend,
this incoming request can be parsed successfully.
I then show an alert
here on the front end if that fails,
and then I ensure that no other code runs.
I also check if the response is okay,
or if it has an error code,
in which case I also show an error and return.
And if everything works, I extracted the response data,
which contains information about the new status
that was set for this order.
And then I pick up this and use status in my response,
converted to opera case and set it as a value for
the batch of the order item that was updated
by selecting dispatch.
By first of all, taking the form that was submitted,
then taking the parent element of that.
And then the parent element of that,
which if we have a look at order item EJS is Indian d
article because the parent element of the forum
is the section.
And the parent element of the section is this article.
So I selected this article in the end here
with the code I just showed you.
And on this article,
I call query selector
because you can call query selector on any Dom element
to then search for the descendants of that element.
And here I searched a child or descendant element
with a class of badge on it.
And then I know that's the batch for the updated order item
that I want to update.
And hence I set the text content to this new status
in all upper case.
That's this fronted code, really nothing new
or fancy in there.
Just sending an Ajax request
and then updating the Dawn thereafter.
Now, if we now take a look at the admin controller again.
We can see that get orders is robber straightforward,
update order takes the order ID
and then use status where the order ID is extracted
from the parents.
So from the request path et the end.
It's this dynamic a path parameter
and you state as is taken from the incoming request body.
We add the status to the body as you saw a second ago.
And then with that,
I identify an order with that find by ID static method
that is defined in the order model.
I showed that method to you before as well.
It's this method, nothing fancy in there.
Just selecting an order by ID.
And then here,
I in the end set the status of
that order object that I got here
to the new status.
And then I called saved thereafter.
And since I got my order, by finding it by ID,
this order object here,
which was created will have an ID and they offer
in the order model. When calling the save method,
we will have an ID and therefore will not create
a new order,
but instead update the status of an existing order.
And that's what I use here in the admin controller,
when I call orders savior.
And then I just sent back a Json response
because this action is triggered with help of Ajax requests.
Hence I don't redirect or sent back a HTML page,
but I just sent back raw data in the Jason format.
And that's just a message.
And then that new status that was set.
This is the admin controller here.