Skip to content

Commit e97065d

Browse files
nitheesh-aotnitheesh-aot
authored
COMP-666: Drag and drop photos and figures (#589)
* COMP-666: Drag and drop photos and figures * COMP-675: Order/Warning letter links in Case File Profiles to be 14px instead of 16px
1 parent 4242877 commit e97065d

File tree

2 files changed

+105
-55
lines changed

2 files changed

+105
-55
lines changed

‎compliance-web/src/components/App/CaseFiles/Profile/CaseFileInspectionsTable.tsx‎

Lines changed: 47 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
AccordionDetails,
2828
Grid,
2929
Tooltip,
30+
CircularProgress,
3031
} from "@mui/material";
3132
import { Link as RouterLink } from "@tanstack/react-router";
3233
import { BCDesignTokens } from "epic.theme";
@@ -47,9 +48,8 @@ const styleOverFlowClipped = {
4748

4849
const CaseFileInspectionsTable = ({ caseFile }: { caseFile: CaseFile }) => {
4950
const { setOpen, setClose } = useDrawer();
50-
const { data: detailedInspections } = useInspectionsMoreDetailsByCaseFileId(
51-
caseFile.id
52-
);
51+
const { data: detailedInspections, isLoading: isLoadingInspections } =
52+
useInspectionsMoreDetailsByCaseFileId(caseFile.id);
5353
const { data: staffUsersList } = useStaffUsersData();
5454

5555
const [expandedInspections, setExpandedInspections] = useState<Set<number>>(
@@ -91,8 +91,8 @@ const CaseFileInspectionsTable = ({ caseFile }: { caseFile: CaseFile }) => {
9191
);
9292

9393
if (!inspection && order.inspection_id) {
94-
const fetchedInspection = await fetchInspectionById(order.inspection_id);
95-
inspection = fetchedInspection;
94+
const fetchedInspection = await fetchInspectionById(order.inspection_id);
95+
inspection = fetchedInspection;
9696
}
9797
setOpen({
9898
content: (
@@ -148,7 +148,16 @@ const CaseFileInspectionsTable = ({ caseFile }: { caseFile: CaseFile }) => {
148148
}
149149
};
150150

151-
return (
151+
return isLoadingInspections ? (
152+
<Box
153+
display={"flex"}
154+
justifyContent={"center"}
155+
alignItems={"center"}
156+
height={120}
157+
>
158+
<CircularProgress size={75} />
159+
</Box>
160+
) : (
152161
(caseFile.initiation.id === INITIATION.INSPECTION_ID ||
153162
(detailedInspections && detailedInspections?.length > 0)) && (
154163
<>
@@ -302,7 +311,10 @@ const CaseFileInspectionsTable = ({ caseFile }: { caseFile: CaseFile }) => {
302311
<Tooltip title={requirement.requirement_number}>
303312
<Link
304313
underline="hover"
305-
sx={{ cursor: "pointer" }}
314+
sx={{
315+
cursor: "pointer",
316+
fontSize: "0.875rem",
317+
}}
306318
onClick={() =>
307319
fetchInspectionOrder(
308320
requirement.requirement_number
@@ -333,28 +345,35 @@ const CaseFileInspectionsTable = ({ caseFile }: { caseFile: CaseFile }) => {
333345
{isEnforcementActionLink(
334346
requirement.enforcement_action
335347
) ? (
336-
<Tooltip title={requirement.enforcement_action?.name}>
337-
<Link
338-
underline="hover"
339-
sx={{ cursor: "pointer" }}
340-
onClick={() =>
341-
handleEnforcementActionClick(
342-
requirement.enforcement_action
343-
)
344-
}
345-
>
346-
{requirement.enforcement_action?.name}
347-
</Link>
348-
</Tooltip>
348+
<Tooltip
349+
title={requirement.enforcement_action?.name}
350+
>
351+
<Link
352+
underline="hover"
353+
sx={{
354+
cursor: "pointer",
355+
fontSize: "0.875rem",
356+
}}
357+
onClick={() =>
358+
handleEnforcementActionClick(
359+
requirement.enforcement_action
360+
)
361+
}
362+
>
363+
{requirement.enforcement_action?.name}
364+
</Link>
365+
</Tooltip>
349366
) : (
350-
<Tooltip title={requirement.enforcement_action?.name}>
351-
<Typography
352-
variant="body2"
353-
sx={{ ...styleOverFlowClipped }}
354-
>
355-
{requirement.enforcement_action?.name}
356-
</Typography>
357-
</Tooltip>
367+
<Tooltip
368+
title={requirement.enforcement_action?.name}
369+
>
370+
<Typography
371+
variant="body2"
372+
sx={{ ...styleOverFlowClipped }}
373+
>
374+
{requirement.enforcement_action?.name}
375+
</Typography>
376+
</Tooltip>
358377
)}
359378
</Grid>
360379
<Grid item xs={2}>

‎compliance-web/src/components/App/Inspections/Profile/Requirements/Images/ImageCard.tsx‎

Lines changed: 58 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Link, Tooltip } from "@mui/material";
1+
import { Link, Tooltip, IconButton } from "@mui/material";
22
import { Box } from "@mui/material";
33
import { RequirementImage } from "@/models/Image";
44
import { arraySwap, useSortable } from "@dnd-kit/sortable";
55
import { CSS } from "@dnd-kit/utilities";
66
import imageNotFound from "@/assets/images/image-not-found.svg";
77
import { BCDesignTokens } from "epic.theme";
8+
import { DragIndicatorRounded } from "@mui/icons-material";
89

910
type ImageCardProps = {
1011
image: RequirementImage;
@@ -39,44 +40,72 @@ export default function ImageCard({
3940
flexDirection: "column",
4041
width: "calc(50% - 4px)",
4142
borderRadius: "4px",
42-
padding: "8px",
43+
padding: "8px 6px",
4344
pb: "12px",
4445
boxSizing: "border-box",
4546
backgroundColor: BCDesignTokens.surfaceColorBackgroundLightGray,
4647
cursor: isRequirementEditable ? "pointer" : "default",
4748
"&:hover": {
48-
backgroundColor: isRequirementEditable ? BCDesignTokens.surfaceColorBackgroundLightBlue : "transparent",
49+
backgroundColor: isRequirementEditable
50+
? BCDesignTokens.surfaceColorBackgroundLightBlue
51+
: "transparent",
4952
},
5053
}}
5154
ref={setNodeRef}
5255
style={style}
53-
{...attributes}
54-
{...listeners}
55-
onClick={isRequirementEditable ? handleImageClick : undefined}
5656
data-testid={`image-card-${image.id}`}
5757
>
58-
<Box
59-
sx={{
60-
height: 150,
61-
marginBottom: 0.5,
62-
display: "flex",
63-
justifyContent: "center",
64-
alignItems: "center",
65-
overflow: "hidden",
66-
pointerEvents: "none", // Disable drag on this image
67-
}}
68-
>
69-
<img
70-
src={image.url ?? ""}
71-
alt={image.caption}
72-
width={"100%"}
73-
onError={(e) => {
74-
e.currentTarget.src = imageNotFound;
75-
e.currentTarget.style.opacity = "0.5";
76-
e.currentTarget.style.width = "45%";
77-
e.currentTarget.style.height = "150px";
58+
<Box sx={{ display: "flex", alignItems: "flex-start" }}>
59+
{/* Drag Handle */}
60+
{isRequirementEditable && (
61+
<IconButton
62+
sx={{
63+
height: 140,
64+
padding: 0,
65+
marginRight: 0.5,
66+
borderRadius: 1,
67+
alignItems: "flex-start",
68+
cursor: "grab",
69+
"&:active": {
70+
cursor: "grabbing",
71+
},
72+
"&:hover": {
73+
backgroundColor: "rgba(0, 0, 0, 0.04)",
74+
},
75+
}}
76+
{...attributes}
77+
{...listeners}
78+
onClick={(e) => e.stopPropagation()}
79+
disableRipple={true}
80+
>
81+
<DragIndicatorRounded />
82+
</IconButton>
83+
)}
84+
<Box
85+
sx={{
86+
height: 140,
87+
marginBottom: 0.5,
88+
display: "flex",
89+
justifyContent: "center",
90+
alignItems: "center",
91+
overflow: "hidden",
92+
backgroundColor: "#EDEDED",
7893
}}
79-
/>
94+
onClick={isRequirementEditable ? handleImageClick : undefined}
95+
>
96+
<img
97+
src={image.url ?? ""}
98+
alt={image.caption}
99+
width={"100%"}
100+
style={{ pointerEvents: "none" }}
101+
onError={(e) => {
102+
e.currentTarget.src = imageNotFound;
103+
e.currentTarget.style.opacity = "0.5";
104+
e.currentTarget.style.width = "45%";
105+
e.currentTarget.style.height = "150px";
106+
}}
107+
/>
108+
</Box>
80109
</Box>
81110
<Tooltip title={image.caption}>
82111
<Link
@@ -87,12 +116,14 @@ export default function ImageCard({
87116
overflow: "hidden",
88117
textOverflow: "ellipsis",
89118
fontSize: "0.75rem",
119+
textAlign: "center",
90120
cursor: isRequirementEditable ? "pointer" : "default",
91121
"&:hover": {
92122
textDecoration: isRequirementEditable ? "underline" : "none",
93123
},
94124
}}
95125
underline="none"
126+
onClick={isRequirementEditable ? handleImageClick : undefined}
96127
>
97128
<strong>
98129
{isPhoto ? "Photo" : "Figure"} {image.sort_order}:

0 commit comments

Comments
 (0)