Reactive Forms Exercise

src/app/app-routing.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-
 const routes: Routes = [];
 
 @NgModule({

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="#">To-Do List Example</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/app.component.scss

@@ -1,8 +0,0 @@
-input.ng-invalid {
-    border: 3px solid tomato;
-}
-
-form.ng-invalid  {
-    border-right: 3px solid tomato;
-
-}

src/app/model/todo-item.ts

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

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

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

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

@@ -1,29 +1,37 @@
-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';
-/** */
+
 @Component({
   selector: 'app-todo',
   templateUrl: './todo-app.component.html',
   styleUrls: ['./todo-app.component.scss'],
 })
+
 export class TodoAppComponent  {
 
-  constructor(
-    private service: TodoService
-  ) {}
+  @Input() selectedTask:TodoItem;
+
+  constructor(private service: TodoService) {}
 
   getList() {
     return this.service.list;
   }
+
   onTodoItemRemoved(id) {
     this.service.remove(id);
   }
+
   onItemStateChanged(item: TodoItem) {
     item.toggleCompleted();
   }
+
   onTodoItemCreated(task) {
-    this.service.add(task)
+    this.service.add(task);
+  }
+
+  setTaskAsSelected(task) {
+    this.selectedTask = task;
   }
 }

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

@@ -1,2 +1,2 @@
 <h2>Tasks Completed {{completedSize()}}</h2>
-<h2>Tasks To do {{incompletedSize()}} </h2>
+<h2>Tasks To do {{uncompletedSize()}} </h2>

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

@@ -15,15 +15,15 @@ export class TodoFooterComponent implements OnInit {
     private service: TodoService
   ) { }
 
-  ngOnInit() {
+  ngOnInit() { }
 
-  }
-  incompletedSize() {
-    this.countTodo = this.service.incompletedSize()
+  uncompletedSize() {
+    this.countTodo = this.service.uncompletedSize()
     return this.countTodo;
   }
+
   completedSize() {
-    this.countCompleted =this.service.completedSize()
+    this.countCompleted = this.service.completedSize()
     return this.countCompleted;
   }
 

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

@@ -1,10 +1,28 @@
-
-<input type="text" #taskDescription class="add-todo">
-
-<button
-  class="btn btn-primary"
-  (click)="save(taskDescription)">
-  Create
-</button>
-
-
+<div class="formGroup input-group mb-3">
+  <form [formGroup]="taskForm" (ngSubmit)="onSubmit()">
+    <input type="hidden" formControlName="id">
+    <label>
+      Task:
+      <input type="text" formControlName="description" class="input-group-text"
+      [ngClass]="taskForm.controls.description.invalid && taskForm.controls.description.touched? 'notValid' : ''"
+      [ngClass]="!taskForm.controls.description.invalid && taskForm.controls.description.touched? 'valid' : ''"
+      >
+    </label>
+    <label>
+      URL:
+      <input type="text" formControlName="url" class="input-group-text"
+      [ngClass]="taskForm.controls.url.invalid && taskForm.controls.url.touched? 'notValid' : ''"
+      [ngClass]="!taskForm.controls.url.invalid && taskForm.controls.url.touched? 'valid' : ''"
+      >
+    </label>
+    <label>
+      Mail:
+      <input type="text" formControlName="mail" class="input-group-text"
+      [ngClass]="taskForm.controls.mail.invalid && taskForm.controls.mail.touched? 'notValid' : ''"
+      [ngClass]="!taskForm.controls.mail.invalid && taskForm.controls.mail.touched? 'valid' : ''"
+      >
+    </label>
+    <button type="submit" class="btn btn-primary" [disabled]="!taskForm.valid">Submit</button>
+    <button type="button" class="btn btn-danger" (click)="reset()">Reset</button>
+  </form>
+</div>

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

@@ -1,3 +1,15 @@
 .add-todo {
   width: 80%
 }
+
+.notValid {
+  border: 3px solid tomato;
+}
+
+.valid {
+  border: 3px solid forestgreen;
+}
+
+.formGroup label {
+  margin-right: 1rem;
+}

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

@@ -1,5 +1,8 @@
-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';
+import { resetFakeAsyncZone } from '@angular/core/testing';
 
 @Component({
   selector: 'app-todo-form',
@@ -8,17 +11,52 @@ import { TodoItem } from '../model/todo-item';
 })
 export class TodoFormComponent {
 
+  @Input() selectedTask: TodoItem;
   @Output() add = new EventEmitter();
+  taskForm: FormGroup;
+  urlRegEx = "^^(ftp|https?):\/\/+(www\.)?[a-z0-9\-\.]{3,}\.[a-z]{3}$";
+  mailRegEx = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
 
-  save(description){
-    if(!description.value || description.value === '') {
-      return;
+  constructor(private service:TodoService) {
+    this.taskForm = new FormGroup({
+      id: new FormControl(""), // Hidden
+      description: new FormControl("", [Validators.required]),
+      url: new FormControl("", [Validators.required, Validators.pattern(this.urlRegEx)]),
+      mail: new FormControl("", [Validators.required, Validators.pattern(this.mailRegEx)]),
+    })
+  }
+
+  ngOnChanges(){
+    if (this.selectedTask !== undefined && this.selectedTask.id !== null) {
+      this.taskForm.patchValue({
+        id: this.selectedTask.id,
+        description: this.selectedTask.description,
+        url: this.selectedTask.url,
+        mail: this.selectedTask.mail,
+      })
     }
+  }
+
+  onSubmit(){
     let task = new TodoItem();
-    task.description = description.value;
+    task.description = this.taskForm.controls.description.value;
     task.isCompleted = false;
+    task.url = this.taskForm.controls.url.value;
+    task.mail = this.taskForm.controls.mail.value;
+    if (this.taskForm.controls.id.value) {
+      task.id = this.taskForm.controls.id.value;
+      this.service.remove(task.id);
+    }
     this.add.emit(task);
-    description.value = '';
+    if (!this.taskForm.controls.id.value) {
+      console.log(`Item submitted`)
+    } else {
+      console.log(`Item ${this.taskForm.controls.id.value} edited successfully`)
+    }
+    this.taskForm.reset();
   }
-}
 
+  reset() {
+    this.taskForm.reset();
+  }
+}

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

@@ -1,11 +1,12 @@
 <ul class="list">
-    <li
-      *ngFor="let task of list" [class.completed] = "task.isCompleted"
-      class="list-item">
-      {{task.description}}
+    <li *ngFor="let task of list" [class.completed] = "task.isCompleted" class="list-item">
+      <p>{{task.description}}</p>
+      <a href={{task.url}}>{{task.url}}</a>
+      <p>{{task.mail}}</p>
       <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-warning" (click)="editTask(task)">E</button>
       </span>
     </li>
   </ul>

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

@@ -1,9 +1,11 @@
 .completed {
     background-color: greenyellow;
 }
+
 .list {
   padding: 0;
 }
+
 .list-item {
   margin: 0;
   list-style-type: none;
@@ -13,3 +15,15 @@
   display: flex;
   justify-content: space-between;
 }
+
+.list a {
+  text-decoration: none;
+  color: gray;
+  cursor: pointer;
+  transition: all 0.5s;
+}
+
+.list a:hover {
+  color: blueviolet;
+  font-size: 105%;
+}

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,7 @@ export class TodoListComponent implements OnInit {
 
   }
 
-}
+  editTask(task){
+    this.taskSelected.emit(task);
+  }
+}

src/app/todo.service.ts

@@ -7,31 +7,32 @@ import { LocalStorageService } from './local-storage.service';
 export class TodoService {
 
   list = [];
-  lastItemId = 0;
+  lastItemId = 1;
 
   constructor(private storage: LocalStorageService) { }
 
   add(task) {
     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);
   }
 
-  incompletedSize() {
+  uncompletedSize() {
     return this.list.filter(item => !item.isCompleted).length;
 
   }
+
   completedSize() {
-    return  this.list.filter(item => item.isCompleted).length ;
+    return  this.list.filter(item => item.isCompleted).length;
   }
 
   getName() {
-    return 'TodoService 123' + this.storage.getName();
+    return 'ToDoService' + this.storage.getName();
   }
 }