mi solucion

src/app/app-routing.module.ts

@@ -2,17 +2,37 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { HomeComponent } from './pages/home/home.component';
+import { PendingTasksComponent } from './pages/home/pending-tasks/pending-tasks.component';
+import { CompleteTasksComponent } from './pages/home/complete-tasks/complete-tasks.component';
+import { AllTasksComponent } from './pages/home/all-tasks/all-tasks.component';
 
 const routes: Routes = [
   {
     path: '',
     component: HomeComponent,
-    pathMatch: 'full'
-  }
+
+    children: [
+      {
+        path: '',
+
+        component: AllTasksComponent, // child route component that the router renders
+      },
+      {
+        path: 'pending',
+        // child route path
+        component: PendingTasksComponent, // child route component that the router renders
+      },
+      {
+        path: 'completed',
+
+        component: CompleteTasksComponent, // another child route component that the router renders
+      },
+    ],
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -7,6 +7,9 @@ import { HeaderComponent } from './components/header/header.component';
 import { HomeComponent } from './pages/home/home.component';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { PendingTasksComponent } from './pages/home/pending-tasks/pending-tasks.component';
+import { CompleteTasksComponent } from './pages/home/complete-tasks/complete-tasks.component';
+import { AllTasksComponent } from './pages/home/all-tasks/all-tasks.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +23,9 @@ import { CommonModule } from '@angular/common';
     AppRoutingModule,
     HeaderComponent,
     FooterComponent,
+    PendingTasksComponent,
+    CompleteTasksComponent,
+    AllTasksComponent,
     CommonModule
   ],
   providers: [],

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

@@ -1,19 +1,29 @@
 <!-- This footer should be hidden by default and shown when there are todos -->
 <footer class="footer">
   <!-- This should be `0 items left` by default -->
-  <span class="todo-count"><strong>0</strong> item left</span>
+  <span class="todo-count">
+    <strong>{{totalElementsPending()}}</strong>
+    <span >
+      {{pluralItem()}} left
+    </span>
+
+
+
+  </span>
   <!-- Remove this if you don't implement routing -->
   <ul class="filters">
     <li>
-      <a routerLink="/" class="selected">All</a>
+      <a routerLink="" routerLinkActive="selected"  [routerLinkActiveOptions]="{ exact: true }">All</a>
     </li>
     <li>
-      <a routerLink="/pending">Pending</a>
+      <a routerLink="/pending" routerLinkActive="selected">Pending</a>
     </li>
     <li>
-      <a routerLink="/completed">Completed</a>
+      <a routerLink="/completed" routerLinkActive="selected">Completed</a>
     </li>
   </ul>
-  <!-- Hidden if no completed items are left ↓ -->
-  <button class="clear-completed">Clear completed</button>
+  @if(numberOftasksCompleted() > 0){
+    <button class="clear-completed" (click)="clearAllTasks()">Clear completed</button>
+  }
+
 </footer>

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

@@ -1,12 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, Signal, computed, inject, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TodoService } from 'src/app/services/todo-service';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink, RouterLinkActive],
   templateUrl: './footer.component.html',
 })
 export class FooterComponent {
+  private todosSevice = inject(TodoService);
 
+  public numberOftasksCompleted: Signal<number> = computed(() => this.todosSevice.todos().filter((task) => task.completed).length);
+
+
+  public totalElementsPending = input.required<number>();
+
+  public pluralItem = computed(() =>
+    this.totalElementsPending() > 1 ? 'items' : 'item'
+  );
+
+  public clearAllTasks(): void {
+    this.todosSevice.clearAllCompleteTasks();
+  }
 }

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

@@ -12,7 +12,7 @@ <h1>My Day</h1>
     />
 
     @if (formTask.controls.task.errors) {
-    <p>Este campo es requerido</p>
+    <p style="color: rgb(156, 43, 43)">Este campo es requerido</p>
     }
   </div>
 </header>

src/app/interfaces/task.ts

@@ -1,5 +1,6 @@
 export interface TaskTodo {
   id:string,
   title:string,
-  completed:boolean
+  completed:boolean,
+  edit:boolean
 }

src/app/pages/home/all-tasks/all-tasks.component.html

@@ -0,0 +1,20 @@
+@for (task of tasks(); track task.id) {
+  <li [ngClass]="{ completed: task.completed, editing: task.edit }">
+    <div class="view">
+      <input
+        class="toggle"
+        [checked]="task.completed"
+        (click)="toogleTask(task.id)"
+        type="checkbox"
+      />
+      <label (dblclick)="openEditMode(task.id)">{{ task.title }}</label>
+      <button class="destroy" (click)="removeTask(task.id)"></button>
+    </div>
+    <input class="edit"
+    (input)="changeInputValue($event)"
+    (keydown.enter)="editTask(task.id)"
+    (keydown.esc)="closeEditMode(task.id)"
+    [value]="task.title" />
+  </li>
+}
+

