Add modal for question option creation
This commit is contained in:
parent
679a238c13
commit
aeb5538a4a
|
@ -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()
|
||||||
|
|
|
@ -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> {
|
||||||
|
|
|
@ -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> <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">
|
||||||
|
|
|
@ -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();
|
||||||
// }
|
// }
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue