From 0d9132a1f4d398b9cbb8c3b5160a90658bc3815a Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Fri, 8 Dec 2023 19:22:39 -0300
Subject: [PATCH] =?UTF-8?q?frontend:=20mejorar=20navegaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.svelte                |  8 ++--
 frontend/src/lib/nav/Nav.svelte        | 55 ++++++++++++++++++++++++++
 frontend/src/lib/router.ts             |  4 +-
 frontend/src/lib/routes/Dataset.svelte | 14 +++++--
 frontend/src/lib/routes/Dump.svelte    |  7 ++--
 frontend/src/lib/routes/Portal.svelte  | 12 ++++--
 6 files changed, 84 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/lib/nav/Nav.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 1edf305..8be0f0d 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -15,8 +15,10 @@
     else if (route === "Dump") return Dump;
   }
 
-  $: component = chooseComponent($currentRoute.component) as any;
-  $: params = $currentRoute.params as any;
+  $: r = {
+    component: chooseComponent($currentRoute.component) as any,
+    params: $currentRoute.params as any,
+  };
 </script>
 
-<svelte:component this={component} {params} />
+<svelte:component this={r.component} params={r.params} />
diff --git a/frontend/src/lib/nav/Nav.svelte b/frontend/src/lib/nav/Nav.svelte
new file mode 100644
index 0000000..d11b345
--- /dev/null
+++ b/frontend/src/lib/nav/Nav.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { inject } from "regexparam";
+  import ChevronRight from "eva-icons/outline/svg/chevron-right-outline.svg?component";
+  import { routes } from "../router";
+  import Portal from "../routes/Portal.svelte";
+
+  export let params:
+    | { dumpUrl: string }
+    | { dumpUrl: string; portal: string }
+    | { dumpUrl: string; portal: string; id: string };
+
+  function generateDumpName(dumpUrl: string) {
+    const clean = decodeURIComponent(dumpUrl).replace(/\/+$/, "");
+    return clean.slice(clean.lastIndexOf("/") + 1);
+  }
+
+  $: dumpName = generateDumpName(params.dumpUrl);
+</script>
+
+<nav class="flex justify-between m-2">
+  <ol
+    class="flex items-center mb-3 text-sm text-neutral-500 [&_.active-breadcrumb]:text-neutral-600 [&_.active-breadcrumb]:font-medium sm:mb-0"
+  >
+    <li class="flex items-center h-full">
+      <a
+        href={inject(routes.Dump, params)}
+        class="inline-flex items-center px-2 py-1.5 space-x-1.5 rounded-md hover:text-neutral-900 hover:bg-neutral-100"
+      >
+        <span>{dumpName}</span>
+      </a>
+    </li>
+    {#if "portal" in params}
+      <ChevronRight class="w-5 h-5 text-gray-400" fill="currentColor" />
+      <li>
+        <a
+          href={inject(routes.Portal, params)}
+          class="inline-flex items-center px-2 py-1.5 space-x-1.5 font-normal rounded-md hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none"
+        >
+          <span>{params.portal}</span>
+        </a>
+      </li>
+    {/if}
+    {#if "id" in params}
+      <ChevronRight class="w-5 h-5 text-gray-400" fill="currentColor" />
+      <li>
+        <a
+          href={inject(routes.Dataset, params)}
+          class="inline-flex items-center px-2 py-1.5 space-x-1.5 font-normal rounded-md hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none"
+        >
+          <span>{params.id}</span>
+        </a>
+      </li>
+    {/if}
+  </ol>
+</nav>
diff --git a/frontend/src/lib/router.ts b/frontend/src/lib/router.ts
index 92af540..1f7db14 100644
--- a/frontend/src/lib/router.ts
+++ b/frontend/src/lib/router.ts
@@ -4,8 +4,8 @@ import { writable } from "svelte/store";
 export const routes = {
   Home: "/",
   Dump: "/dump/:dumpUrl",
-  Portal: "/portal/:portalUrl",
-  Dataset: "/portal/:portalUrl/dataset/:id",
+  Portal: "/dump/:dumpUrl/:portal",
+  Dataset: "/dump/:dumpUrl/:portal/dataset/:id",
 };
 
 export type ComponentType = "NotFound" | keyof typeof routes;
diff --git a/frontend/src/lib/routes/Dataset.svelte b/frontend/src/lib/routes/Dataset.svelte
index bf1716d..cc70129 100644
--- a/frontend/src/lib/routes/Dataset.svelte
+++ b/frontend/src/lib/routes/Dataset.svelte
@@ -5,16 +5,19 @@
   import NotFound from "./NotFound.svelte";
   import { inject } from "regexparam";
   import { routes } from "../router";
+  import Nav from "../nav/Nav.svelte";
 
-  export let params: { portalUrl: string; id: string };
-  const url = decodeURIComponent(params.portalUrl);
+  export let params: { dumpUrl: string; portal: string; id: string };
+  $: url = decodeURIComponent(params.dumpUrl) + "/" + params.portal;
 
-  const data = Promise.all([fetchData(url), fetchErrors(url)]).then(
+  $: data = Promise.all([fetchData(url), fetchErrors(url)]).then(
     ([data, errors]) => ({ data, errors }),
   );
 </script>
 
 <main class="mx-auto max-w-3xl">
+  <Nav {params} />
+
   <div class="rounded-lg border bg-white m-2">
     {#await data}
       <p class="p-6">Cargando dataset...</p>
@@ -27,7 +30,10 @@
           <small>
             <a
               class="flex text-blue-500 leading-none gap-1 items-center"
-              href={inject(routes.Portal, { portalUrl: params.portalUrl })}
+              href={inject(routes.Portal, {
+                dumpUrl: params.dumpUrl,
+                portal: params.portal,
+              })}
             >
               <ArrowBack fill="currentColor" class="h-[1.25em]" /> Viendo {data.title}
             </a>
diff --git a/frontend/src/lib/routes/Dump.svelte b/frontend/src/lib/routes/Dump.svelte
index 14f734d..c078596 100644
--- a/frontend/src/lib/routes/Dump.svelte
+++ b/frontend/src/lib/routes/Dump.svelte
@@ -5,9 +5,9 @@
   import { routes } from "../router";
 
   export let params: { dumpUrl: string };
-  const url = decodeURIComponent(params.dumpUrl);
+  $: url = decodeURIComponent(params.dumpUrl);
 
-  const metadataPromise = fetchDumpMetadata(url);
+  $: metadataPromise = fetchDumpMetadata(url);
 </script>
 
 <main class="mx-auto max-w-3xl">
@@ -43,7 +43,8 @@
       <ul class="divide-y divide-gray-100">
         {#each metadata.sites as site}
           {@const portalLink = inject(routes.Portal, {
-            portalUrl: encodeURIComponent(`${url}/${site.path}`),
+            dumpUrl: params.dumpUrl,
+            portal: site.path,
           })}
           <li>
             <div class="flex px-6 py-5 justify-between gap-3">
diff --git a/frontend/src/lib/routes/Portal.svelte b/frontend/src/lib/routes/Portal.svelte
index 4578fc0..8a558b0 100644
--- a/frontend/src/lib/routes/Portal.svelte
+++ b/frontend/src/lib/routes/Portal.svelte
@@ -5,11 +5,12 @@
   import { fetchData, fetchErrors } from "../fetch";
   import { routes } from "../router";
   import type { Dataset } from "common/schema";
+  import Nav from "../nav/Nav.svelte";
 
-  export let params: { portalUrl: string };
-  const url = decodeURIComponent(params.portalUrl);
+  export let params: { dumpUrl: string; portal: string };
+  $: url = `${decodeURIComponent(params.dumpUrl)}/${params.portal}`;
 
-  const data = Promise.all([fetchData(url), fetchErrors(url)]).then(
+  $: data = Promise.all([fetchData(url), fetchErrors(url)]).then(
     ([data, errors]) => ({ data, errors }),
   );
 
@@ -29,6 +30,8 @@
 </script>
 
 <main class="mx-auto max-w-3xl">
+  <Nav {params} />
+
   <div class="rounded-lg border bg-white m-2">
     {#await data}
       <p class="p-6">Cargando..</p>
@@ -70,7 +73,8 @@
       <ul class="divide-y divide-gray-100">
         {#each filterDatasets(data.dataset, query) as dataset}
           {@const datasetLink = inject(routes.Dataset, {
-            portalUrl: params.portalUrl,
+            dumpUrl: params.dumpUrl,
+            portal: params.portal,
             id: dataset.identifier,
           })}
           <li>