Add edit survey list and delete closed question

This commit is contained in:
Pablo Bonilla 2021-07-22 21:34:05 -06:00
parent 28aec2e60d
commit 03d285868c
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
7 changed files with 251 additions and 33 deletions

View File

@ -2,6 +2,7 @@ package org.datasurvey.web.rest;
import java.net.URI; import java.net.URI;
import java.net.URISyntaxException; import java.net.URISyntaxException;
import java.util.Arrays;
import java.util.List; import java.util.List;
import java.util.Objects; import java.util.Objects;
import java.util.Optional; import java.util.Optional;
@ -76,7 +77,7 @@ public class EPreguntaCerradaOpcionResource {
/** /**
* {@code PUT /e-pregunta-cerrada-opcions/:id} : Updates an existing ePreguntaCerradaOpcion. * {@code PUT /e-pregunta-cerrada-opcions/:id} : Updates an existing ePreguntaCerradaOpcion.
* *
* @param id the id of the ePreguntaCerradaOpcion to save. * @param id the id of the ePreguntaCerradaOpcion to save.
* @param ePreguntaCerradaOpcion the ePreguntaCerradaOpcion to update. * @param ePreguntaCerradaOpcion the ePreguntaCerradaOpcion to update.
* @return the {@link ResponseEntity} with status {@code 200 (OK)} and with body the updated ePreguntaCerradaOpcion, * @return the {@link ResponseEntity} with status {@code 200 (OK)} and with body the updated ePreguntaCerradaOpcion,
* or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion is not valid, * or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion is not valid,
@ -110,7 +111,7 @@ public class EPreguntaCerradaOpcionResource {
/** /**
* {@code PATCH /e-pregunta-cerrada-opcions/:id} : Partial updates given fields of an existing ePreguntaCerradaOpcion, field will ignore if it is null * {@code PATCH /e-pregunta-cerrada-opcions/:id} : Partial updates given fields of an existing ePreguntaCerradaOpcion, field will ignore if it is null
* *
* @param id the id of the ePreguntaCerradaOpcion to save. * @param id the id of the ePreguntaCerradaOpcion to save.
* @param ePreguntaCerradaOpcion the ePreguntaCerradaOpcion to update. * @param ePreguntaCerradaOpcion the ePreguntaCerradaOpcion to update.
* @return the {@link ResponseEntity} with status {@code 200 (OK)} and with body the updated ePreguntaCerradaOpcion, * @return the {@link ResponseEntity} with status {@code 200 (OK)} and with body the updated ePreguntaCerradaOpcion,
* or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion is not valid, * or with status {@code 400 (Bad Request)} if the ePreguntaCerradaOpcion is not valid,
@ -196,4 +197,16 @@ public class EPreguntaCerradaOpcionResource {
.headers(HeaderUtil.createEntityDeletionAlert(applicationName, true, ENTITY_NAME, id.toString())) .headers(HeaderUtil.createEntityDeletionAlert(applicationName, true, ENTITY_NAME, id.toString()))
.build(); .build();
} }
@PostMapping("/e-pregunta-cerrada-opcions/deleteMany")
public ResponseEntity<Void> deleteManyEPreguntaCerradaOpcion(@Valid @RequestBody int[] ids) {
for (int id : ids) {
ePreguntaCerradaOpcionService.delete((long) id);
System.out.println(id);
}
return ResponseEntity
.noContent()
.headers(HeaderUtil.createEntityDeletionAlert(applicationName, true, ENTITY_NAME, Arrays.toString(ids)))
.build();
}
} }

View File

@ -49,6 +49,10 @@ export class EPreguntaCerradaOpcionService {
return this.http.delete(`${this.resourceUrl}/${id}`, { observe: 'response' }); return this.http.delete(`${this.resourceUrl}/${id}`, { observe: 'response' });
} }
deleteMany(ids: number[]): Observable<EntityResponseType> {
return this.http.post<IEPreguntaCerradaOpcion>(`${this.resourceUrl}/deleteMany`, ids, { observe: 'response' });
}
addEPreguntaCerradaOpcionToCollectionIfMissing( addEPreguntaCerradaOpcionToCollectionIfMissing(
ePreguntaCerradaOpcionCollection: IEPreguntaCerradaOpcion[], ePreguntaCerradaOpcionCollection: IEPreguntaCerradaOpcion[],
...ePreguntaCerradaOpcionsToCheck: (IEPreguntaCerradaOpcion | null | undefined)[] ...ePreguntaCerradaOpcionsToCheck: (IEPreguntaCerradaOpcion | null | undefined)[]

View File

@ -1,22 +1,21 @@
<div> <div>
<h2 id="page-heading" data-cy="EPreguntaCerradaHeading"> <h2 id="page-heading" data-cy="EPreguntaCerradaHeading">
<span>{{ encuesta!.nombre }}</span> <p class="ds-title">{{ encuesta!.nombre }}</p>
<p class="ds-subtitle">Creada el día {{ encuesta!.fechaCreacion | formatShortDatetime | lowercase }}</p>
<div class="d-flex justify-content-end"> <div class="d-flex justify-content-end">
<button class="btn btn-info mr-2" (click)="loadAll()" [disabled]="isLoading"> <button type="button" class="ds-btn ds-btn--secondary" (click)="previousState()">
<fa-icon icon="sync" [spin]="isLoading"></fa-icon> <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;<span jhiTranslate="entity.action.cancel">Cancel</span>
<span jhiTranslate="dataSurveyApp.ePreguntaCerrada.home.refreshListLabel">Refresh List</span>
</button> </button>
<button type="button" class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
<button <fa-icon icon="sync" [spin]="isLoading"></fa-icon>&nbsp;&nbsp;<span>Refrescar preguntas</span>
id="jh-create-entity"
data-cy="entityCreateButton"
class="btn btn-primary jh-create-entity create-e-pregunta-cerrada"
[routerLink]="['/e-pregunta-cerrada/new']"
>
<fa-icon icon="plus"></fa-icon>
<span jhiTranslate="dataSurveyApp.ePreguntaCerrada.home.createLabel"> Create a new E Pregunta Cerrada </span>
</button> </button>
<ng-container *ngIf="encuesta!.estado === 'DRAFT'">
<button type="button" class="ds-btn ds-btn--primary" (click)="publishSurvey()">Publicar encuesta</button>
</ng-container>
<ng-container *ngIf="encuesta!.estado === 'ACTIVE'">
<button type="button" class="ds-btn ds-btn--danger--full" (click)="finishSurvey()">Finalizar encuesta</button>
</ng-container>
</div> </div>
</h2> </h2>
@ -28,25 +27,46 @@
<span>No se encontraron preguntas</span> <span>No se encontraron preguntas</span>
</div> </div>
<div class="table-responsive" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0"> <div class="ds-survey" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0">
<div> <div class="ds-survey--all-question-wrapper">
<div *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId" [attr.data-index]="ePregunta.id"> <div class="ds-survey--question-wrapper" *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId">
<span>{{ ePregunta.nombre }} | </span> <div
<span>{{ ePregunta.tipo }} | </span> [attr.data-index]="ePregunta.id"
<span>{{ ePregunta.opcional }}</span> [attr.data-tipo]="ePregunta.tipo"
[attr.data-opcional]="ePregunta.opcional"
<ng-container *ngIf="ePregunta.tipo"> class="ds-survey--question"
<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--titulo">
<div *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId"> <span class="ds-survey--titulo--name">{{ i + 1 }}. {{ ePregunta.nombre }}</span>
<span>--------- {{ ePreguntaOpcion2.nombre }}</span> <fa-icon
</div> class="ds-survey--titulo--icon"
[icon]="faTimes"
(click)="deleteQuestion($event)"
[attr.data-id]="ePregunta.id"
[attr.data-type]="ePregunta.tipo"
></fa-icon>
</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"
*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 />
<label for="{{ ePregunta.id }}-{{ ePreguntaOpcion2.id }}">{{ ePreguntaOpcion2.nombre }}</label>
</div>
</ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</ng-container> <div class="ds-survey--option ds-survey--open-option" *ngIf="!ePregunta.tipo">
<textarea *ngIf="!ePregunta.tipo" name="" id="" cols="30" rows="10"></textarea> <textarea name="" id="" cols="30" rows="10" disabled></textarea>
</div>
</div>
</div> </div>
</div> </div>
<!-- <table class="table table-striped" aria-describedby="page-heading"> <!-- <table class="table table-striped" aria-describedby="page-heading">
<thead> <thead>
<tr> <tr>

View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { EPreguntaCerradaOpcionService } from './../../e-pregunta-cerrada-opcion/service/e-pregunta-cerrada-opcion.service';
import { AfterViewChecked, Component, OnInit } from '@angular/core';
import { HttpResponse } from '@angular/common/http'; import { HttpResponse } from '@angular/common/http';
import { FormBuilder, Validators } from '@angular/forms'; import { FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
@ -20,11 +21,15 @@ 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';
@Component({ @Component({
selector: 'jhi-encuesta-update', selector: 'jhi-encuesta-update',
templateUrl: './encuesta-update.component.html', templateUrl: './encuesta-update.component.html',
}) })
export class EncuestaUpdateComponent implements OnInit { export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
faTimes = faTimes;
isSaving = false; isSaving = false;
categoriasSharedCollection: ICategoria[] = []; categoriasSharedCollection: ICategoria[] = [];
@ -58,7 +63,9 @@ export class EncuestaUpdateComponent implements OnInit {
protected usuarioExtraService: UsuarioExtraService, protected usuarioExtraService: UsuarioExtraService,
protected activatedRoute: ActivatedRoute, protected activatedRoute: ActivatedRoute,
protected fb: FormBuilder, protected fb: FormBuilder,
protected modalService: NgbModal protected modalService: NgbModal,
protected ePreguntaCerradaService: EPreguntaCerradaService,
protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService
) {} ) {}
loadAll(): void { loadAll(): void {
@ -104,6 +111,10 @@ export class EncuestaUpdateComponent implements OnInit {
}); });
} }
ngAfterViewChecked(): void {
this.initListeners();
}
trackId(index: number, item: IEPreguntaCerrada): number { trackId(index: number, item: IEPreguntaCerrada): number {
return item.id!; return item.id!;
} }
@ -119,6 +130,59 @@ export class EncuestaUpdateComponent implements OnInit {
}); });
} }
initListeners(): void {
const checkboxes = document.getElementsByClassName('ds-survey--checkbox');
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', e => {
console.log(e);
if ((e.target as HTMLInputElement).checked) {
(e.target as HTMLElement).offsetParent!.classList.add('ds-survey--closed-option--active');
} else {
(e.target as HTMLElement).offsetParent!.classList.remove('ds-survey--closed-option--active');
}
});
}
}
previousState(): void {
window.history.back();
}
publishSurvey(): void {}
finishSurvey(): void {}
deleteQuestion(event: any) {
const id = event.target.dataset.id;
if (event.target.dataset.type) {
// Delete closed question
console.log('closed', id);
const questionElement = (event.target as HTMLElement).parentElement?.parentElement;
const optionIdsToDelete: number[] = [];
// Get options IDs
questionElement?.childNodes.forEach((e, i) => {
if (e.nodeName !== 'DIV') return;
if (i === 0) return;
if ((e as HTMLElement).dataset.id === undefined) return;
let optionId = (e as HTMLElement).dataset.id;
optionIdsToDelete.push(+optionId!);
});
// Delete question options
this.ePreguntaCerradaOpcionService.deleteMany(optionIdsToDelete).subscribe(e => {
// Delete question
this.ePreguntaCerradaService.delete(id).subscribe(e => {
console.log('DELETED QUESTION: ' + id);
this.loadAll();
});
});
} else {
// Delete open question
console.log('open', id);
}
}
// previousState(): void { // previousState(): void {
// window.history.back(); // window.history.back();
// } // }

View File

@ -98,3 +98,4 @@
@import 'paper-dashboard/datasurvey-list'; @import 'paper-dashboard/datasurvey-list';
@import 'paper-dashboard/datasurvey-table'; @import 'paper-dashboard/datasurvey-table';
@import 'paper-dashboard/datasurvey-contextmenu'; @import 'paper-dashboard/datasurvey-contextmenu';
@import 'paper-dashboard/datasurvey-survey-update';

View File

@ -68,6 +68,15 @@
background-color: #f7f9ff; background-color: #f7f9ff;
color: #d33232; color: #d33232;
} }
&--full {
background-color: #e73636;
color: #fff;
&:hover {
background-color: #d33232;
}
}
} }
.ds-btn--google { .ds-btn--google {

View File

@ -0,0 +1,107 @@
.ds-survey {
display: flex;
&--titulo {
display: flex;
justify-content: space-between;
&--name {
}
&--icon {
border-radius: 50%;
background-color: #f1f5f9;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.2s ease-in-out;
font-size: 1rem;
padding: 0.8rem;
width: 25px;
height: 25px;
color: #313747;
pointer-events: visible !important;
transition: all 0.1s ease-in-out;
* {
pointer-events: none;
}
&:hover {
background-color: #e73636;
color: #fff;
}
}
}
&--all-question-wrapper {
display: flex;
flex-direction: column;
border: 2px dashed #f1f1f1;
border-radius: $border-radius-x-large;
padding: 2rem 5rem;
margin: 0 auto;
}
&--question-wrapper {
margin: 0 auto;
}
&--question {
display: flex;
flex-direction: column;
font-size: 1.2rem;
color: #15131d;
padding: 2rem;
border-bottom: 1px solid #e9e9e9;
}
&--option {
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;
}
&--closed-option {
display: flex;
width: 25rem;
align-items: center;
font-size: 0.9rem;
color: #15131d;
padding: 1rem 3rem;
transition: all 0.1s ease-in-out;
cursor: pointer;
position: relative;
label {
width: 100%;
margin: 0 1rem;
}
}
&--open-option {
display: flex;
align-items: center;
font-size: 0.9rem;
color: #15131d;
transition: all 0.1s ease-in-out;
position: relative;
& textarea {
width: 25rem;
height: 20rem;
padding: 1rem 3rem;
color: #787878;
border: none;
resize: none;
}
}
}