feat: integrate SvelteKit for seamless navigation and improved data loading
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!-- [DEF:App:Component] -->
|
||||
<!--
|
||||
[DEF:App:Component]
|
||||
@SEMANTICS: main, entrypoint, layout, navigation
|
||||
@PURPOSE: The root component of the frontend application. Manages navigation and layout.
|
||||
@LAYER: UI
|
||||
@@ -7,11 +7,11 @@
|
||||
@RELATION: DEPENDS_ON -> frontend/src/pages/Settings.svelte
|
||||
@RELATION: DEPENDS_ON -> frontend/src/lib/stores.js
|
||||
|
||||
@PROPS: None
|
||||
@EVENTS: None
|
||||
@INVARIANT: Navigation state must be persisted in the currentPage store.
|
||||
-->
|
||||
<script>
|
||||
// [SECTION: IMPORTS]
|
||||
import { get } from 'svelte/store';
|
||||
import Dashboard from './pages/Dashboard.svelte';
|
||||
import Settings from './pages/Settings.svelte';
|
||||
import { selectedPlugin, selectedTask, currentPage } from './lib/stores.js';
|
||||
@@ -19,31 +19,37 @@
|
||||
import DynamicForm from './components/DynamicForm.svelte';
|
||||
import { api } from './lib/api.js';
|
||||
import Toast from './components/Toast.svelte';
|
||||
// [/SECTION]
|
||||
|
||||
// [DEF:handleFormSubmit:Function]
|
||||
// @PURPOSE: Handles form submission for task creation.
|
||||
// @PARAM: event (CustomEvent) - The submit event from DynamicForm.
|
||||
/**
|
||||
* @purpose Handles form submission for task creation.
|
||||
* @param {CustomEvent} event - The submit event from DynamicForm.
|
||||
*/
|
||||
async function handleFormSubmit(event) {
|
||||
console.log("[App.handleFormSubmit][Action] Handling form submission for task creation.");
|
||||
const params = event.detail;
|
||||
try {
|
||||
const task = await api.createTask($selectedPlugin.id, params);
|
||||
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 context={{'id': '${task.id}'}}`);
|
||||
console.log(`[App.handleFormSubmit][Coherence:OK] Task created id=${task.id}`);
|
||||
} catch (error) {
|
||||
console.error(`[App.handleFormSubmit][Coherence:Failed] Task creation failed context={{'error': '${error}'}}`);
|
||||
console.error(`[App.handleFormSubmit][Coherence:Failed] Task creation failed error=${error}`);
|
||||
}
|
||||
}
|
||||
// [/DEF:handleFormSubmit]
|
||||
|
||||
// [DEF:navigate:Function]
|
||||
// @PURPOSE: Changes the current page and resets state.
|
||||
// @PARAM: page (string) - Target page name.
|
||||
/**
|
||||
* @purpose Changes the current page and resets state.
|
||||
* @param {string} page - Target page name.
|
||||
*/
|
||||
function navigate(page) {
|
||||
console.log(`[App.navigate][Action] Navigating to ${page}.`);
|
||||
// Reset selection first
|
||||
if (page !== $currentPage) {
|
||||
if (page !== get(currentPage)) {
|
||||
selectedPlugin.set(null);
|
||||
selectedTask.set(null);
|
||||
}
|
||||
@@ -53,6 +59,7 @@
|
||||
// [/DEF:navigate]
|
||||
</script>
|
||||
|
||||
<!-- [SECTION: TEMPLATE] -->
|
||||
<Toast />
|
||||
|
||||
<main class="bg-gray-50 min-h-screen">
|
||||
@@ -101,4 +108,6 @@
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
<!-- [/SECTION] -->
|
||||
|
||||
<!-- [/DEF:App] -->
|
||||
|
||||
Reference in New Issue
Block a user