Editando notas

Clase 22 de 31 • Curso de PWA con Angular 2018

Clase anteriorSiguiente clase

Julio J Yépez

student•

Mis resultados para el tercer reto del curso:

Use para el mensaje de confirmación un confirm(…) de JS … para no complicarme …

Julio J Yépez

student•

Les dejo el link del repo en Github … los comentarios y las sugerencias siempre son bienvenidos.

Wilson Alejandro Gonzalez Gaitan

student•

Gracias me fui util

Carlos Enrique Ramírez Flores

student•

como se ve!

Jecsham Castillo

student•

Recomiendo y agreguen un botón de Clear por si el usuario se arrepiente de editar y quiere crear (así no interfiere con el último id que seleccionó)

clearNote(){
    this.note = {}
  }

Alex Eugenio Gavidia Donayre

student•

Buena idea

Carlos Enrique Ramírez Flores

student•

ahi va!

Carlos Uriel de Jesus Sánchez González

student•

buen reto

Mario Alejandro Cortez Salinas

student•

Código en component.html
<h3 matLine> {{nota.titulo}} <div class='icono-eliminar' (click)="eliminarNota(nota)">❌</div> </h3>

Código en component.ts
eliminarNota(nota){ this.notesService.deleteNote(nota).then(()=>{ this.nota = {}; this.snackBar.open("Nota Eliminada", null, { duration: 8000, }); }); }

Código de service.ts
public deleteNote(note){ return this.afDB.database.ref('/notes/'+note.id).remove(); }

Código en styles.css
.icono-eliminar{ float: right; font-weight: normal; opacity:.8; }

José Coronel

student•

Les comparto mis resultados:
Primero genere el componente del modal del mensaje de la pregunta para eliminar la nota con la siguiente linea.

ng generate component //nombre del componente

Este es el modal dialog component html

<h2 mat-dialog-title>Eliminar nota</h2>
<mat-dialog-content>¿Esta seguro de eliminar esta nota?</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>NO</button>
  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
  <button mat-button [mat-dialog-close]="true">SI</button>
</mat-dialog-actions>

app.component.ts
mando llamar la pregunta:

  eliminarNota(nota) {
    this.notesService.deleteNote(nota).then(() => { 
      this.snackBar.open('Nota eliminada', null, {
        duration: 2000,
      });
    }).catch((err) => { console.log(err); });
  }
  openDialog(nota) {
    const dialogRef = this.dialog.open(ModalDialogComponent, {
      height: '100px',
      width: '250px'
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.eliminarNota(nota);
        this.nota = {};
      }
    });

ModalDialogComponent es el nombre de la clase del componente que generamos al principio.

en el app.module.ts importo el componente

@NgModule({
  declarations: [
    ModalDialogComponent
  ],
  imports: [
  ],
  entryComponents: [
    ModalDialogComponent
  ],
  exports: [ModalDialogComponent]
})
export class AppModule { }

en el app.component.html mando llamar el metodo que despliega
la ventana

<mat-card role="listitem" *ngFor="let nota of notas" (click)="seleccionarNota(nota);">
          <h3 matLine>{{nota.titulo}}</h3>
          <p matLine>{{nota.cuerpo}}</p>
          <small matLine>{{nota.categoria}} - {{nota.id | date}}</small>
          <button mat-raised-button color="accent" (click)="openDialog(nota)">Eliminar</button>
</mat-card>

Carlos Enrique Ramírez Flores

student•

Listo reto cumplido

