Add survey template preview in mis-plantillas

This commit is contained in:
Pablo Bonilla 2021-08-12 00:58:33 -06:00
parent 911f45ea01
commit 422c9489e6
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
7 changed files with 339 additions and 11 deletions

View File

@ -0,0 +1,86 @@
<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>
<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></jhi-alert> -->
<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" *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>
</div>
</div>
</div>
</div>
</div>

View File

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

View File

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

View File

@ -48,7 +48,7 @@
<div class="btn-group">
<button
type="submit"
[routerLink]="['/plantilla', miPlantilla.id, 'preview']"
[routerLink]="['/mis-plantillas', miPlantilla.id, 'preview']"
class="ds-btn ds-btn--secondary btn-sm"
data-cy="entityDetailsButton"
>

View File

@ -0,0 +1,29 @@
import { Injectable } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { Resolve, ActivatedRouteSnapshot, Router } from '@angular/router';
import { Observable, of, EMPTY } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { IPlantilla, Plantilla } from 'app/entities/plantilla/plantilla.model';
import { PlantillaService } from 'app/entities/plantilla/service/plantilla.service';
@Injectable({ providedIn: 'root' })
export class UsuarioPlantillasRoutingResolveService implements Resolve<IPlantilla> {
constructor(protected service: PlantillaService, protected router: Router) {}
resolve(route: ActivatedRouteSnapshot): Observable<IPlantilla> | Observable<never> {
const id = route.params['id'];
if (id) {
return this.service.find(id).pipe(
mergeMap((plantilla: HttpResponse<Plantilla>) => {
if (plantilla.body) {
return of(plantilla.body);
} else {
this.router.navigate(['404']);
return EMPTY;
}
})
);
}
return of(new Plantilla());
}
}

View File

@ -1,11 +1,31 @@
import { Route, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserRouteAccessService } from 'app/core/auth/user-route-access.service';
import { UsuarioPlantillasDetailComponent } from '../detail/usuario-plantillas-detail.component';
import { UsuarioPlantillasComponent } from '../list/usuario-plantillas.component';
import { UsuarioPlantillasRoutingResolveService } from './usuario-plantillas-routing-resolve.service';
export const USUARIO_PLANTILLAS_ROUTE: Route = {
path: '',
component: UsuarioPlantillasComponent,
data: {
pageTitle: 'dataSurveyApp.usuarioExtra.plantillas.title',
const USUARIO_PLANTILLAS_ROUTE: Routes = [
{
path: '',
component: UsuarioPlantillasComponent,
data: {
pageTitle: 'dataSurveyApp.usuarioExtra.plantillas.title',
},
},
};
{
path: ':id/preview',
component: UsuarioPlantillasDetailComponent,
resolve: {
plantilla: UsuarioPlantillasRoutingResolveService,
},
canActivate: [UserRouteAccessService],
},
];
@NgModule({
imports: [RouterModule.forChild(USUARIO_PLANTILLAS_ROUTE)],
exports: [RouterModule],
})
export class UsuarioPlantillasRoutingModule {}

View File

@ -2,12 +2,13 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsuarioPlantillasComponent } from './list/usuario-plantillas.component';
import { RouterModule } from '@angular/router';
import { USUARIO_PLANTILLAS_ROUTE } from './route/usuario-plantillas.route';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { SharedModule } from '../../shared/shared.module';
import { UsuarioPlantillasRoutingModule } from './route/usuario-plantillas.route';
import { UsuarioPlantillasDetailComponent } from './detail/usuario-plantillas-detail.component';
@NgModule({
declarations: [UsuarioPlantillasComponent],
imports: [CommonModule, RouterModule.forChild([USUARIO_PLANTILLAS_ROUTE]), FontAwesomeModule, SharedModule],
imports: [CommonModule, UsuarioPlantillasRoutingModule, FontAwesomeModule, SharedModule],
declarations: [UsuarioPlantillasComponent, UsuarioPlantillasDetailComponent],
})
export class UsuarioPlantillasModule {}