[ui] objects searchable/selectable from edit box
This commit is contained in:
parent
6b5b8f4bb9
commit
fc6212855a
2 changed files with 35 additions and 2 deletions
|
@ -2,6 +2,7 @@
|
||||||
import { debounce } from "lodash";
|
import { debounce } from "lodash";
|
||||||
|
|
||||||
import type { IValue } from "upend/types";
|
import type { IValue } from "upend/types";
|
||||||
|
import { baseSearch, baseSearchOnce, getObjects } from "../../util/search";
|
||||||
import UpObject from "../display/UpObject.svelte";
|
import UpObject from "../display/UpObject.svelte";
|
||||||
import IconButton from "./IconButton.svelte";
|
import IconButton from "./IconButton.svelte";
|
||||||
import Input from "./Input.svelte";
|
import Input from "./Input.svelte";
|
||||||
|
@ -17,6 +18,11 @@
|
||||||
|
|
||||||
let options: SelectorOption[] = [];
|
let options: SelectorOption[] = [];
|
||||||
const updateOptions = debounce(async (query: string) => {
|
const updateOptions = debounce(async (query: string) => {
|
||||||
|
if (query.length == 0) {
|
||||||
|
options = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "attribute":
|
case "attribute":
|
||||||
const req = await fetch("/api/all/attributes");
|
const req = await fetch("/api/all/attributes");
|
||||||
|
@ -30,6 +36,25 @@
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case "value":
|
case "value":
|
||||||
|
const result = await baseSearchOnce(query);
|
||||||
|
const objects = await getObjects(result.entries);
|
||||||
|
|
||||||
|
options = [
|
||||||
|
{
|
||||||
|
value: {
|
||||||
|
t: "Value",
|
||||||
|
c: query,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
...objects.slice(0, 25).map(([address, label]) => {
|
||||||
|
return {
|
||||||
|
value: {
|
||||||
|
t: "Address",
|
||||||
|
c: address,
|
||||||
|
},
|
||||||
|
} as SelectorOption;
|
||||||
|
}),
|
||||||
|
];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}, 200);
|
}, 200);
|
||||||
|
@ -98,7 +123,11 @@
|
||||||
{#if option.attribute}
|
{#if option.attribute}
|
||||||
{option.attribute}
|
{option.attribute}
|
||||||
{:else if option.value}
|
{:else if option.value}
|
||||||
RESOLVING LOGIC
|
{#if option.value.t == "Address"}
|
||||||
|
<UpObject address={String(option.value.c)} />
|
||||||
|
{:else}
|
||||||
|
{option.value.c}
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -1,11 +1,15 @@
|
||||||
import type { UpEntry } from "upend";
|
import type { UpEntry } from "upend";
|
||||||
import type { ListingResult } from "upend/types";
|
import type { ListingResult } from "upend/types";
|
||||||
import { fetchEntry, query as queryFn } from "../lib/entity";
|
import { fetchEntry, query as queryFn, queryOnce } from "../lib/entity";
|
||||||
|
|
||||||
export function baseSearch(query: string) {
|
export function baseSearch(query: string) {
|
||||||
return queryFn(() => `(matches ? ? (contains "${query}"))`);
|
return queryFn(() => `(matches ? ? (contains "${query}"))`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function baseSearchOnce(query: string) {
|
||||||
|
return queryOnce(`(matches ? ? (contains "${query}"))`);
|
||||||
|
}
|
||||||
|
|
||||||
export async function getObjects(
|
export async function getObjects(
|
||||||
entries: UpEntry[]
|
entries: UpEntry[]
|
||||||
): Promise<[string, string][]> {
|
): Promise<[string, string][]> {
|
||||||
|
|
Loading…
Reference in a new issue