Okay.
Let's go ahead and wrap up the third section of our create invoice component.
So our first and second steps are hooked up.
And now it's just this section where we have the v if statement invoice step is equal to three that
we have to finish.
So as with other steps we'll have a N H to take here and then here just below this I'm gonna have a
solo button with a click event to submit the invoice.
And so really this is the key part of the third step.
This is where we're actually going to submit the open order to the system.
And so let's come down here and actually just work out that small bit of business logic first.
So I'm going to add this just below our computer properties here.
It's got to be an asynchronous function and we'll return uh void.
So this is basically just a void method here.
What we're gonna say is this that invoice is the selected customer.
So we can say this that selected customer I.D. and the line items are equal to this that line items
and we can use this object to actually make that post requests clean things up here a bit.
And so we'll make you see that invoice service that we created earlier and that make new invoice method
which will pass this that invoice.
Okay.
That takes care of this sort of first step here.
And so I want to scroll back up to our third step and then here just below this uh h are here below
the div and then so here just below the H.R. within the third invoice step I'm gonna create another
div and we're gonna give this a class of invoice step detail and then give it an idea of invoice and
a ref of invoice here and we'll see why we're using the rough tag a bit later this will be used when
we actually generate a PDA off of the invoice.
So within this div we're gonna have a deal with the class invoice logo here for which we created a class
earlier and then we're going to have an image with an idea uh AMG logo all text.
Now we'll just say so our coffee logo and then the source will point to our assets directory slush images
slash seller coffee logo to PSG.
And so here we'll have like a prettier version of our list of order items where we actually have like
the solar coffee logo.
And so this is a little bit of a more formal looking invoice.
And then what we can do is like for instance if we wanted to put the address or something.
So obviously just a fictional address here and then we're going to have our list of order items similar
to the way that we had the table above.
But what we're gonna do here is have this invoice order list div we're gonna have an invoice header
and then in this invoice header we're just gonna have some three standard information that would be
useful to the customers.
So we're just gonna make the date the invoice uh number if you will for the customer we'll use a selected
customer computed property and get the first and last name.
So how are we gonna do that.
Well what we can do is if I s if we scroll down here down to our computer props
we're gonna have this um getter selected customer.
And from this we're gonna return from our customers list we're gonna find the customer for which we
have the selected customer I.D. And that's going to return that whole customer object for us that we
can use.
So that's really useful here because while we have the customer I.D. We don't have other properties
on it like the first and last name which we can actually use here in our final invoice.
Likewise we can use that data to build customer address and we can even use it the F for some optional
formatting here so if the customer has an address line too then we can provide that as well.
And then finally we'll just print out the rest of the address so city state and postal code and then
in the final H3 heading here will print out the customer country then we'll create a table as with the
other tables in our app it'll have the class table
it will have the familiar dickhead here at this point you should be noticing that we definitely have
some duplicated template codes so this actually looks identical to the table that we created in step
2.
So another reason why we might think of extracting a component here eventually but we'll do this uh
V4 again here but we'll do this uh V4 again here so we'll make a row for each line and then line items
and as before we'll have a row for each line item in our Yeah in our line items then in this particular
version what we can do is we can have a row with a call span of four so we're going to span the first
four columns here and then have a column called grand total.
And then we can create a footer in the table with this t foot and have a row here again spanning uh
four columns.
We'll have this class do and we'll say balance due upon receipt and then we'll apply that running total
value and pipe it to our price filter.
So if you recall running total here is uh what s calculating the uh you know running total the entire
order using this reduced uh function like some this scroll back up and that should more or less complete
our wizard step 3.
So I'm going to fix up the current file here some formatting
and if we take a look there is a lot of logic baked into this component.
I mean if we just kind of step back and think about it we've got the three steps here each step is kind
of distinct.
So in the first step were selecting a customer second step we're building in order in the third step
we're essentially reviewing that order with some additional formatting involved but really I would recommend
at the very least thinking about seeing if we could you know on your own encapsulate each of the three
steps here in to their own components using similar patterns that we've seen elsewhere in the app.
So what you would do is maybe in components here you might have a sub directories so maybe in components
here you might have a sub directly called invoice wizard and then in that I can imagine for components
we'd have this create invoice that view which is actually a part of the views here but then maybe in
the components here we'd have three separate invoice steps so maybe this sub directly would be invoice
step and then you'd have the step one for select customer step two for create order in step 3 for finalized
order or or like submit order and you could actually just evolve and you could just extract all of the
logic related each step into its own separate component that would make this create invoice a parent
component if you will.
And it would be much easier to reason about.
But I'll leave that as a follow up exercise if you're interested in optimizing this particular view.
Okay.
So let's head back to our app and see what's going on here.
So if we have Bob Smith
Bob Smith orders some stuff
we go next.
And now we can see this sort of invoice that we started to generate here we have this balance to upon
receipt in the footer of the table next is disabled but we should be able to submit an invoice if we
submit it take a look at the network tab
I can see that we have made a post request to our invoice and I'm getting a two hundred response.
Okay so what that's telling me is that with this request payload that we've sent we have actually received
an okay response from our API which is going to generate this as an open order.
And so I think so far so good.
But there's an additional feature here that I think would be nice to have and that would be to print
this out to a PDA.
So what we're gonna do is we're gonna invoke this j as PDA library to actually generate that PDA for
us
so if we come back and actually we need to go to the terminal for this make sure that you're in the
front end directory and then what we're gonna do is you can't add J ust PD if this is going to add this
to our project.
If we had back in fact if you check out the package that Jason now you'll notice that we have a GSP
IDF in this case I'm using uh version one point five point three.
Okay so I to go ahead and close this.
So let's head down to our finalize order method actually not finalized order but submit invoice
and we're creating this invoice and we're making that API post request to your view of the invoice service
to make the invoice.
In other words generate that open order but then what we can additionally do here is download a PDA
search can a stab at a method here called Download PD F and then maybe we will await this dot router
push or slash orders.
This is just gonna take us to the orders.
Um the particular component map to the orders route here and this is a page that we've yet to create
but that one will be simple by the standards of at least this particular component.
But now we need to make this interesting method down the PD if so what is this going to look like.
Well we're going to invoke that J SPF library so we're gonna create a variable PD F
and we're going to make a new GSP EDF object which will take these particular format so A4 size Uh P
is portrait mode.
PTA is like uh the unit of measure.
And so in order to use this object we obviously need to make an import here.
So what we'll do is import J SPF from J SPF.
Make it a typescript warning here.
I suspect the J.S. PDA doesn't have types.
So what I'm gonna do is just uh disable on this line
and so if we come back down here
we're gonna make a new JS PDA object then we're gonna get the invoice element by its I.D. and store
that in a variable.
So we have an invoice is the document get element by the invoice.
And if we look for that element on our page here it is corresponding to this div in Step 3 where we
have the invoice with ref invoice and this is wrapping that entire nicely formatted invoice.
So if we scroll back down here to download PDF what I'm gonna say is uh set the width and the height
to uh ref's invoice client within client height so you can see we have that ref uh usage here.
And then we're going to use this uh special syntax here.
Each team L to canvas.
And for this we need to make an import as well.
When to come up here and we need to install each team L to canvas
so many yarn at each to know to canvas
casing the head back
and so what this is going to do is well just like the name says it's gonna take this uh each to nail
the canvas invoice object which we've gotten by ideas here and then we can specify some options essentially
for the canvas element that it's going to create.
And so we're gonna call PD f that add image which is coming from a GSP RDF um the image itself is gonna
be the canvas to uh data your URL image slash P and G.
So essentially we're going to create a P G starting in the top left corner of that own it and then I
found that this particular ratio of with the height actually generates the correct sizing for my particular
setup.
But we'll see if we need to tweak that again here in a moment.
Essentially we're gonna call PDL that saved.
We're gonna pass it the string invoice here.
So this is gonna get called in line with our submit invoice method here.
And so what I'm gonna do is head back to the terminal here.
I'm going to stop the application and then run your and run serve again.
Well that's running I'm going to also make a much overdue get commit here
OK.
Let's head back to our app.
Going to refresh
so we'll select you for this test
okay.
So that's working
and then we'll go next.
So that looks good.
We'll select Submit an invoice and we've redirected to a component which we don't have anything for
yet.
But notice that invoice that PDA should have downloaded.
If we click on this you can see that we are getting our PDA of invoice actually set off to an actual
PDA file.
So that's kind of cool includes this.
And now we have left to do is to create this order screen and this should go relatively quickly now.
So let's head back.