Add create either closed or open question modal form
This commit is contained in:
		
							parent
							
								
									28b291d031
								
							
						
					
					
						commit
						2473ffbc5a
					
				| 
						 | 
				
			
			@ -31,7 +31,7 @@
 | 
			
		|||
 | 
			
		||||
  <jhi-alert-error></jhi-alert-error>
 | 
			
		||||
 | 
			
		||||
  <jhi-alert></jhi-alert>
 | 
			
		||||
  <!-- <jhi-alert></jhi-alert> -->
 | 
			
		||||
 | 
			
		||||
  <div class="alert alert-warning" id="no-result" *ngIf="ePreguntas?.length === 0">
 | 
			
		||||
    <span>No se encontraron preguntas</span>
 | 
			
		||||
| 
						 | 
				
			
			@ -59,12 +59,16 @@
 | 
			
		|||
          </div>
 | 
			
		||||
          <div>
 | 
			
		||||
            <span *ngIf="ePregunta.tipo === 'SINGLE'" class="ds-subtitle"
 | 
			
		||||
              >Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}</span
 | 
			
		||||
              >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 }}</span
 | 
			
		||||
              >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
 | 
			
		||||
            >
 | 
			
		||||
            <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">
 | 
			
		||||
| 
						 | 
				
			
			@ -172,7 +176,7 @@
 | 
			
		|||
  </div>
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<!-- Modal -->
 | 
			
		||||
<!-- Create Option 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">
 | 
			
		||||
| 
						 | 
				
			
			@ -239,7 +243,7 @@
 | 
			
		|||
 | 
			
		||||
<!-- ------------------------------------------------------------------------------------------------- -->
 | 
			
		||||
 | 
			
		||||
<!-- Modal -->
 | 
			
		||||
<!-- Create Question Modal -->
 | 
			
		||||
<div
 | 
			
		||||
  class="modal fade ds-modal"
 | 
			
		||||
  id="crearPregunta"
 | 
			
		||||