src/app/pages/home/all-tasks/all-tasks.component.ts

@@ -0,0 +1,56 @@
+import { CommonModule } from '@angular/common';
+import { Component, Signal, computed, inject, signal } from '@angular/core';
+import { TaskTodo } from 'src/app/interfaces/task';
+import { TodoService } from 'src/app/services/todo-service';
+
+@Component({
+  selector: 'app-all-tasks',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './all-tasks.component.html',
+
+})
+export class AllTasksComponent {
+
+  private todoService = inject(TodoService);
+
+  public inputEditValue = signal('');
+
+  public tasks: Signal<TaskTodo[]> = computed(() => this.todoService.todos());
+
+  public numberOftasksPending: Signal<number> = computed(
+    () => this.todoService.todos().filter((task) => !task.completed).length
+  );
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  public toogleTask(taskId: string): void {
+    this.todoService.toogleTask(taskId);
+  }
+
+  public removeTask(taskId: string): void {
+    this.todoService.removeTask(taskId);
+  }
+
+  public openEditMode(taskId: string) {
+    this.todoService.openEditModeByIdTask(taskId);
+  }
+
+  public closeEditMode(taskId: string) {
+    this.todoService.closeEditModeByIdTask(taskId);
+  }
+
+  public changeInputValue(event:Event){
+    const newValue = (event.target as HTMLInputElement).value;
+
+    this.inputEditValue.set(newValue);
+  }
+
+  public editTask(taskId: string) {
+
+    this.todoService.editTaskTitle(taskId, this.inputEditValue().trim());
+  }
+
+}

src/app/pages/home/complete-tasks/complete-tasks.component.html

@@ -0,0 +1,19 @@
+@for (task of todosCompleted(); track task.id) {
+  <li [ngClass]="{ completed: task.completed, editing: task.edit }">
+    <div class="view">
+      <input
+        class="toggle"
+        [checked]="task.completed"
+        (click)="toogleTask(task.id)"
+        type="checkbox"
+      />
+      <label (dblclick)="openEditMode(task.id)">{{ task.title }}</label>
+      <button class="destroy" (click)="removeTask(task.id)"></button>
+    </div>
+    <input class="edit"
+    (input)="changeInputValue($event)"
+    (keydown.enter)="editTask(task.id)"
+    (keydown.esc)="closeEditMode(task.id)"
+    [value]="task.title" />
+  </li>
+}

src/app/pages/home/complete-tasks/complete-tasks.component.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject, signal } from '@angular/core';
+import { TodoService } from 'src/app/services/todo-service';
+
+@Component({
+  selector: 'app-complete-tasks',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './complete-tasks.component.html',
+})
+export class CompleteTasksComponent {
+
+
+  private todosService = inject(TodoService);
+
+  public inputEditValue = signal('');
+
+  public todosCompleted = computed(() => this.todosService.todosCompleted());
+
+  public toogleTask(taskId: string): void {
+    this.todosService.toogleTask(taskId);
+  }
+
+  public removeTask(taskId: string): void {
+    this.todosService.removeTask(taskId);
+  }
+
+  public openEditMode(taskId: string) {
+    this.todosService.openEditModeByIdTask(taskId);
+  }
+
+  public closeEditMode(taskId: string) {
+    this.todosService.closeEditModeByIdTask(taskId);
+  }
+
+  public changeInputValue(event: Event) {
+    const newValue = (event.target as HTMLInputElement).value;
+
+    this.inputEditValue.set(newValue);
+  }
+
+  public editTask(taskId: string) {
+    this.todosService.editTaskTitle(taskId, this.inputEditValue().trim());
+  }
+
+}

src/app/pages/home/home.component.html

@@ -7,41 +7,13 @@
     <!-- This section should be hidden by default and shown when there are todos -->
     <section class="main">
       <ul class="todo-list">
-        <!--
-          <li class="completed">
-            <div class="view">
-              <input class="toggle" type="checkbox" checked />
-              <label>Learn JavaScript</label>
-              <button class="destroy"></button>
-            </div>
-            <input class="edit" value="Learn JavaScript" />
-          </li>
- -->
-          @for (task of tasks(); track task.id) {
-            <li>
-              <div class="view">
-                <input class="toggle" type="checkbox" />
-                <label>{{task.title}}</label>
-                <button class="destroy"></button>
-              </div>
-              <input class="edit" value="Buy a unicorn" />
-            </li>
 
-          }
+        <router-outlet></router-outlet>
 
-
-       <!--  <li class="editing">
-          <div class="view">
-            <input class="toggle" type="checkbox" />
-            <label>Make dishes</label>
-            <button class="destroy"></button>
-          </div>
-          <input class="edit" value="Make dishes" />
-        </li> -->
       </ul>
     </section>
 
-    <app-footer />
+    <app-footer [totalElementsPending]="numberOftasksPending()" />
   </div>
   }
 </section>