antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed search issues

Browse Source
This commit is contained in:
Anton 2024-01-13 19:27:02 +01:00
parent 25ec60b3a1
commit 1ed18decf1
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/Components/Map/Subcomponents/Controls/SearchControl.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react' import * as React from 'react'
import { useAddFilterTag, useSetSearchPhrase } from '../../hooks/useFilter' import { useAddFilterTag, useFilterTags, useResetFilterTags, useSetSearchPhrase } from '../../hooks/useFilter'
import useWindowDimensions from '../../hooks/useWindowDimension'; import useWindowDimensions from '../../hooks/useWindowDimension';
import axios from 'axios'; import axios from 'axios';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
@ -9,6 +9,7 @@ import { useDebounce } from '../../hooks/useDebounce';
import { useTags } from '../../hooks/useTags'; import { useTags } from '../../hooks/useTags';
import { useItems } from '../../hooks/useItems'; import { useItems } from '../../hooks/useItems';
import { useLeafletRefs } from '../../hooks/useLeafletRefs'; import { useLeafletRefs } from '../../hooks/useLeafletRefs';
import { getValue } from '../../../../Utils/GetValue';
@ -26,6 +27,8 @@ export const SearchControl = ({ clusterRef }) => {
const items = useItems(); const items = useItems();
const leafletRefs = useLeafletRefs(); const leafletRefs = useLeafletRefs();
const addFilterTag = useAddFilterTag(); const addFilterTag = useAddFilterTag();
const resetFilterTags = useResetFilterTags();
const filterTags = useFilterTags();
useDebounce(() => { useDebounce(() => {
const searchGeo = async () => { const searchGeo = async () => {
@ -40,7 +43,10 @@ export const SearchControl = ({ clusterRef }) => {
} }
}; };
searchGeo(); searchGeo();
setItemsResults(items.filter(item => item.name?.toLowerCase().includes(value.toLowerCase()) || item.text?.toLowerCase().includes(value.toLowerCase()))) setItemsResults(items.filter(item => {
if (item.layer?.itemTitleField) item.name = getValue(item, item.layer.itemTitleField)
return item.name?.toLowerCase().includes(value.toLowerCase()) || item.text?.toLowerCase().includes(value.toLowerCase())
}))
setTagsResults(tags.filter(tag => tag.id?.toLowerCase().includes(value.toLowerCase()))) setTagsResults(tags.filter(tag => tag.id?.toLowerCase().includes(value.toLowerCase())))
@ -52,7 +58,7 @@ export const SearchControl = ({ clusterRef }) => {
return (<> return (<>
{!(windowDimensions.height < 500) && {!(windowDimensions.height < 500) &&
<div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '> <div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '>
<input type="text" placeholder="search ..." className="tw-input tw-input-bordered tw-w-full tw-shadow-xl tw-rounded-lg" <input type="text" placeholder="search ..." autoComplete="off" className="tw-input tw-input-bordered tw-w-full tw-shadow-xl tw-rounded-lg"
ref={searchInput} ref={searchInput}
onChange={(e) => setValue(e.target.value)} onChange={(e) => setValue(e.target.value)}
onFocus={() => setHideSuggestions(false)} onFocus={() => setHideSuggestions(false)}
@ -61,7 +67,7 @@ export const SearchControl = ({ clusterRef }) => {
setHideSuggestions(true); setHideSuggestions(true);
}, 200); }, 200);
}} /> }} />
{hideSuggestions || Array.from(geoResults).length == 0 && itemsResults.length == 0 && tagsResults.length == 0 || value.length==0 ? "" : {hideSuggestions || Array.from(geoResults).length == 0 && itemsResults.length == 0 && tagsResults.length == 0 || value.length == 0 ? "" :
<div className='tw-card tw-card-body tw-bg-base-100 tw-p-4 tw-mt-2 tw-z-1000 tw-shadow-xl'> <div className='tw-card tw-card-body tw-bg-base-100 tw-p-4 tw-mt-2 tw-z-1000 tw-shadow-xl'>
{tagsResults.length > 0 && {tagsResults.length > 0 &&
<div className='tw-flex tw-flex-wrap tw-max-h-16 tw-overflow-hidden'> <div className='tw-flex tw-flex-wrap tw-max-h-16 tw-overflow-hidden'>
@ -79,15 +85,22 @@ export const SearchControl = ({ clusterRef }) => {
{itemsResults.slice(0, 10).map(item => ( {itemsResults.slice(0, 10).map(item => (
<div key={item.id} className='tw-cursor-pointer hover:tw-font-bold' onClick={() => { <div key={item.id} className='tw-cursor-pointer hover:tw-font-bold' onClick={() => {
const marker = Object.entries(leafletRefs).find(r => r[1].item == item)?.[1].marker; const marker = Object.entries(leafletRefs).find(r => r[1].item == item)?.[1].marker;
marker !== null && clusterRef?.current?.zoomToShowLayer(marker, () => {
marker?.openPopup(); if (filterTags.length > 0) {
}); marker !== null && window.history.pushState({}, "", `/${item.layer.name}/${item.id}`)
resetFilterTags();
}
else {
marker !== null && clusterRef?.current?.zoomToShowLayer(marker, () => {
marker?.openPopup();
});
}
} }
}>{item.name}</div> }>{item.name}</div>
))} ))}
{Array.from(geoResults).length > 0 && (itemsResults.length > 0 || tagsResults.length > 0) && <hr></hr>} {Array.from(geoResults).length > 0 && (itemsResults.length > 0 || tagsResults.length > 0) && <hr></hr>}
{Array.from(geoResults).map((geo) => ( {Array.from(geoResults).map((geo) => (
<div className='tw-cursor-pointer hover:tw-font-bold' key={geo?.properties.osm_id} <div className='tw-cursor-pointer hover:tw-font-bold' key={Math.random()}
onClick={() => { onClick={() => {
searchInput.current?.blur(); searchInput.current?.blur();
if (geo.properties.extent) map.fitBounds(new LatLngBounds(new LatLng(geo.properties.extent[1], geo.properties.extent[0]), new LatLng(geo.properties.extent[3], geo.properties.extent[2]))); if (geo.properties.extent) map.fitBounds(new LatLngBounds(new LatLng(geo.properties.extent[1], geo.properties.extent[0]), new LatLng(geo.properties.extent[3], geo.properties.extent[2])));