Build a Powerful List with Ionic

[00:00] In this lesson we are going to flex our Ionic muscles by completely refactoring the bookmarks view. So the first thing we're going to do is type Ionic serve, and just take inventory of where we are currently in the app. In the bookmarks view we are going to add another navigation button, and we are going to set this to the secondary position, and Ionic will figure out where this actually goes based on the platform that you're targeting.

[00:36] We're go to add a new button. We're going to give it a class of button, button-icon, and we are going to go with the ionic-edit icon. So you can see it up here in the right-hand corner.

[00:54] Now let's go ahead and convert this list of bookmarks into a proper Ionic list. We'll go ionic-list and then we're going to change these DIVs into ion-items. From here we're going to refactor this anchor tag, and move the ngClick to the surrounding ion-item tag.

[01:29] We're going to add an HREF tag so it behaves properly when we're previewing it in a Web browser. Let's go ahead and delete these anchor tags, we no longer need them. Then let's go ahead and delete these buttons here and we're going to replace these with ionic-buttons.

[01:52] The first one we're going to do is the ion-delete-button and we're going to give this a class of ion-minus-circled. Then we're going to go with an ion-reorder-button, we'll give this a class of ionc-nav-icon.

[02:19] We need to set a few things on this ion-list for this to work. The first thing that we are going to set is show-delete to true and we're also going to set show-reorder to true. Now from here, if we hop into the browser we can see that we have these delete icons and these reorder icons.

[02:54] Let's go ahead and update this create-bookmark-button to be a proper Ionic button. So we're going to delete the button, button-link class, and we're going to replace this with button-button-balanced-button-block.

[03:13] What this is going to do is force the button to throw out the entire screen. Let's go ahead delete these bootstrap icons and just replace this with icon-ion-composed. Now this button's going to be a little crowded, so let's add class padding, and Ionic does all the hard work of figuring out what this is actually supposed to look like. So you can see here, now we have this create-bookmark and when you resize the browser, this actually looks pretty good.

[03:52] One bit of housekeeping real quick, let's hop into our code and delete this horizontal rule. It is now unnecessary.

[04:01] The next thing we're going to do is hook up the ability to edit our bookmarks in our application. So let's add a property to our bookmarks-list controller of is-edit-mode, and we will set this to false. Then let's create a method on our bookmarks-list controller to toggle our edit mode, and so we'll just call it toggle-edit-mode and then from here we are just going to set edit-mode to the opposite of itself when called.

[04:57] Now that that is complete, let's hop into our template and let's go ahead and hook up the edit button on ngClick to toggle the edit-mode and then we will toggle show-delete to the state of is-edit-mode. So if we hop into the browser you can see that the button is not there, we go into edit mode and there it is. We need to change one bit of behavior, if you're not in edit mode we want to go to the bookmark, but if you are in edit mode, we want to go to the edit state.

[05:48] Let's set up a condition around that, so if are in edit mode, we're just going to go to the edit state and pass in our bookmark ID and the appropriate category. If not, then we're going to handle as normal and just navigate to that page through the Cordova plug-in. Let's hop into the browser and we'll go into edit mode and when we click on these bookmarks nothing is happening.

[06:22] The reason being is our [inaudible] events are being swallowed by Ionic, and so the easiest way that I've found around this is by adding this bit of CSS to our stylesheet that just allows for all [inaudible] events. It's still not working, and the reason why is because we forgot to add the state service to our bookmarks-list controller.

[06:48] So let's add this and now let's give this a spin. We're in edit mode and you can see now that when you click on this we are entering into the editing state for this particular bookmark.

[07:07] The next thing that we are going to do is add in the ability to actually move the bookmark from one place to another. This is going to take three arguments -- the bookmark that we want to move, the from-index, and the to-index. From within this method we are going to execute a two-step process. The first thing to do is remove the bookmark from the bookmarks array at the current index, and from there we are going to put it back into the bookmarks array at the to-index.

[08:11] We need to do one other thing real quick, and that is to remove the ngRepeat filter. We need to handle this manually. Let's go up to our get-bookmarks method call here and we're going to take the results which is all of the bookmarks and we're going to just create a subset and essentially perform the filter method here.

[08:43] We're going to grab the current category name, and then we are going to perform a transformation on the bookmarks collection. We're going to first check and see if we have a category, and if we do then we're going to grab all the bookmarks where the bookmarks-category matches the current category. If not, then we're just going to return all of the bookmarks.

[09:20] Let's go ahead and add up the event handler for this. We're going to use the on-reorder attribute directive which comes with Ionic. We're going to call bookmarks-list-controller.move-bookmark and we're going to pass in the bookmark that we're reordering as well as to parameters that come from the Ionic event itself which is from-index and to-index.

[09:51] Now let's hop into our template and let's see this in action. So we'll grab this bookmark and we can drag it to the top.

[10:02] Let's see this in the default view as well. We'll take this one and drag it to the top, and it is working. So the last and final thing we need to do for this lesson is to hook up the delete-button. We'll go down to the bottom here and we're going to create a new method on our controller, and we'll call this delete-bookmark, this will take a bookmark parameter.

[10:43] Then from here we're going to call the bookmarks-model-delete-bookmark and then we need to do one other thing, and that is to refresh our bookmarks because we're handling the filter within the actual call to the bookmarks-model, so we'll just cut this out and we'll create a new method at the bottom called get-bookmarks, and then we'll paste that in. Then we'll go ahead and call this right after we set the current category.

[11:37] Then we just need to add ngClick to our delete-button call bookmarks-list-controller, delete-bookmark and pass in the bookmark. Let's go back to our controller and delete the reference to our model, because we're handling this within our controller. So let's go into our browser, we'll go into edit mode, and let's delete some bookmarks.

[12:07] Let's do a quick recap of what we have accomplished in this lesson. We converted the list of bookmarks into an ionic-list then we added in edit mode to toggle between clicking on the bookmark and editing the bookmark. Then we added in the delete-icon and the reorder-icon, and then we hooked up the functionality to reorder the bookmarks as well as delete the bookmarks.