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

<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]="!reportsGeneral || (reportForEncuestas && reportColaboraciones)"
      class="ds-btn ds-btn--primary"
      style="float: right"
      (click)="cambiarVista()"
    >
      Ver reportes generales
    </button>
    <button
      type="button"
      [hidden]="!reportForEncuestas || (reportsGeneral && reportColaboraciones)"
      class="ds-btn ds-btn--primary"
      style="float: right"
      (click)="cambiarVista()"
    >
      Ver reportes por encuestas
    </button>
    <button
      type="button"
      [hidden]="!reportColaboraciones || (reportsGeneral && reportForEncuestas)"
      class="ds-btn ds-btn--primary"
      style="float: right"
      (click)="cambiarVistaColaboracion('colaboracion')"
    >
      Ver reportes de colaboraciones
    </button>

    <button type="button" [hidden]="reportPreguntas" class="ds-btn ds-btn--secondary" style="float: right" (click)="cambiarVista()">
      <fa-icon icon="arrow-left"></fa-icon>&nbsp; Volver
    </button>
    <button
      type="button"
      [hidden]="reportColaboracionPreguntas"
      class="ds-btn ds-btn--secondary"
      style="float: right"
      (click)="cambiarVista()"
    >
      <fa-icon icon="arrow-left"></fa-icon>&nbsp; Volver
    </button>
  </div>

  <div class="container-fluid">
    <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>

    <div class="py-2" [hidden]="reportPreguntas">
      <h1>Detalles de la encuesta</h1>
      <h2>En esta sección encontrará los reportes con respecto al contenido de las preguntas de su encuesta</h2>
    </div>
    <div class="py-2" [hidden]="reportColaboraciones">
      <h1>Reportes de colaboraciones</h1>
      <h2>En esta sección encontrará los reportes generales de todas las colaboraciones en las que esté participando</h2>
    </div>
    <div class="py-2" [hidden]="reportColaboracionPreguntas">
      <h1>Detalles de la encuesta en la que colabora</h1>
      <h2>En esta sección encontrará los reportes con respecto al contenido de las preguntas de la encuesta a la que colabora</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="ds-survey" id="entitiesEncuestas" *ngIf="encuestas && encuestas?.length === 0">
        <div class="ds-survey--all-question-wrapper">
          <ng-container class="">
            <p class="ds-title text-center">No posee encuestas</p>
          </ng-container>
        </div>
      </div>
      <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(encuesta)" class="ds-btn btn-card ds-btn--primary">
                      <fa-icon [icon]="faEye"></fa-icon>&nbsp;&nbsp;Detalle
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--REPORTES DE LAS PREGUNTAS-->

    <div class="container-fluid" *ngIf="encuesta" [hidden]="reportPreguntas">
      <div class="ds-survey" id="entitiesPreguntas" *ngIf="ePreguntas && ePreguntas?.length === 0">
        <div class="ds-survey--all-question-wrapper">
          <ng-container class="">
            <p class="ds-title text-center">No se encontraron preguntas</p>
          </ng-container>
        </div>
      </div>
      <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" *ngFor="let ePregunta of ePreguntas; let i = index">
              <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">
                    <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="text"
                              readonly
                              style="border-radius: 3px"
                              name="{{ 'radio' + ePregunta.id }}"
                              id="'radio'"
                            />-->
                            <label>{{
                              ePreguntaOpcionFinal.nombre + ' / Cantidad de veces seleccionada: ' + ePreguntaOpcionFinal.cantidad
                            }}</label>
                          </div>
                          <div class="checkbox" *ngIf="ePregunta.tipo === 'MULTIPLE'">
                            <!--<input

                              type="checkbox"
                              style="border-radius: 3px"
                              id="{{ 'checkbox' + ePreguntaOpcionFinal.id }}"
                            />-->
                            <label>{{
                              ePreguntaOpcionFinal.nombre + ' / Cantidad de veces seleccionada: ' + ePreguntaOpcionFinal.cantidad
                            }}</label>
                          </div>
                        </div>
                      </ng-container>
                    </ng-container>
                  </ng-container>
                </ng-container>
                <div *ngIf="!ePregunta.tipo">
                  <div *ngFor="let res of respuestaAbierta">
                    <!-- <ul>
                      <li *ngIf="res.epreguntaAbierta?.id == preguntaId"> {{ res.respuesta }}</li>
                    </ul>-->
                    <!-- <textarea readonly class="ds-survey&#45;&#45;textarea" cols="33" rows="10" *ngIf="res.epreguntaAbierta?.id == preguntaId" > {{ res.respuesta }} </textarea>-->

                    <div *ngIf="res.epreguntaAbierta?.id == preguntaId">
                      <label> {{ '- ' + res.respuesta }}</label> <br />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--REPORTE POR COLABORACION-->

    <div class="container-fluid" [hidden]="reportColaboraciones">
      <div class="ds-survey" id="entitiesColaboraciones" *ngIf="usuarioEncuestas && usuarioEncuestas?.length === 0">
        <div class="ds-survey--all-question-wrapper">
          <ng-container class="">
            <p class="ds-title text-center">No posee colaboraciones</p>
          </ng-container>
        </div>
      </div>
      <div class="row gx-5" *ngIf="usuarioEncuestas && usuarioEncuestas.length > 0">
        <div class="col-xl-4 col-lg-4 col-md-6 mb-5" *ngFor="let colaboracion of usuarioEncuestas">
          <div class="card-encuesta lift h-100" *ngIf="colaboracion.encuesta" [attr.data-id]="colaboracion.encuesta.id">
            <div class="card-body p-3">
              <div class="card-title mb-0">{{ colaboracion.encuesta.nombre }}</div>
              <div class="entity-body--row m-2">
                <span class="tag mt-2">{{ colaboracion.encuesta.categoria?.nombre | lowercase }}</span>
              </div>
              <div class="entity-body--row m-2">
                <span class="subtitle mt-2">{{ colaboracion.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="duracionColaboracion! > 0"
                      ><fa-icon class="entity-icon--access" [icon]="faCalendarAlt"></fa-icon> Duración: &nbsp;&nbsp;&nbsp;&nbsp;{{
                        duracionColaboracion
                      }}</span
                    >
                    <span class="mt-2" *ngIf="duracionColaboracion! == 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="duracionColaboracion! == -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(colaboracion.encuesta.calificacion)"
                      class="entity-icon--star"
                      [icon]="faStar"
                    ></fa-icon>
                    <fa-icon
                      *ngFor="let i of [].constructor(5 - colaboracion.encuesta.calificacion!)"
                      class="entity-icon--star--off"
                      [icon]="faStar"
                    ></fa-icon>
                  </div>
                  <div class="entity-body--row m-2">
                    <button (click)="detallesPreguntasColaboracion(colaboracion.encuesta)" class="ds-btn btn-card ds-btn--primary">
                      <fa-icon [icon]="faEye"></fa-icon>&nbsp;&nbsp;Detalle
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--REPORTES DE LAS PREGUNTAS DE LA COLABORACION-->

    <div class="container-fluid" *ngIf="encuesta" [hidden]="reportColaboracionPreguntas">
      <div>
        <div
          class="ds-survey"
          id="entitiesPreguntasColaboracion"
          *ngIf="ePreguntasOpcionesColaboracion && ePreguntasOpcionesColaboracion?.length === 0"
        >
          <div class="ds-survey--all-question-wrapper">
            <ng-container class="">
              <p class="ds-title text-center">No se encontraron preguntas</p>
            </ng-container>
          </div>
        </div>

        <div
          class="ds-survey preview-survey"
          id="entitiesColaboration"
          *ngIf="ePreguntasOpcionesColaboracion && ePreguntasOpcionesColaboracion.length > 0"
        >
          <div class="ds-survey--all-question-wrapper col-8">
            <div class="ds-survey--question-wrapper card-encuesta" *ngFor="let ePregunta of ePreguntasOpcionesColaboracion; let i = index">
              <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 ePreguntasOpcionesColaboracion; let j = index">
                    <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="text"
                              readonly
                              style="border-radius: 3px"
                              name="{{ 'radio' + ePregunta.id }}"
                              id="'radio'"
                            />-->
                            <label>{{
                              ePreguntaOpcionFinal.nombre + ' / Cantidad de veces seleccionada: ' + ePreguntaOpcionFinal.cantidad
                            }}</label>
                          </div>
                          <div class="checkbox" *ngIf="ePregunta.tipo === 'MULTIPLE'">
                            <!--<input

                              type="checkbox"
                              style="border-radius: 3px"
                              id="{{ 'checkbox' + ePreguntaOpcionFinal.id }}"
                            />-->
                            <label>{{
                              ePreguntaOpcionFinal.nombre + ' / Cantidad de veces seleccionada: ' + ePreguntaOpcionFinal.cantidad
                            }}</label>
                          </div>
                        </div>
                      </ng-container>
                    </ng-container>
                  </ng-container>
                </ng-container>
                <div *ngIf="!ePregunta.tipo">
                  <div *ngFor="let res of respuestaAbiertaColaboracion">
                    <!-- <ul>
                      <li *ngIf="res.epreguntaAbierta?.id == preguntaId"> {{ res.respuesta }}</li>
                    </ul>-->
                    <!-- <textarea readonly class="ds-survey&#45;&#45;textarea" cols="33" rows="10" *ngIf="res.epreguntaAbierta?.id == preguntaId" > {{ res.respuesta }} </textarea>-->

                    <div *ngIf="res.epreguntaAbierta?.id == preguntaId">
                      <label> {{ '- ' + res.respuesta }}</label> <br />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>