import { Component, OnInit, Inject } from '@angular/core';
import { SwUpdate } from "@angular/service-worker";
import { NoteService } from '../services/note.service';
import { MatSnackBar, MatDialog, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pwa';
  panelOpenState = false;
  categories: any;
  note: any = {};
  notes: any;
  constructor(private swUpdate: SwUpdate,
    public snackBar: MatSnackBar,
    public dialog: MatDialog,
    private noteService: NoteService) {
    this.categories = [
      { value: 'Personal', viewValue: 'Personal' },
      { value: 'Trabajo', viewValue: 'Trabajo' },
      { value: 'Otros', viewValue: 'Otros' }
    ];
    noteService.getNotes()
      .valueChanges()
      .subscribe((nots) => {
        this.notes = nots;
        }
        , e => console.log(e))
  }
  ngOnInit(): void {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe(() => {
        alert('cambio');
        window.location.reload();
      })
    }
  }
  saveNote() {
    let $stringNote = 'note edited success!';
    if (!this.note.id) {
      this.note.id = Date.now();
      $stringNote = 'note saved success!';
    }
    this.noteService
      .createNote(this.note)
      .then((res) => {
        this.note = {};
        this.snackBar.open($stringNote, null, {
            duration: 2000,
        });
      })
      .catch(e => console.log(e));
  }
  editNote(note) {
    this.note = note;
  }
  deleteNote(note) {
    this.dialog.open(DialogDeleteNote, {
      data: {
        title: note.title,
        id:note.id
      }
    });
  }

}
@Component({
  selector: 'app-modal-delete',
  template: `<h2 mat-dialog-title>Delete note</h2>
                <mat-dialog-content>Are you sure delete note {{dat.title}}?</mat-dialog-content>
                <mat-dialog-actions>
                  <button mat-button mat-dialog-close>No</button>
                  <button mat-button [mat-dialog-close]="true" (click)="removeNote(dat.id)">Yes</button>
                </mat-dialog-actions>`
})
export class DialogDeleteNote {
  constructor(@Inject(MAT_DIALOG_DATA) public dat: any,
              public snackBar: MatSnackBar,
              private noteService: NoteService) { }
  removeNote(id) {
    this.noteService.deleteNote(id)
      .then(() => {
        this.snackBar.open('The note deleted!', null, {
          duration: 4000,
        });  
      });
  }
}

Alex Eugenio Gavidia Donayre

student•

Reto resuelto

Yenny Garavito

student•

Reto Listo!

Jesús Leonardo Perea Alarcón

student•

Hola a todos, listo el reto.

openDialogDelete(nota): void {
      const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
        width: '350px',
        data: "Eliminar la Nota [" + nota.titulo + "] ?"
      });
      dialogRef.afterClosed().subscribe(result => {
        if(result) {
          this.borrarNota(nota);
        }
        else{}
      });
    }
    
    borrarNota(nota){
      console.log('se quiere borrar: '+nota.id);
      this.notesService.deleteNote(nota.id).then ( ()=>{
        this.nota = {};
        this._snackBar.open('Nota Borrada',null,{duration: 3000,});
      });
    }

En el html use mat-icon:

