Merge pull request #70 from Quantum-P3/feature/US-29

2021-07-26 06:20:50 +00:00 · 2021-07-26 06:20:50 +00:00 · 9bc100f8af
parent b248dac2e0 ad96c0ee3b
commit 9bc100f8af
13 changed files with 489 additions and 41 deletions
--- a/default.nix
+++ b/default.nix
@ -1,11 +0,0 @@
-with import <nixpkgs> { };
-mkShell {
-  nativeBuildInputs = [
-    bashInteractive
-    maven
-  ];
-  buildInputs = [
-    openjdk11
-    nodejs-14_x
-  ];
-}
--- a/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.html
+++ b/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.html
@ -1,4 +1,4 @@
-<div class="row justify-content-center">
+<!--<div class="row justify-content-center">
  <div class="col-8">
    <div *ngIf="encuesta">
      <h2 data-cy="encuestaDetailsHeading"><span jhiTranslate="dataSurveyApp.encuesta.detail.title">Encuesta</span></h2>
@ -77,4 +77,169 @@
      </button>
    </div>
  </div>
+</div>-->
+
+<div class="container-fluid" *ngIf="encuesta">
+  <div>
+    <h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
+      <p class="ds-title">Vista previa de {{ encuesta!.nombre }}</p>
+      <p class="ds-subtitle">Creada el día {{ encuesta!.fechaCreacion | formatShortDatetime | lowercase }}</p>
+      <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.back">Back</span>
+        </button>
+        <ng-container *ngIf="encuesta!.estado === 'DRAFT'">
+          <button type="button" class="ds-btn ds-btn--primary" (click)="publishSurvey()">Publicar encuesta</button>
+        </ng-container>
+      </div>
+    </h2>
+
+    <jhi-alert-error></jhi-alert-error>
+    <div *ngIf="successPublished" class="alert alert-success alert-dismissible fade show" role="alert">
+      Su encuesta fue publicada exitosamente
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+
+    <!-- <jhi-alert></jhi-alert> -->
+
+    <div class="alert alert-warning" id="no-result" *ngIf="ePreguntas?.length === 0">
+      <span>No se encontraron preguntas</span>
+    </div>
+
+    <div class="ds-survey preview-survey" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0">
+      <div class="ds-survey--all-question-wrapper col-8">
+        <div class="ds-survey--question-wrapper card-encuesta lift" *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId">
+          <div
+            [attr.data-index]="ePregunta.id"
+            [attr.data-tipo]="ePregunta.tipo"
+            [attr.data-opcional]="ePregunta.opcional"
+            class="ds-survey--question"
+          >
+            <div class="ds-survey--titulo">
+              <span class="ds-survey--titulo--name">{{ i + 1 }}. {{ ePregunta.nombre }}</span>
+            </div>
+            <div>
+              <span *ngIf="ePregunta.tipo === 'SINGLE'" class="ds-subtitle"
+                >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}
+                {{ ePregunta.opcional ? '(opcional)' : '' }}</span
+              >
+              <span *ngIf="ePregunta.tipo === 'MULTIPLE'" class="ds-subtitle"
+                >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate | lowercase }}
+                {{ ePregunta.opcional ? '(opcional)' : '' }}</span
+              >
+              <span *ngIf="!ePregunta.tipo" class="ds-subtitle"
+                >Pregunta de respuesta abierta {{ ePregunta.opcional ? '(opcional)' : '' }}</span
+              >
+            </div>
+            <ng-container *ngIf="ePregunta.tipo">
+              <ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
+                <ng-container *ngFor="let ePreguntaOpcionFinal of ePreguntaOpcion">
+                  <ng-container *ngIf="ePregunta.id === ePreguntaOpcionFinal.epreguntaCerrada.id">
+                    <div
+                      class="ds-survey--option ds-survey--option--base ds-survey--closed-option can-delete"
+                      [attr.data-id]="ePreguntaOpcionFinal.id"
+                    >
+                      <div class="radio" *ngIf="ePregunta.tipo === 'SINGLE'">
+                        <input
+                          type="radio"
+                          style="border-radius: 3px"
+                          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 class="checkbox" *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>
+            </ng-container>
+            <div class="ds-survey--option ds-survey--option--base ds-survey--open-option" *ngIf="!ePregunta.tipo">
+              <textarea cols="30" rows="10" disabled></textarea>
+            </div>
+          </div>
+        </div>
+      </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>
+          <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>
+  </div>
 </div>
