From d780172e7ec1032f69881fce0d87b8e113cbb2ca Mon Sep 17 00:00:00 2001 From: Maxime Rumpler <maxime.rumpler@etu.unistra.fr> Date: Wed, 17 Jan 2024 12:27:15 +0100 Subject: [PATCH 1/3] feat: starting to implement dependencies in the task model --- src/models/Task.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/models/Task.js b/src/models/Task.js index 53755a0..14327c7 100644 --- a/src/models/Task.js +++ b/src/models/Task.js @@ -18,6 +18,7 @@ * @property {string} color * @property {string[]} tags * @property {string | null} assign + * @property {string[]} dependencies */ /** @@ -89,6 +90,11 @@ export class Task { */ #tags = [] + /** + * @type {string[]} + */ + #dependencies = [] + /** * * @param {TaskOptions} options @@ -214,6 +220,10 @@ export class Task { return this.#tags } + get dependencies() { + return this.#dependencies + } + set listId(listId) { this.#listId = listId } @@ -234,6 +244,7 @@ export class Task { this.#endDate = task.endDate ?? this.#endDate this.#color = task.color ?? this.#color this.#tags = task.tags ?? this.#tags + this.#dependencies = task.dependencies ?? this.#dependencies this.#assign = task.assign ?? this.#assign this.#notifyObservers() } @@ -259,6 +270,27 @@ export class Task { } } + /** + * Add a tag to the list with the given name. + * @param {string} taskId + */ + addDependency(taskId) { + this.#dependencies.push(taskId) + this.#notifyObservers() + } + + /** + * Remove a tag from the list with the given name. + * @param {string} taskId + */ + removeDependency(taskId) { + const index = this.#dependencies.indexOf(taskId) + if (index !== -1) { + this.#dependencies.splice(index, 1) + this.#notifyObservers() + } + } + /** * * @param {TaskObserver} observer @@ -300,6 +332,7 @@ export class Task { tags: this.#tags, assign: this.#assign, listId: this.#listId, + dependencies: this.#dependencies, } } @@ -323,6 +356,9 @@ export class Task { for (const tag of task.tags) { instance.addTag(tag) } + for (const taskId of task.dependencies) { + instance.addDependency(taskId) + } instance.assign = task.assign ?? null return instance } -- GitLab From dc91030f19e152fab4bb613ecd2d44f1267b079d Mon Sep 17 00:00:00 2001 From: Maxime Rumpler <maxime.rumpler@etu.unistra.fr> Date: Fri, 19 Jan 2024 10:21:03 +0100 Subject: [PATCH 2/3] feat: dependencies field can now access all task. most functionnalities still not implemented yet --- src/models/KanbanBoard.js | 11 ++++++++ src/models/Task.js | 4 +-- .../kanban-application/kanban-application.js | 4 +++ src/views/components/task-card/task-card.html | 5 ++++ src/views/components/task-card/task-card.js | 28 +++++++++++++++++++ src/views/components/task-list/task-list.js | 8 ++++++ 6 files changed, 58 insertions(+), 2 deletions(-) diff --git a/src/models/KanbanBoard.js b/src/models/KanbanBoard.js index e1aba5f..c074c03 100644 --- a/src/models/KanbanBoard.js +++ b/src/models/KanbanBoard.js @@ -129,6 +129,17 @@ export class KanbanBoard { task.listId = destinationTaskList.id } + /** + * + * @returns {readonly Task[]} + */ + getAllTasks() { + console.log(this.#taskLists) + return this.#taskLists.flatMap((taskList) => { + return taskList.tasks + }) + } + /** * * @param {KanbanBoardObserver} observer diff --git a/src/models/Task.js b/src/models/Task.js index 14327c7..37b0c8e 100644 --- a/src/models/Task.js +++ b/src/models/Task.js @@ -271,7 +271,7 @@ export class Task { } /** - * Add a tag to the list with the given name. + * Add a dependency to the list with the given id. * @param {string} taskId */ addDependency(taskId) { @@ -280,7 +280,7 @@ export class Task { } /** - * Remove a tag from the list with the given name. + * Remove a dependency from the list with the given id. * @param {string} taskId */ removeDependency(taskId) { diff --git a/src/views/components/kanban-application/kanban-application.js b/src/views/components/kanban-application/kanban-application.js index badb8f3..4a686ad 100644 --- a/src/views/components/kanban-application/kanban-application.js +++ b/src/views/components/kanban-application/kanban-application.js @@ -171,6 +171,10 @@ export class KanbanApplication extends HTMLCustomElement { for (const taskList of this.#kanbanBoard.taskLists) { const taskListHTML = new TaskListDisplay() taskListHTML.setAttribute("active", "false") + taskListHTML.getKanban = (callback) => { + console.log(this.#kanbanBoard) + return callback(this.#kanbanBoard) + } taskListHTML.taskList = taskList taskListHTML.addEventListener("save", this.#handleSave) taskListHTML.addEventListener("drop", async () => { diff --git a/src/views/components/task-card/task-card.html b/src/views/components/task-card/task-card.html index d75b202..aaeb691 100644 --- a/src/views/components/task-card/task-card.html +++ b/src/views/components/task-card/task-card.html @@ -62,6 +62,11 @@ <input type="email" id="task-assign" name="task-assign" class="input" /> </fieldset> + <fieldset> + <label for="task-dependencies">Dependencies </label> + <select id="task-dependencies" name="task-dependencies"></select> + </fieldset> + <div class="actions"> <button is="button-custom" id="button-cancel" type="button"> Cancel diff --git a/src/views/components/task-card/task-card.js b/src/views/components/task-card/task-card.js index 2f4fcd9..b21ae31 100644 --- a/src/views/components/task-card/task-card.js +++ b/src/views/components/task-card/task-card.js @@ -3,6 +3,7 @@ import css from "./task-card.css?inline" import html from "./task-card.html?raw" /** @typedef {import('#/models/Task.js').Task} Task */ +/** @typedef {import('#/models/KanbanBoard.js').KanbanBoard} KanbanBoard */ export class TaskCard extends HTMLCustomElement { /** @@ -80,6 +81,11 @@ export class TaskCard extends HTMLCustomElement { */ #assignHTML + /** + * @type {HTMLSelectElement} + */ + #dependenciesHTML + /** * @type {HTMLInputElement} */ @@ -115,6 +121,11 @@ export class TaskCard extends HTMLCustomElement { */ #deleteTaskButtonHTML + /** + * @type {((callback: (kanban: KanbanBoard) => void ) => void ) | undefined} + */ + getKanban + constructor() { super({ html, css }) @@ -176,6 +187,9 @@ export class TaskCard extends HTMLCustomElement { this.#assignHTML = /** @type {HTMLInputElement} */ ( this.shadowRoot?.getElementById("task-assign") ) + this.#dependenciesHTML = /** @type {HTMLSelectElement} */ ( + this.shadowRoot?.getElementById("task-dependencies") + ) this.#saveEvent = new CustomEvent("save", { bubbles: true, @@ -320,6 +334,7 @@ export class TaskCard extends HTMLCustomElement { for (const tag of this.#cardTagsHTML) { tag.remove() } + this.#dependenciesHTML.innerHTML = "" this.#cardTagsHTML = [] this.#cardHTML.removeEventListener("dragstart", this.handleDragStart) @@ -359,6 +374,19 @@ export class TaskCard extends HTMLCustomElement { this.#cardTagsHTML.push(tagLi) } + if (this.getKanban != null) { + console.log(this.getKanban) + this.getKanban((kanban) => { + const allTasks = kanban.getAllTasks() + for (const task of allTasks) { + const optionElement = document.createElement("option") + optionElement.value = task.id + optionElement.textContent = task.title + this.#dependenciesHTML.appendChild(optionElement) + } + }) + } + this.#cardHTML.addEventListener("click", this.handleClickOpen) this.#modalHTML.addEventListener("click", this.handleClickOutside) this.#formHTML.addEventListener("submit", this.handleSave) diff --git a/src/views/components/task-list/task-list.js b/src/views/components/task-list/task-list.js index 478868f..c62287e 100644 --- a/src/views/components/task-list/task-list.js +++ b/src/views/components/task-list/task-list.js @@ -5,6 +5,7 @@ import { TaskCard } from "#/views/components/task-card/task-card.js" /** @typedef {import('#/models/Task.js').Task} Task */ /** @typedef {import('#/models/TaskList.js').TaskList} TaskList */ +/** @typedef {import('#/models/KanbanBoard.js').KanbanBoard} KanbanBoard */ export class TaskListDisplay extends HTMLCustomElement { /** @@ -32,6 +33,11 @@ export class TaskListDisplay extends HTMLCustomElement { */ #saveEvent + /** + * @type {((callback: (kanban: KanbanBoard) => void ) => void ) | undefined} + */ + getKanban + constructor() { super({ html, css }) @@ -121,8 +127,10 @@ export class TaskListDisplay extends HTMLCustomElement { this.#renderCleanUp() this.#titleHTML.textContent = this.#taskList.title + for (const task of this.#taskList.tasks) { const taskCard = new TaskCard() + taskCard.getKanban = this.getKanban taskCard.setAttribute("is-dragging", "false") taskCard.task = task taskCard.addEventListener("save", this.#handleSave) -- GitLab From 9089d6f7390e6ef6ed2d2f1242a1d803fc8adef9 Mon Sep 17 00:00:00 2001 From: Maxime RICHARD <maxime.richard2@etu.unistra.fr> Date: Fri, 19 Jan 2024 15:36:49 +0100 Subject: [PATCH 3/3] feat: task test --- src/models/tests/Task.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/models/tests/Task.test.js b/src/models/tests/Task.test.js index b0069b2..5283a3b 100644 --- a/src/models/tests/Task.test.js +++ b/src/models/tests/Task.test.js @@ -185,6 +185,7 @@ describe("Task", () => { listId: "list-id", note: null, assign: null, + dependencies: [], } // Act - When @@ -220,6 +221,7 @@ describe("Task", () => { assign: "Sample assign", note: null, listId: "list-id", + dependencies: [], } const task = new Task({ title: taskJSON.title, -- GitLab