Reactive forms

src/app/app.component.html

@@ -1,30 +1,6 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <a class="navbar-brand" href="#">Todo List example</a>
+  <a class="navbar-brand" href="#">Todo List Application</a>
 </nav>
 <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/stats/stats.component.html

@@ -1,6 +1,8 @@
-<div
-    class="progressbar"
-    [ngStyle]="{width: completedPercentage() + '%'}"
->
-{{completedPercentage()}} %
-</div>
+<div class="progressbar-background">
+    <div
+        class="progressbar"
+        [ngStyle]="{width: completedPercentage() + '%'}"
+    >
+    <span class="progressbar-percentage">{{completedPercentage()}}%</span>
+    </div>
+</div>

src/app/stats/stats.component.scss

@@ -1,6 +1,20 @@
 .progressbar {
-    background-color: green;
+    background-color: rgb(1, 228, 1);
+    transition: width 0.4s;
+    height: inherit;
+    border-radius: inherit;
+
+}
+
+.progressbar-background{
     height: 50px;
     font-size: x-large;
-    transition: width 0.3s;
+    border-radius: 30px;
+    background-color: lightgrey;
+}
+
+.progressbar-percentage{
+    position: relative;
+    left: 500px;
+    font-weight: bold;
 }

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

@@ -1,12 +1,20 @@
-<app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
+<app-todo-form
+  [taskToEdit]="taskToEdit"
+  (add)="onItemCreated($event)"
+  (update)="onItemUpdated($event)"
+  >
+</app-todo-form>
 <app-todo-list
   [list]="getList()"
   (itemRemoved)="onTodoItemRemoved($event)"
   (itemStateChanged)="onItemStateChanged($event)"
->
+  (itemUpdated)="onItemUpdating($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,20 +10,35 @@ import { TodoService } from '../todo.service';
 })
 export class TodoAppComponent  {
 
+  taskToEdit:TodoItem = null;
+
   constructor(
     private service: TodoService
   ) {}
 
   getList() {
     return this.service.list;
   }
+
   onTodoItemRemoved(id) {
     this.service.remove(id);
   }
-  onItemStateChanged(item: TodoItem) {
-    item.toggleCompleted();
+
+  onItemStateChanged(task:TodoItem) {
+    task.toggleCompleted();
   }
-  onTodoItemCreated(task) {
-    this.service.add(task)
+
+  onItemCreated(task:TodoItem) {
+    this.service.add(task);
   }
+
+  onItemUpdating(task:TodoItem) {
+    this.taskToEdit = Object.assign({},task);
+  }
+
+  onItemUpdated(task:TodoItem){
+    this.service.update(task);
+    this.taskToEdit = null;
+  }
+
 }

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

@@ -1,2 +1,3 @@
-<h2>Tasks Completed {{completedSize()}}</h2>
-<h2>Tasks To do {{incompletedSize()}} </h2>
+<div class="footer">
+    <span class="footer-description">Tasks Completed / Incompleted: {{completedSize()}} / {{incompletedSize()}}</span>
+</div>

src/app/todo-footer/todo-footer.component.scss

@@ -0,0 +1,14 @@
+.footer{
+    margin-bottom: 10px;
+    padding: 50px;
+    background-color: rgb(32, 44, 44);
+    border-radius: 5px;
+    text-align: center;
+}
+
+.footer-description{
+    font-weight: bold;
+    color: lightgray;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: xx-large;
+}

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

@@ -1,10 +1,16 @@
+<form [formGroup]="taskControl" (ngSubmit)="save()">
+  <input type="text" formControlName="description" class="add-todo" placeholder="Description">
+  <input type="text" formControlName="url" class="add-todo" placeholder="URL">
+
+  <button
+    type="submit"
+    class="btn btn-primary"
+    [disabled]="!taskControl.valid"
+    >
+    {{this.saveButtonText}}
+  </button>
+</form>
 
-<input type="text" #taskDescription class="add-todo">
 
-<button
-  class="btn btn-primary"
-  (click)="save(taskDescription)">
-  Create
-</button>
 
 

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

@@ -1,3 +1,4 @@
 .add-todo {
-  width: 80%
+  width: 45%;
+  margin-right: 5px;
 }

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

@@ -1,24 +1,69 @@
-import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { Component, Output, EventEmitter, Input, OnChanges} from '@angular/core';
 import { TodoItem } from '../model/todo-item';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-todo-form',
   templateUrl: './todo-form.component.html',
   styleUrls: ['./todo-form.component.scss']
 })
