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