From 2bd96a76d23234d0ca9669ab7cd9d76cdbfd1911 Mon Sep 17 00:00:00 2001
From: Joshua <acciarrijoshua@gmail.com>
Date: Thu, 27 Aug 2020 17:00:33 -0300
Subject: [PATCH 1/4] Add Task with reactive form

---
 src/app/todo-form/todo-form.component.html | 16 ++++++++++------
 src/app/todo-form/todo-form.component.ts   | 22 +++++++++++-----------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html
index ec0ad47..37aff02 100644
--- a/src/app/todo-form/todo-form.component.html
+++ b/src/app/todo-form/todo-form.component.html
@@ -1,10 +1,14 @@
 
-<input type="text" #taskDescription class="add-todo">
 
-<button
-  class="btn btn-primary"
-  (click)="save(taskDescription)">
-  Create
-</button>
+<form [formGroup]="taskForm" (ngSubmit)="saveTask()"> 
+  <input type="text" formControlName="taskDescription">
+  <button 
+    type="submit" 
+    [disabled]="!taskForm.valid"
+    class="btn btn-primary">
+    Create
+  </button>
+</form>
+
 
 
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index 3366020..aaf46bb 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/src/app/todo-form/todo-form.component.ts
@@ -1,24 +1,24 @@
-import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { TodoItem } from '../model/todo-item';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-todo-form',
   templateUrl: './todo-form.component.html',
-  styleUrls: ['./todo-form.component.scss']
+  styleUrls: ['./todo-form.component.scss'],
 })
 export class TodoFormComponent {
+  taskForm = new FormGroup({
+    taskDescription: new FormControl('', Validators.required),
+  });
 
-  @Output() add = new EventEmitter();
-
-  save(description){
-    if(!description.value || description.value === '') {
-      return;
-    }
+  saveTask() {
     let task = new TodoItem();
-    task.description = description.value;
+    task.description = this.taskForm.value.taskDescription;
     task.isCompleted = false;
     this.add.emit(task);
-    description.value = '';
+    this.taskForm.reset();
   }
-}
 
+  @Output() add = new EventEmitter();
+}

From d9704c4ddcf31795f76840ddfc635ec705018402 Mon Sep 17 00:00:00 2001
From: Joshua <acciarrijoshua@gmail.com>
Date: Sun, 27 Sep 2020 20:35:12 -0300
Subject: [PATCH 2/4] Checkpoint. Edit button added but not implemented

---
 src/app/todo-form/todo-form.component.ts   |  8 ++++----
 src/app/todo-list/todo-list.component.html |  1 +
 src/app/todo-list/todo-list.component.ts   | 17 +++++++++--------
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index aaf46bb..6b036e7 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/src/app/todo-form/todo-form.component.ts
@@ -12,13 +12,13 @@ export class TodoFormComponent {
     taskDescription: new FormControl('', Validators.required),
   });
 
+  @Output() add = new EventEmitter();
+
   saveTask() {
     let task = new TodoItem();
     task.description = this.taskForm.value.taskDescription;
     task.isCompleted = false;
     this.add.emit(task);
-    this.taskForm.reset();
+    this.taskForm.setValue({taskDescription: ''});
   }
-
-  @Output() add = new EventEmitter();
-}
+  }
\ No newline at end of file
diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html
index 127ec76..7dee9f5 100644
--- a/src/app/todo-list/todo-list.component.html
+++ b/src/app/todo-list/todo-list.component.html
@@ -4,6 +4,7 @@
       class="list-item">
       {{task.description}}
       <span>
+        <button class="btn btn-info" (click)="updateTask(task)">Edit</button>
         <button class="btn btn-danger" (click)="removeItem(task.id)">X</button>
         <button class="btn btn-success" (click)="completeTask(task)">V</button>
       </span>
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index fc5d8f0..7f4be01 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/src/app/todo-list/todo-list.component.ts
@@ -1,26 +1,27 @@
-import { Component, OnInit, Input, Output, EventEmitter  } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { TodoItem } from '../model/todo-item';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-todo-list',
   templateUrl: './todo-list.component.html',
