diff --git a/public/img/hi/cocina_roble_cerrada_mbmb_enpe.jpg b/public/img/hi/cocina_roble_cerrada_mbmb_enpe.jpg index da12fe0..2417e9e 100644 Binary files a/public/img/hi/cocina_roble_cerrada_mbmb_enpe.jpg and b/public/img/hi/cocina_roble_cerrada_mbmb_enpe.jpg differ diff --git a/public/img/hi/cocina_trentino_cerrada_mbmb_enpe.jpg b/public/img/hi/cocina_trentino_cerrada_mbmb_enpe.jpg index 2417e9e..da12fe0 100644 Binary files a/public/img/hi/cocina_trentino_cerrada_mbmb_enpe.jpg and b/public/img/hi/cocina_trentino_cerrada_mbmb_enpe.jpg differ diff --git a/src/lib/cmps/BtOption.svelte b/src/lib/cmps/BtOption.svelte index 06c34c5..be09836 100644 --- a/src/lib/cmps/BtOption.svelte +++ b/src/lib/cmps/BtOption.svelte @@ -9,16 +9,18 @@ optionRef, groupId, viewId, + isDisabled = false, isSelected = false } = $props<{ optionRef: OptionReference; groupId: string; viewId: string; + isDisabled?: boolean; isSelected?: boolean; }>(); // Forzar que estos sean reactivos - const optionValue = $derived(appState.getOptionValue(optionRef.id)); + const optionValue = $derived(appState.getOptionValue(optionRef.id)); const consultation = $derived(appState.requiresConsultation(viewId, groupId, optionRef.id)); const imgOptSrc = $derived(imgPath + optionValue.thumb) @@ -39,22 +41,23 @@ + + \ No newline at end of file diff --git a/src/lib/cmps/PnGroup.svelte b/src/lib/cmps/PnGroup.svelte index e98e716..634cc9c 100644 --- a/src/lib/cmps/PnGroup.svelte +++ b/src/lib/cmps/PnGroup.svelte @@ -2,6 +2,7 @@ import type {OptionGroup} from "../data/DataConfigTypes"; import {appState} from "../data/AppState.svelte"; import BtOption from "./BtOption.svelte"; + import {derived} from "svelte/store"; let { group, @@ -11,14 +12,18 @@ viewId?: string; }>(); - // ❌ BORRA ESTO: Estaba forzando a mirar siempre la vista actual, - // ignorando si viewId era "general" - // const currentViewId = $derived(appState.selection.currentViewId); - // const viewState = $derived(appState.selection.views[currentViewId]); - - // ✅ AGREGA ESTO: Obtenemos el valor seleccionado correctamente según el viewId - // Svelte rastreará automáticamente las dependencias dentro de getCurrentOption const selectedValue = $derived(appState.getCurrentOption(viewId, group.id)); + const options = $derived(appState.getGroupOptions(viewId, group.id)); + + + + // Obtener la información de consulta de la opción seleccionada + const selectedConsultation = $derived.by(() => { + if (!selectedValue) return null; + return appState.requiresConsultation(viewId, group.id, selectedValue); + }); + + @@ -26,16 +31,43 @@

{group.name || 'Opciones' }

- {#each group.values as optionRef (optionRef.id) } + {#each options as option (option.id) } - {@const isSelected = selectedValue === optionRef.id} + {@const isSelected = selectedValue === option.id} + {/each} + + + {#if selectedConsultation?.required} +
+
+
+ + + +
+
+
+ Esta opción requiere consulta +
+ {#if selectedConsultation.message} +

+ {selectedConsultation.message} +

+ {/if} +
+
+
+ {/if} + +
\ No newline at end of file diff --git a/src/lib/data/AppState.svelte.ts b/src/lib/data/AppState.svelte.ts index 4d02678..0d5bd43 100644 --- a/src/lib/data/AppState.svelte.ts +++ b/src/lib/data/AppState.svelte.ts @@ -1,7 +1,6 @@ import { dataConfig } from './DataConfig'; import type {DataConfig, Rules, OptionGroup, View} from './DataConfigTypes'; import type { AppState } from './AppStateTypes'; -import {data} from "autoprefixer"; class DataConfigStore { @@ -53,7 +52,7 @@ class DataConfigStore { if (typeof window !== 'undefined') { (window as any).appState = this; console.log('✅ appState disponible en window.appState'); - console.log('📝 Usa: window.appState.inspect() para ver el estado'); + console.log('🔍 Usa: window.appState.inspect() para ver el estado'); } } @@ -333,15 +332,32 @@ class DataConfigStore { view.options.forEach((group: OptionGroup) => { const currentId = this.selection.views[viewId][group.id]; - const opt = group.values.find(v => v.id === currentId); - if (opt?.rules && !this.isValid(opt.rules)) { - changes.push({ - group: group.id, - from: currentId, - to: group.default, - reason: 'rule validation failed' - }); - this.selection.views[viewId][group.id] = group.default; + const currentOpt = group.values.find(v => v.id === currentId); + + // Si la opción actual no es válida + if (currentOpt?.rules && !this.isValid(currentOpt.rules)) { + // Buscar la primera opción válida en el grupo + const validOption = this.findFirstValidOption(group); + + if (validOption) { + changes.push({ + group: group.id, + from: currentId, + to: validOption, + reason: 'rule validation failed' + }); + this.selection.views[viewId][group.id] = validOption; + } else { + // Si no hay ninguna opción válida, usar default como fallback + console.warn(`No se encontró ninguna opción válida para ${viewId}.${group.id}, usando default`); + changes.push({ + group: group.id, + from: currentId, + to: group.default, + reason: 'no valid option found, using default' + }); + this.selection.views[viewId][group.id] = group.default; + } } }); @@ -349,6 +365,25 @@ class DataConfigStore { this.debugLog('revalidateView', { viewId, changes }); } } + + /** Encontrar la primera opción válida en un grupo */ + private findFirstValidOption(group: OptionGroup): string | null { + // Primero intentar con el default si es válido + const defaultOpt = group.values.find(v => v.id === group.default); + if (defaultOpt && this.isValid(defaultOpt.rules)) { + return group.default; + } + + // Si el default no es válido, buscar la primera opción válida + for (const opt of group.values) { + if (this.isValid(opt.rules)) { + return opt.id; + } + } + + // Si no hay ninguna opción válida, retornar null + return null; + } } export const appState = new DataConfigStore(); \ No newline at end of file diff --git a/src/lib/data/DataConfig.ts b/src/lib/data/DataConfig.ts index 55bc42d..668b318 100644 --- a/src/lib/data/DataConfig.ts +++ b/src/lib/data/DataConfig.ts @@ -228,20 +228,20 @@ export const dataConfig : DataConfig = { name : 'Muebles Personalizados', text : '', image : undefined, - thumb : undefined, + thumb : 'mob_per_thumb.png', }, // Disposicion cocina abierta : { value : 'abierta', - name : 'Cocina independiente', + name : 'Cocina integrada', text : '', image : undefined, thumb : undefined, }, cerrada : { value : 'cerrada', - name : 'Cocina integrada', + name : 'Cocina independiente', text : '', image : undefined, thumb : undefined,