fix(webui): make non-inspect columns play nice with index context
parent
5447be9fd3
commit
c15052656a
|
@ -1,12 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount, tick } from "svelte";
|
||||
import { createEventDispatcher, onMount, setContext, tick } from "svelte";
|
||||
import { normUrl } from "../util/history";
|
||||
|
||||
import IconButton from "./utils/IconButton.svelte";
|
||||
import { selected } from "./EntitySelect.svelte";
|
||||
import type { BrowseContext } from "../util/browse";
|
||||
import { writable } from "svelte/store";
|
||||
import { useParams } from "svelte-navigator";
|
||||
const dispatch = createEventDispatcher();
|
||||
const params = useParams();
|
||||
|
||||
export let address: string | undefined = undefined;
|
||||
export let index: number;
|
||||
export let only: boolean;
|
||||
|
||||
let detail = only;
|
||||
|
@ -14,6 +18,17 @@
|
|||
$: if (!detailChanged) detail = only;
|
||||
$: if (detailChanged) tick().then(() => dispatch("detail", detail));
|
||||
|
||||
let indexStore = writable(index);
|
||||
$: $indexStore = index;
|
||||
|
||||
let addressesStore = writable([]);
|
||||
$: $addressesStore = $params.addresses?.split(",") || [];
|
||||
|
||||
setContext("browse", {
|
||||
index: indexStore,
|
||||
addresses: addressesStore,
|
||||
} as BrowseContext);
|
||||
|
||||
onMount(() => {
|
||||
// Required to make detail mode detection work in Browse
|
||||
dispatch("detail", detail);
|
||||
|
|
|
@ -2,16 +2,15 @@
|
|||
import EntryView, { type Widget } from "./EntryView.svelte";
|
||||
import { useEntity } from "../lib/entity";
|
||||
import UpObject from "./display/UpObject.svelte";
|
||||
import { createEventDispatcher, setContext } from "svelte";
|
||||
import { derived, writable, type Readable } from "svelte/store";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { derived, type Readable } from "svelte/store";
|
||||
import type { UpEntry } from "@upnd/upend";
|
||||
import Spinner from "./utils/Spinner.svelte";
|
||||
import NotesEditor from "./utils/NotesEditor.svelte";
|
||||
import type { WidgetChange } from "../types/base";
|
||||
import type { EntityInfo } from "@upnd/upend/types";
|
||||
import IconButton from "./utils/IconButton.svelte";
|
||||
import type { BrowseContext } from "../util/browse";
|
||||
import { Link, useParams } from "svelte-navigator";
|
||||
import { Link } from "svelte-navigator";
|
||||
import BlobViewer from "./display/BlobViewer.svelte";
|
||||
import { i18n } from "../i18n";
|
||||
import EntryList from "./widgets/EntryList.svelte";
|
||||
|
@ -30,27 +29,14 @@
|
|||
const dbg = debug("kestrel:Inspect");
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const params = useParams();
|
||||
|
||||
export let address: string;
|
||||
export let index: number | undefined;
|
||||
export let detail: boolean;
|
||||
let showAsEntries = false;
|
||||
let highlightedType: string | undefined;
|
||||
|
||||
let blobHandled = false;
|
||||
|
||||
let indexStore = writable(index);
|
||||
$: $indexStore = index;
|
||||
|
||||
let addressesStore = writable([]);
|
||||
$: $addressesStore = $params.addresses?.split(",") || [];
|
||||
|
||||
setContext("browse", {
|
||||
index: indexStore,
|
||||
addresses: addressesStore,
|
||||
} as BrowseContext);
|
||||
|
||||
$: ({ entity, entityInfo, error, revalidate } = useEntity(address));
|
||||
|
||||
$: allTypes = derived(
|
||||
|
@ -364,7 +350,9 @@
|
|||
class="inspect"
|
||||
class:detail
|
||||
class:blob={blobHandled}
|
||||
data-address-multi={($entity?.attr["~IN"]?.map((e) => e.entity) || []).join(",")}
|
||||
data-address-multi={($entity?.attr["~IN"]?.map((e) => e.entity) || []).join(
|
||||
",",
|
||||
)}
|
||||
>
|
||||
<header>
|
||||
<h2>
|
||||
|
|
|
@ -55,10 +55,7 @@
|
|||
}
|
||||
|
||||
let detailMode = false;
|
||||
function onDetailChanged(
|
||||
index: number | "selected",
|
||||
ev: CustomEvent<boolean>,
|
||||
) {
|
||||
function onDetailChanged(index: number, ev: CustomEvent<boolean>) {
|
||||
if (ev.detail) {
|
||||
scrollToVisible(index);
|
||||
}
|
||||
|
@ -66,6 +63,12 @@
|
|||
}
|
||||
$: only = addresses.length === 1 && !$selected.length;
|
||||
|
||||
$: if ($selected.length && !addresses.includes("selected")) {
|
||||
let _addresses = addresses.concat();
|
||||
_addresses.push("selected");
|
||||
navigate(`/browse/${_addresses.join(",")}`);
|
||||
}
|
||||
|
||||
function addCombine(address: string) {
|
||||
let _addresses = addresses.concat();
|
||||
_addresses.push(`+${address}`);
|
||||
|
@ -84,15 +87,29 @@
|
|||
<div class="column" data-index={index}>
|
||||
{#if ["+", "-"].some((c) => address.includes(c))}
|
||||
<BrowseColumn
|
||||
{index}
|
||||
{only}
|
||||
on:close={() => close(index)}
|
||||
on:detail={(ev) => onDetailChanged(index, ev)}
|
||||
>
|
||||
<CombineColumn spec={address} on:close={() => close(index)} />
|
||||
</BrowseColumn>
|
||||
{:else if address === "selected"}
|
||||
<BrowseColumn
|
||||
{index}
|
||||
{only}
|
||||
on:close={() => {
|
||||
selected.set([]);
|
||||
close(index);
|
||||
}}
|
||||
on:detail={(ev) => onDetailChanged(index, ev)}
|
||||
>
|
||||
<SelectedColumn />
|
||||
</BrowseColumn>
|
||||
{:else}
|
||||
<BrowseColumn
|
||||
{address}
|
||||
{index}
|
||||
{only}
|
||||
on:close={() => close(index)}
|
||||
on:resolved={(ev) => onIdentified(index, ev)}
|
||||
|
@ -100,22 +117,11 @@
|
|||
on:combine={() => addCombine(address)}
|
||||
let:detail
|
||||
>
|
||||
<Inspect {address} {index} {detail} on:resolved on:close />
|
||||
<Inspect {address} {detail} on:resolved on:close />
|
||||
</BrowseColumn>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{#if $selected.length}
|
||||
<div class="column" data-index="selected">
|
||||
<BrowseColumn
|
||||
{only}
|
||||
on:close={() => selected.set([])}
|
||||
on:detail={(ev) => onDetailChanged("selected", ev)}
|
||||
>
|
||||
<SelectedColumn />
|
||||
</BrowseColumn>
|
||||
</div>
|
||||
{/if}
|
||||
{#if !detailMode}
|
||||
{#key addresses}
|
||||
<div class="column" data-index="add">
|
||||
|
|
Loading…
Reference in New Issue