Ejercicio Reactive Forms

.gitignore

@@ -24,6 +24,7 @@ speed-measure-plugin*.json
 *.sublime-workspace
 
 # IDE - VSCode
+.vscode/
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json

angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
               "src/styles.scss"
@@ -94,6 +95,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
               "src/styles.scss"
@@ -129,5 +131,8 @@
       }
     }
   },
-  "defaultProject": "ng-peti"
+  "defaultProject": "ng-peti",
+  "cli": {
+    "analytics": false
+  }
 }

package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.1.1",
+    "@angular/cdk": "^9.2.4",
     "@angular/common": "~9.1.1",
     "@angular/compiler": "~9.1.1",
     "@angular/core": "~9.1.1",
     "@angular/forms": "~9.1.1",
+    "@angular/material": "^9.2.4",
     "@angular/platform-browser": "~9.1.1",
     "@angular/platform-browser-dynamic": "~9.1.1",
     "@angular/router": "~9.1.1",

src/app/app.component.html

@@ -4,27 +4,3 @@
 <div class="container">
   <app-todo></app-todo>
 </div>
-
-<br>
-<br>
-<div>
-  <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
-  <label>
-    First Name:
-    <input type="text" formControlName="firstName">
-  </label>
-  <label>
-    Last Name:
-    <input type="text" formControlName="lastName">
-  </label>
-  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
-  <button type="button" (click)="initialize()" >Reset</button>
-</form>
-<div>
-  <div>
-    Valido {{profileForm.valid}}
-
-  </div>
-  Touched {{profileForm.touched}}
-</div>
-</div>

src/app/app.component.ts

@@ -1,32 +1,17 @@
 import { Component } from '@angular/core';
-import { FormGroup, FormControl, Form, Validators, AbstractControl } from '@angular/forms';
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  AbstractControl,
+  ValidatorFn,
+} from '@angular/forms';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'Todo';
-  profileForm = new FormGroup({
-    firstName: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-    lastName: new FormControl('', [Validators.required, StartsWithAValidator]),
-  })
-    constructor () {
-      this.profileForm.valueChanges.subscribe(value => console.log(value));
-    }
-
-  onSubmit() {
-    console.log(this.profileForm.value);
-  }
-  initialize() {
-    this.profileForm.reset()
-  }  
 }
-
-export function StartsWithAValidator(control: AbstractControl) {
-  if (!control.value.startsWith('A')) {
-    return { startsWithA: true };
-  }
-  return null;
-}

src/app/app.module.ts

@@ -1,16 +1,21 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TodoAppComponent } from './todo-app/todo-app.component';
 import { TodoFormComponent } from './todo-form/todo-form.component';
 import { TodoListComponent } from './todo-list/todo-list.component';
 import { TodoFooterComponent } from './todo-footer/todo-footer.component';
