added title input & localStorage connection

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

@@ -2,4 +2,31 @@
   <div class="header">
     <app-btn-close (click)="closeDialog()"></app-btn-close>
   </div>
+
+  <form
+    (ngSubmit)="onSubmit(taskForm)"
+    #taskForm="ngForm"
+    onsubmit="return false"
+  >
+    <div class="content">
+      <div class="title">
+        <p>Title<span class="red-dot">*</span></p>
+        <input
+          type="text"
+          id="title"
+          name="title"
+          #title="ngModel"
+          (input)="saveTaskData()"
+          [(ngModel)]="taskDataEdit.title"
+          autocomplete="off"
+          required
+        />
+        <div class="error-msg">
+          @if (!title.valid && title.touched) {
+          <p>You must enter a title.</p>
+          }
+        </div>
+      </div>
+    </div>
+  </form>
 </section>

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss

@@ -11,3 +11,52 @@ section {
   justify-content: right;
   margin-bottom: 32px;
 }
+
+.content {
+  height: calc(700px - 104px);
+  overflow-y: auto;
+}
+
+input,
+textarea,
+select {
+  font-size: 20px;
+  font-weight: 400;
+  border-radius: 10px;
+  border: 1px solid var(--light-gray);
+  padding: 12px 21px;
+  width: calc(100% - 48px);
+  resize: none;
+}
+
+input:invalid,
+textarea:invalid,
+select:invalid {
+  border: 1px dashed red;
+}
+
+input:valid,
+textarea:valid,
+select:valid {
+  border: 1px solid black;
+}
+
+p {
+  font-size: 20px;
+  font-weight: 400;
+  padding-bottom: 6px;
+}
+
+.red-dot {
+  color: var(--light-red);
+}
+
+.error-msg {
+  height: 24px;
+  padding: 6px;
+  p {
+    color: var(--red);
+    font-size: 12px;
+    font-weight: 400;
+  }
+}

src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts

@@ -1,25 +1,83 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FirebaseService } from '../../../../services/firebase.service';
 import { OverlayService } from '../../../../services/overlay.service';
 import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
+import { FormsModule, NgForm } from '@angular/forms';
+import { Task } from '../../../../interfaces/task.interface';
 
 @Component({
   selector: 'app-task-edit-overlay',
   standalone: true,
-  imports: [BtnCloseComponent],
+  imports: [BtnCloseComponent, FormsModule],
   templateUrl: './task-edit-overlay.component.html',
   styleUrl: './task-edit-overlay.component.scss',
 })
-export class TaskEditOverlayComponent {
+export class TaskEditOverlayComponent implements OnInit {
   @Input() overlayData: string = '';
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
+  taskDataEdit: Task = {
+    title: '',
+    description: '',
+    category: '',
+    status: 'todo',
+    priority: 'medium',
+    subtasksTitle: [],
+    subtasksDone: [],
+    assigned: [],
+    date: '',
+  };
+
   constructor(
     public firebaseService: FirebaseService,
     private overlayService: OverlayService
   ) {}
 
+  ngOnInit() {
+    const taskData = this.getTaskData(this.overlayData)[0];
+    this.taskDataEdit.title = taskData.title;
+    this.taskDataEdit.description = taskData.description;
+    this.taskDataEdit.category = taskData.category;
+    this.taskDataEdit.status = taskData.status;
+    this.taskDataEdit.priority = taskData.priority;
+    this.taskDataEdit.subtasksTitle = taskData.subtasksTitle;
+    this.taskDataEdit.subtasksDone = taskData.subtasksDone;
+    this.taskDataEdit.assigned = taskData.assigned;
+    this.taskDataEdit.date = taskData.date;
+  }
+
   closeDialog() {
     this.closeDialogEmitter.emit('');
+    this.removeTaskData();
+  }
+
+  getTaskData(taskId: string) {
+    return this.firebaseService
+      .getAllTasks()
+      .filter((task) => task.id === taskId);
+  }
+
+  saveTaskData() {
+    localStorage.setItem('taskDataEdit', JSON.stringify(this.taskDataEdit));
+  }
+
+  removeTaskData() {
+    localStorage.removeItem('taskDataEdit');
+    this.clearFormData();
+  }
+
+  clearFormData() {
+    this.taskDataEdit.title = '';
+    this.taskDataEdit.description = '';
+    this.taskDataEdit.date = '';
+    this.taskDataEdit.category = '';
+    this.taskDataEdit.assigned = [];
+    this.taskDataEdit.subtasksTitle = [];
+    this.taskDataEdit.subtasksDone = [];
+  }
+
+  onSubmit(ngForm: NgForm) {
+    if (ngForm.submitted && ngForm.form.valid) {
+    }
   }
 }