agregacion de reportes por encuesta

package-lock.json

@@ -3039,6 +3039,14 @@
         "@types/jquery": "*"
       }
     },
+    "@types/chart.js": {
+      "version": "2.9.34",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.34.tgz",
+      "integrity": "sha512-CtZVk+kh1IN67dv+fB0CWmCLCRrDJgqOj15qPic2B1VCMovNO6B7Vhf/TgPpNscjhAL1j+qUntDMWb9A4ZmPTg==",
+      "requires": {
+        "moment": "^2.10.2"
+      }
+    },
     "@types/chartist": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@types/chartist/-/chartist-0.11.1.tgz",
@@ -12486,6 +12494,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -13151,6 +13164,11 @@
         "mkdirp": "^1.0.3"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -13280,6 +13298,16 @@
         "tslib": "^2.1.0"
       }
     },
+    "ng2-charts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-2.4.2.tgz",
+      "integrity": "sha512-mY3C2uKCaApHCQizS2YxEOqQ7sSZZLxdV6N1uM9u/VvUgVtYvlPtdcXbKpN52ak93ZE22I73DiLWVDnDNG4/AQ==",
+      "requires": {
+        "@types/chart.js": "^2.9.24",
+        "lodash-es": "^4.17.15",
+        "tslib": "^2.0.0"
+      }
+    },
     "ngx-infinite-scroll": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz",

package.json

@@ -94,6 +94,7 @@
     "jspdf": "^2.3.1",
     "jw-angular-social-buttons": "^1.0.0",
     "ng-chartist": "^5.0.0",
+    "ng2-charts": "^2.4.2",
     "ngx-infinite-scroll": "10.0.1",
     "ngx-paypal": "^8.0.0",
     "ngx-sharebuttons": "^8.0.5",

src/main/webapp/app/entities/dashboard/dashboard-user/dashboard-user.component.html

@@ -1,8 +1,236 @@
 <div class="content">
+  <div class="py-2">
+    <!--<button type="button" class="ds-btn ds-btn&#45;&#45;primary" (click)="exportReportesGeneralesUserExcel()">Exportar como Excel</button>
+    <button type="button" class="ds-btn ds-btn&#45;&#45;primary" (click)="exportReportesGeneralesUserPDF()">Exportar como PDF</button>-->
+    <button type="button" [hidden]="reportForEncuestas" class="ds-btn ds-btn--primary" style="float: right" (click)="cambiarVista()">
+      Ver reportes generales
+    </button>
+    <button type="button" [hidden]="reportsGeneral" class="ds-btn ds-btn--primary" style="float: right" (click)="cambiarVista()">
+      Ver reportes por encuestas
+    </button>
+  </div>
+
   <div class="container-fluid">
-    <div class="col-lg-3 col-sm-6">
+    <div class="py-2" [hidden]="reportsGeneral">
       <h1>Reportes generales</h1>
       <h2>En esta sección encontrará los reportes generales de todas sus encuestas</h2>
     </div>
