src/app/components/answers/answers.component.ts
Para ver y modificar las respuestas hechas por el usuario.
| selector | app-answers |
| styleUrls | ../home/home.component.css |
| templateUrl | ./answers.component.html |
Properties |
Methods |
| delet | |||||||||
delet(template: TemplateRef
|
|||||||||
|
Ventana de modal para borrar una respuesta.
Parameters :
Returns :
void
|
| delete |
delete()
|
|
Elimina una respuesta existente.
Returns :
void
|
| getAnswers |
getAnswers()
|
|
Obtiene las respuestas hechas por el usuario.
Returns :
any
|
| modify | |||||||||
modify(template: TemplateRef
|
|||||||||
|
Ventana de modal para modificar una respuesta.
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Obtiene todas las publicaciones de usuario al inicio
Returns :
void
|
| update | ||||||
update(form: NgForm)
|
||||||
|
Modifica una respuesta existente.
Parameters :
Returns :
any
|
| aanswers |
Type : Answers[]
|
|
Arreglo de respuestas. |
| pposts |
Type : Posts[]
|
|
Arreglo de publicaciones. |
| selectedAnswer |
Type : Answers
|
|
Respuesta seleccionada actualmente. |
| uuser |
Type : Customers[]
|
|
Arreglo de usuarios. |
import { Component, OnInit, TemplateRef } from '@angular/core';
import {AuthenticationService} from '../../auth/authentication.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {PostsService} from '../../services/posts.service';
import {AnswersService} from '../../services/answers.service';
import { NgForm } from '@angular/forms';
import { Router } from "@angular/router";
import { Posts } from '../../../models/posts';
import { Customers } from '../../../models/customers';
import { Answers } from '../../../models/answers';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
/**
*Para ver y modificar las respuestas hechas por el usuario.
*/
@Component({
selector: 'app-answers',
templateUrl: './answers.component.html',
styleUrls: ['../home/home.component.css']
})
export class AnswersComponent implements OnInit {
/**
*Arreglo de publicaciones.
*/
pposts: Posts[];
/**
*Arreglo de usuarios.
*/
uuser: Customers[];
/**
*Arreglo de respuestas.
*/
aanswers: Answers[];
/**
*Respuesta seleccionada actualmente.
*/
selectedAnswer: Answers;
/**
*@ignore
*/
modalRef1: BsModalRef;
/**
*@ignore
*/
modalRef2: BsModalRef;
/**
*@ignore
*/
constructor(private modalService: BsModalService, private router: Router, private posts: PostsService, private answers: AnswersService, private auth: AuthenticationService, private http: HttpClient, private toastr: ToastrService)
{
}
/**
*Obtiene las respuestas hechas por el usuario.
*/
getAnswers()
{
return this.answers.getAnswersUser(this.auth.getUserDetails().id_user)
.subscribe(
answers => {
this.aanswers = answers
})
};
/**
*Ventana de modal para modificar una respuesta.
*/
modify(template: TemplateRef<any>, modifyAnswer: Answers)
{
this.selectedAnswer = modifyAnswer;
this.modalRef1 = this.modalService.show(template);
this.modalRef1.hide();
}
/**
*Ventana de modal para borrar una respuesta.
*/
delet(template: TemplateRef<any>, delAnswer: Answers)
{
this.selectedAnswer = delAnswer;
this.modalRef2 = this.modalService.show(template);
this.modalRef2.hide();
}
/**
*Modifica una respuesta existente.
*/
update(form: NgForm) {
if(form.value.text != "")
{
this.selectedAnswer.text = form.value.text;
}
else
{
this.toastr.warning('Debe añadirse texto a la respuesta');
return null;
}
if(form.value.price > 0)
{
this.selectedAnswer.price = form.value.price;
}
else if(form.value.price <= 0)
{
this.toastr.warning('Debe añadirse un precio a la publicación');
return null;
}
this.answers.updateAnswer(this.selectedAnswer)
.subscribe(() => {
this.toastr.success('Respuesta editada exitosamente');
},
err =>{
this.toastr.error('Error al editar respuesta');
});
this.modalRef1.hide();
}
/**
*Elimina una respuesta existente.
*/
delete()
{
this.answers.deleteAnswer(this.selectedAnswer).subscribe(
() => {
this.toastr.success('Respuesta borrada exitosamente');
this.ngOnInit();
},
err => {
this.toastr.error('Error al borrar la respuesta');
}
);
this.modalRef2.hide();
}
/**
*Obtiene todas las publicaciones de usuario al inicio
*/
ngOnInit()
{
this.getAnswers();
}
}
<!--Visualización de tarjetas-->
<div class="container-fluid" *ngFor="let answer of aanswers">
<div *ngIf="answer.id_owner == this.auth.getUserDetails().id_user">
<div class="notice notice-success notice-lg">
<p>{{ answer.text }}</p>
<hr>
<strong>Precio acordado:</strong>
<p>{{ answer.price | currency: 'USD'}}</p>
<hr>
<div *ngIf="answer.valorated">
<button class="btn btn-success disabled btn-unlock">Esta respuesta ha sido marcada como útil</button>
</div>
<div *ngIf="!answer.valorated">
<button class="btn btn-danger disabled btn-unlock">Esta respuesta NO fue útil</button>
</div>
<hr>
<div class="text-right">
<button type="button" class="btn btn-primary btn-modify" (click)="modify(template1, answer)"
tooltip="Modificar la respuesta" placement="bottom">
<i class="fas fa-pencil-alt"></i>
</button>
<button type="button" class="btn btn-danger btn-delete" (click)="delet(template2, answer)"
tooltip="Eliminar la respuesta" placement="bottom">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
<!--Modal para modificar la respuesta-->
<ng-template #template1>
<div class="modal-header">
<h4 class="modal-title pull-left">Modificar respuesta</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef1.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container text-center">
<div class="tab-content">
<form #f="ngForm" class="form">
<div class="form-group">
<div class="col-xs-6">
<label for="name"><h4>Texto</h4></label>
<textarea type="text" name="text" class="form-control" placeholder="{{selectedAnswer.text}}" [(ngModel)]="selectedAnswer.text">
</textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="descripcion"><h4>Descripción</h4></label><br>
<input type="number" name="price" placeholder="{{selectedAnswer.price | currency:'USD'}}" [(ngModel)]="selectedAnswer.price">
</div>
</div>
<hr>
<div class="form-group text-center">
<div class="col-xs-12">
<br>
<button class="btn btn-primary" (click)="update(f)" type="submit">Actualizar
<i class="fas fa-sync-alt"></i>
</button>
<br><br>
<button class="btn btn-cancelar btn-danger" (click)="modalRef1.hide()">Cancelar
<i class="far fa-times-circle"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</ng-template>
<!--Modal para eliminar la respuesta-->
<ng-template #template2>
<div class="modal-header">
<h4 class="modal-title pull-left">Eliminar respuesta</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
¿Desea borrar de forma permanente la respuesta seleccionada?
<br><br>
<div class="text-center">
<button (click)="delete()" class="btn btn-success" type="button">Sí</button>
<button (click)="modalRef2.hide()" class="btn btn-danger btn-cancelar" type="button">No</button>
</div>
</div>
</ng-template>
../home/home.component.css
.btn-create, .btn-modify, .btn-delete, .btn-answer, .btn-sad
{
border-radius: 60%;
-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);
}
.btn-unlock
{
-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);
}
.notice {
padding: 15px;
background-color: #fafafa;
border-left: 6px solid #7f7f84;
margin-bottom: 10px;
-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: #202123;
}
.notice-lg {
padding: 35px;
font-size: large;
}
.notice-md {
padding: 25px;
font-size: medium;
}
.notice-success {
border-color: #80D651;
}
.notice-success>strong {
color: #80D651;
}
.notice-info {
/*border-color: #45ABCD;*/
border-color: #ac45cd;
}
.notice-info>strong {
/*color: #45ABCD;*/
color: #ac45cd;
}
.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;
}
hr
{
background-color: azure;
}
.row
{
padding: 20px;
}
/*Prop. para imágenes*/
.img-content {
display: block;
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
}
.img-content-user {
display: block;
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
}
.avatar
{
display: block;
width: 500px;
height: 480px;
margin-left: auto;
margin-right: auto;
}
.modal-body
{
color: #151515;
}
.info
{
color: #80D651;
}