formatic 0.4.4 → 0.6.0

data/app/assets/javascript/src/search.ts

@@ -0,0 +1,242 @@
+import { SearchRecord } from 'formatic/search_record'
+import { SearchRequests } from 'formatic/search_requests'
+
+export class Search {
+  private el: HTMLElement
+  private requests: SearchRequests
+  private choiceRecords: Map<HTMLElement, SearchRecord>
+  private timeoutId: ReturnType<typeof setTimeout>
+
+  constructor(el: HTMLElement) {
+    this.el = el
+    this.requests = new SearchRequests
+    this.choiceRecords = new Map()
+    this.setupBindings()
+  }
+
+  // Setup
+
+  private setupBindings() {
+    if (!this.queryInput) return
+
+    this.resultsContainer.addEventListener('click', (event) => {
+      const choice = this.clicked('.js-formatic-search__choice', event)
+      if (!choice) return
+
+      event.preventDefault()
+      this.actionChoose(choice)
+    })
+
+    // The clear control arrives inside the selected card, so the listener
+    // stays on the search root.
+    this.el.addEventListener('click', (event) => {
+      const clear = this.clicked('.js-formatic-search__clear', event)
+      if (!clear) return
+
+      event.preventDefault()
+      this.actionClear()
+    })
+
+    this.queryInput.addEventListener('input', (event) => {
+      event.preventDefault()
+      this.actionSearch()
+    })
+  }
+
+  // Helpers
+
+  private clicked(selector: string, event: Event) {
+    const target = event.target
+    const receiver = target instanceof Element ? target : target instanceof Node ? target.parentElement : null
+    const match = receiver?.closest<HTMLElement>(selector)
+    if (!match || !this.el.contains(match)) return null
+
+    return match
+  }
+
+  private debounce(fn: Function) {
+    return () => {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = setTimeout(() => fn(), 400)
+    }
+  }
+
+  // Actions
+
+  private actionSearch() {
+    this.guiWaitingForQuery()
+    this.debounce(this.actionSearchNow.bind(this))()
+  }
+
+  private actionSearchNow() {
+    if (this.queryInput.value.length == 0) {
+      this.resultsContainer.innerHTML = ''
+      return
+    }
+
+    this.guiSearchingRecords()
+    this.requests.search(this.resourceUrl, this.queryInput.value, this.searchParams)
+      .then(result => {
+        // On multiple parallel ajax requests, the currently wanted response wins.
+        if (result?.query != this.queryInput.value) return
+
+        return result.data.records.map((attributes: any) => new SearchRecord(attributes))
+      }).then(records => {
+        if (records) this.guiPopulateRecordChoices(records)
+      }).catch(err => {
+        console.warn(`Finding records failed: ${err}`)
+        this.guiFailed()
+      })
+  }
+
+  private actionChoose(choice: HTMLElement) {
+    clearTimeout(this.timeoutId)
+    this.requests.abort()
+
+    const record = this.choiceRecords.get(choice)
+    if (!record) throw new Error('No search result for the chosen element')
+
+    this.guiChooseRecord(record)
+  }
+
+  private actionClear() {
+    clearTimeout(this.timeoutId)
+    this.requests.abort()
+    this.guiClear()
+  }
+
+  // GUI
+
+  private guiWaitingForQuery() {
+    this.resultsContainer.textContent = 'Waiting for input...'
+    this.guiMayNotAddNew()
+  }
+
+  private guiSearchingRecords() {
+    this.resultsContainer.textContent = 'Searching...'
+    this.guiMayNotAddNew()
+  }
+
+  private guiFailed() {
+    this.choiceRecords.clear()
+    this.resultsContainer.textContent = 'Search failed.'
+    this.guiMayNotAddNew()
+  }
+
+  private guiPopulateRecordChoices(records: Array<SearchRecord>) {
+    this.resultsContainer.innerHTML = records.map((record) => record.renderedChoice).join('')
+    this.choiceRecords = this.choicesFor(records)
+    if (records.length == 0) this.resultsContainer.textContent = 'No records found.'
+    this.guiMayAddNew()
+  }
+
+  private guiChooseRecord(record: SearchRecord) {
+    this.valueInput.value = record.recordId
+    this.selectedContainer.innerHTML = record.renderedSelected
+    this.resultsContainer.innerHTML = ''
+    this.queryInput.value = ''
+    this.choiceRecords.clear()
+    this.guiMayNotAddNew()
+    this.notifyValueChanged()
+  }
+
+  private guiClear() {
+    this.valueInput.value = ''
+    this.selectedContainer.innerHTML = ''
+    this.resultsContainer.innerHTML = ''
+    this.queryInput.value = ''
+    this.choiceRecords.clear()
+    this.guiMayNotAddNew()
+    this.notifyValueChanged()
+  }
+
+  private guiMayAddNew() {
+    this.addRecordContainer.hidden = false
+  }
+
+  private guiMayNotAddNew() {
+    this.addRecordContainer.hidden = true
+  }
+
+  private notifyValueChanged() {
+    this.valueInput.dispatchEvent(new Event('change', { bubbles: true }))
+  }
+
+  private choicesFor(records: Array<SearchRecord>) {
+    const choices = Array.from(this.choices)
+    if (choices.length != records.length) {
+      throw new Error(`Expected ${records.length} .js-formatic-search__choice elements, found ${choices.length}`)
+    }
+
+    return new Map(choices.map((choice, index) => [choice, records[index]]))
+  }
+
+  // Attributes
+
+  private get searchParams() {
+    const params: { [key: string]: string } = {
+      record_name: this.recordName,
+      attribute_name: this.attributeName,
+    }
+    if (this.excludeIds) params.exclude_ids = this.excludeIds
+    return params
+  }
+
+  private get resourceUrl() {
+    return this.resourceInput.value
+  }
+
+  private get recordName() {
+    return this.recordNameInput.value
+  }
+
+  private get attributeName() {
+    return this.attributeNameInput.value
+  }
+
+  private get excludeIds() {
+    return this.excludeIdsInput.value
+  }
+
+  // DOM elements
+
+  private get resourceInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__url')
+  }
+
+  private get recordNameInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__record-name')
+  }
+
+  private get attributeNameInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__attribute-name')
+  }
+
+  private get excludeIdsInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__exclude-ids')
+  }
+
+  private get queryInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__query-input')
+  }
+
+  private get valueInput() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-search__value')
+  }
+
+  private get selectedContainer() {
+    return this.el.querySelector<HTMLElement>('.js-formatic-search__selected')
+  }
+
+  private get resultsContainer() {
+    return this.el.querySelector<HTMLElement>('.js-formatic-search__results')
+  }
+
+  private get choices() {
+    return this.resultsContainer.querySelectorAll<HTMLElement>('.js-formatic-search__choice')
+  }
+
+  private get addRecordContainer() {
+    return this.el.querySelector<HTMLElement>('.js-formatic-search__add-record')
+  }
+}

