272 lines
9.2 KiB
Vue
272 lines
9.2 KiB
Vue
<script setup lang="ts">
|
|
usePageTitle('Forms library · Settings')
|
|
|
|
interface FormCatalogRow {
|
|
id: string
|
|
description: string
|
|
insurerSlugs: string[]
|
|
subRamoLabel: string
|
|
subRamoKey: string
|
|
personKinds: 'natural' | 'juridica' | 'both'
|
|
productLine: string | null
|
|
fileLabel: string
|
|
fileUrl: string
|
|
badge: string | null
|
|
}
|
|
|
|
const rows = ref<FormCatalogRow[]>([])
|
|
const version = ref('1.0.0')
|
|
const insurerItems = ref<{ label: string; value: string }[]>([])
|
|
const subRamoItems = ref<{ label: string; value: string }[]>([])
|
|
|
|
const pageSize = ref(10)
|
|
const page = ref(1)
|
|
const search = ref('')
|
|
|
|
const pageSizeItems = [
|
|
{ label: '10', value: 10 },
|
|
{ label: '25', value: 25 },
|
|
{ label: '50', value: 50 }
|
|
]
|
|
|
|
function rowSearchText(r: FormCatalogRow): string {
|
|
return [
|
|
String(r.id),
|
|
r.description,
|
|
...r.insurerSlugs,
|
|
r.subRamoLabel,
|
|
r.subRamoKey,
|
|
r.fileLabel
|
|
]
|
|
.join(' ')
|
|
.toLowerCase()
|
|
}
|
|
|
|
const filtered = computed(() => {
|
|
const q = search.value.trim().toLowerCase()
|
|
if (!q) return rows.value
|
|
return rows.value.filter((r) => rowSearchText(r).includes(q))
|
|
})
|
|
|
|
watch([search, pageSize], () => {
|
|
page.value = 1
|
|
})
|
|
|
|
const total = computed(() => filtered.value.length)
|
|
const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
|
|
|
watch(pageCount, (c) => {
|
|
if (page.value > c) page.value = c
|
|
})
|
|
|
|
const pageRows = computed(() => {
|
|
const start = (page.value - 1) * pageSize.value
|
|
return filtered.value.slice(start, start + pageSize.value)
|
|
})
|
|
|
|
const rangeLabel = computed(() => {
|
|
if (total.value === 0) return 'No records'
|
|
const start = (page.value - 1) * pageSize.value + 1
|
|
const end = Math.min(page.value * pageSize.value, total.value)
|
|
return `Showing ${start} to ${end} of ${total.value} records`
|
|
})
|
|
|
|
function goPrev() {
|
|
page.value = Math.max(1, page.value - 1)
|
|
}
|
|
|
|
function goNext() {
|
|
page.value = Math.min(pageCount.value, page.value + 1)
|
|
}
|
|
|
|
function personLabel(pk: FormCatalogRow['personKinds']) {
|
|
if (pk === 'both') return 'Natural · Jurídica'
|
|
return pk === 'natural' ? 'Natural' : 'Jurídica'
|
|
}
|
|
|
|
function productLineLabel(pl: string | null) {
|
|
if (!pl) return '—'
|
|
return pl
|
|
}
|
|
|
|
function exportCsv() {
|
|
const headers = [
|
|
'ID',
|
|
'Description',
|
|
'Insurers',
|
|
'Sub-ramo',
|
|
'Person type',
|
|
'Product line',
|
|
'File',
|
|
'Badge'
|
|
]
|
|
const lines = [headers.join(',')]
|
|
for (const r of filtered.value) {
|
|
const cells = [
|
|
r.id,
|
|
`"${r.description.replace(/"/g, '""')}"`,
|
|
`"${r.insurerSlugs.join('; ')}"`,
|
|
`"${r.subRamoLabel.replace(/"/g, '""')}"`,
|
|
r.personKinds,
|
|
r.productLine ?? '',
|
|
`"${r.fileLabel.replace(/"/g, '""')}"`,
|
|
r.badge ?? ''
|
|
]
|
|
lines.push(cells.join(','))
|
|
}
|
|
const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `forms-catalog-v${version.value}-${new Date().toISOString().slice(0, 10)}.csv`
|
|
a.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto max-w-[95rem] space-y-6 pb-12">
|
|
<div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
|
|
<AppBackToHome />
|
|
<span class="text-[var(--text-muted)] opacity-50" aria-hidden="true">|</span>
|
|
<NuxtLink to="/settings" class="font-medium text-[var(--text-muted)] transition hover:text-[var(--text-primary)]">
|
|
All settings
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div>
|
|
<h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Forms library</h1>
|
|
<p class="mt-2 max-w-3xl text-[14px] leading-relaxed text-[var(--text-muted)]">
|
|
Master catalog: each row maps carriers, sub-ramos, person type, and product line (local vs international
|
|
health, auto full coverage vs DAT, etc.) to a template file. The
|
|
<NuxtLink to="/onboarding/solicitud" class="app-link">Solicitud</NuxtLink>
|
|
flow filters this list for customers.
|
|
</p>
|
|
<p class="mt-1 text-xs text-[var(--text-muted)]">Catalog version: {{ version }} · {{ rows.length }} rows</p>
|
|
</div>
|
|
|
|
<UAlert
|
|
color="info"
|
|
variant="soft"
|
|
title="Backend wiring next"
|
|
description="Upload, OCR metadata, and mapping to open-fetch / APIs will plug in here once storage and services are ready."
|
|
/>
|
|
|
|
<div class="flex flex-wrap items-center justify-between gap-4">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<span class="text-sm text-[var(--text-muted)]">Show</span>
|
|
<USelect v-model="pageSize" :items="pageSizeItems" class="w-24" size="sm" />
|
|
<span class="text-sm text-[var(--text-muted)]">records</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-[var(--text-muted)]">Search:</span>
|
|
<UInput
|
|
v-model="search"
|
|
icon="i-heroicons-magnifying-glass"
|
|
placeholder="ID, insurer, sub-ramo, file…"
|
|
class="w-72 max-w-full"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--surface)] shadow-sm">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full border-collapse text-sm">
|
|
<thead>
|
|
<tr
|
|
class="border-b border-[var(--card-border)] bg-[var(--surface)]/90 text-left text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]"
|
|
>
|
|
<th class="whitespace-nowrap px-3 py-3">ID</th>
|
|
<th class="min-w-[12rem] px-3 py-3">Description</th>
|
|
<th class="min-w-[8rem] px-3 py-3">Carrier(s)</th>
|
|
<th class="min-w-[10rem] px-3 py-3">Sub-ramo</th>
|
|
<th class="whitespace-nowrap px-3 py-3">Person type</th>
|
|
<th class="min-w-[8rem] px-3 py-3">Product line</th>
|
|
<th class="min-w-[12rem] px-3 py-3">File</th>
|
|
<th class="whitespace-nowrap px-3 py-3">Badge</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="row in pageRows"
|
|
:key="row.id"
|
|
class="border-b border-[var(--divider)] transition-colors hover:bg-[var(--surface)]/80"
|
|
>
|
|
<td class="whitespace-nowrap px-3 py-3 font-mono text-[var(--text-primary)]">{{ row.id }}</td>
|
|
<td class="max-w-xs px-3 py-3 text-[var(--text-primary)]">{{ row.description }}</td>
|
|
<td class="px-3 py-3">
|
|
<div class="flex flex-wrap gap-1">
|
|
<UBadge v-for="s in row.insurerSlugs" :key="s" color="neutral" variant="soft" size="xs">
|
|
{{ s }}
|
|
</UBadge>
|
|
</div>
|
|
</td>
|
|
<td class="px-3 py-3 text-[var(--text-primary)]">{{ row.subRamoLabel }}</td>
|
|
<td class="whitespace-nowrap px-3 py-3">{{ personLabel(row.personKinds) }}</td>
|
|
<td class="px-3 py-3 text-[var(--text-muted)]">{{ productLineLabel(row.productLine) }}</td>
|
|
<td class="px-3 py-3">
|
|
<a
|
|
:href="row.fileUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="break-all text-[var(--brand)] underline hover:text-[var(--brand)]"
|
|
>
|
|
{{ row.fileLabel }}
|
|
</a>
|
|
</td>
|
|
<td class="px-3 py-3 text-center">
|
|
<UBadge v-if="row.badge != null" color="primary" variant="soft">{{ row.badge }}</UBadge>
|
|
<span v-else class="text-[var(--text-muted)] opacity-50">—</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div
|
|
class="flex flex-wrap items-center justify-between gap-3 border-t border-[var(--card-border)] px-4 py-3"
|
|
>
|
|
<p class="text-sm text-[var(--text-muted)]">{{ rangeLabel }}</p>
|
|
<div class="flex items-center gap-1">
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
color="neutral"
|
|
variant="ghost"
|
|
size="sm"
|
|
:disabled="page <= 1"
|
|
@click="goPrev"
|
|
/>
|
|
<span
|
|
class="inline-flex min-w-[2.25rem] items-center justify-center rounded-md bg-primary-500 px-2 py-1 text-sm font-medium text-white"
|
|
>
|
|
{{ page }}
|
|
</span>
|
|
<UButton
|
|
icon="i-heroicons-chevron-right"
|
|
color="neutral"
|
|
variant="ghost"
|
|
size="sm"
|
|
:disabled="page >= pageCount"
|
|
@click="goNext"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<UButton
|
|
icon="i-heroicons-arrow-up-tray"
|
|
color="neutral"
|
|
variant="outline"
|
|
size="sm"
|
|
@click="exportCsv"
|
|
>
|
|
Export CSV
|
|
</UButton>
|
|
<NuxtLink to="/onboarding/solicitud">
|
|
<UButton color="primary" variant="soft" size="sm">Open solicitud preview</UButton>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|