Add create question to survey list of questions

This commit is contained in:
Pablo Bonilla 2021-07-24 02:10:24 -06:00
parent 0af94cd9f2
commit 78e58ab69a
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
3 changed files with 165 additions and 4 deletions

View File

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

View File

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

View File

@ -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;
}
}