--- a/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.tmpSpec.ts
+++ b/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.tmpSpec.ts
--- a/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.ts
+++ b/src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.ts
@ -1,20 +1,159 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpResponse } from '@angular/common/http';
+import { FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
+import { EstadoEncuesta } from 'app/entities/enumerations/estado-encuesta.model';

-import { IEncuesta } from '../encuesta.model';
+import { Observable } from 'rxjs';
+import { finalize, map } from 'rxjs/operators';
+
+import * as dayjs from 'dayjs';
+import { DATE_TIME_FORMAT } from 'app/config/input.constants';
+
+import { IEncuesta, Encuesta } from '../encuesta.model';
+import { EncuestaService } from '../service/encuesta.service';
+import { ICategoria } from 'app/entities/categoria/categoria.model';
+import { CategoriaService } from 'app/entities/categoria/service/categoria.service';
+import { IUsuarioExtra } from 'app/entities/usuario-extra/usuario-extra.model';
+import { UsuarioExtraService } from 'app/entities/usuario-extra/service/usuario-extra.service';
+
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { IEPreguntaCerrada } from 'app/entities/e-pregunta-cerrada/e-pregunta-cerrada.model';
+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 { IEPreguntaAbierta } from '../../e-pregunta-abierta/e-pregunta-abierta.model';
+import { EPreguntaCerrada } from '../../e-pregunta-cerrada/e-pregunta-cerrada.model';
+import { EPreguntaCerradaOpcion, IEPreguntaCerradaOpcion } from '../../e-pregunta-cerrada-opcion/e-pregunta-cerrada-opcion.model';
+import { EPreguntaAbiertaService } from '../../e-pregunta-abierta/service/e-pregunta-abierta.service';
+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, faStar } from '@fortawesome/free-solid-svg-icons';
+import { EncuestaPublishDialogComponent } from '../encuesta-publish-dialog/encuesta-publish-dialog.component';

