Solución prueba técnica Angular

src/app/app-routing.module.ts

@@ -2,12 +2,27 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { HomeComponent } from './pages/home/home.component';
+import { PendingComponent } from './pages/pending/pending.component';
+import { CompletedComponent } from './pages/completed/completed.component';
 
 const routes: Routes = [
+  // {
+  //   path: '',
+  //   redirectTo: 'home',
+  //   pathMatch: 'full'
+  // },
   {
     path: '',
     component: HomeComponent,
-    pathMatch: 'full'
+    // pathMatch: 'full',
+  },
+  {
+    path: 'pending',
+    component: PendingComponent
+  },
+  {
+    path: 'completed',
+    component: CompletedComponent
   }
 ];
 

src/app/app.module.ts

@@ -4,15 +4,30 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './pages/home/home.component';
+import { HeaderComponent } from './components/header/header.component';
+import { TaskComponent } from './components/task/task.component';
+import { FooterComponent } from './components/footer/footer.component';
+import { TasksListComponent } from './components/tasks-list/tasks-list.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { PendingComponent } from './pages/pending/pending.component';
+import { CompletedComponent } from './pages/completed/completed.component'
 
 @NgModule({
   declarations: [
     AppComponent,
-    HomeComponent
+    HomeComponent,
+    HeaderComponent,
+    TaskComponent,
+    FooterComponent,
+    TasksListComponent,
+    PendingComponent,
+    CompletedComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ReactiveFormsModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/footer/footer.component.html

@@ -0,0 +1,18 @@
+<footer *ngIf="!showFooter" class="footer">
+  <!-- This should be `0 items left` by default -->
+  <span class="todo-count"><strong>{{counter}}</strong> {{counter === 1 ? 'item' : 'items'}} left</span>
+  <!-- Remove this if you don't implement routing -->
+  <ul class="filters">
+    <li>
+      <a routerLink="/" routerLinkActive="selected" [routerLinkActiveOptions]="{ exact: true }">All</a>
+    </li>
+    <li>
+      <a routerLink="/pending" routerLinkActive="selected">Pending</a>
+    </li>
+    <li>
+      <a routerLink="/completed" routerLinkActive="selected" [routerLinkActiveOptions]="{ exact: false }">Completed</a>
+    </li>
+  </ul>
+  <!-- Hidden if no completed items are left ↓ -->
+  <button *ngIf="showButton > 0" class="clear-completed" (click)="clearTasks()">Clear completed</button>
+</footer>

src/app/components/footer/footer.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { TasksService } from 'src/app/services/tasks.service';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html'
+})
+export class FooterComponent implements OnInit, OnDestroy {
+
+  showFooter: boolean = false;
+  showButton: number = 0;
+  suscription !: Subscription;
+  counter: number = 0;
+
+  constructor(
+    private taskService: TasksService
+  ){
+    this.showFooter = this.taskService.isEmpty();
+  }
+
+  ngOnInit(): void {
+    this.suscription = this.taskService.tasksList$.subscribe( tasks => {
+      if(tasks){
+        this.showFooter = this.taskService.isEmpty();
+        this.counter = this.taskService.getTaskPedingLength();
+        this.showButton = this.taskService.getTaskCompletedLength();
+      }
+    });
+  }
+
+  clearTasks(){
+    this.taskService.clearCompletedTasks();
+  }
+
+  ngOnDestroy(): void {
+    this.suscription.unsubscribe();
+  }
+}

src/app/components/header/header.component.html

@@ -0,0 +1,14 @@
+<header class="header">
+  <div class="container">
+    <h1>My Day</h1>
+    <p>All my tasks in one place</p>
+    <input
+      (keyup)="addTask($event)"
+      class="new-todo"
+      placeholder="Type new todo"
+      autofocus
+      type="text"
+      [formControl]="newTask"
+    />
+  </div>
+</header>

src/app/components/header/header.component.ts

@@ -0,0 +1,31 @@
+import { Component, HostListener } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { TasksService } from 'src/app/services/tasks.service';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html'
+})
+export class HeaderComponent {
+
+  newTask : FormControl;
+
+  constructor(
+    private taskService: TasksService
+  ){
+    this.newTask = new FormControl(null);
+  }
+
+  addTask(event:KeyboardEvent){
+    if(event.key == 'Enter'){
+      let title: string = this.newTask.value;
+      if(title && title.trim() != ''){
+        this.taskService.createTask(title.trim());
+        this.newTask.reset();
+      }else{
+        console.log('NO SE CREA LA TAREA, NO EXISTE DATA');
+      }
+    }
+  }
+
+}

