agregar pagina inicial para completar encuesta
This commit is contained in:
parent
988a1ca3ff
commit
b708f7e0c8
|
|
@ -1 +1,201 @@
|
||||||
<p>complete works!</p>
|
<div class="container-fluid" *ngIf="encuesta">
|
||||||
|
<div>
|
||||||
|
<h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<p class="ds-title">Vista previa de {{ encuesta!.nombre }}</p>
|
||||||
|
<fa-icon class="ds-info--icon" [icon]="faQuestion" data-toggle="modal" data-target="#verParametros"></fa-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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> <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">×</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="modal fade ds-modal"
|
||||||
|
id="verParametros"
|
||||||
|
tabindex="-1"
|
||||||
|
role="dialog"
|
||||||
|
aria-labelledby="exampleModalCenterTitle"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h1 class="modal-title" id="exampleModalLongTitle">Información de encuesta</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<div>
|
||||||
|
<div class="mb-5">
|
||||||
|
<p style="font-size: 1.2em" class="ds-subtitle">Cantidad de preguntas</p>
|
||||||
|
<p>{{ ePreguntas?.length }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--<div>
|
||||||
|
<p style="font-size: 1.2em" class="ds-survey--titulo--name">Colaboradores</p>
|
||||||
|
</div>-->
|
||||||
|
|
||||||
|
<div class="mb-5">
|
||||||
|
<p class="ds-subtitle" jhiTranslate="dataSurveyApp.encuesta.acceso">Acceso</p>
|
||||||
|
<p jhiTranslate="{{ 'dataSurveyApp.AccesoEncuesta.' + encuesta.acceso }}">{{ encuesta.acceso }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="encuesta.acceso === 'PRIVATE'" class="mb-5">
|
||||||
|
<p class="ds-subtitle">Contraseña</p>
|
||||||
|
<p>{{ encuesta.contrasenna }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-5">
|
||||||
|
<p class="ds-subtitle">Estado:</p>
|
||||||
|
<p jhiTranslate="{{ 'dataSurveyApp.EstadoEncuesta.' + encuesta.estado }}">{{ encuesta.estado }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="encuesta.categoria" class="mb-5">
|
||||||
|
<p class="ds-subtitle">Categoría</p>
|
||||||
|
<P> </P> {{ encuesta.categoria?.nombre }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-5">
|
||||||
|
<p class="ds-subtitle">Fecha de publicación</p>
|
||||||
|
<P
|
||||||
|
>{{
|
||||||
|
encuesta.fechaPublicacion === undefined
|
||||||
|
? 'Sin publicar'
|
||||||
|
: (encuesta.fechaPublicacion | formatShortDatetime | lowercase)
|
||||||
|
}}
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--<div class="mb-5">
|
||||||
|
<p jhiTranslate="dataSurveyApp.encuesta.fechaFinalizar" class="ds-subtitle" > Fecha Finalizar</p>
|
||||||
|
<p> </p></div>
|
||||||
|
<dl>
|
||||||
|
<dt><span jhiTranslate="dataSurveyApp.encuesta.fechaFinalizar">Fecha Finalizar</span></dt>
|
||||||
|
<dd>
|
||||||
|
<span>
|
||||||
|
-
|
||||||
|
{{
|
||||||
|
encuesta.fechaFinalizar === undefined
|
||||||
|
? 'Sin fecha de finalización'
|
||||||
|
: (encuesta.fechaFinalizar | formatShortDatetime | lowercase)
|
||||||
|
}}</span
|
||||||
|
>
|
||||||
|
</dd>
|
||||||
|
</dl>-->
|
||||||
|
|
||||||
|
<div class="mb-5">
|
||||||
|
<p class="ds-subtitle">Fecha de finalización</p>
|
||||||
|
<P>
|
||||||
|
{{
|
||||||
|
encuesta.fechaFinalizada === undefined
|
||||||
|
? 'Sin finalizar'
|
||||||
|
: (encuesta.fechaFinalizada | formatShortDatetime | lowercase)
|
||||||
|
}}
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-5">
|
||||||
|
<p class="ds-subtitle">Calificación</p>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button id="cancelBtnVerParametros" type="button" class="ds-btn ds-btn--secondary" data-dismiss="modal">
|
||||||
|
<fa-icon icon="arrow-left"></fa-icon> <span>Volver</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,164 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
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 { 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, faQuestion } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import { EncuestaPublishDialogComponent } from '../encuesta-publish-dialog/encuesta-publish-dialog.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'jhi-complete',
|
selector: 'jhi-complete',
|
||||||
templateUrl: './complete.component.html',
|
templateUrl: './complete.component.html',
|
||||||
styleUrls: ['./complete.component.scss'],
|
|
||||||
})
|
})
|
||||||
export class EncuestaCompleteComponent implements OnInit {
|
export class EncuestaCompleteComponent implements OnInit {
|
||||||
constructor() {}
|
categoriasSharedCollection: ICategoria[] = [];
|
||||||
|
usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
|
||||||
|
faTimes = faTimes;
|
||||||
|
faPlus = faPlus;
|
||||||
|
faStar = faStar;
|
||||||
|
faQuestion = faQuestion;
|
||||||
|
encuesta: IEncuesta | null = null;
|
||||||
|
isLoading = false;
|
||||||
|
successPublished = false;
|
||||||
|
ePreguntas?: any[];
|
||||||
|
ePreguntasOpciones?: any[];
|
||||||
|
|
||||||
ngOnInit(): void {}
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
previousState(): void {
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue