Quick Start Guide Todo List

package com.todo.list.entities

import dev.alpas.ozone.*
import me.liuwj.ktorm.schema.boolean
import java.time.Instant

interface Task : OzoneEntity<Task> {
    var id: Long
    var name: String?
    var createdAt: Instant?
    var updatedAt: Instant?
    
    // Add a boolean property for completed todos
    val completed: Boolean

    companion object : OzoneEntity.Of<Task>()
}

object Tasks : OzoneTable<Task>("tasks") {
    val id by bigIncrements()
    val name by string("name").size(150).nullable().bindTo { it.name }
    val createdAt by createdAt()
    val updatedAt by updatedAt()

    // Add a completed column for completed todos
    val completed by boolean("completed").default(false).bindTo { it.completed }
}

package com.todo.list.controllers

import dev.alpas.http.HttpCall
import dev.alpas.routing.Controller

// add the following imports
import com.todo.list.entities.Tasks // This calls the Tasks entity created in step 4
import dev.alpas.orAbort
import me.liuwj.ktorm.dsl.delete
import me.liuwj.ktorm.dsl.update
import dev.alpas.ozone.create
import dev.alpas.ozone.latest
import dev.alpas.validation.min
import dev.alpas.validation.required
import me.liuwj.ktorm.dsl.*
import me.liuwj.ktorm.entity.toList

class TaskController : Controller() {
    fun index(call: HttpCall) {

        // Go ahead and remove the following line
        // call.reply("Hello, TaskController!")

        // ADD IN THE FOLLOWING
        
        // Get the latest todo items from the database
        val tasks = Tasks.latest().toList()  
        // Get the total size of the tasks
        val total = tasks.size 
        // Now, get the completed todo items 
        val completed = tasks.count { it.completed } 
        
        // Now render the 'welcome' page to display a list of todo items to the user
        call.render ("welcome", mapOf("tasks" to tasks, "total" to total, "completed" to completed))
    }
    
    // Let's create a function to store a new todo item that have been added via a form.
    fun store(call: HttpCall) {
        
        // Before we write the new todo task to the database, let's first validate to
        // make sure there is data with at least 2 characters. If validationfails,
        // a message will be sent back to the user with the failure reasons.
        call.applyRules("newTask") {
            required()
            min(2)
        }.validate() 
        
        // If validation has passed, then create a new todo item in the databse
        Tasks.create() {
            // Get the name of the task that was passed
            val taskName = call.stringParam("newTask")
            it.name to taskname
        }
        
        // If a new todo task has successfully been created and saved to the database,
        // let's send a success message back to the user to let them know.
        flash("success", "Successfully added to-do")
        call.redirect().back()
    }
    
    // Next up, let's create a function to delete a todo item
    fun delete(call: HttpCall) {
        // We will get the todo tasks id that is marked for deletion
        // and then remove that item from database
        val id = call.longParam("id").orAbort() 
        Tasks.delete { it.id eq id }
        flash("success", "Successfully removed to-do")

        // Go back to the same page that the user came from
        call.redirect().back()
    }
    
    // Lastly, let's create a function to update a todo task
    // to make as either completed or uncompleted.
    fun update(call: HttpCall) {
        // Get the intended boolean state of todo task as determined by a checkbox.
        // If the checkbox was not checked this will return a null. 
        
        val markAsComplete = call.param("state") != null 

        // The id of the todo item we are trying to update.
        val id = call.longParam("id").orAbort()
        
        // Update the item in the database to set the new completion state.
        Tasks.update { 
            it.completed to markAsComplete
            where { it.id eq id }
        }
        
        // Based on if markAsComplete is equal to 'True',
        // let's flash the appropriate message.
        if (markAsComplete) {
            flash("success", "Successfully completed the to-do")
        } else {
            flash("success", "Successfully updated the to-do")
        }
        
        call.redirect().back()
    }
}

package com.todo.list