data/app/assets/javascript/src/search_record.ts

@@ -0,0 +1,24 @@
+export class SearchRecord {
+  id: string | number
+  choice: string
+  selected: string
+
+  constructor(attributes: Partial<SearchRecord>) {
+    Object.assign(this, attributes)
+  }
+
+  public get recordId() {
+    if (this.id == null || this.id == '') throw new Error('Search record is missing id')
+    return String(this.id)
+  }
+
+  public get renderedChoice() {
+    if (!this.choice) throw new Error('Search record is missing choice')
+    return this.choice
+  }
+
+  public get renderedSelected() {
+    if (!this.selected) throw new Error('Search record is missing selected')
+    return this.selected
+  }
+}

data/app/assets/javascript/src/search_requests.ts

@@ -0,0 +1,94 @@
+// search(client, '/records.json', 'hello', { record_name: 'customer' })
+// GET /records.json?record_name=customer&query=hello
+
+export class SearchRequests {
+  private previousController: AbortController
+  private currentController: AbortController
+
+  search(resource: string, searchterm: string, params: { [key: string]: string }): Promise<any> {
+    const options = new Options
+    options.resource = resource
+    options.params = { ...params }
+    options.params.query = searchterm
+    return this.perform(options)
+  }
+
+  abort() {
+    if (this.previousController) this.previousController.abort()
+  }
+
+  private perform(options: Options): Promise<any> {
+    this.abortPreviousRequests()
+
+    return new Promise((resolve, reject) => {
+      if (options.params.query == '') return resolve(null)
+
+      console.debug(`SearchRequests GET ${options.url}`)
+      fetch(options.url, this.requestOptions)
+        .then(response => this.parseResponse(response))
+        .then(data => {
+          resolve(new Result({ data: data, options: options, query: options.params.query }))
+        }).catch(err => {
+          this.fail(err, options, reject)
+        })
+    })
+  }
+
+  private abortPreviousRequests() {
+    this.abort()
+    this.currentController = new AbortController()
+    this.previousController = this.currentController
+  }
+
+  private parseResponse(response: Response) {
+    if (!response.ok) throw Error(response.statusText)
+    return response.json()
+  }
+
+  private fail(err: any, options: Options, reject: (reason?: any) => void) {
+    if (err.name == 'AbortError') {
+      // A newer query started, then this request was aborted.
+      // The promise stays unsettled so this response cannot overwrite the newer result.
+      console.debug(`Cancelled GET ${options.url}`)
+      return
+    }
+
+    console.debug(`Failed to GET ${options.url}`)
+    reject(err)
+  }
+
+  private get requestOptions() {
+    return {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      signal: this.currentController.signal,
+    }
+  }
+}
+
+class Options {
+  resource: string
+  params: { [key: string]: string }
+
+  public get url() {
+    const requestParams = new URLSearchParams()
+    for (const [key, value] of Object.entries(this.params)) {
+      requestParams.set(key, value)
+    }
+    const separator = this.resource.includes('?') ? '&' : '?'
+    return this.resource + separator + requestParams
+  }
+}
+
+class Result {
+  data: any
+  options: Options
+  query: string
+
+  constructor(attributes: Partial<Result>) {
+    Object.assign(this, attributes)
+  }
+}

