3.3 Creating the Settings View
We need to allow users to manage their feeds. In this lesson, we'll create the Settings view and hook up its various pieces to our Vuex store.
1.Introduction2 lessons, 06:25
2.User Registration and Authentication7 lessons, 1:05:20
3.Wireframing the UI3 lessons, 27:30
4.Handling Requests5 lessons, 39:24
5.Conclusion1 lesson, 01:04
3.3 Creating the Settings View
In this lesson, we're going to start implementing the settings user interface. And we are going to start by of course creating that file. Then we will update our router to include the settings. We will also add a menu at the top for authenticated users. So let's start by creating that file. That is going to be simply settings dot view. Let's go ahead and add in the template. And let's have some markup here just so that we can see that we have something to work with. So this is gonna be a div that is six columns, and it's also gonna be offset by three. And I guess it wouldn't hurt to have some margin at the top as well. So We'll use three there and then we will have an h4 that is going to serve as the title for this page and well, let's do this. Let's go to our appview and we are going to copy this ul element everything about it because we can essentially use all of this. We do need to change the directive to be just a v-else. So that if the user is not authenticated then this menu is shown otherwise, this other menu will be shown for authenticated users. I'm gonna put that all on one line there. And then we just need to change some of these things. So as far as this first link, this is going to go to our feeds and then the text will just call feeds. The second will be for our settings route. So we will change the URL to just settings. Now of course those don't exist. So let's go to our router. And let's add that but before we do so let's copy this before enter function. And let's use that as our guard and we'll just call it off guard. So that we can use it in any route that we need to. So we'll just simply do that and there we go. And since we are trying to be quick here let's just copy what we have as far as feeds is concerned. We will use this for our settings route. So the path will be slash settings the name will be settings. And of course the file that is going to be lazy loaded is settings. So with that in place we have our menu now we can go between feeds and settings and we see that everything Is working okay as far as that is concerned. Alright so now I am going to paste in some markup because it's not a whole lot of markup but it's boring to see me talk in type about this markup. So the first is going to be are four. Now this is gets a little long just because I put all of the attributes on their own lines. We could probably make this a little bit cleaner by expanding out to the right some. However what we have here is the field name and the feed URL and then an add feed. So of course whenever we add a feed it's going to take those values and then we will dispatch that by sending that off to the server to do its thing to store that in the database. But then we also need the list of our feeds so that if we ever want to remove a feed then we can and we are going to use a table to display all of that. So let me grab that markup and paste it in. It's very straightforward. We are simply iterating over all of the feeds inside of our store and we are displaying those. Each one has a delete button which of course we need to write the code for. But that's the general UI. So just like all of our other views let's use the composition API here. I'm going to open up feeds and I'm going to pull in the imports for the ref and use store. I don't know if we'll need ref. But it was kind of convenient that we pulled it in in the previous lesson and we ended up using it. So you never know we might need that here. And then we will have our setup method. So let's first grab our store we will call the use store function to get that value and we know that we are going to have stuff that we need to work with within the component itself. So let's go ahead and return an object. Now the first thing that I see on screen here is our delete button. So let's have a function called delete feed in which case we will have the feed object that we are gonna be working with In which cast we will need to dispatch an action because that has to be sent to the server in order to delete that feed from the database. So we're gonna call that simply delete feed and then we will pass in the feed object there. Now we do need access to that inside of the component. So let's go ahead and return that. So that's for our button we can go ahead add then click prevent we will prevent the delete feed and then we will pass in the feed there. Now of course we don't have this delete feed action. So let's go to RV View x store. And well that's the router we don't need the router we wanted the view x store. There it is. And we want to add an action here. So let's just add this somewhere before get feed. Ideally all of these would be alphabetical because that's just how I like to have my methods listed. But this is going to be okay so we will have our delete feed. Now eventually we will Send that to the server. But for right now we just want to commit a change which is going to remove the specified feed and I guess let's call it remove feed because whenever we add a feed we are going to use the term add feed. So that kind of makes sense to keep things a little bit more consistent tier so we'll just rename everything from delete to remove. Alright so let's go back to our store. And we of course want to remove this selected feed only of course need to create this mutation. So let's just do that now. And one of the really nice things about passing around of these objects like this feed object is that it makes working with our feeds array inside of our state's very easily. For example we need to remove that feed. And since this is the same object that came from our view x store even though we used it and passed it around inside of our component It is still the same object. So we can easily remove this from our state. By doing this we can call splice. And then we need to know the index of this feed. But that's easy enough to do because we can use the index of method we can pass in that feed. And there we go then all we have to do is remove that one item. So if we actually test this out we are going to see that. Let's do refresh here. Whenever we click on any one of these delete buttons it's gonna be gone. And of course if we go and look at feeds there we just have that second feed and if we click on the delete for the second feed that's gone too. Of course if we refresh the page those things come back because those are hard coded. But that is a very nice thing. We don't have to find a feed based on its ID or anything like that. We are working with the same objects throughout this entire application. So now we just need to write the code for adding a feed. Now one thing I did not do is add the V models to our form here. So we need to do that. Let's first of all add the V model for the name. We'll just call that feed name. And for the URL we'll call that feed URL. That gives us something to retrieve inside of our setup method. So let's just add those feed name. And we of course are going to call ref there. We'll just copy and paste and then feedurl. Then we need another function for adding a feed. So we'll just call that add feed. And we of course need to dispatch an action. So we will dispatch an action called head feed. And then we will pass in the feed names value and the feed URLs value. Now we could create another object and have those as properties of that object. For right now we'll just keep them separate. If we decide that we want to do that to combine them into an object we can do that. Let's go ahead and let's take this ad feed Let's wire up the event listener for our button here. So let's put that on another line. We of course need to prevent any default action from occurring and we will call add feed. Something else that we should probably do is after we add the feed then we would want to reset the values. Feed name and feed URL. So let's go ahead and do that. Although we would be doing that inside of the callback after we receive the response from the server that everything is okay. And we'll just have to make note of that. So of course we need that add feed action. So let's add that at the top of our actions because it's alphabetical. And the first thing we need is the commit function. So that we will have that then we will have the feed name is. And the Feed URL. And of course all we need to do is commit a mutation and we'll call that mutation add feed and then we will just pass it in then feed name and feed URL. And finally we will create that mutation so that we will set a new object inside of our feeds. That was feed name feed URL and we will simply just call feeds push and then we will have our object where name is feed name. Then the URL is feed URL. So all of that should work. Let's test it out. Let's go back. As far as the feed name is concerned we'll just have the third feed, and the URL really doesn't matter. So we can just have something there. We'll click on add feed and nothing happened. Of course nothing happened. And let's see we have ad feed is not a function. So let's take a look at our view x store. We have ad feed there. Let's go down to our actions add feed there. Let's look at our settings. And that's where it is. And we need to also exports the feed name and feed URL. So let's do that. Those are very important things. And now this should work. So if we have a name it doesn't matter what the feed URL does matter. Let's click on add feed and voila. We have our feed if we go and look at our feeds we have that added as well. So we have our UI all set up and ready to go. In the next lesson we can start implementing this functionality on the server.