Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Web app with node express and vue 400x277
  • Overview
  • Transcript

4.5 Saving Changes and Deleting Currencies

In the previous lesson we implemented the client portion of editing our currencies. So now we just need to implement the server and we should be good to go. So let´s go to the server code, let´s go to routes, and then currencies, and let's copy our post method here. But we aren't going to use a post, because if you update something, you need to use a put. And in fact, we need to make sure that we are using a put method in our client API. So we will do that after we finish writing this code here and before we test it. Now, the URL is a little bit different, we have the actual currency ID that we want to work with, so we're going to add that as a route parameter. And then we want to get to that value, so let's just call it currencyId, and we get it with the params, and then the name of the route parameter. So then the code for updating looks like this. We will call the update method. We will say that we want to update all of the documents with the given ID, which hopefully, which is one of those. I mean yes, there's going to be just one. And then we want to pass in the new values that we want to set. So let's just copy what we have up here because that's exactly what we want. So we will pass in those new values and then we also have a call back, so let's also get that with the error. And in this case, we get the number of documents that were affected. Now, if we have an error, there are many reasons why we could have an error, but I imagine the most common would be that we don't have a document with the given ID. And in fact, I don't really know if that would be an error case. I'm going to assume it is, and so we're just going to return to 404, because that is probably the most common error that would occur. So that's what we will do. But if we do have a document that was updated, then all we will send back is the amount of documents that were affected. So let's do that, and we will say affected is num, I don't really think we'll be using this data in the UI, but in case if we wanted to, we would at least have that there. So I think that that is okay, let's get rid of this code for creating, because we are not creating here. And that looks good. So before we test this out, let's go to the client API and let's make sure that we are using a put request, and, no, it was post, so I'm glad we checked before doing that. All right, so let's look at the consoles, the server console looks good, the client console looks good, so everything should work, shouldn't it? Well let's click on the Edit, we do have our Edit Currency model. We can see that the information is automatically displayed. So let's just change something that will signify that we did change it. So, let's save it and we at least see it in the UI. Now we coded it so that it would only update the UI if it actually saved. So let's check the database and let's look at our currencies. Hopefully we will see the correct data, but let me first login. So looking at our currencies collection, we can see that we updated the currency with a ticker of PHR for phore, the name is now Phore 2, and of course, the apiURL did not change. So our code works for editing a currency. And since that was so easy to do, let's first of all, change this back. But now, let's implement the code for deleting, this should be straightforward as well. So let's go to the server API first. And let's just copy what we did for the put request, because we are going to need the currencyId route parameter. Now in this case, the request is going to be a delete request. We are still going to retrieve the currencyId, but instead of calling update, we're going to call the deleteOne method, we will still signify that we want to delete the document with the given ID. And now we don't have any data that we want to include, but we do have a callback and we do have a possible error. So basically the same thing, I'm assuming that if we have an error, it's going to be that the document with the given ID doesn't exist so we're just going to blanket send a 404. Otherwise, we want to send something and I guess we could send success is true. Now once again I don't think we will be doing anything with that data, but at least it's there in case if we did. So let's go to our client API and let's very quickly add that. And let's accept just the currencyId because that's really all that we need here. And let's call this delete currency, we will include that with our URL. And let's see, we want the delete method. We don't need to send any data, although eventually we do need to add the token to these requests, but we will tackle that whenever we talk about security. And there we go. So this should be ready to go, let's go to our view, which was not in components, it was in views admin currencies. And let's add an action to the delete link. So we will handle the click event, we will prevent and let's just deleteCurrency. We can pass in the currencyId, and then of course we need that method. Let´s do this, let´s pass in the full currency. Because after we delete the currency, we could call our refreshCurrencies, that would initiate another HTTP request and all of that stuff. But really, we could just remove the currency object from our currencies array, and that would update the UI, so let's do that. So we will have deleteCurrency, that accepts the currency that we are going to delete. And we can add a confirm, ideally, we would use Bootstrap for a confirm modal. We've done a lot of modals, let's just use the good old confirm method and we can say, are you sure you want to delete, and then we can include the currency.name. We can also include the ticker, so let's do that in parentheses so that we have a complete identification. And if they respond yes, then we will of course delete it. So we will use our API, we will say deleteCurrency, we would pass in the currency.id. And then lets get the index of this currency, so we will say this.currencies.indexOF(currency). And then we will simply just splice it out, so we will have currencies.splice, we specify the index, we only want to remove the 1 item and that should work, theoretically. Okay, so let's give this a shot, shall we? And lets delete Stipend. So, we are going to click on Delete, are you sure you want to delete Stipend? Yeah, sure, why not? So we delete it, it was of course removed. So let's refresh, make sure that it is removed, we're not getting it back. Let's, you know, check the actual source of truth, which is our database. And that collection just has one currency in it. So we are done as far as our currencies is concerned, at least as far as creating, editing, and deleting. We still need to protect the ability for managing our currencies, but we will get to that when we talk about security.

Back to the top