From 38c78aa662ba178cf90d9bd10c1a8b1145d6b326 Mon Sep 17 00:00:00 2001
From: shreys7 <shreyshah97@gmail.com>
Date: Mon, 2 Dec 2019 23:38:13 +0530
Subject: [PATCH] Added support for displaying the status via a checkbox

---
 todoApp/db.sqlite3                       | Bin 139264 -> 139264 bytes
 todoApp/staticfiles/css/style.css        |  10 ++++
 todoApp/todos/templates/todos/index.html |  63 ++++++++++++++++-------
 todoApp/todos/urls.py                    |   1 +
 todoApp/todos/views.py                   |  11 ++++
 5 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/todoApp/db.sqlite3 b/todoApp/db.sqlite3
index 249e36fea3beeb9104f9cb03dd2d3a94a689ba78..66ebb5e592a0f2611731010bb952accd81e0e2f8 100644
GIT binary patch
delta 470
zcmZ{gy-LGS6o8WyO9Yb$3LR9q;@q42o0|lR1O-R2ZcYk`B{b%O2{@+E)j^Tc#}IMo
z+P*=dgKyz8co8eu*!er><2z?CH3w7kX-^+L@1N+Sx9cmnX}2~SRDYRm?F<+0WZ~-J
zd~?^H+mCj~`g}hGGi&@|8Ldjwv~wCoW?F!>1U)HZkV)B3^WHH*IA~+iMg(9lWH>|~
zq=-{0))B#$x;VK_^R!H|5@a_;31ptsmk>l1;R3OLks=H!-|2zMTO&asXOQ?r6|Fda
z3HO!`)d23~{hyFZ9i~PR^aa9xP?vlY5(G+ecBDcgkS7nIlyNL;!%RRbIK`{?pzwzX
kuiI#99i_QU@)&fJV%&EO?x^>26(S&~oOyim>KGT>U%6#(H2?qr

delta 360
zcmY+8KTE?v9EOt=wSpyrU<XBiot)a<UDAJ{MMA7a6h+0wA~bks5^3*3o8V}RUqBJe
zM{pEz=vqf7g${ll4@JT8<#`@>hm-VhlD=J0J9n#&+IjAr7H8+PGbuy8e_dF*nHI;>
zqH2Ap>n}NY%Osx}EnANS6?PZ`6`XBu2Rs<~5cv$~rOQ15zc}FM-Ixa4`-Uew5W4*+
znY^pZ7C}atAY991l1CT_Q4~cVDvu*b%_)u1hHW1+PT`0R;vR#R5MGx77gvx==$f{B
zE%gUw)UfTeO(~<W7jOoS;8DP1Hwpv?$9MbE3S;TCorA4rtGS=YCF4wLlzEH;WfyMT
zji4ttocr=R8-OdDdPX*X?+9SSDk00j1yU{7Dp->2&+&h#g34yn*0rXNh?HegKxWl6
L@%TyC4i~=wP>^Qa

diff --git a/todoApp/staticfiles/css/style.css b/todoApp/staticfiles/css/style.css
index 3a631ad9..9a14bf72 100644
--- 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;
 }
\ No newline at end of file
diff --git a/todoApp/todos/templates/todos/index.html b/todoApp/todos/templates/todos/index.html
index 5eb12b0e..52a7a45d 100644
--- 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
index 041401c6..90e698dc 100644
--- 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')
 ]
\ No newline at end of file
diff --git a/todoApp/todos/views.py b/todoApp/todos/views.py
index aec6ec9c..26d3c4cd 100644
--- 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')
\ No newline at end of file