From a8112ee6044412796b8b3476a4da0205f55a9f43 Mon Sep 17 00:00:00 2001 From: Anton Date: Sat, 6 Jan 2024 17:00:44 +0100 Subject: [PATCH] owned item basics and item field adjustments --- src/Components/Map/Layer.tsx | 79 ++++++++++++------- .../Map/Subcomponents/ItemFormPopup.tsx | 10 +-- .../ItemPopupComponents/HeaderView.tsx | 12 ++- .../ItemPopupComponents/PopupButton.tsx | 4 +- .../Map/Subcomponents/ItemViewPopup.tsx | 3 +- src/types.ts | 6 +- 6 files changed, 72 insertions(+), 42 deletions(-) diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index 53287af9..0913a410 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -14,9 +14,26 @@ import { useLocation } from 'react-router-dom'; import { useAssetApi } from '../AppShell/hooks/useAssets' import { getValue } from '../../Utils/GetValue' -export const Layer = (props: LayerProps) => { - - const [itemFormPopup, setItemFormPopup] = useState(null); +export const Layer = ( { + data, + children, + name='places', + menuIcon='MapPinIcon', + menuText='add new place', + menuColor='#2E7D32', + markerIcon='circle-solid', + markerShape='circle', + markerDefaultColor='#777', + api, + itemTitleField='name', + itemTextField='text', + itemAvatarField, + itemColorField, + itemOwnerField, + setItemFormPopup, + itemFormPopup, + clusterRef +}: LayerProps) => { const filterTags = useFilterTags(); @@ -41,15 +58,15 @@ export const Layer = (props: LayerProps) => { useEffect(() => { - props.data && setItemsData(props); - props.api && setItemsApi(props); - }, [props.data, props.api]) + data && setItemsData({data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemTitleField, itemTextField, itemAvatarField, itemColorField, setItemFormPopup, itemFormPopup, clusterRef}); + api && setItemsApi({data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, api, itemTitleField, itemTextField, itemAvatarField, itemColorField, setItemFormPopup, itemFormPopup, clusterRef}); + }, [data, api]) useMapEvents({ popupopen: (e) => { const item = Object.entries(leafletRefs).find(r => r[1].popup == e.popup)?.[1].item; - if (item?.layer?.name == props.name && window.location.pathname.split("/")[2] != item.id) { - window.history.pushState({}, "", `/${props.name}/${item.id}`) + if (item?.layer?.name == name && window.location.pathname.split("/")[2] != item.id) { + window.history.pushState({}, "", `/${name}/${item.id}`) let title = ""; if(item.name) title = item.name; else if (item.layer?.itemTitleField) title = getValue(item, item.layer.itemTitleField); @@ -63,13 +80,13 @@ export const Layer = (props: LayerProps) => { map.closePopup(); } else { - if (window.location.pathname.split("/")[1] == props.name) { + if (window.location.pathname.split("/")[1] == name) { if (window.location.pathname.split("/")[2]) { const id = window.location.pathname.split("/")[2] const marker = leafletRefs[id]?.marker; if (marker && marker != null) { - marker !== null && props.clusterRef?.current?.zoomToShowLayer(marker, () => { + marker !== null && clusterRef?.current?.zoomToShowLayer(marker, () => { marker.openPopup(); }); const item = leafletRefs[id]?.item; @@ -96,7 +113,7 @@ export const Layer = (props: LayerProps) => { {items && items. filter(item => item.text). - filter(item => item.layer?.name === props.name)?. + filter(item => item.layer?.name === name)?. filter(item => filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.id === tag.id)))?. filter(item => { @@ -108,13 +125,13 @@ export const Layer = (props: LayerProps) => { map((item: Item) => { const tags = getItemTags(item); - let color1 = "#666"; + let color1 = markerDefaultColor; let color2 = "RGBA(35, 31, 32, 0.2)"; - if (props.itemColorField) color1 = getValue(item, props.itemColorField); + if (itemColorField) color1 = getValue(item, itemColorField); else if (tags && tags[0]) { color1 = tags[0].color; } - if (tags && tags[0] && props.itemColorField) color2 = tags[0].color; + if (tags && tags[0] && itemColorField) color2 = tags[0].color; else if (tags && tags[1]) { color2 = tags[1].color; } @@ -122,19 +139,20 @@ export const Layer = (props: LayerProps) => { { if (!(item.id in leafletRefs)) r && addMarker(item, r); - }} icon={MarkerIconFactory(props.markerShape, color1, color2, props.markerIcon)} key={item.id} position={[item.position.coordinates[1], item.position.coordinates[0]]}> + }} icon={MarkerIconFactory(markerShape, color1, color2, markerIcon)} key={item.id} position={[item.position.coordinates[1], item.position.coordinates[0]]}> { - (props.children && React.Children.toArray(props.children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemView") ? - React.Children.toArray(props.children).map((child) => + (children && React.Children.toArray(children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemView") ? + React.Children.toArray(children).map((child) => React.isValidElement(child) && child.props.__TYPE === "ItemView" ? { if (!(item.id in leafletRefs)) r && addPopup(item, r as Popup); }} key={item.id + item.name} - title={props.itemTitleField && item ? getValue(item, props.itemTitleField) : undefined} - avatar={props.itemAvatarField && item ? assetsApi.url + getValue(item, props.itemAvatarField) : undefined} + title={itemTitleField && item ? getValue(item, itemTitleField) : undefined} + avatar={itemAvatarField && item ? assetsApi.url + getValue(item, itemAvatarField) : undefined} + owner={itemOwnerField && item ? getValue(item, itemOwnerField) : undefined} item={item} - setItemFormPopup={props.setItemFormPopup}> + setItemFormPopup={setItemFormPopup}> {child} : "" @@ -144,29 +162,30 @@ export const Layer = (props: LayerProps) => { { if (!(item.id in leafletRefs)) r && addPopup(item, r as Popup); - }} title={props.itemTitleField && item ? getValue(item, props.itemTitleField) : undefined} - avatar={props.itemAvatarField && item ? assetsApi.url + getValue(item, props.itemAvatarField) : undefined} + }} title={itemTitleField && item ? getValue(item, itemTitleField) : undefined} + avatar={itemAvatarField && item ? assetsApi.url + getValue(item, itemAvatarField) : undefined} + owner={itemOwnerField && item ? getValue(item, itemOwnerField) : undefined} item={item} - setItemFormPopup={props.setItemFormPopup} /> + setItemFormPopup={setItemFormPopup} /> ) } - {item.name? item.name : getValue(item, props.itemTitleField)} + {item.name? item.name : getValue(item, itemTitleField)} ); }) } - {//{props.children}} + {//{children}} } - {props.itemFormPopup && props.itemFormPopup.layer!.name == props.name && - (props.children && React.Children.toArray(props.children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemForm") ? - React.Children.toArray(props.children).map((child) => + {itemFormPopup && itemFormPopup.layer!.name == name && + (children && React.Children.toArray(children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemForm") ? + React.Children.toArray(children).map((child) => React.isValidElement(child) && child.props.__TYPE === "ItemForm" ? - {child} + {child} : "" ) : <> - + ) } diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx index cbcacb2f..e78f874f 100644 --- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx @@ -18,7 +18,7 @@ export interface ItemFormPopupProps { layer: LayerProps, item?: Item, children?: React.ReactNode, - setItemFormPopup: React.Dispatch> + setItemFormPopup?: React.Dispatch> } export function ItemFormPopup(props: ItemFormPopupProps) { @@ -76,23 +76,23 @@ export function ItemFormPopup(props: ItemFormPopupProps) { map.closePopup(); } else { - + const uuid = crypto.randomUUID(); let success = false; try { - await props.layer.api?.createItem!({...formItem, id: crypto.randomUUID() }); + await props.layer.api?.createItem!({...formItem, id: uuid }); success = true; } catch (error) { toast.error(error.toString()); } if(success) { - addItem({...formItem, id: crypto.randomUUID(), layer: props.layer, user_created: user}); + addItem({...formItem, id: uuid, layer: props.layer, user_created: user}); toast.success("New item created"); resetFilterTags(); } setSpinner(false); map.closePopup(); } - props.setItemFormPopup(null); + props.setItemFormPopup!(null); } diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx index 0452be4c..a4109b77 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx @@ -7,13 +7,16 @@ import { Item } from "../../../../types"; import { toast } from "react-toastify"; import { useHasUserPermission } from "../../hooks/usePermissions"; import { timeAgo } from "../../../../Utils/TimeAgo"; +import { useAuth } from "../../../Auth"; +import { useEffect } from "react"; -export function HeaderView({ item, title, avatar, setItemFormPopup }: { +export function HeaderView({ item, title, avatar, owner, setItemFormPopup }: { item: Item, title?: string, avatar?: string, + owner?: string, setItemFormPopup?: React.Dispatch> }) { @@ -23,6 +26,9 @@ export function HeaderView({ item, title, avatar, setItemFormPopup }: { const map = useMap(); const hasUserPermission = useHasUserPermission(); + const { user } = useAuth(); + + const removeItemFromMap = async (event: React.MouseEvent) => { setLoading(true); let success = false; @@ -66,7 +72,9 @@ export function HeaderView({ item, title, avatar, setItemFormPopup }: {
- {(item.layer?.api?.deleteItem || item.layer?.api?.updateItem) && (hasUserPermission(item.layer.api?.collectionName!, "delete") || hasUserPermission(item.layer.api?.collectionName!, "update")) && + {(item.layer?.api?.deleteItem || item.layer?.api?.updateItem) + && ((user && owner === user.id) || owner == undefined) + && (hasUserPermission(item.layer.api?.collectionName!, "delete") || hasUserPermission(item.layer.api?.collectionName!, "update")) &&