Implement bulk edit (#101)

bookmarks/components/TagAutocomplete.svelte

@@ -4,8 +4,10 @@
     export let id;
     export let name;
     export let value;
-    export let tags;
+    export let apiClient;
+    export let variant = 'default';
 
+    let tags = [];
     let isFocus = false;
     let isOpen = false;
     let input = null;
@@ -13,6 +15,18 @@
     let suggestions = [];
     let selectedIndex = 0;
 
+    init();
+
+    async function init() {
+        // For now we cache all tags on load as the template did before
+        try {
+            tags = await apiClient.getTags({limit: 1000, offset: 0});
+            tags.sort((left, right) => left.name.toLowerCase().localeCompare(right.name.toLowerCase()))
+        } catch (e) {
+            console.warn('TagAutocomplete: Error loading tag list');
+        }
+    }
+
     function handleFocus() {
         isFocus = true;
     }
@@ -27,7 +41,9 @@
 
         const word = getCurrentWord(input);
 
-        suggestions = word ? tags.filter(tag => tag.indexOf(word) === 0) : [];
+        suggestions = word
+            ? tags.filter(tag => tag.name.toLowerCase().indexOf(word.toLowerCase()) === 0)
+            : [];
 
         if (word && suggestions.length > 0) {
             open();
@@ -70,7 +86,7 @@
     function complete(suggestion) {
         const bounds = getCurrentWordBounds(input);
         const value = input.value;
-        input.value = value.substring(0, bounds.start) + suggestion + value.substring(bounds.end);
+        input.value = value.substring(0, bounds.start) + suggestion.name + value.substring(bounds.end);
 
         close();
     }
@@ -87,11 +103,11 @@
     }
 </script>
 
-<div class="form-autocomplete">
+<div class="form-autocomplete" class:small={variant === 'small'}>
     <!-- autocomplete input container -->
     <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
         <!-- autocomplete real input box -->
-        <input id="{id}" name="{name}" value="{value ||''}"
+        <input id="{id}" name="{name}" value="{value ||''}" placeholder="&nbsp;"
                class="form-input" type="text" autocomplete="off"
                on:input={handleInput} on:keydown={handleKeyDown}
                on:focus={handleFocus} on:blur={handleBlur}>
@@ -105,7 +121,7 @@
                 <a href="#" on:mousedown|preventDefault={() => complete(tag)}>
                     <div class="tile tile-centered">
                         <div class="tile-content">
-                            {tag}
+                            {tag.name}
                         </div>
                     </div>
                 </a>
@@ -124,4 +140,17 @@
     .menu.open {
         display: block;
     }
+
+    .form-autocomplete.small .form-autocomplete-input {
+        height: 1.4rem;
+        min-height: 1.4rem;
+    }
+    .form-autocomplete.small .form-autocomplete-input input {
+        margin: 0;
+        padding: 0;
+        font-size: 0.7rem;
+    }
+    .form-autocomplete.small .menu .menu-item {
+        font-size: 0.7rem;
+    }
 </style>