Merge pull request shreys7#2 from shreys7/feature/display-status-todo

Added support for displaying the status via a checkbox
Ritikasinghpro · Dec 2, 2019 · e210066 · e210066
2 parents 0b3efae + 38c78aa
commit e210066
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 20 deletions.
diff --git a/todoApp/db.sqlite3 b/todoApp/db.sqlite3
diff --git a/todoApp/staticfiles/css/style.css b/todoApp/staticfiles/css/style.css
@@ -6,4 +6,14 @@
   color: red;
   float: right;
   cursor: pointer;
+}
+
+.todo-complete {
+  opacity: 50%;
+  text-decoration: line-through;
+}
+
+.todo-status-checkbox {
+  cursor: pointer;
+  margin-right: 10px;
 }
diff --git a/todoApp/todos/templates/todos/index.html b/todoApp/todos/templates/todos/index.html
@@ -6,37 +6,60 @@
 
 {% block content %}
 <div class="container">
-  <div class="page-header text-center">
-    <h1>Todo List</h1>
+  <div class="page-header">
+    <h1>
+      Todo List
+    </h1>
   </div>
-  <form method="post" action="{% url 'todos:add' %}">
+  <form 
+    method="post" 
+    action="{% url 'todos:add' %}"
+  >
     {% csrf_token %}
     <div class="form-row">
       <div class="col-md-6">
-        <input type="text" class="form-control" name="title" value="" placeholder="Do laundry">
+        <input 
+          type="text" 
+          class="form-control" 
+          name="title"
+          placeholder="Do laundry"
+        >
       </div>
       <div class="col-md-6">
-        <button type="submit" name="submit" class="btn btn-success">Add To Do</button>
+        <button 
+          type="submit" 
+          name="submit" 
+          class="btn btn-success"
+        >
+        Add To Do
+        </button>
       </div>
     </div>
   </form>
+  <hr />
   <div class="list-group">
     {% for todo in todo_list %}
-      {% if todo.isCompleted %}
-        <div class="list-group-item col-md-6">
-          {{ todo.title }}
-            <a href="{% url 'todos:delete' todo.id %}">
-              <i class="far fa-trash-alt"></i>
-            </a>
-          </div>
-      {% else %}
-        <div class="list-group-item col-md-6">
-          {{ todo.title }}
-          <a href="{% url 'todos:delete' todo.id %}">
-            <i class="far fa-trash-alt" type="submit" name="submit"></i>
-          </a>
-         </div>
-      {% endif %}
+    <div 
+      class="list-group-item col-md-6 {% if todo.isCompleted %} todo-complete {% endif %}">
+      <form 
+        style="display: inline;" 
+        method="post" 
+        action="{% url 'todos:update' todo.id %}"
+      >
+        {% csrf_token %}
+        <input type="checkbox" 
+          name="isCompleted" 
+          onchange="this.form.submit()" 
+          {% if todo.isCompleted %} checked {% endif %}
+          class="todo-status-checkbox"
+          title="{% if not todo.isCompleted %} mark as done {% else %} mark undone {% endif %}"
+        >
+      </form>
+      {{ todo.title }}
+      <a href="{% url 'todos:delete' todo.id %}" title="Delete">
+        <i class="far fa-trash-alt"></i>
+      </a>
+    </div>
     {% endfor %}
   </div>
 </div>

diff --git a/todoApp/todos/urls.py b/todoApp/todos/urls.py
@@ -5,5 +5,6 @@
 urlpatterns = [
     path('', views.IndexView.as_view(), name='index'),
     path('<int:todo_id>/delete', views.delete, name='delete'),
+    path('<int:todo_id>/update', views.update, name='update'),
     path('add/', views.add, name='add')
 ]
diff --git a/todoApp/todos/views.py b/todoApp/todos/views.py
@@ -21,4 +21,15 @@ def delete(request, todo_id):
     todo = get_object_or_404(Todo, pk=todo_id)
     todo.delete()
 
+    return redirect('todos:index')
+
+def update(request, todo_id):
+    todo = get_object_or_404(Todo, pk=todo_id)
+    isCompleted = request.POST.get('isCompleted', False)
+    if isCompleted == 'on':
+        isCompleted = True
+
+    todo.isCompleted = isCompleted
+
+    todo.save()
     return redirect('todos:index')