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