add vista previa
This commit is contained in:
parent
b85442e796
commit
5e441a343f
|
@ -80,70 +80,90 @@
|
||||||
</div>-->
|
</div>-->
|
||||||
|
|
||||||
<div class="container-fluid">
|
<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>
|
<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>
|
</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>
|
</div>
|
||||||
|
|
||||||
<div class="row justify-content-around">
|
<!-- <jhi-alert></jhi-alert> -->
|
||||||
<div class="col-12">
|
|
||||||
<div *ngIf="encuesta">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-5">
|
|
||||||
<h2 class="text-center">{{ encuesta.nombre }}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-5">
|
|
||||||
<div class="alert alert-warning" id="no-result" *ngIf="ePreguntas?.length === 0">
|
<div class="alert alert-warning" id="no-result" *ngIf="ePreguntas?.length === 0">
|
||||||
<span>No se encontraron preguntas</span>
|
<span>No se encontraron preguntas</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="preguntas" *ngIf="ePreguntas && ePreguntas.length > 0">
|
<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>
|
<div>
|
||||||
<div *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId" [attr.data-index]="ePregunta.id">
|
<span *ngIf="ePregunta.tipo === 'SINGLE'" class="ds-subtitle"
|
||||||
<span>{{ ePregunta.nombre }} | </span>
|
>Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}
|
||||||
<span>{{ ePregunta.tipo }} | </span>
|
{{ ePregunta.opcional ? '(opcional)' : '' }}</span
|
||||||
<span>{{ ePregunta.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 *ngIf="ePregunta.tipo">
|
||||||
<ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
|
<ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
|
||||||
<ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id">
|
<ng-container *ngFor="let ePreguntaOpcionFinal of ePreguntaOpcion">
|
||||||
<div *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId">
|
<ng-container *ngIf="ePregunta.id === ePreguntaOpcionFinal.epreguntaCerrada.id">
|
||||||
<input id="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}" type="checkbox" />
|
<div
|
||||||
<label for="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}">{{ ePreguntaOpcion2.nombre }}</label>
|
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>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<textarea *ngIf="!ePregunta.tipo" name="" id="" cols="30" rows="10"></textarea>
|
</ng-container>
|
||||||
</div>
|
<div class="ds-survey--option ds-survey--option--base ds-survey--open-option" *ngIf="!ePregunta.tipo">
|
||||||
</div>
|
<textarea cols="30" rows="10" disabled></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -21,6 +21,15 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||||
import { IEPreguntaCerrada } from 'app/entities/e-pregunta-cerrada/e-pregunta-cerrada.model';
|
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 { 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 { 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({
|
@Component({
|
||||||
selector: 'jhi-encuesta-detail',
|
selector: 'jhi-encuesta-detail',
|
||||||
|
@ -29,10 +38,11 @@ import { EPreguntaCerradaDeleteDialogComponent } from 'app/entities/e-pregunta-c
|
||||||
export class EncuestaDetailComponent implements OnInit {
|
export class EncuestaDetailComponent implements OnInit {
|
||||||
categoriasSharedCollection: ICategoria[] = [];
|
categoriasSharedCollection: ICategoria[] = [];
|
||||||
usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
|
usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
|
||||||
|
faTimes = faTimes;
|
||||||
|
faPlus = faPlus;
|
||||||
encuesta: IEncuesta | null = null;
|
encuesta: IEncuesta | null = null;
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
|
successPublished = false;
|
||||||
ePreguntas?: any[];
|
ePreguntas?: any[];
|
||||||
ePreguntasOpciones?: any[];
|
ePreguntasOpciones?: any[];
|
||||||
|
|
||||||
|
@ -42,7 +52,10 @@ export class EncuestaDetailComponent implements OnInit {
|
||||||
protected categoriaService: CategoriaService,
|
protected categoriaService: CategoriaService,
|
||||||
protected usuarioExtraService: UsuarioExtraService,
|
protected usuarioExtraService: UsuarioExtraService,
|
||||||
protected fb: FormBuilder,
|
protected fb: FormBuilder,
|
||||||
protected modalService: NgbModal
|
protected modalService: NgbModal,
|
||||||
|
protected ePreguntaCerradaService: EPreguntaCerradaService,
|
||||||
|
protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService,
|
||||||
|
protected ePreguntaAbiertaService: EPreguntaAbiertaService
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
ngOnInit(): void {
|
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 {
|
trackId(index: number, item: IEPreguntaCerrada): number {
|
||||||
return item.id!;
|
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) {
|
getEncuesta(id: number) {
|
||||||
return this.encuestaService.findEncuesta(id);
|
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) => {
|
(res: any) => {
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
this.ePreguntasOpciones = res.body ?? [];
|
this.ePreguntasOpciones = res.body ?? [];
|
||||||
|
@ -100,7 +142,18 @@ export class EncuestaDetailComponent implements OnInit {
|
||||||
() => {
|
() => {
|
||||||
this.isLoading = false;
|
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 {
|
previousState(): void {
|
||||||
|
|
|
@ -70,7 +70,6 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
selectedSurvey?: IEncuesta | null = null;
|
selectedSurvey?: IEncuesta | null = null;
|
||||||
isSaving = false;
|
isSaving = false;
|
||||||
selectedSurvey: number = 0;
|
|
||||||
|
|
||||||
categoriasSharedCollection: ICategoria[] = [];
|
categoriasSharedCollection: ICategoria[] = [];
|
||||||
usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
|
usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
|
||||||
|
@ -438,7 +437,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
openPreview() {
|
openPreview() {
|
||||||
const surveyId = this.selectedSurvey;
|
const surveyId = this.selectedIdSurvey;
|
||||||
this.router.navigate(['/encuesta', surveyId, 'preview']);
|
this.router.navigate(['/encuesta', surveyId, 'preview']);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -480,8 +479,6 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
|
||||||
event.target.classList.add('active');
|
event.target.classList.add('active');
|
||||||
document.getElementById('contextmenu-create--separator')!.style.display = 'none';
|
document.getElementById('contextmenu-create--separator')!.style.display = 'none';
|
||||||
|
|
||||||
this.selectedSurvey = Number(event.target.dataset.id);
|
|
||||||
|
|
||||||
this.selectedIdSurvey = Number(event.target.dataset.id);
|
this.selectedIdSurvey = Number(event.target.dataset.id);
|
||||||
//this.selectedSurvey = event.target.dataset.encuesta;
|
//this.selectedSurvey = event.target.dataset.encuesta;
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,10 +61,6 @@ export class EncuestaService {
|
||||||
.pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
|
.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> {
|
deleteEncuesta(encuesta: IEncuesta): Observable<EntityResponseType> {
|
||||||
//const copy = this.convertDateFromClient(encuesta);
|
//const copy = this.convertDateFromClient(encuesta);
|
||||||
return this.http.put<IEncuesta>(`${this.resourceUrl}/${getEncuestaIdentifier(encuesta) as number}`, encuesta, { observe: 'response' });
|
return this.http.put<IEncuesta>(`${this.resourceUrl}/${getEncuestaIdentifier(encuesta) as number}`, encuesta, { observe: 'response' });
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
Loading…
Reference in New Issue