// Update WelcomeController to TaskController
import com.todo.list.controllers.TaskController 
import dev.alpas.routing.RouteGroup
import dev.alpas.routing.Router

// https://alpas.dev/docs/routing
fun Router.addRoutes() = apply {
    group {
        webRoutesGroup()
    }.middlewareGroup("web")

    apiRoutes()
}

private fun RouteGroup.webRoutesGroup() {
    // Update WelcomeController to TaskController
    get("/", TaskController::index).name("welcome") 

    // Add the following routes
    post("/", TaskController::store).name("store")
    delete("/", TaskController::delete).name("delete")
    patch("/", TaskController::update).name("update")
}

private fun Router.apiRoutes() {
    // register API routes here
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Alpas - To-Do List</title>
  <link rel="stylesheet" href="{{ mix('css/app.css') }}">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>

<body class="bg-orange-100 h-screen">

<!-- This section displays the flash messages received from TaskController -->
<div class="container-fluid fixed w-full flex justify-center">
  {% if hasFlash('success') %}
    <div class="w-1/3 text-white bg-green-500 py-2 px-10 text-center">
      {{ flash('success') }}
    </div>
  {% endif %}
</div>

<div class="container mx-auto pt-20 px-20">
  <div class="w-full flex justify-between mx-auto">
    <div class="w-1/2 text-4xl font-extrabold text-gray-700"> To-Do List</div>
    <div class="text-center">
      <!-- Here we show completed tasks vs total tasks -->
      <h5 class="text-4xl font-extrabold text-blue-600"> {{ completed }} / {{ total }}</h5>
      <p class="text-sm text-gray-600">completed / total</p>
    </div>
  </div>

  <div>
    <!-- This form is where the user enters the to-do item and makes a post request -->
    <form method="POST" action="{{ route('store') }}">
      <div class="form-group">
        <!-- CSRF is a protection mechanism; 
            view https://alpas.dev/docs/csrf-protection#main for more info -->
        {% csrf %}
        <input type="text" class="form-control mt-2 w-1/3 py-3 px-2 bg-gray-200 rounded-sm"
            id="task" name="newTask" autofocus="autofocus" placeholder="Go fishin'">
        <button type="submit" class="ml-2 p-3 px-8 inline-block bg-green-500 text-green-100">
            Add
        </button>
      </div>
      <!-- This checks to make sure to-do entry is a valid entry -->
      {% if hasError("newTask") %}
        <div class="text-red-600 mt-3">{{ firstError("newTask") }}</div>
      {% endif %}
    </form>
  </div>

  <div class="py-10">
    <!-- If no to-dos, display the following message -->
    {% if total == 0 %}
      <div class="alert alert-warning"> Add some to-dos! </div>
    {% else %}
      <!-- If to-dos do exist, then we iterate on displaying each to-do item -->
      <div>
        <ul class="text-xl">
          {% for task in tasks %}
            <li>
              <div class="flex pt-1">
                <div class="pr-4">
                  <!-- This form let's the user mark a todo task as completed or not 
                        and makes patch call to update database -->
                  <form action="{{ route('update', {"id": task.id}) }}" method="POST">
                    {% csrf %}
                    <input type="hidden" name="_method" value="patch"/>
                    <input type="checkbox" name="state"
                           onChange="this.form.submit()" {{ task.completed ? 'checked' : '' }} />
                  </form>
                </div>

                {% if task.completed %}
                  <div class="line-through"> {{ task.name }} </div>
                {% else %}
                  <div class=""> {{ task.name }} </div>
                {% endif %}
                <div class="pl-3">
                  <!-- This form lets user delete a to-do task -->
                  <form action="{{ route('delete', {"id": task.id}) }}" method="POST">
                    {% csrf %}
                    <input type="hidden" name="_method" value="delete"/>
                    <button class="hover:text-red-800 text-red-600 text-sm hover-target">
                    remove
                   </button>
                  </form>
                </div>
              </div>
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </div>
</div>

</body>

</html>