update btns

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

@@ -9,11 +9,14 @@
   </div>
 
   <form
-    (ngSubmit)="onSubmit(taskForm)"
+    (ngSubmit)="onSubmit(taskForm, overlayData)"
     #taskForm="ngForm"
     onsubmit="return false"
   >
-    <div class="content">
+    <div
+      class="content"
+      [ngClass]="{ 'edit-task-overlay-content': overlayData !== '' }"
+    >
       <div class="left-side">
         <div class="title">
           <p>Title<span class="red-dot">*</span></p>
@@ -257,11 +260,19 @@
         type="button"
         value="Clear"
         (click)="removeTaskData()"
+        [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
+      />
+      <input
+        class="btn-delete"
+        type="button"
+        value="Delete"
+        (click)="deleteTaskData(overlayData)"
+        [ngStyle]="{ display: overlayData !== '' ? 'block' : 'none' }"
       />
       <input
         class="btn-submit"
         type="submit"
-        value="Create Task"
+        value="{{ overlayData !== '' ? 'Update Task' : 'Create Task' }}"
         [disabled]="
           title.invalid ||
           !taskData.title ||

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

@@ -8,6 +8,12 @@ section {
   width: 100%;
 }
 
+.edit-task-overlay-content {
+  height: calc(700px - 128px);
+  padding: 0 6px;
+  overflow-y: auto;
+}
+
 input,
 textarea,
 select {
@@ -54,7 +60,6 @@ p {
 
 .d-none {
   display: none;
-  background-color: var(--white);
 }
 
 /*------------- HEADER -------------*/
@@ -292,6 +297,27 @@ p {
   }
 }
 
+.btn-delete {
+  width: 110px;
+  height: 56px;
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  color: var(--red);
+  background-color: var(--white);
+  border: 1px solid var(--red);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    color: var(--white);
+    background-color: var(--red);
+    border-color: var(--black);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+
 /*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: 1250px) {

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

@@ -5,6 +5,7 @@ import { AssignedComponent } from './assigned/assigned.component';
 import { User } from '../../interfaces/user.interface';
 import { FirebaseService } from '../../services/firebase.service';
 import { Task } from '../../interfaces/task.interface';
+import { OverlayService } from '../../services/overlay.service';
 
 @Component({
   selector: 'app-add-task',
@@ -17,7 +18,6 @@ export class AddTaskComponent {
   @ViewChild('title', { static: true }) titleField!: NgModel;
   @ViewChild('description', { static: true }) descriptionField!: NgModel;
   @ViewChild('category', { static: true }) categoryField!: NgModel;
-  @Input() task: string = '';
   @Input() overlayData: string = '';
 
   currentDate: string = new Date().toISOString().split('T')[0];
@@ -28,7 +28,10 @@ export class AddTaskComponent {
   searchInput: boolean = false;
   filteredUsers: User[] = [];
 
-  constructor(public firebaseService: FirebaseService) {}
+  constructor(
+    public firebaseService: FirebaseService,
+    private overlayService: OverlayService
+  ) {}
 
   taskData: Task = {
     title: '',
@@ -48,6 +51,7 @@ export class AddTaskComponent {
   }
 
   loadEditTaskData() {
+    console.log(this.overlayData);
     if (this.overlayData !== '') {
       const taskData = this.getTaskData(this.overlayData)[0];
       this.taskData.title = taskData.title;
@@ -59,6 +63,7 @@ export class AddTaskComponent {
       this.taskData.subtasksDone = taskData.subtasksDone;
       this.taskData.assigned = taskData.assigned;
       this.taskData.date = taskData.date;
+      console.log(this.overlayData);
     }
   }
 
@@ -149,6 +154,10 @@ export class AddTaskComponent {
     this.clearFormData();
   }
 
+  closeOverlay() {
+    this.overlayService.setOverlayData('', '');
+  }
+
   untouchedFormFields() {
     this.titleField.control.markAsUntouched();
     this.descriptionField.control.markAsUntouched();
@@ -165,14 +174,20 @@ export class AddTaskComponent {
     this.taskData.subtasksDone = [];
   }
 
-  onSubmit(ngForm: NgForm) {
+  onSubmit(ngForm: NgForm, overlayData: string) {
     if (ngForm.submitted && ngForm.form.valid) {
-      const { id, ...taskWithoutId } = this.taskData;
-      this.firebaseService.addNewTask(taskWithoutId);
-      this.removeTaskData();
+      if (overlayData === '') {
+        const { id, ...taskWithoutId } = this.taskData;
+        this.firebaseService.addNewTask(taskWithoutId);
+        this.removeTaskData();
+      } else {
+        this.closeOverlay();
+      }
     }
   }
 
+  deleteTaskData(overlayData: string) {}
+
   @HostListener('document:click', ['$event'])
   checkOpenNavbar(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;

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

@@ -2,7 +2,5 @@
   <div class="header">
     <app-btn-close (click)="closeDialog()"></app-btn-close>
   </div>
-  <div class="content">
-    <app-add-task [task]="'Edit'" [overlayData]="overlayData"></app-add-task>
-  </div>
+  <app-add-task [overlayData]="overlayData"></app-add-task>
 </section>

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

@@ -11,12 +11,6 @@ section {
   justify-content: right;
 }
 
-.content {
-  height: calc(700px - 48px);
-  padding: 0 6px;
-  overflow-y: auto;
-}
-
 input,
 textarea,
 select {