Add modal for question option creation

This commit is contained in:
Pablo Bonilla 2021-07-23 01:00:40 -06:00
parent 679a238c13
commit aeb5538a4a
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
5 changed files with 258 additions and 24 deletions

View File

@ -8,6 +8,7 @@ import java.util.Objects;
import java.util.Optional; import java.util.Optional;
import javax.validation.Valid; import javax.validation.Valid;
import javax.validation.constraints.NotNull; import javax.validation.constraints.NotNull;
import org.datasurvey.domain.EPreguntaCerrada;
import org.datasurvey.domain.EPreguntaCerradaOpcion; import org.datasurvey.domain.EPreguntaCerradaOpcion;
import org.datasurvey.repository.EPreguntaCerradaOpcionRepository; import org.datasurvey.repository.EPreguntaCerradaOpcionRepository;
import org.datasurvey.service.EPreguntaCerradaOpcionQueryService; import org.datasurvey.service.EPreguntaCerradaOpcionQueryService;
@ -59,10 +60,15 @@ public class EPreguntaCerradaOpcionResource {
* @return the {@link ResponseEntity} with status {@code 201 (Created)} and with body the new ePreguntaCerradaOpcion, or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion has already an ID. * @return the {@link ResponseEntity} with status {@code 201 (Created)} and with body the new ePreguntaCerradaOpcion, or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion has already an ID.
* @throws URISyntaxException if the Location URI syntax is incorrect. * @throws URISyntaxException if the Location URI syntax is incorrect.
*/ */
@PostMapping("/e-pregunta-cerrada-opcions") @PostMapping("/e-pregunta-cerrada-opcions/{id}")
public ResponseEntity<EPreguntaCerradaOpcion> createEPreguntaCerradaOpcion( public ResponseEntity<EPreguntaCerradaOpcion> createEPreguntaCerradaOpcion(
@Valid @RequestBody EPreguntaCerradaOpcion ePreguntaCerradaOpcion @Valid @RequestBody EPreguntaCerradaOpcion ePreguntaCerradaOpcion,
@PathVariable(value = "id", required = false) final Long id
) throws URISyntaxException { ) throws URISyntaxException {
EPreguntaCerrada ePreguntaCerrada = new EPreguntaCerrada();
ePreguntaCerrada.setId(id);
ePreguntaCerradaOpcion.setEPreguntaCerrada(ePreguntaCerrada);
log.debug("REST request to save EPreguntaCerradaOpcion : {}", ePreguntaCerradaOpcion); log.debug("REST request to save EPreguntaCerradaOpcion : {}", ePreguntaCerradaOpcion);
if (ePreguntaCerradaOpcion.getId() != null) { if (ePreguntaCerradaOpcion.getId() != null) {
throw new BadRequestAlertException("A new ePreguntaCerradaOpcion cannot already have an ID", ENTITY_NAME, "idexists"); throw new BadRequestAlertException("A new ePreguntaCerradaOpcion cannot already have an ID", ENTITY_NAME, "idexists");
@ -202,7 +208,6 @@ public class EPreguntaCerradaOpcionResource {
public ResponseEntity<Void> deleteManyEPreguntaCerradaOpcion(@Valid @RequestBody int[] ids) { public ResponseEntity<Void> deleteManyEPreguntaCerradaOpcion(@Valid @RequestBody int[] ids) {
for (int id : ids) { for (int id : ids) {
ePreguntaCerradaOpcionService.delete((long) id); ePreguntaCerradaOpcionService.delete((long) id);
System.out.println(id);
} }
return ResponseEntity return ResponseEntity
.noContent() .noContent()

View File

@ -16,8 +16,8 @@ export class EPreguntaCerradaOpcionService {
constructor(protected http: HttpClient, protected applicationConfigService: ApplicationConfigService) {} constructor(protected http: HttpClient, protected applicationConfigService: ApplicationConfigService) {}
create(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion): Observable<EntityResponseType> { create(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion, preguntaId?: number): Observable<EntityResponseType> {
return this.http.post<IEPreguntaCerradaOpcion>(this.resourceUrl, ePreguntaCerradaOpcion, { observe: 'response' }); return this.http.post<IEPreguntaCerradaOpcion>(`${this.resourceUrl}/${preguntaId}`, ePreguntaCerradaOpcion, { observe: 'response' });
} }
update(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion): Observable<EntityResponseType> { update(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion): Observable<EntityResponseType> {

View File

@ -47,21 +47,45 @@
[attr.data-type]="ePregunta.tipo" [attr.data-type]="ePregunta.tipo"
></fa-icon> ></fa-icon>
</div> </div>
<div>
<span *ngIf="ePregunta.tipo === 'SINGLE'" class="ds-subtitle"
>Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.SINGLE' | translate | lowercase }}</span
>
<span *ngIf="ePregunta.tipo === 'MULTIPLE'" class="ds-subtitle"
>Pregunta de respuesta {{ 'dataSurveyApp.PreguntaCerradaTipo.MULTIPLE' | translate | lowercase }}</span
>
<span *ngIf="!ePregunta.tipo" class="ds-subtitle">Pregunta de respuesta abierta</span>
</div>
<ng-container *ngIf="ePregunta.tipo"> <ng-container *ngIf="ePregunta.tipo">
<ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId"> <ng-container *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
<ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id"> <ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id">
<div <div
class="ds-survey--option ds-survey--closed-option" class="ds-survey--option ds-survey--option--base ds-survey--closed-option"
*ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId" *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId"
[attr.data-id]="ePreguntaOpcion2.id" [attr.data-id]="ePreguntaOpcion2.id"
> >
<input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}" type="checkbox" disabled /> <!-- <input class="ds-survey--checkbox" id="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}" type="checkbox" disabled /> -->
<label for="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}">{{ ePreguntaOpcion2.nombre }}</label> <label for="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}">{{ ePreguntaOpcion2.nombre }}</label>
</div> </div>
</ng-container> </ng-container>
</ng-container> </ng-container>
<div
class="ds-survey--option ds-survey--option--add ds-survey--closed-option"
(click)="resetForm($event)"
data-toggle="modal"
data-target="#crearOpcion"
[attr.data-id]="ePregunta.id"
>
<fa-icon
class="ds-survey--add-option--icon"
[icon]="faPlus"
[attr.data-id]="ePregunta.id"
[attr.data-type]="ePregunta.tipo"
></fa-icon>
<span class="ds-survey--add-option">Añadir pregunta</span>
</div>
</ng-container> </ng-container>
<div class="ds-survey--option ds-survey--open-option" *ngIf="!ePregunta.tipo"> <div class="ds-survey--option ds-survey--option--base ds-survey--open-option" *ngIf="!ePregunta.tipo">
<textarea name="" id="" cols="30" rows="10" disabled></textarea> <textarea name="" id="" cols="30" rows="10" disabled></textarea>
</div> </div>
</div> </div>
@ -130,6 +154,73 @@
</div> </div>
</div> </div>
<!-- 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">
<form autocomplete="off" class="ds-form" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
<div class="modal-header">
<h1 class="modal-title" id="exampleModalLongTitle">Crear Opción</h1>
</div>
<div class="modal-body">
<!-- Survey Closed Question Create Option Modal -->
<div>
<jhi-alert-error></jhi-alert-error>
<div class="form-group">
<label class="form-control-label" jhiTranslate="dataSurveyApp.ePreguntaCerradaOpcion.nombre" for="field_nombre">Nombre</label>
<input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
<div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
<small
class="form-text text-danger"
*ngIf="editForm.get('nombre')?.errors?.required"
jhiTranslate="entity.validation.required"
>
This field is required.
</small>
<small
class="form-text text-danger"
*ngIf="editForm.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="editForm.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="createAnother" type="checkbox" (change)="createAnotherChange($event)" />
<label for="createAnother">Crear otra</label>
<button id="cancelBtn" 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-entity"
data-cy="entityCreateSaveButton"
class="ds-btn ds-btn--primary"
[disabled]="editForm.invalid || isSaving"
>
<span jhiTranslate="entity.action.create">Create</span>
</button>
</div>
</form>
</div>
</div>
</div>
<!-- ------------------------------------------------------------------------------------------------- -->
<!-- <div class="row justify-content-center"> <!-- <div class="row justify-content-center">
<div class="col-8"> <div class="col-8">
<form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm"> <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">

View File

@ -1,3 +1,5 @@
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'; import { EPreguntaAbiertaService } from './../../e-pregunta-abierta/service/e-pregunta-abierta.service';
import { EPreguntaCerradaOpcionService } from './../../e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service'; import { EPreguntaCerradaOpcionService } from './../../e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service';
import { AfterViewChecked, Component, OnInit } from '@angular/core'; import { AfterViewChecked, Component, OnInit } from '@angular/core';
@ -22,7 +24,7 @@ import { IEPreguntaCerrada } from 'app/entities/e-pregunta-cerrada/e-pregunta-ce
import { EPreguntaCerradaService } from 'app/entities/e-pregunta-cerrada/service/e-pregunta-cerrada.service'; import { EPreguntaCerradaService } from 'app/entities/e-pregunta-cerrada/service/e-pregunta-cerrada.service';
import { EPreguntaCerradaDeleteDialogComponent } from 'app/entities/e-pregunta-cerrada/delete/e-pregunta-cerrada-delete-dialog.component'; import { EPreguntaCerradaDeleteDialogComponent } from 'app/entities/e-pregunta-cerrada/delete/e-pregunta-cerrada-delete-dialog.component';
import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons';
@Component({ @Component({
selector: 'jhi-encuesta-update', selector: 'jhi-encuesta-update',
@ -30,26 +32,35 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
}) })
export class EncuestaUpdateComponent implements OnInit, AfterViewChecked { export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
faTimes = faTimes; faTimes = faTimes;
faPlus = faPlus;
isSaving = false; isSaving = false;
categoriasSharedCollection: ICategoria[] = []; categoriasSharedCollection: ICategoria[] = [];
usuarioExtrasSharedCollection: IUsuarioExtra[] = []; usuarioExtrasSharedCollection: IUsuarioExtra[] = [];
// editForm = this.fb.group({
// id: [],
// nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]],
// descripcion: [],
// fechaCreacion: [null, [Validators.required]],
// fechaPublicacion: [],
// fechaFinalizar: [],
// fechaFinalizada: [],
// calificacion: [null, [Validators.required]],
// acceso: [null, [Validators.required]],
// contrasenna: [],
// estado: [null, [Validators.required]],
// categoria: [],
// usuarioExtra: [],
// });
editForm = this.fb.group({ editForm = this.fb.group({
id: [], id: [],
nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(50)]], nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(500)]],
descripcion: [], // orden: [null, [Validators.required]],
fechaCreacion: [null, [Validators.required]], // cantidad: [null, [Validators.required]],
fechaPublicacion: [], // ePreguntaCerrada: [],
fechaFinalizar: [],
fechaFinalizada: [],
calificacion: [null, [Validators.required]],
acceso: [null, [Validators.required]],
contrasenna: [],
estado: [null, [Validators.required]],
categoria: [],
usuarioExtra: [],
}); });
ePreguntas?: any[]; ePreguntas?: any[];
@ -58,6 +69,9 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
isLoading = false; isLoading = false;
createAnother: Boolean = false;
selectedQuestionToCreateOption: IEPreguntaCerrada | null = null;
constructor( constructor(
protected encuestaService: EncuestaService, protected encuestaService: EncuestaService,
protected categoriaService: CategoriaService, protected categoriaService: CategoriaService,
@ -154,6 +168,19 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
finishSurvey(): void {} finishSurvey(): void {}
addOption(event: any): void {}
resetForm(event: any): void {
this.editForm.reset();
if (event !== null) {
const id = event.target.dataset.id;
this.ePreguntaCerradaService.find(id).subscribe(e => {
this.selectedQuestionToCreateOption = e.body;
console.log(this.selectedQuestionToCreateOption);
});
}
}
deleteQuestion(event: any) { deleteQuestion(event: any) {
const id = event.target.dataset.id; const id = event.target.dataset.id;
if (event.target.dataset.type) { if (event.target.dataset.type) {
@ -187,6 +214,65 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
} }
} }
save(): void {
this.isSaving = true;
const ePreguntaCerradaOpcion = this.createFromForm();
if (ePreguntaCerradaOpcion.id !== undefined) {
this.subscribeToSaveResponse(this.ePreguntaCerradaOpcionService.update(ePreguntaCerradaOpcion));
} else {
this.subscribeToSaveResponse(
this.ePreguntaCerradaOpcionService.create(ePreguntaCerradaOpcion, this.selectedQuestionToCreateOption?.id!)
);
}
}
trackEPreguntaCerradaById(index: number, item: IEPreguntaCerrada): number {
return item.id!;
}
protected subscribeToSaveResponse(result: Observable<HttpResponse<IEPreguntaCerradaOpcion>>): void {
result.pipe(finalize(() => this.onSaveFinalize())).subscribe(
() => this.onSaveSuccess(),
() => this.onSaveError()
);
}
protected onSaveSuccess(): void {
// this.previousState();
this.resetForm(null);
this.ePreguntas = [];
this.ePreguntasOpciones = [];
this.loadAll();
if (!this.createAnother) {
$('#cancelBtn').click();
}
}
protected onSaveError(): void {
// Api for inheritance.
}
protected onSaveFinalize(): void {
this.isSaving = false;
}
protected createFromForm(): IEPreguntaCerradaOpcion {
console.log(this.selectedQuestionToCreateOption);
return {
// ...new EPreguntaCerradaOpcion(),
id: undefined,
nombre: this.editForm.get(['nombre'])!.value,
orden: 10,
cantidad: 0,
ePreguntaCerrada: this.selectedQuestionToCreateOption,
};
}
createAnotherChange(event: any) {
this.createAnother = event.target.checked;
}
// previousState(): void { // previousState(): void {
// window.history.back(); // window.history.back();
// } // }

View File

@ -4,8 +4,10 @@
&--titulo { &--titulo {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
&--name { &--name {
color: #1f3779;
} }
&--icon { &--icon {
@ -20,7 +22,7 @@
padding: 0.8rem; padding: 0.8rem;
width: 25px; width: 25px;
height: 25px; height: 25px;
color: #313747; color: #1f3779;
pointer-events: visible !important; pointer-events: visible !important;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
@ -58,16 +60,38 @@
} }
&--option { &--option {
display: flex;
align-items: center;
margin: 0.5rem 0; margin: 0.5rem 0;
border-radius: 5px; border-radius: 5px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.025rem; letter-spacing: 0.025rem;
color: #787878; color: #787878;
border: 1px solid #e6e6e6;
background-color: transparent; background-color: transparent;
position: relative; position: relative;
top: 0; top: 0;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
&--base {
border: 1px solid #e6e6e6;
}
&--add {
border: 2px dashed #9c9c9c;
transition: all 0.1s ease-in-out;
&:hover {
border: 2px dashed #727272;
}
&:hover .ds-survey--add-option {
color: #727272;
}
&:hover .ds-survey--add-option--icon {
color: #727272;
}
}
} }
&--closed-option { &--closed-option {
@ -76,7 +100,7 @@
align-items: center; align-items: center;
font-size: 0.9rem; font-size: 0.9rem;
color: #15131d; color: #15131d;
padding: 1rem 3rem; padding: 1rem 3rem 1rem 0.5rem;
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -84,6 +108,7 @@
label { label {
width: 100%; width: 100%;
margin: 0 1rem; margin: 0 1rem;
color: #1f3779;
} }
} }
@ -102,6 +127,33 @@
color: #787878; color: #787878;
border: none; border: none;
resize: none; resize: none;
&:disabled {
background-color: transparent;
}
}
}
&--add-option {
width: 100%;
color: #919191;
transition: all 0.1s ease-in-out;
pointer-events: none;
&--icon {
margin: 0 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
color: #919191;
pointer-events: visible !important;
transition: all 0.1s ease-in-out;
* {
pointer-events: none;
}
} }
} }
} }