54 lines
2.0 KiB
Vue
54 lines
2.0 KiB
Vue
<script setup>
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
|
|
import { Badge } from '@/Components/ui/badge';
|
|
|
|
const props = defineProps({ mappings: Array });
|
|
</script>
|
|
<template>
|
|
<div v-if="mappings?.length" class="pt-4">
|
|
<h3 class="font-semibold mb-2">Current Saved Mappings</h3>
|
|
<div class="overflow-x-auto rounded-lg border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Source column</TableHead>
|
|
<TableHead>Target field</TableHead>
|
|
<TableHead>Transform</TableHead>
|
|
<TableHead>Mode</TableHead>
|
|
<TableHead>Options</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow
|
|
v-for="m in mappings"
|
|
:key="m.id || m.source_column + m.target_field"
|
|
>
|
|
<TableCell class="font-medium">{{ m.source_column }}</TableCell>
|
|
<TableCell>{{ m.target_field }}</TableCell>
|
|
<TableCell>
|
|
<Badge v-if="m.transform" variant="outline" class="text-xs">{{ m.transform }}</Badge>
|
|
<span v-else class="text-muted-foreground">—</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="secondary" class="text-xs">{{ m.apply_mode || "both" }}</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<template v-if="m.options">
|
|
<div class="flex flex-wrap gap-1">
|
|
<Badge v-if="m.options.key" variant="outline" class="text-[10px]">
|
|
key: {{ m.options.key }}
|
|
</Badge>
|
|
<Badge v-if="m.options.type" variant="outline" class="text-[10px]">
|
|
type: {{ m.options.type }}
|
|
</Badge>
|
|
</div>
|
|
</template>
|
|
<span v-else class="text-muted-foreground">—</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</template>
|