devsforge · shorodilov · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024 · Jan 15, 2024
diff --git a/src/index.js b/src/index.js
@@ -8,3 +8,5 @@
 import "bootstrap-icons/font/bootstrap-icons.scss"
 import "bootstrap/scss/bootstrap.scss"
 import * as bootstrap from "bootstrap"
+
+import "./scss/list.scss"
diff --git a/src/scss/list.scss b/src/scss/list.scss
@@ -0,0 +1,46 @@
+// task list view stylesheet
+
+$list-img-max-size: 5rem;
+
+.task {
+  [aria-label=TaskAssignee] {
+    img.avatar {
+      max-height: $list-img-max-size;
+      max-width: $list-img-max-size;
+      margin-bottom: 1rem;
+    }
+  }
+
+  [aria-label=TaskDetails] {
+    div:first-of-type {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  [aria-label=TaskActions] {
+    .disabled {
+      pointer-events: none;
+      color: var(--bs-secondary-color);
+    }
+  }
+
+  // action buttons
+  [aria-label=complete] {
+    color: var(--bs-success);
+  }
+
+  [aria-label=reopen] {
+    color: var(--bs-warning);
+  }
+
+  [aria-label=delete] {
+    color: var(--bs-danger);
+  }
+}
+
+.task[data-task-completed=true] {
+  .task-detail-ref {
+    color: var(--bs-secondary-color) !important;
+    text-decoration: line-through !important;
+  }
+}
diff --git a/src/views/_template.hbs → src/views/list_view.hbs b/src/views/_template.hbs → src/views/list_view.hbs
@@ -1,18 +1,19 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta name="description" content="Task tracker templates package - EDU Python course">
   <meta name="author" content="Serhii Horodilov <sgorodil@gmail.com>">
-  <title>{{title}} | {{site}}</title>
+  <title>{{title}} | Task Tracker</title>
 </head>
 <body>
+{{! TODO: add header/navbar }}
 <div class="container">
   <div class="row justify-content-center">
-
+    {{>partials/list_main}}
   </div>
 </div>
 </body>

diff --git a/src/views/partials/list_main.hbs b/src/views/partials/list_main.hbs
@@ -0,0 +1,74 @@
+<main class="col col-md-10 col-lg-9">
+  <div class="card shadow">
+    <div class="card-header d-flex flex-row justify-content-center">
+      <h1 class="card-title h3 text-capitalize mx-auto my-2"><i class="bi bi-list-task"></i>&nbsp;task list</h1>
+    </div>
+    <div class="card-body">
+      <table class="table">
+        <caption class="visually-hidden">task list</caption>
+        <thead>
+        <tr>
+          <th class="col col-3" scope="col">Assignee</th>
+          <th class="col col-8" scope="col">Task Summary</th>
+          <th class="col d-flex flex-row justify-content-center" scope="col">Actions</th>
+        </tr>
+        </thead>
+        <tbody id="taskContainer">
+        {{! repeating tasks block }}
+        {{>list_task
+            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            summary="Shield at the holodeck was the energy of assimilation, lowered to a chemical c-beam."
+            description="The creature is more transformator now than starship. solid and always quirky.
+            energy at the wormhole was the life of ellipse, grabed to a mysterious proton.
+            adventure at the space station was the flight of honor, translated to a unrelated hur'q.
+            Mermaids reproduce from pressures like sub-light hur'qs?"
+            assignee_image="https://i.pravatar.cc/?u=DoraHeadstrong@dayrep.com"
+            assignee_first_name="Dora"
+            assignee_last_name="Headstrong"
+            completed=false
+            can_edit=false
+        }}
+        {{>list_task
+            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            summary="Sensor at the universe was the pattern of love, empowered to a futile alien."
+            description="The nanomachine is more admiral now than processor. senior and patiently dead.
+            pattern at the center was the death of attitude, loved to a biological ship.
+            sensor at the space station was the assimilation of resistance, destroyed to an ancient crew.
+            The collective admiral finally manifests the planet?"
+            assignee_image="https://i.pravatar.cc/?u=PippinSackville-Baggins@jourrapide.com"
+            assignee_first_name="Pippin"
+            assignee_last_name="Sackville-Baggins"
+            completed=false
+            can_edit=true
+        }}
+        {{>list_task
+            pk="a76e9fac-f8ca-45ca-ae57-063459443ff0"
+            summary="Flight at the ready room was the vision of alignment, empowered to a quirky vogon."
+            description="The particle is more creature now than transformator. virtual and rudely lunar.
+            starlight travel at the ready room was the powerdrain of faith, evacuated to a most unusual moon.
+            courage at the alpha quadrant was the ionic cannon of tragedy, invaded to a modern space suit.
+            The seismic admiral patiently fights the proton?"
+            assignee_image="https://i.pravatar.cc/?u=TobyMugwort@armyspy.com"
+            assignee_first_name="Toby"
+            assignee_last_name="Mugwort"
+            completed=true
+            can_edit=true
+        }}
+        </tbody>
+      </table>
+    </div>
+    <div class="card-footer d-flex flex-row justify-content-center">
+      <nav aria-label="TaskPagination">
+        <ul class="pagination">
+          <li class="page-item disabled"><a href="" class="page-link"><i class="bi bi-chevron-left"></i></a></li>
+          <li class="page-item active"><a href="" class="page-link">1</a></li>
+          <li class="page-item"><a href="" class="page-link">2</a></li>
+          <li class="page-item"><a href="" class="page-link">3</a></li>
+          <li class="page-item"><a href="" class="page-link">4</a></li>
+          <li class="page-item"><a href="" class="page-link">5</a></li>
+          <li class="page-item"><a href="" class="page-link"><i class="bi bi-chevron-right"></i></a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</main>
diff --git a/src/views/partials/list_task.hbs b/src/views/partials/list_task.hbs
@@ -0,0 +1,26 @@
+<tr class="task" id="{{pk}}" data-task-completed="{{completed}}">
+  <td class="align-middle" aria-label="TaskAssignee">
+    <img src="{{assignee_image}}" alt="avatar" class="rounded-circle shadow avatar">
+    <br>
+    <span class="d-none d-md-inline ms-2 text-nowrap">{{assignee_first_name}} {{assignee_last_name}}</span>
+  </td>
+  <td class="align-middle" aria-label="TaskDetails">
+    <div>
+      <a href="{{DetailView}}" class="text-decoration-none fw-bold task-detail-ref">{{summary}}</a>
+    </div>
+    <p class="d-none d-lg-block fst-italic text-muted">{{description}}</p>
+  </td>
+  <td class="align-middle" aria-label="TaskActions">
+    <div class="d-flex flex-row justify-content-between align-items-center">
+      {{#if completed}}
+        <i class="bi bi-arrow-repeat{{#unless can_edit}} disabled{{/unless}}" role="button"
+           data-task-target="{{pk}}" aria-label="reopen"></i> {{! TODO: patch-status ? }}
+      {{else}}
+        <i class="bi bi-check-lg{{#unless can_edit}} disabled{{/unless}}" role="button"
+           data-task-target="{{pk}}" aria-label="complete"></i> {{! TODO: patch-status? }}
+      {{/if}}
+      <i class="bi bi-trash{{#unless can_edit}} disabled{{/unless}}" role="button"
+         data-task-target="{{pk}}" aria-label="delete"></i>
+    </div>
+  </td>
+</tr>
diff --git a/webpack.config.js b/webpack.config.js
@@ -30,8 +30,11 @@ module.exports = {
     plugins: [
         new MiniCSSExtractPlugin({filename:"css/main.min.css"}),
         new HTMLWebpackPlugin({
-            template: path.resolve(__dirname, "src/views/_template.hbs"),
-            filename: "index.html"
+            template: path.resolve(__dirname, "src/views/list_view.hbs"),
+            filename: "tasks/task_list.html",
+            templateParameters: {
+                title: "Tasks List",
+            }
         })
     ],
     module: {