uchi 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a55e83c00940576aecf0cf9ba96655718a95f833919861ff05b064450f0c8b8a
-  data.tar.gz: 911220ea4ded524bbb3b137c577e63d6aa982ac9f6683e23ed8842c476bfe65d
+  metadata.gz: de2b1d1a3dd3e56ab24bce7e64663414c0dbfe4dfc4ac782ca47fcd967e4b048
+  data.tar.gz: b9e0322ebafd58e4369f8b1e0087c8e4ec3bb637226a02b37b890d16be9986ad
 SHA512:
-  metadata.gz: 502ce2498ad61f7f9faf2227314ad18ab4ce975b1e0ee166e4f0daa18f899673436a2c6a2fbe4748d5f89a30f2145655d7f73d46e4edc95b987db0b17e117fd9
-  data.tar.gz: fdc08b6c1509be2d31f896b8394598f0bf5d4984c9b407547d4e38951a7c4d2a1871f65a67003750df1702e95b572a1b65bdc1e05a89602bf1de4eb30f82fd9a
+  metadata.gz: b2ff7837db46a22eb39adc6cbd07077d9dd288032e6d77468a596c8042e3ab8476bc92ee57a3161ab177523701c0f7e4e4e8f8f49a45fc2691e8eaf0c4c2a0a2
+  data.tar.gz: 01accad1e6c453af98f1cccde568c46eb6b6eb9e0474f5454f3b9b59e215df636b00a599909b506f0c878a44d40d2f4b936329d0dab8aea82f422cf0709586ff

data/README.md

@@ -216,7 +216,14 @@ Rely on defaults whenever possible. If something has already been decided for us
 
 We don't want to force you to translate everything. If a field doesn't need a translation, don't add one, we'll just fall back to the fields name.
 
