bravioo/asistente
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

JSON preguntas corregido

Browse Source
This commit is contained in:
María
2025-10-21 15:18:17 +02:00
committed by María
parent ddc623411a
commit da5b74b295
12 changed files with 3577 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
components/SliceQuestion.vue
View File

@@ -1,50 +1,58 @@
<template>
<div class="space-y-6">
<form class="" @submit.prevent="handleSubmit">
<!-- <p class="text-sm text-muted">
Pregunta {{ currentIndex + 1 }} de {{ total }}
</p> -->
<form @submit.prevent="handleSubmit">
<div class="flex flex-col gap-4">
<div class="flex gap-2">
<!-- Cabecera de sección -->
<!-- <div class="flex gap-2">
<img src="../public/icono-bravioo.svg" alt="logo-bravio" class="h-6 w-6 object-cover" />
<div class="flex flex-col gap-1">
<h2 class="text-xl font-semibold">{{ data.section.title[langcode] }}</h2>
<p v-if="data.section.description" class="text-muted text-xs">{{ data.section.description[langcode] }}</p>
<p v-if="data.section.description[langcode]" class="text-muted text-xs">
{{ data.section.description[langcode] }}
</p>
</div>
</div>
<div class="flex flex-col gap-1">
</div> -->
<h1>{{ data.id }}</h1>
<!-- Título de pregunta -->
<div v-if="data.question" class="flex gap-2">
<img src="../public/icono-bravioo.svg" alt="logo-bravio" class="h-6 w-6 object-cover" />
<h3 class="text-base font-semibold">{{ data.question.title[langcode] }}</h3>
<p v-if="data.question.description" class="text-muted text-xs">{{ data.question.description[langcode] }}</p>
</div>
<!-- <p v-if="data.question.recommendation" class="w-fit text-xs bg-[#AFE3D2] px-3 py-1 rounded-3xl"><strong>Recomendado:</strong> {{ data.question.recommendation[langcode] }}</p> -->
<p v-if="data.question.description[langcode]" class="text-muted text-xs">
{{ data.question.description[langcode] }}
</p>
</div>
<template v-if="inputComponent">
<component
:is="inputComponent"
:key="data.question.id"
v-bind="inputProps"
:required="data.input.required || false"
@input-value="localValue = $event"
/>
</template>
<div class="flex justify-start gap-4 mt-6">
<button-CTA
color="transparent"
@click="$emit('previous')"
<!-- Render dinámico de inputs -->
<div class="space-y-4 mt-4">
<div
v-for="(input, idx) in data.inputs"
:key="idx"
class="flex flex-col gap-2"
>
Atrás
</button-CTA>
<!-- <label class="font-medium text-sm">{{ input.label[langcode] }}</label> -->
<component
:is="resolveComponent(input.type)"
:key="data.id + '-' + input.label[langcode] + '-' + idx"
v-bind="input"
:required="input.required || false"
@input-value="updateValue($event)"
/>
</div>
</div>
<!-- Botones navegación -->
<div class="flex justify-end gap-4 mt-6">
<!-- <button-CTA color="transparent" @click="$emit('previous')">Atrás</button-CTA> -->
<button-CTA
color="accent"
:disabled="localValue ? false : true"
@click="$emit('next', localValue)"
:disabled="!isValid"
@click="$emit('next', values)"
>
Siguiente
Continuar
</button-CTA>
</div>
</form>
</div>
</template>
@@ -61,6 +69,7 @@ import InputAttach from "@/components/InputAttach.vue"
import InputTelephone from "@/components/InputTelephone.vue"
import InputUrl from "@/components/InputUrl.vue"
import RangeInputs from "@/components/RangeInputs.vue"
export default {
components: {
InputText,
@@ -74,6 +83,7 @@ export default {
InputUrl,
RangeInputs
},
props: {
data: { type: Object, required: true },
currentIndex: { type: Number, default: 0 },
@@ -84,14 +94,36 @@ export default {
data() {
return {
localValue: null
values: {}, // aquí se guardan los valores de todos los inputs
}
},
computed: {
...mapGetters(['langcode']),
inputComponent() {
switch (this.data.input.type) {
...mapGetters(["langcode"]),
isValid() {
const totalInputs = this.data.inputs.length
//console.log("totalInputs -----------", totalInputs, this.values)
if (totalInputs === 1) {
// Si solo hay un input, comprobar que values solo tiene un valor
const isNotEmpty = this.values !== null &&
typeof this.values === "object" &&
!Array.isArray(this.values) &&
Object.keys(this.values).length > 0
//console.log("isValid 1 Input -----------", isNotEmpty)
return isNotEmpty
} else if (totalInputs > 1) {
// Si hay múltiples inputs, comprobar que values existen dentro de data.inputs
const filled = Object.values(this.values).length
//console.log("isValid Varios Inputs -----------", { totalInputs, filled })
return filled === totalInputs
}
return false
},
},
methods: {
resolveComponent(type) {
switch (type) {
case "text": return "InputText"
case "email": return "InputEmail"
case "textarea": return "InputTextarea"
@@ -105,15 +137,30 @@ export default {
default: return "InputText"
}
},
inputProps() {
return this.data.input
}
},
methods: {
updateValue(value) {
//console.log("updateValue recibido →", value)
// Si el valor es un objeto pero no tiene id, lo mergeamos directamente
if (value && typeof value === "object") {
this.values = { ...this.values, ...value }
}
// Si es un valor simple, lo guardamos en una key genérica o incremental
else if (typeof value !== "object") {
// Lo agregamos al objeto values con una key genérica
const key = Object.keys(this.values).length + 1
this.values = { ...this.values, [key]: value }
}
//console.log("updateValue →", this.values)
},
handleSubmit() {
this.$emit("answer", { id: this.data.question, value: this.localValue })
this.$emit("next", this.localValue)
this.$emit("answer", {
id: this.data.id,
value: this.values
})
this.$emit("next", this.values)
this.values = {} // resetear valores después de enviar
}
}
}