[ui] fix UpEntry overflow & display attribute labels
parent
69c4527ddb
commit
ea8ccc85e4
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { UpEntry } from "upend";
|
import type { UpEntry } from "upend";
|
||||||
|
import { attributeLabels } from "../../util/labels";
|
||||||
import UpObject from "./UpObject.svelte";
|
import UpObject from "./UpObject.svelte";
|
||||||
|
|
||||||
export let entry: UpEntry;
|
export let entry: UpEntry;
|
||||||
|
@ -9,8 +10,8 @@
|
||||||
<div class="entity">
|
<div class="entity">
|
||||||
<UpObject link address={entry.entity} />
|
<UpObject link address={entry.entity} />
|
||||||
</div>
|
</div>
|
||||||
<div class="attribute">
|
<div class="attribute" title={entry.attribute}>
|
||||||
{entry.attribute}
|
{$attributeLabels[entry.attribute] || entry.attribute}
|
||||||
</div>
|
</div>
|
||||||
<div class="value value-{entry.value.t.toLowerCase()}">
|
<div class="value value-{entry.value.t.toLowerCase()}">
|
||||||
{#if entry.value.t === "Address"}
|
{#if entry.value.t === "Address"}
|
||||||
|
@ -34,6 +35,7 @@
|
||||||
& > * {
|
& > * {
|
||||||
flex: 33%;
|
flex: 33%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
import { Readable, readable } from "svelte/store";
|
import { Readable, readable } from "svelte/store";
|
||||||
import { defaultEntitySort, entityValueSort } from "../../util/sort";
|
import { defaultEntitySort, entityValueSort } from "../../util/sort";
|
||||||
import { fetchAllAttributes } from "../../lib/api";
|
import { fetchAllAttributes } from "../../lib/api";
|
||||||
|
import { attributeLabels } from "../../util/labels";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
export let columns: string | undefined = undefined;
|
export let columns: string | undefined = undefined;
|
||||||
|
@ -142,25 +143,6 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// Formatting & Display
|
// Formatting & Display
|
||||||
let ATTRIBUTE_LABELS: { [key: string]: string } = {
|
|
||||||
FILE_MIME: "MIME type",
|
|
||||||
FILE_MTIME: "Last modified",
|
|
||||||
FILE_SIZE: "File size",
|
|
||||||
ADDED: "Added at",
|
|
||||||
LAST_VISITED: "Last visited at",
|
|
||||||
LBL: "Label",
|
|
||||||
IS: "Type",
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchAllAttributes().then((attributes) => {
|
|
||||||
attributes.forEach((attribute) => {
|
|
||||||
if (attribute.labels.length) {
|
|
||||||
ATTRIBUTE_LABELS[attribute.name] = attribute.labels[0];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
ATTRIBUTE_LABELS = ATTRIBUTE_LABELS;
|
|
||||||
});
|
|
||||||
|
|
||||||
const COLUMN_LABELS: { [key: string]: string } = {
|
const COLUMN_LABELS: { [key: string]: string } = {
|
||||||
entity: "Entity",
|
entity: "Entity",
|
||||||
attribute: "Attribute",
|
attribute: "Attribute",
|
||||||
|
@ -208,7 +190,7 @@
|
||||||
<th />
|
<th />
|
||||||
{/if}
|
{/if}
|
||||||
{#each displayColumns as column}
|
{#each displayColumns as column}
|
||||||
<th>{COLUMN_LABELS[column] || ATTRIBUTE_LABELS[column] || column}</th>
|
<th>{COLUMN_LABELS[column] || $attributeLabels[column] || column}</th>
|
||||||
{/each}
|
{/each}
|
||||||
</tr>
|
</tr>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -240,11 +222,11 @@
|
||||||
{:else if column == ATTR_COL}
|
{:else if column == ATTR_COL}
|
||||||
<td
|
<td
|
||||||
class:formatted={Boolean(
|
class:formatted={Boolean(
|
||||||
Object.keys(ATTRIBUTE_LABELS).includes(entry.attribute)
|
Object.keys($attributeLabels).includes(entry.attribute)
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Ellipsis
|
<Ellipsis
|
||||||
value={ATTRIBUTE_LABELS[entry.attribute] || entry.attribute}
|
value={$attributeLabels[entry.attribute] || entry.attribute}
|
||||||
title={entry.attribute}
|
title={entry.attribute}
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { readable, Readable } from "svelte/store";
|
||||||
|
import { fetchAllAttributes } from "../lib/api";
|
||||||
|
|
||||||
|
const DEFAULT_ATTRIBUTE_LABELS = {
|
||||||
|
FILE_MIME: "MIME type",
|
||||||
|
FILE_MTIME: "Last modified",
|
||||||
|
FILE_SIZE: "File size",
|
||||||
|
ADDED: "Added at",
|
||||||
|
LAST_VISITED: "Last visited at",
|
||||||
|
LBL: "Label",
|
||||||
|
IS: "Type",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const attributeLabels: Readable<{ [key: string]: string }> = readable(
|
||||||
|
DEFAULT_ATTRIBUTE_LABELS,
|
||||||
|
(set) => {
|
||||||
|
const result = Object.assign(DEFAULT_ATTRIBUTE_LABELS);
|
||||||
|
fetchAllAttributes().then((attributes) => {
|
||||||
|
attributes.forEach((attribute) => {
|
||||||
|
if (attribute.labels.length) {
|
||||||
|
result[attribute.name] = attribute.labels.sort()[0];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
set(result);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
Loading…
Reference in New Issue