From 5f15c3afd2e54ca3a4e82511cf001c7c7f6c60c2 Mon Sep 17 00:00:00 2001 From: Gilberto Ribeiro Date: Tue, 15 Sep 2020 18:39:03 -0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20busca=20pelo=20nome=20completo=20do?= =?UTF-8?q?=20estado=20no=20filtro=20de=20cidades=20e=20estados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../explore-search-filter-select.spec.js | 2 +- .../c/explore/explore-search-filter-select.js | 112 --------------- .../explore/explore-search-filter-select.tsx | 129 ++++++++++++++++++ legacy/src/h.ts | 6 +- legacy/src/vms/cities-search-vm.ts | 17 ++- 5 files changed, 146 insertions(+), 120 deletions(-) delete mode 100644 legacy/src/c/explore/explore-search-filter-select.js create mode 100644 legacy/src/c/explore/explore-search-filter-select.tsx diff --git a/legacy/spec/components/explore-search-filter-select.spec.js b/legacy/spec/components/explore-search-filter-select.spec.js index c3263459..c0008da8 100644 --- a/legacy/spec/components/explore-search-filter-select.spec.js +++ b/legacy/spec/components/explore-search-filter-select.spec.js @@ -63,7 +63,7 @@ describe('ExploreFilterSelect', () => { component.click(`a.fontsize-smallest.link-hidden-light:contains("${values[0].label}")`, new Event('click')); component.should.not.have(`a.fontsize-smallest.link-hidden-light`); expect(currentValue.value).toBe(values[0].value); - component.click('.inline-block.far.fa-times', new Event('click')); + component.click('.inline-block.fa.fa-times', new Event('click')); component.should.have(`.explore-span-filter-name > .inline-block:contains("${attrs.noneSelected}")`); }); diff --git a/legacy/src/c/explore/explore-search-filter-select.js b/legacy/src/c/explore/explore-search-filter-select.js deleted file mode 100644 index af978e65..00000000 --- a/legacy/src/c/explore/explore-search-filter-select.js +++ /dev/null @@ -1,112 +0,0 @@ -import m from 'mithril'; -import h from '../../h'; - -export const ExploreSearchFilterSelect = { - oninit(vnode) { - - const openSearchControl = h.RedrawToggleStream(false, true); - - vnode.state = { - openSearchControl - }; - }, - - view({ state, attrs }) { - - const onSearch = attrs.onSearch; - const onSelect = attrs.onSelect; - const isLoading = attrs.isLoading; - const itemToString = attrs.itemToString; - const mobileLabel = attrs.mobileLabel; - const hasItemSelected = attrs.selectedItem() !== null; - const noneSelected = attrs.noneSelected; - const selectedItem = hasItemSelected ? itemToString(attrs.selectedItem()) : noneSelected; - const foundItems = attrs.foundItems() || []; - const openSearchControl = state.openSearchControl; - const onToggleSearchBox = (/** @type {Event} */ event) => { - event.stopPropagation(); - openSearchControl.toggle(); - if (openSearchControl()) { - onSearch(''); - } - }; - - return m('div.explore-filter-wrapper', [ - m('div.explore-span-filter', { - onclick: onToggleSearchBox - }, [ - m('div.explore-span-filter-name', [ - m('div.explore-mobile-label', mobileLabel), - m('div.inline-block', selectedItem) - ]), - m(`.inline-block${ hasItemSelected ? '.far.fa-times' : '.fa.fa-angle-down'}[aria-hidden="true"]`, { - onclick: (/** @type {Event} */ event) => { - if (hasItemSelected) { - onSelect(null); - event.stopPropagation(); - openSearchControl(false); - } else { - onToggleSearchBox(event); - } - } - }) - ]), - ( - openSearchControl() && - ( - m('div.explore-filter-select.big.w-clearfix', { 'style': { 'display': 'block' } }, [ - m('a.modal-close.fa.fa-close.fa-lg.w-hidden-main.w-hidden-medium.w-inline-block[href="#"]', { - onclick: onToggleSearchBox - }), - m('div.w-form', [ - m('form.position-relative', [ - m('a.btn-search.w-inline-block[href="#"]', - m('img.header-lupa[src="https://uploads-ssl.webflow.com/57ba58b4846cc19e60acdd5b/57ba58b4846cc19e60acdda7_lupa.png"][alt=""]') - ), - m('input.text-field.positive.city-search.w-input[type="text"][autofocus][maxlength="256"][placeholder="Pesquise por cidade ou estado"]', { - oninput: (/** @type {Event} */ event) => onSearch(event.target.value), - onkeyup: (/** @type {Event} */ event) => onSearch(event.target.value), - }), - m('div.table-outer.search-cities-pre-result', [ - ( - isLoading() ? - h.loader() - : - ( - foundItems.length === 0 ? - ( - m('div.table-row.fontsize-smallest.fontcolor-secondary', - m('a.fontsize-smallest.link-hidden-light[href="#"]', { - onclick: (/** @type {Event} */ event) => { - event.preventDefault(); - onSelect(null); - onToggleSearchBox(event); - } - }, noneSelected) - ) - ) - : - ( - foundItems.map(item => { - return m('div.table-row.fontsize-smallest.fontcolor-secondary', - m('a.fontsize-smallest.link-hidden-light[href="#"]', { - onclick: (/** @type {Event} */ event) => { - event.preventDefault(); - onSelect(item); - onToggleSearchBox(event); - } - }, itemToString(item)) - ); - }) - ) - ) - ) - ]) - ]), - ]) - ]) - ) - ) - ]); - } -}; diff --git a/legacy/src/c/explore/explore-search-filter-select.tsx b/legacy/src/c/explore/explore-search-filter-select.tsx new file mode 100644 index 00000000..d0af8602 --- /dev/null +++ b/legacy/src/c/explore/explore-search-filter-select.tsx @@ -0,0 +1,129 @@ +import m from 'mithril' +import h from '../../h' + +export type ExploreSearchFilterSelectProps = { + onSearch(searchText : string): void + onSelect(item : any | null): void + isLoading(): boolean + itemToString(item : any) : string + mobileLabel: string + selectedItem() : any + noneSelected: string + foundItems(): any[] +} + +export type ExploreSearchFilterSelectState = { + openSearchControl: { + (newData : boolean): boolean + toggle(): boolean + } +} + +export class ExploreSearchFilterSelect implements m.Component { + oninit(vnode) { + vnode.state.openSearchControl = h.RedrawToggleStream(false, true) + } + + view({ state, attrs }) { + const onSearch = attrs.onSearch + const onSelect = attrs.onSelect + const isLoading = attrs.isLoading + const itemToString = attrs.itemToString + const mobileLabel = attrs.mobileLabel + const hasItemSelected = attrs.selectedItem() !== null + const noneSelected = attrs.noneSelected + const selectedItem = hasItemSelected ? itemToString(attrs.selectedItem()) : noneSelected + const foundItems = attrs.foundItems() || [] + const openSearchControl = state.openSearchControl + const onToggleSearchBox = (event : Event) => { + event.stopPropagation() + openSearchControl.toggle() + if (openSearchControl()) { + onSearch('') + } + } + const onClickToSelect = (item : any | null) => (event) => { + event.preventDefault() + onSelect(item) + onToggleSearchBox(event) + } + + return ( +
+
+
+
+ {mobileLabel} +
+
+ {selectedItem} +
+
+
{ + if (hasItemSelected) { + onSelect(null) + event.stopPropagation() + openSearchControl(false) + } else { + onToggleSearchBox(event) + } + }} + > +
+
+ { + openSearchControl() && +
+ +
+
+ + lupa + + (vnode.dom as HTMLElement)?.focus({})} + oninput={(event) => onSearch(event.target.value)} + onkeyup={(event) => onSearch(event.target.value)} + type='text' + placeholder='Pesquise por cidade ou estado' + class='text-field positive city-search w-input' + /> +
+ { + isLoading() ? + h.loader() + : + foundItems.length === 0 ? +
+ + {noneSelected} + +
+ : + foundItems.map(item => ( +
+ + {itemToString(item)} + +
+ )) + } +
+
+
+
+ } +
+ ) + } +} diff --git a/legacy/src/h.ts b/legacy/src/h.ts index 41856bfa..1f3ce114 100644 --- a/legacy/src/h.ts +++ b/legacy/src/h.ts @@ -1339,14 +1339,14 @@ function RedrawStream(data : T, onUpdate = (param : T) => {}) { * @template T * @returns {{ (newData : T) => T, toggle() : T }} */ -function RedrawToggleStream(firstState, secondState) { - const _data = prop(firstState); +function RedrawToggleStream(firstState : T, secondState : T) { + const _data = prop(firstState); /** * @param {T} newData * @returns {T} */ - function streamAccessor(newData) { + function streamAccessor(newData : T) { if (newData !== undefined) { _data(newData); redraw(); diff --git a/legacy/src/vms/cities-search-vm.ts b/legacy/src/vms/cities-search-vm.ts index b7f95604..a11e721b 100644 --- a/legacy/src/vms/cities-search-vm.ts +++ b/legacy/src/vms/cities-search-vm.ts @@ -26,12 +26,21 @@ export async function searchCitiesGroupedByState(inputText: string) : Promise { const filters = catarse.filtersVM({ - search_index: 'ilike' - }).order({ name: 'asc' }); + explore_search_index: 'or' + }).order({ name: 'asc' }) - filters.search_index(replaceDiacritics(inputText)); + const searchTextWithoutDiacritics = replaceDiacritics(inputText) - return await models.city.getPage(filters.parameters()); + filters.explore_search_index({ + state_name: { + 'ilike': `*${searchTextWithoutDiacritics}*` + }, + search_index: { + 'ilike': `*${searchTextWithoutDiacritics}*` + } + }) + + return await models.city.getPage(filters.parameters()) } export async function getCityById(city_id : number) : Promise {