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