Implement back navigation

ssciwr · Jul 23, 2024 · c1ca4eb · c1ca4eb
1 parent dfb7573
commit c1ca4eb
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/components/EasyDBDetailView.svelte b/src/components/EasyDBDetailView.svelte
@@ -6,6 +6,8 @@
 
   import AssetViewer from "./logic/AssetViewer.svelte";
   import RecursiveEasyDbDetailView from "./logic/RecursiveEasyDBDetailView.svelte";
+  import { A } from "flowbite-svelte";
+  import { ArrowLeftOutline } from "flowbite-svelte-icons";
 
   export let uuid = "";
   export let appLanguage = "de-DE";
@@ -17,6 +19,13 @@
   $: dataLanguagesStore.set(dataLanguages);
   $: easydbInstanceStore.set(easydbInstance);
   $: uuidStore.set([uuid]);
+
+  const l10n = {
+    "returntext": {
+      "de-DE": "Zurück zu Objekt ",
+      "en-US": "Return to object ",
+    },
+  };
 </script>
 
 {#await $easydbInstanceDataPromiseStore }
@@ -25,6 +34,12 @@
   {#await easydb_api_object($uuidStore.at(-1), mask) }
     Waiting for API response...
   {:then data }
+    {#if $uuidStore.length > 1}
+      <A on:click={() => { uuidStore.update((existing) => existing.slice(0, -1)); }}>
+        <ArrowLeftOutline class="inline-block w-6 h-6"/>
+        {l10n.returntext[$appLanguageStore]}{$uuidStore.at(-2)}
+      </A>
+    {/if}
     <AssetViewer fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
     <RecursiveEasyDbDetailView fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
   {/await}