Skip to content

Commit

Permalink
Merge pull request #265 from tnc-ca-geo/delete-camera-fix
Browse files Browse the repository at this point in the history 
Delete camera polish
  • Loading branch information
@nathanielrindlaub
nathanielrindlaub authored Jan 4, 2025
2 parents 5387387 + 076e3a0 commit 6b5da02
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 38 deletions.
6 changes: 3 additions & 3 deletions src/components/Dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,19 @@ const itemStyles = {
fontSize: '$3',
fontWeight: '$2',
lineHeight: 1,
color: '$hiContrast',
color: '$textDark',
borderRadius: 3,
display: 'flex',
alignItems: 'center',
height: 27,
padding: '0 5px',
position: 'relative',
paddingLeft: '$2',
paddingLeft: 28,
userSelect: 'none',

'&[data-disabled]': {
color: mauve.mauve8,
// pointerEvents: 'none',
pointerEvents: 'none',
},

'&[data-state="checked"]': {
Expand Down
111 changes: 82 additions & 29 deletions src/features/cameras/CameraList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuItemIconLeft,
DropdownMenuArrow,
} from '../../components/Dropdown.jsx';
import {
Expand All @@ -21,7 +22,11 @@ import {
registerCamera,
setDeleteCameraAlertStatus,
} from './wirelessCamerasSlice';
import { setModalContent, setSelectedCamera } from '../projects/projectsSlice.js';
import {
selectSelectedProjectId,
setModalContent,
setSelectedCamera,
} from '../projects/projectsSlice.js';
import IconButton from '../../components/IconButton';
import {
Cross2Icon,
Expand All @@ -31,7 +36,7 @@ import {
ChevronDownIcon,
} from '@radix-ui/react-icons';
import { StandAloneInput as Input } from '../../components/Form';
import { Camera, MapPin } from 'lucide-react';
import { Camera, MapPin, IdCard, Trash2, Unlink, Link } from 'lucide-react';
import { indigo } from '@radix-ui/colors';

import {
Expand Down Expand Up @@ -165,6 +170,7 @@ const ActiveState = ({ active }) => (
);

const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
const selectedProjectId = useSelector(selectSelectedProjectId);
const userRoles = useSelector(selectUserCurrentRoles);
const dispatch = useDispatch();

Expand All @@ -186,9 +192,12 @@ const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
dispatch(setSelectedCamera(cameraId));
};

const [tooltipOpen, setTooltipOpen] = useState(false);
const [dropdownOpen, setDropdownOpen] = useState(null);

const [editSnTooltipOpen, setEditSnTooltipOpen] = useState(false);
const [deleteCamTooltipOpen, setDeleteCamTooltipOpen] = useState(false);
const [releaseCamTooltipOpen, setReleaseCamTooltipOpen] = useState(false);

const [cameraFilter, setCameraFilter] = useState('');
const filteredCameras = cameras.filter(
(cam) =>
Expand Down Expand Up @@ -231,20 +240,26 @@ const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
>
{hasRole(userRoles, WRITE_DEPLOYMENTS_ROLES) && (
<DropdownMenuItem
onClick={() => handleSaveDepClick({ cameraId: cam._id })}
onSelect={() => handleSaveDepClick({ cameraId: cam._id })}
>
<DropdownMenuItemIconLeft>
<MapPin size={15} />
</DropdownMenuItemIconLeft>
Add Deployment
</DropdownMenuItem>
)}
{hasRole(userRoles, WRITE_CAMERA_SERIAL_NUMBER_ROLES) && (
<Tooltip open={tooltipOpen}>
<Tooltip open={editSnTooltipOpen}>
<TooltipTrigger asChild>
<DropdownMenuItem
onSelect={() => handleEditSerialNumberClick({ cameraId: cam._id })}
onClick={() => cam.isWireless && setTooltipOpen(true)}
onMouseLeave={() => setTooltipOpen(false)}
onClick={() => cam.isWireless && setEditSnTooltipOpen(true)}
onMouseLeave={() => setEditSnTooltipOpen(false)}
disabled={cam.isWireless}
>
<DropdownMenuItemIconLeft>
<IdCard size={15} />
</DropdownMenuItemIconLeft>
Edit camera serial number
</DropdownMenuItem>
</TooltipTrigger>
Expand All @@ -255,44 +270,82 @@ const CameraList = ({ cameras, handleSaveDepClick, handleDeleteDepClick }) => {
</Tooltip>
)}
{hasRole(userRoles, WRITE_CAMERA_REGISTRATION_ROLES) && cam.active && (
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation;
handleUnregisterClick({
cameraId: cam._id,
});
}}
>
Release camera
</DropdownMenuItem>
<Tooltip open={releaseCamTooltipOpen}>
<TooltipTrigger asChild>
<DropdownMenuItem
disabled={cam.isWireless && selectedProjectId === 'default_project'}
onClick={() => {
if (cam.isWireless && selectedProjectId === 'default_project') {
setReleaseCamTooltipOpen(true);
}
}}
onMouseLeave={() => setReleaseCamTooltipOpen(false)}
onSelect={(e) => {
e.stopPropagation;
handleUnregisterClick({
cameraId: cam._id,
});
}}
>
<DropdownMenuItemIconLeft>
<Unlink size={15} />
</DropdownMenuItemIconLeft>
Release camera
</DropdownMenuItem>
</TooltipTrigger>
<TooltipContent side="left" sideOffset={5}>
You cannot release wireless cameras from the Default Project
<TooltipArrow />
</TooltipContent>
</Tooltip>
)}
{hasRole(userRoles, WRITE_CAMERA_REGISTRATION_ROLES) &&
cam.isWireless &&
!cam.active && (
<DropdownMenuItem
onClick={(e) => {
onSelect={(e) => {
e.stopPropagation;
handleReRegisterCameraClick({
cameraId: cam._id,
make: cam.make,
});
}}
>
<DropdownMenuItemIconLeft>
<Link size={15} />
</DropdownMenuItemIconLeft>
Re-register camera
</DropdownMenuItem>
)}
{hasRole(userRoles, WRITE_CAMERA_REGISTRATION_ROLES) && (
<DropdownMenuItem
className=""
onClick={(e) => {
e.stopPropagation;
handleDeleteCameraClick({
cameraId: cam._id,
});
}}
>
Delete camera
</DropdownMenuItem>
<Tooltip open={deleteCamTooltipOpen}>
<TooltipTrigger asChild>
<DropdownMenuItem
disabled={cam.isWireless && selectedProjectId === 'default_project'}
onClick={() => {
if (cam.isWireless && selectedProjectId === 'default_project') {
setDeleteCamTooltipOpen(true);
}
}}
onMouseLeave={() => setDeleteCamTooltipOpen(false)}
onSelect={(e) => {
e.stopPropagation;
handleDeleteCameraClick({
cameraId: cam._id,
});
}}
>
<DropdownMenuItemIconLeft>
<Trash2 size={15} />
</DropdownMenuItemIconLeft>
Delete camera
</DropdownMenuItem>
</TooltipTrigger>
<TooltipContent side="left" sideOffset={5}>
You cannot delete wireless cameras from the Default Project
<TooltipArrow />
</TooltipContent>
</Tooltip>
)}
<DropdownMenuArrow offset={12} />
</StyledDropdownMenuContent>
Expand Down
2 changes: 1 addition & 1 deletion src/features/cameras/DeleteCameraAlert.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const DeleteCameraAlert = () => {
<p>
Are you sure you&apos;d like to delete Camera <BoldText>{selectedCamera}</BoldText>?{' '}
{imageCount === 0 && 'This will remove the Camera and the Deployments '}
{imageCount > 0 && (
{!imageCountLoading && imageCount > 0 && (
<>
This will remove the Camera, its Deployments, and{' '}
{imageCount > 1 ? 'all' : 'the'}{' '}
Expand Down
12 changes: 10 additions & 2 deletions src/features/filters/FiltersPanelFooterDropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuArrow,
DropdownMenuItemIconLeft,
} 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 { Download, Trash2 } from 'lucide-react';
import { setDeleteImagesAlertStatus } from '../images/imagesSlice';

const StyledDropdownMenuTrigger = styled(DropdownMenuTrigger, {
Expand Down Expand Up @@ -39,12 +41,18 @@ const FiltersPanelFooterDropdown = (props) => {
</StyledDropdownMenuTrigger>
<DropdownMenuContent sideOffset={5}>
{hasRole(userRoles, EXPORT_DATA_ROLES) && (
<DropdownMenuItem onClick={() => props.handleModalToggle('export-modal')}>
<DropdownMenuItem onSelect={() => props.handleModalToggle('export-modal')}>
<DropdownMenuItemIconLeft>
<Download size={15} />
</DropdownMenuItemIconLeft>
Export currently filtered data
</DropdownMenuItem>
)}
{hasRole(userRoles, DELETE_IMAGES_ROLES) && (
<DropdownMenuItem onClick={handleDeleteImageItemClick}>
<DropdownMenuItem onSelect={handleDeleteImageItemClick}>
<DropdownMenuItemIconLeft>
<Trash2 size={15} />
</DropdownMenuItemIconLeft>
Delete all currently filtered images
</DropdownMenuItem>
)}
Expand Down
16 changes: 14 additions & 2 deletions src/features/loupe/Comment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuItemIconLeft,
DropdownMenuArrow,
} from '../../components/Dropdown.jsx';
import Button from '../../components/Button.jsx';
Expand All @@ -17,6 +18,7 @@ import { selectUserUsername } from '../auth/authSlice.js';
import { DateTime } from 'luxon';
import { editComment } from '../review/reviewSlice.js';
import { indigo } from '@radix-ui/colors';
import { Trash2, Pencil } from 'lucide-react';

const StyledFieldRow = styled(FieldRow, {
display: 'block',
Expand Down Expand Up @@ -196,8 +198,18 @@ export const Comment = ({ comment, imageId, onChangeOpen, scrollRef }) => {
</IconButton>
</StyledDropdownMenuTrigger>
<StyledDropdownMenuContent sideOffset={5}>
<DropdownMenuItem onClick={() => setIsDeleteConfirm(true)}>Delete</DropdownMenuItem>
<DropdownMenuItem onClick={() => setIsEdit(true)}>Edit</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setIsDeleteConfirm(true)}>
<DropdownMenuItemIconLeft>
<Trash2 size={15} />
</DropdownMenuItemIconLeft>
Delete
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setIsEdit(true)}>
<DropdownMenuItemIconLeft>
<Pencil size={15} />
</DropdownMenuItemIconLeft>
Edit
</DropdownMenuItem>
<DropdownMenuArrow offset={12} />
</StyledDropdownMenuContent>
</DropdownMenu>
Expand Down
9 changes: 8 additions & 1 deletion src/features/loupe/LoupeDropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import {
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuItemIconLeft,
DropdownMenuArrow,
} from '../../components/Dropdown.jsx';
import IconButton from '../../components/IconButton.jsx';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import DeleteImagesAlert from '../images/DeleteImagesAlert.jsx';
import { setDeleteImagesAlertStatus } from '../images/imagesSlice';
import { selectFocusIndex, setSelectedImageIndices } from '../review/reviewSlice.js';
import { Trash2 } from 'lucide-react';

const StyledDropdownMenuTrigger = styled(DropdownMenuTrigger, {
position: 'absolute',
Expand All @@ -37,7 +39,12 @@ const LoupeDropdown = ({ image }) => {
</IconButton>
</StyledDropdownMenuTrigger>
<DropdownMenuContent sideOffset={5}>
<DropdownMenuItem onClick={handleDeleteImageItemClick}>Delete Image</DropdownMenuItem>
<DropdownMenuItem onSelect={handleDeleteImageItemClick}>
<DropdownMenuItemIconLeft>
<Trash2 size={15} />
</DropdownMenuItemIconLeft>
Delete Image
</DropdownMenuItem>
<DropdownMenuArrow offset={12} />
</DropdownMenuContent>

Expand Down

0 comments on commit 6b5da02

Please sign in to comment.