diff --git a/webui/src/components/EntryView.svelte b/webui/src/components/EntryView.svelte index 0502fe8..fc04ded 100644 --- a/webui/src/components/EntryView.svelte +++ b/webui/src/components/EntryView.svelte @@ -7,7 +7,10 @@ export interface Widget { name: string; icon?: string; - components: (entries: UpEntry[]) => Array; + components: (input: { + entries: UpEntry[]; + group?: string; + }) => Array; } @@ -66,7 +69,7 @@ $: { components = availableWidgets .find((w) => w.name === currentWidget) - .components(entries); + .components({ entries, group }); } diff --git a/webui/src/components/Inspect.svelte b/webui/src/components/Inspect.svelte index 7b0af20..209ad1c 100644 --- a/webui/src/components/Inspect.svelte +++ b/webui/src/components/Inspect.svelte @@ -234,7 +234,7 @@ { name: "List", icon: "list-check", - components: (entries) => [ + components: ({ entries }) => [ { component: EntryList, props: { @@ -250,12 +250,13 @@ { name: "List", icon: "list-check", - components: (entries) => [ + components: ({ entries, group }) => [ { component: EntryList, props: { entries, columns: "attribute, value", + attributes: $allTypes[group]?.attributes || [], }, }, ], @@ -263,7 +264,7 @@ { name: "Gallery", icon: "image", - components: (entries) => [ + components: ({ entries }) => [ { component: Gallery, props: { @@ -281,7 +282,7 @@ { name: "List", icon: "list-check", - components: (entries) => [ + components: ({ entries }) => [ { component: Gallery, props: { @@ -294,7 +295,7 @@ { name: "Gallery", icon: "image", - components: (entries) => [ + components: ({ entries }) => [ { component: Gallery, props: { diff --git a/webui/src/components/widgets/EntryList.svelte b/webui/src/components/widgets/EntryList.svelte index 217ea1c..8a91324 100644 --- a/webui/src/components/widgets/EntryList.svelte +++ b/webui/src/components/widgets/EntryList.svelte @@ -18,6 +18,9 @@ import { i18n } from "../../i18n"; import UpLink from "../display/UpLink.svelte"; import { ATTR_ADDED, ATTR_LABEL } from "upend/constants"; + import api from "../../lib/api"; + import { AddressComponents } from "upend/api"; + import Icon from "../utils/Icon.svelte"; const dispatch = createEventDispatcher(); export let columns: string | undefined = undefined; @@ -27,6 +30,7 @@ export let columnWidths: string[] | undefined = undefined; export let entries: UpEntry[]; + export let attributes: string[] = []; export let editable = false; export let attributeOptions: string[] | undefined = undefined; @@ -209,6 +213,20 @@ return String(value); } } + + // Unused attributes + let unusedAttributes = []; + + $: (async () => { + unusedAttributes = await Promise.all( + attributes + .filter((attr) => !entries.some((entry) => entry.attribute === attr)) + .map(async (attribute) => { + const components = new AddressComponents("Attribute", attribute); + return await api.componentsToAddress(components); + }), + ); + })();
@@ -337,7 +355,30 @@ {/each} - {#if editable} + {#each unusedAttributes as attributeAddress} + + {#if editable} + + {/if} + {#each displayColumns as column} + {#if column == ATTR_COL} + + + + {:else if column == VALUE_COL} + {#if editable} + + {:else} + {$i18n.t("(unset)")} + {/if} + {:else} + + {/if} + {/each} + + {/each} + + {#if editable && !attributes.length} @@ -402,5 +443,10 @@ .attribute-col { width: 33%; } + + .unset { + opacity: 0.66; + pointer-events: none; + } } diff --git a/webui/src/views/Home.svelte b/webui/src/views/Home.svelte index 14dc2f9..89144b5 100644 --- a/webui/src/views/Home.svelte +++ b/webui/src/views/Home.svelte @@ -92,7 +92,7 @@ { name: "List", icon: "list-ul", - components: (entries) => [ + components: ({ entries }) => [ { component: EntryList, props: { @@ -108,7 +108,7 @@ { name: "Gallery", icon: "image", - components: (entries) => [ + components: ({ entries }) => [ { component: Gallery, props: { @@ -124,7 +124,7 @@ { name: "List", icon: "list-ul", - components: (entries) => [ + components: ({ entries }) => [ { component: EntryList, props: { @@ -140,7 +140,7 @@ { name: "Gallery", icon: "image", - components: (entries) => [ + components: ({ entries }) => [ { component: Gallery, props: { diff --git a/webui/src/views/Search.svelte b/webui/src/views/Search.svelte index 232f422..31d7f6e 100644 --- a/webui/src/views/Search.svelte +++ b/webui/src/views/Search.svelte @@ -37,7 +37,7 @@ } $: objects = ($result?.entries || []).filter( - (e) => e.attribute === ATTR_LABEL + (e) => e.attribute === ATTR_LABEL, ); $: sortedObjects = matchSorter(objects, debouncedQuery, { keys: ["value.c"], @@ -51,7 +51,7 @@ .then((labelListing) => { exactHits = labelListing.entries .filter( - (e) => String(e.value.c).toLowerCase() === query.toLowerCase() + (e) => String(e.value.c).toLowerCase() === query.toLowerCase(), ) .map((e) => e.entity); }); @@ -68,7 +68,7 @@ { name: "List", icon: "list-ul", - components: (entries) => [ + components: ({ entries }) => [ { component: Gallery, props: { @@ -82,7 +82,7 @@ { name: "Gallery", icon: "image", - components: (entries) => [ + components: ({ entries }) => [ { component: Gallery, props: {