design subtask field & save new subtask

src/app/components/add-task/add-task.component.html

@@ -201,6 +201,35 @@
             }
           </div>
         </div>
+        <div class="subtask">
+          <p>Subtasks</p>
+          <input
+            type="text"
+            id="subtask"
+            name="subtask"
+            #subtask="ngModel"
+            placeholder="Add new subtask"
+            [(ngModel)]="subtaskValue"
+            autocomplete="off"
+          />
+          @if (subtaskValue) {
+          <div class="subtask-btns">
+            <img
+              src="./../../../assets/img/close.svg"
+              alt=""
+              (click)="subtask.reset()"
+            />
+            <span class="line"></span>
+            <img
+              src="./../../../assets/img/add-task/check.svg"
+              alt=""
+              (click)="addSubtask(subtask.value); subtask.reset()"
+            />
+          </div>
+          } @else {
+          <img class="add" src="./../../../assets/img/add.svg" alt="" />
+          }
+        </div>
       </div>
     </div>
     <div class="form-buttons">

src/app/components/add-task/add-task.component.scss

@@ -1,7 +1,6 @@
 section {
   margin: 0;
   background-color: var(--very-light-gray);
-  padding-bottom: 32px;
 }
 
 .content {
@@ -87,6 +86,39 @@ p {
   }
 }
 
+.subtask {
+  position: relative;
+  .add {
+    position: absolute;
+    top: 45px;
+    right: 15px;
+    width: 25px;
+    height: 25px;
+  }
+  .subtask-btns {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 45px;
+    right: 15px;
+    img {
+      width: 25px;
+      height: 25px;
+      cursor: pointer;
+      &:hover {
+        filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
+          brightness(92%) contrast(92%);
+      }
+    }
+    .line {
+      height: 18px;
+      padding: 1px;
+      margin: 0 6px;
+      background-color: var(--light-gray);
+    }
+  }
+}
+
 .assigned-badget {
   display: flex;
   margin-top: 6px;

src/app/components/add-task/add-task.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, HostListener, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
 import { FormsModule, NgForm, NgModel } from '@angular/forms';
 import { AssignedComponent } from './assigned/assigned.component';
 import { User } from '../../interfaces/user.interface';
@@ -21,10 +21,10 @@ export class AddTaskComponent {
   currentDate: string = new Date().toISOString().split('T')[0];
   dateInPast: boolean = false;
   isAssignedOpen: boolean = false;
+  subtaskValue: string = '';
   searchValue: string = '';
   searchInput: boolean = false;
   filteredUsers: User[] = [];
-  parentAssigned: string[] = [];
 
   constructor(public firebaseService: FirebaseService) {}
 
@@ -35,12 +35,18 @@ export class AddTaskComponent {
     priority: 'medium',
     category: '',
     assigned: [],
+    subtasks: [],
   };
 
   receiveAssigned(assigned: string[]) {
     this.taskData.assigned = assigned;
   }
 
+  addSubtask(subtaskName: string) {
+    this.taskData.subtasks.push(subtaskName);
+    this.saveTaskData();
+  }
+
   ngOnInit() {
     const storedTaskData = localStorage.getItem('taskData');
     if (storedTaskData) {

src/app/components/board/board.component.html

@@ -45,7 +45,7 @@
       >
         <div class="headline">
           <span>To do</span
-          ><img src="./../../../assets/img/board/add.svg" alt="add" />
+          ><img src="./../../../assets/img/add.svg" alt="add" />
         </div>
         <div id="todo" class="details">
           @for(task of getTaskStatus("todo"); track task) {
@@ -62,7 +62,7 @@
       >
         <div class="headline">
           <span>In progress</span
-          ><img src="./../../../assets/img/board/add.svg" alt="add" />
+          ><img src="./../../../assets/img/add.svg" alt="add" />
         </div>
         <div id="inprogress" class="details">
           @for(task of getTaskStatus("inprogress"); track task) {
@@ -79,7 +79,7 @@
       >
         <div class="headline">
           <span>Await feedback</span
-          ><img src="./../../../assets/img/board/add.svg" alt="add" />
+          ><img src="./../../../assets/img/add.svg" alt="add" />
         </div>
         <div id="awaitfeedback" class="details">
           @for(task of getTaskStatus("awaitfeedback"); track task) {
@@ -95,8 +95,7 @@
         (drop)="dragDropService.drop($event, 'done')"
       >
         <div class="headline">
-          <span>Done</span
-          ><img src="./../../../assets/img/board/add.svg" alt="add" />
+          <span>Done</span><img src="./../../../assets/img/add.svg" alt="add" />
         </div>
         <div id="done" class="details">
           @for(task of getTaskStatus("done"); track task) {

src/app/interfaces/task-data.interface.ts

@@ -5,4 +5,5 @@ export interface TaskData {
   priority: string;
   category: string;
   assigned: string[];
+  subtasks: string[];
 }

src/assets/img/add-task/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>