To-Do List with SQL

We installed the Velo package on our site as described here. 

Database Collection

We built a MyTasks collection with the following fields:

• Title: Name of the task

• isComplete: Indicates if the task was completed

For the sake of simplicity, the collection’s permissions currently allow anyone to modify the data, but when using this example in your site it is always preferable to grant only the minimum required permissions for accessing your collection.

Page Elements

In our page we added the following elements:

• TextInput: for entering text describing a new task.

• Button: for inserting a new task into the list.

• Repeater: for displaying the current tasks. Each item contains a text element that holds the title of the task and a button for marking the task as complete.

• Button: for removing all completed tasks from the list.

• Image with a loader gif: displays while waiting for an operation to complete.

Backend Code

We handle all operations related to the collection in the data.jsw web module. We import and use the package function, which allows us to use the SQL language, thereby simplifying our interactions with the database collection. The web module includes the following functions:

• getAllTasks: Gets all tasks of the current site visitor from the collection. The function uses the SELECT SQL statement.

• insertTask: Inserts a new task into the collection. The function uses the INSERT SQL statement.

• updateTask: Updates a task’s isComplete field in the collection. The function uses the UPDATE SQL statement.

• removeTask: Removes a task from the collection. The function uses a DELETE SQL statement. This function returns a promise in order to allow calling it several times without waiting for each call to complete.

Page Code

We registered the following event handlers:

• onItemReady: Runs for every task shown in the repeater. We need to show each task as complete or not complete, according to its status, and to register the matching radio button to the changeCompletedStatus() event handler.

• createNewTask: Runs either when the Add button is clicked, or when the Enter key is pressed while the site visitor is in the TextInput element.

• clearCompletedTasks: Runs when the Clear Completed Tasks button is clicked.

We call fetchData(), which populates the repeater with the tasks stored in the collection. While the operation is running, the loader GIF is shown.