modificaciones de visualizacion en vista previa

src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.html

@@ -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,14 +141,21 @@
                       class="ds-survey--option ds-survey--option--base ds-survey--closed-option can-delete checkbox"
                       [attr.data-id]="ePreguntaOpcionFinal.id"
                     >
-                      <input
-                        type="checkbox"
-                        style="border-radius: 3px"
-                        id="{{ 'checkbox' + ePreguntaOpcionFinal.id }}"
-                        disabled="disabled"
-                      />
-                      <!-- <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}" type="checkbox" disabled /> -->
-                      <label for="{{ 'checkbox' + ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label>
+                      <div *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 *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>
@@ -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 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>
-          <p style="font-size: 1.2em" class="ds-survey--titulo--name">Colaboradores</p>
+          <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>

src/main/webapp/app/entities/encuesta/detail/encuesta-detail.component.ts

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

src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html

@@ -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"
@@ -134,7 +139,7 @@
           <td>{{ ePreguntaCerrada.nombre }}</td>
           <td *ngIf="ePreguntaCerrada.tipo != undefined" jhiTranslate="{{ 'dataSurveyApp.PreguntaCerradaTipo.' + ePreguntaCerrada.tipo }}">{{ ePreguntaCerrada.tipo }}</td>
           <td *ngIf="ePreguntaCerrada.tipo == undefined"></td>
-          
+
           <td>{{ ePreguntaCerrada.opcional }}</td>
           <td>{{ ePreguntaCerrada.orden }}</td>
           <td>
@@ -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>

src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts

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

src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey.scss

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

src/main/webapp/i18n/es/encuesta.json

@@ -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"
     }