Remove splash screen & add operations crud

Orbitale · Jan 19, 2024 · 9f32305 · 9f32305
1 parent c6e1f04
commit 9f32305
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 220 deletions.
diff --git a/src/app.html b/src/app.html
@@ -6,25 +6,9 @@
 		<link rel="icon" href="%sveltekit.assets%/logo.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		<link rel="stylesheet" id="splash_screen_style" href="%sveltekit.assets%/splash.css" />
-
 		%sveltekit.head%
 	</head>
 	<body>
-		<main id="splash_screen">
-			<img
-				id="orbitale_logo"
-				class="animate-rotation"
-				src="%sveltekit.assets%/logo.png"
-				alt="Orbitale logo"
-			/>
-			<div id="splash_messages"></div>
-		</main>
-
-		<main id="app" style="display: none">%sveltekit.body%</main>
-
-		<script>
-			console.info('Loaded base page.');
-		</script>
+		<main id="app">%sveltekit.body%</main>
 	</body>
 </html>
diff --git a/src/lib/admin/src/FilterWithValue.ts b/src/lib/admin/src/FilterWithValue.ts
@@ -16,7 +16,7 @@ export default class FilterWithValue {
 		return new FilterWithValue(filter.name, filter.type, value);
 	}
 
-	public static fromSerialized(filter: object): FilterWithValue {
+	public static fromSerialized(filter: Partial<FilterWithValue>): FilterWithValue {
 		if (!filter.name || !filter.type || !filter.value) {
 			console.error('Serialized filter is incomplete', filter);
 

diff --git a/src/lib/crud/Dashboard.ts b/src/lib/crud/Dashboard.ts
@@ -1,11 +1,12 @@
+import { DashboardDefinition, UrlAction } from '@orbitale/svelte-admin';
 import Home from 'carbon-icons-svelte/lib/Home.svelte';
 
-import { DashboardDefinition, UrlAction } from '@orbitale/svelte-admin';
+import OperationCrud from '$lib/crud/cruds/OperationCrud';
 
 export const dashboard = new DashboardDefinition({
     adminConfig: {
         defaultLocale: 'en',
-        rootUrl: '/',
+        rootUrl: '/crud/',
         head: {
             brandName: 'Compotes',
             appName: ''
@@ -15,13 +16,15 @@ export const dashboard = new DashboardDefinition({
     sideMenu: [
         new UrlAction('Homepage', '/', Home),
         new UrlAction('Analytics', '/analytics'),
-        new UrlAction('Operations', '/operations'),
-        new UrlAction('Tag rules', '/tag-rules'),
-        new UrlAction('Tags', '/tags'),
-        new UrlAction('Triage', '/triage'),
-        new UrlAction('Bank accounts', '/bank-accounts'),
+        new UrlAction('Operations', '/crud/operations/list'),
+        new UrlAction('Tag rules', '/crud/tag-rules/list'),
+        new UrlAction('Tags', '/crud/tags/list'),
+        new UrlAction('Triage', '/crud/triage/list'),
+        new UrlAction('Bank accounts', '/crud/bank-accounts/list'),
         new UrlAction('Import', '/import'),
     ],
 
-    cruds: []
+    cruds: [
+        OperationCrud,
+    ]
 });
diff --git a/src/lib/crud/cruds/OperationCrud.ts b/src/lib/crud/cruds/OperationCrud.ts
@@ -0,0 +1,76 @@
+import {
+    CallbackStateProcessor,
+    CallbackStateProvider, CheckboxField,
+    CrudDefinition, DateField,
+    List,
+    NumberField,
+    PaginatedResults,
+    TextField,
+    UrlAction,
+    View
+} from "@orbitale/svelte-admin";
+import type {CrudOperation} from "@orbitale/svelte-admin/dist/Crud/Operations";
+import type {RequestParameters} from "@orbitale/svelte-admin/dist/request";
+import {getOperationById, getOperations, getOperationsCount} from "$lib/db/operations";
+import type Operation from "$lib/entities/Operation";
+
+export default new CrudDefinition<Operation>('operations', {
+    defaultOperationName: "list",
+    label: {plural: "Operations", singular: "Operation"},
+    // minStateLoadingTimeMs: 0,
+
+    operations: [
+        new List(
+            [
+                new DateField('operation_date', 'Date'),
+                new TextField('op_type', 'Type 1'),
+                new TextField('type_display', 'Type 2'),
+                new TextField('details', 'Details'),
+                new TextField('tags', 'Tags'),
+                new NumberField('amount', 'Montant'),
+            ],
+            [
+                new UrlAction('View', '/crud/operations/view'),
+            ],
+            {
+            pagination: {
+                enabled: true,
+                itemsPerPage: 20,
+            }
+        }),
+        new View([
+            new TextField('id', 'ID'),
+            new DateField('operation_date', 'Date'),
+            new TextField('op_type', 'Type 1'),
+            new TextField('type_display', 'Type 2'),
+            new TextField('details', 'Details'),
+            new NumberField('amount_in_cents', 'Montant (in cents)'),
+            new NumberField('amount', 'Montant'),
+            new NumberField('hash', 'Hash'),
+            new TextField('state', 'State'),
+            new TextField('bank_account', 'Bank account'),
+            new TextField('tags', 'Tags'),
+            new CheckboxField('ignored_from_charts', 'Is ignored from charts'),
+        ]),
+    ],
+
+    stateProvider: new CallbackStateProvider<Operation>(async (operation: CrudOperation, requestParameters: RequestParameters) => {
+        if (typeof window === 'undefined') {
+            // SSR, can't call Tauri API then.
+            return Promise.resolve([]);
+        }
+
+        if (operation.name === 'list') {
+            const results = await getOperations(requestParameters.page||1);
+            const numberOfItems = await getOperationsCount(null);
+            return Promise.resolve(new PaginatedResults(requestParameters.page, numberOfItems / operation.options.pagination.itemsPerPage, numberOfItems, results));
+        }
+
+        if (operation.name === 'view' || operation.name === 'edit') {
+            return getOperationById(requestParameters.id);
+        }
+
+        return Promise.resolve(null);
+    }),
+    stateProcessor: new CallbackStateProcessor<Operation>(() => {})
+});
diff --git a/src/lib/db/operations.ts b/src/lib/db/operations.ts
@@ -36,7 +36,7 @@ export async function getOperations(
 	sortableField: SortableField | null = null,
 	filters: Array<FilterWithValue> | null = null
 ): Promise<Array<Operation>> {
-	const params = { page };
+	const params: {[key: string]: number|string|Array<FilterWithValue>} = { page };
 
 	if (sortableField) {
 		params['orderField'] = sortableField.property_name;
@@ -160,6 +160,11 @@ async function normalizeOperationFromDeserialized(
 	deserialized_operation: DeserializedOperation
 ): Promise<Operation> {
 	const bank_account = await getBankAccountById(deserialized_operation.bank_account_id);
+
+	if (!bank_account) {
+		throw new Error(`Backend could not find bank account with id "${deserialized_operation.bank_account_id}".`);
+	}
+
 	const tags = await getTagsByIds(deserialized_operation.tags_ids);
 
 	return new Operation(

diff --git a/src/lib/utils/configure_app.ts b/src/lib/utils/configure_app.ts
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
@@ -1,24 +1,5 @@
 <script lang="ts">
-    import {onMount} from "svelte";
     import {dashboard} from "$lib/crud/Dashboard";
-
-    onMount(() => {
-        const app = document.getElementById('app');
-
-        if (!app) throw new Error('No app element displayed: did you forget to check the main layout and "app.html" files?');
-
-        app.style.display = '';
-
-        const splash_screen = document.getElementById('splash_screen');
-        if (splash_screen) {
-
-            setTimeout(function () {
-                splash_screen.style.opacity = '0';
-                splash_screen.style.display = 'none';
-                splash_screen.style.visibility = 'hidden';
-            }, 400);
-        }
-    });
 </script>
 
 <svelte:component this="{dashboard.adminConfig.theme.dashboard}" {dashboard}>

diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
@@ -8,7 +8,7 @@
 	<ul>
 		{#each dashboard.cruds as crud}
 			<li>
-				<a href="/{crud.name}/{crud.options.defaultOperationName}">
+				<a href="/crud/{crud.name}/{crud.options.defaultOperationName}">
 					{crud.options.label.plural}
 				</a>
 			</li>

diff --git a/...admin)/[crud]/[operation]/+page.server.ts → ...)/crud/[crud]/[operation]/+page.server.ts b/...admin)/[crud]/[operation]/+page.server.ts → ...)/crud/[crud]/[operation]/+page.server.ts
diff --git a/...lteadmin)/[crud]/[operation]/+page.svelte → ...min)/crud/[crud]/[operation]/+page.svelte b/...lteadmin)/[crud]/[operation]/+page.svelte → ...min)/crud/[crud]/[operation]/+page.svelte
@@ -10,6 +10,8 @@
 	$: requestParameters = getRequestParams($page, browser);
 </script>
 
+<pre style="position: fixed;bottom: 1rem; right: 1rem;z-index: 999">URL: {$page.url}</pre>
+
 {#key $page}
 <svelte:component
 	this="{dashboard.adminConfig.theme.dashboard}"

diff --git a/static/splash.css b/static/splash.css
diff --git a/vite.config.ts b/vite.config.ts
@@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server: {
+		hmr: false,
+	},
 });