From c90d27df3acd63b63694e84d6c3fcb87ad5c349b Mon Sep 17 00:00:00 2001
From: Oscar Dorronzoro <oscar.dorronzoro@gmail.com>
Date: Sat, 22 Aug 2020 21:05:35 -0300
Subject: [PATCH 1/2] agregado de form control y edicion de tarea

---
 src/app/todo-app/todo-app.component.html   | 14 +++++--
 src/app/todo-app/todo-app.component.ts     | 24 +++++++++--
 src/app/todo-form/todo-form.component.html |  6 +--
 src/app/todo-form/todo-form.component.ts   | 48 +++++++++++++++++++---
 src/app/todo-list/todo-list.component.html |  1 +
 src/app/todo-list/todo-list.component.ts   |  8 +++-
 src/app/todo.service.ts                    | 12 ++++--
 7 files changed, 92 insertions(+), 21 deletions(-)

diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 786cc57..9c1872f 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -1,12 +1,20 @@
-<app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
+<app-todo-form
+  [descriptionToEdit]="taskToEdit.description"
+  (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>
\ No newline at end of file
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index cc42271..2e02daa 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -10,6 +10,8 @@ import { TodoService } from '../todo.service';
 })
 export class TodoAppComponent  {
 
+  taskToEdit:any = "";
+
   constructor(
     private service: TodoService
   ) {}
@@ -17,13 +19,27 @@ export class TodoAppComponent  {
   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 = task;
+  }
+
+  onItemUpdated(taskDescription){
+    this.taskToEdit.description = taskDescription;
+    this.taskToEdit = '';
+    //this.service.update(this.taskToEdit);  //en caso de implementar persistencia
+  }
+
 }
diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html
index ec0ad47..dd03743 100644
--- a/src/app/todo-form/todo-form.component.html
+++ b/src/app/todo-form/todo-form.component.html
@@ -1,10 +1,10 @@
 
-<input type="text" #taskDescription class="add-todo">
+<input type="text" [formControl]='taskDescriptionControl' class="add-todo">
 
 <button
   class="btn btn-primary"
-  (click)="save(taskDescription)">
-  Create
+  (click)="save()">
+  {{this.saveButtonText}}
 </button>
 
 
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index 3366020..f21a811 100644
--- a/src/app/todo-form/todo-form.component.ts
+++ b/src/app/todo-form/todo-form.component.ts
@@ -1,24 +1,60 @@
-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 } 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 {
 
+  taskDescriptionControl = new FormControl('');
+  saveButtonText='Create';
+  descriptionChangesSubscription:Subscription = null;
   @Output() add = new EventEmitter();
+  @Output() update = new EventEmitter();
+  @Input() descriptionToEdit;
 
-  save(description){
-    if(!description.value || description.value === '') {
+  ngOnChanges(){
+    if(!this.descriptionToEdit){
+      this.saveButtonText = 'Create';
+    }
+    else{
+      this.saveButtonText = 'Update';
+      this.descriptionChangesSubscription = this.taskDescriptionControl.valueChanges.subscribe(
+        value => this.descriptionToEdit = value
+        );
+      this.taskDescriptionControl.setValue(this.descriptionToEdit)
+    }
+  }
+
+  save(){
+    if(!this.taskDescriptionControl.value || this.taskDescriptionControl.value === '') {
       return;
     }
+
+    if(!this.descriptionToEdit){
+      this.addTask();
+    }
+    else{
+      this.updateTask();
+    }
+  }
+
+  addTask(){
     let task = new TodoItem();
-    task.description = description.value;
+    task.description = this.taskDescriptionControl.value;
     task.isCompleted = false;
     this.add.emit(task);
-    description.value = '';
+    this.taskDescriptionControl.reset();
+  }
+
+  updateTask(){
+    this.descriptionChangesSubscription.unsubscribe();
+    this.taskDescriptionControl.reset();
+    this.update.emit(this.descriptionToEdit);
   }
 }
 
diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html
index 127ec76..49750e0 100644
--- a/src/app/todo-list/todo-list.component.html
+++ b/src/app/todo-list/todo-list.component.html
@@ -6,6 +6,7 @@
       <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>
diff --git a/src/app/todo-list/todo-list.component.ts b/src/app/todo-list/todo-list.component.ts
index fc5d8f0..c2edbb6 100644
--- a/src/app/todo-list/todo-list.component.ts
+++ b/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);
   }
 
 }
