From da56150d08e02a0dee16a08a421cfa1e0aabd425 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Thu, 18 Apr 2024 10:38:44 +0200 Subject: [PATCH] update subtasks on firebase & design subtasks --- src/app/services/firebase.service.ts | 9 ++ .../task-overlay/task-overlay.component.html | 110 +++++++++++------- .../task-overlay/task-overlay.component.scss | 66 +++++++++-- .../task-overlay/task-overlay.component.ts | 18 +++ src/assets/img/board/check-btn-checked.svg | 4 + src/assets/img/board/check-btn-unchecked.svg | 3 + 6 files changed, 163 insertions(+), 47 deletions(-) create mode 100644 src/assets/img/board/check-btn-checked.svg create mode 100644 src/assets/img/board/check-btn-unchecked.svg diff --git a/src/app/services/firebase.service.ts b/src/app/services/firebase.service.ts index dba5f26..9c4bed8 100644 --- a/src/app/services/firebase.service.ts +++ b/src/app/services/firebase.service.ts @@ -2,6 +2,7 @@ import { Injectable, OnDestroy, inject } from '@angular/core'; import { Firestore, addDoc, + arrayUnion, collection, deleteDoc, doc, @@ -58,6 +59,14 @@ export class FirebaseService implements OnDestroy { }); } + async updateSubTask(taskId: any, array: boolean[]) { + await updateDoc(doc(collection(this.firestore, 'tasks'), taskId), { + subtasksDone: array, + }).catch((err) => { + console.error(err); + }); + } + async addNewTask(task: Task) { await addDoc(collection(this.firestore, 'tasks'), task) .catch((err) => { diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html index a16da36..e6998c9 100644 --- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.html +++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.html @@ -10,46 +10,76 @@ -
{{ getTask(overlayData)[0].title }}
-
- {{ getTask(overlayData)[0].description }} -
-
-

Due date:

- {{ timeConverter(getTask(overlayData)[0].date) }} -
-
-

Priority:

- {{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }} -
-
-
-

Assigned to:

- @for (user of getTask(overlayData)[0].assigned; track user; let index = - $index) { -
-
-
- {{ firebaseService.getUserDetails(user, "initials") }} -
-
-
-
-

- {{ firebaseService.getUserDetails(user, "firstName") }} -

- ,  -

- {{ firebaseService.getUserDetails(user, "lastName") }} -

-
-
+
+
{{ getTask(overlayData)[0].title }}
+
+ {{ getTask(overlayData)[0].description }} +
+
+

Due date:

+ {{ timeConverter(getTask(overlayData)[0].date) }} +
+
+

Priority:

+ {{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }} +
+
+
+

Assigned to:

+ @for (user of getTask(overlayData)[0].assigned; track user) { +
+
+
+ {{ firebaseService.getUserDetails(user, "initials") }} +
+
+
+
+

+ {{ firebaseService.getUserDetails(user, "firstName") }} +

+ ,  +

+ {{ firebaseService.getUserDetails(user, "lastName") }} +

+
+
+
+ } +
+
+

Subtasks:

+ @for (subtask of getTask(overlayData)[0].subtasksTitle; track subtask; let + i = $index) { +
+ +

{{ subtask }}

+
+ }
- }
diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss index e2cefcc..c0646d2 100644 --- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss +++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.scss @@ -9,6 +9,7 @@ section { .header { display: flex; justify-content: space-between; + margin-bottom: 32px; } .category { @@ -23,10 +24,14 @@ section { text-shadow: 1px 1px 2px var(--black); } +.content { + height: calc(700px - 72px); + overflow-y: auto; +} + .headline { font-size: 61px; font-weight: 700; - margin-top: 32px; } .description { @@ -35,6 +40,8 @@ section { margin-top: 32px; } +// DATE + .date { display: flex; margin-top: 32px; @@ -49,6 +56,8 @@ section { } } +// PRIORITY + .priority { display: flex; align-items: center; @@ -98,7 +107,7 @@ section { } } -.content { +.users { display: flex; align-items: center; padding: 12px; @@ -108,9 +117,9 @@ section { display: flex; justify-content: center; align-items: center; - width: 35px; - min-width: 35px; - height: 35px; + width: 42px; + min-width: 42px; + height: 42px; border-radius: 100%; border: 2px solid var(--white); .initials { @@ -134,11 +143,54 @@ section { align-items: center; overflow: hidden; white-space: nowrap; - font-size: 18px; - font-weight: 400; + p { + font-size: 20px; + font-weight: 400; + margin: 0; + } } .last-name { overflow: hidden; text-overflow: ellipsis; } + +// SUBTASKS + +.subtasks { + margin-top: 32px; + overflow-y: auto; + p { + color: var(--very-dark-gray); + font-size: 20px; + font-weight: 400; + margin-bottom: 12px; + } +} + +.single-subtask { + display: flex; + align-items: center; + width: fit-content; + margin-left: 14px; + padding: 6px 12px; + cursor: pointer; + p { + font-size: 20px; + font-weight: 400; + margin: 0 0 0 18px; + padding-right: 12px; + } + &:hover { + border-radius: 12px; + background-color: var(--light-gray); + img { + filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg) + brightness(92%) contrast(92%); + } + } + img { + width: 24px; + height: 24px; + } +} diff --git a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts index 9b468d5..74c3fa1 100644 --- a/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts +++ b/src/app/shared/components/overlay/task-overlay/task-overlay.component.ts @@ -31,6 +31,24 @@ export class TaskOverlayComponent { .filter((task) => task.id === taskId); } + getSubTaskStatus(taskId: string, index: number) { + const subtask = this.firebaseService + .getAllTasks() + .filter((task) => task.id === taskId); + + return subtask[0].subtasksDone[index]; + } + + toggleSubtaskStatus( + taskId: string, + index: number, + array: boolean[], + status: boolean + ) { + status ? (array[index] = false) : (array[index] = true); + this.firebaseService.updateSubTask(taskId, array); + } + capitalizeFirstLetter(data: string) { return data.charAt(0).toUpperCase() + data.slice(1); } diff --git a/src/assets/img/board/check-btn-checked.svg b/src/assets/img/board/check-btn-checked.svg new file mode 100644 index 0000000..e7d1293 --- /dev/null +++ b/src/assets/img/board/check-btn-checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/board/check-btn-unchecked.svg b/src/assets/img/board/check-btn-unchecked.svg new file mode 100644 index 0000000..967a4a5 --- /dev/null +++ b/src/assets/img/board/check-btn-unchecked.svg @@ -0,0 +1,3 @@ + + +