added app-task component to overlay

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

@@ -1,5 +1,10 @@
-<section>
+<section
-  <div class="headline">
+  [ngStyle]="{ 'background-color': overlayData !== '' ? 'var(--white)' : '' }"
+>
+  <div
+    class="headline"
+    [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
+  >
     <div class="title">Add Tasks</div>
   </div>
 

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

@@ -5,7 +5,6 @@ section {
 
 .content {
   display: flex;
-  margin-top: 48px;
   width: 100%;
 }
 
@@ -53,9 +52,15 @@ p {
   }
 }
 
+.d-none {
+  display: none;
+  background-color: var(--white);
+}
+
 /*------------- HEADER -------------*/
 
 .headline {
+  margin-bottom: 48px;
   .title {
     font-size: 61px;
     font-weight: 700;
@@ -86,6 +91,30 @@ p {
   }
 }
 
+.assigned-badget {
+  display: flex;
+  margin-top: 6px;
+  height: 40px;
+}
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  border: 2px solid var(--white);
+  margin-right: 6px;
+  .initials {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--white);
+    text-shadow: 1px 1px 2px var(--black);
+  }
+}
+
 .subtask {
   position: relative;
   .add {
@@ -147,30 +176,6 @@ p {
   }
 }
 
-.assigned-badget {
-  display: flex;
-  margin-top: 6px;
-  height: 40px;
-}
-
-.circle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  min-width: 30px;
-  height: 30px;
-  border-radius: 100%;
-  border: 2px solid var(--white);
-  margin-right: 6px;
-  .initials {
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--white);
-    text-shadow: 1px 1px 2px var(--black);
-  }
-}
-
 /*------------- MIDDLE -------------*/
 
 .middle-spacer {

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

@@ -1,5 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  ViewChild,
+} from '@angular/core';
 import { FormsModule, NgForm, NgModel } from '@angular/forms';
 import { AssignedComponent } from './assigned/assigned.component';
 import { User } from '../../interfaces/user.interface';
@@ -17,6 +23,8 @@ 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];
   dateInPast: boolean = false;
@@ -40,6 +48,37 @@ export class AddTaskComponent {
     date: this.currentDate,
   };
 
+  ngOnInit() {
+    if (this.overlayData !== '') {
+      this.loadEditTaskData();
+    }
+    const storedTaskData = localStorage.getItem('taskData');
+    if (storedTaskData) {
+      this.taskData = JSON.parse(storedTaskData);
+    } else {
+      this.saveTaskData();
+    }
+  }
+
+  loadEditTaskData() {
+    const taskData = this.getTaskData(this.overlayData)[0];
+    this.taskData.title = taskData.title;
+    this.taskData.description = taskData.description;
+    this.taskData.category = taskData.category;
+    this.taskData.status = taskData.status;
+    this.taskData.priority = taskData.priority;
+    this.taskData.subtasksTitle = taskData.subtasksTitle;
+    this.taskData.subtasksDone = taskData.subtasksDone;
+    this.taskData.assigned = taskData.assigned;
+    this.taskData.date = taskData.date;
+  }
+
+  getTaskData(taskId: string) {
+    return this.firebaseService
+      .getAllTasks()
+      .filter((task) => task.id === taskId);
+  }
+
   receiveAssigned(assigned: string[]) {
     this.taskData.assigned = assigned;
   }
@@ -59,15 +98,6 @@ export class AddTaskComponent {
     this.saveTaskData();
   }
 
-  ngOnInit() {
-    const storedTaskData = localStorage.getItem('taskData');
-    if (storedTaskData) {
-      this.taskData = JSON.parse(storedTaskData);
-    } else {
-      this.saveTaskData();
-    }
-  }
-
   updateSearchInput() {
     if (this.searchValue) {
       this.searchInput = this.searchValue.toLowerCase().length > 0;

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

@@ -2,135 +2,7 @@
   <div class="header">
     <app-btn-close (click)="closeDialog()"></app-btn-close>
   </div>
-
+  <div class="content">
-  <form
+    <app-add-task [task]="'Edit'" [overlayData]="overlayData"></app-add-task>
-    (ngSubmit)="onSubmit(taskForm)"
+  </div>
-    #taskForm="ngForm"
-    onsubmit="return false"
-  >
-    <div class="content">
-      <div class="title headline">
-        <p>Title<span class="red-dot">*</span></p>
-        <input
-          type="text"
-          id="title"
-          name="title"
-          #title="ngModel"
-          (input)="saveTaskData()"
-          placeholder="{{
-            taskDataEdit.title ? taskDataEdit.title : 'Enter a description'
-          }}"
-          [(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 class="description headline">
-        <p>Description<span class="red-dot">*</span></p>
-        <textarea
-          id="description"
-          rows="5"
-          name="description"
-          #description="ngModel"
-          minlength="10"
-          (input)="saveTaskData()"
-          placeholder="{{
-            taskDataEdit.description
-              ? taskDataEdit.description
-              : 'Enter a description'
-          }}"
-          [(ngModel)]="taskDataEdit.description"
-          autocomplete="off"
-          required
-        ></textarea>
-        <div class="error-msg">
-          @if (!description.valid && description.touched) {
-          <p>You must enter a description. (min. 10 letters)</p>
-          }
-        </div>
-      </div>
-      <div class="date headline">
-        <p>Due date<span class="red-dot">*</span></p>
-        <input
-          type="date"
-          id="date"
-          name="date"
-          #date="ngModel"
-          (input)="checkDateInput()"
-          placeholder="{{ taskDataEdit.date }}"
-          [(ngModel)]="taskDataEdit.date"
-          autocomplete="off"
-          required
-        />
-        <div class="error-msg">
-          @if (!date.valid && date.touched) {
-          <p>You must enter a date.</p>
-          } @if (dateInPast && date.valid) {
-          <p>The date must be in the future</p>
-          }
-        </div>
-      </div>
-      <div class="priority">
-        <p>Prio</p>
-        <div class="btns">
-          <button
-            type="button"
-            class="btn"
-            [ngClass]="{
-              'btn-active': taskDataEdit.priority == 'urgent'
-            }"
-            [ngStyle]="{
-              'background-color':
-                taskDataEdit.priority == 'urgent' ? 'red' : 'white'
-            }"
-            (click)="tooglePriority('urgent')"
-          >
-            <div class="btn-text">
-              <span>Urgent</span>
-              <img src="./../../../assets/img/urgent.svg" alt="" />
-            </div>
-          </button>
-          <button
-            type="button"
-            class="btn"
-            [ngClass]="{
-              'btn-active': taskDataEdit.priority == 'medium'
-            }"
-            [ngStyle]="{
-              'background-color':
-                taskDataEdit.priority == 'medium' ? 'orange' : 'white'
-            }"
-            (click)="tooglePriority('medium')"
-          >
-            <div class="btn-text">
-              <span>Medium</span>
-              <img src="./../../../assets/img/medium.svg" alt="" />
-            </div>
-          </button>
-          <button
-            type="button"
-            class="btn"
-            [ngClass]="{
-              'btn-active': taskDataEdit.priority == 'low'
-            }"
-            [ngStyle]="{
-              'background-color':
-                taskDataEdit.priority == 'low' ? 'green' : 'white'
-            }"
-            (click)="tooglePriority('low')"
-          >
-            <div class="btn-text">
-              <span>Low</span>
-              <img src="./../../../assets/img/low.svg" alt="" />
-            </div>
-          </button>
-        </div>
-      </div>
-    </div>
-  </form>
 </section>

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