\ No newline at end of file
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 9bba8cc..38e5bfe 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -1,21 +1,22 @@
 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) {
@@ -23,6 +24,11 @@ export class TodoService {
     this.list.splice(index, 1);
   }
 
+  update(task:TodoItem) {
+    const index = this.list.findIndex(element => element.id === task.id);
+    this.list[index].description=task.description;
+  }
+
   incompletedSize() {
     return this.list.filter(item => !item.isCompleted).length;
 

From 5963055ea04f534ed6d41c43457e65dad71753eb Mon Sep 17 00:00:00 2001
From: Oscar Dorronzoro <oscar.dorronzoro@gmail.com>
Date: Sun, 23 Aug 2020 00:56:20 -0300
Subject: [PATCH 2/2] agragado de campo url, validaciones y estilos

---
 src/app/app.component.html                    | 26 +-------------
 src/app/model/todo-item.ts                    |  1 +
 src/app/stats/stats.component.html            | 14 ++++----
 src/app/stats/stats.component.scss            | 18 ++++++++--
 src/app/todo-app/todo-app.component.html      |  2 +-
 src/app/todo-app/todo-app.component.ts        | 11 +++---
 .../todo-footer/todo-footer.component.html    |  5 +--
 .../todo-footer/todo-footer.component.scss    | 14 ++++++++
 src/app/todo-form/todo-form.component.html    | 18 ++++++----
 src/app/todo-form/todo-form.component.scss    |  3 +-
 src/app/todo-form/todo-form.component.ts      | 35 ++++++++++++-------
 src/app/todo-list/todo-list.component.html    |  4 +--
 src/app/todo-list/todo-list.component.scss    |  7 ++--
 src/app/todo.service.ts                       |  4 ++-
 14 files changed, 95 insertions(+), 67 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f348a5a..662aecb 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/model/todo-item.ts b/src/app/model/todo-item.ts
index bdb4f8b..7908b4f 100644
--- a/src/app/model/todo-item.ts
+++ b/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;
diff --git a/src/app/stats/stats.component.html b/src/app/stats/stats.component.html
index b599e29..6caedd9 100644
--- a/src/app/stats/stats.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/stats/stats.component.scss b/src/app/stats/stats.component.scss
index 3543841..ac66d87 100644
--- a/src/app/stats/stats.component.scss
+++ b/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;
 }
diff --git a/src/app/todo-app/todo-app.component.html b/src/app/todo-app/todo-app.component.html
index 9c1872f..b170b97 100644
--- a/src/app/todo-app/todo-app.component.html
+++ b/src/app/todo-app/todo-app.component.html
@@ -1,5 +1,5 @@
 <app-todo-form
-  [descriptionToEdit]="taskToEdit.description"
+  [taskToEdit]="taskToEdit"
   (add)="onItemCreated($event)"
   (update)="onItemUpdated($event)"
   >
diff --git a/src/app/todo-app/todo-app.component.ts b/src/app/todo-app/todo-app.component.ts
index 2e02daa..5adc493 100644
--- a/src/app/todo-app/todo-app.component.ts
+++ b/src/app/todo-app/todo-app.component.ts
@@ -10,7 +10,7 @@ import { TodoService } from '../todo.service';
 })
 export class TodoAppComponent  {
 
-  taskToEdit:any = "";
+  taskToEdit:TodoItem = null;
 
   constructor(
     private service: TodoService
@@ -33,13 +33,12 @@ export class TodoAppComponent  {
   }
 
   onItemUpdating(task:TodoItem) {
-    this.taskToEdit = task;
+    this.taskToEdit = Object.assign({},task);
   }
 
-  onItemUpdated(taskDescription){
-    this.taskToEdit.description = taskDescription;
-    this.taskToEdit = '';
-    //this.service.update(this.taskToEdit);  //en caso de implementar persistencia
+  onItemUpdated(task:TodoItem){
+    this.service.update(task);
+    this.taskToEdit = null;
   }
 
 }
diff --git a/src/app/todo-footer/todo-footer.component.html b/src/app/todo-footer/todo-footer.component.html
index a0f7423..06be46a 100644
--- a/src/app/todo-footer/todo-footer.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/todo-footer/todo-footer.component.scss b/src/app/todo-footer/todo-footer.component.scss
index e69de29..9bb4e6b 100644
--- a/src/app/todo-footer/todo-footer.component.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/todo-form/todo-form.component.html b/src/app/todo-form/todo-form.component.html
index dd03743..be801f8 100644
--- a/src/app/todo-form/todo-form.component.html
+++ b/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" [formControl]='taskDescriptionControl' class="add-todo">
 
-<button
-  class="btn btn-primary"
-  (click)="save()">
-  {{this.saveButtonText}}
-</button>
 
 
diff --git a/src/app/todo-form/todo-form.component.scss b/src/app/todo-form/todo-form.component.scss
index 213bb36..9891be5 100644
--- a/src/app/todo-form/todo-form.component.scss
+++ b/src/app/todo-form/todo-form.component.scss
@@ -1,3 +1,4 @@
 .add-todo {
-  width: 80%
+  width: 45%;
+  margin-right: 5px;
 }
diff --git a/src/app/todo-form/todo-form.component.ts b/src/app/todo-form/todo-form.component.ts
index f21a811..e07e3f8 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, Output, EventEmitter, Input, OnChanges} from '@angular/core';
 import { TodoItem } from '../model/todo-item';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -10,32 +10,41 @@ import { Subscription } from 'rxjs';
 })
 export class TodoFormComponent implements OnChanges {
 
-  taskDescriptionControl = new FormControl('');
+  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() descriptionToEdit;
+  @Input() taskToEdit;
 
   ngOnChanges(){
-    if(!this.descriptionToEdit){
+    if(!this.taskToEdit){
       this.saveButtonText = 'Create';
     }
     else{
       this.saveButtonText = 'Update';
-      this.descriptionChangesSubscription = this.taskDescriptionControl.valueChanges.subscribe(
-        value => this.descriptionToEdit = value
+      this.descriptionChangesSubscription = this.taskControl.valueChanges.subscribe(
+        value => this.taskToEdit = Object.assign(this.taskToEdit, value)
         );
-      this.taskDescriptionControl.setValue(this.descriptionToEdit)
+
+      this.taskControl.patchValue({description: this.taskToEdit.description, url: this.taskToEdit.url})
     }
   }
 
   save(){
-    if(!this.taskDescriptionControl.value || this.taskDescriptionControl.value === '') {
+    if(!this.taskControl.value || this.taskControl.untouched) {
       return;
     }
 
-    if(!this.descriptionToEdit){
+    if(!this.taskToEdit){
       this.addTask();
     }
     else{
@@ -45,16 +54,16 @@ export class TodoFormComponent implements OnChanges {
 
   addTask(){
     let task = new TodoItem();
-    task.description = this.taskDescriptionControl.value;
+    task = Object.assign(task,this.taskControl.value);
     task.isCompleted = false;
     this.add.emit(task);
-    this.taskDescriptionControl.reset();
+    this.taskControl.reset();
   }
 
   updateTask(){
     this.descriptionChangesSubscription.unsubscribe();
-    this.taskDescriptionControl.reset();
-    this.update.emit(this.descriptionToEdit);
+    this.taskControl.reset();
+    this.update.emit(this.taskToEdit);
   }
 }
 
diff --git a/src/app/todo-list/todo-list.component.html b/src/app/todo-list/todo-list.component.html
index 49750e0..04957ff 100644
--- a/src/app/todo-list/todo-list.component.html
+++ b/src/app/todo-list/todo-list.component.html
@@ -2,11 +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>
diff --git a/src/app/todo-list/todo-list.component.scss b/src/app/todo-list/todo-list.component.scss
index 0096849..0657edd 100644
--- a/src/app/todo-list/todo-list.component.scss
+++ b/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;
 }
diff --git a/src/app/todo.service.ts b/src/app/todo.service.ts
index 38e5bfe..28eb1bb 100644
--- a/src/app/todo.service.ts
+++ b/src/app/todo.service.ts
@@ -26,7 +26,9 @@ export class TodoService {
 
   update(task:TodoItem) {
     const index = this.list.findIndex(element => element.id === task.id);
-    this.list[index].description=task.description;
+    const t = this.list[index];
+    t.description = task.description;
+    t.url = task.url;
   }
 
   incompletedSize() {