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

4.1 Designing the Currency List View

Before we can manage and work with our own portfolios, we need to be able to work within manage the currencies, that our application is going to support. So we are going to start with that in this lesson and this is something only admin users will have access to. So, there's a lot that we need to implement. We need the UI, we need our client API, which is going to interact with our server RESTful API. So there's quite a few things that we need to get setup. So let's just jump right in, and we will start with the view. So we have our views folder, and then we have our views inside of it. But this is something that is more of an admin view. So I want some kinda separation here. So inside of the views folder, I'm going to create a new folder called Admin, and then we will put our admin views inside of this. So we will create a new file inside of Sdmin and we will just call this Currencies. So really there's two things that we need to do. We need to list all of the currencies. And we need to be able to edit them. So there's really two components that we are going to create. So this first one is going to be the list of our currencies. So let's start with our div, let's give it a class of currencies. So that keeps in line with the convention that we have been doing thus far. Let's also have our heading at the top, which we'll just say currencies. And then we will have a table. Because really, this is tabular data. We're going to have columns and then rows. So we'll have our table, we'll have the bootstrap class of table. And let's also make it hoverable, so that whatever row we are currently hovering over is going to be highlighted. And let's define our columns. So we have the name, the ticker and the URL. So let's just stick with those. And in that order I think that would be fine as well. Now we could get away with combining the name and the ticker together. But since there is not a whole lot of information to begin with, as far as these currencies are concerned. Having them in separate columns is going to be fine. Now we're going to have an empty column header at the far right. Because that's what we are going to put the links for editing and deleting the currencies that we have. But as far as our headings are concerned, that is really all that we need. So now we have our table body, and we're going to iterate over the currencies we are going to get. So basically what we're going to do is just retrieve all of the currencies In our database. We don't need to filter anything because there's really nothing sensitive about it. And we definitely do need all of the information. So the id, you know, the name, the ticker, and the url. So for every currency in currencies. And one thing I like to do is have a data attribute to put the id in, so we will do the same thing here. And we will just say currency_id and we also need a key. And we will just use the id because that's perfect, that will be unique for every row within our table here. Let's put this on multiple lines so that it is easier to read, at least hopefully it will be easier to read. And then we will have our data. So, the first thing we will have is our currency.name, and then the ticker. And the URL so that we can list all of that there. Now, what was the URL property name? Let's open up our Models > Currency, apiURL. So that's what we will use there. And then for the final column, where we have our controls, let's do this we will have a span element and let's give it a class of currency controls. And we will have two links here. So, the first is going to be the edit link. So let's have that there. And then we will have the delete link. And we won't worry about what we're going to do whenever we click on these just yet. Now let's add some CSS. Because what I want to do is hide the currency controls, unless if we are hovering over that row. So down here at the bottom let's add some style. And for the currency controls, we will set the visibility to hidden. And then whenever we hover over the row, we will then show the currency controls. So then we'll say visibility visible. Okay, that should be fine. We do need some code here. So let's add our script. Let's have our data first of all. And we will have property simply called currencies, which is going to be an array. And then let's have a method that we will use to retrieve our data. So we will call this refreshList(). And basically what we will do is use our API, which we do need to import, don't we? So let's import API from, and I believe the path will be ../ .../api. If that's not correct it will definitely tell us. And in this case, all we want to do is get our currency. So we'll have a method called getCurrencies, and then we will do something with that data. So we will say this.currencies = data, I think that will be fine. And at least, that will display our list. Now, let's go ahead and go to the router, and let's add a route here. But I don't remember what that route is going to be. So let's look at what we have from our app view and that is, /admin/currencies all right. So inside of the router we will add another entry here. The path will be admin currencies. And let's set the name just to currencies, and then the component is going to be the one we just wrote. So, we are going to import and in this case, this is going to be views admin and then currencies. So that should work. Well, let's see what that's going to look like first of all, in the browser. Well, it's gonna look like that. So a module failed to build, expected token after a component. It's always a habit of mine, at the end I always want to put a semicolon. That's not a bad habit to be in. Unless if he continually do that like I do. So let's login as an admin, let's go to manage currencies, and we at least see the view there. So that is okay. So while we're here let's go ahead and write the method in our API to retrieve the currencies. So, we will add the method called get currencies. And we don't need to pass anything to this. But this is something that's need to be protected. So, we're going to have to include an authorization header that contains our token. So that we can say that hey, we are authorized not only as an authenticated user but as an admin to access that route. But we will get to that whenever we actually implement that on the server side. For right now, let's go ahead and build our URL. And this case, our endpoint will just be currencies. And then we will simply just return the data, just like that. So that should be fine. As I mentioned, eventually we will want to incorporate our authorization header. But we will do that when we implement this on the server side. So we at least have the UI ready to go. In the next lesson, we will implement the server code for retrieving our currencies. And we will also need the functionality for creating the currencies so that we can actually see something in the list. And we will get started with that in the next lesson.

Back to the top