thm/upend
thm/upend
1
0
Fork 0
Code Issues 75 Pull requests Projects Releases 6 Packages Wiki Activity

[ui] first step towards multitable

Browse source
This commit is contained in:
Tomáš Mládek 2022-02-15 21:08:07 +01:00
parent 6820e9a174
commit bcfcb24ad8
No known key found for this signature in database
GPG key ID: 65E225C8B3E2ED8A
1 changed files with 82 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
webui/src/components/widgets/Table.svelte
View file

@ -21,10 +21,13 @@
export let editable = false; export let editable = false;
// Display // Display
$: columns = columns || "attribute, value"; $: displayColumns = (columns || "attribute, value")
$: showEntity = columns.includes("entity"); .split(",")
$: showAttribute = columns.includes("attribute"); .map((c) => c.trim());
$: showValue = columns.includes("value");
const ENTITY_COL = "entity";
const ATTR_COL = "attribute";
const VALUE_COL = "value";
// Editing // Editing
let newEntryAttribute = ""; let newEntryAttribute = "";
@ -199,6 +202,12 @@
IS: "Type", IS: "Type",
}; };
const COLUMN_LABELS: { [key: string]: string } = {
entity: "Entity",
attribute: "Attribute",
value: "Value",
};
const VALUE_FORMATTERS: { [key: string]: (val: string | number) => string } = const VALUE_FORMATTERS: { [key: string]: (val: string | number) => string } =
{ {
FILE_MTIME: (val) => FILE_MTIME: (val) =>
@ -227,17 +236,11 @@
<table> <table>
<colgroup> <colgroup>
{#if editable} {#if editable}
<col class="attr-action-col" /> <col class="action-col" />
{/if}
{#if showEntity}
<col class="entity-col" />
{/if}
{#if showAttribute}
<col class="attr-col" />
{/if}
{#if showValue}
<col class="val-col" />
{/if} {/if}
{#each displayColumns as column}
<col class="{column}-col" />
{/each}
</colgroup> </colgroup>
{#if header} {#if header}
@ -245,15 +248,9 @@
{#if editable} {#if editable}
<th /> <th />
{/if} {/if}
{#if showEntity} {#each displayColumns as column}
<th>Entity</th> <th>{COLUMN_LABELS[column] || ATTRIBUTE_LABELS[column] || column}</th>
{/if} {/each}
{#if showAttribute}
<th>Attribute</th>
{/if}
{#if showValue}
<th>Value</th>
{/if}
</tr> </tr>
{/if} {/if}
@ -267,66 +264,65 @@
/> />
</td> </td>
{/if} {/if}
{#each displayColumns as column}
{#if showEntity} {#if column == ENTITY_COL}
<td class="entity"> <td class="entity">
<UpObject <UpObject
link link
labels={$labelListing labels={$labelListing
?.getObject(String(entry.entity)) ?.getObject(String(entry.entity))
?.identify() || []} ?.identify() || []}
address={entry.entity} address={entry.entity}
on:resolved={(event) => { on:resolved={(event) => {
addSortKeys(entry.entity, event.detail); addSortKeys(entry.entity, event.detail);
}} }}
/> />
</td> </td>
{/if} {:else if column == ATTR_COL}
<td class:formatted={Boolean(formatAttribute(entry.attribute))}>
{#if showAttribute} <Ellipsis
<td class:formatted={Boolean(formatAttribute(entry.attribute))}> value={formatAttribute(entry.attribute) || entry.attribute}
<Ellipsis title={entry.attribute}
value={formatAttribute(entry.attribute) || entry.attribute} />
title={entry.attribute} </td>
/> {:else if column == VALUE_COL}
</td> <td class="value">
{/if} <Editable
{editable}
{#if showValue} attribute={entry.attribute}
<td class="value"> value={entry.value}
<Editable on:edit={(ev) =>
{editable} updateEntry(entry.address, entry.attribute, ev.detail)}
attribute={entry.attribute} >
value={entry.value} {#if entry.value.t === "Address"}
on:edit={(ev) => <UpObject
updateEntry(entry.address, entry.attribute, ev.detail)} link
> address={String(entry.value.c)}
{#if entry.value.t === "Address"} labels={$labelListing
<UpObject ?.getObject(String(entry.value.c))
link ?.identify() || []}
address={String(entry.value.c)} on:resolved={(event) => {
labels={$labelListing addSortKeys(String(entry.value.c), event.detail);
?.getObject(String(entry.value.c)) }}
?.identify() || []}
on:resolved={(event) => {
addSortKeys(String(entry.value.c), event.detail);
}}
/>
{:else}
<div
class:formatted={Boolean(
formatValue(entry.value.c, entry.attribute)
)}
>
<Ellipsis
value={formatValue(entry.value.c, entry.attribute) ||
String(entry.value.c)}
/> />
</div> {:else}
{/if} <div
</Editable> class:formatted={Boolean(
</td> formatValue(entry.value.c, entry.attribute)
{/if} )}
>
<Ellipsis
value={formatValue(entry.value.c, entry.attribute) ||
String(entry.value.c)}
/>
</div>
{/if}
</Editable>
</td>
{:else}
<td>?</td>
{/if}
{/each}
</tr> </tr>
{/each} {/each}
@ -335,12 +331,12 @@
<td class="attr-action"> <td class="attr-action">
<IconButton name="plus-circle" on:click={addEntry} /> <IconButton name="plus-circle" on:click={addEntry} />
</td> </td>
{#if showAttribute} {#if displayColumns.includes(ATTR_COL)}
<td> <td>
<Selector type="attribute" bind:attribute={newEntryAttribute} /> <Selector type="attribute" bind:attribute={newEntryAttribute} />
</td> </td>
{/if} {/if}
{#if showValue} {#if displayColumns.includes(VALUE_COL)}
<td> <td>
<Selector type="value" bind:value={newEntryValue} /> <Selector type="value" bind:value={newEntryValue} />
</td> </td>
@ -377,11 +373,11 @@
} }
} }
.attr-action-col { .action-col {
width: 1.5em; width: 1.5em;
} }
.attr-col { .attribute-col {
width: 33%; width: 33%;
} }
} }