[ui] first step towards multitable
This commit is contained in:
parent
6820e9a174
commit
bcfcb24ad8
1 changed files with 82 additions and 86 deletions
|
@ -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,8 +264,8 @@
|
|||
/>
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if showEntity}
|
||||
{#each displayColumns as column}
|
||||
{#if column == ENTITY_COL}
|
||||
<td class="entity">
|
||||
<UpObject
|
||||
link
|
||||
|
@ -281,18 +278,14 @@
|
|||
}}
|
||||
/>
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if showAttribute}
|
||||
{:else if column == ATTR_COL}
|
||||
<td class:formatted={Boolean(formatAttribute(entry.attribute))}>
|
||||
<Ellipsis
|
||||
value={formatAttribute(entry.attribute) || entry.attribute}
|
||||
title={entry.attribute}
|
||||
/>
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
{#if showValue}
|
||||
{:else if column == VALUE_COL}
|
||||
<td class="value">
|
||||
<Editable
|
||||
{editable}
|
||||
|
@ -326,7 +319,10 @@
|
|||
{/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 a new issue