From ac45fe20f7e20b447d9f4f583fe85669278fa0ea Mon Sep 17 00:00:00 2001 From: Piotr Gawron <p.gawron@atcomp.pl> Date: Wed, 19 Feb 2025 12:29:29 +0100 Subject: [PATCH] allow to edit public overlays --- .../EditOverlayModal/hooks/useEditOverlay.ts | 3 ++ .../GeneralOverlays.component.tsx | 34 +++++++++++++++---- .../UserOverlaysGroup.component.tsx | 6 ++-- 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.ts b/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.ts index 6b4e2fab..3e9362e7 100644 --- a/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.ts +++ b/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.ts @@ -3,6 +3,7 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector'; import { currentEditedOverlaySelector } from '@/redux/modal/modal.selector'; import { closeModal } from '@/redux/modal/modal.slice'; import { + getAllPublicOverlaysByProjectId, getAllUserOverlaysByCreator, removeOverlay, updateOverlays, @@ -12,6 +13,7 @@ import { MapOverlay, OverlayGroup } from '@/types/models'; import React, { useState } from 'react'; import { overlayGroupsSelector } from '@/redux/overlayGroup/overlayGroup.selectors'; import { ZERO } from '@/constants/common'; +import { PROJECT_ID } from '@/constants'; type UseEditOverlayReturn = { name: string | undefined; @@ -100,6 +102,7 @@ export const useEditOverlay = (): UseEditOverlayReturn => { }); await getUserOverlaysByCreator(); + dispatch(getAllPublicOverlaysByProjectId(PROJECT_ID)); handleCloseModal(); }; diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/GeneralOverlays.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/GeneralOverlays.component.tsx index e8442c37..d8a064e0 100644 --- a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/GeneralOverlays.component.tsx +++ b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/GeneralOverlays.component.tsx @@ -1,18 +1,38 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector'; import { overlaysDataSelector } from '@/redux/overlays/overlays.selectors'; +import { userRoleSelector } from '@/redux/user/user.selectors'; +import { USER_ROLE } from '@/constants/user'; +import { UserOverlaysGroup } from '@/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup'; +import React from 'react'; import { OverlayListItem } from './OverlayListItem'; export const GeneralOverlays = (): JSX.Element => { const generalPublicOverlays = useAppSelector(overlaysDataSelector); + const role = useAppSelector(userRoleSelector); + + const isAdmin = role === USER_ROLE.ADMIN; return ( - <div className="border-b border-b-divide p-6"> - <p className="mb-5 text-sm font-semibold">Shared Overlays:</p> - <ul> - {generalPublicOverlays.map(overlay => ( - <OverlayListItem key={overlay.id} name={overlay.name} overlayId={overlay.id} /> - ))} - </ul> + <div> + {isAdmin && ( + <UserOverlaysGroup + key={0} + groupName="Shared overlays" + groupId={null} + overlays={generalPublicOverlays} + dangerouslySetExpanded + /> + )} + {!isAdmin && ( + <div className="border-b border-b-divide p-6"> + <p className="mb-5 text-sm font-semibold">Shared Overlays:</p> + <ul> + {generalPublicOverlays.map(overlay => ( + <OverlayListItem key={overlay.id} name={overlay.name} overlayId={overlay.id} /> + ))} + </ul> + </div> + )} </div> ); }; diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/UserOverlaysGroup.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/UserOverlaysGroup.component.tsx index cc982139..b18be523 100644 --- a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/UserOverlaysGroup.component.tsx +++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysGroup/UserOverlaysGroup.component.tsx @@ -21,12 +21,14 @@ type OverlayGroupProps = { groupId: number | null; groupName: string; overlays: MapOverlay[]; + dangerouslySetExpanded?: boolean; }; export const UserOverlaysGroup = ({ overlays, groupName, groupId, + dangerouslySetExpanded, }: OverlayGroupProps): React.ReactNode => { const { moveUserOverlayListItem, updateUserOverlaysOrder, isPending, userOverlaysList } = useUserOverlays(overlays, groupId); @@ -49,8 +51,6 @@ export const UserOverlaysGroup = ({ }; const openEditGroup = (): void => { - // eslint-disable-next-line no-console - console.log('Open edit group', groupId); if (overlayGroup) { dispatch(openEditOverlayGroupModal(overlayGroup)); } @@ -60,7 +60,7 @@ export const UserOverlaysGroup = ({ <DndProvider backend={HTML5Backend}> <div className="mt-2.5"> <Accordion allowZeroExpanded> - <AccordionItem className="border-b-0"> + <AccordionItem className="border-b-0" dangerouslySetExpanded={dangerouslySetExpanded}> <AccordionItemHeading> <AccordionItemButton className="px-6 text-sm font-semibold" -- GitLab