diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx index 8462bb47..c4596137 100644 --- a/src/Components/Profile/ProfileView.tsx +++ b/src/Components/Profile/ProfileView.tsx @@ -5,36 +5,32 @@ import { useEffect, useRef, useState } from 'react'; import { Item, Tag } from '../../types'; import { useMap } from 'react-leaflet'; import { LatLng } from 'leaflet'; -import { StartEndView, TextView } from '../Map'; import { useAddTag, useTags } from '../Map/hooks/useTags'; -import { useAddFilterTag, useResetFilterTags } from '../Map/hooks/useFilter'; +import { useResetFilterTags } from '../Map/hooks/useFilter'; import { useHasUserPermission } from '../Map/hooks/usePermissions'; 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 './Subcomponents/ActionsButton'; -import { LinkedItemsHeaderView } from './Subcomponents/LinkedItemsHeaderView'; import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'; import { useSelectPosition, useSetSelectPosition } from '../Map/hooks/useSelectPosition'; import { useClusterRef } from '../Map/hooks/useClusterRef'; import { useLeafletRefs } from '../Map/hooks/useLeafletRefs'; import { getValue } from '../../Utils/GetValue'; -import { TagView } from '../Templates/TagView'; -import RelationCard from "./Subcomponents/RelationCard"; -import ContactInfo from "./Subcomponents/ContactInfo"; -import ProfileSubHeader from "./Subcomponents/ProfileSubHeader"; +import { Tabs } from './Templates/Tabs'; +import { Onepager } from './Templates/Onepager'; +import { Simple } from './Templates/Simple'; export function ProfileView({ userType }: { userType: string }) { const [updatePermission, setUpdatePermission] = useState(false); const [relations, setRelations] = useState>([]); - const [activeTab, setActiveTab] = useState(1); - const [addItemPopupType, setAddItemPopupType] = useState(""); - const [loading, setLoading] = useState(false); const [offers, setOffers] = useState>([]); const [needs, setNeeds] = useState>([]); + const [loading, setLoading] = useState(false); + + const [addItemPopupType, setAddItemPopupType] = useState(""); const location = useLocation(); const items = useItems(); @@ -54,9 +50,6 @@ export function ProfileView({ userType }: { userType: string }) { const setSelectPosition = useSetSelectPosition(); const clusterRef = useClusterRef(); const leafletRefs = useLeafletRefs(); - const addFilterTag = useAddFilterTag(); - - const tabRef = useRef(null); @@ -68,26 +61,8 @@ export function ProfileView({ userType }: { userType: string }) { scroll(); }, [addItemPopupType]) - const [profile_owner, setProfileOwner] = useState(); - useEffect(() => { - setProfileOwner(items.find(i => (i.user_created?.id === item.user_created?.id) && i.layer?.itemType.name === userType)); - }, [item, items]) - - - - - const updateActiveTab = (id: number) => { - setActiveTab(id); - - let params = new URLSearchParams(window.location.search); - let urlTab = params.get("tab"); - if (!urlTab?.includes(id.toString())) - params.set("tab", `${id ? id : ""}`) - window.history.pushState('', '', "?" + params.toString()); - } - useEffect(() => { const itemId = location.pathname.split("/")[2]; const item = items.find(i => i.id === itemId); @@ -145,7 +120,6 @@ export function ProfileView({ userType }: { userType: string }) { } }, [item]) - const getFirstAncestor = (item: Item): Item | undefined => { const parent = items.find(i => i.id === item.parent); if (parent?.parent) { @@ -155,17 +129,6 @@ export function ProfileView({ userType }: { userType: string }) { } }; - - - - - useEffect(() => { - let params = new URLSearchParams(location.search); - let urlTab = params.get("tab"); - urlTab ? setActiveTab(Number(urlTab)) : setActiveTab(1); - }, [location]) - - useEffect(() => { item && hasUserPermission("items", "update", item) && setUpdatePermission(true); }, [item]) @@ -175,8 +138,6 @@ export function ProfileView({ userType }: { userType: string }) { selectPosition && map.closePopup(); }, [selectPosition]) - - const submitNewItem = async (evt: any, type: string) => { evt.preventDefault(); const formItem: Item = {} as Item; @@ -274,23 +235,12 @@ export function ProfileView({ userType }: { userType: string }) { navigate("/"); } - const typeMapping = { - 'wuerdekompass': 'Regional-Gruppe', - 'themenkompass': 'Themenkompass-Gruppe', - 'liebevoll.jetzt': 'liebevoll.jetzt', - }; - - let groupType = item.group_type ? item.group_type : 'default'; - let groupTypeText = typeMapping[groupType]; - const [template, setTemplate] = useState("") useEffect(() => { setTemplate(item.layer?.itemType.template || userType); }, [userType, item]) - - return ( <> {item && @@ -302,135 +252,15 @@ export function ProfileView({ userType }: { userType: string }) { {template == "onepager" && -
-
- -
- {item.user_created.first_name && ( - - )} - - {/* Description Section */} -
- -
- - {/* Next Appointment Section */} - {item.next_appointment && ( -
-

Nächste Termine

-
- -
-
- )}; - - {/* Relations Section */} - {/*{d.relations && (*/} - {/*
*/} - {/*

Projekte

*/} - {/* {d.relations.map((project, index) => (*/} - {/* */} - {/* ))}*/} - {/*
*/} - {/*)}*/} -
+ } {template == "simple" && -
- -
+ } {template == "tabs" && -
- updateActiveTab(1)} /> -
- {item.layer?.itemType.show_start_end && -
- } - -
- - {item.layer?.itemType.offers_and_needs && - - <> - - updateActiveTab(3)} /> -
-
-
- { - offers.length > 0 ? -
-

Offers

- < div className='tw-flex tw-flex-wrap tw-mb-4'> - { - offers.map(o => { - addFilterTag(o) - }} />) - } -
-
: "" - } - { - needs.length > 0 ? -
-

Needs

- < div className='tw-flex tw-flex-wrap tw-mb-4'> - { - needs.map(n => addFilterTag(n)} />) - } -
-
: "" - } -
-
- - - - - } - - {item.layer?.itemType.relations && - <> - updateActiveTab(7)} /> -
-
-
- {relations && relations.map(i => - - -
navigate('/item/' + i.id)}> - -
- -
-
- )} - {updatePermission && } - -
-
-
- - } - + } @@ -438,6 +268,4 @@ export function ProfileView({ userType }: { userType: string }) { } ) -} - - +} \ No newline at end of file diff --git a/src/Components/Profile/Templates/Onepager.tsx b/src/Components/Profile/Templates/Onepager.tsx index 720a2adf..a158cf85 100644 --- a/src/Components/Profile/Templates/Onepager.tsx +++ b/src/Components/Profile/Templates/Onepager.tsx @@ -1,7 +1,73 @@ -import * as React from 'react' +import { Item } from "utopia-ui/dist/types" +import { TextView } from "../../Map" +import ContactInfo from "../Subcomponents/ContactInfo" +import ProfileSubHeader from "../Subcomponents/ProfileSubHeader" +import { useEffect, useState } from "react" +import { useItems } from "../../Map/hooks/useItems" + +export const Onepager = ({item, userType}:{item: Item, userType: string}) => { + + const [profile_owner, setProfileOwner] = useState(); + const items = useItems(); + + + + useEffect(() => { + setProfileOwner(items.find(i => (i.user_created?.id === item.user_created?.id) && i.layer?.itemType.name === userType)); + }, [item, items]) + + const typeMapping = { + 'wuerdekompass': 'Regional-Gruppe', + 'themenkompass': 'Themenkompass-Gruppe', + 'liebevoll.jetzt': 'liebevoll.jetzt', +}; + +let groupType = item.group_type ? item.group_type : 'default'; +let groupTypeText = typeMapping[groupType]; -export const Onepager = () => { return ( -
Onepager
+
+
+ +
+ {item.user_created.first_name && ( + + )} + + {/* Description Section */} +
+ +
+ + {/* Next Appointment Section */} + {item.next_appointment && ( +
+

Nächste Termine

+
+ +
+
+ )}; + + {/* Relations Section */} + {/*{d.relations && (*/} + {/*
*/} + {/*

Projekte

*/} + {/* {d.relations.map((project, index) => (*/} + {/* */} + {/* ))}*/} + {/*
*/} + {/*)}*/} +
) } diff --git a/src/Components/Profile/Templates/Simple.tsx b/src/Components/Profile/Templates/Simple.tsx index f6fa8701..228622bf 100644 --- a/src/Components/Profile/Templates/Simple.tsx +++ b/src/Components/Profile/Templates/Simple.tsx @@ -1,7 +1,11 @@ import * as React from 'react' +import { TextView } from '../../Map' +import { Item } from '../../../types' -export const Simple = () => { +export const Simple = ({item}:{item: Item}) => { return ( -
Simple
+
+ +
) } diff --git a/src/Components/Profile/Templates/Tabs.tsx b/src/Components/Profile/Templates/Tabs.tsx index dd09cb9c..da97728b 100644 --- a/src/Components/Profile/Templates/Tabs.tsx +++ b/src/Components/Profile/Templates/Tabs.tsx @@ -1,7 +1,112 @@ -import * as React from 'react' +import { StartEndView, TextView } from '../../Map' +import { TagView } from '../../Templates/TagView' +import { LinkedItemsHeaderView } from '../Subcomponents/LinkedItemsHeaderView' +import { ActionButton } from '../Subcomponents/ActionsButton' +import { useEffect, useState } from 'react' +import { useAddFilterTag } from '../../Map/hooks/useFilter' +import { Item, Tag } from 'utopia-ui/dist/types' +import { useNavigate } from 'react-router-dom' + +export const Tabs = ({ item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem }: { item: Item, offers: Array, needs: Array, relations: Array, updatePermission: boolean, loading: boolean, linkItem: (id: string) => Promise, unlinkItem: (id: string) => Promise }) => { + + const addFilterTag = useAddFilterTag(); + const [activeTab, setActiveTab] = useState(1); + const navigate = useNavigate(); + + + const updateActiveTab = (id: number) => { + setActiveTab(id); + + let params = new URLSearchParams(window.location.search); + let urlTab = params.get("tab"); + if (!urlTab?.includes(id.toString())) + params.set("tab", `${id ? id : ""}`) + window.history.pushState('', '', "?" + params.toString()); + } + + useEffect(() => { + let params = new URLSearchParams(location.search); + let urlTab = params.get("tab"); + urlTab ? setActiveTab(Number(urlTab)) : setActiveTab(1); + }, [location]) -export const Tabs = () => { return ( -
Tabs
+
+ updateActiveTab(1)} /> +
+ {item.layer?.itemType.show_start_end && +
+ } + +
+ + {item.layer?.itemType.offers_and_needs && + + <> + + updateActiveTab(3)} /> +
+
+
+ { + offers.length > 0 ? +
+

Offers

+ < div className='tw-flex tw-flex-wrap tw-mb-4'> + { + offers.map(o => { + addFilterTag(o) + }} />) + } +
+
: "" + } + { + needs.length > 0 ? +
+

Needs

+ < div className='tw-flex tw-flex-wrap tw-mb-4'> + { + needs.map(n => addFilterTag(n)} />) + } +
+
: "" + } +
+
+ + + + + } + + {item.layer?.itemType.relations && + <> + updateActiveTab(7)} /> +
+
+
+ {relations && relations.map(i => + + +
navigate('/item/' + i.id)}> + +
+ +
+
+ )} + {updatePermission && } + +
+
+
+ + } + ) } diff --git a/src/Components/Profile/OverlayUserSettings.tsx b/src/Components/Profile/UserSettings.tsx similarity index 98% rename from src/Components/Profile/OverlayUserSettings.tsx rename to src/Components/Profile/UserSettings.tsx index 845131f5..9c0a0c82 100644 --- a/src/Components/Profile/OverlayUserSettings.tsx +++ b/src/Components/Profile/UserSettings.tsx @@ -13,7 +13,7 @@ import { toast } from 'react-toastify'; import { useAuth } from '../Auth'; import { TextInput } from '../Input'; -export function OverlayUserSettings() { +export function UserSettings() { const { user, updateUser, loading, token } = useAuth(); const [id, setId] = useState(""); diff --git a/src/Components/Profile/index.tsx b/src/Components/Profile/index.tsx index db977614..703d2825 100644 --- a/src/Components/Profile/index.tsx +++ b/src/Components/Profile/index.tsx @@ -1,4 +1,4 @@ -export {OverlayUserSettings} from './OverlayUserSettings' +export {UserSettings} from './UserSettings' export {PlusButton} from "./Subcomponents/PlusButton" export {ProfileView} from "./ProfileView" export {ProfileForm} from "./ProfileForm" \ No newline at end of file diff --git a/src/Components/Templates/ItemViewPage.tsx b/src/Components/Templates/ItemViewPage.tsx deleted file mode 100644 index a4d9df80..00000000 --- a/src/Components/Templates/ItemViewPage.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { useState, useEffect } from "react"; -import { useLocation } from "react-router-dom"; -import { CardPage } from "./CardPage"; -import { ItemsApi } from "../../types"; -import { getValue } from "../../Utils/GetValue"; - - -type breadcrumb = { - name: string, - path: string -} - - -export const ItemViewPage = ({ api, parents, itemNameField, itemTextField, itemImageField, itemSymbolField }: { api: ItemsApi, parents: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string }) => { - - const [item, setItem] = useState(); - - let location = useLocation(); - - - const loadProject = async () => { - if (api?.getItem) { - const project: unknown = await api?.getItem(location.pathname.split("/")[2]); - setItem(project as any); - } - } - - - - useEffect(() => { - loadProject(); - }, [api]) - - return ( - - {item && - <> - {getValue(item, itemImageField) ? -
- -
: -
- {getValue(item, itemSymbolField)} -
- } -

{getValue(item, itemTextField)}

- - - } - - - ) -} diff --git a/src/Components/Templates/index.tsx b/src/Components/Templates/index.tsx index 0538960d..bd2720a6 100644 --- a/src/Components/Templates/index.tsx +++ b/src/Components/Templates/index.tsx @@ -1,7 +1,5 @@ export {CardPage} from './CardPage' export {TitleCard} from './TitleCard' export {MapOverlayPage} from './MapOverlayPage' -export {CircleLayout} from './CircleLayout' export {MoonCalendar} from './MoonCalendar' -export {ItemViewPage} from "./ItemViewPage" export {OverlayItemsIndexPage} from "./OverlayItemsIndexPage" \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 6f376d56..7afe478e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,9 @@ export { UtopiaMap, Layer, Tags, Permissions, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, PopupTextInput, PopupButton, TextView, StartEndView, PopupCheckboxInput } from './Components/Map'; export {AppShell, Content, SideBar, Sitemap } from "./Components/AppShell" export {AuthProvider, useAuth, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage} from "./Components/Auth" -export {OverlayUserSettings, ProfileView, ProfileForm} from './Components/Profile' +export {UserSettings, ProfileView, ProfileForm} from './Components/Profile' export {Quests, Modal} from './Components/Gaming' -export {TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, CircleLayout, MoonCalendar, ItemViewPage} from './Components/Templates' +export {TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, MoonCalendar } from './Components/Templates' export {TextInput, TextAreaInput, SelectBox} from './Components/Input' import "./index.css"