From 94652c7ba8c80cc64013bea6ed86bdcfa8b99825 Mon Sep 17 00:00:00 2001
From: Maxime Rumpler <maxime.rumpler@etu.unistra.fr>
Date: Fri, 15 Dec 2023 10:33:49 +0100
Subject: [PATCH 1/2] feat: created the task-list component

---
 src/views/components/index.js                 |  2 +
 .../kanban-application.html                   |  6 +++
 .../task-list.css}                            |  0
 src/views/components/task-list/task-list.html |  5 +++
 src/views/components/task-list/task-list.js   | 42 +++++++++++++++++++
 .../task-list.test.js}                        |  2 +-
 .../components/tasks-list/tasks-list.html     |  5 ---
 src/views/components/tasks-list/tasks-list.js | 13 ------
 8 files changed, 56 insertions(+), 19 deletions(-)
 rename src/views/components/{tasks-list/tasks-list.css => task-list/task-list.css} (100%)
 create mode 100644 src/views/components/task-list/task-list.html
 create mode 100644 src/views/components/task-list/task-list.js
 rename src/views/components/{tasks-list/tasks-list.test.js => task-list/task-list.test.js} (93%)
 delete mode 100644 src/views/components/tasks-list/tasks-list.html
 delete mode 100644 src/views/components/tasks-list/tasks-list.js

diff --git a/src/views/components/index.js b/src/views/components/index.js
index 0c4c7d7..2a425e2 100644
--- a/src/views/components/index.js
+++ b/src/views/components/index.js
@@ -1 +1,3 @@
 import "./kanban-application/kanban-application.js"
+import "./task-card/task-card.js"
+import "./task-list/task-list.js"
diff --git a/src/views/components/kanban-application/kanban-application.html b/src/views/components/kanban-application/kanban-application.html
index 7c3f736..753096b 100644
--- a/src/views/components/kanban-application/kanban-application.html
+++ b/src/views/components/kanban-application/kanban-application.html
@@ -4,4 +4,10 @@
   <button-custom>
     <span slot="content">Click Me</span>
   </button-custom>
+  <task-list id="list1">
+    <span slot="title">Une liste</span>
+  </task-list>
+  <task-list id="list2">
+    <span slot="title">Une autre liste</span>
+  </task-list>
 </section>
diff --git a/src/views/components/tasks-list/tasks-list.css b/src/views/components/task-list/task-list.css
similarity index 100%
rename from src/views/components/tasks-list/tasks-list.css
rename to src/views/components/task-list/task-list.css
diff --git a/src/views/components/task-list/task-list.html b/src/views/components/task-list/task-list.html
new file mode 100644
index 0000000..776aee7
--- /dev/null
+++ b/src/views/components/task-list/task-list.html
@@ -0,0 +1,5 @@
+<section>
+  <h2><slot name="title"></h2>
+  <ul id="task-list" class="task-list">
+  </ul>
+</section>
diff --git a/src/views/components/task-list/task-list.js b/src/views/components/task-list/task-list.js
new file mode 100644
index 0000000..300bb62
--- /dev/null
+++ b/src/views/components/task-list/task-list.js
@@ -0,0 +1,42 @@
+import { HTMLCustomElement } from "#/views/HTMLCustomElement.js"
+import html from "./task-list.html?raw"
+import css from "./task-list.css?inline"
+
+class TaskListDisplay extends HTMLCustomElement {
+  /**
+   * @type {TaskList}
+   */
+  #taskList
+
+  /**
+   * @type {HTMLUListElement|null}
+   */
+  #taskUl
+
+  constructor() {
+    super({ html, css })
+  }
+
+  async connectedCallback() {
+    this.#taskUl = this.shadowRoot.getElementById("task-list")
+    for (const task in this.#taskList.tasks) {
+      const li = document.createElement("li")
+      const taskCard = document.createElement("task-card")
+      taskCard.task = task
+      li.appendChild(taskCard)
+      this.#taskUl.appendChild(li)
+    }
+    await this.#taskList.load()
+    this.render()
+  }
+
+  set taskList(taskList) {
+    this.#taskList = taskList
+  }
+
+  render() {}
+}
+
+if (window.customElements.get("task-list") == null) {
+  window.customElements.define("task-list", TaskListDisplay)
+}
diff --git a/src/views/components/tasks-list/tasks-list.test.js b/src/views/components/task-list/task-list.test.js
similarity index 93%
rename from src/views/components/tasks-list/tasks-list.test.js
rename to src/views/components/task-list/task-list.test.js
index 9d7cdac..dca5963 100644
--- a/src/views/components/tasks-list/tasks-list.test.js
+++ b/src/views/components/task-list/task-list.test.js
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest"
 
-import "./tasks-list.js"
+import "./task-list.js"
 
 describe("<tasks-list />", () => {
   it("should have a title", () => {
diff --git a/src/views/components/tasks-list/tasks-list.html b/src/views/components/tasks-list/tasks-list.html
deleted file mode 100644
index 7ddf579..0000000
--- a/src/views/components/tasks-list/tasks-list.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<section>
-  <ul>
-    <li>Task List</li>
-  </ul>
-</section>
diff --git a/src/views/components/tasks-list/tasks-list.js b/src/views/components/tasks-list/tasks-list.js
deleted file mode 100644
index 499b71a..0000000
--- a/src/views/components/tasks-list/tasks-list.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { HTMLCustomElement } from "#/views/HTMLCustomElement.js"
-import html from "./tasks-list.html?raw"
-import css from "./tasks-list.css?inline"
-
-class TasksList extends HTMLCustomElement {
-  constructor() {
-    super({ html, css })
-  }
-}
-
-if (window.customElements.get("tasks-list") == null) {
-  window.customElements.define("tasks-list", TasksList)
-}
-- 
GitLab


From 607288391e97ba793b794f332fcfe52fe570e75e Mon Sep 17 00:00:00 2001
From: Maxime Rumpler <maxime.rumpler@etu.unistra.fr>
Date: Fri, 15 Dec 2023 11:28:45 +0100
Subject: [PATCH 2/2] fix: slash missing in slot in task-list.html

---
 .../components/kanban-application/kanban-application.html   | 6 ------
 src/views/components/task-list/task-list.html               | 5 ++---
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/views/components/kanban-application/kanban-application.html b/src/views/components/kanban-application/kanban-application.html
index 753096b..7c3f736 100644
--- a/src/views/components/kanban-application/kanban-application.html
+++ b/src/views/components/kanban-application/kanban-application.html
@@ -4,10 +4,4 @@
   <button-custom>
     <span slot="content">Click Me</span>
   </button-custom>
-  <task-list id="list1">
-    <span slot="title">Une liste</span>
-  </task-list>
-  <task-list id="list2">
-    <span slot="title">Une autre liste</span>
-  </task-list>
 </section>
diff --git a/src/views/components/task-list/task-list.html b/src/views/components/task-list/task-list.html
index 776aee7..c860ed3 100644
--- a/src/views/components/task-list/task-list.html
+++ b/src/views/components/task-list/task-list.html
@@ -1,5 +1,4 @@
 <section>
-  <h2><slot name="title"></h2>
-  <ul id="task-list" class="task-list">
-  </ul>
+  <h2><slot name="title" /></h2>
+  <ul id="task-list" class="task-list"></ul>
 </section>
-- 
GitLab