From dff2db9db09eddee09464fbe2b21f686adc0fc1e Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Fri, 26 Apr 2024 11:48:06 +0200
Subject: [PATCH] added new task overlay

---
 .../components/add-task/add-task.component.html  | 16 +++++++++++++---
 .../components/add-task/add-task.component.ts    |  3 ++-
 src/app/components/board/board.component.html    |  2 +-
 src/app/components/board/board.component.ts      | 14 +++++++++++++-
 .../components/overlay/overlay.component.html    |  7 +++++++
 .../components/overlay/overlay.component.ts      |  8 +++++++-
 .../task-edit-overlay.component.html             |  5 ++++-
 .../task-edit-overlay.component.ts               |  2 ++
 8 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index 76023ef..25d68ea 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/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'"
diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index cd512fd..083027e 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/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;
diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html
index ea2297f..224fa9d 100644
--- a/src/app/components/board/board.component.html
+++ b/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" />
diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts
index 1a10a44..99835f7 100644
--- a/src/app/components/board/board.component.ts
+++ b/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
diff --git a/src/app/shared/components/overlay/overlay.component.html b/src/app/shared/components/overlay/overlay.component.html
index 5048f59..65b57a7 100644
--- a/src/app/shared/components/overlay/overlay.component.html
+++ b/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>
     }
diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts
index 8ae68b7..b3d085b 100644
--- a/src/app/shared/components/overlay/overlay.component.ts
+++ b/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',
 })
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html
index 7086710..fe9070a 100644
--- a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html
+++ b/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>
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts
index 5b99c29..2060ac8 100644
--- a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.ts
+++ b/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;
         });
       }