Files
ss-tools/frontend/src/routes/+page.svelte

102 lines
3.8 KiB
Svelte

<script>
import { plugins as pluginsStore, selectedPlugin, selectedTask } from '../lib/stores.js';
import TaskRunner from '../components/TaskRunner.svelte';
import DynamicForm from '../components/DynamicForm.svelte';
import { api } from '../lib/api.js';
import { get } from 'svelte/store';
import { goto } from '$app/navigation';
import { t } from '$lib/i18n';
import { Button, Card, PageHeader } from '$lib/ui';
/** @type {import('./$types').PageData} */
export let data;
// Sync store with loaded data if needed, or just use data.plugins directly
$: if (data.plugins) {
pluginsStore.set(data.plugins);
}
// [DEF:selectPlugin:Function]
/* @PURPOSE: Handles plugin selection and navigation.
@PRE: plugin object must be provided.
@POST: Navigates to migration or sets selectedPlugin store.
*/
function selectPlugin(plugin) {
console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
if (plugin.id === 'superset-migration') {
goto('/migration');
} else if (plugin.id === 'git-integration') {
goto('/git');
} else {
selectedPlugin.set(plugin);
}
}
// [/DEF:selectPlugin:Function]
// [DEF:handleFormSubmit:Function]
/* @PURPOSE: Handles task creation from dynamic form submission.
@PRE: event.detail must contain task parameters.
@POST: Task is created via API and selectedTask store is updated.
*/
async function handleFormSubmit(event) {
console.log("[App.handleFormSubmit][Action] Handling form submission for task creation.");
const params = event.detail;
try {
const plugin = get(selectedPlugin);
const task = await api.createTask(plugin.id, params);
selectedTask.set(task);
selectedPlugin.set(null);
console.log(`[App.handleFormSubmit][Coherence:OK] Task created id=${task.id}`);
} catch (error) {
console.error(`[App.handleFormSubmit][Coherence:Failed] Task creation failed error=${error}`);
}
}
// [/DEF:handleFormSubmit:Function]
</script>
<div class="container mx-auto p-4">
{#if $selectedTask}
<TaskRunner />
<div class="mt-4">
<Button variant="primary" on:click={() => selectedTask.set(null)}>
{$t.common.cancel}
</Button>
</div>
{:else if $selectedPlugin}
<PageHeader title={$selectedPlugin.name} />
<Card>
<DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
</Card>
<div class="mt-4">
<Button variant="secondary" on:click={() => selectedPlugin.set(null)}>
{$t.common.cancel}
</Button>
</div>
{:else}
<PageHeader title={$t.nav.dashboard} />
{#if data.error}
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
{data.error}
</div>
{/if}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{#each data.plugins as plugin}
<div
on:click={() => selectPlugin(plugin)}
role="button"
tabindex="0"
on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
class="cursor-pointer transition-transform hover:scale-[1.02]"
>
<Card title={plugin.name}>
<p class="text-gray-600 mb-4">{plugin.description}</p>
<span class="text-xs font-mono text-gray-400 bg-gray-50 px-2 py-1 rounded">v{plugin.version}</span>
</Card>
</div>
{/each}
</div>
{/if}
</div>