ss-tools/frontend/src/components/tools/MapperTool.svelte

<!-- [DEF:MapperTool:Component] -->
<!--
@SEMANTICS: mapper, tool, dataset, postgresql, excel
@PURPOSE: UI component for mapping dataset column verbose names using the MapperPlugin.
@LAYER: UI
@RELATION: USES -> frontend/src/services/toolsService.js
@RELATION: USES -> frontend/src/services/connectionService.js
-->
<script>
    // [SECTION: IMPORTS]
    import { onMount } from 'svelte';
    import { runTask } from '../../services/toolsService.js';
    import { getConnections } from '../../services/connectionService.js';
    import { selectedTask } from '../../lib/stores.js';
    import { addToast } from '../../lib/toasts.js';
    import { t } from '../../lib/i18n';
    import { Button, Card, Select, Input } from '../../lib/ui';
    // [/SECTION]

    let envs = [];
    let connections = [];
    let selectedEnv = '';
    let datasetId = '';
    let source = 'postgres';
    let selectedConnection = '';
    let tableName = '';
    let tableSchema = 'public';
    let excelPath = '';
    let isRunning = false;

    // [DEF:fetchData:Function]
    // @PURPOSE: Fetches environments and saved connections.
    // @PRE: None.
    // @POST: envs and connections arrays are populated.
    async function fetchData() {
        try {
            const envsRes = await fetch('/api/environments');
            envs = await envsRes.json();
            connections = await getConnections();
        } catch (e) {
            addToast($t.mapper.errors.fetch_failed, 'error');
        }
    }
    // [/DEF:fetchData:Function]

    // [DEF:handleRunMapper:Function]
    // @PURPOSE: Triggers the MapperPlugin task.
    // @PRE: selectedEnv and datasetId are set; source-specific fields are valid.
    // @POST: Mapper task is started and selectedTask is updated.
    async function handleRunMapper() {
        if (!selectedEnv || !datasetId) {
            addToast($t.mapper.errors.required_fields, 'warning');
            return;
        }

        if (source === 'postgres' && (!selectedConnection || !tableName)) {
            addToast($t.mapper.errors.postgres_required, 'warning');
            return;
        }

        if (source === 'excel' && !excelPath) {
            addToast($t.mapper.errors.excel_required, 'warning');
            return;
        }

        isRunning = true;
        try {
            const env = envs.find(e => e.id === selectedEnv);
            const task = await runTask('dataset-mapper', {
                env: env.name,
                dataset_id: parseInt(datasetId),
                source,
                connection_id: selectedConnection,
                table_name: tableName,
                table_schema: tableSchema,
                excel_path: excelPath
            });
            
            selectedTask.set(task);
            addToast($t.mapper.success.started, 'success');
        } catch (e) {
            addToast(e.message, 'error');
        } finally {
            isRunning = false;
        }
    }
    // [/DEF:handleRunMapper:Function]

    onMount(fetchData);
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="space-y-6">
    <Card title={$t.mapper.title}>
        <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <Select
                        label={$t.mapper.environment}
                        bind:value={selectedEnv}
                        options={[
                            { value: '', label: $t.mapper.select_env },
                            ...envs.map(e => ({ value: e.id, label: e.name }))
                        ]}
                    />
                </div>
                <div>
                    <Input
                        label={$t.mapper.dataset_id}
                        type="number"
                        bind:value={datasetId}
                    />
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{$t.mapper.source}</label>
                <div class="flex space-x-4">
                    <label class="inline-flex items-center">
                        <input type="radio" bind:group={source} value="postgres" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" />
                        <span class="ml-2 text-sm text-gray-700">{$t.mapper.source_postgres}</span>
                    </label>
                    <label class="inline-flex items-center">
                        <input type="radio" bind:group={source} value="excel" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" />
                        <span class="ml-2 text-sm text-gray-700">{$t.mapper.source_excel}</span>
                    </label>
                </div>
            </div>

            {#if source === 'postgres'}
                <div class="space-y-4 p-4 bg-gray-50 rounded-md border border-gray-100">
                    <div>
                        <Select
                            label={$t.mapper.connection}
                            bind:value={selectedConnection}
                            options={[
                                { value: '', label: $t.mapper.select_connection },
                                ...connections.map(c => ({ value: c.id, label: c.name }))
                            ]}
                        />
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <Input
                                label={$t.mapper.table_name}
                                type="text"
                                bind:value={tableName}
                            />
                        </div>
                        <div>
                            <Input
                                label={$t.mapper.table_schema}
                                type="text"
                                bind:value={tableSchema}
                            />
                        </div>
                    </div>
                </div>
            {:else}
                <div class="p-4 bg-gray-50 rounded-md border border-gray-100">
                    <Input
                        label={$t.mapper.excel_path}
                        type="text"
                        bind:value={excelPath}
                        placeholder="/path/to/mapping.xlsx"
                    />
                </div>
            {/if}

            <div class="flex justify-end pt-2">
                <Button
                    variant="primary"
                    on:click={handleRunMapper}
                    disabled={isRunning}
                >
                    {isRunning ? $t.mapper.starting : $t.mapper.run}
                </Button>
            </div>
        </div>
    </Card>
</div>
<!-- [/SECTION] -->
<!-- [/DEF:MapperTool:Component] -->