5.2 Designing the Address Creator Component
We need to be able to add addresses to our portfolio before we can list them in our list view, so in this lesson we'll design the UI component for doing that.
1.Introduction2 lessons, 12:18
2.Getting Started2 lessons, 20:32
3.Users and Authentication5 lessons, 54:30
4.Managing Currencies5 lessons, 46:15
5.Managing Our Portfolio5 lessons, 50:13
6.Security1 lesson, 10:49
7.Conclusion1 lesson, 00:38
5.2 Designing the Address Creator Component
In the previous lesson we finally started implementing the portfolio. And we didn't finish the main portfolio view, but we got a pretty good start on it. But of course, there's no data to display, and really, the only way that we can have data is to write the capability to add our addresses. So we are going to focus on that in this lesson. And just like in the previous lesson, we are going to start with the admin components for creating and editing currencies, because that gives us a lot of stuff already done. There's a few things that we need to change, but it will give us a good start. So let's copy those from admin, and let's put them inside of just the components folder. If visual studio code will be compliant with that, and there we go. So let's focus on the creator for right now. Let's rename it to address creator. And of course there are many things that we needed to change. The first is the title. So let's call it Add Address. We don't have a ticker, instead there's really only two things that we need. The currency that we want to choose, and then the address. So our ticker symbol is going to go away. And in its place, we're going to have currency. And this is going to be for, let's just call it currency then. And we aren't going to have an input element here, instead we will have a select. So let's start with that, we'll have a class form group. The name is currency because that's what we just decided upon. Let's start putting this on multiple lines to make it a little bit easier to read. Now as far as the view stuff, let's have a v-model of selectedCurrency. And then the inside selects elements we will have all of our options. So let's add those, we will use a v-for, and for each currency in currencies, we need to do several things. First of all, we need the key. So in this case, our currency has an ID that we could use as the key, and we also need the value, so we will bind that as well. Let's use the ID for the value, and then we just have the text that is going to be displayed. And of course, that is the name of the currency. And should we do the ticker? I guess we can include the ticker as well. So in parenthesis after the name, we will have the ticker. So that will be our options. So this means that we are going to have to, once again, retrieve all of our currencies. Now, we have the code to that, but that's really for the admin section of our application. And there's really nothing that says that we can't reuse it. But I'm going to make the argument that we want to keep thing separate. So we are going to write another method for retrieving our currencies just for this specific purpose. So we will have our options there. Now instead of a name we will have our address. And the v-model will be address. And let's change the ID. And is the name there? If it's not, it really doesn't matter, cuz we're not submitting the form, so that's okay. We'll get rid of this third field, because we don't have any data there. And we will leave the Save and Close buttons. Although, let's change the text here to Save Address. So this is going to give us the ability to save. Now we need our currencies, we also need selected currency as data, as well as the address. So let's change ticker to selectedCurrency, and we will set this to null. Let's change name to currencies, which will be an array. And then we will change apiURL to address, and that will be an empty string, so that we have default values there. Now, whenever we show this, we want to retrieve the currencies, and actually, yeah, we want to do this on show. So what we will do then, is we will use our API. And we'll call a method called getPortfolioCurrencies. And after we get that data, then we will set our currencies equal to the data that came in, and that would be fine. And actually, then we will show the model. So that we set up the UI and then show the model, so that there's no flashing of any data on the screen. So that is going to give us our currencies. And when it comes to saving, let's change the terminology here, since we are kind of starting to begin with. So, we are going to create address. We need the currency that was selected. So let's call this selectedCurrency, or actually no, let's just call it currency. And then that will be this selectedCurrency. Then we will have our address, and that will be it, we don't need the apiURL. So then, in our portfolio view we will take this information and then save it. So let's open up that view, and we will want to make a few changes here. We are no longer looking at admin, and we are looking at addressCreator, let's change the name of that so that is going to be there. Let's change the name of the tag, we'll leave the ref the same. Now our event is now create-address. We'll still call the method saveNew. But we do need to change the closing tag to address-creator. So there we have that, and as far as saveNew is concerned, we are going to have a record, that we then want to create. So we're going to create, I guess createAddress. We will in pass the record, that's going to have the address, as well as the currency. We will refresh the portfolio after that occurs, and then we will hide the creator UI. So, let's go to our client API, and let's implement this createAddress. So after getPortfolio, we will have createAddress, where we will have our record that's being passed. Now, we have another method that we need to implement, and I've already forgotten what we called it. Get portfolio currencies, so let's go ahead and let's add that here as well. And, really, since this is the exact same as get currencies, what we will do then, is just copy what we have there, of course the URL is going to be a little bit different. So instead of, just currencies, let's say that this will be portfolio/currencies. And for the createAddress, let's use that same thing. But our URL is going to be just portfolio. This is going to be a post request. We are going to pass in our record data after the URL. We include the options, and then there is that. So we should have all the client code ready to go as far as creating our address information. So in the next lesson we will implement the server both of the address creation as well as retrieving the portfolio information. And if we have time, we will also retrieve the balance for those addresses.