Add preview of survey templates

This commit is contained in:
Pablo Bonilla 2021-08-01 21:21:49 -06:00
parent dced20025b
commit a503db206a
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
4 changed files with 219 additions and 59 deletions

View File

@ -27,12 +27,13 @@
<!-- <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 preview-survey" id="entities">
<div class="ds-survey--all-question-wrapper col-8">
<ng-container *ngIf="ePreguntas && ePreguntas.length === 0">
<p class="ds-title text-center">Encuesta vacía</p>
<p class="ds-subtitle text-center">Inicie creando preguntas y opciones para su encuesta.</p>
</ng-container>
<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"

View File

@ -1,58 +1,86 @@
<div class="row justify-content-center">
<div class="col-8">
<div *ngIf="plantilla">
<h2 data-cy="plantillaDetailsHeading"><span jhiTranslate="dataSurveyApp.plantilla.detail.title">Plantilla</span></h2>
<div class="container-fluid" *ngIf="plantilla">
<div>
<h2 id="page-heading" data-cy="PPreguntaCerradaHeading">
<div class="d-flex align-items-center">
<p class="ds-title">Vista previa de {{ plantilla!.nombre }}</p>
</div>
<hr />
<p class="ds-subtitle">Creada el día {{ plantilla!.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>
</div>
</h2>
<jhi-alert-error></jhi-alert-error>
<jhi-alert-error></jhi-alert-error>
<jhi-alert></jhi-alert>
<!-- <jhi-alert></jhi-alert> -->
<dl class="row-md jh-entity-details">
<dt><span jhiTranslate="global.field.id">ID</span></dt>
<dd>
<span>{{ plantilla.id }}</span>
</dd>
<dt><span jhiTranslate="dataSurveyApp.plantilla.nombre">Nombre</span></dt>
<dd>
<span>{{ plantilla.nombre }}</span>
</dd>
<dt><span jhiTranslate="dataSurveyApp.plantilla.descripcion">Descripcion</span></dt>
<dd>
<span>{{ plantilla.descripcion }}</span>
</dd>
<dt><span jhiTranslate="dataSurveyApp.plantilla.fechaCreacion">Fecha Creacion</span></dt>
<dd>
<span>{{ plantilla.fechaCreacion | formatMediumDatetime }}</span>
</dd>
<dt><span jhiTranslate="dataSurveyApp.plantilla.fechaPublicacionTienda">Fecha Publicacion Tienda</span></dt>
<dd>
<span>{{ plantilla.fechaPublicacionTienda | formatMediumDatetime }}</span>
</dd>
<dt><span jhiTranslate="dataSurveyApp.plantilla.estado">Estado</span></dt>
<dd>
<span jhiTranslate="{{ 'dataSurveyApp.EstadoPlantilla.' + plantilla.estado }}">{{ plantilla.estado }}</span>
</dd>
<dt><span jhiTranslate="dataSurveyApp.plantilla.precio">Precio</span></dt>
<dd>
<span>{{ plantilla.precio }}</span>
</dd>
<dt><span jhiTranslate="dataSurveyApp.plantilla.categoria">Categoria</span></dt>
<dd>
<div *ngIf="plantilla.categoria">
<a [routerLink]="['/categoria', plantilla.categoria?.id, 'view']">{{ plantilla.categoria?.nombre }}</a>
<div class="ds-survey preview-survey" id="entities">
<div class="ds-survey--all-question-wrapper col-8">
<ng-container *ngIf="pPreguntas && pPreguntas.length === 0">
<p class="ds-title text-center">Plantilla vacía</p>
<p class="ds-subtitle text-center">Inicie creando preguntas y opciones para su plantilla.</p>
</ng-container>
<div class="ds-survey--question-wrapper card-plantilla lift" *ngFor="let pPregunta of pPreguntas; let i = index; trackBy: trackId">
<div
[attr.data-index]="pPregunta.id"
[attr.data-tipo]="pPregunta.tipo"
[attr.data-opcional]="pPregunta.opcional"
class="ds-survey--question"
>
<div class="ds-survey--titulo">
<span class="ds-survey--titulo--name">{{ i + 1 }}. {{ pPregunta.nombre }}</span>
</div>
<div>
<span *ngIf="pPregunta.tipo === 'SINGLE'" class="ds-subtitle"
>Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}
{{ pPregunta.opcional ? '(opcional)' : '' }}</span
>
<span *ngIf="pPregunta.tipo === 'MULTIPLE'" class="ds-subtitle"
>Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate | lowercase }}
{{ pPregunta.opcional ? '(opcional)' : '' }}</span
>
<span *ngIf="!pPregunta.tipo" class="ds-subtitle"
>Pregunta de respuesta abierta {{ pPregunta.opcional ? '(opcional)' : '' }}</span
>
</div>
<ng-container *ngIf="pPregunta.tipo">
<ng-container *ngFor="let pPreguntaOpcion of pPreguntasOpciones; let j = index; trackBy: trackId">
<ng-container *ngFor="let pPreguntaOpcionFinal of pPreguntaOpcion">
<ng-container *ngIf="pPregunta.id === pPreguntaOpcionFinal.ppreguntaCerrada.id">
<div
class="ds-survey--option ds-survey--option--base ds-survey--closed-option can-delete"
[attr.data-id]="pPreguntaOpcionFinal.id"
>
<div class="radio" *ngIf="pPregunta.tipo === 'SINGLE'">
<input
type="radio"
style="border-radius: 3px"
name="{{ 'radio' + pPregunta.id }}"
id="{{ 'radio' + pPreguntaOpcionFinal.id }}"
/>
<!-- <input class="ds-survey--checkbox" id="{{ pPregunta.id }}-{{ pPreguntaOpcionFinal.id }}" type="checkbox" disabled /> -->
<label for="{{ 'radio' + pPreguntaOpcionFinal.id }}">{{ pPreguntaOpcionFinal.nombre }}</label>
</div>
<div class="checkbox" *ngIf="pPregunta.tipo === 'MULTIPLE'">
<input type="checkbox" style="border-radius: 3px" id="{{ 'checkbox' + pPreguntaOpcionFinal.id }}" />
<!-- <input class="ds-survey--checkbox" id="{{ pPregunta.id }}-{{ pPreguntaOpcionFinal.id }}" type="checkbox" disabled /> -->
<label for="{{ 'checkbox' + pPreguntaOpcionFinal.id }}">{{ pPreguntaOpcionFinal.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="!pPregunta.tipo">
<textarea cols="30" rows="10" disabled></textarea>
</div>
</div>
</dd>
</dl>
<button type="submit" (click)="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">
<fa-icon icon="arrow-left"></fa-icon>&nbsp;<span jhiTranslate="entity.action.back">Back</span>
</button>
<button type="button" [routerLink]="['/plantilla', plantilla.id, 'edit']" class="btn btn-primary">
<fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit">Edit</span>
</button>
</div>
</div>
</div>
</div>
</div>

View File

@ -1,21 +1,152 @@
import { Component, OnInit } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { EstadoPlantilla } from 'app/entities/enumerations/estado-plantilla.model';
import { IPlantilla } from '../plantilla.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 { IPlantilla, Plantilla } from '../plantilla.model';
import { PlantillaService } from '../service/plantilla.service';
import { ICategoria } from 'app/entities/categoria/categoria.model';
import { CategoriaService } from 'app/entities/categoria/service/categoria.service';
import { IUsuarioExtra, UsuarioExtra } 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 { IPPreguntaCerrada } from 'app/entities/p-pregunta-cerrada/p-pregunta-cerrada.model';
import { PPreguntaCerradaService } from 'app/entities/p-pregunta-cerrada/service/p-pregunta-cerrada.service';
import { PPreguntaCerradaDeleteDialogComponent } from 'app/entities/p-pregunta-cerrada/delete/p-pregunta-cerrada-delete-dialog.component';
import { IPPreguntaAbierta } from '../../p-pregunta-abierta/p-pregunta-abierta.model';
import { PPreguntaCerrada } from '../../p-pregunta-cerrada/p-pregunta-cerrada.model';
import { PPreguntaCerradaOpcion, IPPreguntaCerradaOpcion } from '../../p-pregunta-cerrada-opcion/p-pregunta-cerrada-opcion.model';
import { PPreguntaAbiertaService } from '../../p-pregunta-abierta/service/p-pregunta-abierta.service';
import { PPreguntaCerradaOpcionService } from '../../p-pregunta-cerrada-opcion/service/p-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 { Account } from '../../../core/auth/account.model';
import { AccountService } from 'app/core/auth/account.service';
@Component({
selector: 'jhi-plantilla-detail',
templateUrl: './plantilla-detail.component.html',
})
export class PlantillaDetailComponent implements OnInit {
categoriasSharedCollection: ICategoria[] = [];
usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
faTimes = faTimes;
faPlus = faPlus;
faStar = faStar;
faQuestion = faQuestion;
plantilla: IPlantilla | null = null;
isLoading = false;
successPublished = false;
pPreguntas?: any[];
pPreguntasOpciones?: any[];
usuarioExtra: UsuarioExtra | null = null;
constructor(protected activatedRoute: ActivatedRoute) {}
constructor(
protected activatedRoute: ActivatedRoute,
protected plantillaService: PlantillaService,
protected categoriaService: CategoriaService,
protected usuarioExtraService: UsuarioExtraService,
protected fb: FormBuilder,
protected modalService: NgbModal,
protected pPreguntaCerradaService: PPreguntaCerradaService,
protected pPreguntaCerradaOpcionService: PPreguntaCerradaOpcionService,
protected pPreguntaAbiertaService: PPreguntaAbiertaService,
protected accountService: AccountService
) {}
ngOnInit(): void {
this.activatedRoute.data.subscribe(({ plantilla }) => {
this.plantilla = plantilla;
if (plantilla) {
this.plantilla = plantilla;
this.loadAll();
} else {
this.previousState();
}
});
// Get jhi_user and usuario_extra information
this.accountService.getAuthenticationState().subscribe(account => {
if (account !== null) {
this.usuarioExtraService.find(account.id).subscribe(usuarioExtra => {
this.usuarioExtra = usuarioExtra.body;
});
}
});
}
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: IPPreguntaCerrada): number {
return item.id!;
}
trackPPreguntaCerradaById(index: number, item: IPPreguntaCerrada): number {
return item.id!;
}
trackCategoriaById(index: number, item: ICategoria): number {
return item.id!;
}
trackUsuarioExtraById(index: number, item: IUsuarioExtra): number {
return item.id!;
}
getPlantilla(id: number) {
return this.plantillaService.findPlantilla(id);
}
loadAll(): void {
this.isLoading = true;
this.plantillaService
.findQuestions(this.plantilla?.id!)
.pipe(
finalize(() =>
this.plantillaService.findQuestionsOptions(this.plantilla?.id!).subscribe(
(res: any) => {
this.isLoading = false;
this.pPreguntasOpciones = res.body ?? [];
},
() => {
this.isLoading = false;
}
)
)
)
.subscribe(
(res: any) => {
this.isLoading = false;
this.pPreguntas = res.body ?? [];
},
() => {
this.isLoading = false;
}
);
}
previousState(): void {

View File

@ -14,7 +14,7 @@
}
.preview-survey > div {
padding: 20px 0;
border-bottom: 1px solid #ccc;
// border-bottom: 1px solid #ccc;
}
.preview-survey .radio label,
.preview-survey .checkbox label {