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

4.2 Designing the Currency Creator Component

In the previous lesson, we started implementing the currency management, and we started with the UI for displaying a list of currencies, but we don't have a list of currencies. First of all, because we don't have the cervical to actually, return that list. And we also don't have the capability of creating a currency. So those are two things that we going to start focusing on in this lesson. We're going to start with the server side. In the routes, we're going to add a new file called currencies. So we're going to put all of our currency related routes here. And, let's go ahead and go to our API file, and let's do this. We are going to pull in our currency routes, by requiring. Just like that we did with our login. But in this case, what we're going to do, is we are going to say that, okay, at the URL of currencies, we want to use these routes. So at the inside of our currency routes, what we're going to have as everything relative to API/currencies, so you will see what that looks like. Let's copy some things here, because we need express so that we can create a router, but we do need our currency model as well. So let's go ahead and bring that in, and that is the prior folder for models, and then currency, and then we want just the currency model. We don't need our schema here. So, with those three things, we can define our routes. So the first, is going to be for just the route of currencies. So remember that these URLs are relative to this URL, which is relative to this URL. So, it's a little modularized if you will. And so, for our git request. We are going to simply query our database, then return all of our currencies. So we will use our currency model, we will find all of our currencies, and then we will simply return them with the response. So we will send those, and there we go. Nothing spectacular. But let's also go ahead and write a route for a post request. So that's if we are going to create a currency to store it within our database, that's going to be a post request to the same URL. So, as far as our callback is concerned, we will have our request and our response. And this is going to look somewhat similar to the registration, in that we want to use the create method. We'll specify the ticker, and we will grab that from the body. We'll do the same thing for the name, and really everything else. So, let's copy this because that's a lot of typing that we would have to repeat. So, we have ticker name and then apiURL. So, we're just going to grab that information to create that currency, and then we will have our call back. So now, if we have an error, we of course want to return that back to the client. Now, as far as the status is concerned, I'm going to stick with what we did as far as the user registration and just say 400, you supplied us with some bad information. And, we'll just go from there. Otherwise, we're just going to send that error object so that we could work with that. And if we don't have an error, then we have a currency object that we will then send back to the client. So, very, very simple. And I'm confident that, that is going to work. So let's close those files, and let's go back to our client, because we need a UI for creating our currencies. So let's create a new component. We're gonna put it inside of the components folder because that's what the convention is, as far as our Vue CLI project. We have our views, but the components that are used inside of our views are inside of the components folder. But we're also going to follow our own convention, and put our admin-related components inside of a folder called admin. So let's create a new file, and we will call this CurrencyCreator. And this is going to show up as a modal. So we're going to use a bootstrap modal, and I'm just going to paste in this markup because there's quite a bit here. But there's nothing out of the ordinary. It's a normal bootstrap modal. It has a ref Of modal-element. Let's just change that to modal. That's easier to type. So it has a ref of modal. That's how we are going to retrieve this and show it, using the API with bootstrap. There is a form that has the ticker, the name and the apiURL. And then two buttons. One to save the currency, and then one to close the modal. So, let's write the JavaScript for that. So, as far as the data is concerned, we have three things. We have the ticker, which lets initialize as an empty string. In fact all of these will be empty strings, so we will just do that and we will have apiURL there. And let's see. We need a method for showing the modal. So let's add that and we'll just call it show(). And this is where we will use the bootstrap API. But in order to do that, we need jQuery. So let's import jQuery. I'm going to import it as the $ sign. You can import it however you want to import it, but that is of course from jQuery, and then we would just use the normal bootstrap API. We will use our jQuery function, we will pass in the ref that we have for the modal, in that way we get that DOM element. And then we will call the modal method, that's from the bootstrap API, and we will call show. So that will show this. And whenever we click on the save button, we're gonna call this save method, so let's go ahead and implement that. But we need some way to tell the caller that hey, we need to save this. I have this information, we're done. So, one way that we can do that is with an event. So, we are going to emit, this is not going to be a global event. This will be just an event for this component. We will emit (save-currency), and then we will pass in the data that needs to be saved. So that will be the ticker, which will be this.ticker. Then the name, which will be this.name. Then apiURL, could be this.apiURL. So, it's not that difficult. Now, we could write the code that would interact with a restful API inside of here, but I don't really think that this component should be responsible for that. I think this component should just be responsible for getting the data, so that then it could notify whatever called it to then to the actual saving. So with that done, we are going to launch this from our currencies view, so let's go there. So after the heading, let's add the button, let's give it the btn-class and btn-primary, and the text, let's say Add Currency. And let's go ahead and handle the click event. I always like to add the prevent, even though we don't necessarily need that in this case. But in case if we ever did wrap a form around it, then it would be properly prevented. So, let's call this showCreatorModal. And let's go ahead and add that method to our methods down inside of our code. So that, that is there. Now, we do need to reference that component, so let's import that. And that was CurrencyCreator, and that is from I think we go back to, and then components, and then admin. And then CurrencyCreator.vue. We will add this component after the table. And so, we will just have currency-creator, let's give this a ref of creator. And, that should really be it, as far as that component is concerned. Now we do need to add this to our components, we need to register it here. So, let's say components, and then we will have CurrencyCreator. And there we go. So, now all we need to do then is retrieve that modal. So we'll do that with our refs, and what did I call that, creator. And then we will call its show method, so that should properly show that component. We will hopefully see that in action, and we do. Wow, that worked first time. Okay, let's do a hard refresh. Let's just make sure. Yeah, cool, awesome. And we are almost done with our creator UI. We need to wire up the save currency event for our model. We also need to write the client API methods, for interacting with our restful API. And we will do that in our next lesson.

Back to the top