frontend: mejorar navegación

This commit is contained in:
Cat /dev/Nulo 2023-12-08 19:22:39 -03:00
parent 4f90c7c812
commit 0d9132a1f4
6 changed files with 84 additions and 16 deletions

View file

@ -15,8 +15,10 @@
else if (route === "Dump") return Dump; else if (route === "Dump") return Dump;
} }
$: component = chooseComponent($currentRoute.component) as any; $: r = {
$: params = $currentRoute.params as any; component: chooseComponent($currentRoute.component) as any,
params: $currentRoute.params as any,
};
</script> </script>
<svelte:component this={component} {params} /> <svelte:component this={r.component} params={r.params} />

View file

@ -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>

View file

@ -4,8 +4,8 @@ import { writable } from "svelte/store";
export const routes = { export const routes = {
Home: "/", Home: "/",
Dump: "/dump/:dumpUrl", Dump: "/dump/:dumpUrl",
Portal: "/portal/:portalUrl", Portal: "/dump/:dumpUrl/:portal",
Dataset: "/portal/:portalUrl/dataset/:id", Dataset: "/dump/:dumpUrl/:portal/dataset/:id",
}; };
export type ComponentType = "NotFound" | keyof typeof routes; export type ComponentType = "NotFound" | keyof typeof routes;

View file

@ -5,16 +5,19 @@
import NotFound from "./NotFound.svelte"; import NotFound from "./NotFound.svelte";
import { inject } from "regexparam"; import { inject } from "regexparam";
import { routes } from "../router"; import { routes } from "../router";
import Nav from "../nav/Nav.svelte";
export let params: { portalUrl: string; id: string }; export let params: { dumpUrl: string; portal: string; id: string };
const url = decodeURIComponent(params.portalUrl); $: 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 }), ([data, errors]) => ({ data, errors }),
); );
</script> </script>
<main class="mx-auto max-w-3xl"> <main class="mx-auto max-w-3xl">
<Nav {params} />
<div class="rounded-lg border bg-white m-2"> <div class="rounded-lg border bg-white m-2">
{#await data} {#await data}
<p class="p-6">Cargando dataset...</p> <p class="p-6">Cargando dataset...</p>
@ -27,7 +30,10 @@
<small> <small>
<a <a
class="flex text-blue-500 leading-none gap-1 items-center" 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} <ArrowBack fill="currentColor" class="h-[1.25em]" /> Viendo {data.title}
</a> </a>

View file

@ -5,9 +5,9 @@
import { routes } from "../router"; import { routes } from "../router";
export let params: { dumpUrl: string }; export let params: { dumpUrl: string };
const url = decodeURIComponent(params.dumpUrl); $: url = decodeURIComponent(params.dumpUrl);
const metadataPromise = fetchDumpMetadata(url); $: metadataPromise = fetchDumpMetadata(url);
</script> </script>
<main class="mx-auto max-w-3xl"> <main class="mx-auto max-w-3xl">
@ -43,7 +43,8 @@
<ul class="divide-y divide-gray-100"> <ul class="divide-y divide-gray-100">
{#each metadata.sites as site} {#each metadata.sites as site}
{@const portalLink = inject(routes.Portal, { {@const portalLink = inject(routes.Portal, {
portalUrl: encodeURIComponent(`${url}/${site.path}`), dumpUrl: params.dumpUrl,
portal: site.path,
})} })}
<li> <li>
<div class="flex px-6 py-5 justify-between gap-3"> <div class="flex px-6 py-5 justify-between gap-3">

View file

@ -5,11 +5,12 @@
import { fetchData, fetchErrors } from "../fetch"; import { fetchData, fetchErrors } from "../fetch";
import { routes } from "../router"; import { routes } from "../router";
import type { Dataset } from "common/schema"; import type { Dataset } from "common/schema";
import Nav from "../nav/Nav.svelte";
export let params: { portalUrl: string }; export let params: { dumpUrl: string; portal: string };
const url = decodeURIComponent(params.portalUrl); $: 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 }), ([data, errors]) => ({ data, errors }),
); );
@ -29,6 +30,8 @@
</script> </script>
<main class="mx-auto max-w-3xl"> <main class="mx-auto max-w-3xl">
<Nav {params} />
<div class="rounded-lg border bg-white m-2"> <div class="rounded-lg border bg-white m-2">
{#await data} {#await data}
<p class="p-6">Cargando..</p> <p class="p-6">Cargando..</p>
@ -70,7 +73,8 @@
<ul class="divide-y divide-gray-100"> <ul class="divide-y divide-gray-100">
{#each filterDatasets(data.dataset, query) as dataset} {#each filterDatasets(data.dataset, query) as dataset}
{@const datasetLink = inject(routes.Dataset, { {@const datasetLink = inject(routes.Dataset, {
portalUrl: params.portalUrl, dumpUrl: params.dumpUrl,
portal: params.portal,
id: dataset.identifier, id: dataset.identifier,
})} })}
<li> <li>