[ui] sort table by resolved addresses, comments
parent
6cfb245c4f
commit
048e5652d5
|
@ -1,19 +1,20 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
import { identify, useEntity } from "../lib/entity";
|
import { identify, useEntity } from "../lib/entity";
|
||||||
|
|
||||||
import HashBadge from "./HashBadge.svelte";
|
import HashBadge from "./HashBadge.svelte";
|
||||||
|
|
||||||
import Marquee from "./Marquee.svelte";
|
import Marquee from "./Marquee.svelte";
|
||||||
import UpLink from "./UpLink.svelte";
|
import UpLink from "./UpLink.svelte";
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let link = false;
|
export let link = false;
|
||||||
export let isFile = false;
|
export let isFile = false;
|
||||||
export let resolve = true;
|
export let resolve = true;
|
||||||
|
|
||||||
let resolving = resolve;
|
let resolving = resolve;
|
||||||
|
|
||||||
// Identification
|
// Identification
|
||||||
let inferredIds = [];
|
let inferredIds: string[] = [];
|
||||||
const { attributes, backlinks } = useEntity(address, () => resolve);
|
const { attributes, backlinks } = useEntity(address, () => resolve);
|
||||||
$: {
|
$: {
|
||||||
if (resolve) {
|
if (resolve) {
|
||||||
|
@ -24,6 +25,8 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: dispatch("resolved", inferredIds);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="address" class:identified={Boolean(inferredIds)}>
|
<div class="address" class:identified={Boolean(inferredIds)}>
|
||||||
|
|
|
@ -13,12 +13,14 @@
|
||||||
export let attributes: OrderedListing;
|
export let attributes: OrderedListing;
|
||||||
export let editable = false;
|
export let editable = false;
|
||||||
|
|
||||||
let newEntryAttribute = "'";
|
// Pagination
|
||||||
let newEntryValue = "";
|
|
||||||
|
|
||||||
let currentDisplay = 999;
|
let currentDisplay = 999;
|
||||||
const MAX_DISPLAY = 50;
|
const MAX_DISPLAY = 50;
|
||||||
|
|
||||||
|
// Editing
|
||||||
|
let newEntryAttribute = "'";
|
||||||
|
let newEntryValue = "";
|
||||||
|
|
||||||
async function addEntry() {
|
async function addEntry() {
|
||||||
// this.$emit("edit", {
|
// this.$emit("edit", {
|
||||||
// type: "create",
|
// type: "create",
|
||||||
|
@ -50,8 +52,28 @@
|
||||||
// } as AttributeChange);
|
// } as AttributeChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
let resolve = [];
|
// Sorting
|
||||||
|
let resolvedValues: { [key: string]: string } = {};
|
||||||
|
$: sortedAttributes = attributes
|
||||||
|
.concat()
|
||||||
|
.sort(([aHash, _], [bHash, __]) => {
|
||||||
|
if (
|
||||||
|
resolvedValues[aHash] === undefined ||
|
||||||
|
resolvedValues[bHash] === undefined
|
||||||
|
) {
|
||||||
|
return 0;
|
||||||
|
} else {
|
||||||
|
return resolvedValues[aHash].localeCompare(resolvedValues[bHash]);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.sort(([_, aEntry], [__, bEntry]) => {
|
||||||
|
return aEntry.attribute.localeCompare(bEntry.attribute);
|
||||||
|
})
|
||||||
|
.sort(([_, aEntry], [__, bEntry]) => {
|
||||||
|
return aEntry.entity.localeCompare(bEntry.entity);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Formatting & Display
|
||||||
const ATTRIBUTE_LABELS: { [key: string]: string } = {
|
const ATTRIBUTE_LABELS: { [key: string]: string } = {
|
||||||
FILE_MIME: "MIME type",
|
FILE_MIME: "MIME type",
|
||||||
FILE_MTIME: "Last modified",
|
FILE_MTIME: "Last modified",
|
||||||
|
@ -73,6 +95,9 @@
|
||||||
return handler(value);
|
return handler(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Optimizations
|
||||||
|
let resolve = [];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
|
@ -106,7 +131,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
{#each attributes as [id, entry] (id)}
|
{#each sortedAttributes as [id, entry] (id)}
|
||||||
<tr>
|
<tr>
|
||||||
{#if editable}
|
{#if editable}
|
||||||
<td class="attr-action">
|
<td class="attr-action">
|
||||||
|
@ -140,7 +165,9 @@
|
||||||
link
|
link
|
||||||
address={entry.value.c}
|
address={entry.value.c}
|
||||||
resolve={Boolean(resolve[id]) || true}
|
resolve={Boolean(resolve[id]) || true}
|
||||||
data-id={id}
|
on:resolved={(event) => {
|
||||||
|
resolvedValues[id] = event.detail[0];
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<div
|
<div
|
||||||
|
|
Loading…
Reference in New Issue