modificaciones de visualizacion en vista previa

This commit is contained in:
Mariela Bonilla 2021-07-25 16:48:21 -06:00
parent 5e441a343f
commit 8bb22a2602
6 changed files with 155 additions and 28 deletions

View File

@ -79,7 +79,7 @@
</div>
</div>-->
<div class="container-fluid">
<div class="container-fluid" *ngIf="encuesta">
<div>
<h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
<p class="ds-title">Vista previa de {{ encuesta!.nombre }}</p>
@ -141,15 +141,22 @@
class="ds-survey--option ds-survey--option--base ds-survey--closed-option can-delete checkbox"
[attr.data-id]="ePreguntaOpcionFinal.id"
>
<div *ngIf="ePregunta.tipo === 'SINGLE'">
<input
type="checkbox"
type="radio"
style="border-radius: 3px"
id="{{ 'checkbox' + ePreguntaOpcionFinal.id }}"
disabled="disabled"
name="{{ 'radio' + ePregunta.id }}"
id="{{ 'radio' + ePreguntaOpcionFinal.id }}"
/>
<!-- <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}" type="checkbox" disabled /> -->
<label for="{{ 'radio' + ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label>
</div>
<div *ngIf="ePregunta.tipo === 'MULTIPLE'">
<input type="checkbox" style="border-radius: 3px" id="{{ 'checkbox' + ePreguntaOpcionFinal.id }}" />
<!-- <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}" type="checkbox" disabled /> -->
<label for="{{ 'checkbox' + ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label>
</div>
</div>
</ng-container>
</ng-container>
</ng-container>
@ -160,10 +167,77 @@
</div>
</div>
</div>
<div class="col-3">
<p style="font-size: 1.2em" class="ds-survey--titulo--name">Cantidad de preguntas: {{ ePreguntas?.length }}</p>
<div>
<div class="col-3 info-encuesta">
<p style="font-size: 1.2em" class="ds-survey--titulo--name py-3">Cantidad de preguntas: {{ ePreguntas?.length }}</p>
<!--<div>
<p style="font-size: 1.2em" class="ds-survey--titulo--name">Colaboradores</p>
</div>-->
<dl>
<dt><span jhiTranslate="dataSurveyApp.encuesta.acceso">Acceso</span></dt>
<dd>
-
<span jhiTranslate="{{ 'dataSurveyApp.AccesoEncuesta.' + encuesta.acceso }}"> {{ encuesta.acceso }}</span>
</dd>
</dl>
<dl *ngIf="encuesta.acceso === 'PRIVATE'">
<dt><span jhiTranslate="dataSurveyApp.encuesta.contrasenna">Contrasenna</span></dt>
<dd>
<span>- {{ encuesta.contrasenna }}</span>
</dd>
</dl>
<dl>
<dt><span jhiTranslate="dataSurveyApp.encuesta.estado">Estado</span></dt>
<dd>
- <span jhiTranslate="{{ 'dataSurveyApp.EstadoEncuesta.' + encuesta.estado }}">{{ encuesta.estado }}</span>
</dd>
</dl>
<dl *ngIf="encuesta.categoria">
<dt><span jhiTranslate="dataSurveyApp.encuesta.categoria">Categoria</span></dt>
<dd>
<a>- {{ encuesta.categoria?.nombre }}</a>
</dd>
</dl>
<dl *ngIf="encuesta.acceso === 'PRIVATE'">
<dt><span jhiTranslate="dataSurveyApp.encuesta.fechaPublicacion">Fecha Publicacion</span></dt>
<dd>
<span
>-
{{
encuesta.fechaPublicacion === undefined ? 'Sin publicar' : (encuesta.fechaFinalizada | formatShortDatetime | lowercase)
}}</span
>
</dd>
</dl>
<dl>
<dt><span jhiTranslate="dataSurveyApp.encuesta.fechaFinalizar">Fecha Finalizar</span></dt>
<dd>
<span>
-
{{
encuesta.fechaFinalizar === undefined
? 'Sin fecha de finalización'
: (encuesta.fechaFinalizada | formatShortDatetime | lowercase)
}}</span
>
</dd>
</dl>
<dl>
<dt><span jhiTranslate="dataSurveyApp.encuesta.fechaFinalizada">Fecha Finalizada</span></dt>
<dd>
<span>
-
{{
encuesta.fechaFinalizada === undefined ? 'Sin finalizar' : (encuesta.fechaFinalizada | formatShortDatetime | lowercase)
}}</span
>
</dd>
</dl>
<div>
<dt><span jhiTranslate="dataSurveyApp.encuesta.calificacion">Calificacion</span></dt>
<dd>
<fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon
><fa-icon *ngFor="let i of [].constructor(5 - encuesta.calificacion!)" class="entity-icon--star--off" [icon]="faStar"></fa-icon>
</dd>
</div>
</div>
</div>

