Reactive Forms exercise

src/app/app.component.html

@@ -4,27 +4,3 @@
 <div class="container">
   <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

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

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

@@ -1,8 +1,9 @@
-<app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
+<app-todo-form (add)="onTodoItemCreated($event)" [selectedTask]="this.selectedTask"></app-todo-form>
 <app-todo-list
   [list]="getList()"
   (itemRemoved)="onTodoItemRemoved($event)"
   (itemStateChanged)="onItemStateChanged($event)"
+  (taskSelected)= "setTaskSelected($event)"
 >
 </app-todo-list>
 <app-todo-footer

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import {TodoItem} from '../model/todo-item';
 import { element } from 'protractor';
 import { TodoService } from '../todo.service';
@@ -9,7 +9,7 @@ import { TodoService } from '../todo.service';
   styleUrls: ['./todo-app.component.scss'],
 })
 export class TodoAppComponent  {
-
+  @Input() selectedTask:TodoItem;
   constructor(
     private service: TodoService
   ) {}
@@ -24,6 +24,9 @@ export class TodoAppComponent  {
     item.toggleCompleted();
   }
   onTodoItemCreated(task) {
-    this.service.add(task)
+    this.service.add(task);
+  }
+  setTaskSelected(task) {
+    this.selectedTask = task;
   }
 }

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

@@ -1,10 +1,18 @@
-
-<input type="text" #taskDescription class="add-todo">
-
-<button
-  class="btn btn-primary"
-  (click)="save(taskDescription)">
-  Create
-</button>
+<form [formGroup]="taskGroup" (ngSubmit)="save()">
+  <input type="hidden" formControlName="id">
+  <input type="text" formControlName="description" class="add-todo">
+  <div>
+    <span style="color:red" *ngIf="taskGroup.controls.description.invalid && taskGroup.controls.description.touched">* No ha ingresado descripcion</span>
+  </div>
+  <input type="text" formControlName="url" class="add-todo">
+  <div>
+    <span style="color:red" *ngIf="taskGroup.controls.url.errors?.pattern && taskGroup.controls.url.touched">* No ha ingresado una URL válida</span>
+  </div>
+  <button type="submit" [disabled]="taskGroup.invalid" class="btn btn-primary">Save</button>
+</form>
+
+{{taskGroup.controls.description.value}}
+<br>
+{{taskGroup.controls.url.value}}
 
 

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

@@ -1,24 +1,71 @@
-import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input} from '@angular/core';
 import { TodoItem } from '../model/todo-item';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { TodoService } from '../todo.service';
+const urlRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
 
 @Component({
   selector: 'app-todo-form',
   templateUrl: './todo-form.component.html',
   styleUrls: ['./todo-form.component.scss']
 })
 export class TodoFormComponent {
-
+  @Input() selectedTask:TodoItem;
   @Output() add = new EventEmitter();
+  taskGroup: FormGroup;
+
+  constructor(private service:TodoService) {
+    this.taskGroup = new FormGroup({
+      description: new FormControl('',[Validators.required]),
+      url: new FormControl('',[Validators.required,Validators.pattern(urlRegex)]),
+      id: new FormControl('')
+    })
 
-  save(description){
-    if(!description.value || description.value === '') {
+  }
+  ngOnChanges(){ 
+    if (!this.selectedTask) {
+      this.taskGroup.patchValue({
+        description: '',
+        url: '',
+        id: ''
+      })
+    }
+    else{
+      this.taskGroup.patchValue({
+        description: this.selectedTask.description,
+        url: this.selectedTask.url,
+        id: this.selectedTask.id
+      })
+
+    }    
+  }
+  save(){
+    if(!this.taskGroup.controls.description.value || this.taskGroup.controls.description.value === '') {
       return;
     }
-    let task = new TodoItem();
-    task.description = description.value;
-    task.isCompleted = false;
-    this.add.emit(task);
-    description.value = '';
+    if (this.taskGroup.controls.id.value) {
+      let task = new TodoItem();
+      task.description = this.taskGroup.controls.description.value;
+      task.isCompleted = false;
+      task.url = this.taskGroup.controls.url.value;
+      task.id = this.taskGroup.controls.id.value;
+      this.service.remove(task.id);
+      this.add.emit(task);
+      this.taskGroup.reset();
+      console.log(this.taskGroup.controls.id.value)
+    }
+    else{
+      let task = new TodoItem();
+      task.description = this.taskGroup.controls.description.value;
+      task.isCompleted = false;
+      task.url = this.taskGroup.controls.url.value;
+      this.add.emit(task);
+      this.taskGroup.reset();
+      console.log(this.selectedTask)
+    }
+
   }
+
+
 }
 

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

@@ -2,10 +2,12 @@
     <li
       *ngFor="let task of list" [class.completed] = "task.isCompleted"
       class="list-item">
-      {{task.description}}
+        <h2>{{task.description}}</h2>
+        <a style="color:blue; cursor:pointer">{{task.url}}</a>
       <span>
         <button class="btn btn-danger" (click)="removeItem(task.id)">X</button>
         <button class="btn btn-success" (click)="completeTask(task)">V</button>
+        <button (click)="editTask(task)" class="btn black"><i class="material-icons large">create</i></button>
       </span>
     </li>
   </ul>

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

@@ -10,6 +10,7 @@ export class TodoListComponent implements OnInit {
   @Input() list: any[];
   @Output() itemRemoved = new EventEmitter();
   @Output() itemStateChanged = new EventEmitter();
+  @Output() taskSelected = new EventEmitter();
   constructor() { }
 
   ngOnInit() {
@@ -23,4 +24,8 @@ export class TodoListComponent implements OnInit {
 
   }
 
+  editTask(task){
+    this.taskSelected.emit(task);
+  }
+
 }

src/app/todo.service.ts

@@ -1,15 +1,17 @@
 import { Injectable } from '@angular/core';
 import { LocalStorageService } from './local-storage.service';
+import { TodoItem } from './model/todo-item';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TodoService {
 
   list = [];
-  lastItemId = 0;
+  lastItemId = 1;
 
-  constructor(private storage: LocalStorageService) { }
+  constructor(private storage: LocalStorageService) {;
+   }
 
   add(task) {
     const id = this.lastItemId;

src/index.html

@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <!-- Compiled and minified CSS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 </head>
 <body>
   <app-root></app-root>