[ui] fix UpEntry overflow & display attribute labels
This commit is contained in:
parent
69c4527ddb
commit
ea8ccc85e4
3 changed files with 35 additions and 24 deletions
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import type { UpEntry } from "upend";
|
||||
import { attributeLabels } from "../../util/labels";
|
||||
import UpObject from "./UpObject.svelte";
|
||||
|
||||
export let entry: UpEntry;
|
||||
|
@ -9,8 +10,8 @@
|
|||
<div class="entity">
|
||||
<UpObject link address={entry.entity} />
|
||||
</div>
|
||||
<div class="attribute">
|
||||
{entry.attribute}
|
||||
<div class="attribute" title={entry.attribute}>
|
||||
{$attributeLabels[entry.attribute] || entry.attribute}
|
||||
</div>
|
||||
<div class="value value-{entry.value.t.toLowerCase()}">
|
||||
{#if entry.value.t === "Address"}
|
||||
|
@ -34,6 +35,7 @@
|
|||
& > * {
|
||||
flex: 33%;
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
import { Readable, readable } from "svelte/store";
|
||||
import { defaultEntitySort, entityValueSort } from "../../util/sort";
|
||||
import { fetchAllAttributes } from "../../lib/api";
|
||||
import { attributeLabels } from "../../util/labels";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let columns: string | undefined = undefined;
|
||||
|
@ -142,25 +143,6 @@
|
|||
});
|
||||
|
||||
// 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 } = {
|
||||
entity: "Entity",
|
||||
attribute: "Attribute",
|
||||
|
@ -208,7 +190,7 @@
|
|||
<th />
|
||||
{/if}
|
||||
{#each displayColumns as column}
|
||||
<th>{COLUMN_LABELS[column] || ATTRIBUTE_LABELS[column] || column}</th>
|
||||
<th>{COLUMN_LABELS[column] || $attributeLabels[column] || column}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
|
@ -240,11 +222,11 @@
|
|||
{:else if column == ATTR_COL}
|
||||
<td
|
||||
class:formatted={Boolean(
|
||||
Object.keys(ATTRIBUTE_LABELS).includes(entry.attribute)
|
||||
Object.keys($attributeLabels).includes(entry.attribute)
|
||||
)}
|
||||
>
|
||||
<Ellipsis
|
||||
value={ATTRIBUTE_LABELS[entry.attribute] || entry.attribute}
|
||||
value={$attributeLabels[entry.attribute] || entry.attribute}
|
||||
title={entry.attribute}
|
||||
/>
|
||||
</td>
|
||||
|
|
27
webui/src/util/labels.ts
Normal file
27
webui/src/util/labels.ts
Normal file
|
@ -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 a new issue