add vista previa

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

@@ -80,70 +80,90 @@
 </div>-->
 
 <div class="container-fluid">
-  <div class="row justify-content-center">
+  <div>
-    <div class="col-8">
+    <h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
-      <div *ngIf="encuesta">
+      <p class="ds-title">Vista previa de {{ encuesta!.nombre }}</p>
-        <h2 data-cy="encuestaDetailsHeading"><span jhiTranslate="dataSurveyApp.encuesta.detail.title">Encuesta</span></h2>
+      <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>
-  </div>
 
-  <div class="row justify-content-around">
+    <!-- <jhi-alert></jhi-alert> -->
-    <div class="col-12">
+
-      <div *ngIf="encuesta">
+    <div class="alert alert-warning" id="no-result" *ngIf="ePreguntas?.length === 0">
-        <div class="row">
+      <span>No se encontraron preguntas</span>
-          <div class="col-5">
+    </div>
-            <h2 class="text-center">{{ encuesta.nombre }}</h2>
+
-          </div>
+    <div class="ds-survey preview-survey" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0">
-        </div>
+      <div class="ds-survey--all-question-wrapper col-8">
-        <div class="row">
+        <div class="ds-survey--question-wrapper card-encuesta lift" *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId">
-          <div class="col-5">
+          <div
-            <div class="alert alert-warning" id="no-result" *ngIf="ePreguntas?.length === 0">
+            [attr.data-index]="ePregunta.id"
-              <span>No se encontraron preguntas</span>
+            [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>
-            <div id="preguntas" *ngIf="ePreguntas && ePreguntas.length > 0">
+              <span *ngIf="ePregunta.tipo === 'SINGLE'" class="ds-subtitle"
-              <div>
+                >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}
-                <div *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId" [attr.data-index]="ePregunta.id">
+                {{ ePregunta.opcional ? '(opcional)' : '' }}</span
-                  <span>{{ ePregunta.nombre }} | </span>
+              >
-                  <span>{{ ePregunta.tipo }} | </span>
+              <span *ngIf="ePregunta.tipo === 'MULTIPLE'" class="ds-subtitle"
-                  <span>{{ ePregunta.opcional }}</span>
+                >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate | lowercase }}
-
+                {{ ePregunta.opcional ? '(opcional)' : '' }}</span
-                  <ng-container *ngIf="ePregunta.tipo">
+              >
-                    <ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
+              <span *ngIf="!ePregunta.tipo" class="ds-subtitle"
-                      <ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id">
+                >Pregunta de respuesta abierta {{ ePregunta.opcional ? '(opcional)' : '' }}</span
-                        <div *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId">
+              >
-                          <input id="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}" type="checkbox" />
+            </div>
-                          <label for="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}">{{ ePreguntaOpcion2.nombre }}</label>
+            <ng-container *ngIf="ePregunta.tipo">
-                        </div>
+              <ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
-                      </ng-container>
+                <ng-container *ngFor="let ePreguntaOpcionFinal of ePreguntaOpcion">
-                    </ng-container>
+                  <ng-container *ngIf="ePregunta.id === ePreguntaOpcionFinal.epreguntaCerrada.id">
+                    <div
+                      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>
                   </ng-container>
-                  <textarea *ngIf="!ePregunta.tipo" name="" id="" cols="30" rows="10"></textarea>
+                </ng-container>
-                </div>
+              </ng-container>
-              </div>
+            </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-4">
+      <div class="col-3">
-        <div *ngIf="encuesta">
+        <p style="font-size: 1.2em" class="ds-survey--titulo--name">Cantidad de preguntas: {{ ePreguntas?.length }}</p>
-          <dt><span jhiTranslate="dataSurveyApp.encuesta.fechaCreacion">Fecha Creacion</span></dt>
+        <div>
-          <dd>
+          <p style="font-size: 1.2em" class="ds-survey--titulo--name">Colaboradores</p>
-            <span>{{ encuesta.fechaCreacion | formatMediumDatetime }}</span>
-          </dd>
-          <dt><span jhiTranslate="dataSurveyApp.encuesta.fechaPublicacion">Fecha Publicacion</span></dt>
-          <dd>
-            <span>{{ encuesta.fechaPublicacion | formatMediumDatetime }}</span>
-          </dd>
-          <dt><span jhiTranslate="dataSurveyApp.encuesta.fechaFinalizar">Fecha Finalizar</span></dt>
-          <dd>
-            <span>{{ encuesta.fechaFinalizar | formatMediumDatetime }}</span>
-          </dd>
-          <dt><span jhiTranslate="dataSurveyApp.encuesta.fechaFinalizada">Fecha Finalizada</span></dt>
-          <dd>
-            <span>{{ encuesta.fechaFinalizada | formatMediumDatetime }}</span>
-          </dd>
         </div>
       </div>
     </div>

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

