Propuesta de solución MyDayApp - Angular Test

src/app/app-routing.module.ts

@@ -7,12 +7,15 @@ const routes: Routes = [
   {
     path: '',
     component: HomeComponent,
-    pathMatch: 'full'
-  }
+  },
+  {
+    path: ':estado',
+    component: HomeComponent,
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -1,20 +1,24 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
+import { FormsModule } from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { FooterTasksListComponent } from './components/footer-tasks-list/footer-tasks-list.component';
+import { MainTasksListComponent } from './components/main-tasks-list/main-tasks-list.component';
 import { HomeComponent } from './pages/home/home.component';
+import { TaskComponent } from './components/task/task.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HomeComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
+    HomeComponent,
+    FooterTasksListComponent,
+    MainTasksListComponent,
+    TaskComponent,
   ],
+  imports: [BrowserModule, AppRoutingModule, FormsModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

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

@@ -0,0 +1,33 @@
+<footer class="footer">
+  <!-- This should be `0 items left` by default -->
+  <span class="todo-count" [ngPlural]="tasksCount"
+    ><strong> {{ tasksCount }} </strong>
+    <ng-template ngPluralCase="=1">item left</ng-template>
+    <ng-template ngPluralCase="other">items left</ng-template>
+  </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">Completed</a>
+    </li>
+  </ul>
+  <!-- Hidden if no completed items are left ↓ -->
+  <button
+    class="clear-completed"
+    *ngIf="completedTasksCount > 0"
+    (click)="clearCompletedTask()"
+  >
+    Clear completed
+  </button>
+</footer>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterTasksListComponent } from './footer-tasks-list.component';
+
+describe('FooterTasksListComponent', () => {
+  let component: FooterTasksListComponent;
+  let fixture: ComponentFixture<FooterTasksListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FooterTasksListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterTasksListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TareasStorageService } from 'src/app/services/tareas-storage.service';
+
+@Component({
+  selector: 'app-footer-tasks-list',
+  templateUrl: './footer-tasks-list.component.html',
+  styleUrls: ['./footer-tasks-list.component.css'],
+})
+export class FooterTasksListComponent {
+  @Input() public tasksCount: number = 0;
+  @Input() public completedTasksCount: number = 0;
+  @Output() refresList = new EventEmitter<boolean>();
+
+  constructor(private tasksStorageService: TareasStorageService) {}
+
+  clearCompletedTask() {
+    this.tasksStorageService.clearCompletedTask();
+    this.refresList.emit(true);
+  }
+}

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

@@ -0,0 +1,9 @@
+<section class="main">
+  <ul class="todo-list">
+    <app-task
+      *ngFor="let task of tasks"
+      [task]="task"
+      (tasksRefresh)="onRefresh($event)"
+    ></app-task>
+  </ul>
+</section>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainTasksListComponent } from './main-tasks-list.component';
+
+describe('MainTasksListComponent', () => {
+  let component: MainTasksListComponent;
+  let fixture: ComponentFixture<MainTasksListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MainTasksListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MainTasksListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TareasStorageService } from 'src/app/services/tareas-storage.service';
+import { Task } from 'src/app/types/tasks';
+
+@Component({
+  selector: 'app-main-tasks-list',
+  templateUrl: './main-tasks-list.component.html',
+  styleUrls: ['./main-tasks-list.component.css'],
+})
+export class MainTasksListComponent {
+  @Input() tasks: Task[] = [];
+  @Output() refreshData = new EventEmitter<boolean>();
+
+  constructor(private taskService: TareasStorageService) {}
+
+  public changeStatus(task: Task) {
+    task.completed = !task.completed;
+    if (this.taskService.updateTarea(task)) {
+      this.tasks = this.taskService.gettasksList();
+    }
+  }
+
+  onRefresh(event: boolean) {
+    if (event) {
+      this.refreshData.emit(true);
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+<li
+  [class.completed]="task.completed"
+  *ngIf="!editing; else editForm"
+  (dblclick)="onEdit()"
+>
+  <div class="view">
+    <input
+      class="toggle"
+      type="checkbox"
+      [checked]="task.completed"
+      (change)="changeStatus()"
+    />
+    <label>{{ task.title }}</label>
+    <button (click)="onDelete()" class="destroy"></button>
+  </div>
+</li>
+<ng-template #editForm>
+  <li class="editing">
+    <input
+      class="edit"
+      [(ngModel)]="task.title"
+      (keypress)="saveChanges($event)"
+      (keyup.esc)="onEdit()"
+      autofocus
+    />
+  </li>
+</ng-template>
+
+<!-- <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>
+    <li>
+      <div class="view">
+        <input class="toggle" type="checkbox" />
+        <label>Buy a unicorn</label>
+        <button class="destroy"></button>
+      </div>
+      <input class="edit" value="Buy a unicorn" />
+    </li>
+    <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> -->

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TaskComponent } from './task.component';
+
+describe('TaskComponent', () => {
+  let component: TaskComponent;
+  let fixture: ComponentFixture<TaskComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TaskComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TaskComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TareasStorageService } from 'src/app/services/tareas-storage.service';
+import { Task } from 'src/app/types/tasks';
+
+@Component({
+  selector: 'app-task',
+  templateUrl: './task.component.html',
+  styleUrls: ['./task.component.css'],
+})
+export class TaskComponent {
+  @Input() task: Task = { id: '', title: '', completed: false };
+  public editing = false;
+
+  @Output() tasksRefresh = new EventEmitter<boolean>();
+
+  constructor(private taskService: TareasStorageService) {}
+
+  public changeStatus() {
+    this.task.completed = !this.task?.completed;
+    if (this.taskService.updateTarea(this.task)) {
+      this.tasksRefresh.emit(true);
+    }
+  }
+
+  public onEdit() {
+    this.editing = !this.editing;
+  }
+
+  public saveChanges(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      if (this.isValidTitle) {
+        if (this.taskService.updateTarea(this.task)) {
+          this.editing = false;
+          this.tasksRefresh.emit(true);
+        }
+      }
+    }
+  }
+
+  get isValidTitle() {
+    return this.task.title && this.task.title.trim() != '';
+  }
+
+  public onDelete() {
+    if (this.taskService.deleteTarea(this.task)) {
+      this.tasksRefresh.emit(true);
+    }
+  }
+}

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

@@ -8,57 +8,24 @@ <h1>My Day</h1>
         placeholder="Type new todo"
         autofocus
         type="text"
+        [(ngModel)]="taskTitle"
+        (keyup.enter)="addTask()"
       />
     </div>
   </header>
   <div class="container todoapp-wrapper">
     <!-- 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>
-        <li>
-          <div class="view">
-            <input class="toggle" type="checkbox" />
-            <label>Buy a unicorn</label>
-            <button class="destroy"></button>
-          </div>
-          <input class="edit" value="Buy a unicorn" />
-        </li>
-        <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-main-tasks-list
+      *ngIf="countAllTasks > 0"
+      [tasks]="tasks"
+      (refreshData)="onRefresh($event)"
+    ></app-main-tasks-list>
     <!-- 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>
-      <!-- Remove this if you don't implement routing -->
-      <ul class="filters">
-        <li>
-          <a routerLink="/" class="selected">All</a>
-        </li>
-        <li>
-          <a routerLink="/pending">Pending</a>
-        </li>
-        <li>
-          <a routerLink="/completed">Completed</a>
-        </li>
-      </ul>
-      <!-- Hidden if no completed items are left ↓ -->
-      <button class="clear-completed">Clear completed</button>
-    </footer>
+    <app-footer-tasks-list
+      *ngIf="countAllTasks > 0"
+      [tasksCount]="countPendingTask"
+      [completedTasksCount]="countCompleteTasks"
+      (refresList)="onRefresh($event)"
+    ></app-footer-tasks-list>
   </div>
 </section>