[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;
|
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%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue