added new task overlay

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

@@ -18,7 +18,7 @@
       class="content"
       [ngClass]="{
         'edit-task-overlay-content': !overlayMobile && overlayData !== '',
-        'edit-task-overlay-content-mobile': overlayMobile && overlayData !== '',
+        'edit-task-overlay-content-mobile': overlayMobile && overlayData !== '' && overlayType === 'addTaskOverlay',
       }"
     >
       <div class="left-side">
@@ -284,14 +284,24 @@
         [type]="'button'"
         [value]="'Clear'"
         [img]="'close'"
-        [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
+        [ngStyle]="{
+          display:
+            overlayData !== '' || overlayType === 'addTaskOverlay'
+              ? 'none'
+              : 'block'
+        }"
         (click)="removeTaskData()"
       ></app-form-btn>
       <app-form-btn
         [class]="'btn-delete'"
         [type]="'button'"
         [value]="'Delete'"
-        [ngStyle]="{ display: overlayData !== '' ? 'block' : 'none' }"
+        [ngStyle]="{
+          display:
+            overlayData !== '' && overlayType !== 'addTaskOverlay'
+              ? 'block'
+              : 'none'
+        }"
       ></app-form-btn>
       <app-form-btn
         [class]="'btn-submit'"

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

@@ -21,6 +21,7 @@ export class AddTaskComponent {
   @ViewChild('description', { static: true }) descriptionField!: NgModel;
   @ViewChild('category', { static: true }) categoryField!: NgModel;
   @Input() overlayData: string = '';
+  @Input() overlayType: string = '';
   @Input() overlayMobile: boolean = false;
 
   currentDate: string = new Date().toISOString().split('T')[0];
@@ -71,7 +72,7 @@ export class AddTaskComponent {
   }
 
   loadEditTaskData() {
-    if (this.overlayData !== '') {
+    if (this.overlayData !== '' && this.overlayType !== 'newTaskOverlay') {
       const taskData = this.getTaskData(this.overlayData)[0];
       this.taskData.title = taskData.title;
       this.taskData.description = taskData.description;

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

@@ -28,7 +28,7 @@
         >
         <span class="line"></span>
       </div>
-      <button class="btn" type="submit">
+      <button class="btn" type="submit" (click)="addNewTaskOverlay()">
         <div class="btn-inside">
           <span>Add Task</span>
           <img src="./../../../assets/img/board/add_white.svg" alt="check" />

src/app/components/board/board.component.ts

@@ -5,6 +5,8 @@ import { TaskComponent } from './task/task.component';
 import { TaskEmptyComponent } from './task/task-empty/task-empty.component';
 import { FormsModule } from '@angular/forms';
 import { FirebaseService } from '../../services/firebase.service';
+import { OverlayService } from '../../services/overlay.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-board',
@@ -16,7 +18,9 @@ import { FirebaseService } from '../../services/firebase.service';
 export class BoardComponent {
   constructor(
     public dragDropService: DragDropService,
-    private firebaseService: FirebaseService
+    public overlayService: OverlayService,
+    private firebaseService: FirebaseService,
+    private router: Router
   ) {}
   searchValue: string = '';
   searchInput: boolean = false;
@@ -27,6 +31,14 @@ export class BoardComponent {
     });
   }
 
+  addNewTaskOverlay() {
+    if (window.innerWidth >= 650) {
+      this.overlayService.setOverlayData('newTaskOverlay', 'none');
+    } else {
+      this.router.navigate(['/add-task']);
+    }
+  }
+
   getTaskStatus(status: string) {
     if (this.updateSearchInput()) {
       return this.firebaseService

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

@@ -9,6 +9,13 @@
     } @if (overlayType === "taskOverlayEdit") {
     <app-task-edit-overlay
       [overlayData]="overlayData"
+      [overlayType]="overlayType"
+      (closeDialogEmitter)="onCloseOverlay($event)"
+    ></app-task-edit-overlay>
+    } @if (overlayType === "newTaskOverlay") {
+    <app-task-edit-overlay
+      [overlayData]="overlayData"
+      [overlayType]="overlayType"
       (closeDialogEmitter)="onCloseOverlay($event)"
     ></app-task-edit-overlay>
     }

src/app/shared/components/overlay/overlay.component.ts

@@ -14,11 +14,17 @@ import { TaskOverlayComponent } from './task-overlay/task-overlay.component';
 import { FirebaseService } from '../../../services/firebase.service';
 import { TaskEditOverlayComponent } from './task-edit-overlay/task-edit-overlay.component';
 import { ActivatedRoute } from '@angular/router';
+import { AddTaskComponent } from '../../../components/add-task/add-task.component';
 
 @Component({
   selector: 'app-overlay',
   standalone: true,
-  imports: [CommonModule, TaskOverlayComponent, TaskEditOverlayComponent],
+  imports: [
+    CommonModule,
+    TaskOverlayComponent,
+    TaskEditOverlayComponent,
+    AddTaskComponent,
+  ],
   templateUrl: './overlay.component.html',
   styleUrl: './overlay.component.scss',
 })

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

@@ -3,8 +3,9 @@
   overlay: !overlayMobile,
   'overlay-mobile': overlayMobile,
 }"
-  *ngIf="overlayData !== '' && getTaskData(overlayData).length > 0"
 >
+  @if (overlayType === 'newTaskOverlay' || (overlayData !== '' &&
+  getTaskData(overlayData).length > 0)) {
   <div class="header">
     @if (overlayMobile) {
     <app-btn-back></app-btn-back>
@@ -14,6 +15,8 @@
   </div>
   <app-add-task
     [overlayData]="overlayData"
+    [overlayType]="overlayType"
     [overlayMobile]="overlayMobile"
   ></app-add-task>
+  }
 </section>

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

@@ -27,6 +27,7 @@ import { BtnBackComponent } from '../../buttons/btn-back/btn-back.component';
 })
 export class TaskEditOverlayComponent {
   @Input() overlayData: string = '';
+  @Input() overlayType: string = '';
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
   overlayMobile: boolean = false;
@@ -42,6 +43,7 @@ export class TaskEditOverlayComponent {
       if (this.route.params.subscribe()) {
         this.route.params.subscribe((params) => {
           this.overlayData = params['id'];
+          this.overlayType = this.overlayType;
           this.overlayMobile = true;
         });
       }