From 986cc507ee9e3ae1a4409ba765615b1a89e1e626 Mon Sep 17 00:00:00 2001 From: Karine Vieira Date: Fri, 7 Feb 2025 08:44:50 -0300 Subject: [PATCH 1/4] feat: Add toggle all checkbox to combobox --- lib/ruby_ui/combobox/combobox_controller.js | 7 +++++++ .../combobox/combobox_toggle_all_checkbox.rb | 20 +++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb diff --git a/lib/ruby_ui/combobox/combobox_controller.js b/lib/ruby_ui/combobox/combobox_controller.js index 7372ed40..4100fe4d 100644 --- a/lib/ruby_ui/combobox/combobox_controller.js +++ b/lib/ruby_ui/combobox/combobox_controller.js @@ -9,6 +9,7 @@ export default class extends Controller { static targets = [ "input", + "toggle", "popover", "item", "emptyState", @@ -39,6 +40,12 @@ export default class extends Controller { return input.dataset.text || input.parentElement.innerText } + toggleInputs() { + const isChecked = this.toggleTarget.checked + this.inputTargets.forEach(input => input.checked = isChecked) + this.updateTriggerContent() + } + updateTriggerContent() { const checkedInputs = this.inputTargets.filter(input => input.checked) diff --git a/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb b/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb new file mode 100644 index 00000000..2bd19817 --- /dev/null +++ b/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RubyUI + class ComboboxToggleAllCheckbox < Base + def view_template + render RubyUI::ComboboxCheckbox.new(**attrs) + end + + private + + def default_attrs + { + data: { + ruby_ui__combobox_target: "toggle", + action: "change->ruby-ui--combobox#toggleInputs" + } + } + end + end +end From 9be9965e92824a2d6f88cc0d1919de0ad737d023 Mon Sep 17 00:00:00 2001 From: Karine Vieira Date: Fri, 7 Feb 2025 13:38:06 -0300 Subject: [PATCH 2/4] applies code review suggestions --- lib/ruby_ui/combobox/combobox_controller.js | 9 ++++++--- lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb | 11 ++++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/lib/ruby_ui/combobox/combobox_controller.js b/lib/ruby_ui/combobox/combobox_controller.js index 4100fe4d..214b0134 100644 --- a/lib/ruby_ui/combobox/combobox_controller.js +++ b/lib/ruby_ui/combobox/combobox_controller.js @@ -9,7 +9,7 @@ export default class extends Controller { static targets = [ "input", - "toggle", + "toggleAll", "popover", "item", "emptyState", @@ -34,14 +34,17 @@ export default class extends Controller { if (e.target.type == "radio") { this.closePopover() } + + const isToggleAllUnchecked = this.hasToggleAllTarget && !e.target.checked + if (isToggleAllUnchecked) this.toggleAllTarget.checked = false } inputContent(input) { return input.dataset.text || input.parentElement.innerText } - toggleInputs() { - const isChecked = this.toggleTarget.checked + toggleAllItems() { + const isChecked = this.toggleAllTarget.checked this.inputTargets.forEach(input => input.checked = isChecked) this.updateTriggerContent() } diff --git a/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb b/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb index 2bd19817..5ac8beca 100644 --- a/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb +++ b/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb @@ -3,16 +3,21 @@ module RubyUI class ComboboxToggleAllCheckbox < Base def view_template - render RubyUI::ComboboxCheckbox.new(**attrs) + input(type: "checkbox", **attrs) end private def default_attrs { + class: [ + "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", + "disabled:cursor-not-allowed disabled:opacity-50" + ], data: { - ruby_ui__combobox_target: "toggle", - action: "change->ruby-ui--combobox#toggleInputs" + ruby_ui__combobox_target: "toggleAll", + action: "change->ruby-ui--combobox#toggleAllItems" } } end From 3eae4a1454810a9663d67a19156cdd64881675d1 Mon Sep 17 00:00:00 2001 From: Karine Vieira Date: Fri, 7 Feb 2025 13:45:46 -0300 Subject: [PATCH 3/4] improves method readability --- lib/ruby_ui/combobox/combobox_controller.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/ruby_ui/combobox/combobox_controller.js b/lib/ruby_ui/combobox/combobox_controller.js index 214b0134..65419242 100644 --- a/lib/ruby_ui/combobox/combobox_controller.js +++ b/lib/ruby_ui/combobox/combobox_controller.js @@ -35,8 +35,9 @@ export default class extends Controller { this.closePopover() } - const isToggleAllUnchecked = this.hasToggleAllTarget && !e.target.checked - if (isToggleAllUnchecked) this.toggleAllTarget.checked = false + if (this.hasToggleAllTarget && !e.target.checked) { + this.toggleAllTarget.checked = false + } } inputContent(input) { From 4c7ba0cb6b8b3e0fde57bcb0758d17f787275274 Mon Sep 17 00:00:00 2001 From: Karine Vieira Date: Fri, 7 Feb 2025 14:20:30 -0300 Subject: [PATCH 4/4] hides the toggle all input when using the filter --- lib/ruby_ui/combobox/combobox_controller.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/ruby_ui/combobox/combobox_controller.js b/lib/ruby_ui/combobox/combobox_controller.js index 65419242..0dd4531a 100644 --- a/lib/ruby_ui/combobox/combobox_controller.js +++ b/lib/ruby_ui/combobox/combobox_controller.js @@ -84,6 +84,12 @@ export default class extends Controller { } const filterTerm = this.searchInputTarget.value.toLowerCase() + + if (this.hasToggleAllTarget) { + if (filterTerm) this.toggleAllTarget.parentElement.classList.add("hidden") + else this.toggleAllTarget.parentElement.classList.remove("hidden") + } + let resultCount = 0 this.selectedItemIndex = null