fix-lab documentation
  1. Components
  2. ProfileComponent

File

src/app/components/profile/profile.component.ts

Description

Muestra y modifica los datos de perfil del usuario.

Implements

OnInit

Metadata

selector app-profile
styleUrls ./profile.component.css
templateUrl ./profile.component.html

Index

Properties
Methods

Methods

cancelEdit
cancelEdit()
Defined in src/app/components/profile/profile.component.ts:137

Cancela la actualización de los datos de usuario.

Returns : void
deleteImage
deleteImage(downloadUrl)
Defined in src/app/components/profile/profile.component.ts:150

Para eliminar la imagen a partir de una URL.

Parameters :
Name Optional
downloadUrl No
Returns : any
editprofile
editprofile(form: NgForm)
Defined in src/app/components/profile/profile.component.ts:83

Para editar el perfil del usuario.

Parameters :
Name Type Optional
form NgForm No
Returns : void
getUserProfile
getUserProfile()
Defined in src/app/components/profile/profile.component.ts:72

Obtiene el perfil del usuario.

Returns : void
ngOnInit
ngOnInit()
Defined in src/app/components/profile/profile.component.ts:158

Obtiene los datos del perfil al inicio.

Returns : void
update
update(template: TemplateRef)
Defined in src/app/components/profile/profile.component.ts:63

Modal editar un usuario.

Parameters :
Name Type Optional
template TemplateRef<any> No
Returns : void
upload
upload(event)
Defined in src/app/components/profile/profile.component.ts:112

Carga la imagen de perfil en Firebase Storage.

Parameters :
Name Optional
event No
Returns : void

Properties

downloadURL
Type : Observable<string>
Defined in src/app/components/profile/profile.component.ts:41

URL de descarga de la imagen.
imageUrl
Type : string
Default value : null
Defined in src/app/components/profile/profile.component.ts:25

URL para la imagen a cargar en Firebase Storage.
oldimageUrl
Type : string
Default value : null
Defined in src/app/components/profile/profile.component.ts:29

URL para la imagen a eliminar de Firebase Storage.
ref
Type : AngularFireStorageReference
Defined in src/app/components/profile/profile.component.ts:37

Referencia al Storage de Firebase.
selectedUser
Type : Customers
Default value : new Customers()
Defined in src/app/components/profile/profile.component.ts:45

Usuario seleccionado actualemente.
uploadProgress
Type : Observable<number>
Defined in src/app/components/profile/profile.component.ts:33

Progreso en la subida de la imagen.

 
import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import {AuthenticationService} from '../../auth/authentication.service';
import { Router } from "@angular/router";
import { NgForm } from '@angular/forms';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { Customers } from '../../../models/customers';
import { AngularFireStorageReference, AngularFireStorage } from '@angular/fire/storage';
import { ToastrService } from 'ngx-toastr';

