From aeb5538a4a0780a057ca8b498ed9cb00e1a41126 Mon Sep 17 00:00:00 2001
From: Pablo Bonilla <pbonilla29@hotmail.com>
Date: Fri, 23 Jul 2021 01:00:40 -0600
Subject: [PATCH] Add modal for question option creation

---
 .../rest/EPreguntaCerradaOpcionResource.java  |  11 +-
 .../e-pregunta-cerrada-opcion.service.ts      |   4 +-
 .../update/encuesta-update.component.html     |  97 ++++++++++++++-
 .../update/encuesta-update.component.ts       | 112 ++++++++++++++++--
 .../_datasurvey-survey-update.scss            |  58 ++++++++-
 5 files changed, 258 insertions(+), 24 deletions(-)

diff --git a/src/main/java/org/datasurvey/web/rest/EPreguntaCerradaOpcionResource.java b/src/main/java/org/datasurvey/web/rest/EPreguntaCerradaOpcionResource.java
index 08dd3c7..07e194d 100644
--- a/src/main/java/org/datasurvey/web/rest/EPreguntaCerradaOpcionResource.java
+++ b/src/main/java/org/datasurvey/web/rest/EPreguntaCerradaOpcionResource.java
@@ -8,6 +8,7 @@ import java.util.Objects;
 import java.util.Optional;
 import javax.validation.Valid;
 import javax.validation.constraints.NotNull;
+import org.datasurvey.domain.EPreguntaCerrada;
 import org.datasurvey.domain.EPreguntaCerradaOpcion;
 import org.datasurvey.repository.EPreguntaCerradaOpcionRepository;
 import org.datasurvey.service.EPreguntaCerradaOpcionQueryService;
