Add Filtering and Sorting to an Ember-Syncano Todo App

Todd WackerTodd Wacker

The ember-syncano add-on can handle advanced functions such as data queries. This tutorial shows you how to add them to your app.

In today's post, I'm going to add a few new features to the todo app I created with Ember and Syncano in my previous post. If you haven't already, you may want to take a look at that ember-syncano tutorial.

The todo app we created in my previous post was a good example of some of the basics of Syncano, its Classes, and its Data Objects. In this updated version of the todo app, we want users to be able to filter the todo list so that they can view all of the active todo items or all of the completed todo items.

We also want to give our users a way to prioritize their todo items and sort the list accordingly. Let's dive into the ways that Syncano can make this happen.

Getting Started

This app uses the ember-syncano add-on which you can install to any Ember-CLI app by running ember install ember-syncano.

To get started, you can either follow along with the source code or clone the repo locally.

git clone https://github.com/twack05/syncano-todo-filter.git

Overview

You'll notice that we made several structural changes in Ember to set up the app to handle the features we want to implement. We created subroutes underneath our original route for index, active, and completed. This will allow our users to easily navigate between the different lists we're going to present them.

We're still going to use the same template (app/templates/todo-list.hbs) and controller (app/controllers/todo-list.js) for all three lists. This will keep consistency between the lists and allow users to execute the same actions no matter which filters they have applied.

Filter for Active Todo Items

To filter for active todo items, we'll make a call to the Syncano API when users navigate to our active route. You can see this outlined in app/routes/todos/active.js.

model() {  
    var filter = {"query":{"is_completed": {"_eq": false}}};
    return this.store.query('todo', filter);
  }

The ember-syncano add-on can also pass queries to Syncano. This query will filter our data so that Syncano only returns the todo items where is_completed is false, aka our active todo items.

Filter for Completed Todo Items

For our completed todo items, we can make the exact same call, except we want items where is_completed is true. We'll set that call for our model in app/routes/todos/completed.js.

model() {  
    var filter = {"query":{"is_completed": {"_eq": true}}};
    return this.store.query('todo', filter);
  }

Upvoting and Downvoting Todo Items

Next, we want to allow our users to prioritize todo items. We'll use an upvoting and downvoting system to achieve this.

First, we'll navigate to the Syncano Dashboard where we can add a new priority field to our todo schema. We want this field to contain an integer.

priority field

We'll also need to adjust our Todo Model in Ember to reflect this change. It should look something like this:

import DS from 'ember-data';

export default DS.Model.extend({  
  title: DS.attr('string'),
  is_completed: DS.attr('boolean'),
  priority: DS.attr('number') // New priority field
});

We'll add a new action to our Todo List Controller located at app/controllers/todo-list.js.

This action will allow users to increase or decrease a todo item's priority rating based on the information passed into the function when a user clicks on either the upvote or downvote buttons.

changePriority(item, increase) {  
      // Check if the user wants to increase or decrease the priority and update accordingly
      var new_priority = increase ? item.get('priority') + 1 : item.get('priority') - 1;

      if (new_priority >= 0) { // Don't allow priority to fall below 0
        item.set('priority', new_priority);
        item.save();
      }
    }

Now, we can adjust an item's priority and see the priority and order of items change in real time.

Ordering Todo Items

One last function that makes working with Data Objects easier is the order function. In this particular application, we used Ember for ordering because we wanted the list to automatically reorder itself by priority whenever one of the todo items changed, and Ember's built-in listeners make that process very easy.

However, Syncano allows us to have our Data Objects already sorted in the order we want when they come back to us. To do this, we simply include an orderBy object as part of our call to Syncano. The code looks like this:

var order_by = {'orderBy': {'priority': 'desc'}};  
this.store.query('todo', order_by);  

In Conclusion

These additions to our todo app allowed us to take a deeper look into the ways Syncano Data Objects can be manipulated. Check out the source code, play around with the live todo app, or take a look at our docs to add this functionality to your own applications. If you have any questions or comments, reach out to me @WackerTheHacker.

Build powerful apps in half the time

Use our serverless platform to set up your backend in minutes.

Learn more
Todd Wacker
Author

Todd Wacker

Dev Evangelist, Developer