/**
*Muestra y modifica los datos de perfil del usuario.
**/
@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit 
{
  /**
  *URL para la imagen a cargar en Firebase Storage.
  **/
  imageUrl: string = null;
  /**
  *URL para la imagen a eliminar de Firebase Storage.
  **/  
  oldimageUrl: string = null;
  /**
  *Progreso en la subida de la imagen.
  **/    
  uploadProgress: Observable<number>;
  /**
  *Referencia al Storage de Firebase.
  **/     
  ref: AngularFireStorageReference;
  /**
  *URL de descarga de la imagen.
  **/    
  downloadURL: Observable<string>;
  /**
  *Usuario seleccionado actualemente.
  **/    
  selectedUser: Customers = new Customers();
  /**
  *@ignore
  */
  descriptionValue;
  /**
  *@ignore
  */
  modalRef1: BsModalRef;
  /**
  *@ignore
  */
  constructor(private modalService: BsModalService, private auth: AuthenticationService,private router: Router, private storage: AngularFireStorage, private toastr: ToastrService) 
  { }

  /**
  *Modal editar un usuario.
  */
  update(template: TemplateRef<any>) 
  {
    this.modalRef1 = this.modalService.show(template);
    this.modalRef1.hide();
  }

  /**
  *Obtiene el perfil del usuario.
  */
  getUserProfile()
  {
    this.auth.getUser(this.auth.getUserDetails().id_user).subscribe(user=>{
      this.selectedUser = user;
      this.descriptionValue = this.selectedUser.description;
    });
  }

  /**
  *Para editar el perfil del usuario.
  */
  editprofile(form: NgForm) {

    if(this.imageUrl!=null)
    {
      this.oldimageUrl=this.selectedUser.image;
      this.selectedUser.image=this.imageUrl;
      if(this.oldimageUrl!=null)
      {
        this.deleteImage(this.oldimageUrl);
      }
      this.imageUrl=null;
    }

    this.selectedUser.description = form.value.description;

    this.auth.editprofile(this.selectedUser).subscribe(
      () => {
        this.toastr.success('Se han editado los datos del usuario exitosamente');
        this.ngOnInit();
      },
      err => {
        this.toastr.error('Error al editar los datos del usuario');
      }
    );
  }

  /**
  *Carga la imagen de perfil en Firebase Storage.
  */ 
  upload(event) 
  {
    // Obtiene la imagen:
    const file = event.target.files[0];
    
    // Genera un ID random para la imagen:
    const randomId = Math.random().toString(36).substring(2);
    const filepath = `Avatars/${randomId}`;
    // Cargar imagen:
    const task = this.storage.upload(filepath, file);
    this.ref = this.storage.ref(filepath);
    // Observa los cambios en el % de la barra de progresos:
    this.uploadProgress = task.percentageChanges();
    // Notifica cuando la URL de descarga está disponible:
    task.snapshotChanges().pipe(
      finalize(() => {
        this.downloadURL = this.ref.getDownloadURL();  
        this.downloadURL.subscribe(url => {this.imageUrl = url} );
      })
    ).subscribe();
  }

  /**
  *Cancela la actualización de los datos de usuario.
  */
  cancelEdit()
  {
    if(this.imageUrl!=null)
    {
      this.deleteImage(this.imageUrl);
    }
    this.imageUrl=null;
    this.modalRef1.hide();
  }

  /**
  *Para eliminar la imagen a partir de una URL.
  */
  deleteImage(downloadUrl) 
  {
    return this.storage.storage.refFromURL(downloadUrl).delete();
  }

  /**
  *Obtiene los datos del perfil al inicio.
  */
  ngOnInit() 
  {
    this.getUserProfile();
  }

}

<div class="container-fluid box">

    <!--Imagen de Perfil-->
    <div class="img-profile">
        <img class="img-fluid img-circle img-thumbnail" *ngIf="this.selectedUser.image" 
        src="{{this.selectedUser.image}}">
        <img class="img-fluid img-circle img-thumbnail" *ngIf="this.selectedUser.image == null" 
        src="/assets/images/sin-perfil.png">
    </div>
    <hr>
    <h4>Nombre de Usuario:</h4>
        <h6>{{this.selectedUser.username  | titlecase}}</h6>
        <br>
    <h4>Correo:</h4>
        <h6>{{this.selectedUser.email}}</h6>
        <br>
    <h4>Descripción:</h4>
        <h6>{{this.selectedUser.description}}</h6>
        <br>
    <h4>Número de respuestas valoradas:</h4>
        <h6>{{this.selectedUser.respuestas_valoradas}}</h6>
        <br>        
    <h4>Rating promedio del usuario:</h4>
        <div *ngIf="this.selectedUser.rating==0 || this.selectedUser.rating==null">
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
        </div>                      
        <div *ngIf="this.selectedUser.rating==1">
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
        </div>
        <div *ngIf="this.selectedUser.rating==2">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
        </div>
        <div *ngIf="this.selectedUser.rating==3">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
        </div>
        <div *ngIf="this.selectedUser.rating==4">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
        </div>
        <div *ngIf="this.selectedUser.rating==5">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
        </div>        
        <br>        
    <hr>
    <button type="button" class="btn btn-primary" (click)="update(template1)"placement="bottom">
        Actualizar datos
        &nbsp;<i class="fas fa-edit"></i>
    </button>
    