| 
						 | 
				
			
			@ -301,6 +305,71 @@
 | 
			
		|||
                </small>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <!-- Custom Form Group (Closed & Open Question Validation) -->
 | 
			
		||||
            <div class="form-group">
 | 
			
		||||
              <label class="form-control-label" for="field_tipo">Tipo de pregunta</label>
 | 
			
		||||
              <select class="form-control" name="tipopregunta" formControlName="tipopregunta" id="field_tipo" data-cy="tipopregunta">
 | 
			
		||||
                <option selected value="CLOSED">Opción multiple</option>
 | 
			
		||||
                <option value="OPEN">Respuesta abierta</option>
 | 
			
		||||
              </select>
 | 
			
		||||
              <div
 | 
			
		||||
                *ngIf="
 | 
			
		||||
                  editFormQuestion.get('tipopregunta')!.invalid &&
 | 
			
		||||
                  (editFormQuestion.get('tipopregunta')!.dirty || editFormQuestion.get('tipopregunta')!.touched)
 | 
			
		||||
                "
 | 
			
		||||
              >
 | 
			
		||||
                <small
 | 
			
		||||
                  class="form-text text-danger"
 | 
			
		||||
                  *ngIf="editFormQuestion.get('tipopregunta')?.errors?.required"
 | 
			
		||||
                  jhiTranslate="entity.validation.required"
 | 
			
		||||
                >
 | 
			
		||||
                  This field is required.
 | 
			
		||||
                </small>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <ng-container *ngIf="editFormQuestion.get('tipopregunta')!.value === 'CLOSED'">
 | 
			
		||||
              <div class="form-group">
 | 
			
		||||
                <label class="form-control-label" jhiTranslate="dataSurveyApp.ePreguntaCerrada.tiporespuesta" for="field_tipo">Tipo</label>
 | 
			
		||||
                <select class="form-control" name="tipo" formControlName="tipo" id="field_tipo" data-cy="tipo">
 | 
			
		||||
                  <option selected value="SINGLE">{{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate }}</option>
 | 
			
		||||
                  <option value="MULTIPLE">{{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate }}</option>
 | 
			
		||||
                </select>
 | 
			
		||||
                <div
 | 
			
		||||
                  *ngIf="
 | 
			
		||||
                    editFormQuestion.get('tipo')!.invalid && (editFormQuestion.get('tipo')!.dirty || editFormQuestion.get('tipo')!.touched)
 | 
			
		||||
                  "
 | 
			
		||||
                >
 | 
			
		||||
                  <small
 | 
			
		||||
                    class="form-text text-danger"
 | 
			
		||||
                    *ngIf="editFormQuestion.get('tipo')?.errors?.required"
 | 
			
		||||
                    jhiTranslate="entity.validation.required"
 | 
			
		||||
                  >
 | 
			
		||||
                    This field is required.
 | 
			
		||||
                  </small>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
            </ng-container>
 | 
			
		||||
 | 
			
		||||
            <div class="form-group">
 | 
			
		||||
              <label class="form-control-label" for="field_opcional">Opcional</label>
 | 
			
		||||
              <input type="checkbox" class="form-check" name="opcional" id="field_opcional" data-cy="opcional" formControlName="opcional" />
 | 
			
		||||
              <div
 | 
			
		||||
                *ngIf="
 | 
			
		||||
                  editFormQuestion.get('opcional')!.invalid &&
 | 
			
		||||
                  (editFormQuestion.get('opcional')!.dirty || editFormQuestion.get('opcional')!.touched)
 | 
			
		||||
                "
 | 
			
		||||
              >
 | 
			
		||||
                <small
 | 
			
		||||
                  class="form-text text-danger"
 | 
			
		||||
                  *ngIf="editFormQuestion.get('opcional')?.errors?.required"
 | 
			
		||||
                  jhiTranslate="entity.validation.required"
 | 
			
		||||
                >
 | 
			
		||||
                  This field is required.
 | 
			
		||||
                </small>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <div class="modal-footer">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,3 +1,4 @@
 | 
			
		|||
import { IEPreguntaAbierta } from './../../e-pregunta-abierta/e-pregunta-abierta.model';
 | 
			
		||||
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';
 | 
			
		||||
| 
						 | 
				
			
			@ -70,6 +71,9 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 | 
			
		|||
  editFormQuestion = this.fb.group({
 | 
			
		||||
    id: [],
 | 
			
		||||
    nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(500)]],
 | 
			
		||||
    tipo: [PreguntaCerradaTipo.SINGLE],
 | 
			
		||||
    opcional: [false],
 | 
			
		||||
    tipopregunta: ['CLOSED'],
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  ePreguntas?: any[];
 | 
			
		||||
