diyoanggara
/
MIF_E31221222
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fix suggestion doesnt appear when handleSearchTypeSelect trigger

This commit is contained in:
vergiLgood1 2025-05-05 00:19:30 +07:00
parent 1b5fc21731
commit 125b281275
2 changed files with 115 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
sigap-website/app/_components/action-search-bar.tsx
View File

@ -169,6 +169,20 @@ const ActionSearchBar = forwardRef<HTMLInputElement, ActionSearchBarProps>(
}
}, [activeAction, onChange, value]);
useEffect(() => {
if (activeAction?.prefix && onChange) {
if (!value?.startsWith(activeAction.prefix)) {
onChange(activeAction.prefix + (value || "").replace(activeAction.prefix || "", ""));
// Trigger the onChange handler immediately with the prefix
// This ensures suggestions appear right away
if (value === "") {
onChange(activeAction.prefix);
}
}
}
}, [activeAction, onChange, value]);
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;

198
sigap-website/app/_components/map/controls/top-controls.tsx
View File

@ -218,20 +218,23 @@ export default function TopControl({
setSearchValue(prefix);
setIsInputValid(true);
const initialSuggestions = EXPANDED_SAMPLE_DATA.filter(item => {
if (actionId === 'crime_id' && item.id.startsWith('CR-')) {
return true;
} else if (actionId === 'incident_id' && item.id.startsWith('CI-')) {
return true;
} else if (actionId === 'description' || actionId === 'address') {
return true;
} else if (actionId === 'coordinates') {
return false;
}
return false;
});
// Immediately filter and show suggestions based on the selected search type
let initialSuggestions: Array<{ id: string, description: string }> = [];
setSuggestions(initialSuggestions);
if (actionId === 'crime_id') {
initialSuggestions = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CR-'));
} else if (actionId === 'incident_id') {
initialSuggestions = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CI-'));
} else if (actionId === 'description' || actionId === 'address') {
initialSuggestions = EXPANDED_SAMPLE_DATA;
}
console.log("Initial suggestions count:", initialSuggestions.length);
// Force a re-render by setting suggestions in the next tick
setTimeout(() => {
setSuggestions(initialSuggestions);
}, 0);
setTimeout(() => {
if (searchInputRef.current) {
@ -241,8 +244,87 @@ export default function TopControl({
}
}, 50);
}
}
// Create a helper function for filtering suggestions
const filterSuggestions = (searchType: string, searchText: string): Array<{ id: string, description: string }> => {
let filtered: Array<{ id: string, description: string }> = [];
if (searchType === 'crime_id') {
if (!searchText || searchText === 'CR-') {
filtered = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CR-'));
} else {
filtered = EXPANDED_SAMPLE_DATA.filter(item =>
item.id.startsWith('CR-') &&
(item.id.toLowerCase().includes(searchText.toLowerCase()) ||
item.description.toLowerCase().includes(searchText.toLowerCase()))
);
}
}
else if (searchType === 'incident_id') {
if (!searchText || searchText === 'CI-') {
filtered = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CI-'));
} else {
filtered = EXPANDED_SAMPLE_DATA.filter(item =>
item.id.startsWith('CI-') &&
(item.id.toLowerCase().includes(searchText.toLowerCase()) ||
item.description.toLowerCase().includes(searchText.toLowerCase()))
);
}
}
else if (searchType === 'description') {
if (!searchText) {
filtered = EXPANDED_SAMPLE_DATA;
} else {
filtered = EXPANDED_SAMPLE_DATA.filter(item =>
item.description.toLowerCase().includes(searchText.toLowerCase())
);
}
}
else if (searchType === 'address') {
if (!searchText) {
filtered = EXPANDED_SAMPLE_DATA;
} else {
filtered = EXPANDED_SAMPLE_DATA.filter(item =>
item.description.toLowerCase().includes(searchText.toLowerCase())
);
}
}
return filtered;
};
const handleSearchChange = (value: string) => {
const currentSearchType = selectedSearchType ?
ACTIONS.find(action => action.id === selectedSearchType) : null;
if (currentSearchType?.prefix && currentSearchType.prefix.length > 0) {
if (!value.startsWith(currentSearchType.prefix)) {
value = currentSearchType.prefix;
}
}
setSearchValue(value);
if (currentSearchType?.regex) {
if (!value || value === currentSearchType.prefix) {
setIsInputValid(true);
} else {
setIsInputValid(currentSearchType.regex.test(value));
}
} else {
setIsInputValid(true);
}
if (!selectedSearchType) {
setSuggestions([]);
return;
}
// Use the helper function to filter suggestions
setSuggestions(filterSuggestions(selectedSearchType, value));
}
const handleClearSearchType = () => {
setSelectedSearchType(null);
setSearchValue("");
@ -290,79 +372,6 @@ export default function TopControl({
setSelectedSuggestion(null);
};
const handleSearchChange = (value: string) => {
const currentSearchType = selectedSearchType ?
ACTIONS.find(action => action.id === selectedSearchType) : null;
if (currentSearchType?.prefix && currentSearchType.prefix.length > 0) {
if (!value.startsWith(currentSearchType.prefix)) {
value = currentSearchType.prefix;
}
}
setSearchValue(value);
if (currentSearchType?.regex) {
if (!value || value === currentSearchType.prefix) {
setIsInputValid(true);
} else {
setIsInputValid(currentSearchType.regex.test(value));
}
} else {
setIsInputValid(true);
}
if (!selectedSearchType) {
setSuggestions([]);
return;
}
let filteredSuggestions: Array<{ id: string, description: string }> = [];
const searchText = value.toLowerCase();
if (currentSearchType?.id === 'crime_id') {
filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item =>
item.id.startsWith('CR-') &&
(item.id.toLowerCase().includes(searchText) ||
item.description.toLowerCase().includes(searchText))
);
}
else if (currentSearchType?.id === 'incident_id') {
filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item =>
item.id.startsWith('CI-') &&
(item.id.toLowerCase().includes(searchText) ||
item.description.toLowerCase().includes(searchText))
);
}
else if (currentSearchType?.id === 'description') {
filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item =>
item.description.toLowerCase().includes(searchText)
);
}
else if (currentSearchType?.id === 'address') {
filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item =>
item.description.toLowerCase().includes(searchText)
);
}
else if (currentSearchType?.id === 'coordinates') {
filteredSuggestions = [];
}
if (!value || (currentSearchType?.prefix && value === currentSearchType.prefix)) {
if (currentSearchType?.id === 'crime_id') {
filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CR-'));
}
else if (currentSearchType?.id === 'incident_id') {
filteredSuggestions = EXPANDED_SAMPLE_DATA.filter(item => item.id.startsWith('CI-'));
}
else if (currentSearchType?.id === 'description' || currentSearchType?.id === 'address') {
filteredSuggestions = EXPANDED_SAMPLE_DATA;
}
}
setSuggestions(filteredSuggestions);
};
const toggleSelectors = () => {
setShowSelectors(!showSelectors)
}
@ -371,6 +380,9 @@ export default function TopControl({
setShowSearch(!showSearch)
if (!showSearch && onControlChange) {
onControlChange("search" as ITopTooltipsMapId)
setSelectedSearchType(null);
setSearchValue("");
setSuggestions([]);
}
}
@ -578,7 +590,7 @@ export default function TopControl({
</div>
)}
{suggestions.length > 0 && (
{(suggestions.length > 0 && selectedSearchType) && (
<div className="mt-2 max-h-[300px] overflow-y-auto border border-border rounded-md bg-background/80 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
<div className="sticky top-0 bg-muted/70 backdrop-blur-sm px-3 py-2 border-b border-border">
<p className="text-xs text-muted-foreground">
@ -615,7 +627,7 @@ export default function TopControl({
</div>
)}
{searchValue.length > (selectedSearchType && ACTIONS.find(a => a.id === selectedSearchType)?.prefix?.length || 0) &&
{selectedSearchType && searchValue.length > (ACTIONS.find(a => a.id === selectedSearchType)?.prefix?.length || 0) &&
suggestions.length === 0 && (
<div className="mt-2 p-3 border border-border rounded-md bg-background/80 text-center">
<p className="text-sm text-muted-foreground">No matching incidents found</p>
@ -642,15 +654,7 @@ export default function TopControl({
) : (
<Card className="p-4 border border-border">
<div className="flex justify-between items-start mb-4">
<h3 className="text-lg font-semibold">{selectedSuggestion?.id}</h3>
{/* <Button
variant="ghost"
size="sm"
onClick={handleCloseInfoBox}
className="h-6 w-6 p-0 rounded-full"
>
<XCircle size={16} />
</Button> */}
<h3 className="text-lg font-semibold">{selectedSuggestion?.id}</h3>
</div>
{selectedSuggestion && (