src/app/components/task/task.component.html

@@ -0,0 +1,8 @@
+<li [ngClass]="{'completed': task.completed, 'editing':editing}">
+  <div class="view">
+    <input class="toggle" type="checkbox" [checked]="task.completed" (change)="toggle()" />
+    <label (dblclick)="editTask()">{{task.title}}</label>
+    <button class="destroy" (click)="deleteTask(task)"></button>
+  </div>
+  <input #editInput (keypress)="saveTask($event)" [value]="task.title" [formControl]="inputTask" [placeholder]="task.title" class="edit"/>
+</li>

src/app/components/task/task.component.ts

@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Task } from 'src/app/models/task.model';
+import { TasksService } from 'src/app/services/tasks.service';
+
+@Component({
+  selector: 'app-task',
+  templateUrl: './task.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TaskComponent implements OnInit{
+
+  inputTask : FormControl = new FormControl(null);
+  editing: boolean = false;
+
+  @Input() task !: Task;
+
+  @ViewChild('editInput') editInput !: ElementRef<HTMLInputElement>;
+
+  @HostListener('window:keydown.esc', ['$event'])
+  handleKeyDown(event: KeyboardEvent) {
+    if(this.editing){
+      this.editing = false;
+    }
+  }
+
+  constructor(
+    private tasksServices: TasksService,
+    private cdRef: ChangeDetectorRef
+  ){
+
+  }
+
+  ngOnInit(): void {
+    if(this.task){
+      this.inputTask.setValue(this.task.title)
+    }
+  }
+
+
+  deleteTask(task:Task){
+    this.tasksServices.deleteTask(task);
+  }
+
+  saveTask(event:KeyboardEvent){
+    if(event.key == 'Enter'){
+      let title: string = this.inputTask.value;
+      if(title && title.trim() != ''){
+        let newTask: Task = {
+          id: this.task.id,
+          completed: this.task.completed,
+          title: title.trim()
+        }
+        this.tasksServices.updateTask(newTask);
+      }
+      this.editing = false;
+    }
+  }
+
+  editTask(){
+    this.editing = !this.editing;
+    this.cdRef.detectChanges();
+    this.editInput.nativeElement.focus();
+  }
+
+  toggle(){
+    this.tasksServices.toggle(this.task.id)
+  }
+}

src/app/components/tasks-list/tasks-list.component.html

@@ -0,0 +1,5 @@
+<section *ngIf="!showList" class="main">
+  <ul class="todo-list">
+    <app-task *ngFor="let task of tasksList" [task]="task"></app-task>
+  </ul>
+</section>

src/app/components/tasks-list/tasks-list.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Task } from 'src/app/models/task.model';
+import { TasksService } from 'src/app/services/tasks.service';
+
+@Component({
+  selector: 'app-tasks-list',
+  templateUrl: './tasks-list.component.html'
+})
+export class TasksListComponent implements OnInit, OnDestroy {
+
+  showList: boolean = false;
+  @Input() tasksList: Task[] = [];
+  suscription !: Subscription;
+
+  constructor(
+    private taskService: TasksService
+  ){
+    this.showList = this.taskService.isEmpty();
+  }
+
+  ngOnInit(): void {
+    this.suscription = this.taskService.tasksList$.subscribe( tasks => {
+      if(tasks){
+        this.showList = this.taskService.isEmpty();
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.suscription.unsubscribe();
+  }
+}