</div>

<!--Modal para actualizar los datos del usuario actual-->
<ng-template #template1>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Actualizar datos de usuario</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef1.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="container text-center">
            <div class="tab-content">
                
                <form #f="ngForm" class="form" id="ProductForm">
                    <div class="img-profile">
                        <img class="img-fluid img-circle img-thumbnail" *ngIf="this.selectedUser.image && this.imageUrl==null" src="{{this.selectedUser.image}}">
                        <img class="img-fluid img-circle img-thumbnail" *ngIf="this.selectedUser.image == null && this.imageUrl==null" src="/assets/images/sin-perfil.png">
                        <img class="img-fluid profile-pic" *ngIf="this.imageUrl!=null" src={{this.imageUrl}} class="img-thumbnail img-circle img-fluid">

                    </div>
                    <br>

                    <div class="container">
                       <!--Barra de progreso-->
                       <progressbar [value]="uploadProgress| async" type="primary" [striped]="true" [animate]="true"></progressbar>

                        <!--Muestra el progreso de la barra-->
                        <div class="container">
                            Progress: {{ (uploadProgress | async) / 100 | percent }}
                        </div>
                        <br>
                        <div *ngIf="downloadURL | async; let downloadSrc" class="alert alert-info" role="alert">
                            <p>La foto se cargó correctamente</p>
                        </div>
                        <br>
                        <!--Se sube una nueva foto para el usuario-->
                        <div class="item">
                            <!--Selecciona un archivo .png o .jpg-->
                            <input #inputFile class="hidden" type="file" (change)="upload($event)" accept=".png,.jpg">
                            <!--Botón para poner en funcionamiento el input-->
                            <button type="button" class="btn btn-lg btn-success" (click)="inputFile.click()">
                                Subir foto
                                <i class="fas fa-upload"></i>
                            </button>
                        </div>
                    </div>
                    <hr>

                    <div class="form-group">
                        <div class="col-xs-6">
                            <label for="first_name"><h4>Nombre de Usuario</h4></label>
                            <input type="text" disabled
                            placeholder="{{this.selectedUser.username  | titlecase}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <label for="email"><h4>Email</h4></label>
                            <input type="text" disabled 
                            placeholder="{{this.selectedUser.email}}">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-6">
                            <label for="description"><h4>Descripción</h4></label>
                            <input #description type="text" class="form-control" name="description" 
                            id="description" placeholder="{{this.selectedUser.description}}" [(ngModel)]="descriptionValue" >
                        </div>
                    </div>                    

                    <hr>
                    <div class="form-group text-center">
                        <div class="col-xs-12">
                            <br>
                            <button class="btn btn-primary" (click)="editprofile(f)" type="submit">Actualizar
                                            <i class="fas fa-sync-alt"></i>
                            </button>
                            <br><br>
                            <button class="btn btn-cancelar btn-danger" (click)="cancelEdit()">Cancelar
                                            <i class="far fa-times-circle"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</ng-template>

./profile.component.css 

img
{
    margin:3px;
    padding:2px;
    height: 250px;
    width: 250px;
    border-radius: 70%;
}

.box
{
    text-align: center;
    color: #151515;
    background-color: #fafafa;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    padding: 15px;
    box-sizing: border-box;
}

input 
{
    width: 100%;
    margin-bottom: 20px;
}

input[type="text"], input[type="password"] 
{
    outline: none;
    height: 40px;
    font-size: 16px;
}
  
input[type="submit"], input[type="button"] 
{
    border: none;
    outline: none;
    height: 40px;
    color: azure;
    font-size: 18px;
}

hr
{
    background-color: azure;
}

.modal-header
{
    background: #834d9b;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #d04ed6, #834d9b);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #d04ed6, #834d9b);
    color: white;
}


.hidden 
{  
    display: none;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""