@@ -21,6 +21,15 @@ 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 } from '@fortawesome/free-solid-svg-icons';
+import { EncuestaPublishDialogComponent } from '../encuesta-publish-dialog/encuesta-publish-dialog.component';
 
 @Component({
   selector: 'jhi-encuesta-detail',
@@ -29,10 +38,11 @@ import { EPreguntaCerradaDeleteDialogComponent } from 'app/entities/e-pregunta-c
 export class EncuestaDetailComponent implements OnInit {
   categoriasSharedCollection: ICategoria[] = [];
   usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
-
+  faTimes = faTimes;
+  faPlus = faPlus;
   encuesta: IEncuesta | null = null;
   isLoading = false;
-
+  successPublished = false;
   ePreguntas?: any[];
   ePreguntasOpciones?: any[];
 
@@ -42,7 +52,10 @@ export class EncuestaDetailComponent implements OnInit {
     protected categoriaService: CategoriaService,
     protected usuarioExtraService: UsuarioExtraService,
     protected fb: FormBuilder,
-    protected modalService: NgbModal
+    protected modalService: NgbModal,
+    protected ePreguntaCerradaService: EPreguntaCerradaService,
+    protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService,
+    protected ePreguntaAbiertaService: EPreguntaAbiertaService
   ) {}
 
   ngOnInit(): void {
@@ -56,10 +69,39 @@ export class EncuestaDetailComponent implements OnInit {
     });
   }
 
+  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);
   }
@@ -92,7 +134,7 @@ export class EncuestaDetailComponent implements OnInit {
         }
       );
 
-    this.encuestaService.findQuestionsOptions(this.encuesta?.id!).subscribe(
+    /* this.encuestaService.findQuestionsOptions(this.encuesta?.id!).subscribe(
       (res: any) => {
         this.isLoading = false;
         this.ePreguntasOpciones = res.body ?? [];
@@ -100,7 +142,18 @@ export class EncuestaDetailComponent implements OnInit {
       () => {
         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();
+      }
+    });
   }
 
   previousState(): void {

src/main/webapp/app/entities/encuesta/list/encuesta.component.ts

@@ -70,7 +70,6 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
   isLoading = false;
   selectedSurvey?: IEncuesta | null = null;
   isSaving = false;
-  selectedSurvey: number = 0;
 
   categoriasSharedCollection: ICategoria[] = [];
   usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
@@ -438,7 +437,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
   }
 
   openPreview() {
-    const surveyId = this.selectedSurvey;
+    const surveyId = this.selectedIdSurvey;
     this.router.navigate(['/encuesta', surveyId, 'preview']);
   }
 
@@ -480,8 +479,6 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
         event.target.classList.add('active');
         document.getElementById('contextmenu-create--separator')!.style.display = 'none';
 
-        this.selectedSurvey = Number(event.target.dataset.id);
-
         this.selectedIdSurvey = Number(event.target.dataset.id);
         //this.selectedSurvey = event.target.dataset.encuesta;
       }

src/main/webapp/app/entities/encuesta/service/encuesta.service.ts

@@ -61,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}`);
-  }
-
   deleteEncuesta(encuesta: IEncuesta): Observable<EntityResponseType> {
     //const copy = this.convertDateFromClient(encuesta);
     return this.http.put<IEncuesta>(`${this.resourceUrl}/${getEncuestaIdentifier(encuesta) as number}`, encuesta, { observe: 'response' });

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

@@ -0,0 +1,77 @@
+.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;
+}