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

fix not showing items with grouptypes on maps not filtered

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-21 12:02:40 +02:00
parent b640e2bc97
commit ed3446dc13
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Components/Map/Layer.tsx
View File

@ -6,7 +6,7 @@ import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
import { useAllItemsLoaded, useItems, useSetItemsApi, useSetItemsData } from './hooks/useItems' import { useAllItemsLoaded, useItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { ItemFormPopup } from './Subcomponents/ItemFormPopup' import { ItemFormPopup } from './Subcomponents/ItemFormPopup'
import { useFilterTags, useIsGroupTypeVisible, useIsLayerVisible } from './hooks/useFilter' import { useFilterTags, useIsGroupTypeVisible, useIsLayerVisible, useVisibleGroupType } from './hooks/useFilter'
import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags' import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags'
import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs' import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
import { Popup } from 'leaflet' import { Popup } from 'leaflet'
@ -81,6 +81,8 @@ export const Layer = ({
const isGroupTypeVisible = useIsGroupTypeVisible(); const isGroupTypeVisible = useIsGroupTypeVisible();
const visibleGroupTypes = useVisibleGroupType();
useEffect(() => { useEffect(() => {
@ -149,7 +151,7 @@ export const Layer = ({
filter(item => filter(item =>
filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?. filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
filter(item => item.layer && isLayerVisible(item.layer)). filter(item => item.layer && isLayerVisible(item.layer)).
filter(item => item.group_type && isGroupTypeVisible(item.group_type)||item.group_type==null). filter(item => item.group_type && isGroupTypeVisible(item.group_type)|| visibleGroupTypes.length == 0).
map((item: Item) => { map((item: Item) => {
if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) { if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) {

13
src/Components/Map/hooks/useFilter.tsx
View File

@ -23,6 +23,7 @@ const FilterContext = createContext<UseFilterManagerResult>({
filterTags: [], filterTags: [],
searchPhrase: "", searchPhrase: "",
visibleLayers: [], visibleLayers: [],
visibleGroupTypes: [],
addFilterTag: () => { }, addFilterTag: () => { },
removeFilterTag: () => { }, removeFilterTag: () => { },
resetFilterTags: () => { }, resetFilterTags: () => { },
@ -41,6 +42,7 @@ function useFilterManager(initialTags: Tag[]): {
filterTags: Tag[]; filterTags: Tag[];
searchPhrase: string; searchPhrase: string;
visibleLayers: LayerProps[]; visibleLayers: LayerProps[];
visibleGroupTypes: string[];
addFilterTag: (tag: Tag) => void; addFilterTag: (tag: Tag) => void;
removeFilterTag: (name: string) => void; removeFilterTag: (name: string) => void;
resetFilterTags: () => void; resetFilterTags: () => void;
@ -117,11 +119,11 @@ function useFilterManager(initialTags: Tag[]): {
if(exist2) return state.filter((groupType) => groupType != action.groupType); if(exist2) return state.filter((groupType) => groupType != action.groupType);
else return [... state, action.groupType]; else return [... state, action.groupType];
case "RESET_GROUP_TYPE": case "RESET_GROUP_TYPE":
return initialLayers; return [];
default: default:
throw new Error(); throw new Error();
} }
}, initialLayers); },[]);
const [searchPhrase, searchPhraseSet] = React.useState<string>(""); const [searchPhrase, searchPhraseSet] = React.useState<string>("");
@ -227,7 +229,7 @@ function useFilterManager(initialTags: Tag[]): {
searchPhraseSet(phrase) searchPhraseSet(phrase)
}, []); }, []);
return { filterTags, addFilterTag, removeFilterTag, resetFilterTags, setSearchPhrase, searchPhrase, visibleLayers, toggleVisibleLayer, resetVisibleLayers, isLayerVisible, addVisibleLayer, addVisibleGroupType, toggleVisibleGroupType, isGroupTypeVisible }; return { filterTags, addFilterTag, removeFilterTag, resetFilterTags, setSearchPhrase, searchPhrase, visibleLayers, toggleVisibleLayer, resetVisibleLayers, isLayerVisible, addVisibleLayer, visibleGroupTypes, addVisibleGroupType, toggleVisibleGroupType, isGroupTypeVisible };
} }
export const FilterProvider: React.FunctionComponent<{ export const FilterProvider: React.FunctionComponent<{
@ -309,4 +311,9 @@ export const useToggleVisibleGroupType = (): UseFilterManagerResult["toggleVisib
export const useIsGroupTypeVisible = (): UseFilterManagerResult["isGroupTypeVisible"] => { export const useIsGroupTypeVisible = (): UseFilterManagerResult["isGroupTypeVisible"] => {
const { isGroupTypeVisible } = useContext(FilterContext); const { isGroupTypeVisible } = useContext(FilterContext);
return isGroupTypeVisible return isGroupTypeVisible
};
export const useVisibleGroupType = (): UseFilterManagerResult["visibleGroupTypes"] => {
const { visibleGroupTypes } = useContext(FilterContext);
return visibleGroupTypes;
}; };