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

default.nix

@@ -1,11 +0,0 @@
-with import <nixpkgs> { };
-mkShell {
-  nativeBuildInputs = [
-    bashInteractive
-    maven
-  ];
-  buildInputs = [
-    openjdk11
-    nodejs-14_x
-  ];
-}

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>

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 }) => {
-      this.encuesta = 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();
+      }
     });
   }
 

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

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) {
+    if (this.idEncuesta != null) {
-      this.getEncuesta(this.selectedSurveyId)
+      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';

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,

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, {

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>

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) {

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';

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;
+  }
+}

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",
+      "ePreguntaAbierta": "Pregunta Abierta",
-      "ePreguntaCerrada": "E Pregunta Cerrada",
+      "ePreguntaCerrada": "Pregunta Cerrada",
       "categoria": "Categoría",
       "usuarioExtra": "Correo Usuario"
     }