adding dropwdown menu

tnc-ca-geo · Nov 7, 2024 · 1868c61 · 1868c61
1 parent e667c90
commit 1868c61
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 61 deletions.
diff --git a/src/features/filters/FiltersPanelFooter.jsx b/src/features/filters/FiltersPanelFooter.jsx
@@ -1,18 +1,9 @@
 import React from 'react';
 import { styled, keyframes } from '../../theme/stitches.config.js';
 import { selectUserCurrentRoles } from '../auth/authSlice.js';
-import {
-  hasRole,
-  READ_STATS_ROLES,
-  DELETE_IMAGES_ROLES,
-  EXPORT_DATA_ROLES,
-} from '../auth/roles.js';
+import { hasRole, READ_STATS_ROLES } from '../auth/roles.js';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  selectImagesCount,
-  selectImagesCountLoading,
-  setDeleteImagesAlertOpen,
-} from '../images/imagesSlice.js';
+import { selectImagesCount, selectImagesCountLoading } from '../images/imagesSlice.js';
 import {
   selectModalOpen,
   selectSelectedProject,
@@ -21,14 +12,15 @@ import {
   fetchProjects,
 } from '../projects/projectsSlice.js';
 import { toggleOpenLoupe } from '../loupe/loupeSlice.js';
-import { InfoCircledIcon, DownloadIcon, SymbolIcon, TrashIcon } from '@radix-ui/react-icons';
+import { InfoCircledIcon, SymbolIcon } from '@radix-ui/react-icons';
 import IconButton from '../../components/IconButton.jsx';
 import {
   Tooltip,
   TooltipContent,
   TooltipArrow,
   TooltipTrigger,
 } from '../../components/Tooltip.jsx';
+import FiltersPanelFooterDropdown from './FiltersPanelFooterDropdown.jsx';
 
 const RefreshButton = styled('div', {
   height: '100%',
@@ -46,15 +38,7 @@ const InfoButton = styled('div', {
   padding: '0 $1',
 });
 
-const ExportCSVButton = styled('div', {
-  height: '100%',
-  borderLeft: '1px solid $border',
-  display: 'flex',
-  alignItems: 'center',
-  padding: '0 $1',
-});
-
-const DeleteImagesButton = styled('div', {
+const DropDownButton = styled('div', {
   height: '100%',
   borderLeft: '1px solid $border',
   display: 'flex',
@@ -118,6 +102,7 @@ const FiltersPanelFooter = () => {
   };
 
   const handleModalToggle = (content) => {
+    console.log(content);
     dispatch(setModalOpen(!modalOpen));
     dispatch(setModalContent(content));
   };
@@ -152,46 +137,6 @@ const FiltersPanelFooter = () => {
           </TooltipContent>
         </Tooltip>
       )}
-      {hasRole(userRoles, EXPORT_DATA_ROLES) && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <ExportCSVButton>
-              <IconButton
-                variant="ghost"
-                size="large"
-                onClick={() => handleModalToggle('export-modal')}
-              >
-                <DownloadIcon />
-              </IconButton>
-            </ExportCSVButton>
-          </TooltipTrigger>
-          <TooltipContent side="top" sideOffset={5}>
-            Export data
-            <TooltipArrow />
-          </TooltipContent>
-        </Tooltip>
-      )}
-      {hasRole(userRoles, DELETE_IMAGES_ROLES) && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DeleteImagesButton>
-              <IconButton
-                variant="ghost"
-                size="large"
-                onClick={() => {
-                  dispatch(setDeleteImagesAlertOpen(true));
-                }}
-              >
-                <TrashIcon />
-              </IconButton>
-            </DeleteImagesButton>
-          </TooltipTrigger>
-          <TooltipContent side="top" sideOffset={5}>
-            Delete all filtered images
-            <TooltipArrow />
-          </TooltipContent>
-        </Tooltip>
-      )}
       <Tooltip>
         <TooltipTrigger asChild>
           <RefreshButton>
@@ -205,6 +150,9 @@ const FiltersPanelFooter = () => {
           <TooltipArrow />
         </TooltipContent>
       </Tooltip>
+      <DropDownButton>
+        <FiltersPanelFooterDropdown handleModalToggle={handleModalToggle} />
+      </DropDownButton>
     </StyledFiltersPanelFooter>
   );
 };

diff --git a/src/features/filters/FiltersPanelFooterDropdown.jsx b/src/features/filters/FiltersPanelFooterDropdown.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { styled } from '../../theme/stitches.config';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuArrow,
+} from '../../components/Dropdown.jsx';
+import { selectUserCurrentRoles } from '../auth/authSlice.js';
+import { hasRole, DELETE_IMAGES_ROLES, EXPORT_DATA_ROLES } from '../auth/roles.js';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { setDeleteImagesAlertOpen } from '../images/imagesSlice';
+
+const StyledDropdownMenuTrigger = styled(DropdownMenuTrigger, {
+  height: '100%',
+  width: '40px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: 'none',
+  backgroundColor: 'transparent',
+  padding: '0',
+});
+
+const FiltersPanelFooterDropdown = (props) => {
+  const dispatch = useDispatch();
+  const userRoles = useSelector(selectUserCurrentRoles);
+
+  const handleDeleteImageItemClick = () => {
+    dispatch(setDeleteImagesAlertOpen(true));
+  };
+
+  return (
+    <DropdownMenu>
+      <StyledDropdownMenuTrigger size="large">
+        <DotsHorizontalIcon />
+      </StyledDropdownMenuTrigger>
+      <DropdownMenuContent sideOffset={5}>
+        {hasRole(userRoles, EXPORT_DATA_ROLES) && (
+          <DropdownMenuItem onClick={() => props.handleModalToggle('export-modal')}>
+            Export data
+          </DropdownMenuItem>
+        )}
+        {hasRole(userRoles, DELETE_IMAGES_ROLES) && (
+          <DropdownMenuItem onClick={handleDeleteImageItemClick}>
+            Delete Filtered Images
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuArrow offset={12} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default FiltersPanelFooterDropdown;