From d74374d29179525a4a3e05c7a674193a983d3622 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Mon, 15 Jul 2024 11:40:55 +0200 Subject: [PATCH] profile abstraction and customizable user type --- src/Components/AppShell/AppShell.tsx | 4 +- src/Components/AppShell/NavBar.tsx | 4 +- src/Components/Profile/OverlayItemProfile.tsx | 221 ++++++++++-------- .../Profile/OverlayItemProfileSettings.tsx | 24 +- 4 files changed, 139 insertions(+), 114 deletions(-) diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index 6be2a031..ee6e7c20 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, children, assetsApi }: { appName: string, children: React.ReactNode, assetsApi: AssetsApi }) { +export function AppShell({ appName, children, assetsApi, userType }: { appName: string, children: React.ReactNode, assetsApi: AssetsApi, userType: string }) { // Create a client const queryClient = new QueryClient() @@ -47,7 +47,7 @@ export function AppShell({ appName, children, assetsApi }: { appName: string, ch pauseOnHover theme="light" />
- +
{children}
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index ab62cd8f..5570c6c2 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -7,7 +7,7 @@ import { useItems } from "../Map/hooks/useItems"; import { Item } from "../../types"; -export default function NavBar({ appName}: { appName: string }) { +export default function NavBar({ appName, userType}: { appName: string, userType: string }) { const { isAuthenticated, user, logout } = useAuth(); @@ -16,7 +16,7 @@ export default function NavBar({ appName}: { appName: string }) { const items = useItems(); useEffect(() => { - const profile = user && items.find(i => (i.user_created?.id === user.id) && i.layer?.itemType.name === "user"); + const profile = user && items.find(i => (i.user_created?.id === user.id) && i.layer?.itemType.name === userType); profile ? setUserProfile(profile) : setUserProfile({id: crypto.randomUUID(), name: user?.first_name, text: ""}); }, [user, items]) diff --git a/src/Components/Profile/OverlayItemProfile.tsx b/src/Components/Profile/OverlayItemProfile.tsx index 784cfdbc..f81f5ad3 100644 --- a/src/Components/Profile/OverlayItemProfile.tsx +++ b/src/Components/Profile/OverlayItemProfile.tsx @@ -7,7 +7,7 @@ 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 { useAddFilterTag, useResetFilterTags } from '../Map/hooks/useFilter'; import { useHasUserPermission } from '../Map/hooks/usePermissions'; import { hashTagRegex } from '../../Utils/HashTagRegex'; import { randomColor } from '../../Utils/RandomColor'; @@ -26,7 +26,7 @@ import RelationCard from "./RelationCard"; import ContactInfo from "./ContactInfo"; import ProfileSubHeader from "./ProfileSubHeader"; -export function OverlayItemProfile() { +export function OverlayItemProfile({ userType }: { userType: string }) { const [updatePermission, setUpdatePermission] = useState(false); const [relations, setRelations] = useState>([]); @@ -72,9 +72,16 @@ export function OverlayItemProfile() { useEffect(() => { - setProfile(items.find(i => (i.user_created?.id === item.user_created?.id) && i.layer?.itemType.name === "user")); + console.log(userType); + + setProfile(items.find(i => (i.user_created?.id === item.user_created?.id) && i.layer?.itemType.name === userType)); }, [item, items]) - + + useEffect(() => { + console.log(profile); + + }, [profile]) + const updateActiveTab = (id: number) => { @@ -171,7 +178,7 @@ export function OverlayItemProfile() { useEffect(() => { - item && hasUserPermission("items", "update", item) && setUpdatePermission(true); + item && hasUserPermission("items", "update", item) && setUpdatePermission(true); }, [item]) @@ -290,142 +297,154 @@ export function OverlayItemProfile() { 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 && + className={`${template == "onepager" && '!tw-p-0'} tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-[calc(100dvh-96px)] md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}> <> -
+
navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} /> - + />}
- {item.layer?.itemType.onepager && - <> - {item.user_created.first_name && ( - - )} + {template == "onepager" && + <> + {item.user_created.first_name && ( + + )} - {/* Description Section */} -
- -
- - {/* Next Appointment Section */} - {item.next_appointment && ( -
-

Nächste Termine

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

Projekte

*/} - {/* {d.relations.map((project, index) => (*/} - {/* */} - {/* ))}*/} - {/*
*/} - {/*)}*/} - - } + {/* Next Appointment Section */} + {item.next_appointment && ( +
+

Nächste Termine

+
+ +
+
+ )}; - {!item.layer?.itemType.onepager && + {/* Relations Section */} + {/*{d.relations && (*/} + {/*
*/} + {/*

Projekte

*/} + {/* {d.relations.map((project, index) => (*/} + {/* */} + {/* ))}*/} + {/*
*/} + {/*)}*/} + + } + + {template == "simple" && +
+ +
+ } + + {template == "tabs" &&
updateActiveTab(1)}/> + className={`tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`} + aria-label="Info" checked={activeTab == 1 && true} + onChange={() => updateActiveTab(1)} />
+ className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden"> {item.layer?.itemType.show_start_end &&
} - +
- {item.layer?.itemType.offers_and_needs && + {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 => { - console.log(o); - addFilterTag(o) - }} />) - } -
-
: "" - } - { - needs.length > 0 ? -
-

Needs

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

Offers

+ < div className='tw-flex tw-flex-wrap tw-mb-4'> + { + offers.map(o => { + console.log(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 => + {item.layer?.itemType.relations && + <> + updateActiveTab(7)} /> +
+
+
+ {relations && relations.map(i => -
navigate('/item/' + i.id)}> - -
- +
navigate('/item/' + i.id)}> + +
+ +
-
- )} - {updatePermission && } + )} + {updatePermission && } +
-
- - } -
+ + } +
}
diff --git a/src/Components/Profile/OverlayItemProfileSettings.tsx b/src/Components/Profile/OverlayItemProfileSettings.tsx index a1974c37..77940f8d 100644 --- a/src/Components/Profile/OverlayItemProfileSettings.tsx +++ b/src/Components/Profile/OverlayItemProfileSettings.tsx @@ -23,7 +23,7 @@ import { useHasUserPermission } from '../Map/hooks/usePermissions'; -export function OverlayItemProfileSettings() { +export function OverlayItemProfileSettings({ userType }: { userType: string }) { const typeMapping = [ { value: 'wuerdekompass', label: 'Regional-Gruppe' }, @@ -112,7 +112,7 @@ export function OverlayItemProfileSettings() { const item = items.find(i => i.id === itemId); item && setItem(item); - const layer = layers.find(l => l.itemType.name == "user") + const layer = layers.find(l => l.itemType.name == userType) !item && setItem({ id: crypto.randomUUID(), name: user ? user.first_name : "", text: "", layer: layer, new: true }) @@ -203,7 +203,7 @@ export function OverlayItemProfileSettings() { position: item.position, contact: contact, telephone: telephone, - ...markerIcon && {markerIcon: markerIcon}, + ...markerIcon && { markerIcon: markerIcon }, next_appointment: nextAppointment, ...image.length > 10 && { image: image }, ...offers.length > 0 && { offers: offer_updates }, @@ -314,10 +314,11 @@ export function OverlayItemProfileSettings() { } - useEffect(() => { - console.log(item); + const [template, setTemplate] = useState("") - }, [item]) + useEffect(() => { + setTemplate(item.layer?.itemType.template || userType); + }, [userType, item]) @@ -335,7 +336,7 @@ export function OverlayItemProfileSettings() {
- {item.layer?.itemType.onepager && ( + {template == "onepager" && (
@@ -410,13 +411,18 @@ export function OverlayItemProfileSettings() {
)} - {!item.layer?.itemType.onepager && + {template == "simple" && + { console.log(v); setText(v) }} containerStyle='tw-mt-8 tw-h-full' inputStyle='tw-h-full' /> + + } + + {template == "tabs" &&
updateActiveTab(1)} />
- { console.log(v); setText(v) }} containerStyle='tw-h-full' inputStyle='tw-h-full tw-border-t-0 tw-rounded-tl-none' /> + { console.log(v); setText(v) }} containerStyle='tw-h-full' inputStyle='tw-h-full tw-border-t-0 tw-rounded-tl-none' />
{item.layer?.itemType.offers_and_needs && <>