-import { TodoService } from './todo.service';
 import { StatsComponent } from './stats/stats.component';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatTableModule } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @NgModule({
   declarations: [
@@ -25,9 +30,16 @@ import { ReactiveFormsModule } from '@angular/forms';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    MatTableModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatProgressBarModule,
+    MatFormFieldModule,
+    MatInputModule,
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/custom-error-matcher.ts

@@ -0,0 +1,8 @@
+import { FormControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+
+export class CustomErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl, form: NgForm | FormGroupDirective | null) {
+    return control && control.invalid && control.touched;
+  }
+}

src/app/custom-validators.ts

@@ -0,0 +1,5 @@
+import { ValidatorFn, AbstractControl, Validators } from '@angular/forms';
+
+export const isUrl = Validators.pattern(
+  /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/
+);

src/app/model/todo-item.ts

@@ -1,7 +1,8 @@
 export class TodoItem {
   id: number;
   description: string;
-  isCompleted: boolean = false;
+  url: string;
+  isCompleted = false;
 
   toggleCompleted() {
     this.isCompleted = !this.isCompleted;

src/app/stats/stats.component.html

@@ -1,6 +1 @@
-<div
-    class="progressbar"
-    [ngStyle]="{width: completedPercentage() + '%'}"
->
-{{completedPercentage()}} %
-</div>
+<mat-progress-bar mode="determinate" [value]="completedPercentage()"></mat-progress-bar>

src/app/stats/stats.component.scss

@@ -1,6 +0,0 @@
-.progressbar {
-    background-color: green;
-    height: 50px;
-    font-size: x-large;
-    transition: width 0.3s;
-}

src/app/stats/stats.component.ts

@@ -4,17 +4,16 @@ import { TodoService } from '../todo.service';
 @Component({
   selector: 'app-stats',
   templateUrl: './stats.component.html',
-  styleUrls: ['./stats.component.scss']
+  styleUrls: ['./stats.component.scss'],
 })
-export class StatsComponent implements OnInit {
+export class StatsComponent {
+  constructor(private service: TodoService) {}
 
-  constructor(
-    private service: TodoService
-  ) { }
-
-  ngOnInit(): void {
-  }
   completedPercentage() {
-    return Math.round(this.service.completedSize() /  this.service.list.length * 100) || 0
+    return (
+      Math.round(
+        (this.service.completedSize() / this.service.list.length) * 100
+      ) || 0
+    );
   }
 }

src/app/todo-app/todo-app.component.html

@@ -1,12 +1,15 @@
-<app-todo-form (add)="onTodoItemCreated($event)"></app-todo-form>
+<app-todo-form
+  [itemToEdit]="itemToEdit"
+  (add)="onTodoItemCreated($event)"
+  (update)="onTodoItemUpdated($event)"
+></app-todo-form>
 <app-todo-list
-  [list]="getList()"
+  [dataSource]="getDataSource()"
   (itemRemoved)="onTodoItemRemoved($event)"
   (itemStateChanged)="onItemStateChanged($event)"
+  (itemEdit)="onItemEdit($event)"
 >
 </app-todo-list>
-<app-todo-footer
-  [list]="getList()"
->
-</app-todo-footer>
-<app-stats></app-stats>
+<app-stats></app-stats>
+<app-todo-footer [list]="getList()"> </app-todo-footer>
+

src/app/todo-app/todo-app.component.ts

@@ -1,29 +1,36 @@
-import { Component, OnInit } from '@angular/core';
-import {TodoItem} from '../model/todo-item';
-import { element } from 'protractor';
+import { Component } from '@angular/core';
+import { TodoItem } from '../model/todo-item';
 import { TodoService } from '../todo.service';
+import { MatTableDataSource } from '@angular/material/table';
 /** */
 @Component({
   selector: 'app-todo',
   templateUrl: './todo-app.component.html',
   styleUrls: ['./todo-app.component.scss'],
 })
-export class TodoAppComponent  {
-
-  constructor(
-    private service: TodoService
-  ) {}
+export class TodoAppComponent {
+  constructor(private service: TodoService) {}
+  itemToEdit: TodoItem = null;
 
   getList() {
     return this.service.list;
   }
+  getDataSource() {
+    return new MatTableDataSource<TodoItem>(this.service.list);
+  }
   onTodoItemRemoved(id) {
     this.service.remove(id);
   }
   onItemStateChanged(item: TodoItem) {
     item.toggleCompleted();
   }
-  onTodoItemCreated(task) {
-    this.service.add(task)
+  onTodoItemCreated(task: TodoItem) {
+    this.service.add(task);
+  }
+  onTodoItemUpdated(task: TodoItem) {
+    this.service.update(task);
+  }
+  onItemEdit(item: TodoItem) {
+    this.itemToEdit = item;
   }
 }

src/app/todo-footer/todo-footer.component.html

@@ -1,2 +1,4 @@
-<h2>Tasks Completed {{completedSize()}}</h2>
-<h2>Tasks To do {{incompletedSize()}} </h2>
+<div class="footer">
+  <h2>Tasks Completed {{ completedSize() }}</h2>
+  <h2>Tasks To do {{ incompletedSize() }}</h2>
+</div>

src/app/todo-footer/todo-footer.component.scss

@@ -0,0 +1,7 @@
+.footer {
+  margin-top: 0.5em;
+}
+
+h2 {
+  margin: 0;
+}