<button mat-icon-button aria-label="delete">
        <mat-icon (click)="openDialogDelete(nota)">delete</mat-icon>
      </button>```

Juan Sebastian Figueroa Rodriguez

student•

Así va de momento.

aquí les dejo el lindo del repositorio, cualquier comentario y/o aporte es bien recibido.

José Ignacio Miranda

student•

Otra manera de hacerlo podría ser también.

this.notesServices.createNote({... this.nota, id: this.nota.id ? this.nota.id : Date.now()})

José Ignacio Miranda

student•

this.notesServices.createNote({... this.nota, id: this.nota.id || Date.now()})

Wilson Fabian Pérez Sucuzhañay

student•

Bueno realizado, pero no se si es bueno que la acción este en el app o en potro componente aparte como servicio? cual seria el correcto?

Si alguien necesita como hacerla me pueden decir donde creo un tutorial o algo primera vez que quiero hacer eso jaja

Julio J Yépez

student•

Adelante @wp_wilsonperez …
Estaría bueno ver ese tutorial! … ayudaría a los estudiantes a aclarar las dudas!

También sería interesante conocer tu punto de vista sobre dónde debería ir cada método …

Julio J Yépez

student•

Como conocimiento general, los sistemas o aplicaciones que permiten la Creación, Obtención, Actualización y Eliminación de registros en una fuente de datos … se les llama regularmente CRUDs por las siglas en inglés de Create, Retreive, Update and Delete data.

Julio J Yépez

student•

En el método guardarNota(nota) … creo que semánticamente lo más correcto sería que además de verificar la existencia de para no volver a generarle un id, también se llamara al método editNote(nota) que creamos … en lugar de createNote(nota), a pesar de que internamente hacen lo mismo … por ahora.

Y finalmente mostrar en el SnackBar … Nota actualizada cuando ya exista … y Nota creada cuando es nueva.

<h2 mat-dialog-title>Eliminar nota</h2>
<mat-dialog-content>¿Esta seguro de eliminar esta nota?</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close>NO</button>
  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
  <button mat-button [mat-dialog-close]="true">SI</button>
</mat-dialog-actions>

  eliminarNota(nota) {
    this.notesService.deleteNote(nota).then(() => { 
      this.snackBar.open('Nota eliminada', null, {
        duration: 2000,
      });
    }).catch((err) => { console.log(err); });
  }
  openDialog(nota) {
    const dialogRef = this.dialog.open(ModalDialogComponent, {
      height: '100px',
      width: '250px'
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.eliminarNota(nota);
        this.nota = {};
      }
    });

<mat-card role="listitem" *ngFor="let nota of notas" (click)="seleccionarNota(nota);">
          <h3 matLine>{{nota.titulo}}</h3>
          <p matLine>{{nota.cuerpo}}</p>
          <small matLine>{{nota.categoria}} - {{nota.id | date}}</small>
          <button mat-raised-button color="accent" (click)="openDialog(nota)">Eliminar</button>
</mat-card>

import { Component, OnInit, Inject } from '@angular/core';
import { SwUpdate } from "@angular/service-worker";
import { NoteService } from '../services/note.service';
import { MatSnackBar, MatDialog, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pwa';
  panelOpenState = false;
  categories: any;
  note: any = {};
  notes: any;
  constructor(private swUpdate: SwUpdate,
    public snackBar: MatSnackBar,
    public dialog: MatDialog,
    private noteService: NoteService) {
    this.categories = [
      { value: 'Personal', viewValue: 'Personal' },
      { value: 'Trabajo', viewValue: 'Trabajo' },
      { value: 'Otros', viewValue: 'Otros' }
    ];
    noteService.getNotes()
      .valueChanges()
      .subscribe((nots) => {
        this.notes = nots;
        }
        , e => console.log(e))
  }
  ngOnInit(): void {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe(() => {
        alert('cambio');
        window.location.reload();
      })
    }
  }
  saveNote() {
    let $stringNote = 'note edited success!';
    if (!this.note.id) {
      this.note.id = Date.now();
      $stringNote = 'note saved success!';
    }
    this.noteService
      .createNote(this.note)
      .then((res) => {
        this.note = {};
        this.snackBar.open($stringNote, null, {
            duration: 2000,
        });
      })
      .catch(e => console.log(e));
  }
  editNote(note) {
    this.note = note;
  }
  deleteNote(note) {
    this.dialog.open(DialogDeleteNote, {
      data: {
        title: note.title,
        id:note.id
      }
    });
  }

}
@Component({
  selector: 'app-modal-delete',
  template: `<h2 mat-dialog-title>Delete note</h2>
                <mat-dialog-content>Are you sure delete note {{dat.title}}?</mat-dialog-content>
                <mat-dialog-actions>
                  <button mat-button mat-dialog-close>No</button>
                  <button mat-button [mat-dialog-close]="true" (click)="removeNote(dat.id)">Yes</button>
                </mat-dialog-actions>`
})
export class DialogDeleteNote {
  constructor(@Inject(MAT_DIALOG_DATA) public dat: any,
              public snackBar: MatSnackBar,
              private noteService: NoteService) { }
  removeNote(id) {
    this.noteService.deleteNote(id)
      .then(() => {
        this.snackBar.open('The note deleted!', null, {
          duration: 4000,
        });  
      });
  }
}

openDialogDelete(nota): void {
      const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
        width: '350px',
        data: "Eliminar la Nota [" + nota.titulo + "] ?"
      });
      dialogRef.afterClosed().subscribe(result => {
        if(result) {
          this.borrarNota(nota);
        }
        else{}
      });
    }
    
    borrarNota(nota){
      console.log('se quiere borrar: '+nota.id);
      this.notesService.deleteNote(nota.id).then ( ()=>{
        this.nota = {};
        this._snackBar.open('Nota Borrada',null,{duration: 3000,});
      });
    }

Editando notas

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?