6.12 Adding the Edit Application Code

And then the final piece of the puzzle is to be able to edit the application that is associated with our lawn. And so we're gonna do a little bit of modifications in here in our edit-application.component.ts file. But just a couple little things, and it's gonna be relatively short. So we now have these two Inputs which we had to define in the previous lesson so we could get things to kinda show up. And then once again, we are going to have an Output. Because we wanna make sure that we let the outside world know that we have updated a lawn again. So we're gonna have updateLawn as our Output. EventEmitter, would you look at that? It actually found the right one this time. So we're gonna use an EventEmitter. And that's gonna be of type Lawn, and we'll go ahead and set that equal to a new instance, Like we have done before. We'll go ahead and bring in the Output. So now we have the event that we can use. Then on the ngOnInit, which we don't really need this time, but we do have to make sure that we bring in our lawnService again, lawnService. And now we have two functions that we need to write. The first one is going to onSubmit. So when we try to submit this form, we need to do a little bit of work. So we'll say, this.lawn.applications. And now this time, we want to make sure we get the one that we are modifying. We don't wanna remove it necessarily, but we need to update it. So let's go ahead and find it in a different way this time. We're gonna use a filter function this time. And we're gonna say for each application in there, we wanna look for the one whose application ID is equal to this.application._id. So we wanna find the application within the lawn that has the same ID as the one that has been passed into this component. And this is gonna return a collection, or an array, so we'll just get the first one. And we'll say, that's gonna be equal to this.application. So we're going to take what we have updated, and just jam that back into our applications array. Because it's been updated and it's gonna work just fine. You could come with a more elegant way to do it, but this will get the job done. And then we'll say this.lawnService. And once again, we are going to update our lawn, or this.lawn. And then we will subscribe to that, we'll get back a response or a result. And then we'll say this.updateLawn, and we will emit that event with that result, so we can pass that out to the rest of the world. And that'll take care of that situation. But the one thing that we have to do right now is we need to do a little bit of work on the date updating. So if we do change the date, remember, we are now subscribing to the ng model change on that model. So we're gonna have this updateDate function, which is gonna have an event on it, which is gonna be of type string. So once it comes into us, it's gonna be a string. So we're gonna have to pick it apart, and then format it properly as a date. So we're gonna say const dateParts. And we're gonna set that equal to event., and we're gonna split this. And we're gonna split it on a hyphen, because that's gonna be the demarcation between the years, the months, and the days. So we're gonna break it up into three parts. And then we're gonna say this.application.date is gonna be equal to a new Date. And then we need to pass in the different date parts that are associated with the year, the month, and the date. But the thing is, right now, these date parts are actually strings, and we need to convert them to integers or to numbers. And the way we do that, or kind of a shorthand notation way that we can do that in JavaScript, or in TypeScript as well, is simply by using the plus operator. So now I can say dateParts, so I can get the first one which is going to be the year. Then I can come in and I can also, now I need to do the month. But the interesting thing about the month is that, the months are actually zero-based, so January is 0 and December is 11. So you're gonna have to make sure that you convert this to an integer, just like this, like we've done for the year. And then, you're gonna have to subtract one to make sure that it's actually properly formatted. Then once we have the month, we can go ahead and do the day. So you do, dateParts 2 is gonna be the day. And then you can put in hours, minutes, seconds, milliseconds if you want to just to give more precision. So we have to do a little bit of work here, I know it seems a little odd. But if you want things to show up properly in the UI, you have to kind of do a little bit of tweaking here and there. But that is pretty much what it's gonna take to update an application. So let's go ahead and save that, then we'll come back to our browser. Let's go ahead and give it a try. So let's go ahead and edit this one. So we're gonna see that the details for when we put down fertilizer. So let's say we want to change this date to be, say the 23rd, and this was a new fertilizer. So we'll say New Fertilizer, and we put down 15 pounds, something like that. So now we can save that. And now we see that we have persisted all of that information, which is good. And everything has been put in there the way that we wanted it to. So now you can go back, and you can begin to track all the lawns that you take care of, all the applications of products that you put down in the lawn. And make sure that you're applying things properly, and doing things at the right dates and the right times, to get your optimum performance all throughout the year.