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