+
+    <div class="py-2" [hidden]="reportForEncuestas">
+      <h1>Reportes por encuesta</h1>
+      <h2>En esta sección encontrará los reportes de cada una de sus encuestas</h2>
+    </div>
+    <hr />
+
+    <!--REPORTES GENERALES-->
+    <div class="container-fluid py-5" [hidden]="reportsGeneral">
+      <div class="">
+        <div class="row justify-content-around">
+          <div class="col-lg-3 col-sm-6">
+            <div class="card">
+              <div class="card-content">
+                <div class="row">
+                  <div class="col-xs-5 w-25 px-1">
+                    <div class="icon-big icon-success text-center">
+                      <fa-icon [icon]="faListAlt"></fa-icon>
+                    </div>
+                  </div>
+                  <div class="col-xs-7 w-50">
+                    <div class="numbers">
+                      <p class="ds-title--small">Cantidad de encuestas creadas</p>
+                      {{ cantEncuestas }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <hr />
+                <br />
+              </div>
+            </div>
+          </div>
+
+          <div class="col-lg-3 col-sm-6">
+            <div class="card">
+              <div class="card-content">
+                <div class="row">
+                  <div class="col-xs-5 w-25 px-1">
+                    <div class="icon-big icon-users-active text-center">
+                      <fa-icon [icon]="faUser"></fa-icon>
+                    </div>
+                  </div>
+                  <div class="col-xs-7 w-50">
+                    <div class="numbers">
+                      <p class="ds-title--small">Cantidad de usuario que han completado las encuestas</p>
+                      {{ cantPersonas }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <hr />
+                <br />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row justify-content-around por-categoria">
+          <div class="col-md-5">
+            <div class="grafico-encuestas-fecha">
+              <div class="card" height="300" width="300">
+                <h1 class="ds-title">Cantidad de encuestas por estado</h1>
+
+                <div id="chartEstado" class="ct-chart ct-major-tenth"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="col-md-5">
+            <div class="grafico-encuestas-fecha">
+              <div class="card" height="300" width="300">
+                <h1 class="ds-title">Cantidad de encuestas por acceso</h1>
+
+                <div id="chartAcceso" class="ct-chart ct-major-tenth"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--REPORTE POR ENCUESTA-->
+
+    <div class="container-fluid" [hidden]="reportForEncuestas">
+      <div class="row gx-5" *ngIf="encuestas && encuestas.length > 0">
+        <div class="col-xl-4 col-lg-4 col-md-6 mb-5" *ngFor="let encuesta of encuestas">
+          <div class="card-encuesta lift h-100" [attr.data-id]="encuesta.id">
+            <div class="card-body p-3">
+              <div class="card-title mb-0">{{ encuesta.nombre }}</div>
+              <div class="entity-body--row m-2">
+                <span class="tag mt-2">{{ encuesta.categoria?.nombre | lowercase }}</span>
+              </div>
+              <div class="entity-body--row m-2">
+                <span class="subtitle mt-2">{{ encuesta.descripcion | titlecase }}</span>
+              </div>
+              <div class="text-xs text-gray-500">
+                <div class="entity-body">
+                  <div class="entity-body--row m-2">
+                    <span class="mt-2" *ngIf="duracion! > 0"
+                      ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon> Duración: &nbsp;&nbsp;&nbsp;&nbsp;{{
+                        duracion
+                      }}</span
+                    >
+                    <span class="mt-2" *ngIf="duracion! == 0"
+                      ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon> Duración: &nbsp;&nbsp;&nbsp;&nbsp;Un día o
+                      menos</span
+                    >
+
+                    <span class="mt-2" *ngIf="duracion! == -1"
+                      ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon> Duración: &nbsp;&nbsp;&nbsp;&nbsp;No ha
+                      finalizado</span
+                    >
+                  </div>
+
+                  <div class="entity-body--row m-2">
+                    <p>Calificación:</p>
+                    <fa-icon *ngFor="let i of [].constructor(encuesta.calificacion)" class="entity-icon--star" [icon]="faStar"></fa-icon>
+                    <fa-icon
+                      *ngFor="let i of [].constructor(5 - encuesta.calificacion!)"
+                      class="entity-icon--star--off"
+                      [icon]="faStar"
+                    ></fa-icon>
+                  </div>
+                  <div class="entity-body--row m-2">
+                    <button (click)="detallesPreguntas()" class="ds-btn btn-card ds-btn--primary">
+                      <fa-icon [icon]="faEye"></fa-icon>&nbsp;&nbsp;Reporte de contenido
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--REPORTES DE LAS PREGUNTAS-->
+
+    <div class="container-fluid" *ngIf="encuesta">
+      <div>
+        <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--all-question-wrapper col-8">
+            <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"
+                [attr.data-tipo]="ePregunta.tipo"
+                [attr.data-opcional]="ePregunta.opcional"
+                class="ds-survey--question"
+              >
+                <div class="ds-survey--titulo">
+                  <span class="ds-survey--titulo--name">{{ i + 1 }}. {{ ePregunta.nombre }}</span>
+                </div>
+                <div>
+                  <span *ngIf="ePregunta.tipo === 'SINGLE'" class="ds-subtitle"
+                    >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}
+                    {{ ePregunta.opcional ? '(opcional)' : '' }}</span
+                  >
+                  <span *ngIf="ePregunta.tipo === 'MULTIPLE'" class="ds-subtitle"
+                    >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate | lowercase }}
+                    {{ ePregunta.opcional ? '(opcional)' : '' }}</span
+                  >
+                  <span *ngIf="!ePregunta.tipo" class="ds-subtitle"
+                    >Pregunta de respuesta abierta {{ ePregunta.opcional ? '(opcional)' : '' }}</span
+                  >
+                </div>
+                <ng-container *ngIf="ePregunta.tipo">
+                  <ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
+                    <ng-container *ngFor="let ePreguntaOpcionFinal of ePreguntaOpcion">
+                      <ng-container *ngIf="ePregunta.id === ePreguntaOpcionFinal.epreguntaCerrada.id">
+                        <div
+                          class="ds-survey--option ds-survey--option--base ds-survey--closed-option can-delete"
+                          [attr.data-id]="ePreguntaOpcionFinal.id"
+                        >
+                          <div class="radio" *ngIf="ePregunta.tipo === 'SINGLE'">
+                            <input
+                              type="radio"
+                              (change)="onCheck(ePreguntaOpcionFinal)"
+                              [value]="ePreguntaOpcionFinal.id"
+                              style="border-radius: 3px"
+                              name="{{ 'radio' + ePregunta.id }}"
+                              id="{{ 'radio' + ePreguntaOpcionFinal.id }}"
+                            />
+                            <label for="{{ 'radio' + ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label>
+                          </div>
+                          <div class="checkbox" *ngIf="ePregunta.tipo === 'MULTIPLE'">
+                            <input
+                              (change)="toggleOption(ePreguntaOpcionFinal)"
+                              type="checkbox"
+                              style="border-radius: 3px"
+                              id="{{ 'checkbox' + ePreguntaOpcionFinal.id }}"
+                            />
+                            <label for="{{ 'checkbox' + ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.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="!ePregunta.tipo">
+                  <textarea id="{{ ePregunta.id }}" cols="33" rows="10"></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

