Draggable Sortable Firestore

Key Takeaways

[Music] one of the more challenging features to build on a web application is a drag-and-drop sortable list and it's even more challenging if you need to persist the data in a back-end database instead of trying to reinvent the wheel we're going to use a library called draggable that's maintained by shop live it's relatively lightweight and we can wrap it in angular to make drag and drop features much more enjoyable to code if you're new the channel like and subscribe and you can find the source code on angular firebase comm what we're building today is a sortable list of emojis the user can add or remove items from the list and they can drag items to change the order and have that order be saved in the database this is a pretty complex thing to do from scratch because if you notice when we drag an item it creates a mirror of the original element and toggles a whole bunch of CSS classes on the container and the individual items themselves draggable will make this feature surprisingly easy but also give us enough flexibility to build something unique in addition firestore recently released a couple of new helper methods that make it easy to add or remove elements from an array so we'll take a look at those as well but the first thing you need to get started is an angular app with angular fire installed from there we'll go to the command line and install draggable with NPM there are two main elements to this demo first we have a smart component which is our emoji component and it handles retrieving items from the database and can also add or remove new emojis to the list then we have a directive called sortable which I'm going to call our dumb component because a directive is essentially just a component that doesn't have a custom HTML template it can do pretty much everything a component can do but instead it attaches itself to a host element and extends the functionality of that element when working with sort of a list like this you'll usually attach this to an unordered list and then have your list items be sortable within it we'll start by building out the directive and you'll notice that we're importing a bunch of things here from angular core and this is also where we'll import sortable from Shopify draggable we're going to implement the after view and net lifecycle hook on this directive just so we know that all of the children elements are available once we start running the sortable code on it then we're going to have it emit a custom event that has the new order of the sorted item in order to be able to do that we first need to pass in the initial items which we'll do with an input property on the directive then after the items have been sorted will emit our own custom event by using the output decorator and an event emitter there's quite a few different events you can track here so I've commented those out in case you need them the only one we need is when the actual sorting has been finished then we'll inject element ref in the constructor which will give us access to the Dom element which in this case should be an unordered list so once that's done we can initialize sortable by creating a new instance of the class and then passing it the element ref native element then it takes a second argument with some options we're going to specify the draggable elements as the list items within that list the draggable library is going to emit its own custom events which we can intercept here to emit our own custom event that will have the newly sorted list again there are multiple custom events that you might need but the one that we care about is sortable stop at that point we know the user is done sorting the list so we'll go ahead and take the initial array reorder it and then you mitt that out through our custom event emitter so the parent component can listen to it and handle it accordingly the sortable stop event keeps track of all the elements in the list and it will give us the new index and the old index of the item that was moved so we'll use this method as just a context for mutating the original data so what we can do here is take the original data as our starting point then we can splice off the old index and then Reese Pleiss it back into the new index once we have the array in the format that we want we can go ahead and omit it out as the value from our custom event in the next step we'll have the parent component listen to this event and then update the firestore database with the new value now that we have our directive finished we'll go into the HTML for the component we can just insert it into an unordered list and that will give us access to both its input properties as well as its output properties the data that we read from the database will be an observable so I'm doing an NG if statement here with the document and setting that document as a template variable then we'll pass that to the data input on the directive and then lastly we will listen to our custom stop event and then we'll write an event handler that will update the database when that fire now we can loop over the array of emojis and render a list item for each one then while working in HTML I want to add a couple of extra things first I'll add another button here that the user can click to remove an item from an array then I'll move outside of our loop and add an additional method that we can use to add an additional emoji to the array and these are mostly just so I can show you the new array methods and firestore now we'll go into our component type script and finish this feature out I am importing an angular fire store and then also fires store directly from the firebase app namespace we can inject angular fire store in the constructor and then we'll set up one variable for our document reference so we can make updates on it and then another one for the actual observable data then I'll go ahead and define those during ng on an it for now I'm just going to point to a dummy document that I have saved in the emojis collection then we can define our observable of that document by calling value changes on the reference here's what that document actually looks like in the database we have an array data structure here called faves and it currently has three different emojis in it when the user sorts this list we can update the array on fire store by simply making a reference to the document and calling update with the new array we set up the event emitter in the directive to send the newly sorted array so this is all the code we need to update the document on fire store but if you want to add a single item to the array one way to do that is with the new fire store or a union method which will ensure that a unique item is added to the existing array this is really nice when you want to enforce uniqueness in the array which is exactly what we want to do here so we'll call fire store field value array Union and then pass in the element that we want to add to it if that value already exists in the array then nothing will happen but otherwise it will append that item to the end of the array you can also remove items from the array which is also very useful because a lot of times you don't already know the index of the item and you just want it gone so fire store field value array remove will find that element in the array and remove it so that takes care of all of our typescript code but in order to make drag-and-drop look good you're going to have to spend quite a bit of time in your CSS styling one of the cool things about draggable is that it will add a whole bunch of different CSS classes to your elements depending on what state they're in within the draggable list for example we might want to add a style to the container element when it's being dragged like a blue border then the source element that's being dragged we might want to make that a lighter color and scale it down a little bit then once the items placed we'll go ahead and color the background to green and draggable will remove this class after a second so we can get that green flashing effect when the item is set and another cool thing draggable does is that it creates a mirror element of the item that was selected so you can use that to build adding more complex UI and to handle things like animations when we go to our demo you can see that a lot of different classes are being swapped out on the elements as we drag things around here and as you can imagine doing this kind of stuff reliably from scratch takes a lot of time and effort so using a library like draggable is just going to make your life a lot easier I'm gonna go ahead and wrap up the video there if it helped you please like and subscribe and if you want to take your development to the next level consider becoming a pro member at angular firebase comm to get access to all kinds of advanced exclusive content designed to help you build and ship your app faster thanks for watching and I'll talk to you soon