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

4.4 Implementing the Client Currency Editor Code

In the previous lesson, we finished implementing the code for creating our currencies, and in this lesson, we're going to focus on editing them. And there's a lot of similarities between creating and editing, especially from a UI standpoint, because we're still working with the same type of data. So my first temptation is to reuse the component that we wrote in the previous lesson and make it work for both adding and editing. However, what gives me pause is that any time we do something like that we are introducing complexity. Because we have to keep track of whether or not we are adding or editing. And even though there are some similarities, there are some distinct differences. And while we could address those differences, it does once again add complexity, but it also adds some mental overhead. So for the sake of simplicity, what I'm going to do then is just copy the component that we created in the previous lesson, and we'll just use that as a basis for our editor. So I'm going to rename it to CurrencyEditor. And then we will just make a few changes. So the first is going to be from Add to Edit Currency for the title of the modal. We're going to keep the ticker, the name, and the apiURL because that's all data that we need to work with. But we also need the currency that we are editing. So let's add an object to our data. We will call it currency, and we will initialize it as null. This is just so that we can keep track of the currency that we are editing so that we can pass it back to the parent component. And then we need some way of knowing what currency that were going to use. Now, in a typical component we would just use props, but we can't really use props in this case. But we could do something like this. Since we are going to still call the show method to show the modal, well, we can pass data to these methods. So that's what we're going to do. It might not be, quote-unquote, correct, from a view point of view, but it's going to work. And right now, that's what I care most about. So whenever we show the modal, we will go ahead and populate all of our properties. So we will populate our currency property. We will do the same thing for ticker. So we will use our currency object there. And then we will do the same for name and apiURL. And that will at least initialize the UI. And then we need to focus on the save method. So as far as the event is concerned, in the previous lession we probably should have called it something different. Because whether you're creating or you are editing, you're still going to save it. So we probably should have called the other event create currency. But we're gonna leave it as is, because it's already done. And [LAUGH] we'll just call this edit-currency. Now, the payload that I want to send along with this event is going to be a little bit different, because we need to keep this information separate. We, first of all, need the old currency that we were working with. Because as far as our currency list component is concerned, we really don't know what is being edited. So this way, we will tell the parent component, okay, this is the currency that we are working with, and then we will have a newCurrency, or we can call it newValues or something like that. But the idea is that we have our new values and we have our old values. Because we don't really want to update the currency object that we are working with. Because any change that we make to that is going to be reflected in the UI, and we don't want those changes to occur until we actually save the currency. Because then the user sees one thing and then there's something completely different stored in the database. So this way, we can keep track of what our old currency is, we know what the new values are so that whenever we actually save those changes to the database, then we can update the UI. So this should work, I would think. So let's go to the Currencies component, and let's use our editor. So I'm just going to add this, just right here with our currency-creator. And we will, of course, need to change some of these values. We'll just call it currency-editor, the ref value, we'll change to editor, the event is edit. Let's call the method saveEdit. And then we will change the closing tag there. Now we need to import this, so let's import it. And then we also need to add it to our components as well. And then we should be ready to go as far as implementing our saveEdit method, which is going to be somewhat similar, but there are some differences here. So we'll have our saveEdit but, in this case, let's call this editData, because that's a little bit more descriptive as opposed to currency. Now instead of calling createCurrency, we will call it editCurrency. And let's go ahead and pass in all of the editData. We're not going to send everything because some of this information we don't need to send. But we do need the ID of the currency that we are currently editing, and that is going to be in our old currency. And then everything else as far as the new values are in the new currency. So we'll just pass in everything and we will handle that on the client API side. Now, as far as the callback, we don't really need to refresh the currencies because the only thing that updated the one that we updated. So then what we could do then is simply this, we will have the old currency. So, we will say editData, actually, let's do this, currency = editData.oldCurrency, and then we will just set its properties. And let's also do this, just to make it easier to type. So we will have newValues and editData.newCurrency. And then will say currency, and then we will set ticker and everything else. So we need a name and apiURL, and that will update the UI. But one thing we haven't done is write the code for showing the editor. And we can easily do that. We have our links already setup for editing. So what we will do then is add the click events but we will prevent the default. And we will simply call showEditorModal, and we will pass in the currency that we are working with. Now we don't have that method yet, so let's go on down to our methods. And let's put this after the showCreatorModal. And we will have current as the argument, and then we will simply grab our editor modal by its ref. We will show it, we will pass in the currency. And that should be that, as far as the code inside of this component. Now we do need to change this ref to editor. But okay, I think this is going to work. So let's go to our client API and let's implement this editCurrency method. And this is going to be to a different URL. Whenever you are creating something, you just hit the root of whatever collection that you're working with. But now we are editing a specific currency, so our URL is going to be a little bit different. But this was editCurrency, we have editData, we'll just keep the same naming scheme. And the url is going to still have currencies, but we are told to include the id of the currency that we are working with. So let's include that here. We will get that from the oldCurrency. So we will say, editData.oldCurrency_id. That will give us the URL, and we will simply return axios.post(url. We would pass in the new currency, because we don't need the id that's being done as part of the url. All we need are the values that we are going to update, and then our callback. We will just simply return whatever came back from the server. And that is it as far as our client is concerned. So in the next lesson, we will implement the server code, we will test it out and fix anything that needs to be fixed.

Back to the top