578 lines
19 KiB
TypeScript
578 lines
19 KiB
TypeScript
import { Component, OnInit, AfterViewInit } from '@angular/core';
|
|
import { HttpResponse } from '@angular/common/http';
|
|
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
|
|
|
import { IEncuesta, Encuesta } from '../encuesta.model';
|
|
import { EncuestaService } from '../service/encuesta.service';
|
|
import { EncuestaDeleteDialogComponent } from '../delete/encuesta-delete-dialog.component';
|
|
|
|
import { FormBuilder, Validators } from '@angular/forms';
|
|
import { ActivatedRoute } from '@angular/router';
|
|
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 { EstadoEncuesta } from 'app/entities/enumerations/estado-encuesta.model';
|
|
import { AccountService } from 'app/core/auth/account.service';
|
|
import { Account } from 'app/core/auth/account.model';
|
|
import { Router } from '@angular/router';
|
|
import { EncuestaPublishDialogComponent } from '../encuesta-publish-dialog/encuesta-publish-dialog.component';
|
|
import { IUser } from '../../user/user.model';
|
|
|
|
import {
|
|
faShareAlt,
|
|
faLock,
|
|
faUnlock,
|
|
faCalendarAlt,
|
|
faEdit,
|
|
faCopy,
|
|
faFile,
|
|
faTrashAlt,
|
|
faPlus,
|
|
faStar,
|
|
faUpload,
|
|
faPollH,
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
|
|
import * as $ from 'jquery';
|
|
import { EncuestaCompartirDialogComponent } from '../encuesta-compartir-dialog/encuesta-compartir-dialog.component';
|
|
|
|
@Component({
|
|
selector: 'jhi-encuesta',
|
|
templateUrl: './encuesta.component.html',
|
|
})
|
|
export class EncuestaComponent implements OnInit, AfterViewInit {
|
|
// Icons
|
|
faShareAlt = faShareAlt;
|
|
faLock = faLock;
|
|
faUnlock = faUnlock;
|
|
faCalendarAlt = faCalendarAlt;
|
|
faEdit = faEdit;
|
|
faCopy = faCopy;
|
|
faFile = faFile;
|
|
faTrashAlt = faTrashAlt;
|
|
faPlus = faPlus;
|
|
faStar = faStar;
|
|
faUpload = faUpload;
|
|
isPublished: Boolean = false;
|
|
successPublished = false;
|
|
faPollH = faPollH;
|
|
account: Account | null = null;
|
|
usuarioExtra: UsuarioExtra | null = null;
|
|
estadoDeleted = EstadoEncuesta.DELETED;
|
|
|
|
encuestas?: IEncuesta[];
|
|
isLoading = false;
|
|
selectedSurvey?: IEncuesta | null = null;
|
|
idEncuesta: number | null = null;
|
|
isSaving = false;
|
|
|
|
categoriasSharedCollection: ICategoria[] = [];
|
|
usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
|
|
userSharedCollection: IUser[] = [];
|
|
|
|
encuestaencontrada: IEncuesta | null = null;
|
|
|
|
public searchString: string;
|
|
public accesoEncuesta: string;
|
|
//public categoriaEncuesta: string;
|
|
public estadoEncuesta: string;
|
|
|
|
editForm = this.fb.group({
|
|
id: [],
|
|
nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
|
|
descripcion: [],
|
|
// fechaCreacion: [null, [Validators.required]],
|
|
// fechaPublicacion: [],
|
|
// fechaFinalizar: [],
|
|
// fechaFinalizada: [],
|
|
// calificacion: [null, [Validators.required]],
|
|
acceso: [null, [Validators.required]],
|
|
// contrasenna: [],
|
|
// estado: [null, [Validators.required]],
|
|
categoria: [null, [Validators.required]],
|
|
// usuarioExtra: [],
|
|
});
|
|
|
|
surveyEditForm = this.fb.group({
|
|
id: [],
|
|
nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
|
|
descripcion: [],
|
|
acceso: [null, [Validators.required]],
|
|
categoria: [null, [Validators.required]],
|
|
});
|
|
|
|
createAnother: Boolean = false;
|
|
selectedSurveyId: number | null = null;
|
|
|
|
constructor(
|
|
protected encuestaService: EncuestaService,
|
|
protected modalService: NgbModal,
|
|
protected categoriaService: CategoriaService,
|
|
protected usuarioExtraService: UsuarioExtraService,
|
|
protected activatedRoute: ActivatedRoute,
|
|
protected fb: FormBuilder,
|
|
protected accountService: AccountService,
|
|
protected router: Router
|
|
) {
|
|
this.searchString = '';
|
|
this.accesoEncuesta = '';
|
|
this.estadoEncuesta = '';
|
|
}
|
|
|
|
resetForm(): void {
|
|
this.editForm.reset();
|
|
}
|
|
|
|
loadAll(): void {
|
|
this.isLoading = true;
|
|
|
|
if (this.isAdmin()) {
|
|
this.usuarioExtraService
|
|
.retrieveAllPublicUsers()
|
|
.pipe(finalize(() => this.loadPublicUser()))
|
|
.subscribe(res => {
|
|
this.userSharedCollection = res;
|
|
});
|
|
} else {
|
|
this.loadEncuestas();
|
|
}
|
|
}
|
|
|
|
loadPublicUser(): void {
|
|
this.usuarioExtraService
|
|
.retrieveAllPublicUsers()
|
|
.pipe(finalize(() => this.loadUserExtras()))
|
|
.subscribe(res => {
|
|
this.userSharedCollection = res;
|
|
});
|
|
}
|
|
|
|
loadUserExtras() {
|
|
this.usuarioExtraService
|
|
.query()
|
|
.pipe(finalize(() => this.loadEncuestas()))
|
|
.subscribe(
|
|
(res: HttpResponse<IUsuarioExtra[]>) => {
|
|
this.isLoading = false;
|
|
this.usuarioExtrasSharedCollection = res.body ?? [];
|
|
this.usuarioExtrasSharedCollection.forEach(uE => {
|
|
uE.user = this.userSharedCollection?.find(pU => pU.id == uE.user?.id);
|
|
});
|
|
},
|
|
() => {
|
|
this.isLoading = false;
|
|
}
|
|
);
|
|
}
|
|
|
|
loadEncuestas() {
|
|
this.encuestaService.query().subscribe(
|
|
(res: HttpResponse<IEncuesta[]>) => {
|
|
this.isLoading = false;
|
|
const tmpEncuestas = res.body ?? [];
|
|
|
|
// Fix calificacion
|
|
tmpEncuestas.forEach(encuesta => {
|
|
const _calificacion = encuesta.calificacion;
|
|
encuesta.calificacion = Number(_calificacion?.toString().split('.')[0]);
|
|
});
|
|
|
|
if (this.isAdmin()) {
|
|
this.encuestas = tmpEncuestas.filter(e => e.estado !== EstadoEncuesta.DELETED);
|
|
|
|
this.encuestas.forEach(e => {
|
|
e.usuarioExtra = this.usuarioExtrasSharedCollection?.find(pU => pU.id == e.usuarioExtra?.id);
|
|
});
|
|
} else {
|
|
this.encuestas = tmpEncuestas
|
|
.filter(e => e.usuarioExtra?.id === this.usuarioExtra?.id)
|
|
.filter(e => e.estado !== EstadoEncuesta.DELETED);
|
|
}
|
|
},
|
|
() => {
|
|
this.isLoading = false;
|
|
}
|
|
);
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.searchString = '';
|
|
this.accesoEncuesta = '';
|
|
//this.categoriaEncuesta = '';
|
|
this.estadoEncuesta = '';
|
|
|
|
document.body.addEventListener('click', e => {
|
|
document.getElementById('contextmenu')!.classList.add('ds-contextmenu--closed');
|
|
document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--open');
|
|
document.getElementById('contextmenu')!.style.maxHeight = '0%';
|
|
if (e.target) {
|
|
if (!(e.target as HTMLElement).classList.contains('ds-list--entity')) {
|
|
document.querySelectorAll('.ds-list--entity').forEach(e => {
|
|
e.classList.remove('active');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// this.activatedRoute.data.subscribe(({ encuesta }) => {
|
|
// if (encuesta.id === undefined) {
|
|
// const today = dayjs().startOf('day');
|
|
// encuesta.fechaCreacion = today;
|
|
// encuesta.fechaPublicacion = today;
|
|
// encuesta.fechaFinalizar = today;
|
|
// encuesta.fechaFinalizada = today;
|
|
// }
|
|
|
|
// this.updateForm(encuesta);
|
|
|
|
// });
|
|
|
|
// 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;
|
|
this.loadAll();
|
|
|
|
this.loadRelationshipsOptions();
|
|
if (this.usuarioExtra !== null) {
|
|
if (this.usuarioExtra.id === undefined) {
|
|
const today = dayjs().startOf('day');
|
|
this.usuarioExtra.fechaNacimiento = today;
|
|
}
|
|
}
|
|
|
|
// this.loadRelationshipsOptions();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
ngAfterViewInit(): void {}
|
|
|
|
trackId(_index: number, item: IEncuesta): number {
|
|
return item.id!;
|
|
}
|
|
|
|
delete(encuesta: IEncuesta): void {
|
|
const modalRef = this.modalService.open(EncuestaDeleteDialogComponent, { size: 'lg', backdrop: 'static' });
|
|
modalRef.componentInstance.encuesta = encuesta;
|
|
// unsubscribe not needed because closed completes on modal close
|
|
modalRef.closed.subscribe(reason => {
|
|
if (reason === 'deleted') {
|
|
this.loadAll();
|
|
}
|
|
});
|
|
}
|
|
|
|
deleteSurvey(): void {
|
|
if (this.selectedSurveyId != null) {
|
|
this.getEncuesta(this.selectedSurveyId)
|
|
.pipe(
|
|
finalize(() => {
|
|
const modalRef = this.modalService.open(EncuestaDeleteDialogComponent, { size: 'lg', backdrop: 'static' });
|
|
modalRef.componentInstance.encuesta = this.encuestaencontrada;
|
|
|
|
modalRef.closed.subscribe(reason => {
|
|
if (reason === 'deleted') {
|
|
this.loadAll();
|
|
}
|
|
});
|
|
})
|
|
)
|
|
.subscribe(data => {
|
|
this.encuestaencontrada = data;
|
|
});
|
|
|
|
/*const modalRef = this.modalService.open(EncuestaDeleteDialogComponent, { size: 'lg', backdrop: 'static' });
|
|
modalRef.componentInstance.encuesta = this.getEncuesta(this.selectedSurvey)
|
|
.pipe(finalize(() =>
|
|
modalRef.closed.subscribe(reason => {
|
|
if (reason === 'deleted') {
|
|
this.loadAll();
|
|
}
|
|
})
|
|
))
|
|
.subscribe(data=> {
|
|
console.log(data);
|
|
//this.encuestaencontrada = data;
|
|
});
|
|
*/
|
|
|
|
// unsubscribe not needed because closed completes on modal close
|
|
}
|
|
}
|
|
|
|
getEncuesta(id: number) {
|
|
return this.encuestaService.findEncuesta(id);
|
|
}
|
|
|
|
previousState(): void {
|
|
window.history.back();
|
|
}
|
|
|
|
save(): void {
|
|
this.isSaving = true;
|
|
const encuesta = this.createFromForm();
|
|
|
|
if (encuesta.id !== undefined) {
|
|
this.subscribeToSaveResponse(this.encuestaService.update(encuesta));
|
|
} else {
|
|
this.subscribeToSaveResponse(this.encuestaService.create(encuesta));
|
|
}
|
|
}
|
|
|
|
trackCategoriaById(_index: number, item: ICategoria): number {
|
|
return item.id!;
|
|
}
|
|
|
|
trackUsuarioExtraById(_index: number, item: IUsuarioExtra): number {
|
|
return item.id!;
|
|
}
|
|
|
|
protected subscribeToSaveResponse(result: Observable<HttpResponse<IEncuesta>>): void {
|
|
result.pipe(finalize(() => this.onSaveFinalize())).subscribe(
|
|
() => this.onSaveSuccess(),
|
|
() => this.onSaveError()
|
|
);
|
|
}
|
|
|
|
createAnotherChange(event: any) {
|
|
this.createAnother = event.target.checked;
|
|
}
|
|
|
|
protected onSaveSuccess(): void {
|
|
// this.previousState();
|
|
// ($('#crearEncuesta') as any).modal('hide');
|
|
this.resetForm();
|
|
this.encuestas = [];
|
|
this.loadAll();
|
|
if (!this.createAnother) {
|
|
$('#cancelBtn').click();
|
|
}
|
|
}
|
|
|
|
protected onSaveError(): void {
|
|
// Api for inheritance.
|
|
}
|
|
|
|
protected onSaveFinalize(): void {
|
|
this.isSaving = false;
|
|
}
|
|
|
|
protected updateForm(encuesta: IEncuesta): void {
|
|
this.editForm.patchValue({
|
|
id: encuesta.id,
|
|
nombre: encuesta.nombre,
|
|
descripcion: encuesta.descripcion,
|
|
fechaCreacion: encuesta.fechaCreacion ? encuesta.fechaCreacion.format(DATE_TIME_FORMAT) : null,
|
|
fechaPublicacion: encuesta.fechaPublicacion ? encuesta.fechaPublicacion.format(DATE_TIME_FORMAT) : null,
|
|
fechaFinalizar: encuesta.fechaFinalizar ? encuesta.fechaFinalizar.format(DATE_TIME_FORMAT) : null,
|
|
fechaFinalizada: encuesta.fechaFinalizada ? encuesta.fechaFinalizada.format(DATE_TIME_FORMAT) : null,
|
|
calificacion: encuesta.calificacion,
|
|
acceso: encuesta.acceso,
|
|
contrasenna: encuesta.contrasenna,
|
|
estado: encuesta.estado,
|
|
categoria: encuesta.categoria,
|
|
usuarioExtra: encuesta.usuarioExtra,
|
|
});
|
|
|
|
this.categoriasSharedCollection = this.categoriaService.addCategoriaToCollectionIfMissing(
|
|
this.categoriasSharedCollection,
|
|
encuesta.categoria
|
|
);
|
|
this.usuarioExtrasSharedCollection = this.usuarioExtraService.addUsuarioExtraToCollectionIfMissing(
|
|
this.usuarioExtrasSharedCollection,
|
|
encuesta.usuarioExtra
|
|
);
|
|
}
|
|
|
|
protected loadRelationshipsOptions(): void {
|
|
this.categoriaService
|
|
.query()
|
|
.pipe(map((res: HttpResponse<ICategoria[]>) => res.body ?? []))
|
|
.pipe(
|
|
map((categorias: ICategoria[]) =>
|
|
this.categoriaService.addCategoriaToCollectionIfMissing(categorias, this.editForm.get('categoria')!.value)
|
|
)
|
|
)
|
|
.subscribe((categorias: ICategoria[]) => (this.categoriasSharedCollection = categorias));
|
|
|
|
this.usuarioExtraService
|
|
.query()
|
|
.pipe(map((res: HttpResponse<IUsuarioExtra[]>) => res.body ?? []))
|
|
.pipe(
|
|
map((usuarioExtras: IUsuarioExtra[]) =>
|
|
this.usuarioExtraService.addUsuarioExtraToCollectionIfMissing(usuarioExtras, this.editForm.get('usuarioExtra')!.value)
|
|
)
|
|
)
|
|
.subscribe((usuarioExtras: IUsuarioExtra[]) => (this.usuarioExtrasSharedCollection = usuarioExtras));
|
|
}
|
|
|
|
protected createFromForm(): IEncuesta {
|
|
const now = dayjs();
|
|
|
|
return {
|
|
...new Encuesta(),
|
|
id: undefined,
|
|
nombre: this.editForm.get(['nombre'])!.value,
|
|
descripcion: this.editForm.get(['descripcion'])!.value,
|
|
fechaCreacion: dayjs(now, DATE_TIME_FORMAT),
|
|
calificacion: 5.1,
|
|
acceso: this.editForm.get(['acceso'])!.value,
|
|
contrasenna: undefined,
|
|
estado: EstadoEncuesta.DRAFT,
|
|
categoria: this.editForm.get(['categoria'])!.value,
|
|
usuarioExtra: this.usuarioExtra,
|
|
};
|
|
}
|
|
|
|
isAdmin(): boolean {
|
|
return this.accountService.hasAnyAuthority('ROLE_ADMIN');
|
|
}
|
|
|
|
isAuthenticated(): boolean {
|
|
return this.accountService.isAuthenticated();
|
|
}
|
|
|
|
openSurvey(event: any): void {
|
|
if (event === null) {
|
|
const surveyId = this.selectedSurveyId;
|
|
this.router.navigate(['/encuesta', surveyId, 'edit']);
|
|
} else {
|
|
const surveyId = event.target.dataset.id;
|
|
this.router.navigate(['/encuesta', surveyId, 'edit']);
|
|
}
|
|
}
|
|
|
|
selectSurvey(event: any): void {
|
|
this.idEncuesta = event.target.getAttribute('data-id');
|
|
document.querySelectorAll('.ds-list--entity').forEach(e => {
|
|
e.classList.remove('active');
|
|
});
|
|
if (event.target.classList.contains('ds-list--entity')) {
|
|
event.target.classList.add('active');
|
|
}
|
|
}
|
|
|
|
openPreview() {
|
|
const surveyId = this.selectedSurveyId;
|
|
this.router.navigate(['/encuesta', surveyId, 'preview']);
|
|
}
|
|
|
|
async openContextMenu(event: any): Promise<void> {
|
|
if (event.type === 'contextmenu') {
|
|
event.preventDefault();
|
|
if (event.target === null) return;
|
|
document.querySelectorAll('.ds-list--entity').forEach(e => {
|
|
e.classList.remove('active');
|
|
});
|
|
|
|
if ((event.target as HTMLElement).classList.contains('ds-list')) {
|
|
document.getElementById('contextmenu-create--separator')!.style.display = 'block';
|
|
document.getElementById('contextmenu-edit--separator')!.style.display = 'none';
|
|
document.getElementById('contextmenu-delete--separator')!.style.display = 'none';
|
|
} else if ((event.target as HTMLElement).classList.contains('ds-list--entity')) {
|
|
this.selectedSurveyId = Number(event.target.dataset.id);
|
|
event.target.classList.add('active');
|
|
|
|
let res = await this.encuestaService.find(this.selectedSurveyId).toPromise();
|
|
this.selectedSurvey = res.body;
|
|
// Fill in the edit survey
|
|
this.fillSurveyEditForm();
|
|
this.isPublished = this.selectedSurvey!.estado === 'ACTIVE' || this.selectedSurvey!.estado === 'FINISHED'; // QUE SE LE MUESTRE CUANDO ESTE EN DRAFT
|
|
|
|
document.getElementById('contextmenu-create--separator')!.style.display = 'none';
|
|
document.getElementById('contextmenu-delete--separator')!.style.display = 'block';
|
|
document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
|
|
document.getElementById('contextmenu-preview')!.style.display = 'block';
|
|
|
|
if (!this.isPublished) {
|
|
document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
|
|
document.getElementById('contextmenu-edit')!.style.display = 'block';
|
|
document.getElementById('contextmenu-publish')!.style.display = 'block';
|
|
document.getElementById('contextmenu-duplicate')!.style.display = 'block';
|
|
document.getElementById('contextmenu-share')!.style.display = 'none';
|
|
} else {
|
|
document.getElementById('contextmenu-edit')!.style.display = 'none';
|
|
document.getElementById('contextmenu-publish')!.style.display = 'none';
|
|
document.getElementById('contextmenu-duplicate')!.style.display = 'none';
|
|
document.getElementById('contextmenu-share')!.style.display = 'block';
|
|
}
|
|
|
|
if (this.selectedSurvey!.estado === 'FINISHED') {
|
|
document.getElementById('contextmenu-share')!.style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('contextmenu-create--separator')!.style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('contextmenu')!.style.top = event.layerY + 'px';
|
|
document.getElementById('contextmenu')!.style.left = event.layerX + 'px';
|
|
document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--closed');
|
|
document.getElementById('contextmenu')!.classList.add('ds-contextmenu--open');
|
|
document.getElementById('contextmenu')!.style.maxHeight = '100%';
|
|
}
|
|
}
|
|
|
|
publish(): void {
|
|
const modalRef = this.modalService.open(EncuestaPublishDialogComponent, { size: 'lg', backdrop: 'static' });
|
|
modalRef.componentInstance.encuesta = this.selectedSurvey;
|
|
// unsubscribe not needed because closed completes on modal close
|
|
modalRef.closed.subscribe(reason => {
|
|
if (reason === 'published') {
|
|
this.successPublished = true;
|
|
this.loadAll();
|
|
}
|
|
});
|
|
}
|
|
|
|
async duplicateSurvey(): Promise<void> {
|
|
const res = await this.encuestaService.duplicate(this.selectedSurveyId!).toPromise();
|
|
this.loadAll();
|
|
}
|
|
|
|
editSurvey(): void {
|
|
const survey = { ...this.selectedSurvey };
|
|
survey.nombre = this.surveyEditForm.get(['nombre'])!.value;
|
|
survey.descripcion = this.surveyEditForm.get(['descripcion'])!.value;
|
|
survey.acceso = this.surveyEditForm.get(['acceso'])!.value;
|
|
survey.categoria = this.surveyEditForm.get(['categoria'])!.value;
|
|
// Prevent user update by setting to null
|
|
survey.usuarioExtra!.user = null;
|
|
|
|
this.encuestaService.updateSurvey(survey).subscribe(res => {
|
|
this.loadAll();
|
|
$('#cancelEditSurveyBtn').click();
|
|
});
|
|
}
|
|
|
|
fillSurveyEditForm(): void {
|
|
this.surveyEditForm.patchValue({
|
|
nombre: this.selectedSurvey!.nombre,
|
|
descripcion: this.selectedSurvey!.descripcion,
|
|
acceso: this.selectedSurvey!.acceso,
|
|
categoria: this.selectedSurvey!.categoria,
|
|
});
|
|
}
|
|
|
|
compartir(): void {
|
|
const modalRef = this.modalService.open(EncuestaCompartirDialogComponent, { size: 'lg', backdrop: 'static' });
|
|
modalRef.componentInstance.encuesta = this.selectedSurvey;
|
|
// unsubscribe not needed because closed completes on modal close
|
|
modalRef.closed.subscribe(reason => {
|
|
if (reason === 'published') {
|
|
this.successPublished = true;
|
|
this.loadAll();
|
|
}
|
|
});
|
|
}
|
|
}
|