Allow deleting tasks and changed disk saves to manual, after creation…

…/deletion actions rather than on a timer
Caleb-o · Oct 21, 2023 · 71ea0fe · 71ea0fe
1 parent 5e5da9f
commit 71ea0fe
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -88,6 +88,7 @@ <h1>Error Occured</h1>
                             rows="16"
                         ></textarea>
                         <button id="modal-save-btn">Save</button>
+                        <button id="modal-delete-btn">Delete</button>
                     </div>
                 </div>
             </div>

diff --git a/index.js b/index.js
diff --git a/style.css b/style.css
@@ -51,8 +51,11 @@
     gap: 16px;
 
     padding: 24px 32px;
+    float: none;
 
-    overflow: hidden;
+    white-space: nowrap;
+    overflow-x: scroll;
+    overflow-y: hidden;
 }
 
 .list-heading-text {
@@ -324,6 +327,11 @@
     animation-duration: 0.35s;
 }
 
+#modal-content button {
+    padding: 4px;
+    margin-right: 0.5rem;
+}
+
 /* Add Animation */
 @keyframes animatetop {
     from {

diff --git a/ts-src/api.ts b/ts-src/api.ts
@@ -1,6 +1,6 @@
 import { CardHandler } from './cardhandler';
 import { CardList } from './cardlist';
-import { generateElementsForLoadedData } from './layout';
+import { generateElementsFromLoadedData } from './layout';
 import { Color, DueDate, TagKind, TaskItem } from './task';
 
 interface KanbanBoardData {
@@ -57,7 +57,13 @@ export class API {
             this.cardHandler.push(new CardList(list, listNameToID(list)))
         );
 
-        generateElementsForLoadedData(this);
+        this.cardHandler.setHasDefault();
+
+        generateElementsFromLoadedData(this);
+    }
+
+    public removeTaskItem(item: TaskItem) {
+        this.tasks.delete(item.ID);
     }
 
     public tryAddNewList(): boolean {
@@ -70,6 +76,7 @@ export class API {
 
     public renameTaskList(oldID: string, newID: string) {
         this.cardHandler.renameTaskList(oldID, newID);
+        this.cardHandler.setHasDefault();
     }
 
     public deleteTaskList(identifier: string) {

diff --git a/ts-src/cardhandler.ts b/ts-src/cardhandler.ts
@@ -18,22 +18,30 @@ export class CardHandler {
         this.lists = new Map();
     }
 
-    public push(card: CardList) {
-        this.lists.set(card.Identifier, card);
+    public setHasDefault() {
+        this.hasDefault = this.lists.has('New List');
+    }
+
+    public push(list: CardList) {
+        this.lists.set(list.Identifier, list);
     }
 
     public tryAddNewList(): boolean {
-        if (this.lists.has('New List')) {
+        if (this.hasDefault) {
             return false;
         }
+
         this.lists.set('New List', new CardList('New List', 'new-list'));
+        this.hasDefault = true;
+
         return true;
     }
 
     public removeWithID(identifier: string) {
         for (let [id, list] of this.lists.entries()) {
             if (list.ElementID === identifier) {
                 this.lists.delete(id);
+                this.setHasDefault();
                 return;
             }
         }

diff --git a/ts-src/index.ts b/ts-src/index.ts
@@ -7,15 +7,10 @@ import {
     setupErrorModalLayout,
 } from './layout';
 
-// 30 seconds
-const serialiseInterval = 30 * 1000;
-
 function main() {
     const api = new API();
     api.tryLoadFromLocalStorage();
 
-    setInterval(() => api.serializeToLocalStorage(), serialiseInterval);
-
     setupAddTask(api);
     setupListAddButton(api);
     setupDraggables(api);

diff --git a/ts-src/layout.ts b/ts-src/layout.ts
@@ -13,6 +13,9 @@ export function setupListAddButton(api: API) {
         }
 
         listDiv.insertBefore(listEl, listDiv.children[listDiv.children.length - 1]);
+
+        // Save results to disk
+        api.serializeToLocalStorage();
     };
 }
 
@@ -38,7 +41,6 @@ export function setupModalLayout() {
     colorSelected.value = firstStyle.backgroundColor;
     colorSelected.style.background = firstStyle.backgroundColor;
 
-    // When the user clicks on <span> (x), close the modal
     span.onclick = function () {
         modal.style.display = 'none';
     };
@@ -93,6 +95,7 @@ export function setupNewTaskModalFields(api: API) {
     const taskTitle = document.querySelector('#task-title') as HTMLInputElement;
     const taskDesc = document.querySelector('#task-desc') as HTMLTextAreaElement;
     const saveBtn = document.querySelector('#modal-save-btn') as HTMLButtonElement;
+    const deleteBtn = document.querySelector('#modal-delete-btn') as HTMLButtonElement;
 
     const tagKind = document.querySelector('#kind-option') as HTMLSelectElement;
     tagKind.value = 'prg';
@@ -142,12 +145,18 @@ export function setupNewTaskModalFields(api: API) {
             taskDesc.value
         );
 
+        // Save results to disk
+        api.serializeToLocalStorage();
+
         // Hide modal
         modal.style.display = 'none';
     };
+
+    // Hide delete button when creating new task
+    deleteBtn.style.display = 'none';
 }
 
-export function generateElementsForLoadedData(api: API) {
+export function generateElementsFromLoadedData(api: API) {
     const listDiv = document.querySelector('#task-lists') as HTMLDivElement;
 
     // Generate all list elements
@@ -158,9 +167,6 @@ export function generateElementsForLoadedData(api: API) {
 
     // Generate all task elements
     api.Tasks.forEach((task) => {
-        console.log(task);
-
-        console.log(`Loading '${task.ListID}'`);
         const list = document.querySelector(`#${task.ListID}`) as HTMLDivElement;
         const content = list.querySelector('.list-content') as HTMLDivElement;
         content.appendChild(createTaskItemElement(api, task.Title, task.ID));
@@ -175,6 +181,7 @@ function populateTaskModalFields(api: API, taskID: string) {
     const createdOn = document.querySelector('#created-on') as HTMLElement;
     const taskTitle = document.querySelector('#task-title') as HTMLInputElement;
     const saveBtn = document.querySelector('#modal-save-btn') as HTMLButtonElement;
+    const deleteBtn = document.querySelector('#modal-delete-btn') as HTMLButtonElement;
     const taskDesc = document.querySelector('#task-desc') as HTMLTextAreaElement;
 
     const tagKind = document.querySelector('#kind-option') as HTMLSelectElement;
@@ -201,6 +208,27 @@ function populateTaskModalFields(api: API, taskID: string) {
             colorSelected.style.background,
             taskDesc.value
         );
+
+        // Save results to disk
+        api.serializeToLocalStorage();
+
+        // Hide modal
+        modal.style.display = 'none';
+    };
+
+    deleteBtn.style.display = 'inline';
+    deleteBtn.onclick = () => {
+        // TODO: Add confirmation modal
+
+        api.removeTaskItem(task);
+
+        const listEl = document.querySelector(`#${task.ListID}`) as HTMLElement;
+        const content = listEl.querySelector('.list-content') as HTMLElement;
+        content.removeChild(document.querySelector(`#task-id-${task.ID}`)!);
+
+        // Save results to disk
+        api.serializeToLocalStorage();
+
         // Hide modal
         modal.style.display = 'none';
     };
@@ -274,6 +302,14 @@ function createListWithName(api: API, title: string): HTMLElement {
 
     headerTitle.onchange = (e) => listHeaderChange(el, headerTitle, e, api);
 
+    const listContentZone = document.createElement('div') as HTMLDivElement;
+    el.appendChild(listContentZone);
+
+    listContentZone.setAttribute('value', listID);
+    listContentZone.className = 'list-content';
+
+    setupListDragZone(api, listContentZone);
+
     const deleteSpan = document.createElement('span') as HTMLSpanElement;
     header.appendChild(deleteSpan);
 
@@ -282,24 +318,19 @@ function createListWithName(api: API, title: string): HTMLElement {
     deleteSpan.onclick = (e) => {
         e.preventDefault();
 
-        if (el.children.length > 1) {
+        if (listContentZone.children.length > 0) {
             showErrorModal('Cannot delete list that contains tasks.');
             return;
         }
 
-        api.deleteTaskList(listID);
-
         const listDiv = document.querySelector('#task-lists') as HTMLDivElement;
         listDiv.removeChild(el);
-    };
 
-    const listContentZone = document.createElement('div') as HTMLDivElement;
-    el.appendChild(listContentZone);
-
-    listContentZone.setAttribute('value', listID);
-    listContentZone.className = 'list-content';
+        api.deleteTaskList(listID);
 
-    setupListDragZone(api, listContentZone);
+        // Save results to disk
+        api.serializeToLocalStorage();
+    };
 
     return el;
 }
@@ -322,6 +353,10 @@ function listHeaderChange(el: HTMLElement, self: HTMLInputElement, e: Event, api
     content.setAttribute('value', newID);
 
     api.renameTaskList(self.defaultValue, self.value);
+
     self.defaultValue = self.value;
     el.id = newID;
+
+    // Save results to disk
+    api.serializeToLocalStorage();
 }