diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index fa46abab..91284a5a 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -30,6 +30,7 @@ export const Layer = ({ api, itemType, itemNameField = 'name', + itemSubnameField, itemTextField = 'text', itemAvatarField, itemColorField, @@ -41,6 +42,7 @@ export const Layer = ({ itemNeedsField, onlyOnePerOwner = false, customEditLink, + customEditParameter, setItemFormPopup, itemFormPopup, clusterRef @@ -55,7 +57,6 @@ export const Layer = ({ const addMarker = useAddMarker(); const addPopup = useAddPopup(); const leafletRefs = useLeafletRefs(); - const resetFilterTags = useResetFilterTags(); const location = useLocation(); @@ -76,8 +77,8 @@ export const Layer = ({ useEffect(() => { - data && setItemsData({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemType, itemNameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, setItemFormPopup, itemFormPopup, clusterRef }); - api && setItemsApi({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemType, itemNameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, setItemFormPopup, itemFormPopup, clusterRef }); + data && setItemsData({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemType, itemNameField, itemSubnameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, customEditParameter, setItemFormPopup, itemFormPopup, clusterRef }); + api && setItemsApi({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemType, itemNameField, itemSubnameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, customEditParameter, setItemFormPopup, itemFormPopup, clusterRef }); }, [data, api]) useMapEvents({ @@ -103,9 +104,8 @@ export const Layer = ({ if (window.location.pathname.split("/")[2]) { const id = window.location.pathname.split("/")[2] const marker = leafletRefs[id]?.marker; - resetFilterTags(); - if (marker && filterTags.length == 0) { - marker !== null && clusterRef?.zoomToShowLayer(marker, () => { + if (marker) { + marker && clusterRef.hasLayer(marker) && clusterRef?.zoomToShowLayer(marker, () => { marker.openPopup(); }); const item = leafletRefs[id]?.item; diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index abbe2a67..ad28b28b 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -116,12 +116,11 @@ export const SearchControl = () => { {itemsResults.slice(0, 5).map(item => (
{ const marker = Object.entries(leafletRefs).find(r => r[1].item == item)?.[1].marker; - resetFilterTags(); - if(marker && filterTags.length == 0){ - navigate(`/${item.layer.name}/${item.id}`) + if(marker){ + navigate(`/${item.layer.name}/${item.id}?${new URLSearchParams(window.location.search)}`) } else { - navigate("item/"+item.id) + navigate("item/"+item.id+"?"+new URLSearchParams(window.location.search)) } } diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx index 4f81c846..400b1f1f 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx @@ -10,7 +10,7 @@ import { useMap } from "react-leaflet"; -export function HeaderView({ item, api, editCallback, deleteCallback, setPositionCallback, itemNameField, itemAvatarField, loading, hideMenu = false, big = false }: { +export function HeaderView({ item, api, editCallback, deleteCallback, setPositionCallback, itemNameField, itemSubnameField, itemAvatarField, loading, hideMenu = false, big = false, truncateSubname = true, hideSubname = false }: { item: Item, api?: ItemsApi, editCallback?: any, @@ -18,10 +18,12 @@ export function HeaderView({ item, api, editCallback, deleteCallback, setPositio setPositionCallback?: any, itemNameField?: string, itemAvatarField?: string, + itemSubnameField?: string, loading?: boolean, hideMenu?: boolean, big?: boolean, - updatePosition?: boolean + hideSubname?: boolean, + truncateSubname?:boolean }) { @@ -31,8 +33,10 @@ export function HeaderView({ item, api, editCallback, deleteCallback, setPositio const navigate = useNavigate(); const assetsApi = useAssetApi(); - const avatar = itemAvatarField && getValue(item, itemAvatarField) ? assetsApi.url + getValue(item, itemAvatarField) + `${big ? "?width=160&heigth=160": "?width=80&heigth=80"}` : item.layer?.itemAvatarField && item && getValue(item, item.layer?.itemAvatarField) && assetsApi.url + getValue(item, item.layer?.itemAvatarField) + `${big ? "?width=160&heigth=160": "?width=80&heigth=80"}`; + const avatar = itemAvatarField && getValue(item, itemAvatarField) ? assetsApi.url + getValue(item, itemAvatarField) + `${big ? "?width=160&heigth=160" : "?width=80&heigth=80"}` : item.layer?.itemAvatarField && item && getValue(item, item.layer?.itemAvatarField) && assetsApi.url + getValue(item, item.layer?.itemAvatarField) + `${big ? "?width=160&heigth=160" : "?width=80&heigth=80"}`; const title = itemNameField ? getValue(item, itemNameField) : item.layer?.itemNameField && item && getValue(item, item.layer?.itemNameField); + const subtitle = itemSubnameField ? getValue(item, itemSubnameField) : item.layer?.itemSubnameField && item && getValue(item, item.layer?.itemSubnameField); + const openDeleteModal = async (event: React.MouseEvent) => { @@ -44,15 +48,27 @@ export function HeaderView({ item, api, editCallback, deleteCallback, setPositio return ( <> -
-
-
- {avatar && - } - {title&& title} - -
-
e.stopPropagation()} className={`${big ? "tw-mt-5":"tw-mt-1"}`}> +
+
+
+ {avatar && ( + {item.name+" + )} +
+
+ {title} +
+ {subtitle && !hideSubname &&
+ {subtitle} +
} +
+
+
+
e.stopPropagation()} className={`${big ? "tw-mt-5" : "tw-mt-1"}`}> {(api?.deleteItem || item.layer?.api?.updateItem) && (hasUserPermission(api?.collectionName!, "delete", item) || hasUserPermission(api?.collectionName!, "update", item)) && !hideMenu && @@ -64,20 +80,20 @@ export function HeaderView({ item, api, editCallback, deleteCallback, setPositio diff --git a/src/Components/Profile/OverlayItemProfile.tsx b/src/Components/Profile/OverlayItemProfile.tsx index 2f70f0b0..5bdf3f25 100644 --- a/src/Components/Profile/OverlayItemProfile.tsx +++ b/src/Components/Profile/OverlayItemProfile.tsx @@ -6,7 +6,6 @@ import { Item } from '../../types'; import { useMap } from 'react-leaflet'; import { LatLng } from 'leaflet'; import { PopupStartEndInput, StartEndView, TextView } from '../Map'; -import useWindowDimensions from '../Map/hooks/useWindowDimension'; import { useAddTag, useTags } from '../Map/hooks/useTags'; import { useFilterTags, useResetFilterTags } from '../Map/hooks/useFilter'; import { useHasUserPermission } from '../Map/hooks/usePermissions'; @@ -76,6 +75,8 @@ export function OverlayItemProfile() { const itemId = location.pathname.split("/")[2]; const item = items.find(i => i.id === itemId); item && setItem(item); + console.log(item); + }, [items,location]) @@ -84,23 +85,38 @@ export function OverlayItemProfile() { if (item) { if(item.position) { const marker = Object.entries(leafletRefs).find(r => r[1].item == item)?.[1].marker; - marker && clusterRef?.zoomToShowLayer(marker, () => { + marker && clusterRef.hasLayer(marker) && clusterRef?.zoomToShowLayer(marker, () => { const bounds = map.getBounds(); - const x = bounds.getEast() - bounds.getWest() - map.setView(new LatLng(item?.position?.coordinates[1]!, item?.position?.coordinates[0]! + x / 4), undefined, {duration: 1})} + const x = bounds.getEast() - bounds.getWest(); + map.setView(new LatLng(item?.position?.coordinates[1]!, item?.position?.coordinates[0]! + x / 4), undefined, {duration: 1}); + } ); } else { - const parent = items.find(i => i.id == item.parent); + + const parent = getFirstAncestor(item); + const marker = Object.entries(leafletRefs).find(r => r[1].item == parent)?.[1].marker; - marker && clusterRef?.zoomToShowLayer(marker, () => { + marker && clusterRef.hasLayer(marker) && clusterRef?.zoomToShowLayer(marker, () => { const bounds = map.getBounds(); - const x = bounds.getEast() - bounds.getWest() - map.setView(new LatLng(parent?.position?.coordinates[1]!, parent?.position?.coordinates[0]! + x / 4), undefined, {duration: 1})} + const x = bounds.getEast() - bounds.getWest(); + map.setView(new LatLng(parent?.position?.coordinates[1]!, parent?.position?.coordinates[0]! + x / 4), undefined, {duration: 1}); + } ); } } }, [item]) + + + const getFirstAncestor = (item: Item): Item | undefined => { + const parent = items.find(i => i.id === item.parent); + if (parent?.parent) { + return getFirstAncestor(parent); + } else { + return parent; + } + }; + @@ -120,7 +136,7 @@ export function OverlayItemProfile() { const item = items.find(i => i.id == r.related_items_id) item && setRelations(current => [...current, item]) }) - }, [item]) + }, [item, activeTab]) useEffect(() => { item && item.user_created && hasUserPermission("items", "update", item) && setUpdatePermission(true); @@ -156,14 +172,14 @@ export function OverlayItemProfile() { let success = false; try { - await layer?.api?.createItem!({ ...formItem, id: uuid, type: type }); + await layer?.api?.createItem!({ ...formItem, id: uuid, type: type, parent: item.id }); await linkItem(uuid); success = true; } catch (error) { toast.error(error.toString()); } if (success) { - addItem({ ...formItem, id: uuid, type: type, layer: layer, user_created: user }); + addItem({ ...formItem, id: uuid, type: type, layer: layer, user_created: user, parent: item.id }); toast.success("New item created"); resetFilterTags(); } @@ -238,10 +254,10 @@ export function OverlayItemProfile() { return ( <> {item && - + <> - navigate("/edit-item/" + item.id)} setPositionCallback={()=>{map.closePopup();setSelectPosition(item); navigate("/")}} big /> + navigate("/edit-item/" + item.id)} setPositionCallback={()=>{map.closePopup();setSelectPosition(item); navigate("/")}} big truncateSubname={false}/>
diff --git a/src/Components/Profile/OverlayItemProfileSettings.tsx b/src/Components/Profile/OverlayItemProfileSettings.tsx index 951347c0..56c8cd1c 100644 --- a/src/Components/Profile/OverlayItemProfileSettings.tsx +++ b/src/Components/Profile/OverlayItemProfileSettings.tsx @@ -22,6 +22,7 @@ export function OverlayItemProfileSettings() { const [id, setId] = useState(""); const [name, setName] = useState(""); + const [subname, setSubname] = useState(""); const [text, setText] = useState(""); const [image, setImage] = useState(""); const [color, setColor] = useState(""); @@ -68,7 +69,7 @@ export function OverlayItemProfileSettings() { - changedItem = { id: id, name: name, text: text, color: color, position: item.position, ...image.length > 10 && { image: image }}; + changedItem = { id: id, name: name, subname: subname, text: text, color: color, position: item.position, ...image.length > 10 && { image: image }}; // update profile item in current state //const item = items.find(i => i.layer?.itemOwnerField && getValue(i, i.layer?.itemOwnerField).id === id); @@ -108,7 +109,10 @@ export function OverlayItemProfileSettings() {
- setName(v)} containerStyle='tw-grow tw-ml-6 tw-my-auto ' /> +
+ setName(v)} containerStyle='tw-grow tw-input-md' /> + setSubname(v)} containerStyle='tw-grow tw-input-sm tw-px-4 tw-mt-1' /> +
diff --git a/src/Components/Templates/ItemsIndexPage.tsx b/src/Components/Templates/ItemsIndexPage.tsx index 780e75a6..8146492f 100644 --- a/src/Components/Templates/ItemsIndexPage.tsx +++ b/src/Components/Templates/ItemsIndexPage.tsx @@ -23,7 +23,7 @@ type breadcrumb = { } -export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField, children }: { api: ItemsApi, url: string, parameterField: string, breadcrumbs: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string, children?: ReactNode }) => { +export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField, itemSubnameField, children }: { api: ItemsApi, url: string, parameterField: string, breadcrumbs: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string, itemSubnameField: string, children?: ReactNode }) => { console.log(itemSymbolField); @@ -47,13 +47,10 @@ export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemName setItems(items as any); } - const assetsApi = useAssetApi(); const navigate = useNavigate(); const tags = useTags(); const addTag = useAddTag(); - const addItem = useAddItem(); - const resetFilterTags = useResetFilterTags(); const { user } = useAuth(); @@ -138,7 +135,7 @@ export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemName items?.map((i, k) => { return (
navigate(url + getValue(i, parameterField))}> - navigate("/edit-item/"+i.id)} deleteCallback={()=>deleteItem(i)}> + navigate("/edit-item/"+i.id)} deleteCallback={()=>deleteItem(i)}>
diff --git a/src/Components/Templates/MapOverlayPage.tsx b/src/Components/Templates/MapOverlayPage.tsx index 150f6af5..fd84d9ba 100644 --- a/src/Components/Templates/MapOverlayPage.tsx +++ b/src/Components/Templates/MapOverlayPage.tsx @@ -7,7 +7,7 @@ export function MapOverlayPage({ children, className, backdrop, card = true }: { const closeScreen = () => { - navigate(`/`); + navigate(`/${window.location.search? window.location.search : ""}`); } const navigate = useNavigate(); diff --git a/src/types.ts b/src/types.ts index 3beff9b3..f7698326 100644 --- a/src/types.ts +++ b/src/types.ts @@ -23,6 +23,7 @@ export interface LayerProps { api?: ItemsApi, itemType: string, itemNameField?: string, + itemSubnameField?: string, itemTextField?: string, itemAvatarField?: string, itemColorField?: string, @@ -34,6 +35,7 @@ export interface LayerProps { itemNeedsField?: string, onlyOnePerOwner?: boolean, customEditLink?: string, + customEditParameter?: string, setItemFormPopup?: React.Dispatch>, itemFormPopup?: ItemFormPopupProps | null, clusterRef?: any @@ -53,6 +55,7 @@ export class Item { layer?: LayerProps; relations?: Relation[]; parent?:string; + subname?: string; [key: string]: any; constructor(id:string,name:string,text:string,position:Geometry, layer?: LayerProps, api?: ItemsApi){ this.id = id;