prueba tecnica angular

.firebase/hosting.ZGlzdFxteWFwcA.cache

@@ -0,0 +1,7 @@
+favicon.ico,1695655048321,2c19690e9587bae12f419b34d2edeecc76808099540a9c9f4ea6194116cfc8f7
+styles.a3438b96a051397b.css,1695698150126,713384c7a28549bc7590bc4e9662d5f36675bbb741bb4ff09fd78b89e58f8ebb
+index.html,1695698150478,b8e616aaa42b9b90cea7ae4b73fb7850cdc064b42accefd624c1a9ed3300ebfd
+3rdpartylicenses.txt,1695698150126,383c1d41903eff2274ee14e40a66d29277f6fb626a08a03ce7e3c24b18d3f4a9
+runtime.1c98015aec84e5af.js,1695698150126,a9a2242fbb64fd6d942119ead9e92d64b59c0aaf0e05c408d16eb13140cc05d1
+polyfills.fa2d22cf5f8cbea5.js,1695698150124,2a7e7f461361dc4fc55f7748895f006ecab3359aeeb313a17c891dd96a4e472e
+main.69c0ec6ce40e47d2.js,1695698150125,3f281fb4cb22a66cfa4e03d369e2e4dc12b92af4b5ed1cac266bdd6c981182cb

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "platzi-prueba-tecnica"
+  }
+}

angular.json

@@ -42,7 +42,7 @@
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumError": "10kb"
                 }
               ],
               "fileReplacements": [

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist/myapp",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

src/app/app-routing.module.ts

@@ -8,6 +8,11 @@ const routes: Routes = [
     path: '',
     component: HomeComponent,
     pathMatch: 'full'
+  },
+  {
+    path: ':filtro',
+    component: HomeComponent,
+    pathMatch: 'full'
   }
 ];
 

src/app/app.module.ts

@@ -4,15 +4,23 @@ 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 { MainComponent } from './pages/main/main.component';
+import { FooterComponent } from './pages/footer/footer.component';
+import { FormsModule } from '@angular/forms';
+import { AutofocusDirective } from './directives/autofocus.directive';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HomeComponent
+    HomeComponent,
+    MainComponent,
+    FooterComponent,
+    AutofocusDirective
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/directives/autofocus.directive.ts

@@ -0,0 +1,14 @@
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[appAutofocus]'
+})
+export class AutofocusDirective implements AfterViewInit{
+
+  constructor( private host: ElementRef) { }
+
+  ngAfterViewInit(): void {
+    this.host.nativeElement.focus();
+  }
+
+}

src/app/models/tarea.model.ts

@@ -0,0 +1,5 @@
+export interface Tarea {
+    id: number;
+    title: string;
+    completed: boolean;
+}

src/app/pages/footer/footer.component.html

@@ -0,0 +1,18 @@
+<footer class="footer">
+    <!-- This should be `0 items left` by default -->
+    <span class="todo-count"><strong>{{ contador }}</strong> {{word}} 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" [routerLinkActiveOptions]="{exact: true}">Pending</a>
+      </li>
+      <li>
+        <a  routerLink="/completed" routerLinkActive="selected" [routerLinkActiveOptions]="{exact: true}">Completed</a>
+      </li>
+    </ul>
+    <!-- Hidden if no completed items are left ↓ -->
+    <button class="clear-completed" type="button" (click)="clearTareas()" *ngIf="showButton">Clear completed</button>
+</footer>

src/app/pages/footer/footer.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnDestroy, OnInit, Input } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { TareaService } from 'src/app/services/tarea.service';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['../../../styles.css']
+})
+export class FooterComponent  implements OnInit, OnDestroy{
+
+  // contador: number = 0;
+  subTarea!: Subscription;
+
+
+  @Input() contador: number = 0;
+  @Input() showButton: boolean = false;
+  @Input() word: string = 'item';
+
+  constructor(
+    private tareaService: TareaService
+  ){
+  }
+
+
+  ngOnInit(): void {
+    console.log('ngOnInit')
+  }
+
+  filterTareas( mode: string ){
+    this.tareaService.filterTareas( mode );
+  }
+
+  clearTareas(){
+    this.tareaService.clearTareas();
+  }
+
+  ngOnDestroy(): void {
+    console.log('onDestroy')
+  }
+}

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

@@ -6,59 +6,17 @@ <h1>My Day</h1>
       <input
         class="new-todo"
         placeholder="Type new todo"
-        autofocus
+        appAutofocus
         type="text"
+        [(ngModel)]="titleTarea"
+        (keydown.enter)="addTarea()"
+        minlength="1"
       />
     </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 [filtro]="filtro"></app-main>
     <!-- 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>
   </div>
 </section>

src/app/pages/home/home.component.ts

@@ -1,14 +1,47 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Tarea } from 'src/app/models/tarea.model';
+import { TareaService } from 'src/app/services/tarea.service';
+import { Subscription } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, OnDestroy {
+
+  titleTarea: string = '';
+  contador: number = 0;
+  subContador!: Subscription;
+  filtro: string = 'all';
 
-  constructor() { }
+  constructor(
+    private tareaService: TareaService,
+    private activatedroute:ActivatedRoute
+  ) { }
 
   ngOnInit(): void {
+    this.tareaService.getTareas();
+    this.subContador = this.tareaService.contador$
+    .subscribe(cont => {
+      this.contador = cont;
+    });
+
+    this.activatedroute.params
+    .subscribe(param => {
+      this.filtro = param['filtro'];
+      this.tareaService.filterTareas(param['filtro'])
+    });
+  }
+
+  addTarea(){
+    let tarea: Tarea = { id: 0, title: this.titleTarea.replace(/ +(?= )/g,''), completed: false };
+    this.tareaService.addTarea(tarea);
+    this.titleTarea = '';
+  }
+
+  ngOnDestroy(): void {
+    this.subContador.unsubscribe();
   }
 
 }

src/app/pages/main/main.component.html

@@ -0,0 +1,16 @@
+<section class="main">
+    <ul class="todo-list" *ngFor="let tarea of tareasTemp; index as i">
+
+      <li [ngClass]="{'completed': tarea.completed === true, 'editing': tarea.id === tareaEdit.id }">
+        <div class="view" *ngIf="isEditing === false">
+          <input class="toggle" type="checkbox" (checked)="tarea.completed" [(ngModel)]="tarea.completed" (ngModelChange)="updateTarea(tarea)"/>
+          <label (dblclick)="editTarea(tarea)">{{ tarea.title }}</label>
+          <button class="destroy" type="button" (click)="deleteTarea(i)"></button>
+        </div>
+        <input *ngIf="isEditing === true" class="edit" appAutofocus #edit [(ngModel)]="tareaEdit.title" (keydown)="key($event)"/>
+      </li>
+
+    </ul>
+</section>
+
+<app-footer *ngIf="contador > 0" [contador]="contador" [showButton]="showButton" [word]="word"></app-footer>