[ui] display addresses as entities in editable mode

webui/src/components/utils/Selector.svelte

@@ -2,11 +2,13 @@
   import { debounce } from "lodash";
 
   import type { IValue } from "upend/types";
+  import UpObject from "../display/UpObject.svelte";
+  import IconButton from "./IconButton.svelte";
   import Input from "./Input.svelte";
 
   export let attribute: string | undefined = undefined;
   export let value: IValue | undefined = undefined;
-  export let type: "entity" | "attribute" | "value";
+  export let type: "attribute" | "value";
 
   interface SelectorOption {
     attribute?: string;
@@ -16,8 +18,6 @@
   let options: SelectorOption[] = [];
   const updateOptions = debounce(async (query: string) => {
     switch (type) {
-      case "entity":
-        throw new Error("unimplemented");
       case "attribute":
         const req = await fetch("/api/all/attributes");
         const allAttributes: string[] = await req.json();
@@ -36,12 +36,15 @@
   $: updateOptions(inputValue);
 
   function set(option: SelectorOption) {
-    if (type == "attribute") {
-      attribute = option.attribute;
-      inputValue = option.attribute;
-    } else {
-      value = option.value;
-      inputValue = String(option.value.c); // todo;
+    switch (type) {
+      case "attribute":
+        attribute = option.attribute;
+        inputValue = option.attribute;
+        break;
+      case "value":
+        value = option.value;
+        inputValue = String(option.value.c);
+        break;
     }
     visible = false;
   }
@@ -70,11 +73,20 @@
 </script>
 
 <div class="selector">
-  <Input
-    bind:value={inputValue}
-    on:input={onInput}
-    on:focusChange={(ev) => (inputFocused = ev.detail)}
-  />
+  {#if value?.t == "Address" && inputValue}
+    <div class="input">
+      <div class="label">
+        <UpObject address={String(value.c)} />
+      </div>
+      <IconButton name="trash" on:click={() => (inputValue = "")} />
+    </div>
+  {:else}
+    <Input
+      bind:value={inputValue}
+      on:input={onInput}
+      on:focusChange={(ev) => (inputFocused = ev.detail)}
+    />
+  {/if}
   <ul
     class="options"
     class:visible
@@ -98,6 +110,15 @@
     position: relative;
   }
 
+  .input {
+    display: flex;
+    min-width: 0;
+    .label {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
   .options {
     position: absolute;
     list-style: none;