-  styleUrls: ['./todo-list.component.scss']
+  styleUrls: ['./todo-list.component.scss'],
 })
 export class TodoListComponent implements OnInit {
   @Input() list: any[];
   @Output() itemRemoved = new EventEmitter();
   @Output() itemStateChanged = new EventEmitter();
-  constructor() { }
+  @Output() itemEdit = new EventEmitter();
+  constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
   removeItem(id) {
     this.itemRemoved.emit(id);
   }
 
-  completeTask(item:TodoItem) {
+  completeTask(item: TodoItem) {
     this.itemStateChanged.emit(item);
-
   }
 
-}
\ No newline at end of file
+  updateTask(task: TodoItem) {}
+}

From 196b6dac4c26c970d4b57493293f942e5e033e3e Mon Sep 17 00:00:00 2001
From: Joshua <acciarrijoshua@gmail.com>
Date: Mon, 28 Sep 2020 00:25:47 -0300
Subject: [PATCH 3/4] Edit a task implemented

---
 src/app/todo-app/todo-app.component.html   |  7 +++++-
 src/app/todo-app/todo-app.component.ts     | 13 ++++++----
 src/app/todo-form/todo-form.component.html |  3 ++-
 src/app/todo-form/todo-form.component.ts   | 28 ++++++++++++++++++----
 src/app/todo-list/todo-list.component.html |  2 +-
 src/app/todo-list/todo-list.component.ts   |  4 +++-
 src/app/todo.service.ts                    |  5 ++++
 7 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 786cc57..fbdb27a 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -1,8 +1,13 @@
-<app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
+<app-todo-form 
+  (add)="onTodoItemCreated($event)"
+  [taskEditable]="taskEditable"
+  (save)="onTodoItemUpdated($event)"
+></app-todo-form>
 <app-todo-list
   [list]="getList()"
   (itemRemoved)="onTodoItemRemoved($event)"
   (itemStateChanged)="onItemStateChanged($event)"
+  (itemEdit)="onTodoItemEdit($event)"
 >
 </app-todo-list>
 <app-todo-footer
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index cc42271..1c78c7a 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -10,9 +10,8 @@ import { TodoService } from '../todo.service';
 })
 export class TodoAppComponent  {
 
-  constructor(
-    private service: TodoService
-  ) {}
+  constructor(private service: TodoService) {}
+  taskEditable:TodoItem = null;
 
   getList() {
     return this.service.list;
@@ -24,6 +23,12 @@ export class TodoAppComponent  {
     item.toggleCompleted();
   }
   onTodoItemCreated(task) {
-    this.service.add(task)
+    this.service.add(task);
+  }
+  onTodoItemEdit(task: TodoItem){
+    this.taskEditable = task;
+  }
+  onTodoItemUpdated(task: TodoItem){
+    this.service.update(task);
   }
 }
diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html
index 37aff02..81a5485 100644
--- a/src/app/todo-form/todo-form.component.html
+++ b/src/app/todo-form/todo-form.component.html
@@ -6,8 +6,9 @@
     type="submit" 
     [disabled]="!taskForm.valid"
     class="btn btn-primary">
-    Create
+    {{ flagEdit == true ? "Edit Item " + taskEditable.id : "Create" }}
   </button>
+  <button type="submit" hidden="flagEdit">Edit</button>
 </form>
 
 
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index 6b036e7..6043ffe 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/src/app/todo-form/todo-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, OnChanges } from '@angular/core';
 import { TodoItem } from '../model/todo-item';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
@@ -12,13 +12,33 @@ export class TodoFormComponent {
     taskDescription: new FormControl('', Validators.required),
   });
 
+  flagEdit:boolean = false;
   @Output() add = new EventEmitter();
+  @Input() taskEditable = null;
+  @Output() save = new EventEmitter();
 
   saveTask() {
     let task = new TodoItem();
     task.description = this.taskForm.value.taskDescription;
-    task.isCompleted = false;
-    this.add.emit(task);
+    if (this.flagEdit){
+      task.id = this.taskEditable.id;
+      task.isCompleted = this.taskEditable.isCompleted;
+      this.save.emit(task);
+    }else{
+      this.add.emit(task);
+    }
+    this.flagEdit = false;
     this.taskForm.setValue({taskDescription: ''});
   }