src/main/webapp/app/entities/dashboard/dashboard-user/dashboard-user.component.ts

@@ -7,6 +7,8 @@ import { UsuarioExtra } from '../../usuario-extra/usuario-extra.model';
 import { Account } from '../../../core/auth/account.model';
 import { AccountService } from '../../../core/auth/account.service';
 import { UsuarioExtraService } from '../../usuario-extra/service/usuario-extra.service';
+import { faListAlt, faUser, faEye, faStar, faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
+import * as Chartist from 'chartist';
 
 @Component({
   selector: 'jhi-dashboard-user',
@@ -21,6 +23,14 @@ export class DashboardUserComponent implements OnInit {
   cantDraft: number = 0;
   cantPublicas: number = 0;
   cantPrivadas: number = 0;
+  faListAlt = faListAlt;
+  faUser = faUser;
+  faEye = faEye;
+  faStar = faStar;
+  faCalendarAlt = faCalendarAlt;
+  reportsGeneral = false;
+  reportForEncuestas = true;
+  duracion?: number = 0;
 
   isLoading = false;
   encuestas?: IEncuesta[];
@@ -37,6 +47,16 @@ export class DashboardUserComponent implements OnInit {
     this.loadUser();
   }
 
+  cambiarVista() {
+    if (this.reportsGeneral) {
+      this.reportsGeneral = false;
+      this.reportForEncuestas = true;
+    } else if (this.reportForEncuestas) {
+      this.reportsGeneral = true;
+      this.reportForEncuestas = false;
+    }
+  }
+
   loadEncuestas() {
     this.encuestaService.query().subscribe(
       (res: HttpResponse<IEncuesta[]>) => {
@@ -45,12 +65,30 @@ export class DashboardUserComponent implements OnInit {
 
         this.encuestas = tmpEncuestas.filter(e => e.usuarioExtra?.id === this.usuarioExtra?.id);
         this.cantEncuestas = this.encuestas.length;
-        this.cantActivas = tmpEncuestas.filter(e => e.estado === 'ACTIVE').length;
+        this.cantActivas = tmpEncuestas.filter(e => e.estado === 'ACTIVE' && e.usuarioExtra?.id === this.usuarioExtra?.id).length;
-        this.cantDraft = tmpEncuestas.filter(e => e.estado === 'DRAFT').length;
+        this.cantDraft = tmpEncuestas.filter(e => e.estado === 'DRAFT' && e.usuarioExtra?.id === this.usuarioExtra?.id).length;
-        this.cantFinalizadas = tmpEncuestas.filter(e => e.estado === 'FINISHED').length;
+        this.cantFinalizadas = tmpEncuestas.filter(e => e.estado === 'FINISHED' && e.usuarioExtra?.id === this.usuarioExtra?.id).length;
-        this.cantPublicas = tmpEncuestas.filter(e => e.acceso === 'PUBLIC').length;
+        this.cantPublicas = tmpEncuestas.filter(e => e.acceso === 'PUBLIC' && e.usuarioExtra?.id === this.usuarioExtra?.id).length;
-        this.cantPrivadas = tmpEncuestas.filter(e => e.acceso === 'PRIVATE').length;
+        this.cantPrivadas = tmpEncuestas.filter(e => e.acceso === 'PRIVATE' && e.usuarioExtra?.id === this.usuarioExtra?.id).length;
+
+        tmpEncuestas.forEach(encuesta => {
+          const _calificacion = encuesta.calificacion;
+          encuesta.calificacion = Number(_calificacion?.toString().split('.')[0]);
+
+          debugger;
+
+          if (encuesta.fechaFinalizada == null) {
+            this.duracion = -1;
+          } else {
+            this.duracion = encuesta.fechaPublicacion?.diff(encuesta.fechaFinalizada!, 'days');
+          }
+        });
+
+        this.cantPersonas = tmpEncuestas.filter(e => e.calificacion && e.usuarioExtra?.id === this.usuarioExtra?.id).length;
         //cantidad de personas que han completado la encuesta
+
+        this.loadFirstChart();
+        this.loadSecondChart();
       },
       () => {
         this.isLoading = false;
@@ -69,4 +107,24 @@ export class DashboardUserComponent implements OnInit {
 
     this.loadEncuestas();
   }
+
+  loadFirstChart(): void {
+    var dataEstado = {
+      labels: ['ACTIVOS', 'BORRADOR', 'FINALIZADOS'],
+      series: [this.cantActivas, this.cantDraft, this.cantFinalizadas],
+    };
+
+    new Chartist.Pie('#chartEstado', dataEstado);
+  }
+
+  loadSecondChart(): void {
+    var dataAcceso = {
+      labels: ['PÚBLICA', 'PRIVADA'],
+      series: [this.cantPublicas, this.cantPrivadas],
+    };
+
+    new Chartist.Pie('#chartAcceso', dataAcceso);
+  }
+
+  detallesPreguntas(): void {}
 }