@@ -1,5 +1,5 @@
 section {
-  width: 525px;
+  width: 925px;
   height: 700px;
   padding: 48px 40px 48px 40px;
   border-radius: 30px;
@@ -9,11 +9,11 @@ section {
 .header {
   display: flex;
   justify-content: right;
-  margin-bottom: 32px;
 }
 
 .content {
-  height: calc(700px - 104px);
+  height: calc(700px - 48px);
+  padding: 0 6px;
   overflow-y: auto;
 }
 
@@ -105,3 +105,47 @@ p {
 .btn:hover {
   box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
 }
+
+// ASSIGNED
+
+.assigned {
+  position: relative;
+  .open {
+    position: absolute;
+    top: 55px;
+    right: 20px;
+    width: 14px;
+    height: 7px;
+  }
+  .close {
+    position: absolute;
+    top: 45px;
+    right: 15px;
+    width: 25px;
+    height: 25px;
+  }
+}
+
+.assigned-badget {
+  display: flex;
+  margin-top: 6px;
+  height: 40px;
+}
+
+.circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  border: 2px solid var(--white);
+  margin-right: 6px;
+  .initials {
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--white);
+    text-shadow: 1px 1px 2px var(--black);
+  }
+}

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

@@ -5,100 +5,38 @@ import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
 import { FormsModule, NgForm } from '@angular/forms';
 import { Task } from '../../../../interfaces/task.interface';
 import { CommonModule } from '@angular/common';
+import { User } from '../../../../interfaces/user.interface';
+import { AssignedComponent } from '../../../../components/add-task/assigned/assigned.component';
+import { AddTaskComponent } from '../../../../components/add-task/add-task.component';
 
 @Component({
   selector: 'app-task-edit-overlay',
   standalone: true,
-  imports: [BtnCloseComponent, FormsModule, CommonModule],
+  imports: [
+    BtnCloseComponent,
+    FormsModule,
+    CommonModule,
+    AssignedComponent,
+    AddTaskComponent,
+  ],
   templateUrl: './task-edit-overlay.component.html',
   styleUrl: './task-edit-overlay.component.scss',
 })
-export class TaskEditOverlayComponent implements OnInit {
+export class TaskEditOverlayComponent {
   @Input() overlayData: string = '';
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
-  dateInPast: boolean = false;
-
-  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');
+    localStorage.removeItem('taskData');
-    this.clearFormData();
-  }
-
-  clearFormData() {
-    this.taskDataEdit.title = '';
-    this.taskDataEdit.description = '';
-    this.taskDataEdit.date = '';
-    this.taskDataEdit.category = '';
-    this.taskDataEdit.assigned = [];
-    this.taskDataEdit.subtasksTitle = [];
-    this.taskDataEdit.subtasksDone = [];
-  }
-
-  checkDateInput() {
-    const currentDateForm = this.taskDataEdit.date.replaceAll('-', '');
-    const currentDate = new Date()
-      .toISOString()
-      .split('T')[0]
-      .replaceAll('-', '');
-    currentDateForm < currentDate
-      ? (this.dateInPast = true)
-      : (this.dateInPast = false);
-  }
-
-  tooglePriority(prio: string) {
-    this.taskDataEdit.priority !== prio
-      ? (this.taskDataEdit.priority = prio)
-      : this.taskDataEdit.priority;
-    this.saveTaskData();
-  }
-
-  onSubmit(ngForm: NgForm) {
-    if (ngForm.submitted && ngForm.form.valid) {
-    }
   }
 }