-export class TodoFormComponent {
+export class TodoFormComponent implements OnChanges {
+
+  taskControl = new FormGroup({
+    description: new FormControl('',Validators.required), //mismo nombre que atributos de TodoItem
+    url: new FormControl('',[
+      Validators.required,
+      Validators.pattern('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?')
+    ])
+  });
+
+  saveButtonText='Create';
+  descriptionChangesSubscription:Subscription = null;
 
   @Output() add = new EventEmitter();
+  @Output() update = new EventEmitter();
+  @Input() taskToEdit;
+
+  ngOnChanges(){
+    if(!this.taskToEdit){
+      this.saveButtonText = 'Create';
+    }
+    else{
+      this.saveButtonText = 'Update';
+      this.descriptionChangesSubscription = this.taskControl.valueChanges.subscribe(
+        value => this.taskToEdit = Object.assign(this.taskToEdit, value)
+        );
+
+      this.taskControl.patchValue({description: this.taskToEdit.description, url: this.taskToEdit.url})
+    }
+  }
 
-  save(description){
-    if(!description.value || description.value === '') {
+  save(){
+    if(!this.taskControl.value || this.taskControl.untouched) {
       return;
     }
+
+    if(!this.taskToEdit){
+      this.addTask();
+    }
+    else{
+      this.updateTask();
+    }
+  }
+
+  addTask(){
     let task = new TodoItem();
-    task.description = description.value;
+    task = Object.assign(task,this.taskControl.value);
     task.isCompleted = false;
     this.add.emit(task);
-    description.value = '';
+    this.taskControl.reset();
+  }
+
+  updateTask(){
+    this.descriptionChangesSubscription.unsubscribe();
+    this.taskControl.reset();
+    this.update.emit(this.taskToEdit);
   }
 }
 

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

@@ -2,10 +2,11 @@
     <li
       *ngFor="let task of list" [class.completed] = "task.isCompleted"
       class="list-item">
-      {{task.description}}
+      {{task.description}}  -  {{task.url}}
       <span>
         <button class="btn btn-danger" (click)="removeItem(task.id)">X</button>
         <button class="btn btn-success" (click)="completeTask(task)">V</button>
+        <button class="btn btn-primary" (click)="updateTask(task)">E</button>
       </span>
     </li>
-  </ul>
+</ul>

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

@@ -3,13 +3,16 @@
 }
 .list {
   padding: 0;
+  margin-top: 20px;
 }
 .list-item {
   margin: 0;
   list-style-type: none;
-  font-size: 2rem;
+  font-size: 1.5rem;
   border-bottom: 1px solid lightgrey;
-  width: 80%;
+  //width: 80%;
   display: flex;
   justify-content: space-between;
+  padding: 0px 30px 0px 30px;
+  border-radius: 5px;
 }

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

@@ -10,17 +10,21 @@ export class TodoListComponent implements OnInit {
   @Input() list: any[];
   @Output() itemRemoved = new EventEmitter();
   @Output() itemStateChanged = new EventEmitter();
+  @Output() itemUpdated = new EventEmitter();
   constructor() { }
 
   ngOnInit() {
   }
-  removeItem(id) {
+  removeItem(id){
     this.itemRemoved.emit(id);
   }
 
-  completeTask(item:TodoItem) {
+  completeTask(item:TodoItem){
     this.itemStateChanged.emit(item);
+  }
 
+  updateTask(item:TodoItem){
+    this.itemUpdated.emit(item);
   }
 
 }

src/app/todo.service.ts

@@ -1,28 +1,36 @@
 import { Injectable } from '@angular/core';
 import { LocalStorageService } from './local-storage.service';
+import { TodoItem } from './model/todo-item';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TodoService {
 
-  list = [];
+  list:TodoItem[] = [];
   lastItemId = 0;
 
   constructor(private storage: LocalStorageService) { }
 
-  add(task) {
+  add(task:TodoItem) {
     const id = this.lastItemId;
     task.id = id;
     this.list.push(task);
-    this.lastItemId += 10;
+    this.lastItemId += 1;
   }
 
   remove(id) {
     const index = this.list.findIndex((element) => element.id === id);
     this.list.splice(index, 1);
   }
 
+  update(task:TodoItem) {
+    const index = this.list.findIndex(element => element.id === task.id);
+    const t = this.list[index];
+    t.description = task.description;
+    t.url = task.url;
+  }
+
   incompletedSize() {
     return this.list.filter(item => !item.isCompleted).length;