Add modal for question option creation
This commit is contained in:
Pablo Bonilla
parent
679a238c13
commit
aeb5538a4a
|
|
@ -8,6 +8,7 @@ import java.util.Objects;
|
|||
import java.util.Optional;
|
||||
import javax.validation.Valid;
|
||||
import javax.validation.constraints.NotNull;
|
||||
import org.datasurvey.domain.EPreguntaCerrada;
|
||||
import org.datasurvey.domain.EPreguntaCerradaOpcion;
|
||||
import org.datasurvey.repository.EPreguntaCerradaOpcionRepository;
|
||||
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.
|
||||
* @throws URISyntaxException if the Location URI syntax is incorrect.
|
||||
*/
|
||||
@PostMapping("/e-pregunta-cerrada-opcions")
|
||||
@PostMapping("/e-pregunta-cerrada-opcions/{id}")
|
||||
public ResponseEntity<EPreguntaCerradaOpcion> createEPreguntaCerradaOpcion(
|
||||
@Valid @RequestBody EPreguntaCerradaOpcion ePreguntaCerradaOpcion
|
||||
@Valid @RequestBody EPreguntaCerradaOpcion ePreguntaCerradaOpcion,
|
||||
@PathVariable(value = "id", required = false) final Long id
|
||||
) throws URISyntaxException {
|
||||
EPreguntaCerrada ePreguntaCerrada = new EPreguntaCerrada();
|
||||
ePreguntaCerrada.setId(id);
|
||||
ePreguntaCerradaOpcion.setEPreguntaCerrada(ePreguntaCerrada);
|
||||
|
||||
log.debug("REST request to save EPreguntaCerradaOpcion : {}", ePreguntaCerradaOpcion);
|
||||
if (ePreguntaCerradaOpcion.getId() != null) {
|
||||
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) {
|
||||
for (int id : ids) {
|
||||
ePreguntaCerradaOpcionService.delete((long) id);
|
||||
System.out.println(id);
|
||||
}
|
||||
return ResponseEntity
|
||||
.noContent()
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ export class EPreguntaCerradaOpcionService {
|
|||
|
||||
constructor(protected http: HttpClient, protected applicationConfigService: ApplicationConfigService) {}
|
||||
|
||||
create(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion): Observable<EntityResponseType> {
|
||||
return this.http.post<IEPreguntaCerradaOpcion>(this.resourceUrl, ePreguntaCerradaOpcion, { observe: 'response' });
|
||||
create(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion, preguntaId?: number): Observable<EntityResponseType> {
|
||||
return this.http.post<IEPreguntaCerradaOpcion>(`${this.resourceUrl}/${preguntaId}`, ePreguntaCerradaOpcion, { observe: 'response' });
|
||||
}
|
||||
|
||||
update(ePreguntaCerradaOpcion: IEPreguntaCerradaOpcion): Observable<EntityResponseType> {
|
||||
|
|
|
|||
|
|
@ -47,21 +47,45 @@
|
|||
[attr.data-type]="ePregunta.tipo"
|
||||
></fa-icon>
|
||||
</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 *ngFor="let ePreguntaOpcion of ePreguntasOpciones; let j = index; trackBy: trackId">
|
||||
<ng-container *ngIf="ePregunta.id == ePreguntaOpcion[j].epreguntaCerrada.id">
|
||||
<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"
|
||||
[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>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -130,6 +154,73 @@
|
|||
</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> <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="col-8">
|
||||
<form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
|
||||
|
|
|
|||
|
|
@ -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 { EPreguntaCerradaOpcionService } from './../../e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service';
|
||||
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 { 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({
|
||||
selector: 'jhi-encuesta-update',
|
||||
|
|
@ -30,26 +32,35 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
|
|||
})
|
||||
export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
|
||||
faTimes = faTimes;
|
||||
faPlus = faPlus;
|
||||
|
||||
isSaving = false;
|
||||
|
||||
categoriasSharedCollection: ICategoria[] = [];
|
||||
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({
|
||||
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: [],
|
||||
nombre: [null, [Validators.required, Validators.minLength(1), Validators.maxLength(500)]],
|
||||
// orden: [null, [Validators.required]],
|
||||
// cantidad: [null, [Validators.required]],
|
||||
// ePreguntaCerrada: [],
|
||||
});
|
||||
|
||||
ePreguntas?: any[];
|
||||
|
|
@ -58,6 +69,9 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
|
|||
|
||||
isLoading = false;
|
||||
|
||||
createAnother: Boolean = false;
|
||||
selectedQuestionToCreateOption: IEPreguntaCerrada | null = null;
|
||||
|
||||
constructor(
|
||||
protected encuestaService: EncuestaService,
|
||||
protected categoriaService: CategoriaService,
|
||||
|
|
@ -154,6 +168,19 @@ export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
|
|||
|
||||
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) {
|
||||
const id = event.target.dataset.id;
|
||||
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 {
|
||||
// window.history.back();
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
&--titulo {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&--name {
|
||||
color: #1f3779;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
|
|
@ -20,7 +22,7 @@
|
|||
padding: 0.8rem;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
color: #313747;
|
||||
color: #1f3779;
|
||||
pointer-events: visible !important;
|
||||
transition: all 0.1s ease-in-out;
|
||||
|
||||
|
|
@ -58,16 +60,38 @@
|
|||
}
|
||||
|
||||
&--option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.5rem 0;
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025rem;
|
||||
color: #787878;
|
||||
border: 1px solid #e6e6e6;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
top: 0;
|
||||
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 {
|
||||
|
|
@ -76,7 +100,7 @@
|
|||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
color: #15131d;
|
||||
padding: 1rem 3rem;
|
||||
padding: 1rem 3rem 1rem 0.5rem;
|
||||
transition: all 0.1s ease-in-out;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
|
@ -84,6 +108,7 @@
|
|||
label {
|
||||
width: 100%;
|
||||
margin: 0 1rem;
|
||||
color: #1f3779;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -102,6 +127,33 @@
|
|||
color: #787878;
|
||||
border: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue