From 5bbd4714b686e97f41448659c3070db74cfbde88 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Mon, 22 Apr 2024 22:38:39 +0200 Subject: [PATCH] some adjustments for dynamic maps --- src/Components/AppShell/AppShell.tsx | 4 +-- src/Components/AppShell/NavBar.tsx | 18 ++++++---- src/Components/Gaming/Quests.tsx | 2 +- src/Components/Map/Layer.tsx | 35 +++++++++---------- .../Map/Subcomponents/AddButton.tsx | 4 +-- .../Map/Subcomponents/ItemFormPopup.tsx | 8 ++--- src/Components/Profile/ActionsButton.tsx | 5 ++- src/Components/Profile/OverlayItemProfile.tsx | 10 +++--- .../Templates/OverlayItemsIndexPage.tsx | 16 ++++----- src/types.ts | 9 ++++- 10 files changed, 59 insertions(+), 52 deletions(-) diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index d1e383c3..e15fb2ca 100644 --- a/src/Components/AppShell/AppShell.tsx +++ b/src/Components/AppShell/AppShell.tsx @@ -16,7 +16,7 @@ import { LeafletRefsProvider } from '../Map/hooks/useLeafletRefs' import { SelectPositionProvider } from '../Map/hooks/useSelectPosition' import { ClusterRefProvider } from '../Map/hooks/useClusterRef' -export function AppShell({ appName, nameWidth, children, assetsApi }: { appName: string, nameWidth?: number, children: React.ReactNode, assetsApi: AssetsApi }) { +export function AppShell({ appName, children, assetsApi }: { appName: string, children: React.ReactNode, assetsApi: AssetsApi }) { // Create a client const queryClient = new QueryClient() @@ -46,7 +46,7 @@ export function AppShell({ appName, nameWidth, children, assetsApi }: { appName: draggable pauseOnHover theme="light" /> - +
{children}
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index 02650dfc..bfb0b6ed 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -2,12 +2,12 @@ import { useAuth } from "../Auth" import { Link } from "react-router-dom"; import { toast } from "react-toastify"; import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon' -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useItems } from "../Map/hooks/useItems"; import { Item } from "../../types"; -export default function NavBar({ appName, nameWidth = 200}: { appName: string, nameWidth?: number }) { +export default function NavBar({ appName}: { appName: string }) { const { isAuthenticated, user, logout } = useAuth(); @@ -16,15 +16,21 @@ export default function NavBar({ appName, nameWidth = 200}: { appName: string, n const items = useItems(); useEffect(() => { - const profile = user && items.find(i => i.user_created.id === user.id && i.type === "user"); + const profile = user && items.find(i => (i.user_created.id === user.id) && i.layer?.itemType.name === "user"); profile ? setUserProfile(profile) : setUserProfile({id: crypto.randomUUID(), name: user?.first_name, text: ""}); - }, [user, items]) useEffect(() => { }, [userProfile]) + const nameRef = useRef(null); + const [nameWidth, setNameWidth] = useState(0); + + useEffect(() => { + nameRef && setNameWidth(nameRef.current.scrollWidth) + }, [nameRef, appName]) + const onLogout = () => { @@ -58,8 +64,8 @@ export default function NavBar({ appName, nameWidth = 200}: { appName: string, n
-
-

{appName}

+
+

{appName}

diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx index 54237d26..0fc968b9 100644 --- a/src/Components/Gaming/Quests.tsx +++ b/src/Components/Gaming/Quests.tsx @@ -20,7 +20,7 @@ export function Quests() { const items = useItems(); useEffect(() => { - setProfie(items.find(i => i.user_created.id === user?.id && i.type =="user")) + setProfie(items.find(i => i.user_created?.id === user?.id && i.layer?.itemType.name == "user" && i.user_created.id != null)) }, [items, user]) diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index 91284a5a..80b38536 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -84,9 +84,9 @@ export const Layer = ({ useMapEvents({ popupopen: (e) => { const item = Object.entries(leafletRefs).find(r => r[1].popup == e.popup)?.[1].item; - if (item?.layer?.name == name && window.location.pathname.split("/")[2] != item.id) { + if (item?.layer?.name == name && window.location.pathname.split("/")[1] != item.id) { let params = new URLSearchParams(window.location.search); - window.history.pushState({}, "", `/${name}/${item.id}` + `${params.toString() !== "" ? `?${params}` : ""}`) + window.history.pushState({}, "", `/${item.id}` + `${params.toString() !== "" ? `?${params}` : ""}`) let title = ""; if (item.name) title = item.name; else if (item.layer?.itemNameField) title = getValue(item, item.layer.itemNameField); @@ -96,26 +96,23 @@ export const Layer = ({ }) const openPopup = () => { - if (window.location.pathname.split("/").length <= 2 || window.location.pathname.split("/")[2] === "") { + if (window.location.pathname.split("/").length <= 1 || window.location.pathname.split("/")[1] === "") { map.closePopup(); } else { - 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 && clusterRef.hasLayer(marker) && clusterRef?.zoomToShowLayer(marker, () => { - marker.openPopup(); - }); - const item = leafletRefs[id]?.item; - let title = ""; - if (item.name) title = item.name; - else if (item.layer?.itemNameField) title = getValue(item, item.layer.itemNameField); - document.title = `${document.title.split("-")[0]} - ${title}`; - document.querySelector('meta[property="og:title"]')?.setAttribute("content", item.name); - document.querySelector('meta[property="og:description"]')?.setAttribute("content", item.text); - } + if (window.location.pathname.split("/")[1]) { + const id = window.location.pathname.split("/")[1] + const ref = leafletRefs[id]; + if (ref?.marker && ref.item.layer?.name === name) { + ref.marker && clusterRef.hasLayer(ref.marker) && clusterRef?.zoomToShowLayer(ref.marker, () => { + ref.marker.openPopup(); + }); + let title = ""; + if (ref.item.name) title = ref.item.name; + else if (ref.item.layer?.itemNameField) title = getValue(ref.item.name, ref.item.layer.itemNameField); + document.title = `${document.title.split("-")[0]} - ${title}`; + document.querySelector('meta[property="og:title"]')?.setAttribute("content", ref.item.name); + document.querySelector('meta[property="og:description"]')?.setAttribute("content", ref.item.text); } } } diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx index ffec3be9..f549fd48 100644 --- a/src/Components/Map/Subcomponents/AddButton.tsx +++ b/src/Components/Map/Subcomponents/AddButton.tsx @@ -34,9 +34,9 @@ export default function AddButton({ triggerAction }: { triggerAction: React.Disp
diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx index a7963008..cc348d66 100644 --- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx @@ -82,7 +82,9 @@ export function ItemFormPopup(props: ItemFormPopupProps) { map.closePopup(); } else { - const item = items.find(i => i.user_created.id === user?.id && i.type === props.layer.itemType) + const item = items.find(i => i.user_created.id === user?.id && i.layer?.itemType.name === props.layer.itemType.name); + console.log(item); + const uuid = crypto.randomUUID(); let success = false; try { @@ -92,9 +94,7 @@ export function ItemFormPopup(props: ItemFormPopupProps) { } catch (error) { toast.error(error.toString()); } - if(success) { - console.log(props.layer); - + if(success) { props.layer.onlyOnePerOwner && item && updateItem({...item, ...formItem}); (!props.layer.onlyOnePerOwner || !item) && addItem({...formItem, name: formItem.name ? formItem.name : user?.first_name , user_created: user, type: props.layer.itemType, id: uuid, layer: props.layer}); toast.success("New item created"); diff --git a/src/Components/Profile/ActionsButton.tsx b/src/Components/Profile/ActionsButton.tsx index 1bdc5fbc..464f0fd2 100644 --- a/src/Components/Profile/ActionsButton.tsx +++ b/src/Components/Profile/ActionsButton.tsx @@ -1,8 +1,7 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useHasUserPermission, usePermissions } from "../Map/hooks/usePermissions"; import DialogModal from "../Templates/DialogModal"; import { useItems } from "../Map/hooks/useItems"; -import { TextView } from "../Map"; import { HeaderView } from "../Map/Subcomponents/ItemPopupComponents/HeaderView"; import { Item } from "../../types"; @@ -20,7 +19,7 @@ export function ActionButton({ item, triggerAddButton, triggerItemSelected, exis const items = useItems(); - const filterdItems = items.filter(i => i.type == itemType).filter(i => !existingRelations.some(s => s.id == i.id)).filter(i => i.id != item.id) + const filterdItems = items.filter(i => i.layer?.itemType.name == itemType).filter(i => !existingRelations.some(s => s.id == i.id)).filter(i => i.id != item.id) diff --git a/src/Components/Profile/OverlayItemProfile.tsx b/src/Components/Profile/OverlayItemProfile.tsx index 1adf50aa..915717fb 100644 --- a/src/Components/Profile/OverlayItemProfile.tsx +++ b/src/Components/Profile/OverlayItemProfile.tsx @@ -276,7 +276,7 @@ export function OverlayItemProfile() {
{relations && relations.map(i => { - if (i.type == 'project') return ( + if (i.layer?.itemType.name == 'project') return (
navigate('/item/' + i.id)}> @@ -316,7 +316,7 @@ export function OverlayItemProfile() {
{relations && relations.map(i => { - if (i.type == 'event') return ( + if (i.layer?.itemType.name == 'event') return (
navigate('/item/' + i.id)}> @@ -332,7 +332,7 @@ export function OverlayItemProfile() { {addItemPopupType == "event" ?
submitNewItem(e, addItemPopupType)} > -
+
: <> } - {updatePermission && { setAddItemPopupType("user"); scroll() }} color={item.color}>} + {updatePermission && { setAddItemPopupType("event"); scroll() }} color={item.color}>}
@@ -356,7 +356,7 @@ export function OverlayItemProfile() {
{relations && relations.map(i => { - if (i.type == 'user') return ( + if (i.layer?.itemType.name == 'user') return (
navigate('/item/' + i.id)}> diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx index 8bb49d84..2da12665 100644 --- a/src/Components/Templates/OverlayItemsIndexPage.tsx +++ b/src/Components/Templates/OverlayItemsIndexPage.tsx @@ -22,7 +22,7 @@ type breadcrumb = { } -export const OverlayItemsIndexPage = ({url, type, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField, itemSubnameField, plusButton = true, children }: { type: string, url: string, parameterField: string, breadcrumbs: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string, itemSubnameField: string, plusButton?: boolean, children?: ReactNode }) => { +export const OverlayItemsIndexPage = ({url, layerName, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField, itemSubnameField, plusButton = true, children }: { layerName: string, url: string, parameterField: string, breadcrumbs: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string, itemSubnameField: string, plusButton?: boolean, children?: ReactNode }) => { console.log(itemSymbolField); @@ -56,10 +56,9 @@ export const OverlayItemsIndexPage = ({url, type, parameterField, breadcrumbs, i }, [items]) + const layer = layers.find(l => l.name == layerName); - const layer = layers.find(l => l.itemType == type); - const submitNewItem = async (evt: any) => { evt.preventDefault(); const formItem: Item = {} as Item; @@ -77,7 +76,7 @@ export const OverlayItemsIndexPage = ({url, type, parameterField, breadcrumbs, i const uuid = crypto.randomUUID(); let success = false; try { - await layer?.api?.createItem!({ ...formItem, id: uuid, type: type }); + await layer?.api?.createItem!({ ...formItem, id: uuid}); success = true; } catch (error) { toast.error(error.toString()); @@ -85,7 +84,7 @@ export const OverlayItemsIndexPage = ({url, type, parameterField, breadcrumbs, i if (success) { toast.success("New item created"); } - addItem({...formItem, user_created: user, type: type, id: uuid, layer: layer}); + addItem({...formItem, user_created: user, id: uuid, layer: layer}); setLoading(false); setAddItemPopupType(""); } @@ -107,7 +106,6 @@ export const OverlayItemsIndexPage = ({url, type, parameterField, breadcrumbs, i } - return ( <> @@ -123,7 +121,7 @@ export const OverlayItemsIndexPage = ({url, type, parameterField, breadcrumbs, i
{ - items?.filter(i=>i.type === type).map((i, k) => { + items?.filter(i=>i.layer?.name === layerName).map((i, k) => { return (
navigate(url + getValue(i, parameterField))}> navigate("/edit-item/" + i.id)} deleteCallback={() => deleteItem(i)}> @@ -136,7 +134,7 @@ export const OverlayItemsIndexPage = ({url, type, parameterField, breadcrumbs, i }) } - {addItemPopupType == "project" ? + {addItemPopupType == "place" ?
submitNewItem(e)} > @@ -161,7 +159,7 @@ export const OverlayItemsIndexPage = ({url, type, parameterField, breadcrumbs, i - {plusButton && { setAddItemPopupType("project"); scroll(); }} color={'#777'} collection='items' />} + {plusButton && { setAddItemPopupType("place"); scroll(); }} color={'#777'} collection='items' />} diff --git a/src/types.ts b/src/types.ts index f7698326..1d94f338 100644 --- a/src/types.ts +++ b/src/types.ts @@ -11,6 +11,7 @@ export interface UtopiaMapProps { } export interface LayerProps { + id?: string, data?: Item[], children?: React.ReactNode, name: string, @@ -21,7 +22,7 @@ export interface LayerProps { markerShape: string, markerDefaultColor: string, api?: ItemsApi, - itemType: string, + itemType: ItemType, itemNameField?: string, itemSubnameField?: string, itemTextField?: string, @@ -41,6 +42,12 @@ export interface LayerProps { clusterRef?: any } +export interface ItemType { + name: string; + [key: string]: any; + +} + export class Item { id: string ; name: string;