+### Edits happen on the edit page
+
+This includes both attributes and associations as much as feasible.
+
 ## Credits
 
 * Uchi contains parts of [Pagy](https://github.com/ddnexus/pagy), Copyright (c) 2017-2025 Domizio Demichelis
 * Uchi contains parts of [Flowbite Components](https://github.com/substancelab/flowbite-components), Copyright (c) 2025 Substance Lab
+* Uchi uses [combobox-nav](https://github.com/github/combobox-nav), Copyright (c) 2018 GitHub
+* Uchi uses [requestjs-rails](https://github.com/rails/requestjs-rails), Copyright (c) 2021 Marcelo Lauxen
+* Uchi uses [stimulus-use](https://github.com/stimulus-use/stimulus-use), Copyright (c) 2020 Adrien POLY

data/app/assets/javascripts/controllers/fields/belongs_to_controller.js

@@ -0,0 +1,130 @@
+import { Controller } from "@hotwired/stimulus"
+import { get } from "@rails/request.js"
+import { useClickOutside, useDebounce } from 'stimulus-use'
+import Combobox from '@github/combobox-nav'
+
+export default class extends Controller {
+  static debounces = ["handleChange"]
+
+  static targets = ["id", "dropdown", "input", "label", "list"]
+
+  static values = {
+    backendUrl: String
+  }
+
+  buildCombobox() {
+    return new Combobox(this.inputTarget, this.listTarget)
+  }
+
+  clickOutside(event) {
+    if (!this.dropdownTarget.hidden) {
+      this.closeDropdown()
+    }
+  }
+
+  closeDropdown() {
+    this.combobox.stop()
+    this.dropdownTarget.hidden = true
+  }
+
+  connect() {
+    useClickOutside(this, {element: this.dropdownTarget})
+    useDebounce(this)
+
+    this.combobox = this.buildCombobox()
+
+    this.listTarget.addEventListener('combobox-commit', this.handleComboboxCommit.bind(this))
+    this.dropdownTarget.hidden = true
+  }
+
+  disconnect() {
+    this.listTarget.removeEventListener('combobox-commit', this.handleComboboxCommit)
+
+    this.combobox.destroy()
+  }
+
+  fetchOptions(options) {
+    get(this.backendUrlValue, {
+      query: { query: this.inputTarget.value }
+    }).then(({response}) => {
+      return response.text()
+    }).then((html) => {
+      this.listTarget.innerHTML = html
+      this.openDropdown()
+      this.markSelectedOption()
+      if (options?.scrollToSelected) {
+        this.scrollToSelectedOption()
+      }
+    }).catch((error) => {
+      console.error("Failed to fetch options:", error)
+      this.dropdownTarget.hidden = true
+    })
+  }
+
+  handleChange() {
+    this.combobox.stop()
+    this.fetchOptions()
+  }
+
+  handleComboboxCommit(event) {
+    this.setValuesFromElement(event.target)
+    this.closeDropdown()
+  }
+
+  handleFocus() {
+    this.fetchOptions({ scrollToSelected: true })
+  }
+
+  markSelectedOption() {
+    const options = this.listTarget.querySelectorAll('[role="option"]')
+    options.forEach((option) => {
+      option.removeAttribute('aria-selected')
+      const recordId = option.getAttribute('data-id')
+      if (recordId === this.idTarget.value) {
+        option.setAttribute('aria-selected', 'true')
+      }
+    })
+  }
+
+  openDropdown() {
+    this.combobox.start()
+    this.dropdownTarget.hidden = false
+    this.inputTarget.focus()
+  }
+
+  scrollToSelectedOption() {
+    const selectedOption = this.listTarget.querySelector('[aria-selected="true"]')
+    if (selectedOption) {
+      selectedOption.scrollIntoView({
+        // Aligns the element at the center of the scrollable container,
+        // positioning it in the middle of the visible area.
+        block: "center",
+        inline: "center",
+
+        // Only the nearest scrollable container is impacted by the scroll.
+        container: "nearest"
+      })
+    }
+  }
+
+  selectOption(event) {
+    this.combobox.clearSelection()
+    event.target.setAttribute('aria-selected', 'true')
+
+    this.setValuesFromElement(event.target)
+  }
+
+  setValuesFromElement(element) {
+    const recordId = element.getAttribute('data-id')
+    this.idTarget.value = recordId
+    this.labelTarget.textContent = element.textContent.trim()
+  }
+
+  toggle() {
+    if (this.dropdownTarget.hidden) {
+      this.openDropdown()
+    } else {
+      this.closeDropdown()
+    }
+  }
+}

data/app/assets/javascripts/controllers/fields/has_many_controller.js

@@ -0,0 +1,146 @@
+import { Controller } from "@hotwired/stimulus"
+import { get } from "@rails/request.js"
+import { useClickOutside, useDebounce } from 'stimulus-use'
+
+export default class extends Controller {
+  static debounces = ["handleChange"]
+
+  static targets = ["checkbox", "dropdown", "idField", "idsContainer", "input", "label", "list"]
+
+  static values = {
+    backendUrl: String,
+    fieldName: String
+  }
+
+  clickOutside(event) {
+    if (!this.dropdownTarget.hidden) {
+      this.closeDropdown()
+    }
+  }
+
+  closeDropdown() {
+    this.dropdownTarget.hidden = true
+  }
+
+  connect() {
+    useClickOutside(this, {element: this.dropdownTarget})
+    useDebounce(this)
+
+    this.dropdownTarget.hidden = true
+  }
+
+  fetchOptions() {
+    get(this.backendUrlValue, {
+      query: { query: this.inputTarget.value }
+    }).then(({response}) => {
+      return response.text()
+    }).then((html) => {
+      this.listTarget.innerHTML = html
+      this.openDropdown()
+      this.updateCheckboxStates()
+    }).catch((error) => {
+      console.error("Failed to fetch options:", error)
+      this.dropdownTarget.hidden = true
+    })
+  }
+
+  getSelectedIds() {
+    return this.idFieldTargets.map(field => String(field.value))
+  }
+
+  handleChange() {
+    this.fetchOptions()
+  }
+
+  handleFocus() {
+    this.fetchOptions()
+  }
+
+  openDropdown() {
+    this.dropdownTarget.hidden = false
+    this.inputTarget.focus()
+  }
+
+  handleCheckboxChange(event) {
+    const checkbox = event.target
+    const listItem = checkbox.closest('li[data-id]')
+    const recordId = listItem?.getAttribute('data-id')
+
+    if (!recordId) return
+
+    if (checkbox.checked) {
+      // Get the title from the label
+      const label = listItem?.querySelector('label')
+      const title = label ? label.textContent.trim() : ''
+      this.addId(recordId, title)
+    } else {
+      this.removeId(recordId)
+    }
+
+    this.updateLabel()
+  }
+
+  addId(id, title) {
+    const selectedIds = this.getSelectedIds()
+    if (selectedIds.includes(id)) return
+
+    // Create a new hidden field for this ID
+    const hiddenField = document.createElement('input')
+    hiddenField.type = 'hidden'
+    hiddenField.name = this.fieldNameValue
+    hiddenField.value = id
+    hiddenField.setAttribute('data-has-many-target', 'idField')
+    hiddenField.setAttribute('data-title', title)
+
+    this.idsContainerTarget.appendChild(hiddenField)
+  }
+
+  removeId(id) {
+    const field = this.idFieldTargets.find(f => f.value === id)
+    if (field) {
+      field.remove()
+    }
+  }
+
+  toggle() {
+    if (this.dropdownTarget.hidden) {
+      this.openDropdown()
+    } else {
+      this.closeDropdown()
+    }
+  }
+
+  updateCheckboxStates() {
+    const selectedIds = this.getSelectedIds()
+
+    this.checkboxTargets.forEach((checkbox) => {
+      const listItem = checkbox.closest('li[data-id]')
+      if (!listItem) return
+
+      const recordId = listItem.getAttribute('data-id')
+      const isSelected = selectedIds.includes(recordId)
+
+      checkbox.checked = isSelected
+
+      if (isSelected) {
+        listItem.setAttribute('aria-selected', 'true')
+      } else {
+        listItem.removeAttribute('aria-selected')
+      }
+    })
+  }
+
+  updateLabel() {
+    // Get titles from the hidden fields (which persist even when items are filtered)
+    const titles = this.idFieldTargets
+      .map(field => field.getAttribute('data-title'))
+      .filter(title => title) // Remove empty titles
+
+    if (titles.length === 0) {
+      this.labelTarget.innerHTML = '<span class="text-body-subtle">Select items...</span>'
+      return
+    }
+
+    this.labelTarget.textContent = titles.join(', ')
+  }
+}