Move to right place checklist file

views/checklists/list.html

@@ -25,12 +25,14 @@
 
   <!--Liste task-->
   <section class="ListTask">
-    <!--task 1-->
+
+    {% for task in tasks %}
+
       <div class="task">
         <div class="row sameHauteur"> <!--Ligne Nom de la task + checkbox -->
 
         <div class="col-sm-9 col-md-9">
-          <p class="taskName">Task name</p>
+          <p class="taskName">{{ task.name }}</p>
         </div>
         <div class="col-sm-1 col-md-1">
           <input type="checkbox" name="do" value="">
@@ -51,7 +53,7 @@
               <div class="col-sm-12 col-md-12">
                 <div class="collapse multi-collapse" id="description1">
                   <div class="card card-body">
-                    Description Task
+                    {{ task.description }}
                   </div>
               </div>
 
@@ -60,6 +62,8 @@
       </div>
     </div>
 
+    {% endfor %}
+
   </section>
 
 </main>

views/checklists/view.html

@@ -2,30 +2,78 @@
 
 {% block content %}
 <main role="main" class="container">
-  <div class="row">
-    <div class="col-12">
 
-      <h2>View of user #{{ checklist._id }}</h2>
+  <div>
+    <!--Bouton Add -->
+      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add-task-modal" data-whatever="@mdo">Add a new task</button>
 
-      <hr>
+      <div class="dropdown float-right">
+          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Task categories
+          </button>
+          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+            <a class="dropdown-item" href="#">Category 1</a>
+            <a class="dropdown-item" href="#">Category 2</a>
+            <a class="dropdown-item" href="#">Category 3</a>
+          </div>
+      </div>
 
-      <div class="list-group">
+      {% include "partials/modals/add-task.html" %}
+  </div>
 
-        <div class="list-group-item list-group-item-action align-items-start list-group-item-flex">
-          <div class="list-group-item-tools">
-            <a href="/checklists/{{ checklist._id }}/edit" title="Edit"><i class="fas fa-pencil-alt"></i></a>
-            <a href="/checklists/{{ checklist._id }}/delete" onclick="return confirm('Are you sure to delete this checklist?')" title="Delete"><i class="far fa-trash-alt"></i></a>
-          </div>
-          <div class="list-group-item-content">
-            <div class="d-flex w-90 justify-content-between">
-              <h5 class="mb-1">{{ checklist.title }}</h5>
-            </div>
-            <p class="mb-1">{{ checklist.description }}</p>
-          </div>
+  <hr>
+
+  <!--Liste task-->
+  <section class="ListTask">
+
+    {% for task in tasks %}
+
+      <div class="task">
+        <div class="row sameHauteur"> <!--Ligne Nom de la task + checkbox -->
+
+        <div class="col-sm-9 col-md-9">
+          <p class="taskName">{{ task.name }}</p>
+        </div>
+        <div class="col-sm-1 col-md-1">
+          <input type="checkbox" name="do" value="">
+        </div>
+        <div class="col-sm-1 col-md-1"> <!--colonne bouton edit -->
+          <a href="" data-toggle="modal" data-target="#editModal" data-whatever="@mdo"><i class="fas fa-edit"></i></a>
+
+          {% include "partials/modals/edit-task.html" %}
+
+        </div>
+        <div class="col-sm-1 col-md-1"> <!--colonne checkbox -->
+          <a data-toggle="collapse" href="#description1" role="button" aria-expanded="false" aria-controls="description1"><i class="far fa-caret-square-down"></i></a>
         </div>
 
       </div>
+      <div class="row espace"><!--Ligne expend bouton (affiche le descriptif de la task)-->
+
+              <div class="col-sm-12 col-md-12">
+                <div class="collapse multi-collapse" id="description1">
+                  <div class="card card-body">
+                    {{ task.description }}
+                  </div>
+              </div>
+
+            </div>
+
+      </div>
     </div>
-  </div>
-</main><!-- /.container -->
-{% endblock %}
\ No newline at end of file
+
+    {% endfor %}
+
+  </section>
+
+</main>
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script>
+  $("#darkButton").click(function(){
+    if ($("body").hasClass("dark"))
+      $("body").removeClass("dark")
+else
+      $("body").addClass("dark")
+  });
+</script>
+{% endblock %}