formatic 0.4.4 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 032f7e8e0a8d71e094692ff1fee875c5514874ddf79876bba8d7026bcc3769df
-  data.tar.gz: dd414a5305acca154f715389fe88e3e0950d8146964396d7a524424a36edadd8
+  metadata.gz: d41f61aacdbc9679d1e63ff82441ac6008ae35f53a8b5425986e3bac53baeb0d
+  data.tar.gz: 2974cac3f7d742dc001b45a2c5cdfe81f71e4e2cfd24d6052b4d563a790423c7
 SHA512:
-  metadata.gz: 60f8b3103a1a0948a4226c4311a5a44d7f65bc5ce48c205859b2fba5e4a73cf8bf46860382ab3b8f8ec546fe42612c0feac34d3b47863215928c1b3f76ef5512
-  data.tar.gz: 3538770fe0cccc3e88d069340e2b0cb2914951f46fe45bd7bd64ebf7e72b366d5c6373e209ee2bdb2749159d3bcd150035066b18fa3eb5f5c66832b892501dfa
+  metadata.gz: 4da00730403d13520acf91dd762fe73e9a007ba6ba4146aa96cfb40d9e18ee71e4d45eb54569fab08a87df55838ee6c6302b1881c6b4a8eaa3376b10cf91462f
+  data.tar.gz: 7d37f9de2bb33f902fb85390aa8bcdc0f1500131196cf55107eeaaa5df94cd78e22bb34bc88cadaae41ac20457eb3d74d34053989da08d457d7e2a04f99cfd51

data/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [0.6.0] 2026-10-26
+
+- Include `Formatic::Testing::Capybara::Search` in a Capybara RackTest class to call `search 'Acme Corp', from: 'Customer'`
+
+## [0.5.1] 2026-10-26
+
+- Rack tests call `Formatic::Testing::Search.call` instead of including a Capybara module
+
+## [0.5.0] 2026-10-26
+
+- Add `Formatic::Search`, a JSON-backed search field
+- `Formatic::Search::Frontend.json` wraps the choice and selected partials
+- The selected card includes the clear control. A readonly field omits the query and the clear control
+
 ## [0.4.4] 2026-09-18
 
 - Restrict year select to current year and later when `skip_past` is true

data/README.md

