From 97d8a8ebc39c85db805c8bd1eb9ed6da40d734c5 Mon Sep 17 00:00:00 2001
From: Maxime Delporte <maxime@civiterra.fr>
Date: Tue, 22 Apr 2025 06:13:12 -0300
Subject: [PATCH] Adding 'Add Task' feature. Create a task-content model for
 better understanding.

---
 .../tasks/new-task/new-task.component.html    | 10 +++++-----
 src/app/tasks/new-task/new-task.component.ts  | 20 ++++++++++++++++++-
 src/app/tasks/new-task/task-content.model.ts  |  5 +++++
 src/app/tasks/tasks.component.html            |  5 ++++-
 src/app/tasks/tasks.component.ts              | 17 ++++++++++++++++
 5 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 src/app/tasks/new-task/task-content.model.ts

diff --git a/src/app/tasks/new-task/new-task.component.html b/src/app/tasks/new-task/new-task.component.html
index 57dc8af..4a31962 100644
--- a/src/app/tasks/new-task/new-task.component.html
+++ b/src/app/tasks/new-task/new-task.component.html
@@ -1,24 +1,24 @@
 <div class="backdrop" (click)="onCancel()"></div>
 <dialog open>
   <h2>Add Task</h2>
-  <form>
+  <form (ngSubmit)="onSubmit()">
     <p>
       <label for="title">Title</label>
-      <input type="text" id="title" name="title" />
+      <input type="text" id="title" name="title" [(ngModel)]="enteredTitle" />
     </p>
 
     <p>
       <label for="summary">Summary</label>
-      <textarea id="summary" rows="5" name="summary"></textarea>
+      <textarea id="summary" rows="5" name="summary" [(ngModel)]="enteredSummary"></textarea>
     </p>
 
     <p>
       <label for="due-date">Due Date</label>
-      <input type="date" id="due-date" name="due-date" />
+      <input type="date" id="due-date" name="due-date" [(ngModel)]="enteredDate" />
     </p>
 
     <p class="actions">
-      <button type="button" (click)="onCancel()" >Cancel</button>
+      <button type="button" (click)="onCancel()">Cancel</button>
       <button type="submit">Create</button>
     </p>
   </form>
diff --git a/src/app/tasks/new-task/new-task.component.ts b/src/app/tasks/new-task/new-task.component.ts
index 326a5d5..05fa6ae 100644
--- a/src/app/tasks/new-task/new-task.component.ts
+++ b/src/app/tasks/new-task/new-task.component.ts
@@ -1,15 +1,33 @@
 import {Component, EventEmitter, Output} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {Task} from '../../task/task.model';
+import {TaskContent} from './task-content.model';
 
 @Component({
   selector: 'app-new-task',
-  imports: [],
+  imports: [
+    FormsModule
+  ],
   templateUrl: './new-task.component.html',
   styleUrl: './new-task.component.css'
 })
 export class NewTaskComponent {
   @Output() cancel = new EventEmitter<void>();
+  @Output() add = new EventEmitter<TaskContent>();
+  enteredTitle = '';
+  enteredSummary = '';
+  enteredDate = '';
 
   onCancel() {
     this.cancel.emit();
   }
+
+  onSubmit() {
+    let taskContent: TaskContent = {
+      title: this.enteredTitle,
+      summary: this.enteredSummary,
+      date: this.enteredDate,
+    };
+    this.add.emit(taskContent);
+  }
 }
diff --git a/src/app/tasks/new-task/task-content.model.ts b/src/app/tasks/new-task/task-content.model.ts
new file mode 100644
index 0000000..a7d7b36
--- /dev/null
+++ b/src/app/tasks/new-task/task-content.model.ts
@@ -0,0 +1,5 @@
+export interface TaskContent {
+  title: string;
+  summary: string;
+  date: string;
+}
diff --git a/src/app/tasks/tasks.component.html b/src/app/tasks/tasks.component.html
index 8f67f7e..7a7c1ee 100644
--- a/src/app/tasks/tasks.component.html
+++ b/src/app/tasks/tasks.component.html
@@ -1,5 +1,8 @@
 @if (isAddingTask) {
-  <app-new-task (cancel)="onCancelAddTask()" />
+  <app-new-task
+    (cancel)="onCancelAddTask()"
+    (add)="onAddTask($event)"
+  />
 }
 
 <section id="tasks">
diff --git a/src/app/tasks/tasks.component.ts b/src/app/tasks/tasks.component.ts
index 7c7c3f6..e2822f9 100644
--- a/src/app/tasks/tasks.component.ts
+++ b/src/app/tasks/tasks.component.ts
@@ -3,6 +3,7 @@ import {User} from '../user/user.model';
 import {Task} from '../task/task.model';
 import {TaskComponent} from '../task/task.component';
 import {NewTaskComponent} from './new-task/new-task.component';
+import {TaskContent} from './new-task/task-content.model';
 
 @Component({
   selector: 'app-tasks',
@@ -54,4 +55,20 @@ export class TasksComponent {
   onCancelAddTask() {
     this.isAddingTask = false;
   }
+
+  onAddTask(taskContent: TaskContent) {
+    let nextTaskId = this.tasks.length + 1;
+    let taskId = 't' + (nextTaskId).toString();
+
+    let task: Task = {
+      id: taskId,
+      userId: this.user.id,
+      title: taskContent.title,
+      summary: taskContent.summary,
+      dueDate: taskContent.date,
+    };
+    this.tasks.push(task);
+
+    this.onCancelAddTask()
+  }
 }