eduardo
/
datasurvey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add vista previa

This commit is contained in:
Mariela Bonilla 2021-07-25 04:56:18 -06:00
parent b85442e796
commit 5e441a343f
5 changed files with 211 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,70 +80,90 @@
</div>-->
<div class="container-fluid">
<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>
<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>
</div>
<div class="row justify-content-around">
<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">
<span>No se encontraron preguntas</span>
<!-- <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 id="preguntas" *ngIf="ePreguntas && ePreguntas.length > 0">
<div>
<div *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId" [attr.data-index]="ePregunta.id">
<span>{{ ePregunta.nombre }} | </span>
<span>{{ ePregunta.tipo }} | </span>
<span>{{ ePregunta.opcional }}</span>
<ng-container *ngIf="ePregunta.tipo">
<ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
<ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id">
<div *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId">
<input id="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}" type="checkbox" />
<label for="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}">{{ ePreguntaOpcion2.nombre }}</label>
</div>
</ng-container>
</ng-container>
<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 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>
</div>
</div>
</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-4">
<div *ngIf="encuesta">
<dt><span jhiTranslate="dataSurveyApp.encuesta.fechaCreacion">Fecha Creacion</span></dt>
<dd>
<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 class="col-3">
<p style="font-size: 1.2em" class="ds-survey--titulo--name">Cantidad de preguntas: {{ ePreguntas?.length }}</p>
<div>
<p style="font-size: 1.2em" class="ds-survey--titulo--name">Colaboradores</p>
</div>
</div>
</div>

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

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

5
src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
View File

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

4
src/main/webapp/app/entities/encuesta/service/encuesta.service.ts
View File

@ -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' });

77
src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey.scss Normal file
View File

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