@@ -9,6 +9,44 @@ Opinionated ViewComponents for building forms.
 = render Formatic::String.new(f:, attribute_name: :first_name)
 ```
 
+### Search fields
+
+`Formatic::Search` renders a hidden value input and a query input for an endpoint
+that returns JSON in the form `{ records: [...] }`. Each record has an `id`, a
+`label`, `html_for_autocomplete`, and `html_for_input` properties. The
+`html_for_autocomplete` markup must include one `.js-formatic-search__choice`
+element per record, in the same order as `records`. `html_for_input` provides
+the selected-value markup. Search waits 400 ms after the last input. A newer
+query aborts the previous request for that field, and a response is shown only
+when its query still matches the input. An optional `with_clear` slot clears
+the current selection.
+An optional `with_add_record` slot stays hidden while searching and appears
+after a successful response, even when there are no matches.
+
+```ruby
+= render Formatic::Search.new(f:, attribute_name: :commander_id,
+                              record_name: 'commander',
+                              url: admin_commanders_path(format: :json))
+```
+
+For Rack tests, call `Formatic::Testing::Search.call(page:, query: 'Bob', from: 'Users')`.
+It reads the field's URL and parameter names, requests matching JSON directly, and
+fills the hidden input with a result returned by that endpoint.
+
+Capybara RackTest test classes can include the `search` helper instead:
+
+```ruby
+require 'formatic/testing/capybara'
+
+class CustomersTest < ActionDispatch::SystemTestCase
+  include Formatic::Testing::Capybara::Search
+
+  test 'select a customer' do
+    search 'Acme Corp', from: 'Customer'
+  end
+end
+```
+
 ## Installation
 
 Install the gem and add to the application's Gemfile by executing:

data/app/assets/javascript/declarations/search.d.ts

@@ -0,0 +1,39 @@
+export declare class Search {
+    private el;
+    private requests;
+    private choiceRecords;
+    private timeoutId;
+    constructor(el: HTMLElement);
+    private setupBindings;
+    private clicked;
+    private debounce;
+    private actionSearch;
+    private actionSearchNow;
+    private actionChoose;
+    private actionClear;
+    private guiWaitingForQuery;
+    private guiSearchingRecords;
+    private guiFailed;
+    private guiPopulateRecordChoices;
+    private guiChooseRecord;
+    private guiClear;
+    private guiMayAddNew;
+    private guiMayNotAddNew;
+    private notifyValueChanged;
+    private choicesFor;
+    private get searchParams();
+    private get resourceUrl();
+    private get recordName();
+    private get attributeName();
+    private get excludeIds();
+    private get resourceInput();
+    private get recordNameInput();
+    private get attributeNameInput();
+    private get excludeIdsInput();
+    private get queryInput();
+    private get valueInput();
+    private get selectedContainer();
+    private get resultsContainer();
+    private get choices();
+    private get addRecordContainer();
+}

data/app/assets/javascript/declarations/search_record.d.ts

@@ -0,0 +1,9 @@
+export declare class SearchRecord {
+    id: string | number;
+    choice: string;
+    selected: string;
+    constructor(attributes: Partial<SearchRecord>);
+    get recordId(): string;
+    get renderedChoice(): string;
+    get renderedSelected(): string;
+}

data/app/assets/javascript/declarations/search_requests.d.ts

@@ -0,0 +1,13 @@
+export declare class SearchRequests {
+    private previousController;
+    private currentController;
+    search(resource: string, searchterm: string, params: {
+        [key: string]: string;
+    }): Promise<any>;
+    abort(): void;
+    private perform;
+    private abortPreviousRequests;
+    private parseResponse;
+    private fail;
+    private get requestOptions();
+}

data/app/assets/javascript/formatic/search.js

@@ -0,0 +1,188 @@
+import { SearchRecord } from 'formatic/search_record';
+import { SearchRequests } from 'formatic/search_requests';
+export class Search {
+    constructor(el) {
+        this.el = el;
+        this.requests = new SearchRequests;
+        this.choiceRecords = new Map();
+        this.setupBindings();
+    }
+    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);
+        });
+        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();
+        });
+    }
+    clicked(selector, event) {
+        const target = event.target;
+        const receiver = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+        const match = receiver?.closest(selector);
+        if (!match || !this.el.contains(match))
+            return null;
+        return match;
+    }
+    debounce(fn) {
+        return () => {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = setTimeout(() => fn(), 400);
+        };
+    }
+    actionSearch() {
+        this.guiWaitingForQuery();
+        this.debounce(this.actionSearchNow.bind(this))();
+    }
+    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 => {
+            if (result?.query != this.queryInput.value)
+                return;
+            return result.data.records.map((attributes) => new SearchRecord(attributes));
+        }).then(records => {
+            if (records)
+                this.guiPopulateRecordChoices(records);
+        }).catch(err => {
+            console.warn(`Finding records failed: ${err}`);
+            this.guiFailed();
+        });
+    }
+    actionChoose(choice) {
+        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);
+    }
+    actionClear() {
+        clearTimeout(this.timeoutId);
+        this.requests.abort();
+        this.guiClear();
+    }
+    guiWaitingForQuery() {
+        this.resultsContainer.textContent = 'Waiting for input...';
+        this.guiMayNotAddNew();
+    }
+    guiSearchingRecords() {
+        this.resultsContainer.textContent = 'Searching...';
+        this.guiMayNotAddNew();
+    }
+    guiFailed() {
+        this.choiceRecords.clear();
+        this.resultsContainer.textContent = 'Search failed.';
+        this.guiMayNotAddNew();
+    }
+    guiPopulateRecordChoices(records) {
+        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();
+    }
+    guiChooseRecord(record) {
+        this.valueInput.value = record.recordId;
+        this.selectedContainer.innerHTML = record.renderedSelected;
+        this.resultsContainer.innerHTML = '';
+        this.queryInput.value = '';
+        this.choiceRecords.clear();
+        this.guiMayNotAddNew();
+        this.notifyValueChanged();
+    }
+    guiClear() {
+        this.valueInput.value = '';
+        this.selectedContainer.innerHTML = '';
+        this.resultsContainer.innerHTML = '';
+        this.queryInput.value = '';
+        this.choiceRecords.clear();
+        this.guiMayNotAddNew();
+        this.notifyValueChanged();
+    }
+    guiMayAddNew() {
+        this.addRecordContainer.hidden = false;
+    }
+    guiMayNotAddNew() {
+        this.addRecordContainer.hidden = true;
+    }
+    notifyValueChanged() {
+        this.valueInput.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    choicesFor(records) {
+        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]]));
+    }
+    get searchParams() {
+        const params = {
+            record_name: this.recordName,
+            attribute_name: this.attributeName,
+        };
+        if (this.excludeIds)
+            params.exclude_ids = this.excludeIds;
+        return params;
+    }
+    get resourceUrl() {
+        return this.resourceInput.value;
+    }
+    get recordName() {
+        return this.recordNameInput.value;
+    }
+    get attributeName() {
+        return this.attributeNameInput.value;
+    }
+    get excludeIds() {
+        return this.excludeIdsInput.value;
+    }
+    get resourceInput() {
+        return this.el.querySelector('.js-formatic-search__url');
+    }
+    get recordNameInput() {
+        return this.el.querySelector('.js-formatic-search__record-name');
+    }
+    get attributeNameInput() {
+        return this.el.querySelector('.js-formatic-search__attribute-name');
+    }
+    get excludeIdsInput() {
+        return this.el.querySelector('.js-formatic-search__exclude-ids');
+    }
+    get queryInput() {
+        return this.el.querySelector('.js-formatic-search__query-input');
+    }
+    get valueInput() {
+        return this.el.querySelector('.js-formatic-search__value');
+    }
+    get selectedContainer() {
+        return this.el.querySelector('.js-formatic-search__selected');
+    }
+    get resultsContainer() {
+        return this.el.querySelector('.js-formatic-search__results');
+    }
+    get choices() {
+        return this.resultsContainer.querySelectorAll('.js-formatic-search__choice');
+    }
+    get addRecordContainer() {
+        return this.el.querySelector('.js-formatic-search__add-record');
+    }
+}
+//# sourceMappingURL=search.js.map

data/app/assets/javascript/formatic/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../src/search.ts"],"names":[],"mappings":"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"}

data/app/assets/javascript/formatic/search_record.js

@@ -0,0 +1,21 @@
+export class SearchRecord {
+    constructor(attributes) {
+        Object.assign(this, attributes);
+    }
+    get recordId() {
+        if (this.id == null || this.id == '')
+            throw new Error('Search record is missing id');
+        return String(this.id);
+    }
+    get renderedChoice() {
+        if (!this.choice)
+            throw new Error('Search record is missing choice');
+        return this.choice;
+    }
+    get renderedSelected() {
+        if (!this.selected)
+            throw new Error('Search record is missing selected');
+        return this.selected;
+    }
+}
+//# sourceMappingURL=search_record.js.map

data/app/assets/javascript/formatic/search_record.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_record.js","sourceRoot":"","sources":["../src/search_record.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,YAAY;IAKvB,YAAY,UAAiC;QAC3C,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;IACjC,CAAC;IAED,IAAW,QAAQ;QACjB,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,IAAI,EAAE;YAAE,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAA;QACpF,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACxB,CAAC;IAED,IAAW,cAAc;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAA;QACpE,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;IAED,IAAW,gBAAgB;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;QACxE,OAAO,IAAI,CAAC,QAAQ,CAAA;IACtB,CAAC;CACF"}

data/app/assets/javascript/formatic/search_requests.js

@@ -0,0 +1,72 @@
+export class SearchRequests {
+    search(resource, searchterm, params) {
+        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();
+    }
+    perform(options) {
+        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);
+            });
+        });
+    }
+    abortPreviousRequests() {
+        this.abort();
+        this.currentController = new AbortController();
+        this.previousController = this.currentController;
+    }
+    parseResponse(response) {
+        if (!response.ok)
+            throw Error(response.statusText);
+        return response.json();
+    }
+    fail(err, options, reject) {
+        if (err.name == 'AbortError') {
+            console.debug(`Cancelled GET ${options.url}`);
+            return;
+        }
+        console.debug(`Failed to GET ${options.url}`);
+        reject(err);
+    }
+    get requestOptions() {
+        return {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json',
+            },
+            signal: this.currentController.signal,
+        };
+    }
+}
+class Options {
+    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 {
+    constructor(attributes) {
+        Object.assign(this, attributes);
+    }
+}
+//# sourceMappingURL=search_requests.js.map

data/app/assets/javascript/formatic/search_requests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_requests.js","sourceRoot":"","sources":["../src/search_requests.ts"],"names":[],"mappings":"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"}

data/app/assets/javascript/formatic/setup.js

@@ -1,5 +1,6 @@
 import { Date } from 'formatic/date'
 import { Select } from 'formatic/select'
+import { Search } from 'formatic/search'
 import { Stepper } from 'formatic/stepper'
 import { String } from 'formatic/string'
 import { Textarea } from 'formatic/textarea'
@@ -7,6 +8,11 @@ import { Toggle } from 'formatic/toggle'
 import { FormaticFile } from 'formatic/file'
 
 document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.js-formatic-search').forEach((el) => {
+    console.debug('[Formatic] Instantiating Search...')
+    new Search(el)
+  })
+
   document.querySelectorAll('.js-formatic-file').forEach((el) => {
     console.debug('[Formatic] Instantiating File...')
     new FormaticFile(el)