Add information modal for survey parameters

src/main/webapp/app/entities/encuesta/encuesta-publish-dialog/encuesta-publish-dialog.component.ts

@@ -21,7 +21,6 @@ export class EncuestaPublishDialogComponent implements OnInit {
   }
 
   confirmPublish(encuesta: IEncuesta): void {
-    debugger;
     if (encuesta.estado === 'DRAFT') {
       encuesta.estado = EstadoEncuesta.ACTIVE;
     }
@@ -36,7 +35,6 @@ export class EncuestaPublishDialogComponent implements OnInit {
   }
 
   generatePassword(): string {
-    debugger;
     const alpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
 
     let password = '';

src/main/webapp/app/entities/encuesta/list/encuesta.component.ts

@@ -450,6 +450,7 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
       });
 
       if ((event.target as HTMLElement).classList.contains('ds-list')) {
+        document;
         document.getElementById('contextmenu-create--separator')!.style.display = 'block';
         document.getElementById('contextmenu-edit--separator')!.style.display = 'none';
         document.getElementById('contextmenu-delete--separator')!.style.display = 'none';

src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html

@@ -1,6 +1,16 @@
 <div>
   <h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
+    <div class="d-flex align-items-center">
       <p class="ds-title">{{ encuesta!.nombre }}</p>
+      &nbsp;&nbsp;<fa-icon
+        class="ds-info--icon"
+        [icon]="faQuestion"
+        data-toggle="modal"
+        data-target="#verParametros"
+        (click)="loadAplicationParameters()"
+      ></fa-icon>
+    </div>
+
     <p class="ds-subtitle">Creada el día {{ encuesta!.fechaCreacion | formatShortDatetime | lowercase }}</p>
 
     <div class="d-flex justify-content-end">
@@ -12,7 +22,7 @@
       </button>
       <button
         type="button"
-        class="ds-btn ds-btn--secondary"
+        class="ds-btn ds-btn--primary"
         (click)="createQuestion()"
         [disabled]="isLoading"
         data-toggle="modal"
@@ -127,66 +137,6 @@
         </div>
       </ng-container>
     </div>
-
-    <!-- <table class="table table-striped" aria-describedby="page-heading">
-      <thead>
-        <tr>
-          <th scope="col"><span jhiTranslate="global.field.id">ID</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.ePreguntaCerrada.nombre">Nombre</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.ePreguntaCerrada.tipo">Tipo</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.ePreguntaCerrada.opcional">Opcional</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.ePreguntaCerrada.orden">Orden</span></th>
-          <th scope="col"><span jhiTranslate="dataSurveyApp.ePreguntaCerrada.encuesta">Encuesta</span></th>
-          <th scope="col"></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let ePreguntaCerrada of ePreguntaCerradas; trackBy: trackId" data-cy="entityTable">
-          <td>
-            <a [routerLink]="['/e-pregunta-cerrada', ePreguntaCerrada.id, 'view']">{{ ePreguntaCerrada.id }}</a>
-          </td>
-          <td>{{ ePreguntaCerrada.nombre }}</td>
-          <td *ngIf="ePreguntaCerrada.tipo != undefined" jhiTranslate="{{ 'dataSurveyApp.PreguntaCerradaTipo.' + ePreguntaCerrada.tipo }}">{{ ePreguntaCerrada.tipo }}</td>
-          <td *ngIf="ePreguntaCerrada.tipo == undefined"></td>
-          
-          <td>{{ ePreguntaCerrada.opcional }}</td>
-          <td>{{ ePreguntaCerrada.orden }}</td>
-          <td>
-            <div *ngIf="ePreguntaCerrada.encuesta">
-              <a [routerLink]="['/encuesta', ePreguntaCerrada.encuesta?.id, 'view']">{{ ePreguntaCerrada.encuesta?.id }}</a>
-            </div>
-          </td>
-          <td class="text-right">
-            <div class="btn-group">
-              <button
-                type="submit"
-                [routerLink]="['/e-pregunta-cerrada', ePreguntaCerrada.id, 'view']"
-                class="btn btn-info btn-sm"
-                data-cy="entityDetailsButton"
-              >
-                <fa-icon icon="eye"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-              </button>
-
-              <button
-                type="submit"
-                [routerLink]="['/e-pregunta-cerrada', ePreguntaCerrada.id, 'edit']"
-                class="btn btn-primary btn-sm"
-                data-cy="entityEditButton"
-              >
-                <fa-icon icon="pencil-alt"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
-              </button>
-
-              <button type="submit" (click)="delete(ePreguntaCerrada)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
-                <fa-icon icon="times"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
-              </button>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table> -->
   </div>
 </div>
 
@@ -409,265 +359,48 @@
 
 <!-- ------------------------------------------------------------------------------------------------- -->
 
-<!-- <div class="row justify-content-center">
+<!-- Survey Parameters Information -->
-  <div class="col-8">
-    <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
-      <h2 id="jhi-encuesta-heading" data-cy="EncuestaCreateUpdateHeading" jhiTranslate="dataSurveyApp.encuesta.home.createOrEditLabel">
-        Create or edit a Encuesta
-      </h2>
-
-      <div>
-        <jhi-alert-error></jhi-alert-error>
-
-        <div class="form-group" [hidden]="editForm.get('id')!.value == null">
-          <label class="form-control-label" jhiTranslate="global.field.id" for="field_id">ID</label>
-          <input type="number" class="form-control" name="id" id="field_id" data-cy="id" formControlName="id" [readonly]="true" />
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.nombre" for="field_nombre">Nombre</label>
-          <input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
-          <div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
-            <small class="form-text text-danger" *ngIf="editForm.get('nombre')?.errors?.required" jhiTranslate="entity.validation.required">
-              This field is required.
-            </small>
-            <small
-              class="form-text text-danger"
-              *ngIf="editForm.get('nombre')?.errors?.minlength"
-              jhiTranslate="entity.validation.minlength"
-              [translateValues]="{ min: 1 }"
-            >
-              This field is required to be at least 1 characters.
-            </small>
-            <small
-              class="form-text text-danger"
-              *ngIf="editForm.get('nombre')?.errors?.maxlength"
-              jhiTranslate="entity.validation.maxlength"
-              [translateValues]="{ max: 50 }"
-            >
-              This field cannot be longer than 50 characters.
-            </small>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.descripcion" for="field_descripcion">Descripcion</label>
-          <input
-            type="text"
-            class="form-control"
-            name="descripcion"
-            id="field_descripcion"
-            data-cy="descripcion"
-            formControlName="descripcion"
-          />
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.fechaCreacion" for="field_fechaCreacion"
-            >Fecha Creacion</label
-          >
-          <div class="d-flex">
-            <input
-              id="field_fechaCreacion"
-              data-cy="fechaCreacion"
-              type="datetime-local"
-              class="form-control"
-              name="fechaCreacion"
-              formControlName="fechaCreacion"
-              placeholder="YYYY-MM-DD HH:mm"
-            />
-          </div>
 <div
-            *ngIf="
+  class="modal fade ds-modal"
-              editForm.get('fechaCreacion')!.invalid && (editForm.get('fechaCreacion')!.dirty || editForm.get('fechaCreacion')!.touched)
+  id="verParametros"
-            "
+  tabindex="-1"
+  role="dialog"
+  aria-labelledby="exampleModalCenterTitle"
+  aria-hidden="true"
 >
-            <small
+  <div class="modal-dialog modal-dialog-centered" role="document">
-              class="form-text text-danger"
+    <div class="modal-content">
-              *ngIf="editForm.get('fechaCreacion')?.errors?.required"
+      <div class="modal-header">
-              jhiTranslate="entity.validation.required"
+        <h1 class="modal-title" id="exampleModalLongTitle">Información de Encuesta</h1>
-            >
-              This field is required.
-            </small>
-            <small
-              class="form-text text-danger"
-              [hidden]="!editForm.get('fechaCreacion')?.errors?.ZonedDateTimelocal"
-              jhiTranslate="entity.validation.ZonedDateTimelocal"
-            >
-              This field should be a date and time.
-            </small>
-          </div>
       </div>
 
-        <div class="form-group">
+      <!-- {
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.fechaPublicacion" for="field_fechaPublicacion"
+        "id": 1,
-            >Fecha Publicacion</label
+        "maxDiasEncuesta": 20,
-          >
+        "minDiasEncuesta": 2,
-          <div class="d-flex">
+        "maxCantidadPreguntas": 10,
-            <input
+        "minCantidadPreguntas": 2
-              id="field_fechaPublicacion"
+    } -->
-              data-cy="fechaPublicacion"
-              type="datetime-local"
-              class="form-control"
-              name="fechaPublicacion"
-              formControlName="fechaPublicacion"
-              placeholder="YYYY-MM-DD HH:mm"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.fechaFinalizar" for="field_fechaFinalizar"
-            >Fecha Finalizar</label
-          >
-          <div class="d-flex">
-            <input
-              id="field_fechaFinalizar"
-              data-cy="fechaFinalizar"
-              type="datetime-local"
-              class="form-control"
-              name="fechaFinalizar"
-              formControlName="fechaFinalizar"
-              placeholder="YYYY-MM-DD HH:mm"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.fechaFinalizada" for="field_fechaFinalizada"
-            >Fecha Finalizada</label
-          >
-          <div class="d-flex">
-            <input
-              id="field_fechaFinalizada"
-              data-cy="fechaFinalizada"
-              type="datetime-local"
-              class="form-control"
-              name="fechaFinalizada"
-              formControlName="fechaFinalizada"
-              placeholder="YYYY-MM-DD HH:mm"
-            />
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.calificacion" for="field_calificacion">Calificacion</label>
-          <input
-            type="number"
-            class="form-control"
-            name="calificacion"
-            id="field_calificacion"
-            data-cy="calificacion"
-            formControlName="calificacion"
-          />
-          <div
-            *ngIf="editForm.get('calificacion')!.invalid && (editForm.get('calificacion')!.dirty || editForm.get('calificacion')!.touched)"
-          >
-            <small
-              class="form-text text-danger"
-              *ngIf="editForm.get('calificacion')?.errors?.required"
-              jhiTranslate="entity.validation.required"
-            >
-              This field is required.
-            </small>
-            <small
-              class="form-text text-danger"
-              [hidden]="!editForm.get('calificacion')?.errors?.number"
-              jhiTranslate="entity.validation.number"
-            >
-              This field should be a number.
-            </small>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.acceso" for="field_acceso">Acceso</label>
-          <select class="form-control" name="acceso" formControlName="acceso" id="field_acceso" data-cy="acceso">
-            <option [ngValue]="null">{{ 'dataSurveyApp.AccesoEncuesta.null' | translate }}</option>
-            <option value="PUBLIC">{{ 'dataSurveyApp.AccesoEncuesta.PUBLIC' | translate }}</option>
-            <option value="PRIVATE">{{ 'dataSurveyApp.AccesoEncuesta.PRIVATE' | translate }}</option>
-          </select>
-          <div *ngIf="editForm.get('acceso')!.invalid && (editForm.get('acceso')!.dirty || editForm.get('acceso')!.touched)">
-            <small class="form-text text-danger" *ngIf="editForm.get('acceso')?.errors?.required" jhiTranslate="entity.validation.required">
-              This field is required.
-            </small>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.contrasenna" for="field_contrasenna">Contrasenna</label>
-          <input
-            type="text"
-            class="form-control"
-            name="contrasenna"
-            id="field_contrasenna"
-            data-cy="contrasenna"
-            formControlName="contrasenna"
-          />
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.estado" for="field_estado">Estado</label>
-          <select class="form-control" name="estado" formControlName="estado" id="field_estado" data-cy="estado">
-            <option [ngValue]="null">{{ 'dataSurveyApp.EstadoEncuesta.null' | translate }}</option>
-            <option value="DRAFT">{{ 'dataSurveyApp.EstadoEncuesta.DRAFT' | translate }}</option>
-            <option value="ACTIVE">{{ 'dataSurveyApp.EstadoEncuesta.ACTIVE' | translate }}</option>
-            <option value="FINISHED">{{ 'dataSurveyApp.EstadoEncuesta.FINISHED' | translate }}</option>
-            <option value="DELETED">{{ 'dataSurveyApp.EstadoEncuesta.DELETED' | translate }}</option>
-          </select>
-          <div *ngIf="editForm.get('estado')!.invalid && (editForm.get('estado')!.dirty || editForm.get('estado')!.touched)">
-            <small class="form-text text-danger" *ngIf="editForm.get('estado')?.errors?.required" jhiTranslate="entity.validation.required">
-              This field is required.
-            </small>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.categoria" for="field_categoria">Categoria</label>
-          <select class="form-control" id="field_categoria" data-cy="categoria" name="categoria" formControlName="categoria">
-            <option [ngValue]="null"></option>
-            <option
-              [ngValue]="categoriaOption.id === editForm.get('categoria')!.value?.id ? editForm.get('categoria')!.value : categoriaOption"
-              *ngFor="let categoriaOption of categoriasSharedCollection; trackBy: trackCategoriaById"
-            >
-              {{ categoriaOption.nombre }}
-            </option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label class="form-control-label" jhiTranslate="dataSurveyApp.encuesta.usuarioExtra" for="field_usuarioExtra"
-            >Usuario Extra</label
-          >
-          <select class="form-control" id="field_usuarioExtra" data-cy="usuarioExtra" name="usuarioExtra" formControlName="usuarioExtra">
-            <option [ngValue]="null"></option>
-            <option
-              [ngValue]="
-                usuarioExtraOption.id === editForm.get('usuarioExtra')!.value?.id ? editForm.get('usuarioExtra')!.value : usuarioExtraOption
-              "
-              *ngFor="let usuarioExtraOption of usuarioExtrasSharedCollection; trackBy: trackUsuarioExtraById"
-            >
-              {{ usuarioExtraOption.id }}
-            </option>
-          </select>
-        </div>
-      </div>
 
+      <div class="modal-body">
         <div>
-        <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
+          <div class="mb-5">
-          <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+            <p class="ds-subtitle">Duración de encuesta permitida</p>
-        </button>
+            <p>{{ parametrosAplicacion!.minDiasEncuesta }} - {{ parametrosAplicacion!.maxDiasEncuesta }} días</p>
-
+          </div>
-        <button
+          <div>
-          type="submit"
+            <p class="ds-subtitle">Cantidad de preguntas por encuesta</p>
-          id="save-entity"
+            <p>{{ parametrosAplicacion!.minCantidadPreguntas }} - {{ parametrosAplicacion!.maxCantidadPreguntas }} preguntas</p>
-          data-cy="entityCreateSaveButton"
+          </div>
-          [disabled]="editForm.invalid || isSaving"
+        </div>
-          class="btn btn-primary"
+      </div>
-        >
+      <div class="modal-footer">
-          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Save</span>
+        <button id="cancelBtnVerParametros" type="button" class="ds-btn ds-btn--secondary" data-dismiss="modal">
+          <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span>Volver</span>
         </button>
       </div>
-    </form>
     </div>
-</div> -->
+  </div>
+</div>
+
+<!-- ------------------------------------------------------------------------------------------------- -->

src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts

@@ -25,11 +25,14 @@ import { IEPreguntaCerrada } from 'app/entities/e-pregunta-cerrada/e-pregunta-ce
 import { EPreguntaCerradaService } from 'app/entities/e-pregunta-cerrada/service/e-pregunta-cerrada.service';
 import { EPreguntaCerradaDeleteDialogComponent } from 'app/entities/e-pregunta-cerrada/delete/e-pregunta-cerrada-delete-dialog.component';
 
-import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
 import { PreguntaCerradaTipo } from 'app/entities/enumerations/pregunta-cerrada-tipo.model';
 import { EncuestaDeleteQuestionDialogComponent } from '../encuesta-delete-question-dialog/encuesta-delete-question-dialog.component';
 import { EncuestaDeleteOptionDialogComponent } from '../encuesta-delete-option-dialog/encuesta-delete-option-dialog.component';
 
+import { ParametroAplicacionService } from './../../parametro-aplicacion/service/parametro-aplicacion.service';
+import { IParametroAplicacion } from './../../parametro-aplicacion/parametro-aplicacion.model';
+
 @Component({
   selector: 'jhi-encuesta-update',
   templateUrl: './encuesta-update.component.html',
@@ -37,6 +40,7 @@ import { EncuestaDeleteOptionDialogComponent } from '../encuesta-delete-option-d
 export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
   faTimes = faTimes;
   faPlus = faPlus;
+  faQuestion = faQuestion;
 
   isSaving = false;
   isSavingQuestion = false;
@@ -79,6 +83,7 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
   ePreguntas?: any[];
   ePreguntasOpciones?: any[];
   encuesta: Encuesta | null = null;
+  parametrosAplicacion?: IParametroAplicacion | null = null;
 
   isLoading = false;
 
@@ -95,7 +100,8 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
     protected modalService: NgbModal,
     protected ePreguntaCerradaService: EPreguntaCerradaService,
     protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService,
-    protected ePreguntaAbiertaService: EPreguntaAbiertaService
+    protected ePreguntaAbiertaService: EPreguntaAbiertaService,
+    protected parametroAplicacionService: ParametroAplicacionService
   ) {}
 
   loadAll(): void {
@@ -123,6 +129,12 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
     );
   }
 
+  async loadAplicationParameters(): Promise<void> {
+    const params = await this.parametroAplicacionService.find(1).toPromise();
+    this.parametrosAplicacion = params.body;
+    console.log(this.parametrosAplicacion);
+  }
+
   ngOnInit(): void {
     this.activatedRoute.data.subscribe(({ encuesta }) => {
       if (encuesta.id === undefined) {
@@ -134,6 +146,7 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
       } else {
         this.encuesta = encuesta;
         this.loadAll();
+        this.loadAplicationParameters();
       }
 
       // this.updateForm(encuesta);

src/main/webapp/content/scss/paper-dashboard/_datasurvey-global.scss

@@ -19,3 +19,22 @@
 p {
   margin: 0 !important;
 }
+
+.ds-info--icon {
+  border-radius: 50%;
+  background-color: #f1f5f9;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  width: 20px;
+  height: 20px;
+  font-size: 0.7rem;
+  color: #313747;
+  pointer-events: visible !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #e3e6e9;
+  }
+}