[ui] containers section in inspect
parent
d5d891f83f
commit
ce6903c43d
|
@ -10,6 +10,7 @@
|
||||||
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 { AttributeChange } from "../types/base";
|
import type { AttributeChange } from "../types/base";
|
||||||
|
import UpEntry from "./display/UpEntry.svelte";
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let index: number | undefined;
|
export let index: number | undefined;
|
||||||
|
@ -87,6 +88,17 @@
|
||||||
? untypedAttributes
|
? untypedAttributes
|
||||||
: filteredUntypedAttributes;
|
: filteredUntypedAttributes;
|
||||||
|
|
||||||
|
$: currentBacklinks =
|
||||||
|
(editable
|
||||||
|
? $entity?.backlinks
|
||||||
|
: $entity?.backlinks.filter(
|
||||||
|
(entry) => !["HAS"].includes(entry.attribute)
|
||||||
|
)) || [];
|
||||||
|
|
||||||
|
$: containers = ($entity?.backlinks || [])
|
||||||
|
.filter((e) => e.attribute === "HAS")
|
||||||
|
.map((e) => e.entity);
|
||||||
|
|
||||||
async function onChange(ev: CustomEvent<AttributeChange>) {
|
async function onChange(ev: CustomEvent<AttributeChange>) {
|
||||||
const change = ev.detail;
|
const change = ev.detail;
|
||||||
switch (change.type) {
|
switch (change.type) {
|
||||||
|
@ -126,13 +138,23 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="inspect">
|
<div class="inspect">
|
||||||
<h2>
|
<header>
|
||||||
{#if $entity}
|
<h2>
|
||||||
<UpObject banner {address} />
|
{#if $entity}
|
||||||
{:else}
|
<UpObject banner {address} />
|
||||||
<Spinner />
|
{:else}
|
||||||
{/if}
|
<Spinner />
|
||||||
</h2>
|
{/if}
|
||||||
|
</h2>
|
||||||
|
<section class="containers labelborder">
|
||||||
|
<header><h3>Containers</h3></header>
|
||||||
|
<div class="content">
|
||||||
|
{#each containers as address}
|
||||||
|
<UpObject {address} link />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</header>
|
||||||
<BlobPreview {address} />
|
<BlobPreview {address} />
|
||||||
<NotesEditor {address} {editable} on:change={onChange} />
|
<NotesEditor {address} {editable} on:change={onChange} />
|
||||||
{#if !$error}
|
{#if !$error}
|
||||||
|
@ -156,7 +178,7 @@
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if $entity?.backlinks.length > 0}
|
{#if currentBacklinks.length > 0}
|
||||||
<AttributeView
|
<AttributeView
|
||||||
title={`Referred to (${$entity.backlinks.length})`}
|
title={`Referred to (${$entity.backlinks.length})`}
|
||||||
entries={$entity.backlinks}
|
entries={$entity.backlinks}
|
||||||
|
@ -176,17 +198,24 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@use "./util";
|
||||||
|
|
||||||
.inspect {
|
.inspect {
|
||||||
flex: auto;
|
flex: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 0.5rem;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.containers {
|
||||||
|
display: flex;
|
||||||
|
margin: 0.25rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
.attributes {
|
.attributes {
|
||||||
flex: auto;
|
flex: auto;
|
||||||
height: 0; // https://stackoverflow.com/a/14964944
|
height: 0; // https://stackoverflow.com/a/14964944
|
||||||
|
|
Loading…
Reference in New Issue