update subtasks on firebase & design subtasks

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) => {

src/app/shared/components/overlay/task-overlay/task-overlay.component.html

@@ -10,46 +10,76 @@
     </div>
     <app-btn-close (click)="sendMessage()"></app-btn-close>
   </div>
-  <div class="headline">{{ getTask(overlayData)[0].title }}</div>
+  <div class="content">
-  <div class="description">
+    <div class="headline">{{ getTask(overlayData)[0].title }}</div>
-    {{ getTask(overlayData)[0].description }}
+    <div class="description">
-  </div>
+      {{ getTask(overlayData)[0].description }}
-  <div class="date">
+    </div>
-    <p>Due date:</p>
+    <div class="date">
-    {{ timeConverter(getTask(overlayData)[0].date) }}
+      <p>Due date:</p>
-  </div>
+      {{ timeConverter(getTask(overlayData)[0].date) }}
-  <div class="priority">
+    </div>
-    <p>Priority:</p>
+    <div class="priority">
-    {{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }}
+      <p>Priority:</p>
-    <div class="priority-bg prio-{{ getTask(overlayData)[0].priority }}"></div>
+      {{ capitalizeFirstLetter(getTask(overlayData)[0].priority) }}
-  </div>
+      <div
-  <div class="assigned">
+        class="priority-bg prio-{{ getTask(overlayData)[0].priority }}"
-    <p>Assigned to:</p>
+      ></div>
-    @for (user of getTask(overlayData)[0].assigned; track user; let index =
+    </div>
-    $index) {
+    <div class="assigned">
-    <div class="content">
+      <p>Assigned to:</p>
-      <div
+      @for (user of getTask(overlayData)[0].assigned; track user) {
-        class="circle"
+      <div class="users">
-        [ngStyle]="{
+        <div
-          'background-color': firebaseService.getUserDetails(user, 'color')
+          class="circle"
-        }"
+          [ngStyle]="{
-      >
+            'background-color': firebaseService.getUserDetails(user, 'color')
-        <div class="initials">
+          }"
-          {{ firebaseService.getUserDetails(user, "initials") }}
+        >
-        </div>
+          <div class="initials">
-      </div>
+            {{ firebaseService.getUserDetails(user, "initials") }}
-      <div class="details">
+          </div>
-        <div class="name">
+        </div>
-          <p>
+        <div class="details">
-            {{ firebaseService.getUserDetails(user, "firstName") }}
+          <div class="name">
-          </p>
+            <p>
-          <span>,&nbsp;</span>
+              {{ firebaseService.getUserDetails(user, "firstName") }}
-          <p class="last-name">
+            </p>
-            {{ firebaseService.getUserDetails(user, "lastName") }}
+            <span>,&nbsp;</span>
-          </p>
+            <p class="last-name">
-        </div>
+              {{ firebaseService.getUserDetails(user, "lastName") }}
-      </div>
+            </p>
+          </div>
+        </div>
+      </div>
+      }
+    </div>
+    <div class="subtasks">
+      <p>Subtasks:</p>
+      @for (subtask of getTask(overlayData)[0].subtasksTitle; track subtask; let
+      i = $index) {
+      <div
+        class="single-subtask"
+        (click)="
+          toggleSubtaskStatus(
+            overlayData,
+            i,
+            getTask(overlayData)[0].subtasksDone,
+            getSubTaskStatus(overlayData, i)
+          )
+        "
+      >
+        <img
+          [src]="
+            getSubTaskStatus(overlayData, i)
+              ? './../../../../../assets/img/board/check-btn-checked.svg'
+              : './../../../../../assets/img/board/check-btn-unchecked.svg'
+          "
+          alt=""
+        />
+        <p>{{ subtask }}</p>
+      </div>
+      }
     </div>
-    }
   </div>
 </section>

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;
+  width: 42px;
-  min-width: 35px;
+  min-width: 42px;
-  height: 35px;
+  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;
+  p {
-  font-weight: 400;
+    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;
+  }
+}

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);
   }

src/assets/img/board/check-btn-checked.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.3882 11V17C20.3882 18.6569 19.045 20 17.3882 20H7.38818C5.73133 20 4.38818 18.6569 4.38818 17V7C4.38818 5.34315 5.73133 4 7.38818 4H15.3882" stroke="#2A3647" stroke-width="2" stroke-linecap="round"/>
+<path d="M8.38818 12L12.3882 16L20.3882 4.5" stroke="#2A3647" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/img/board/check-btn-unchecked.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.38818" y="4" width="16" height="16" rx="3" stroke="#2A3647" stroke-width="2"/>
+</svg>