From 7be695fa289582b3717ac78ca034bd91f09a678b Mon Sep 17 00:00:00 2001 From: shubh Date: Wed, 20 Mar 2024 09:58:56 +0400 Subject: [PATCH 1/4] reset button filter dropdown --- app/components/satis/dropdown/component.html.slim | 9 ++++----- app/components/satis/dropdown/component_controller.js | 3 +++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/components/satis/dropdown/component.html.slim b/app/components/satis/dropdown/component.html.slim index a58001e9..aa924b1b 100644 --- a/app/components/satis/dropdown/component.html.slim +++ b/app/components/satis/dropdown/component.html.slim @@ -13,11 +13,10 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle .flex.flex-auto.flex-wrap / Input where you can search input.p-1.px-2.appearance-none.outline-none.w-full.text-gray-800.dark:bg-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus] - div - / Reset button - - unless @reset_button == false - button.cursor-pointer.w-6.h-full.flex.items-center.text-gray-400.outline-none.focus:outline-none type="button" data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset focus->satis-dropdown#focus" tabindex="-1" - i.fas.fa-xmark + / Reset button + - reset_button_class=(options[:input_html][:value].present? ? "cursor-pointer w-6 h-full flex items-center text-gray-400 outline-none focus:outline-none" : "cursor-pointer w-6 h-full flex items-center text-gray-400 outline-none focus:outline-nonem hidden") + div class=reset_button_class type="button" data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset focus->satis-dropdown#focus" tabindex="-1" + i.fas.fa-xmark - unless @toggle_button == false .text-gray-300.w-8.py-1.pl-2.pr-1.border-l.flex.items-center.border-gray-200.dark:border-gray-700 / Up/down chevrons diff --git a/app/components/satis/dropdown/component_controller.js b/app/components/satis/dropdown/component_controller.js index bd4f472d..12fd779a 100644 --- a/app/components/satis/dropdown/component_controller.js +++ b/app/components/satis/dropdown/component_controller.js @@ -301,6 +301,7 @@ export default class DropdownComponentController extends ApplicationController { } this.hiddenSelectTarget.dispatchEvent(new Event("change")) + this.resetButtonTarget.classList.add("hidden") return false } @@ -319,6 +320,7 @@ export default class DropdownComponentController extends ApplicationController { selectItem(dataDiv, force = false) { const selectedValue = dataDiv.getAttribute("data-satis-dropdown-item-value") || "" + dataDiv.parentElement.parentElement.parentElement.querySelector('[data-satis-dropdown-target="resetButton"]').classList.remove("hidden") const selectedValueText = dataDiv.getAttribute("data-satis-dropdown-item-text") || "" this.copyItemAttributes(dataDiv, this.hiddenSelectTarget) // FIXME: we are now supporting multiple values; is this needed? We copy the attributes to options @@ -750,6 +752,7 @@ export default class DropdownComponentController extends ApplicationController { }) }) }) + debugger return promise } From dd43a787833160c9accfae7afe3b8004f51ef273 Mon Sep 17 00:00:00 2001 From: shubh Date: Wed, 20 Mar 2024 16:00:40 +0400 Subject: [PATCH 2/4] highlight first in list --- app/components/satis/dropdown/component.html.slim | 2 +- app/components/satis/dropdown/component_controller.js | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/components/satis/dropdown/component.html.slim b/app/components/satis/dropdown/component.html.slim index aa924b1b..9ac59f19 100644 --- a/app/components/satis/dropdown/component.html.slim +++ b/app/components/satis/dropdown/component.html.slim @@ -27,7 +27,7 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle template data-satis-dropdown-target="selectedItemsTemplate" / Container for results - .hidden.container.shadow.bg-white.border.border-gray-300.dark:text-gray-300.dark:bg-gray-800.dark:border-gray-700.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1" + .hidden.container.shadow.bg-white.border.border-gray-300.dark:text-gray-300.dark:bg-gray-800.dark:border-gray-700.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll mouseover->satis-dropdown#removehighlight" tabindex="-1" .flex.flex-col.w-full data-satis-dropdown-target="items" - options[:collection]&.each do |item| - data_attrs = item.try(:third) ? item.third : {} diff --git a/app/components/satis/dropdown/component_controller.js b/app/components/satis/dropdown/component_controller.js index 12fd779a..b1b14541 100644 --- a/app/components/satis/dropdown/component_controller.js +++ b/app/components/satis/dropdown/component_controller.js @@ -443,6 +443,9 @@ export default class DropdownComponentController extends ApplicationController { this.toggleButtonTarget.querySelector(".fa-chevron-up").classList.remove("hidden") this.toggleButtonTarget.querySelector(".fa-chevron-down").classList.add("hidden") } + if (this.searchInputTarget.value.length === 0 ){ + this.itemsTarget.firstChild.getElementsByClassName('cursor-pointer')[0].classList.add('highlighted') + } } hideResultsList(event) { @@ -752,7 +755,6 @@ export default class DropdownComponentController extends ApplicationController { }) }) }) - debugger return promise } @@ -976,4 +978,8 @@ export default class DropdownComponentController extends ApplicationController { return item != null; } + + removehighlight(){ + this.itemsTargets[0].getElementsByClassName('highlighted')[0]?.classList.remove("highlighted") + } } From bc72201176104c24f9fe42b669e7f48aabc9c0f3 Mon Sep 17 00:00:00 2001 From: shubh Date: Wed, 20 Mar 2024 16:15:38 +0400 Subject: [PATCH 3/4] highlight first in list --- app/components/satis/dropdown/component_controller.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/components/satis/dropdown/component_controller.js b/app/components/satis/dropdown/component_controller.js index b1b14541..b9853d96 100644 --- a/app/components/satis/dropdown/component_controller.js +++ b/app/components/satis/dropdown/component_controller.js @@ -202,6 +202,8 @@ export default class DropdownComponentController extends ApplicationController { if (this.hasResults) { if (!this.resultsShown) this.showResultsList(event) + this.itemsTargets[0].getElementsByClassName('highlighted')[0]?.classList.remove("highlighted") + this.moveDown() } // prevent the cursor from jumping to the beginning of the input and scrolling in some cases From bdb27da12a0660603cea2e4ac3f12bb0570be815 Mon Sep 17 00:00:00 2001 From: shubh Date: Thu, 15 Aug 2024 17:30:49 +0400 Subject: [PATCH 4/4] merge develop --- app/components/satis/dropdown/component.html.slim | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/satis/dropdown/component.html.slim b/app/components/satis/dropdown/component.html.slim index e0ba4071..d8aa8d79 100644 --- a/app/components/satis/dropdown/component.html.slim +++ b/app/components/satis/dropdown/component.html.slim @@ -13,10 +13,10 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle .flex.flex-auto.flex-wrap / Input where you can search input.p-1.px-2.appearance-none.outline-none.w-full.sts-dropdown-input.text-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus] - / Reset button - - reset_button_class=(options[:input_html][:value].present? ? "cursor-pointer w-6 h-full flex items-center text-gray-400 outline-none focus:outline-none" : "cursor-pointer w-6 h-full flex items-center text-gray-400 outline-none focus:outline-nonem hidden") - div class=reset_button_class type="button" data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset focus->satis-dropdown#focus" tabindex="-1" - i.fas.fa-xmark + / Reset button + - reset_button_class=(options[:input_html][:value].present? ? "cursor-pointer w-6 h-full flex items-center text-gray-400 outline-none focus:outline-none" : "cursor-pointer w-6 h-full flex items-center text-gray-400 outline-none focus:outline-none hidden") + div class=reset_button_class type="button" data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset focus->satis-dropdown#focus" tabindex="-1" + i.fas.fa-xmark - unless @toggle_button == false .text-gray-300.w-8.py-1.pl-2.pr-1.flex.items-center.dark:border-gray-700 / Up/down chevrons