@Component({
  selector: 'jhi-encuesta-detail',
  templateUrl: './encuesta-detail.component.html',
 })
 export class EncuestaDetailComponent implements OnInit {
+  categoriasSharedCollection: ICategoria[] = [];
+  usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
+  faTimes = faTimes;
+  faPlus = faPlus;
+  faStar = faStar;
  encuesta: IEncuesta | null = null;
+  isLoading = false;
+  successPublished = false;
+  ePreguntas?: any[];
+  ePreguntasOpciones?: any[];

-  constructor(protected activatedRoute: ActivatedRoute) {}
+  constructor(
+    protected activatedRoute: ActivatedRoute,
+    protected encuestaService: EncuestaService,
+    protected categoriaService: CategoriaService,
+    protected usuarioExtraService: UsuarioExtraService,
+    protected fb: FormBuilder,
+    protected modalService: NgbModal,
+    protected ePreguntaCerradaService: EPreguntaCerradaService,
+    protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService,
+    protected ePreguntaAbiertaService: EPreguntaAbiertaService
+  ) {}

  ngOnInit(): void {
    this.activatedRoute.data.subscribe(({ encuesta }) => {
+      if (encuesta) {
        this.encuesta = encuesta;
+        this.loadAll();
+      } else {
+        this.previousState();
+      }
+    });
+  }
+
+  ngAfterViewChecked(): void {
+    this.initListeners();
+  }
+
+  initListeners(): void {
+    const checkboxes = document.getElementsByClassName('ds-survey--checkbox');
+    for (let i = 0; i < checkboxes.length; i++) {
+      checkboxes[i].addEventListener('click', e => {
+        if ((e.target as HTMLInputElement).checked) {
+          (e.target as HTMLElement).offsetParent!.classList.add('ds-survey--closed-option--active');
+        } else {
+          (e.target as HTMLElement).offsetParent!.classList.remove('ds-survey--closed-option--active');
+        }
+      });
+    }
+  }
+
+  trackId(index: number, item: IEPreguntaCerrada): number {
+    return item.id!;
+  }
+
+  trackEPreguntaCerradaById(index: number, item: IEPreguntaCerrada): number {
+    return item.id!;
+  }
+
+  trackCategoriaById(index: number, item: ICategoria): number {
+    return item.id!;
+  }
+
+  trackUsuarioExtraById(index: number, item: IUsuarioExtra): number {
+    return item.id!;
+  }
+
+  getEncuesta(id: number) {
+    return this.encuestaService.findEncuesta(id);
+  }
+
+  loadAll(): void {
+    this.isLoading = true;
+
+    this.encuestaService
+      .findQuestions(this.encuesta?.id!)
+      .pipe(
+        finalize(() =>
+          this.encuestaService.findQuestionsOptions(this.encuesta?.id!).subscribe(
+            (res: any) => {
+              this.isLoading = false;
+              this.ePreguntasOpciones = res.body ?? [];
+            },
+            () => {
+              this.isLoading = false;
+            }
+          )
+        )
+      )
+      .subscribe(
+        (res: any) => {
+          this.isLoading = false;
+          this.ePreguntas = res.body ?? [];
+        },
+        () => {
+          this.isLoading = false;
+        }
+      );
+
+    /* this.encuestaService.findQuestionsOptions(this.encuesta?.id!).subscribe(
+      (res: any) => {
+        this.isLoading = false;
+        this.ePreguntasOpciones = res.body ?? [];
+      },
+      () => {
+        this.isLoading = false;
+      }
+    );*/
+  }
+  publishSurvey(): void {
+    const modalRef = this.modalService.open(EncuestaPublishDialogComponent, { size: 'lg', backdrop: 'static' });
+    modalRef.componentInstance.encuesta = this.encuesta;
+    // unsubscribe not needed because closed completes on modal close
+    modalRef.closed.subscribe(reason => {
+      if (reason === 'published') {
+        this.successPublished = true;
+        this.loadAll();
+      }
    });
  }

--- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html
+++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html
@ -96,7 +96,9 @@
            <button type="button" id="contextmenu-edit"><fa-icon class="contextmenu__icon" [icon]="faEdit"></fa-icon>Editar</button>
          </li>
          <li>
-            <button type="button" id="contextmenu-duplicate"><fa-icon class="contextmenu__icon" [icon]="faCopy"></fa-icon>Duplicar</button>
+            <button type="button" (click)="openPreview()" id="contextmenu-preview">
+              <fa-icon class="contextmenu__icon" [icon]="faPollH"></fa-icon>Ver Vista Previa
+            </button>
          </li>
          <li>
            <button
--- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
+++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
@ -37,6 +37,7 @@ import {
  faPlus,
  faStar,
  faUpload,
+  faPollH,
 } from '@fortawesome/free-solid-svg-icons';

 import * as $ from 'jquery';
@ -60,6 +61,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
  faUpload = faUpload;
  isPublished: Boolean = false;
  successPublished = false;
+  faPollH = faPollH;
  account: Account | null = null;
  usuarioExtra: UsuarioExtra | null = null;
  estadoDeleted = EstadoEncuesta.DELETED;
@ -67,6 +69,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
  encuestas?: IEncuesta[];
  isLoading = false;
  selectedSurvey?: IEncuesta | null = null;
+  idEncuesta: number | null = null;
  isSaving = false;

  categoriasSharedCollection: ICategoria[] = [];
@ -97,7 +100,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
  });

  createAnother: Boolean = false;
