diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 00db1a2..917ad62 100644
--- a/src/app/app-routing.module.ts
+++ b/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 {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2e56ce2..eb9a3d3 100644
--- a/src/app/app.module.ts
+++ b/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: [],
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
index 52fbf7a..f0aa667 100644
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -1,19 +1,29 @@
diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
index db11e83..aadf8a8 100644
--- a/src/app/components/footer/footer.component.ts
+++ b/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 = computed(() => this.todosSevice.todos().filter((task) => task.completed).length);
+
+
+ public totalElementsPending = input.required();
+
+ public pluralItem = computed(() =>
+ this.totalElementsPending() > 1 ? 'items' : 'item'
+ );
+
+ public clearAllTasks(): void {
+ this.todosSevice.clearAllCompleteTasks();
+ }
}
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 650e82e..0c73b88 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -12,7 +12,7 @@ My Day
/>
@if (formTask.controls.task.errors) {
- Este campo es requerido
+ Este campo es requerido
}
diff --git a/src/app/interfaces/task.ts b/src/app/interfaces/task.ts
index 245c8a6..97ef68a 100644
--- a/src/app/interfaces/task.ts
+++ b/src/app/interfaces/task.ts
@@ -1,5 +1,6 @@
export interface TaskTodo {
id:string,
title:string,
- completed:boolean
+ completed:boolean,
+ edit:boolean
}
diff --git a/src/app/pages/home/all-tasks/all-tasks.component.html b/src/app/pages/home/all-tasks/all-tasks.component.html
new file mode 100644
index 0000000..2ae11e6
--- /dev/null
+++ b/src/app/pages/home/all-tasks/all-tasks.component.html
@@ -0,0 +1,20 @@
+@for (task of tasks(); track task.id) {
+
+
+
+
+
+
+
+
+}
+
diff --git a/src/app/pages/home/all-tasks/all-tasks.component.ts b/src/app/pages/home/all-tasks/all-tasks.component.ts
new file mode 100644
index 0000000..f7edc7e
--- /dev/null
+++ b/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 = computed(() => this.todoService.todos());
+
+ public numberOftasksPending: Signal = 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());
+ }
+
+}
diff --git a/src/app/pages/home/complete-tasks/complete-tasks.component.html b/src/app/pages/home/complete-tasks/complete-tasks.component.html
new file mode 100644
index 0000000..95681ac
--- /dev/null
+++ b/src/app/pages/home/complete-tasks/complete-tasks.component.html
@@ -0,0 +1,19 @@
+@for (task of todosCompleted(); track task.id) {
+
+
+
+
+
+
+
+
+}
diff --git a/src/app/pages/home/complete-tasks/complete-tasks.component.ts b/src/app/pages/home/complete-tasks/complete-tasks.component.ts
new file mode 100644
index 0000000..e7c892b
--- /dev/null
+++ b/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());
+ }
+
+}
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 41aa204..6b226e3 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -7,41 +7,13 @@
-
+
}
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 0ec882c..863b19b 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,25 +1,60 @@
import { CommonModule } from '@angular/common';
-import { Component, OnInit, Signal, WritableSignal, computed, inject, signal } from '@angular/core';
+import {
+ Component,
+ ElementRef,
+ EventEmitter,
+ OnInit,
+ 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-home',
templateUrl: './home.component.html',
+})
+export class HomeComponent implements OnInit {
+ private todoService = inject(TodoService);
+ public inputEditValue = signal('');
+ public tasks: Signal = computed(() => this.todoService.todos());
-})
-export class HomeComponent implements OnInit {
+ public numberOftasksPending: Signal = computed(
+ () => this.todoService.todos().filter((task) => !task.completed).length
+ );
- private todoService = inject(TodoService);
+ constructor() {}
- public tasks: Signal = computed(()=> this.todoService.todos())
+ ngOnInit(): void {}
- constructor() { }
+ public toogleTask(taskId: string): void {
+ this.todoService.toogleTask(taskId);
+ }
- ngOnInit(): void {
+ 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());
+ }
}
diff --git a/src/app/pages/home/pending-tasks/pending-tasks.component.html b/src/app/pages/home/pending-tasks/pending-tasks.component.html
new file mode 100644
index 0000000..6529b77
--- /dev/null
+++ b/src/app/pages/home/pending-tasks/pending-tasks.component.html
@@ -0,0 +1,19 @@
+@for (task of todosPending(); track task.id) {
+
+
+
+
+
+
+
+
+}
diff --git a/src/app/pages/home/pending-tasks/pending-tasks.component.ts b/src/app/pages/home/pending-tasks/pending-tasks.component.ts
new file mode 100644
index 0000000..483b803
--- /dev/null
+++ b/src/app/pages/home/pending-tasks/pending-tasks.component.ts
@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject, signal } from '@angular/core';
+import { TodoService } from 'src/app/services/todo-service';
+
+@Component({
+ selector: 'app-pending-tasks',
+ standalone: true,
+ imports: [CommonModule],
+ templateUrl: './pending-tasks.component.html',
+})
+export class PendingTasksComponent {
+ private todosService = inject(TodoService);
+
+ public inputEditValue = signal('');
+
+ public todosPending = computed(() => this.todosService.todosPending());
+
+ 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());
+ }
+}
diff --git a/src/app/services/todo-service.ts b/src/app/services/todo-service.ts
index 2a476ce..f0b0171 100644
--- a/src/app/services/todo-service.ts
+++ b/src/app/services/todo-service.ts
@@ -4,6 +4,7 @@ import {
WritableSignal,
computed,
signal,
+ effect,
} from '@angular/core';
import { TaskTodo } from './../interfaces/task';
@@ -13,17 +14,121 @@ export class TodoService {
public todos: Signal = computed(() => this.#todos());
- constructor() {}
+
+ public todosPending: Signal = computed(
+ () => this.todos().filter((task) => !task.completed)
+ );
+
+ public todosCompleted: Signal = computed(
+ () => this.todos().filter((task) => task.completed)
+ );
+
+ constructor() {
+ this.getTodosLocalStorage();
+
+ effect(() => {
+ if (this.#todos().length > 0) {
+ localStorage.setItem('mydayapp-angular', JSON.stringify(this.#todos()));
+ }
+ });
+ }
+
+ private getTodosLocalStorage() {
+ if (!localStorage.getItem('mydayapp-angular')) return;
+
+ const todosLocalStorage = JSON.parse(
+ localStorage.getItem('mydayapp-angular')!
+ ) as TaskTodo[];
+
+ this.#todos.set(todosLocalStorage);
+ }
public addNewTask(titleTask: string) {
- console.log(titleTask);
this.#todos.set([
...this.#todos(),
{
id: `${this.#todos().length + 1}`,
completed: false,
title: titleTask,
+ edit: false,
},
]);
}
+
+ public removeTask(taskId: string) {
+ const tasksWithoutRemoved: TaskTodo[] = this.#todos().filter(
+ (task) => task.id != taskId
+ );
+
+ this.#todos.set(tasksWithoutRemoved);
+ }
+
+ public toogleTask(taskId: string) {
+ const indexTask = this.#todos().findIndex((task) => task.id == taskId);
+
+ const todos = [...this.#todos()];
+
+ let taskUpdate = todos[indexTask];
+
+ taskUpdate = {
+ ...taskUpdate,
+ completed: !taskUpdate.completed,
+ };
+
+ todos.splice(indexTask, 1, taskUpdate);
+
+ this.#todos.set(todos);
+ }
+
+ public clearAllCompleteTasks() {
+ const pendingTasks = this.#todos().filter((task) => !task.completed);
+ this.#todos.set(pendingTasks);
+ }
+
+ public openEditModeByIdTask(taskId: string) {
+ this.#todos.update((tasks) =>
+ tasks.map((task) => ({ ...task, edit: false }))
+ );
+
+ const indexTask = this.#todos().findIndex((task) => task.id == taskId);
+
+ const todos = [...this.#todos()];
+
+ let taskUpdate = todos[indexTask];
+
+ taskUpdate = {
+ ...taskUpdate,
+ edit: true,
+ };
+
+ todos.splice(indexTask, 1, taskUpdate);
+
+ this.#todos.set(todos);
+ }
+
+ public closeEditModeByIdTask(taskId: string) {
+ this.#todos.update((tasks) =>
+ tasks.map((task) => ({ ...task, edit: false }))
+ );
+ }
+
+ public editTaskTitle(taskId: string, title:string) {
+ const indexTask = this.#todos().findIndex((task) => task.id == taskId);
+
+ const todos = [...this.#todos()];
+
+ let taskUpdate = todos[indexTask];
+
+ taskUpdate = {
+ ...taskUpdate,
+ title:title,
+ edit: false,
+ };
+
+ console.log(taskUpdate);
+
+ todos.splice(indexTask, 1, taskUpdate);
+
+ this.#todos.set(todos);
+ }
}
diff --git a/tsconfig.json b/tsconfig.json
index 1407cb6..8e584f5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,7 @@
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
- "target": "ES2022",
+ "target": "ESNext",
"module": "es2020",
"lib": [
"es2020",