Add create either closed or open question modal form

This commit is contained in:
Pablo Bonilla 2021-07-24 20:38:37 -06:00
parent 28b291d031
commit 2473ffbc5a
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
3 changed files with 121 additions and 17 deletions

View File

@ -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">

View File

@ -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();

View File

@ -23,7 +23,8 @@
"opcional": "Opcional",
"orden": "Orden",
"ePreguntaCerradaOpcion": "E Pregunta Cerrada Opcion",
"encuesta": "Encuesta"
"encuesta": "Encuesta",
"tiporespuesta": "Tipo de respuesta"
}
}
}