| 
						 | 
				
			
			@ -309,13 +313,24 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 | 
			
		|||
    console.log(surveyId);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  protected createFromFormQuestion(): IEPreguntaCerrada {
 | 
			
		||||
  protected createFromFormClosedQuestion(): IEPreguntaCerrada {
 | 
			
		||||
    return {
 | 
			
		||||
      // ...new EPreguntaCerrada(),
 | 
			
		||||
      id: undefined,
 | 
			
		||||
      nombre: this.editFormQuestion.get(['nombre'])!.value,
 | 
			
		||||
      tipo: PreguntaCerradaTipo.SINGLE,
 | 
			
		||||
      opcional: false,
 | 
			
		||||
      tipo: this.editFormQuestion.get(['tipo'])!.value,
 | 
			
		||||
      opcional: this.editFormQuestion.get(['opcional'])!.value,
 | 
			
		||||
      orden: 10,
 | 
			
		||||
      encuesta: this.encuesta,
 | 
			
		||||
    };
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  protected createFromFormOpenQuestion(): IEPreguntaAbierta {
 | 
			
		||||
    return {
 | 
			
		||||
      // ...new EPreguntaAbierta(),
 | 
			
		||||
      id: undefined,
 | 
			
		||||
      nombre: this.editFormQuestion.get(['nombre'])!.value,
 | 
			
		||||
      opcional: this.editFormQuestion.get(['opcional'])!.value,
 | 
			
		||||
      orden: 10,
 | 
			
		||||
      encuesta: this.encuesta,
 | 
			
		||||
    };
 | 
			
		||||
| 
						 | 
				
			
			@ -327,15 +342,33 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 | 
			
		|||
 | 
			
		||||
  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));
 | 
			
		||||
    const tipoPregunta = this.editFormQuestion.get(['tipopregunta'])!.value;
 | 
			
		||||
 | 
			
		||||
    if (tipoPregunta === 'CLOSED') {
 | 
			
		||||
      const ePreguntaCerrada = this.createFromFormClosedQuestion();
 | 
			
		||||
      if (ePreguntaCerrada.id !== undefined) {
 | 
			
		||||
        this.subscribeToSaveResponseQuestionClosed(this.ePreguntaCerradaService.update(ePreguntaCerrada));
 | 
			
		||||
      } else {
 | 
			
		||||
        this.subscribeToSaveResponseQuestionClosed(this.ePreguntaCerradaService.create(ePreguntaCerrada));
 | 
			
		||||
      }
 | 
			
		||||
    } else if (tipoPregunta === 'OPEN') {
 | 
			
		||||
      const ePreguntaAbierta = this.createFromFormOpenQuestion();
 | 
			
		||||
      if (ePreguntaAbierta.id !== undefined) {
 | 
			
		||||
        this.subscribeToSaveResponseQuestionOpen(this.ePreguntaAbiertaService.update(ePreguntaAbierta));
 | 
			
		||||
      } else {
 | 
			
		||||
        this.subscribeToSaveResponseQuestionOpen(this.ePreguntaAbiertaService.create(ePreguntaAbierta));
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  protected subscribeToSaveResponseQuestion(result: Observable<HttpResponse<IEPreguntaCerrada>>): void {
 | 
			
		||||
  protected subscribeToSaveResponseQuestionClosed(result: Observable<HttpResponse<IEPreguntaCerrada>>): void {
 | 
			
		||||
    result.pipe(finalize(() => this.onSaveFinalizeQuestion())).subscribe(
 | 
			
		||||
      () => this.onSaveSuccessQuestion(),
 | 
			
		||||
      () => this.onSaveErrorQuestion()
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  protected subscribeToSaveResponseQuestionOpen(result: Observable<HttpResponse<IEPreguntaAbierta>>): void {
 | 
			
		||||
    result.pipe(finalize(() => this.onSaveFinalizeQuestion())).subscribe(
 | 
			
		||||
      () => this.onSaveSuccessQuestion(),
 | 
			
		||||
      () => this.onSaveErrorQuestion()
 | 
			
		||||
| 
						 | 
				
			
			@ -343,7 +376,8 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  protected onSaveSuccessQuestion(): void {
 | 
			
		||||
    this.editFormQuestion.reset();
 | 
			
		||||
    this.editFormQuestion.reset({ tipo: PreguntaCerradaTipo.SINGLE, tipopregunta: 'CLOSED', opcional: false });
 | 
			
		||||
    this.editForm.reset();
 | 
			
		||||
    this.ePreguntas = [];
 | 
			
		||||
    this.ePreguntasOpciones = [];
 | 
			
		||||
    this.loadAll();
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -23,7 +23,8 @@
 | 
			
		|||
      "opcional": "Opcional",
 | 
			
		||||
      "orden": "Orden",
 | 
			
		||||
      "ePreguntaCerradaOpcion": "E Pregunta Cerrada Opcion",
 | 
			
		||||
      "encuesta": "Encuesta"
 | 
			
		||||
      "encuesta": "Encuesta",
 | 
			
		||||
      "tiporespuesta": "Tipo de respuesta"
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue