add folders structure

app/javascript/application.js

@@ -16,6 +16,7 @@ import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
 import AutoresizeTextarea from './elements/autoresize_textarea'
 import SubmittersAutocomplete from './elements/submitter_autocomplete'
+import FolderAutocomplete from './elements/folder_autocomplete'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -45,6 +46,7 @@ window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
 window.customElements.define('autoresize-textarea', AutoresizeTextarea)
 window.customElements.define('submitters-autocomplete', SubmittersAutocomplete)
+window.customElements.define('folder-autocomplete', FolderAutocomplete)
 
 document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestBody)
 document.addEventListener('turbo:submit-end', async (event) => {

app/javascript/elements/folder_autocomplete.js

@@ -0,0 +1,43 @@
+import autocomplete from 'autocompleter'
+
+export default class extends HTMLElement {
+  connectedCallback () {
+    autocomplete({
+      input: this.input,
+      preventSubmit: this.dataset.submitOnSelect === 'true' ? 0 : 1,
+      minLength: 0,
+      showOnFocus: true,
+      onSelect: this.onSelect,
+      render: this.render,
+      fetch: this.fetch
+    })
+  }
+
+  onSelect = (item) => {
+    this.input.value = item.name
+  }
+
+  fetch = (text, resolve) => {
+    const queryParams = new URLSearchParams({ q: text })
+
+    fetch('/api/template_folders_autocomplete?' + queryParams).then(async (resp) => {
+      const items = await resp.json()
+
+      resolve(items)
+    }).catch(() => {
+      resolve([])
+    })
+  }
+
+  render = (item) => {
+    const div = document.createElement('div')
+
+    div.textContent = item.name
+
+    return div
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+}