-  }
\ No newline at end of file
+
+  ngOnChanges():void{
+    if(this.taskEditable){
+      this.flagEdit = true;
+      console.log("now is true");
+      
+      this.taskForm.patchValue(this.taskEditable);  
+    }
+  }
+
+}
+
diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html
index 7dee9f5..a255b55 100644
--- a/src/app/todo-list/todo-list.component.html
+++ b/src/app/todo-list/todo-list.component.html
@@ -4,7 +4,7 @@
       class="list-item">
       {{task.description}}
       <span>
-        <button class="btn btn-info" (click)="updateTask(task)">Edit</button>
+        <button class="btn btn-info" (click)="editItem(task)">Edit</button>
         <button class="btn btn-danger" (click)="removeItem(task.id)">X</button>
         <button class="btn btn-success" (click)="completeTask(task)">V</button>
       </span>
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index 7f4be01..a9219c8 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/src/app/todo-list/todo-list.component.ts
@@ -23,5 +23,7 @@ export class TodoListComponent implements OnInit {
     this.itemStateChanged.emit(item);
   }
 
-  updateTask(task: TodoItem) {}
+  editItem(task: TodoItem) {
+    this.itemEdit.emit(task);
+  }
 }
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 9bba8cc..1ac284c 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -18,6 +18,11 @@ export class TodoService {
     this.lastItemId += 10;
   }
 