View File

@ -28,7 +28,7 @@ import { EPreguntaAbiertaService } from '../../e-pregunta-abierta/service/e-preg
import { EPreguntaCerradaOpcionService } from '../../e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service';
import { PreguntaCerradaTipo } from 'app/entities/enumerations/pregunta-cerrada-tipo.model';
import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
import { faTimes, faPlus, faStar } from '@fortawesome/free-solid-svg-icons';
import { EncuestaPublishDialogComponent } from '../encuesta-publish-dialog/encuesta-publish-dialog.component';
@Component({
@ -40,6 +40,7 @@ export class EncuestaDetailComponent implements OnInit {
usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
faTimes = faTimes;
faPlus = faPlus;
faStar = faStar;
encuesta: IEncuesta | null = null;
isLoading = false;
successPublished = false;

View File

@ -5,11 +5,12 @@
<div class="d-flex justify-content-end">
<button type="button" class="ds-btn ds-btn--secondary" (click)="previousState()">
<fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
<fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.back">Back</span>
</button>
<button type="button" class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
<fa-icon icon="sync" [spin]="isLoading"></fa-icon>&nbsp;&nbsp;<span>Refrescar preguntas</span>
</button>
<button
type="button"
class="ds-btn ds-btn--secondary"
@ -20,6 +21,9 @@
>
<fa-icon icon="sync" [icon]="faPlus"></fa-icon>&nbsp;&nbsp;<span>Crear pregunta</span>
</button>
<button type="button" class="ds-btn ds-btn--success" (click)="openPreview()" [disabled]="isLoading">
<fa-icon [icon]="faPollH"></fa-icon>&nbsp;&nbsp;<span>Ver vista previa</span>
</button>
<ng-container *ngIf="encuesta!.estado === 'DRAFT'">
<button type="button" class="ds-btn ds-btn--primary" (click)="publishSurvey()">Publicar encuesta</button>
</ng-container>
@ -79,7 +83,8 @@
[attr.data-id]="ePreguntaOpcionFinal.id"
>
<!-- <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}" type="checkbox" disabled /> -->
<label for="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label>
<!-- <label for="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label> -->
<label>{{ ePreguntaOpcionFinal.nombre }}</label>
<fa-icon
*ngIf="encuesta!.estado === 'DRAFT'"
class="ds-survey--titulo--icon ds-survey--titulo--icon--small"
@ -264,7 +269,7 @@
[formGroup]="editFormQuestion"
>
<div class="modal-header">
<h1 class="modal-title" id="exampleModalLongTitle">Crear Pregunta</h1>
<h1 class="modal-title" id="exampleModalLongTitle2">Crear Pregunta</h1>
</div>
<div class="modal-body">
<!-- Survey Create Question Modal -->
@ -273,7 +278,7 @@
<div class="form-group">
<label class="form-control-label" for="field_nombre">Pregunta</label>
<input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
<input type="text" class="form-control" name="nombre" id="field_nombre2" data-cy="nombre" formControlName="nombre" />
<div
*ngIf="
editFormQuestion.get('nombre')!.invalid &&
@ -309,7 +314,7 @@
<!-- Custom Form Group (Closed & Open Question Validation) -->
<div class="form-group">
<label class="form-control-label" for="field_tipo">Tipo de pregunta</label>
<select class="form-control" name="tipopregunta" formControlName="tipopregunta" id="field_tipo" data-cy="tipopregunta">
<select class="form-control" name="tipopregunta" formControlName="tipopregunta" id="field_tipo2" data-cy="tipopregunta">
<option selected value="CLOSED">Opción multiple</option>
<option value="OPEN">Respuesta abierta</option>
</select>

View File

@ -25,11 +25,13 @@ import { IEPreguntaCerrada } from 'app/entities/e-pregunta-cerrada/e-pregunta-ce
import { EPreguntaCerradaService } from 'app/entities/e-pregunta-cerrada/service/e-pregunta-cerrada.service';
import { EPreguntaCerradaDeleteDialogComponent } from 'app/entities/e-pregunta-cerrada/delete/e-pregunta-cerrada-delete-dialog.component';
import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
import { faTimes, faPlus, faPollH } from '@fortawesome/free-solid-svg-icons';
import { PreguntaCerradaTipo } from 'app/entities/enumerations/pregunta-cerrada-tipo.model';
import { EncuestaDeleteQuestionDialogComponent } from '../encuesta-delete-question-dialog/encuesta-delete-question-dialog.component';
import { EncuestaDeleteOptionDialogComponent } from '../encuesta-delete-option-dialog/encuesta-delete-option-dialog.component';
import { Router } from '@angular/router';
@Component({
selector: 'jhi-encuesta-update',
templateUrl: './encuesta-update.component.html',
@ -37,6 +39,7 @@ import { EncuestaDeleteOptionDialogComponent } from '../encuesta-delete-option-d
export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
faTimes = faTimes;
faPlus = faPlus;
faPollH = faPollH;
isSaving = false;
isSavingQuestion = false;
@ -95,7 +98,8 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
protected modalService: NgbModal,
protected ePreguntaCerradaService: EPreguntaCerradaService,
protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService,
protected ePreguntaAbiertaService: EPreguntaAbiertaService
protected ePreguntaAbiertaService: EPreguntaAbiertaService,
protected router: Router
) {}
loadAll(): void {
@ -184,6 +188,11 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
addOption(event: any): void {}
openPreview() {
const surveyId = this.encuesta?.id;
this.router.navigate(['/encuesta', surveyId, 'preview']);
}
resetForm(event: any): void {
this.editForm.reset();
if (event !== null) {

View File

@ -75,3 +75,41 @@
.preview-survey .ds-survey--open-option textarea {
border: 3px solid #00b88d;
}
.preview-survey .entity-icon--star {
color: #ffcc47;
margin-right: 0.2rem;
}
.preview-survey dt {
margin-bottom: 10px;
}
.preview-survey dd {
margin-left: 40px;
}
.ds-survey--all-question-wrapper,
.info-encuesta {
@media screen and (max-width: 991px) {
padding: 2rem 0rem;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
}
.ds-survey--option {
@media screen and (max-width: 991px) {
width: 21rem !important;
}
@media screen and (max-width: 500px) {
width: 12rem !important;
}
}
.preview-survey {
@media screen and (max-width: 991px) {
flex-direction: column-reverse;
}
}

View File

@ -21,18 +21,18 @@
},
"id": "ID",
"nombre": "Nombre",
"descripcion": "Descripcion",
"fechaCreacion": "Fecha Creacion",
"fechaPublicacion": "Fecha Publicacion",
"descripcion": "Descripción",
"fechaCreacion": "Fecha Creación",
"fechaPublicacion": "Fecha Publicación",
"fechaFinalizar": "Fecha Finalizar",
"fechaFinalizada": "Fecha Finalizada",
"calificacion": "Calificacion",
"calificacion": "Calificación",
"acceso": "Acceso",
"contrasenna": "Contrasenna",
"contrasenna": "Contraseña",
"estado": "Estado",
"usuarioEncuesta": "Usuario Encuesta",
"ePreguntaAbierta": "E Pregunta Abierta",
"ePreguntaCerrada": "E Pregunta Cerrada",
"ePreguntaAbierta": "Pregunta Abierta",
"ePreguntaCerrada": "Pregunta Cerrada",
"categoria": "Categoría",
"usuarioExtra": "Correo Usuario"
}