Merge pull request #524 from common-group/feature/explore-filter-by-s…

…tate-name

✨ busca pelo nome completo do estado no filtro de cidades e estados

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}")`);
         });
 

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<ExploreSearchFilterSelectProps, ExploreSearchFilterSelectState> {
+    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 (
+            <div class='explore-filter-wrapper'>
+                <div onclick={onToggleSearchBox} class='explore-span-filter'>
+                    <div class='explore-span-filter-name'>
+                        <div class='explore-mobile-label'>
+                            {mobileLabel}
+                        </div>
+                        <div class='inline-block'>
+                            {selectedItem}
+                        </div>
+                    </div>
+                    <div
+                        class={`${hasItemSelected ? 'fa fa-times' : 'fa fa-angle-down' } inline-block`}
+                        onclick={(event) => {
+                            if (hasItemSelected) {
+                                onSelect(null)
+                                event.stopPropagation()
+                                openSearchControl(false)
+                            } else {
+                                onToggleSearchBox(event)
+                            }
+                        }}
+                    >    
+                    </div>
+                </div>
+                {
+                    openSearchControl() &&
+                    <div class='explore-filter-select big w-clearfix' style='display: block'>
+                        <a onclick={onToggleSearchBox} href='#' class='modal-close fa fa-close fa-lg w-hidden-main w-hidden-medium w-inline-block'></a>
+                        <div class='w-form'>
+                            <form class='position-relative'>
+                                <a href='#' class='btn-search w-inline-block'>
+                                    <img src='https://uploads-ssl.webflow.com/57ba58b4846cc19e60acdd5b/57ba58b4846cc19e60acdda7_lupa.png' alt='lupa' class='header-lupa'/>
+                                </a>
+                                <input 
+                                    oncreate={(vnode) => (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'
+                                />
+                                <div class='table-outer search-cities-pre-result'>
+                                    {
+                                        isLoading() ?
+                                            h.loader()
+                                            :
+                                            foundItems.length === 0 ?
+                                                <div class='table-row fontsize-smallest fontcolor-secondary'>
+                                                    <a 
+                                                        href='#'
+                                                        class='fontsize-smallest link-hidden-light'
+                                                        onclick={onClickToSelect(null)} 
+                                                    >
+                                                        {noneSelected}
+                                                    </a>
+                                                </div>
+                                                :
+                                                foundItems.map(item => (
+                                                    <div class='table-row fontsize-smallest fontcolor-secondary'>
+                                                        <a 
+                                                            href='#'
+                                                            class='fontsize-smallest link-hidden-light'
+                                                            onclick={onClickToSelect(item)}
+                                                        >
+                                                            {itemToString(item)}
+                                                        </a>
+                                                    </div>
+                                                ))
+                                    }
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                }
+            </div>
+        )
+    }
+}

legacy/src/h.ts

@@ -1339,14 +1339,14 @@ function RedrawStream<T>(data : T, onUpdate = (param : T) => {}) {
  * @template T
  * @returns {{ (newData : T) => T, toggle() : T }}
  */
-function RedrawToggleStream(firstState, secondState) {
-    const _data = prop(firstState);
+function RedrawToggleStream<T>(firstState : T, secondState : T) {
+    const _data = prop<T>(firstState);
 
     /**
      * @param {T} newData
      * @returns {T}
      */
-    function streamAccessor(newData) {
+    function streamAccessor(newData : T) {
         if (newData !== undefined) {
             _data(newData);
             redraw();

legacy/src/vms/cities-search-vm.ts

@@ -26,12 +26,21 @@ export async function searchCitiesGroupedByState(inputText: string) : Promise<Ci
 export async function searchCities(inputText : string) : Promise<City[]> {
 
     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<City> {