95 lines
3.4 KiB
Svelte
95 lines
3.4 KiB
Svelte
<!-- [DEF:ConnectionForm:Component] -->
|
|
<!--
|
|
@SEMANTICS: connection, form, settings
|
|
@PURPOSE: UI component for creating a new database connection configuration.
|
|
@LAYER: UI
|
|
@RELATION: USES -> frontend/src/services/connectionService.js
|
|
-->
|
|
<script>
|
|
// [SECTION: IMPORTS]
|
|
import { createEventDispatcher } from 'svelte';
|
|
import { createConnection } from '../../services/connectionService.js';
|
|
import { addToast } from '../../lib/toasts.js';
|
|
import { t } from '../../lib/i18n';
|
|
import { Button, Input, Card } from '../../lib/ui';
|
|
// [/SECTION]
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
let name = '';
|
|
let type = 'postgres';
|
|
let host = '';
|
|
let port = "5432";
|
|
let database = '';
|
|
let username = '';
|
|
let password = '';
|
|
let isSubmitting = false;
|
|
|
|
// [DEF:handleSubmit:Function]
|
|
// @PURPOSE: Submits the connection form to the backend.
|
|
// @PRE: All required fields (name, host, database, username, password) must be filled.
|
|
// @POST: A new connection is created via the connection service and a success event is dispatched.
|
|
async function handleSubmit() {
|
|
if (!name || !host || !database || !username || !password) {
|
|
addToast('Please fill in all required fields', 'warning');
|
|
return;
|
|
}
|
|
|
|
isSubmitting = true;
|
|
try {
|
|
const newConnection = await createConnection({
|
|
name, type, host, port: Number(port), database, username, password
|
|
});
|
|
addToast('Connection created successfully', 'success');
|
|
dispatch('success', newConnection);
|
|
resetForm();
|
|
} catch (e) {
|
|
addToast(e.message, 'error');
|
|
} finally {
|
|
isSubmitting = false;
|
|
}
|
|
}
|
|
// [/DEF:handleSubmit:Function]
|
|
|
|
// [DEF:resetForm:Function]
|
|
/* @PURPOSE: Resets the connection form fields to their default values.
|
|
@PRE: None.
|
|
@POST: All form input variables are reset.
|
|
*/
|
|
function resetForm() {
|
|
name = '';
|
|
host = '';
|
|
port = "5432";
|
|
database = '';
|
|
username = '';
|
|
password = '';
|
|
}
|
|
// [/DEF:resetForm:Function]
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<Card title={$t.connections?.add_new || "Add New Connection"}>
|
|
<form on:submit|preventDefault={handleSubmit} class="space-y-6">
|
|
<Input label={$t.connections?.name || "Connection Name"} bind:value={name} placeholder="e.g. Production DWH" />
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Input label={$t.connections?.host || "Host"} bind:value={host} placeholder="10.0.0.1" />
|
|
<Input label={$t.connections?.port || "Port"} type="number" bind:value={port} />
|
|
</div>
|
|
|
|
<Input label={$t.connections?.db_name || "Database Name"} bind:value={database} />
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Input label={$t.connections?.user || "Username"} bind:value={username} />
|
|
<Input label={$t.connections?.pass || "Password"} type="password" bind:value={password} />
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-2">
|
|
<Button type="submit" disabled={isSubmitting} isLoading={isSubmitting}>
|
|
{$t.connections?.create || "Create Connection"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
<!-- [/SECTION] -->
|
|
<!-- [/DEF:ConnectionForm:Component] --> |