Add create question to survey list of questions

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

@@ -10,6 +10,16 @@
       <button type="button" class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
         <fa-icon icon="sync" [spin]="isLoading"></fa-icon>&nbsp;&nbsp;<span>Refrescar preguntas</span>
       </button>
+      <button
+        type="button"
+        class="ds-btn ds-btn--secondary"
+        (click)="createQuestion()"
+        [disabled]="isLoading"
+        data-toggle="modal"
+        data-target="#crearPregunta"
+      >
+        <fa-icon icon="sync" [icon]="faPlus"></fa-icon>&nbsp;&nbsp;<span>Crear pregunta</span>
+      </button>
       <ng-container *ngIf="encuesta!.estado === 'DRAFT'">
         <button type="button" class="ds-btn ds-btn--primary" (click)="publishSurvey()">Publicar encuesta</button>
       </ng-container>
@@ -64,7 +74,7 @@
                     class="ds-survey--option ds-survey--option--base ds-survey--closed-option can-delete"
                     [attr.data-id]="ePreguntaOpcionFinal.id"
                   >
-                    <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}" type="checkbox" disabled />
+                    <!-- <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}" type="checkbox" disabled /> -->
                     <label for="{{ ePregunta.id }}-{{ ePreguntaOpcionFinal.id }}">{{ ePreguntaOpcionFinal.nombre }}</label>
                     <fa-icon
                       *ngIf="encuesta!.estado === 'DRAFT'"
@@ -229,6 +239,93 @@
 
 <!-- ------------------------------------------------------------------------------------------------- -->
 
+<!-- Modal -->
+<div
+  class="modal fade ds-modal"
+  id="crearPregunta"
+  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="editFormQuestion"
+        role="form"
+        novalidate
+        (ngSubmit)="saveQuestion()"
+        [formGroup]="editFormQuestion"
+      >
+        <div class="modal-header">
+          <h1 class="modal-title" id="exampleModalLongTitle">Crear Pregunta</h1>
+        </div>
+        <div class="modal-body">
+          <!-- Survey Create Question Modal -->
+          <div>
+            <jhi-alert-error></jhi-alert-error>
+
+            <div class="form-group">
+              <label class="form-control-label" for="field_nombre">Pregunta</label>
+              <input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
+              <div
+                *ngIf="
+                  editFormQuestion.get('nombre')!.invalid &&
+                  (editFormQuestion.get('nombre')!.dirty || editFormQuestion.get('nombre')!.touched)
+                "
+              >
+                <small
+                  class="form-text text-danger"
+                  *ngIf="editFormQuestion.get('nombre')?.errors?.required"
+                  jhiTranslate="entity.validation.required"
+                >
+                  This field is required.
+                </small>
+                <small
+                  class="form-text text-danger"
+                  *ngIf="editFormQuestion.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="editFormQuestion.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="createAnotherQuestion" type="checkbox" (change)="createAnotherQuestionChange($event)" />
+          <label for="createAnotherQuestion">Crear otra</label>
+          <button id="cancelBtnQuestion" 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-question"
+            data-cy="entityCreateSaveButton"
+            class="ds-btn ds-btn--primary"
+            [disabled]="editFormQuestion.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">

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

@@ -25,6 +25,7 @@ import { EPreguntaCerradaService } from 'app/entities/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 { PreguntaCerradaTipo } from 'app/entities/enumerations/pregunta-cerrada-tipo.model';
 
 @Component({
   selector: 'jhi-encuesta-update',
@@ -35,6 +36,7 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
   faPlus = faPlus;
 
   isSaving = false;
+  isSavingQuestion = false;
 
   categoriasSharedCollection: ICategoria[] = [];
   usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
@@ -63,6 +65,11 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
     // ePreguntaCerrada: [],
   });
 
+  editFormQuestion = this.fb.group({
+    id: [],
+    nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(500)]],
+  });
+
   ePreguntas?: any[];
   ePreguntasOpciones?: any[];
   encuesta: Encuesta | null = null;
@@ -70,6 +77,7 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
   isLoading = false;
 
   createAnother: Boolean = false;
+  createAnotherQuestion: Boolean = false;
   selectedQuestionToCreateOption: IEPreguntaCerrada | null = null;
 
   constructor(
@@ -283,6 +291,62 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
     this.createAnother = event.target.checked;
   }
 
+  createQuestion(): void {
+    const surveyId = this.encuesta?.id;
+    console.log(surveyId);
+  }
+
+  protected createFromFormQuestion(): IEPreguntaCerrada {
+    return {
+      // ...new EPreguntaCerrada(),
+      id: undefined,
+      nombre: this.editFormQuestion.get(['nombre'])!.value,
+      tipo: PreguntaCerradaTipo.SINGLE,
+      opcional: false,
+      orden: 10,
+      encuesta: this.encuesta,
+    };
+  }
+
+  createAnotherQuestionChange(event: any) {
+    this.createAnotherQuestion = event.target.checked;
+  }
+
+  saveQuestion(): void {
+    this.isSavingQuestion = true;
+    const ePreguntaCerrada = this.createFromFormQuestion();
+    if (ePreguntaCerrada.id !== undefined) {
+      this.subscribeToSaveResponseQuestion(this.ePreguntaCerradaService.update(ePreguntaCerrada));
+    } else {
+      this.subscribeToSaveResponseQuestion(this.ePreguntaCerradaService.create(ePreguntaCerrada));
+    }
+  }
+
+  protected subscribeToSaveResponseQuestion(result: Observable<HttpResponse<IEPreguntaCerrada>>): void {
+    result.pipe(finalize(() => this.onSaveFinalizeQuestion())).subscribe(
+      () => this.onSaveSuccessQuestion(),
+      () => this.onSaveErrorQuestion()
+    );
+  }
+
+  protected onSaveSuccessQuestion(): void {
+    this.editFormQuestion.reset();
+    this.ePreguntas = [];
+    this.ePreguntasOpciones = [];
+    this.loadAll();
+    if (!this.createAnotherQuestion) {
+      $('#cancelBtnQuestion').click();
+    }
+  }
+
+  protected onSaveErrorQuestion(): void {
+    // Api for inheritance.
+  }
+
+  protected onSaveFinalizeQuestion(): void {
+    this.isSavingQuestion = false;
+  }
+
   // previousState(): void {
   //   window.history.back();
   // }

src/main/webapp/content/scss/paper-dashboard/_datasurvey-survey-update.scss

@@ -37,7 +37,7 @@
 
       &--small {
         font-size: 0.8rem;
-        padding: 0.6rem;
+        padding: 0.3rem;
       }
     }
   }
@@ -105,14 +105,14 @@
     align-items: center;
     font-size: 0.9rem;
     color: #15131d;
-    padding: 1rem 3rem 1rem 0.5rem;
+    padding: 1rem;
     transition: all 0.1s ease-in-out;
     cursor: pointer;
     position: relative;
 
     label {
       width: 100%;
-      margin: 0 1rem;
+      margin: 0;
       color: #1f3779;
     }
   }