@@ -59,10 +60,15 @@ public class EPreguntaCerradaOpcionResource {
      * @return the {@link ResponseEntity} with status {@code 201 (Created)} and with body the new ePreguntaCerradaOpcion, or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion has already an ID.
      * @throws URISyntaxException if the Location URI syntax is incorrect.
      */
-    @PostMapping("/e-pregunta-cerrada-opcions")
+    @PostMapping("/e-pregunta-cerrada-opcions/{id}")
     public ResponseEntity<EPreguntaCerradaOpcion> createEPreguntaCerradaOpcion(
-        @Valid @RequestBody EPreguntaCerradaOpcion ePreguntaCerradaOpcion
+        @Valid @RequestBody EPreguntaCerradaOpcion ePreguntaCerradaOpcion,
+        @PathVariable(value = "id", required = false) final Long id
     ) throws URISyntaxException {
+        EPreguntaCerrada ePreguntaCerrada = new EPreguntaCerrada();
+        ePreguntaCerrada.setId(id);
+        ePreguntaCerradaOpcion.setEPreguntaCerrada(ePreguntaCerrada);
+
         log.debug("REST request to save EPreguntaCerradaOpcion : {}", ePreguntaCerradaOpcion);
         if (ePreguntaCerradaOpcion.getId() != null) {
             throw new BadRequestAlertException("A new ePreguntaCerradaOpcion cannot already have an ID", ENTITY_NAME, "idexists");
@@ -202,7 +208,6 @@ public class EPreguntaCerradaOpcionResource {
     public ResponseEntity<Void> deleteManyEPreguntaCerradaOpcion(@Valid @RequestBody int[] ids) {
         for (int id : ids) {
             ePreguntaCerradaOpcionService.delete((long) id);
-            System.out.println(id);
         }
         return ResponseEntity
             .noContent()
diff --git a/src/main/webapp/app/entities/e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service.ts b/src/main/webapp/app/entities/e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service.ts
index 019d0b6..0f02ff1 100644
--- a/src/main/webapp/app/entities/e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service.ts
+++ b/src/main/webapp/app/entities/e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service.ts
@@ -16,8 +16,8 @@ export class EPreguntaCerradaOpcionService {
 
   constructor(protected http: HttpClient, protected applicationConfigService: ApplicationConfigService) {}
 
-  create(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion): Observable<EntityResponseType> {
-    return this.http.post<IEPreguntaCerradaOpcion>(this.resourceUrl, ePreguntaCerradaOpcion, { observe: 'response' });
+  create(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion, preguntaId?: number): Observable<EntityResponseType> {
+    return this.http.post<IEPreguntaCerradaOpcion>(`${this.resourceUrl}/${preguntaId}`, ePreguntaCerradaOpcion, { observe: 'response' });
   }
 
   update(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion): Observable<EntityResponseType> {
diff --git a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html
index 247b0eb..1b596a8 100644
--- a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html
+++ b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.html
@@ -47,21 +47,45 @@
               [attr.data-type]="ePregunta.tipo"
             ></fa-icon>
           </div>
+          <div>
+            <span *ngIf="ePregunta.tipo === 'SINGLE'" class="ds-subtitle"
+              >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}</span
+            >
+            <span *ngIf="ePregunta.tipo === 'MULTIPLE'" class="ds-subtitle"
+              >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate | lowercase }}</span
+            >
+            <span *ngIf="!ePregunta.tipo" class="ds-subtitle">Pregunta de respuesta abierta</span>
+          </div>
           <ng-container *ngIf="ePregunta.tipo">
             <ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
               <ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id">
                 <div
-                  class="ds-survey--option ds-survey--closed-option"
+                  class="ds-survey--option ds-survey--option--base ds-survey--closed-option"
                   *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId"
                   [attr.data-id]="ePreguntaOpcion2.id"
                 >
-                  <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}" type="checkbox" disabled />
+                  <!-- <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}" type="checkbox" disabled /> -->
                   <label for="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}">{{ ePreguntaOpcion2.nombre }}</label>
                 </div>
               </ng-container>
             </ng-container>
+            <div
+              class="ds-survey--option ds-survey--option--add ds-survey--closed-option"
+              (click)="resetForm($event)"
+              data-toggle="modal"
+              data-target="#crearOpcion"
+              [attr.data-id]="ePregunta.id"
+            >
+              <fa-icon
+                class="ds-survey--add-option--icon"
+                [icon]="faPlus"
+                [attr.data-id]="ePregunta.id"
+                [attr.data-type]="ePregunta.tipo"
+              ></fa-icon>
+              <span class="ds-survey--add-option">Añadir pregunta</span>
+            </div>
           </ng-container>
-          <div class="ds-survey--option ds-survey--open-option" *ngIf="!ePregunta.tipo">
+          <div class="ds-survey--option ds-survey--option--base ds-survey--open-option" *ngIf="!ePregunta.tipo">
             <textarea name="" id="" cols="30" rows="10" disabled></textarea>
           </div>
         </div>
@@ -130,6 +154,73 @@
   </div>
 </div>
 
+<!-- Modal -->
+<div class="modal fade ds-modal" id="crearOpcion" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <form autocomplete="off" class="ds-form" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
+        <div class="modal-header">
+          <h1 class="modal-title" id="exampleModalLongTitle">Crear Opción</h1>
+        </div>
+        <div class="modal-body">
+          <!-- Survey Closed Question Create Option Modal -->
+          <div>
+            <jhi-alert-error></jhi-alert-error>
+
+            <div class="form-group">
+              <label class="form-control-label" jhiTranslate="dataSurveyApp.ePreguntaCerradaOpcion.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: 500 }"
+                >
+                  This field cannot be longer than 500 characters.
+                </small>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <input id="createAnother" type="checkbox" (change)="createAnotherChange($event)" />
+          <label for="createAnother">Crear otra</label>
+          <button id="cancelBtn" type="button" class="ds-btn ds-btn--secondary" data-dismiss="modal">
+            <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
+          </button>
+          <button
+            type="submit"
+            id="save-entity"
+            data-cy="entityCreateSaveButton"
+            class="ds-btn ds-btn--primary"
+            [disabled]="editForm.invalid || isSaving"
+          >
+            <span jhiTranslate="entity.action.create">Create</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- ------------------------------------------------------------------------------------------------- -->
+
 <!-- <div class="row justify-content-center">
   <div class="col-8">
     <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
diff --git a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts
index 3799c3e..1e4f140 100644
--- a/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts
+++ b/src/main/webapp/app/entities/encuesta/update/encuesta-update.component.ts
@@ -1,3 +1,5 @@
+import { EPreguntaCerrada } from './../../e-pregunta-cerrada/e-pregunta-cerrada.model';
+import { EPreguntaCerradaOpcion, IEPreguntaCerradaOpcion } from './../../e-pregunta-cerrada-opcion/e-pregunta-cerrada-opcion.model';
 import { EPreguntaAbiertaService } from './../../e-pregunta-abierta/service/e-pregunta-abierta.service';
 import { EPreguntaCerradaOpcionService } from './../../e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service';
 import { AfterViewChecked, Component, OnInit } from '@angular/core';
@@ -22,7 +24,7 @@ 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 } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'jhi-encuesta-update',
@@ -30,26 +32,35 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
 })
 export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
   faTimes = faTimes;
+  faPlus = faPlus;
 
   isSaving = false;
 
   categoriasSharedCollection: ICategoria[] = [];
   usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
 
+  // 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: [],
+  //   usuarioExtra: [],
+  // });
+
   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: [],
-    usuarioExtra: [],
+    nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(500)]],
+    // orden: [null, [Validators.required]],
+    // cantidad: [null, [Validators.required]],
+    // ePreguntaCerrada: [],
   });
 
   ePreguntas?: any[];
@@ -58,6 +69,9 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 
   isLoading = false;
 
