Add edit survey list and delete closed question
This commit is contained in:
parent
28aec2e60d
commit
03d285868c
|
@ -2,6 +2,7 @@ package org.datasurvey.web.rest;
|
|||
|
||||
import java.net.URI;
|
||||
import java.net.URISyntaxException;
|
||||
import java.util.Arrays;
|
||||
import java.util.List;
|
||||
import java.util.Objects;
|
||||
import java.util.Optional;
|
||||
|
@ -196,4 +197,16 @@ public class EPreguntaCerradaOpcionResource {
|
|||
.headers(HeaderUtil.createEntityDeletionAlert(applicationName, true, ENTITY_NAME, id.toString()))
|
||||
.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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -49,6 +49,10 @@ export class EPreguntaCerradaOpcionService {
|
|||
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(
|
||||
ePreguntaCerradaOpcionCollection: IEPreguntaCerradaOpcion[],
|
||||
...ePreguntaCerradaOpcionsToCheck: (IEPreguntaCerradaOpcion | null | undefined)[]
|
||||
|
|
|
@ -1,22 +1,21 @@
|
|||
<div>
|
||||
<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">
|
||||
<button class="btn btn-info mr-2" (click)="loadAll()" [disabled]="isLoading">
|
||||
<fa-icon icon="sync" [spin]="isLoading"></fa-icon>
|
||||
<span jhiTranslate="dataSurveyApp.ePreguntaCerrada.home.refreshListLabel">Refresh List</span>
|
||||
<button type="button" class="ds-btn ds-btn--secondary" (click)="previousState()">
|
||||
<fa-icon icon="arrow-left"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
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 type="button" class="ds-btn ds-btn--secondary" (click)="loadAll()" [disabled]="isLoading">
|
||||
<fa-icon icon="sync" [spin]="isLoading"></fa-icon> <span>Refrescar preguntas</span>
|
||||
</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>
|
||||
</h2>
|
||||
|
||||
|
@ -28,25 +27,46 @@
|
|||
<span>No se encontraron preguntas</span>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0">
|
||||
<div>
|
||||
<div *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId" [attr.data-index]="ePregunta.id">
|
||||
<span>{{ ePregunta.nombre }} | </span>
|
||||
<span>{{ ePregunta.tipo }} | </span>
|
||||
<span>{{ ePregunta.opcional }}</span>
|
||||
|
||||
<div class="ds-survey" id="entities" *ngIf="ePreguntas && ePreguntas.length > 0">
|
||||
<div class="ds-survey--all-question-wrapper">
|
||||
<div class="ds-survey--question-wrapper" *ngFor="let ePregunta of ePreguntas; let i = index; trackBy: trackId">
|
||||
<div
|
||||
[attr.data-index]="ePregunta.id"
|
||||
[attr.data-tipo]="ePregunta.tipo"
|
||||
[attr.data-opcional]="ePregunta.opcional"
|
||||
class="ds-survey--question"
|
||||
>
|
||||
<div class="ds-survey--titulo">
|
||||
<span class="ds-survey--titulo--name">{{ i + 1 }}. {{ ePregunta.nombre }}</span>
|
||||
<fa-icon
|
||||
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 *ngFor="let ePreguntaOpcion2 of ePreguntaOpcion; let k = index; trackBy: trackId">
|
||||
<span>--------- {{ ePreguntaOpcion2.nombre }}</span>
|
||||
<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>
|
||||
<textarea *ngIf="!ePregunta.tipo" name="" id="" cols="30" rows="10"></textarea>
|
||||
<div class="ds-survey--option ds-survey--open-option" *ngIf="!ePregunta.tipo">
|
||||
<textarea name="" id="" cols="30" rows="10" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <table class="table table-striped" aria-describedby="page-heading">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
@ -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 { FormBuilder, Validators } from '@angular/forms';
|
||||
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 { EPreguntaCerradaDeleteDialogComponent } from 'app/entities/e-pregunta-cerrada/delete/e-pregunta-cerrada-delete-dialog.component';
|
||||
|
||||
import { faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'jhi-encuesta-update',
|
||||
templateUrl: './encuesta-update.component.html',
|
||||
})
|
||||
export class EncuestaUpdateComponent implements OnInit {
|
||||
export class EncuestaUpdateComponent implements OnInit, AfterViewChecked {
|
||||
faTimes = faTimes;
|
||||
|
||||
isSaving = false;
|
||||
|
||||
categoriasSharedCollection: ICategoria[] = [];
|
||||
|
@ -58,7 +63,9 @@ export class EncuestaUpdateComponent implements OnInit {
|
|||
protected usuarioExtraService: UsuarioExtraService,
|
||||
protected activatedRoute: ActivatedRoute,
|
||||
protected fb: FormBuilder,
|
||||
protected modalService: NgbModal
|
||||
protected modalService: NgbModal,
|
||||
protected ePreguntaCerradaService: EPreguntaCerradaService,
|
||||
protected ePreguntaCerradaOpcionService: EPreguntaCerradaOpcionService
|
||||
) {}
|
||||
|
||||
loadAll(): void {
|
||||
|
@ -104,6 +111,10 @@ export class EncuestaUpdateComponent implements OnInit {
|
|||
});
|
||||
}
|
||||
|
||||
ngAfterViewChecked(): void {
|
||||
this.initListeners();
|
||||
}
|
||||
|
||||
trackId(index: number, item: IEPreguntaCerrada): number {
|
||||
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 {
|
||||
// window.history.back();
|
||||
// }
|
||||
|
|
|
@ -98,3 +98,4 @@
|
|||
@import 'paper-dashboard/datasurvey-list';
|
||||
@import 'paper-dashboard/datasurvey-table';
|
||||
@import 'paper-dashboard/datasurvey-contextmenu';
|
||||
@import 'paper-dashboard/datasurvey-survey-update';
|
||||
|
|
|
@ -68,6 +68,15 @@
|
|||
background-color: #f7f9ff;
|
||||
color: #d33232;
|
||||
}
|
||||
|
||||
&--full {
|
||||
background-color: #e73636;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: #d33232;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ds-btn--google {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue