From f817e1baf7333ab34aa3c4c134cb8db70f8338d1 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Fri, 22 Mar 2024 15:26:52 +0100 Subject: [PATCH] link and unlink profiles --- .../Map/Subcomponents/AddButton.tsx | 2 +- .../ItemPopupComponents/HeaderView.tsx | 4 +- .../Map/Subcomponents/ItemViewPopup.tsx | 7 +- src/Components/Profile/ActionsButton.tsx | 50 ++++++++++++++ .../Profile/LinkedItemsHeaderView.tsx | 66 +++++++++++++++++++ src/Components/Profile/OverlayItemProfile.tsx | 66 ++++++++++--------- src/Components/Profile/PlusButton.tsx | 3 +- 7 files changed, 159 insertions(+), 39 deletions(-) create mode 100644 src/Components/Profile/ActionsButton.tsx create mode 100644 src/Components/Profile/LinkedItemsHeaderView.tsx diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx index f57e690b..ffec3be9 100644 --- a/src/Components/Map/Subcomponents/AddButton.tsx +++ b/src/Components/Map/Subcomponents/AddButton.tsx @@ -22,7 +22,7 @@ export default function AddButton({ triggerAction }: { triggerAction: React.Disp canAddItems() ?
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx index 7d7f2692..62322e27 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx @@ -1,12 +1,10 @@ import * as React from "react" -import { useRemoveItem } from "../../hooks/useItems"; import { Item, ItemsApi } from "../../../../types"; -import { toast } from "react-toastify"; import { useHasUserPermission } from "../../hooks/usePermissions"; import { getValue } from "../../../../Utils/GetValue"; import { useAssetApi } from '../../../AppShell/hooks/useAssets' import DialogModal from "../../../Templates/DialogModal"; -import { useNavigate } from "react-router-dom"; +import { useEffect } from "react"; diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx index 4b1ba13b..785a893f 100644 --- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx @@ -5,7 +5,7 @@ import { ItemFormPopupProps } from './ItemFormPopup' import { HeaderView } from './ItemPopupComponents/HeaderView' import { TextView } from './ItemPopupComponents/TextView' import { timeAgo } from '../../../Utils/TimeAgo' -import { useState } from 'react' +import { useEffect, useState } from 'react' import { LatLng } from 'leaflet' import { useNavigate } from 'react-router-dom' import { useRemoveItem } from '../hooks/useItems' @@ -19,8 +19,9 @@ export interface ItemViewPopupProps { } -export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: any) => { + +export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: any) => { const map = useMap(); const [loading, setLoading] = React.useState(false); const removeItem = useRemoveItem(); @@ -60,7 +61,7 @@ export const ItemViewPopup = React.forwardRef((props: ItemViewPopupProps, ref: a return (
- +
{props.children ? diff --git a/src/Components/Profile/ActionsButton.tsx b/src/Components/Profile/ActionsButton.tsx new file mode 100644 index 00000000..550812d8 --- /dev/null +++ b/src/Components/Profile/ActionsButton.tsx @@ -0,0 +1,50 @@ +import { useEffect, 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"; + +export function ActionButton({ item, triggerAddButton, triggerItemSelected, existingRelations, itemType, color, collection = "items" }: { + triggerAddButton: any, + triggerItemSelected: any, + existingRelations: Item[], + itemType:string; + color: string, + collection?: string, + item: Item +}) { + const hasUserPermission = useHasUserPermission(); + const [modalOpen, setModalOpen] = useState(false); + + 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) + + + return ( + <>{hasUserPermission(collection, "create") && + <> +
+ + +
+ (setModalOpen(false))}> + {filterdItems.map(i =>
{triggerItemSelected(i.id);setModalOpen(false)}}> + +
)} + + + } + + + ) +} diff --git a/src/Components/Profile/LinkedItemsHeaderView.tsx b/src/Components/Profile/LinkedItemsHeaderView.tsx new file mode 100644 index 00000000..42943eb5 --- /dev/null +++ b/src/Components/Profile/LinkedItemsHeaderView.tsx @@ -0,0 +1,66 @@ +import * as React from "react" +import { getValue } from "../../Utils/GetValue"; +import { Item, ItemsApi } from "../../types"; +import { useAssetApi } from "../AppShell/hooks/useAssets"; +import { useHasUserPermission } from "../Map/hooks/usePermissions"; + + + + +export function LinkedItemsHeaderView({ item, unlinkCallback, itemNameField, itemAvatarField, loading }: { + item: Item, + unlinkCallback?: any, + itemNameField?: string, + itemAvatarField?: string, + loading?: boolean, +}) { + + const assetsApi = useAssetApi(); + + + const avatar = itemAvatarField && getValue(item, itemAvatarField) ? assetsApi.url + getValue(item, itemAvatarField) : item.layer?.itemAvatarField && item && getValue(item, item.layer?.itemAvatarField) && assetsApi.url + getValue(item, item.layer?.itemAvatarField); + const title = itemNameField ? getValue(item, itemNameField) : item.layer?.itemNameField && item && getValue(item, item.layer?.itemNameField); + + + + + + return ( + <> +
+
+
{ + avatar ? +
+ +
+ : + "" + } + {title ? title : item.name} + +
+
+
e.stopPropagation()}> + { + } +
+
+ + ) +} diff --git a/src/Components/Profile/OverlayItemProfile.tsx b/src/Components/Profile/OverlayItemProfile.tsx index e6f1375c..90c65b4c 100644 --- a/src/Components/Profile/OverlayItemProfile.tsx +++ b/src/Components/Profile/OverlayItemProfile.tsx @@ -1,9 +1,8 @@ -import * as React from 'react' -import { MapOverlayPage, TitleCard } from '../Templates' -import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems' +import { MapOverlayPage } from '../Templates' +import { useAddItem, useItems, useUpdateItem } from '../Map/hooks/useItems' import { useLocation, useNavigate } from 'react-router-dom' import { useEffect, useRef, useState } from 'react'; -import { Item} from '../../types'; +import { Item } from '../../types'; import { getValue } from '../../Utils/GetValue'; import { useMap } from 'react-leaflet'; import { LatLng } from 'leaflet'; @@ -11,15 +10,15 @@ import { PopupStartEndInput, StartEndView, TextView } from '../Map'; import useWindowDimensions from '../Map/hooks/useWindowDimension'; import { useAddTag, useTags } from '../Map/hooks/useTags'; import { useResetFilterTags } from '../Map/hooks/useFilter'; -import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'; import { useHasUserPermission } from '../Map/hooks/usePermissions'; -import {PlusButton} from './PlusButton'; import { TextAreaInput, TextInput } from '../Input'; import { hashTagRegex } from '../../Utils/HashTagRegex'; import { randomColor } from '../../Utils/RandomColor'; import { toast } from 'react-toastify'; import { useAuth } from '../Auth'; import { useLayers } from '../Map/hooks/useLayers'; +import { ActionButton } from './ActionsButton'; +import { LinkedItemsHeaderView } from './LinkedItemsHeaderView'; export function OverlayItemProfile() { @@ -60,23 +59,22 @@ export function OverlayItemProfile() { function scroll() { tabRef.current?.scrollIntoView(); } - + useEffect(() => { - scroll(); + scroll(); }, [addItemPopupType]) useEffect(() => { - console.log(addItemPopupType); - + console.log(addItemPopupType); + }, [addItemPopupType]) - + useEffect(() => { const itemId = location.pathname.split("/")[2]; const item = items.find(i => i.id === itemId); item && setItem(item); - hasUserPermission("items", "update", item) && setAddButton(true); const bounds = map.getBounds(); const x = bounds.getEast() - bounds.getWest() if (windowDimension.width > 768) @@ -88,16 +86,20 @@ export function OverlayItemProfile() { setActiveTab(1); }, [location]) - useEffect(() => { - + useEffect(() => { + setRelations([]); item.relations?.map(r => { const item = items.find(i => i.id == r.related_items_id) item && setRelations(current => [...current, item]) }) - }, [item, items]) + useEffect(() => { + item && item.user_created && hasUserPermission("items", "update", item) && setAddButton(true); + }, [item]) + + const submitNewItem = async (evt: any, type: string) => { evt.preventDefault(); const formItem: Item = {} as Item; @@ -114,11 +116,11 @@ export function OverlayItemProfile() { }); const uuid = crypto.randomUUID(); console.log(layers); - - const layer = layers.find(l => l.name.toLocaleLowerCase().replace("s","") == addItemPopupType.toLocaleLowerCase()) + + const layer = layers.find(l => l.name.toLocaleLowerCase().replace("s", "") == addItemPopupType.toLocaleLowerCase()) console.log(layer); - + let success = false; try { await layer?.api?.createItem!({ ...formItem, id: uuid, type: type }); @@ -137,13 +139,21 @@ export function OverlayItemProfile() { } const linkItem = async (id: string) => { - let new_relations = item.relations|| [] ; + let new_relations = item.relations || []; new_relations?.push({ items_id: item.id, related_items_id: id }) + const updatedItem = { id: item.id, relations: new_relations } + await item?.layer?.api?.updateItem!(updatedItem) + updateItem({ ...item, relations: new_relations }) + } + + const unlinkItem = async (id: string) => { + console.log(id); + + let new_relations = item.relations?.filter(r => r.related_items_id !== id) + console.log(new_relations); const updatedItem = { id: item.id, relations: new_relations } - await item?.layer?.api?.updateItem!(updatedItem) - updateItem({ ...item, relations: new_relations }) } @@ -183,7 +193,7 @@ export function OverlayItemProfile() { if (i.type == 'project') return (
navigate('/item/' + i.id)}> - navigate("/edit-item/"+i.id)}> +
@@ -197,7 +207,7 @@ export function OverlayItemProfile() {
submitNewItem(e, addItemPopupType)} >
-
: <> } - { addButton && { setAddItemPopupType("project"); scroll() }} color={item.color}>} + {addButton && { setAddItemPopupType("project"); scroll() }} color={item.color}>}
@@ -223,7 +233,7 @@ export function OverlayItemProfile() { if (i.type == 'event') return (
navigate('/item/' + i.id)}> - +
@@ -250,7 +260,7 @@ export function OverlayItemProfile() {
: <> } - { addButton && { setAddItemPopupType("event"); scroll() }} color={item.color}>} + {addButton && { setAddItemPopupType("event"); scroll() }} color={item.color}>}
@@ -259,10 +269,6 @@ export function OverlayItemProfile() {
- - - -
} diff --git a/src/Components/Profile/PlusButton.tsx b/src/Components/Profile/PlusButton.tsx index ef6990bd..0b1966f0 100644 --- a/src/Components/Profile/PlusButton.tsx +++ b/src/Components/Profile/PlusButton.tsx @@ -1,5 +1,4 @@ -import { useHasUserPermission, usePermissions } from "../Map/hooks/usePermissions"; -import { useAuth } from "../Auth"; +import { useHasUserPermission } from "../Map/hooks/usePermissions"; export function PlusButton({ triggerAction, color, collection="items" }: { triggerAction: any, color: string, collection?:string }) { const hasUserPermission = useHasUserPermission();