You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
2.3 KiB
64 lines
2.3 KiB
<script lang="ts">
|
|
import type { ConditionBuilderStore } from '../stores/ConditionEditor.svelte.ts';
|
|
import type {LogicNode, LogicOp} from '../lib/condition_editor.ts';
|
|
import ConditionNode from './ConditionNode.svelte';
|
|
|
|
interface Props {
|
|
node: LogicNode;
|
|
store: ConditionBuilderStore;
|
|
depth: number;
|
|
}
|
|
|
|
let { node, store, depth }: Props = $props();
|
|
|
|
let selectedOp = $state<LogicOp>(node.op);
|
|
|
|
function onOpChange() {
|
|
store.setLogicOp(node.id, selectedOp);
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-1.5 rounded border border-gray-200 bg-gray-50 p-2">
|
|
|
|
<div class="flex items-center gap-2">
|
|
<select bind:value={selectedOp} onchange={onOpChange}
|
|
class="rounded border border-gray-300 bg-white px-2 py-1 text-sm font-medium
|
|
text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="and">Y (AND)</option>
|
|
<option value="or">O (OR)</option>
|
|
</select>
|
|
|
|
<span class="text-xs text-gray-400">se cumplen</span>
|
|
|
|
<div class="ml-auto flex gap-1">
|
|
<button
|
|
onclick={() => store.addCompare(node.id)}
|
|
class="rounded bg-blue-50 px-2 py-1 text-xs text-blue-600 hover:bg-blue-100 transition-colors"
|
|
>+ Condición</button>
|
|
|
|
<button
|
|
onclick={() => store.addLogic(node.id, 'and')}
|
|
class="rounded bg-purple-50 px-2 py-1 text-xs text-purple-600 hover:bg-purple-100 transition-colors"
|
|
>+ Grupo</button>
|
|
|
|
{#if depth > 0}
|
|
<button
|
|
onclick={() => store.remove(node.id)}
|
|
class="rounded bg-red-50 px-2 py-1 text-xs text-red-500 hover:bg-red-100 transition-colors"
|
|
>✕</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if node.children.length === 0}
|
|
<p class="text-xs text-gray-400 italic px-1">Sin condiciones — añade una arriba</p>
|
|
{:else}
|
|
<div class="flex flex-col gap-1.5 pl-3 border-l-2 border-gray-200">
|
|
{#each node.children as child (child.id)}
|
|
<ConditionNode node={child} {store} depth={depth + 1} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
</div> |