From 422c9489e6e07830d6a4f9d03f8f454baa9fcb83 Mon Sep 17 00:00:00 2001 From: Pablo Bonilla Date: Thu, 12 Aug 2021 00:58:33 -0600 Subject: [PATCH] Add survey template preview in mis-plantillas --- .../usuario-plantillas-detail.component.html | 86 ++++++++++ ...rio-plantillas-detail.component.tmpSpec.ts | 37 +++++ .../usuario-plantillas-detail.component.ts | 155 ++++++++++++++++++ .../list/usuario-plantillas.component.html | 2 +- ...ario-plantillas-routing-resolve.service.ts | 29 ++++ .../route/usuario-plantillas.route.ts | 34 +++- .../usuario-plantillas.module.ts | 7 +- 7 files changed, 339 insertions(+), 11 deletions(-) create mode 100644 src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.html create mode 100644 src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.tmpSpec.ts create mode 100644 src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.ts create mode 100644 src/main/webapp/app/entities/usuario-plantillas/route/usuario-plantillas-routing-resolve.service.ts diff --git a/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.html b/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.html new file mode 100644 index 0000000..06bcf5f --- /dev/null +++ b/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.html @@ -0,0 +1,86 @@ +
+
+

+
+

Vista previa de {{ plantilla!.nombre }}

+
+ +

Creada el día {{ plantilla!.fechaCreacion | formatShortDatetime | lowercase }}

+
+ +
+

+ + + + + +
+
+ +

Plantilla vacía

+

Inicie creando preguntas y opciones para su plantilla.

+ + +
+
+
+ {{ i + 1 }}. {{ pPregunta.nombre }} +
+
+ Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }} + {{ pPregunta.opcional ? '(opcional)' : '' }} + Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate | lowercase }} + {{ pPregunta.opcional ? '(opcional)' : '' }} + Pregunta de respuesta abierta {{ pPregunta.opcional ? '(opcional)' : '' }} +
+ + + + +
+
+ + + +
+
+ + + +
+
+ + + + +
+ +
+
+
+
+
+
+
diff --git a/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.tmpSpec.ts b/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.tmpSpec.ts new file mode 100644 index 0000000..a630550 --- /dev/null +++ b/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.tmpSpec.ts @@ -0,0 +1,37 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ActivatedRoute } from '@angular/router'; +import { of } from 'rxjs'; +import { UsuarioPlantillasDetailComponent } from './usuario-plantillas-detail.component'; + +describe('Component Tests', () => { + describe('Plantilla Management Detail Component', () => { + let comp: UsuarioPlantillasDetailComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [UsuarioPlantillasDetailComponent], + providers: [ + { + provide: ActivatedRoute, + useValue: { data: of({ plantilla: { id: 123 } }) }, + }, + ], + }) + .overrideTemplate(UsuarioPlantillasDetailComponent, '') + .compileComponents(); + fixture = TestBed.createComponent(UsuarioPlantillasDetailComponent); + comp = fixture.componentInstance; + }); + + describe('OnInit', () => { + it('Should load plantilla on init', () => { + // WHEN + comp.ngOnInit(); + + // THEN + expect(comp.plantilla).toEqual(expect.objectContaining({ id: 123 })); + }); + }); + }); +}); diff --git a/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.ts b/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.ts new file mode 100644 index 0000000..f667944 --- /dev/null +++ b/src/main/webapp/app/entities/usuario-plantillas/detail/usuario-plantillas-detail.component.ts @@ -0,0 +1,155 @@ +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 { Observable } from 'rxjs'; +import { finalize, map } from 'rxjs/operators'; + +import * as dayjs from 'dayjs'; +import { DATE_TIME_FORMAT } from 'app/config/input.constants'; + +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'; +import { IPlantilla } from 'app/entities/plantilla/plantilla.model'; +import { PlantillaService } from 'app/entities/plantilla/service/plantilla.service'; + +@Component({ + selector: 'jhi-usuario-plantillas-detail', + templateUrl: './usuario-plantillas-detail.component.html', +}) +export class UsuarioPlantillasDetailComponent 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, + 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 }) => { + 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 { + window.history.back(); + } +} diff --git a/src/main/webapp/app/entities/usuario-plantillas/list/usuario-plantillas.component.html b/src/main/webapp/app/entities/usuario-plantillas/list/usuario-plantillas.component.html index fc43592..e236f6e 100644 --- a/src/main/webapp/app/entities/usuario-plantillas/list/usuario-plantillas.component.html +++ b/src/main/webapp/app/entities/usuario-plantillas/list/usuario-plantillas.component.html @@ -48,7 +48,7 @@