panels-origin/web-panel/components/BudgetItemPicker.vue

<template>
  <AutoComplete
    v-model="selected"
    :suggestions="filtered"
    option-label="label"
    placeholder="Buscar concepto del presupuesto..."
    class="w-full"
    force-selection
    @complete="onSearch"
    @item-select="onSelect"
  />
</template>

<script setup lang="ts">
const props = defineProps<{
  projectId: number;
  modelValue?: number | null;
}>();
const emit = defineEmits<{ "update:modelValue": [number | null]; select: [BudgetOption | null] }>();

type BudgetOption = {
  id: number;
  code: string;
  description: string;
  unit: string;
  amount: number;
  label: string;
};

const { api } = useApi();
const items = ref<BudgetOption[]>([]);
const selected = ref<BudgetOption | null>(null);
const filtered = ref<BudgetOption[]>([]);

async function load() {
  if (!props.projectId) {
    items.value = [];
    return;
  }
  const r = await api<{ items?: Array<Record<string, unknown>> }>(
    `/v1/projects/${props.projectId}/budget`,
  );
  const raw = r.items ?? [];
  items.value = raw.map((row) => ({
    id: Number(row.id),
    code: String(row.code ?? ""),
    description: String(row.description ?? ""),
    unit: String(row.unit ?? ""),
    amount: Number(row.amount ?? 0),
    label: [row.code, row.description].filter(Boolean).join(" — "),
  }));
  filtered.value = items.value.slice(0, 30);
}

function onSearch(event: { query: string }) {
  const q = event.query.toLowerCase();
  filtered.value = items.value.filter((i) => i.label.toLowerCase().includes(q)).slice(0, 30);
}

function onSelect(event: { value: BudgetOption }) {
  emit("update:modelValue", event.value?.id ?? null);
  emit("select", event.value ?? null);
}

watch(() => props.projectId, load, { immediate: true });
watch(
  () => props.modelValue,
  (id) => {
    if (!id) selected.value = null;
    else selected.value = items.value.find((i) => i.id === id) ?? null;
  },
);
</script>