Merge pull request #128 from Quantum-P3/feature/US-51

Add exportar reportes generales en formato PDF y Excel (administrador)
This commit is contained in:
Eduardo Quiros 2021-08-15 05:03:55 +00:00 committed by GitHub
commit 1378c766e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 495 additions and 25 deletions

View File

@ -3,7 +3,7 @@ import * as XLSX from 'xlsx';
import * as FileSaver from 'file-saver';
import { jsPDF } from 'jspdf';
import { exportAsExcelFile, exportAsExcelTable } from '../export/export_excel';
import { generatePDFTableData, createPDFTableHeaders, generatePDFTable } from '../export/export_pdf';
import { generatePDFTableData, createPDFTableHeaders, generatePDFTable, saveGeneratedPDF } from '../export/export_pdf';
import { FacturaService } from '../../factura/service/factura.service';
import { UsuarioExtraService } from '../../usuario-extra/service/usuario-extra.service';
@ -313,7 +313,14 @@ export class DashboardAdminComponent implements OnInit {
Cantidad de comentarios de retroalimentación
*/
const _sheets = ['reportes generales', 'enc. publicadas', 'enc. publicadas categoría', 'enc. finalizadas categoría'];
const _sheets = [
'usuarios generales',
'enc. publicadas',
'enc. publicadas categoría',
'enc. finalizadas categoría',
'encuestas generales',
'reporte de usuarios',
];
const _reporteUsuarios = [
{
@ -353,13 +360,44 @@ export class DashboardAdminComponent implements OnInit {
_reporteCantidadEncuestasFinalizadasCategoria.push(_report);
});
// exportAsExcelTable();
// this.encuestasPublicadas
// this.encuestasFinalizadas
// this.encuestasBorrador
// this.encuestasCompletadas
const _reporteEncuestasReportesGenerales = [
{
encuestas_borrador: this.encuestasBorrador,
encuestas_publicadas: this.encuestasPublicadas,
encuestas_finalizadas: this.encuestasFinalizadas,
encuestas_completadas: this.encuestasCompletadas,
},
];
// this.encuestasUsuario;
// this.encuestasUsuarioPublicadas;
// this.encuestasUsuarioFinalizadas;
// this.encuestasUsuarioBorrador;
// this.encuestasUsuarioCompletadas;
// this.usuarios;
const _reporteEncuestasUsuarios: any[] = [];
this.usuarios!.forEach((user, index) => {
let _report: any = {};
_report['usuario_nombre'] = user.nombre;
_report['usuario_encuestas'] = this.encuestasUsuario[index];
_report['encuestas_borrador'] = this.encuestasUsuarioBorrador[index];
_report['encuestas_publicadas'] = this.encuestasUsuarioPublicadas[index];
_report['encuestas_finalizadas'] = this.encuestasUsuarioFinalizadas[index];
_report['encuestas_completadas_usuarios'] = this.encuestasUsuarioCompletadas[index];
_reporteEncuestasUsuarios.push(_report);
});
const _excelFinalData = [
_reporteUsuarios,
_reporteEncuestasPublicadas,
_reporteCantidadEncuestasPublicadasCategoria,
_reporteCantidadEncuestasFinalizadasCategoria,
_reporteEncuestasReportesGenerales,
_reporteEncuestasUsuarios,
];
const _fileName = 'reportes_datasurvey';
exportAsExcelFile(_sheets, _excelFinalData, _fileName);
@ -382,15 +420,115 @@ export class DashboardAdminComponent implements OnInit {
*/
const doc = new jsPDF();
const _fileName = 'reportes_datasurvey';
let _docData, _headers, _docHeaders, _docTitle;
const _reporteUsuarios = [{ usuarios_activos: '100', usuarios_bloqueados: '50' }];
const _docData = generatePDFTableData(_reporteUsuarios);
// Usuarios Generales
const _reporteUsuarios = [
{
ganancias_plantillas: this.gananciasTotales!.toString(),
usuarios_activos: this.cantUsuarioActivos!.toString(),
usuarios_bloqueados: this.cantUsuarioBloqueados!.toString(),
},
];
_docData = generatePDFTableData(_reporteUsuarios);
_headers = ['ganancias_plantillas', 'usuarios_activos', 'usuarios_bloqueados'];
_docHeaders = createPDFTableHeaders(_headers);
_docTitle = 'Reporte Usuarios Generales';
const _headers = ['usuarios_activos', 'usuarios_bloqueados'];
const _docHeaders = createPDFTableHeaders(_headers);
const _fileName = 'reporte_general';
const _docTitle = 'Reportes Generales de la Aplicación';
generatePDFTable(doc, _docData, _docHeaders, _docTitle);
doc.addPage('p');
generatePDFTable(doc, _docData, _docHeaders, _fileName, _docTitle);
// Encuestas Publicadas
const _reporteEncuestasPublicadas: any[] = [];
this.listaMesesAnnos.forEach((date: any, index) => {
let _report: any = {};
_report['fecha'] = date;
_report['cantidad'] = this.encuestasPublicadasMesAnno[index].toString();
_reporteEncuestasPublicadas.push(_report);
});
_docData = generatePDFTableData(_reporteEncuestasPublicadas);
_headers = ['fecha', 'cantidad'];
_docHeaders = createPDFTableHeaders(_headers);
_docTitle = 'Reporte Encuestas Publicadas';
generatePDFTable(doc, _docData, _docHeaders, _docTitle);
doc.addPage('p');
// Encuestas Publicadas
const _reporteCantidadEncuestasPublicadasCategoria: any[] = [];
this.categorias!.forEach((categoria: any, index) => {
let _report: any = {};
_report['categoria'] = categoria.nombre;
_report['cantidad'] = this.encuestasPublicadasCategoria[index].toString();
_reporteCantidadEncuestasPublicadasCategoria.push(_report);
});
_docData = generatePDFTableData(_reporteCantidadEncuestasPublicadasCategoria);
_headers = ['categoria', 'cantidad'];
_docHeaders = createPDFTableHeaders(_headers);
_docTitle = 'Reporte Encuestas Publicadas por Categoría';
generatePDFTable(doc, _docData, _docHeaders, _docTitle);
doc.addPage('p');
// Encuestas Publicadas
const _reporteCantidadEncuestasFinalizadasCategoria: any[] = [];
this.categorias!.forEach((categoria: any, index) => {
let _report: any = {};
_report['categoria'] = categoria.nombre;
_report['cantidad'] = this.encuestasFinalzadasCategoria[index].toString();
_reporteCantidadEncuestasFinalizadasCategoria.push(_report);
});
_docData = generatePDFTableData(_reporteCantidadEncuestasFinalizadasCategoria);
_headers = ['categoria', 'cantidad'];
_docHeaders = createPDFTableHeaders(_headers);
_docTitle = 'Reporte Encuestas Finalizadas por Categoría';
generatePDFTable(doc, _docData, _docHeaders, _docTitle);
doc.addPage('', 'l');
// Encuestas Generales
const _reporteEncuestasReportesGenerales = [
{
encuestas_borrador: this.encuestasBorrador.toString(),
encuestas_publicadas: this.encuestasPublicadas.toString(),
encuestas_finalizadas: this.encuestasFinalizadas.toString(),
encuestas_completadas: this.encuestasCompletadas.toString(),
},
];
_docData = generatePDFTableData(_reporteEncuestasReportesGenerales);
_headers = ['encuestas_borrador', 'encuestas_publicadas', 'encuestas_finalizadas', 'encuestas_completadas'];
_docHeaders = createPDFTableHeaders(_headers);
_docTitle = 'Reporte Encuestas Generales';
generatePDFTable(doc, _docData, _docHeaders, _docTitle);
doc.addPage('', 'l');
// Usuarios
const _reporteEncuestasUsuarios: any[] = [];
this.usuarios!.forEach((user, index) => {
let _report: any = {};
_report['usuario_nombre'] = user.nombre;
_report['usuario_encuestas'] = this.encuestasUsuario[index].toString();
_report['encuestas_borrador'] = this.encuestasUsuarioBorrador[index].toString();
_report['encuestas_publicadas'] = this.encuestasUsuarioPublicadas[index].toString();
_report['encuestas_finalizadas'] = this.encuestasUsuarioFinalizadas[index].toString();
_report['encuestas_completadas_usuarios'] = this.encuestasUsuarioCompletadas[index].toString();
_reporteEncuestasUsuarios.push(_report);
});
_docData = generatePDFTableData(_reporteEncuestasUsuarios);
_headers = [
'usuario_nombre',
'usuario_encuestas',
'encuestas_borrador',
'encuestas_publicadas',
'encuestas_finalizadas',
'encuestas_completadas_usuarios',
];
_docHeaders = createPDFTableHeaders(_headers);
_docTitle = 'Reporte de Usuarios';
generatePDFTable(doc, _docData, _docHeaders, _docTitle);
saveGeneratedPDF(doc, _fileName);
}
}

View File

@ -20,19 +20,23 @@ export const createPDFTableHeaders = (keys: any): any[] => {
id: keys[i],
name: keys[i],
prompt: keys[i],
width: 65,
align: 'center',
align: 'left',
padding: 0,
});
}
return result;
};
export const generatePDFTable = (doc: jsPDF, _docData: any, _docHeaders: string[], _fileName: string, _docTitle: string): void => {
export const generatePDFTable = (doc: jsPDF, _docData: any, _docHeaders: string[], _docTitle: string): void => {
doc.setFontSize(20);
doc.setFont('helvetica', 'bold');
doc.text(_docTitle, 20, 20);
doc.table(20, 30, _docData, _docHeaders, { autoSize: true });
doc.setFont('helvetica');
doc.table(20, 30, _docData, _docHeaders, { fontSize: 10, autoSize: true });
};
export const saveGeneratedPDF = (doc: jsPDF, _fileName: string) => {
const generatedFileName = generateFileName(_fileName, PDF_EXTENSION);
doc.save(generatedFileName);
};

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 = {
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 {}