data/app/assets/stylesheets/formatic/components/search.sass

@@ -0,0 +1,51 @@
+.c-formatic-search
+  display: grid
+  grid-template-columns: auto
+  gap: 0.4rem
+
+  &__query
+    display: flex
+    align-items: center
+    gap: 0.2rem
+
+    input
+      flex-grow: 1
+      min-width: 0
+
+  &__selected,
+  &__results,
+  &__clear
+    display: grid
+    gap: 0.2rem
+
+  &__selection
+    display: flex
+    align-items: center
+    justify-content: space-between
+    gap: 0.4rem
+
+  &__selected-record
+    flex-grow: 1
+    min-width: 0
+
+  &__actions
+    flex-shrink: 0
+    align-self: stretch
+    height: 100%
+
+  &__results:empty
+    display: none
+
+  &__add-record:empty
+    display: none
+
+@at-root a.c-formatic-search__clear
+  speak: none
+  font-style: normal
+  font-weight: normal
+  font-variant: normal
+  text-transform: none
+  text-decoration: none
+
+  &::before
+    content: "\00d7"

data/app/assets/stylesheets/formatic/formatic.css

@@ -159,6 +159,31 @@
   background-size: 200% 200%;
 }
 
+.c-formatic-search {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 0.4rem;
+}
+.c-formatic-search__query {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+.c-formatic-search__query input {
+  flex-grow: 1;
+  min-width: 0;
+}
+.c-formatic-search__selected, .c-formatic-search__results, .c-formatic-search__clear {
+  display: grid;
+  gap: 0.2rem;
+}
+.c-formatic-search__results:empty {
+  display: none;
+}
+.c-formatic-search__add-record:empty {
+  display: none;
+}
+
 .c-formatic-wrapper.is-required .c-formatic-select {
   border-left-color: rgb(240, 30, 80);
   border-left-width: 2px;

data/app/assets/stylesheets/formatic/formatic.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["generics/flip.sass","components/wrapper.sass","../../../../node_modules/iglu/iglu/font-size/tools/_sizing.sass","../../../../node_modules/iglu/iglu/spacing/tools/_margin.sass","settings/_colors.sass","components/checklist.sass","components/date.sass","tools/_mandatory.sass","../../../../node_modules/iglu/iglu/spacing/tools/_padding_immediate.sass","tools/_link.sass","tools/_terminal.sass","tools/_cloud.sass","components/stepper.sass","components/time.sass","components/toggle.sass","utilities/container.sass","scopes/form.sass","tools/_theme.sass"],"names":[],"mappings":"AAAA;EACE;IACE;;;ACGJ;EACE;EACA;EACA;EACA;;ACGD;EACE;;ACiED;EACE;;AFlEF;EACE;;AAGA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAEJ;EAEE;;AAEF;EACE,OGpBY;;AHsBZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACE;;AE8BF;EACE;;AD/DH;EACE;;ADmCD;EACE;EACA;EACA;;;AAEJ;EACE;IACE;IACA;IACA;IACA;;;AIlDJ;EACE;EACA;;;ACQA;EACE;EACA;EACA;;AH6DF;EACE;;AIxEF;EACE,mBHCY;EGAZ;;ADeF;EACE;EAEA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AHIF;EACE;;AKnCF;EACE;;ACNF;EHuCI,OFtCE;;AFcP;EACE;;AMHD;EACE;;ANHH;EACE;;AQZD;EACE;;AJgDF;EACE;;AJ/CH;EACE;;AIiDD;EACE;;AItDF;EACE;;AREH;EACE;;AIsDD;EACE;;AAEF;EACE;;AG9DF;EHgEI,OF9DE;;AKFN;EHoEI,OFhEU;;AEkEd;EACE;EACA;EACA;;;ACvEF;EACE,mBHCY;EGAZ;;AIJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;;ACXJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AVIH;EACE;;AUFD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AVhBH;EACE;;ACyDD;EACE;;ASvCF;EACE,OR3BU;;;AMTZ;EACE;;ACDF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AJbF;EACE,mBHCY;EGAZ;;;AIJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AJbF;EACE,mBHCY;EGAZ;;;AMCF;EACE;EACA;EACA;;AViEF;EACE;;AIxEF;EACE,mBHCY;EGAZ;;;AOFJ;EAGE;EACA;EACA;;AZID;EACE;;AYFD;EACE;EAGA;EACA;;AAEA;EACE;;AZXL;EACE;;AYaD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YVrBU;;AUuBV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBVvCE;EUwCF;;AAGJ;EACE;EACA;;AAGA;EACE,kBV7CO;;AU+CP;EACE,kBVlDQ;;AUqDZ;EACE;EACA,kBVzDE;;AU4DJ;EACE;;AACF;EACE;;AAGF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA,OV7EW;;AFLd;AAAA;EACE;;AYsFD;EACE;EACA;EACA;;;AC9FJ;EACE;;;ACKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;EACA;EACA;EACA;EACA,eZdU;EYeV;EACA;EACA;EACA;EACA;EACA;EACA;;AdfH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AKVD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE,mBHCY;EGAZ;;AS4BF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AC3CF;ED+CE;IACE","file":"formatic.css"}
+{"version":3,"sourceRoot":"","sources":["generics/flip.sass","components/wrapper.sass","../../../../node_modules/iglu/iglu/font-size/tools/_sizing.sass","../../../../node_modules/iglu/iglu/spacing/tools/_margin.sass","settings/_colors.sass","components/checklist.sass","components/date.sass","tools/_mandatory.sass","../../../../node_modules/iglu/iglu/spacing/tools/_padding_immediate.sass","tools/_link.sass","tools/_terminal.sass","components/search.sass","tools/_cloud.sass","components/stepper.sass","components/time.sass","components/toggle.sass","utilities/container.sass","scopes/form.sass","tools/_theme.sass"],"names":[],"mappings":"AAAA;EACE;IACE;;;ACGJ;EACE;EACA;EACA;EACA;;ACGD;EACE;;ACiED;EACE;;AFlEF;EACE;;AAGA;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AAEJ;EAEE;;AAEF;EACE,OGpBY;;AHsBZ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACE;;AE8BF;EACE;;AD/DH;EACE;;ADmCD;EACE;EACA;EACA;;;AAEJ;EACE;IACE;IACA;IACA;IACA;;;AIlDJ;EACE;EACA;;;ACQA;EACE;EACA;EACA;;AH6DF;EACE;;AIxEF;EACE,mBHCY;EGAZ;;ADeF;EACE;EAEA;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AHIF;EACE;;AKnCF;EACE;;ACNF;EHuCI,OFtCE;;AFcP;EACE;;AMHD;EACE;;ANHH;EACE;;AQZD;EACE;;AJgDF;EACE;;AJ/CH;EACE;;AIiDD;EACE;;AItDF;EACE;;AREH;EACE;;AIsDD;EACE;;AAEF;EACE;;AG9DF;EHgEI,OF9DE;;AKFN;EHoEI,OFhEU;;AEkEd;EACE;EACA;EACA;;;AK1EJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEJ;EAGE;EACA;;AAEF;EACE;;AAEF;EACE;;;AJrBF;EACE,mBHCY;EGAZ;;AKJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;;ACXJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AXIH;EACE;;AWFD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AXhBH;EACE;;ACyDD;EACE;;AUvCF;EACE,OT3BU;;;AMTZ;EACE;;AEDF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;ALbF;EACE,mBHCY;EGAZ;;;AKJF;EAGE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;ALbF;EACE,mBHCY;EGAZ;;;AOCF;EACE;EACA;EACA;;AXiEF;EACE;;AIxEF;EACE,mBHCY;EGAZ;;;AQFJ;EAGE;EACA;EACA;;AbID;EACE;;AaFD;EACE;EAGA;EACA;;AAEA;EACE;;AbXL;EACE;;AaaD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YXrBU;;AWuBV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBXvCE;EWwCF;;AAGJ;EACE;EACA;;AAGA;EACE,kBX7CO;;AW+CP;EACE,kBXlDQ;;AWqDZ;EACE;EACA,kBXzDE;;AW4DJ;EACE;;AACF;EACE;;AAGF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA,OX7EW;;AFLd;AAAA;EACE;;AasFD;EACE;EACA;EACA;;;AC9FJ;EACE;;;ACKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASE;EACA;EACA;EACA;EACA;EACA,ebdU;EaeV;EACA;EACA;EACA;EACA;EACA;EACA;;AffH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AKVD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE,mBHCY;EGAZ;;AU4BF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AC3CF;ED+CE;IACE","file":"formatic.css"}

data/app/assets/stylesheets/formatic.sass

@@ -5,6 +5,7 @@
 @use "formatic/components/wrapper.sass" // Wrapper comes first, rest alphabetically
 @use "formatic/components/checklist.sass"
 @use "formatic/components/date.sass"
+@use "formatic/components/search.sass"
 @use "formatic/components/select.sass"
 @use "formatic/components/stepper.sass"
 @use "formatic/components/string.sass"

data/app/components/formatic/file.rb

@@ -49,18 +49,22 @@ module Formatic
     private
 
     def validate_attribute_name!
+      return unless validate_attribute_name?
+      return if f.object.respond_to?(attribute_name)
+
+      raise ArgumentError,
+            "attribute `#{attribute_name}` does not exist on #{f.object.class}."
+    end
+
+    def validate_attribute_name?
       # A manually passed value means `attribute_name` is just a param name,
       # not necessarily a method on the model.
-      return if manual_value != :_fetch_from_record
-      return if f.nil? || f.object.nil?
+      return false if manual_value != :_fetch_from_record
+      return false if f.nil? || f.object.nil?
 
       # Only enforce this for real ActiveModel/ActiveRecord records.
       # Custom objects (e.g. slugs) are not expected to respond to it.
-      return unless f.object.respond_to?(:model_name)
-      return if f.object.respond_to?(attribute_name)
-
-      raise ArgumentError,
-            "attribute `#{attribute_name}` does not exist on #{f.object.class}."
+      f.object.respond_to?(:model_name)
     end
 
     def attachments
@@ -77,19 +81,22 @@ module Formatic
       # Filepond doesn't work well  with invalid form submits anyway.
       return if multiple
 
-      attachments.map do |attachment|
-        {
-          source: attachment.signed_id,
-          options: {
-            type: 'local',
-            file: {
-              name: attachment.filename,
-              size: attachment.byte_size,
-              type: attachment.content_type
-            }
-          }
-        }
-      end.to_json
+      attachments.map { |attachment| entry_json(attachment) }.to_json
+    end
+
+    def entry_json(attachment)
+      {
+        source: attachment.signed_id,
+        options: { type: 'local', file: file_json(attachment) }
+      }
+    end
+
+    def file_json(attachment)
+      {
+        name: attachment.filename,
+        size: attachment.byte_size,
+        type: attachment.content_type
+      }
     end
 
     # The currently attached file, if there is exactly one.

data/app/components/formatic/search/choice.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Formatic
+  class Search
+    # One row in the search results.
+    class Choice < ::Formatic::ApplicationComponent
+      option :record_id
+
+      erb_template <<~ERB
+        <div class="js-formatic-search__choice" data-record-id="<%= record_id %>"><%= content %></div>
+      ERB
+    end
+  end
+end

data/app/components/formatic/search/clear.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Formatic
+  class Search
+    # The control that clears the selected record.
+    class Clear < ::Formatic::ApplicationComponent
+      erb_template <<~ERB
+        <a href="#" class="c-formatic-search__clear js-formatic-search__clear" title="Remove"></a>
+      ERB
+    end
+  end
+end

data/app/components/formatic/search/frontend.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Formatic
+  class Search
+    # Builds one search JSON record from the app partials.
+    class Frontend
+      def self.json(id:, choice:, selected:)
+        {
+          id: id,
+          choice: render_html(::Formatic::Search::Choice.new(record_id: id).with_content(choice)),
+          selected: render_html(::Formatic::Search::Selected.new.with_content(selected))
+        }
+      end
+
+      def self.render_html(component)
+        ApplicationController.render(component)
+      end
+      private_class_method :render_html
+    end
+  end
+end

data/app/components/formatic/search/selected.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Formatic
+  class Search
+    # The record that is currently chosen.
+    class Selected < ::Formatic::ApplicationComponent
+      option :readonly, default: -> { false }
+
+      erb_template <<~ERB
+        <div class="c-formatic-search__selection">
+          <div class="c-formatic-search__selected-record"><%= content %></div>
+          <% unless readonly %>
+            <div class="c-formatic-search__actions"><%= render ::Formatic::Search::Clear.new %></div>
+          <% end %>
+        </div>
+      ERB
+    end
+  end
+end

data/app/components/formatic/search.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require 'formatic/templates/search'
+
+module Formatic
+  # A search field backed by a JSON endpoint.
+  class Search < ::Formatic::Base
+    option :url
+    option :record_name, as: :manual_record_name, optional: true
+    option :exclude_ids, default: -> { [] }
+    option :placeholder, as: :manual_placeholder, optional: true
+
+    renders_one :selected_record
+    renders_one :add_record
+
+    erb_template(::Formatic::Templates::Search.call)
+
+    def record_name
+      manual_record_name || f.object.model_name.param_key
+    end
+
+    def query_input_id
+      f.field_id(attribute_name)
+    end
+
+    def search_placeholder
+      manual_placeholder.presence || wrapper.placeholder
+    end
+  end
+end

data/config/importmap.rb

@@ -5,6 +5,9 @@ pin 'formatic', to: 'formatic/setup.js'
 pin 'formatic/date', to: 'formatic/date.js'
 pin 'formatic/file', to: 'formatic/file.js'
 pin 'formatic/select', to: 'formatic/select.js'
+pin 'formatic/search', to: 'formatic/search.js'
+pin 'formatic/search_record', to: 'formatic/search_record.js'
+pin 'formatic/search_requests', to: 'formatic/search_requests.js'
 pin 'formatic/stepper', to: 'formatic/stepper.js'
 pin 'formatic/string', to: 'formatic/string.js'
 pin 'formatic/textarea', to: 'formatic/textarea.js'

data/lib/formatic/engine.rb

@@ -53,6 +53,11 @@ module Formatic
         require_relative '../../app/components/formatic/checklist'
         require_relative '../../app/components/formatic/date'
         require_relative '../../app/components/formatic/select'
+        require_relative '../../app/components/formatic/search'
+        require_relative '../../app/components/formatic/search/clear'
+        require_relative '../../app/components/formatic/search/choice'
+        require_relative '../../app/components/formatic/search/selected'
+        require_relative '../../app/components/formatic/search/frontend'
         require_relative '../../app/components/formatic/string'
         require_relative '../../app/components/formatic/stepper'
         require_relative '../../app/components/formatic/textarea'