-  selectedSurveyId: number | null = null;
+  selectedSurveyId: Number | null = null;

  constructor(
    protected encuestaService: EncuestaService,
@ -123,7 +126,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {

    this.usuarioExtraService
      .retrieveAllPublicUsers()
-      .pipe(finalize(() => this.loadUserExtras()))
+      .pipe(finalize(() => this.loadPublicUser()))
      .subscribe(res => {
        this.userSharedCollection = res;
      });
@ -250,8 +253,8 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
  }

  deleteSurvey(): void {
-    if (this.selectedSurveyId != null) {
-      this.getEncuesta(this.selectedSurveyId)
+    if (this.idEncuesta != null) {
+      this.getEncuesta(this.idEncuesta)
        .pipe(
          finalize(() => {
            const modalRef = this.modalService.open(EncuestaDeleteDialogComponent, { size: 'lg', backdrop: 'static' });
@ -425,6 +428,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
  }

  selectSurvey(event: any): void {
+    this.idEncuesta = event.target.getAttribute('data-id');
    document.querySelectorAll('.ds-list--entity').forEach(e => {
      e.classList.remove('active');
    });
@ -433,6 +437,11 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
    }
  }

+  openPreview() {
+    const surveyId = this.idEncuesta;
+    this.router.navigate(['/encuesta', surveyId, 'preview']);
+  }
+
  counter(i: number) {
    return new Array(i);
  }
@ -448,14 +457,30 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
      document.querySelectorAll('.ds-list--entity').forEach(e => {
        e.classList.remove('active');
      });
+      this.selectedSurveyId = Number(event.target.dataset.id);
+
+      let res = await this.encuestaService.find(this.selectedSurveyId).toPromise();
+      this.selectedSurvey = res.body;
+      this.isPublished = this.selectedSurvey!.estado === 'DRAFT'; // QUE SE LE MUESTRE CUANDO ESTE EN DRAFT
+      // }
+
+      document.getElementById('contextmenu-create--separator')!.style.display = 'block';
+      document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
+      document.getElementById('contextmenu-delete--separator')!.style.display = 'block';
+      document.getElementById('contextmenu-edit')!.style.display = 'block';
+      if (this.isPublished) {
+        document.getElementById('contextmenu-publish')!.style.display = 'block'; //cambiar
+      }
+      document.getElementById('contextmenu-preview')!.style.display = 'block';
+      //document.getElementById('contextmenu-share')!.style.display = 'block';

      if ((event.target as HTMLElement).classList.contains('ds-list')) {
-        document;
        document.getElementById('contextmenu-create--separator')!.style.display = 'block';
        document.getElementById('contextmenu-edit--separator')!.style.display = 'none';
        document.getElementById('contextmenu-delete--separator')!.style.display = 'none';
      } else if ((event.target as HTMLElement).classList.contains('ds-list--entity')) {
        this.selectedSurveyId = Number(event.target.dataset.id);
+        this.idEncuesta = Number(event.target.dataset.id);
        event.target.classList.add('active');

        let res = await this.encuestaService.find(this.selectedSurveyId).toPromise();
@ -466,7 +491,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
        document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
        document.getElementById('contextmenu-delete--separator')!.style.display = 'block';
        document.getElementById('contextmenu-edit')!.style.display = 'block';
-        document.getElementById('contextmenu-duplicate')!.style.display = 'block';
+        document.getElementById('contextmenu-preview')!.style.display = 'block';

        if (!this.isPublished) {
          document.getElementById('contextmenu-publish')!.style.display = 'block';
--- a/src/main/webapp/app/entities/encuesta/route/encuesta-routing.module.ts
+++ b/src/main/webapp/app/entities/encuesta/route/encuesta-routing.module.ts
@ -14,7 +14,7 @@ const encuestaRoute: Routes = [
    canActivate: [UserRouteAccessService],
  },
  {
-    path: ':id/view',
+    path: ':id/preview',
    component: EncuestaDetailComponent,
    resolve: {
      encuesta: EncuestaRoutingResolveService,
--- a/src/main/webapp/app/entities/encuesta/service/encuesta.service.ts
+++ b/src/main/webapp/app/entities/encuesta/service/encuesta.service.ts
@ -45,6 +45,10 @@ export class EncuestaService {
      .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
  }

+  findEncuesta(id: number): Observable<IEncuesta> {
+    return this.http.get<IEncuesta>(`${this.resourceUrl}/${id}`);
+  }
+
  findQuestions(id: number): Observable<EntityResponseType> {
    return this.http
      .get<any>(`${this.resourceUrl}/preguntas/${id}`, { observe: 'response' })
@ -57,10 +61,6 @@ export class EncuestaService {
      .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
  }

-  findEncuesta(id: number): Observable<IEncuesta> {
-    return this.http.get<IEncuesta>(`${this.resourceUrl}/${id}`);
-  }
-
  publishEncuesta(encuesta: IEncuesta): Observable<EntityResponseType> {
    //const copy = this.convertDateFromClient(encuesta);
    return this.http.put<IEncuesta>(`${this.resourceUrl}/publish/${getEncuestaIdentifier(encuesta) as number}`, encuesta, {
--- a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html
+++ b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html
@ -15,11 +15,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--primary"
@ -30,12 +31,15 @@
      >
        <fa-icon icon="sync" [icon]="faPlus"></fa-icon>&nbsp;&nbsp;<span>Crear pregunta</span>
      </button>
-      <!-- <ng-container *ngIf="encuesta!.estado === 'DRAFT'">
+      <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>
      <ng-container *ngIf="encuesta!.estado === 'ACTIVE'">
        <button type="button" class="ds-btn ds-btn--danger" (click)="finishSurvey()">Finalizar encuesta</button>
-      </ng-container> -->
+      </ng-container>
    </div>
  </h2>

@ -228,7 +232,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 -->
@ -237,7 +241,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 &&
@ -273,7 +277,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>
--- a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts
+++ b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts
@ -25,13 +25,14 @@ 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, faQuestion } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faPlus, faQuestion, 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 { ParametroAplicacionService } from './../../parametro-aplicacion/service/parametro-aplicacion.service';
 import { IParametroAplicacion } from './../../parametro-aplicacion/parametro-aplicacion.model';
+import { Router } from '@angular/router';

@Component({
  selector: 'jhi-encuesta-update',
@ -40,6 +41,7 @@ import { IParametroAplicacion } from './../../parametro-aplicacion/parametro-apl
 export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
  faTimes = faTimes;
  faPlus = faPlus;
+  faPollH = faPollH;
  faQuestion = faQuestion;

  isSaving = false;
@ -100,8 +102,9 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
    protected modalService: NgbModal,
    protected ePreguntaCerradaService: EPreguntaCerradaService,
    protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService,
+    protected parametroAplicacionService: ParametroAplicacionService,
    protected ePreguntaAbiertaService: EPreguntaAbiertaService,
-    protected parametroAplicacionService: ParametroAplicacionService
+    protected router: Router
  ) {}

  loadAll(): void {
@ -197,6 +200,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) {
--- a/src/main/webapp/content/scss/paper-dashboard.scss
+++ b/src/main/webapp/content/scss/paper-dashboard.scss
@ -101,3 +101,4 @@
@import 'paper-dashboard/datasurvey-survey-update';
@import 'paper-dashboard/datasurvey-home';
@import 'paper-dashboard/datasurvey-filter';
+@import 'paper-dashboard/datasurvey-survey';
--- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey.scss
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey.scss
@ -0,0 +1,115 @@
+.preview-survey {
+  /* --------------------------------------- */
+  /* ----- Radio Button */
+  /* --------------------------------------- */
+  /* --------------------------------------- */
+  /* ----- Checkbox */
+  /* --------------------------------------- */
+}
+.preview-survey h2 {
+  font-size: 16px;
+  color: #001f3f;
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+.preview-survey > div {
+  padding: 20px 0;
+  border-bottom: 1px solid #ccc;
+}
+.preview-survey .radio label,
+.preview-survey .checkbox label {
+  display: inline-block;
+  cursor: pointer;
+  color: #00b88d;
+  position: relative;
+  padding: 5px 15px 5px 51px;
+  font-size: 1em;
+  border-radius: 5px;
+  -webkit-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+.preview-survey .radio label:hover,
+.preview-survey .checkbox label:hover {
+  background: rgba(0, 184, 141, 0.1);
+}
+.preview-survey .radio label:before,
+.preview-survey .checkbox label:before {
+  content: '';
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  position: absolute;
+  left: 15px;
+  border-radius: 50%;
+  background: none;
+  border: 3px solid #00b88d;
+}
+.preview-survey input[type='radio'] {
+  display: none;
+}
+.preview-survey input[type='radio']:checked + label:before {
+  display: none;
+}
+.preview-survey input[type='radio']:checked + label {
+  padding: 5px 15px;
+  background: #00b88d;
+  border-radius: 2px;
+  color: #fff;
+}
+.preview-survey .checkbox label:before {
+  border-radius: 3px;
+}
+.preview-survey .checkbox input[type='checkbox'] {
+  display: none;
+}
+.preview-survey .checkbox input[type='checkbox']:checked + label:before {
+  display: none;
+}
+.preview-survey .checkbox input[type='checkbox']:checked + label {
+  background: #00b88d;
+  color: #fff;
+  padding: 5px 15px;
+}
+
+.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;
+  }
+}
--- a/src/main/webapp/i18n/es/encuesta.json
+++ b/src/main/webapp/i18n/es/encuesta.json
@ -21,18 +21,18 @@
      },
      "id": "ID",
      "nombre": "Nombre",
-      "descripcion": "Descripcion",
+      "descripcion": "Descripción",
      "fechaCreacion": "Fecha Creación",
-      "fechaPublicacion": "Fecha Publicacion",
+      "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"
    }