Reactive Forms Exercise

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>

src/app/model/todo-item.ts

@@ -1,6 +1,7 @@
 export class TodoItem {
   id: number;
   description: string;
+  url: string;
   isCompleted: boolean = false;
 
   toggleCompleted() {

src/app/todo-app/todo-app.component.html

@@ -1,12 +1,18 @@
-<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
   [list]="getList()"
 >
+
 </app-todo-footer>
 <app-stats></app-stats>

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);
   }
 }

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>

src/app/todo-form/todo-form.component.html

@@ -1,10 +1,15 @@
 
-<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" placeholder=Task>
+  <input type="text" formControlName="url" placeholder=URL>
+  <button 
+    type="submit" 
+    [disabled]="!taskForm.valid"
+    class="btn btn-primary">
+    {{ flagEdit == true ? "Edit" : "Add Task" }}
+  </button>
+</form>
+
 
 

src/app/todo-form/todo-form.component.ts

@@ -1,24 +1,53 @@
-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 { AbstractControl, 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),
+    url: new FormControl('', [Validators.required, myUrlValidator])
+  });
 
+  flagEdit:boolean = false;
   @Output() add = new EventEmitter();
+  @Input() taskEditable:TodoItem = null;
+  @Output() save = new EventEmitter();
 
-  save(description){
-    if(!description.value || description.value === '') {
-      return;
-    }
+  saveTask() {
     let task = new TodoItem();
-    task.description = description.value;
-    task.isCompleted = false;
-    this.add.emit(task);
-    description.value = '';
+    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); 
+    }else{
+      this.add.emit(task);
+    }
+    this.flagEdit = false;
+    this.taskForm.patchValue({taskDescription: '', url: ''});
+  }
+
+  ngOnChanges():void{
+    if(this.taskEditable){
+      this.flagEdit = 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;
+}

src/app/todo-list/todo-list.component.html

@@ -2,8 +2,11 @@
     <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>
         <button class="btn btn-success" (click)="completeTask(task)">V</button>
       </span>

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;
+}

src/app/todo-list/todo-list.component.ts

@@ -1,26 +1,29 @@
-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);
-
   }
 
-}
+  editItem(task: TodoItem) {
+    this.itemEdit.emit(task);
+  }
+}

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);