Merge pull request #233 from nitheesh-aot/image-upload

Image Upload

Author: dinesh-aot

compliance-web/package-lock.json

@@ -12,6 +12,8 @@
     "cy:unit": "cypress run --component"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@hookform/resolvers": "^3.9.0",

compliance-web/package.json

@@ -97,6 +97,11 @@ export default function ContinuationReportTimelineEntry({
             <Typography
               variant="subtitle2"
               component={"div"}
+              sx={{
+                "& p": {
+                  my: 0,
+                },
+              }}
               dangerouslySetInnerHTML={{ __html: getFormattedText() }}
             />
             {!isSystemGenerated && createdByUser && (

compliance-web/src/assets/images/image-not-found.svg

@@ -6,11 +6,13 @@ const GridLabelValuePair: FC<{
   label: string;
   value: ReactNode;
   gridProps?: { xs: number };
-}> = memo(({ label, value, gridProps = { xs: 12 } }) => (
+  isBold?: boolean;
+}> = memo(({ label, value, gridProps = { xs: 12 }, isBold = false }) => (
   <Grid item {...gridProps}>
     <Typography
       variant="body2"
-      color={BCDesignTokens.typographyColorPlaceholder}
+      color={isBold ? "inherit" : BCDesignTokens.typographyColorPlaceholder}
+      fontWeight={isBold ? 700 : 400}
     >
       {label}
     </Typography>

compliance-web/src/components/App/ContinuationReports/ContinuationReportTimelineEntry.tsx

@@ -0,0 +1,99 @@
+import { Link, Tooltip } from "@mui/material";
+import { Box } from "@mui/material";
+import { Image } from "@/models/Image";
+import { arraySwap, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { formatS3Url } from "@/utils/appUtils";
+import imageNotFound from "@/assets/images/image-not-found.svg";
+import { BCDesignTokens } from "epic.theme";
+
+type ImageCardProps = {
+  image: Image;
+  handleImageClick: () => void;
+  isPhoto: boolean;
+  index: number;
+};
+
+export default function ImageCard({
+  image,
+  handleImageClick,
+  isPhoto,
+  index,
+}: ImageCardProps) {
+  const { attributes, listeners, setNodeRef, transition, transform } =
+    useSortable({
+      id: image.id ?? 0,
+      getNewIndex: ({ id, items, activeIndex, overIndex }) =>
+        arraySwap(items, activeIndex, overIndex).indexOf(id),
+    });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <Box
+      id={index.toString()}
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "calc(50% - 4px)",
+        borderRadius: "4px",
+        padding: "8px",
+        pb: "12px",
+        boxSizing: "border-box",
+        backgroundColor: BCDesignTokens.surfaceColorBackgroundLightGray,
+        cursor: "pointer",
+        "&:hover": {
+          backgroundColor: BCDesignTokens.surfaceColorBackgroundLightBlue,
+        },
+      }}
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      onClick={handleImageClick}
+    >
+      <Box
+        sx={{
+          height: 150,
+          marginBottom: 0.5,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "hidden",
+          pointerEvents: "none", // Disable drag on this image
+        }}
+      >
+        <img
+          src={formatS3Url(image.relative_url ?? "")}
+          alt={image.caption}
+          width={"100%"}
+          onError={(e) => {
+            e.currentTarget.src = imageNotFound;
+            e.currentTarget.style.opacity = "0.5";
+            e.currentTarget.style.width = "45%";
+            e.currentTarget.style.height = "150px";
+          }}
+        />
+      </Box>
+      <Tooltip title={image.caption}>
+        <Link
+          sx={{
+            display: "-webkit-box",
+            WebkitBoxOrient: "vertical",
+            WebkitLineClamp: 2,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          <strong>
+            {isPhoto ? "Photo" : "Figure"} {index + 1}:
+          </strong>{" "}
+          {image.caption}
+        </Link>
+      </Tooltip>
+    </Box>
+  );
+}