[ui] create objects from selector directly
parent
92c89a8f6b
commit
90cae6661f
|
@ -2,7 +2,11 @@
|
||||||
import { debounce } from "lodash";
|
import { debounce } from "lodash";
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
import type { IValue } from "upend/types";
|
import type { IValue } from "upend/types";
|
||||||
import { baseSearchOnce, getObjects } from "../../util/search";
|
import {
|
||||||
|
baseSearchOnce,
|
||||||
|
createLabelled,
|
||||||
|
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";
|
||||||
|
@ -35,6 +39,7 @@
|
||||||
interface SelectorOption {
|
interface SelectorOption {
|
||||||
attribute?: string;
|
attribute?: string;
|
||||||
value?: IValue;
|
value?: IValue;
|
||||||
|
labelToCreate?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
let options: SelectorOption[] = [];
|
let options: SelectorOption[] = [];
|
||||||
|
@ -82,15 +87,41 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
options.push(
|
let exactHits = Object.entries(addressToLabels)
|
||||||
...objects.slice(0, 25).map(([address, _]) => {
|
.filter(([_, labels]) =>
|
||||||
return {
|
labels
|
||||||
|
.map((l) => l.toLowerCase())
|
||||||
|
.includes(inputValue.toLowerCase())
|
||||||
|
)
|
||||||
|
.map(([addr, _]) => addr);
|
||||||
|
|
||||||
|
if (exactHits.length) {
|
||||||
|
exactHits.forEach((addr) =>
|
||||||
|
options.push({
|
||||||
value: {
|
value: {
|
||||||
t: "Address",
|
t: "Address",
|
||||||
c: address,
|
c: addr,
|
||||||
},
|
},
|
||||||
} as SelectorOption;
|
})
|
||||||
})
|
);
|
||||||
|
} else {
|
||||||
|
options.push({
|
||||||
|
labelToCreate: inputValue,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
options.push(
|
||||||
|
...objects
|
||||||
|
.filter(([addr, _]) => !exactHits.includes(addr))
|
||||||
|
.slice(0, 25)
|
||||||
|
.map(([address, _]) => {
|
||||||
|
return {
|
||||||
|
value: {
|
||||||
|
t: "Address",
|
||||||
|
c: address,
|
||||||
|
},
|
||||||
|
} as SelectorOption;
|
||||||
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
options = options;
|
options = options;
|
||||||
|
@ -98,9 +129,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, 200);
|
}, 200);
|
||||||
$: updateOptions(inputValue);
|
$: {
|
||||||
|
updateOptions(inputValue);
|
||||||
|
addressToLabels = {};
|
||||||
|
}
|
||||||
|
|
||||||
function set(option: SelectorOption) {
|
let addressToLabels: { [key: string]: string[] } = {};
|
||||||
|
function onAddressResolved(address: string, ev: CustomEvent<string[]>) {
|
||||||
|
addressToLabels[address] = ev.detail;
|
||||||
|
updateOptions(inputValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function set(option: SelectorOption) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "attribute":
|
case "attribute":
|
||||||
attribute = option.attribute;
|
attribute = option.attribute;
|
||||||
|
@ -108,8 +148,17 @@
|
||||||
break;
|
break;
|
||||||
case "value":
|
case "value":
|
||||||
case "entity":
|
case "entity":
|
||||||
value = option.value;
|
if (!option.labelToCreate) {
|
||||||
inputValue = String(option.value.c);
|
value = option.value;
|
||||||
|
inputValue = String(option.value.c);
|
||||||
|
} else {
|
||||||
|
const addr = await createLabelled(option.labelToCreate);
|
||||||
|
value = {
|
||||||
|
t: "Address",
|
||||||
|
c: addr,
|
||||||
|
};
|
||||||
|
inputValue = addr;
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
dispatch("input", value);
|
dispatch("input", value);
|
||||||
|
@ -149,11 +198,18 @@
|
||||||
{option.attribute}
|
{option.attribute}
|
||||||
{:else if option.value}
|
{:else if option.value}
|
||||||
{#if option.value.t == "Address"}
|
{#if option.value.t == "Address"}
|
||||||
<UpObject address={String(option.value.c)} />
|
<UpObject
|
||||||
|
address={String(option.value.c)}
|
||||||
|
on:resolved={(ev) =>
|
||||||
|
onAddressResolved(String(option.value.c), ev)}
|
||||||
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="type">{option.value.t}</div>
|
<div class="type">{option.value.t}</div>
|
||||||
<div class="content">{option.value.c}</div>
|
<div class="content">{option.value.c}</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
{:else if option.labelToCreate}
|
||||||
|
<div class="type">Create object</div>
|
||||||
|
<div class="content">{option.labelToCreate}</div>
|
||||||
{/if}
|
{/if}
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
Loading…
Reference in New Issue