+  createAnother: Boolean = false;
+  selectedQuestionToCreateOption: IEPreguntaCerrada | null = null;
+
   constructor(
     protected encuestaService: EncuestaService,
     protected categoriaService: CategoriaService,
@@ -154,6 +168,19 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 
   finishSurvey(): void {}
 
+  addOption(event: any): void {}
+
+  resetForm(event: any): void {
+    this.editForm.reset();
+    if (event !== null) {
+      const id = event.target.dataset.id;
+      this.ePreguntaCerradaService.find(id).subscribe(e => {
+        this.selectedQuestionToCreateOption = e.body;
+        console.log(this.selectedQuestionToCreateOption);
+      });
+    }
+  }
+
   deleteQuestion(event: any) {
     const id = event.target.dataset.id;
     if (event.target.dataset.type) {
@@ -187,6 +214,65 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
     }
   }
 
+  save(): void {
+    this.isSaving = true;
+    const ePreguntaCerradaOpcion = this.createFromForm();
+    if (ePreguntaCerradaOpcion.id !== undefined) {
+      this.subscribeToSaveResponse(this.ePreguntaCerradaOpcionService.update(ePreguntaCerradaOpcion));
+    } else {
+      this.subscribeToSaveResponse(
+        this.ePreguntaCerradaOpcionService.create(ePreguntaCerradaOpcion, this.selectedQuestionToCreateOption?.id!)
+      );
+    }
+  }
+
+  trackEPreguntaCerradaById(index: number, item: IEPreguntaCerrada): number {
+    return item.id!;
+  }
+
+  protected subscribeToSaveResponse(result: Observable<HttpResponse<IEPreguntaCerradaOpcion>>): void {
+    result.pipe(finalize(() => this.onSaveFinalize())).subscribe(
+      () => this.onSaveSuccess(),
+      () => this.onSaveError()
+    );
+  }
+
+  protected onSaveSuccess(): void {
+    // this.previousState();
+    this.resetForm(null);
+    this.ePreguntas = [];
+    this.ePreguntasOpciones = [];
+    this.loadAll();
+    if (!this.createAnother) {
+      $('#cancelBtn').click();
+    }
+  }
+
+  protected onSaveError(): void {
+    // Api for inheritance.
+  }
+
+  protected onSaveFinalize(): void {
+    this.isSaving = false;
+  }
+
+  protected createFromForm(): IEPreguntaCerradaOpcion {
+    console.log(this.selectedQuestionToCreateOption);
+
+    return {
+      // ...new EPreguntaCerradaOpcion(),
+      id: undefined,
+      nombre: this.editForm.get(['nombre'])!.value,
+      orden: 10,
+      cantidad: 0,
+      ePreguntaCerrada: this.selectedQuestionToCreateOption,
+    };
+  }
+
+  createAnotherChange(event: any) {
+    this.createAnother = event.target.checked;
+  }
+
   // previousState(): void {
   //   window.history.back();
   // }
diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey-update.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey-update.scss
index 7ce988d..f3b3d56 100644
--- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey-update.scss
+++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey-update.scss
@@ -4,8 +4,10 @@
   &--titulo {
     display: flex;
     justify-content: space-between;
+    align-items: center;
 
     &--name {
+      color: #1f3779;
     }
 
     &--icon {
@@ -20,7 +22,7 @@
       padding: 0.8rem;
       width: 25px;
       height: 25px;
-      color: #313747;
+      color: #1f3779;
       pointer-events: visible !important;
       transition: all 0.1s ease-in-out;
 
@@ -58,16 +60,38 @@
   }
 
   &--option {
+    display: flex;
+    align-items: center;
     margin: 0.5rem 0;
     border-radius: 5px;
     font-weight: 500;
     letter-spacing: 0.025rem;
     color: #787878;
-    border: 1px solid #e6e6e6;
     background-color: transparent;
     position: relative;
     top: 0;
     transition: all 0.1s ease-in-out;
+
+    &--base {
+      border: 1px solid #e6e6e6;
+    }
+
+    &--add {
+      border: 2px dashed #9c9c9c;
+      transition: all 0.1s ease-in-out;
+
+      &:hover {
+        border: 2px dashed #727272;
+      }
+
+      &:hover .ds-survey--add-option {
+        color: #727272;
+      }
+
+      &:hover .ds-survey--add-option--icon {
+        color: #727272;
+      }
+    }
   }
 
   &--closed-option {
@@ -76,7 +100,7 @@
     align-items: center;
     font-size: 0.9rem;
     color: #15131d;
-    padding: 1rem 3rem;
+    padding: 1rem 3rem 1rem 0.5rem;
     transition: all 0.1s ease-in-out;
     cursor: pointer;
     position: relative;
@@ -84,6 +108,7 @@
     label {
       width: 100%;
       margin: 0 1rem;
+      color: #1f3779;
     }
   }
 
@@ -102,6 +127,33 @@
       color: #787878;
       border: none;
       resize: none;
+
+      &:disabled {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &--add-option {
+    width: 100%;
+    color: #919191;
+    transition: all 0.1s ease-in-out;
+    pointer-events: none;
+
+    &--icon {
+      margin: 0 1rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 25px;
+      height: 25px;
+      color: #919191;
+      pointer-events: visible !important;
+      transition: all 0.1s ease-in-out;
+
+      * {
+        pointer-events: none;
+      }
     }
   }
 }