+  update(task){
+    const index = this.list.findIndex((element) => element.id === task.id);
+    this.list.splice(index, 1, task);
+  }
+
   remove(id) {
     const index = this.list.findIndex((element) => element.id === id);
     this.list.splice(index, 1);

From 231397bbd4d0262a778a0ca29bf6c6a0e4c9a745 Mon Sep 17 00:00:00 2001
From: Joshua <acciarrijoshua@gmail.com>
Date: Mon, 28 Sep 2020 13:17:03 -0300
Subject: [PATCH 4/4] URL added to the model and CustomValidator created

---
 src/app/app.component.html                    | 23 -------------------
 src/app/model/todo-item.ts                    |  1 +
 src/app/todo-app/todo-app.component.html      |  1 +
 .../todo-footer/todo-footer.component.html    |  1 +
 src/app/todo-form/todo-form.component.html    |  6 ++---
 src/app/todo-form/todo-form.component.ts      | 21 ++++++++++++-----
 src/app/todo-list/todo-list.component.html    |  4 +++-
 src/app/todo-list/todo-list.component.scss    |  5 ++++
 8 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f348a5a..01c82a6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,26 +5,3 @@
   <app-todo></app-todo>
 </div>
 
-<br>
-<br>
-<div>
-  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
-  <label>
-    First Name:
-    <input type="text" formControlName="firstName">
-  </label>
-  <label>
-    Last Name:
-    <input type="text" formControlName="lastName">
-  </label>
-  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
-  <button type="button" (click)="initialize()" >Reset</button>
-</form>
-<div>
-  <div>
-    Valido {{profileForm.valid}}
-
-  </div>
-  Touched {{profileForm.touched}}
-</div>
-</div>
diff --git a/src/app/model/todo-item.ts b/src/app/model/todo-item.ts
index bdb4f8b..f4d4be4 100644
--- a/src/app/model/todo-item.ts
+++ b/src/app/model/todo-item.ts
@@ -1,6 +1,7 @@
 export class TodoItem {
   id: number;
   description: string;
+  url: string;
   isCompleted: boolean = false;
 
   toggleCompleted() {
diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index fbdb27a..1153ad4 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -13,5 +13,6 @@
 <app-todo-footer
   [list]="getList()"
 >
+
 </app-todo-footer>
 <app-stats></app-stats>
\ No newline at end of file
diff --git a/src/app/todo-footer/todo-footer.component.html b/src/app/todo-footer/todo-footer.component.html
index a0f7423..b586dcc 100644
--- a/src/app/todo-footer/todo-footer.component.html
+++ b/src/app/todo-footer/todo-footer.component.html
@@ -1,2 +1,3 @@
+<br><br>
 <h2>Tasks Completed {{completedSize()}}</h2>
 <h2>Tasks To do {{incompletedSize()}} </h2>
diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html
index 81a5485..7a2c74a 100644
--- a/src/app/todo-form/todo-form.component.html
+++ b/src/app/todo-form/todo-form.component.html
@@ -1,14 +1,14 @@
 
 
 <form [formGroup]="taskForm" (ngSubmit)="saveTask()"> 
-  <input type="text" formControlName="taskDescription">
+  <input type="text" formControlName="taskDescription" placeholder=Task>
+  <input type="text" formControlName="url" placeholder=URL>
   <button 
     type="submit" 
     [disabled]="!taskForm.valid"
     class="btn btn-primary">
-    {{ flagEdit == true ? "Edit Item " + taskEditable.id : "Create" }}
+    {{ flagEdit == true ? "Edit" : "Add Task" }}
   </button>
-  <button type="submit" hidden="flagEdit">Edit</button>
 </form>
 
 
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index 6043ffe..7a56007 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/src/app/todo-form/todo-form.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Output, EventEmitter, Input, OnChanges } from '@angular/core';
 import { TodoItem } from '../model/todo-item';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-todo-form',
@@ -10,35 +10,44 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 export class TodoFormComponent {
   taskForm = new FormGroup({
     taskDescription: new FormControl('', Validators.required),
+    url: new FormControl('', [Validators.required, myUrlValidator])
   });
 
   flagEdit:boolean = false;
   @Output() add = new EventEmitter();
-  @Input() taskEditable = null;
+  @Input() taskEditable:TodoItem = null;
   @Output() save = new EventEmitter();
 
   saveTask() {
     let task = new TodoItem();
     task.description = this.taskForm.value.taskDescription;
+    task.url = this.taskForm.value.url;
     if (this.flagEdit){
       task.id = this.taskEditable.id;
       task.isCompleted = this.taskEditable.isCompleted;
-      this.save.emit(task);
+      this.save.emit(task); 
     }else{
       this.add.emit(task);
     }
     this.flagEdit = false;
-    this.taskForm.setValue({taskDescription: ''});
+    this.taskForm.patchValue({taskDescription: '', url: ''});
   }
 
   ngOnChanges():void{
     if(this.taskEditable){
       this.flagEdit = true;
-      console.log("now is true");
-      
       this.taskForm.patchValue(this.taskEditable);  
     }
   }
 
 }
 
+export function myUrlValidator(control: AbstractControl){
+  const expression = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi;
+  const regex = new RegExp(expression);
+  if (!control.value.match(regex)){
+    return { urlValid: true}
+  }
+  
+  return null;
+}
diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html
index a255b55..9f0ddc5 100644
--- a/src/app/todo-list/todo-list.component.html
+++ b/src/app/todo-list/todo-list.component.html
@@ -2,7 +2,9 @@
     <li
       *ngFor="let task of list" [class.completed] = "task.isCompleted"
       class="list-item">
-      {{task.description}}
+      <div class="list-item-description">{{task.description}}
+      <div class="list-item-url">{{task.url}}</div>
+    </div>
       <span>
         <button class="btn btn-info" (click)="editItem(task)">Edit</button>
         <button class="btn btn-danger" (click)="removeItem(task.id)">X</button>
diff --git a/src/app/todo-list/todo-list.component.scss b/src/app/todo-list/todo-list.component.scss
index 0096849..9ea67d1 100644
--- a/src/app/todo-list/todo-list.component.scss
+++ b/src/app/todo-list/todo-list.component.scss
@@ -13,3 +13,8 @@
   display: flex;
   justify-content: space-between;
 }
+
+.list-item-url{
+  font-size: 1rem;
+  color: blue;
+}
\ No newline at end of file