@asaleh37/ui-base 1.2.29 → 25.1.9

package/src/components/templates/attachment/AttachmentCard.tsx

@@ -1,141 +1,141 @@
-import Card from "@mui/material/Card";
-import CardActions from "@mui/material/CardActions";
-import CardContent from "@mui/material/CardContent";
-import CardMedia from "@mui/material/CardMedia";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconButton, Tooltip } from "@mui/material";
-import { useAxios, useConfirmationWindow, useSession } from "../../../hooks";
-import AttachmentImageViewer from "./AttachmentImageViewer";
-
-export type attachment = {
-  attachmentCode: string;
-  setAttachmentConfig: (props: any) => void;
-  id: number;
-  attachmentConfigId: number;
-  attachmentSize: number;
-  category: string;
-  docType: string;
-  fileName: string;
-  refKey: string;
-  allowDelete?: boolean;
-  downloadAuthorityKey?: string;
-  remark: string;
-};
-
-const AttachmentCard: React.FC<attachment> = (props) => {
-  const { handleGetRequest, handleDeleteRequest } = useAxios();
-  const { isUserAuthorized } = useSession();
-  let allowDownload = true;
-  if (props?.downloadAuthorityKey) {
-    allowDownload = isUserAuthorized(props.downloadAuthorityKey);
-  }
-  const handleDelete = async () => {
-    await handleDeleteRequest({
-      endPointURI: "api/v1/attachment/archive",
-      parameters: {
-        attachmentCode: props.attachmentCode,
-        refKey: props.refKey,
-        attachmentId: props.id,
-      },
-      successCallBkFn: (response) => {
-        props.setAttachmentConfig(response.data);
-      },
-      showMask: true,
-    });
-  };
-  const { ConfirmationWindow, setOpen } = useConfirmationWindow({
-    title: "Confirmation",
-    body: "Are you sure you want to delete this attachment?",
-    onConfirmationCallBk: () => {
-      handleDelete();
-    },
-  });
-
-  const handleDownload = async () => {
-    await handleGetRequest({
-      endPointURI: "api/v1/attachment/download",
-      parameters: {
-        attachmentId: props.id,
-      },
-      showMask: true,
-      responseType: "blob",
-      successCallBkFn: (response) => {
-        const url = window.URL.createObjectURL(new Blob([response.data]));
-        const link = document.createElement("a");
-        link.href = url;
-        link.setAttribute("download", props.fileName);
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
-      },
-    });
-  };
-
-  return (
-    <>
-      <ConfirmationWindow />
-      <Card sx={{ width: 300, border: "0.5px solid gray" }}>
-        <CardMedia
-          sx={{
-            height: 140,
-            width: 300,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          {props?.docType.toLocaleLowerCase().includes("image") ? (
-            <AttachmentImageViewer attachmentId={props.id} />
-          ) : (
-            <FontAwesomeIcon icon="file" size="3x" />
-          )}
-        </CardMedia>
-        <CardContent>
-          <Typography gutterBottom variant="h6" component="div">
-            {props.fileName}
-          </Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary" }}>
-            {`File Size: ${props?.attachmentSize || "unknown"} kb`}
-          </Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary" }}>
-            {`File Type: ${props?.category || "NA"}`}
-          </Typography>
-          <Typography variant="body2" sx={{ color: "text.secondary" }}>
-            {props.remark}
-          </Typography>
-        </CardContent>
-        <CardActions>
-          {props?.allowDelete ? (
-            <IconButton
-              size="small"
-              onClick={() => {
-                setOpen(true);
-              }}
-            >
-              <Tooltip title="Delete Attachment">
-                <FontAwesomeIcon icon="trash" />
-              </Tooltip>
-            </IconButton>
-          ) : (
-            <></>
-          )}
-
-          <div style={{ flex: 1 }}></div>
-          {allowDownload ? (
-            <IconButton size="small" onClick={handleDownload}>
-              <Tooltip title="Download Attachment">
-                <FontAwesomeIcon icon="download" />
-              </Tooltip>
-            </IconButton>
-          ) : (
-            <></>
-          )}
-        </CardActions>
-      </Card>
-    </>
-  );
-};
-
-export default AttachmentCard;
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconButton, Tooltip } from "@mui/material";
+import { useAxios, useConfirmationWindow, useSession } from "../../../hooks";
+import AttachmentImageViewer from "./AttachmentImageViewer";
+
+export type attachment = {
+  attachmentCode: string;
+  setAttachmentConfig: (props: any) => void;
+  id: number;
+  attachmentConfigId: number;
+  attachmentSize: number;
+  category: string;
+  docType: string;
+  fileName: string;
+  refKey: string;
+  allowDelete?: boolean;
+  downloadAuthorityKey?: string;
+  remark: string;
+};
+
+const AttachmentCard: React.FC<attachment> = (props) => {
+  const { handleGetRequest, handleDeleteRequest } = useAxios();
+  const { isUserAuthorized } = useSession();
+  let allowDownload = true;
+  if (props?.downloadAuthorityKey) {
+    allowDownload = isUserAuthorized(props.downloadAuthorityKey);
+  }
+  const handleDelete = async () => {
+    await handleDeleteRequest({
+      endPointURI: "api/v1/attachment/archive",
+      parameters: {
+        attachmentCode: props.attachmentCode,
+        refKey: props.refKey,
+        attachmentId: props.id,
+      },
+      successCallBkFn: (response) => {
+        props.setAttachmentConfig(response.data);
+      },
+      showMask: true,
+    });
+  };
+  const { ConfirmationWindow, setOpen } = useConfirmationWindow({
+    title: "Confirmation",
+    body: "Are you sure you want to delete this attachment?",
+    onConfirmationCallBk: () => {
+      handleDelete();
+    },
+  });
+
+  const handleDownload = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/attachment/download",
+      parameters: {
+        attachmentId: props.id,
+      },
+      showMask: true,
+      responseType: "blob",
+      successCallBkFn: (response) => {
+        const url = window.URL.createObjectURL(new Blob([response.data]));
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", props.fileName);
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+      },
+    });
+  };
+
+  return (
+    <>
+      <ConfirmationWindow />
+      <Card sx={{ width: 300, border: "0.5px solid gray" }}>
+        <CardMedia
+          sx={{
+            height: 140,
+            width: 300,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {props?.docType.toLocaleLowerCase().includes("image") ? (
+            <AttachmentImageViewer attachmentId={props.id} />
+          ) : (
+            <FontAwesomeIcon icon="file" size="3x" />
+          )}
+        </CardMedia>
+        <CardContent>
+          <Typography gutterBottom variant="h6" component="div">
+            {props.fileName}
+          </Typography>
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            {`File Size: ${props?.attachmentSize || "unknown"} kb`}
+          </Typography>
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            {`File Type: ${props?.category || "NA"}`}
+          </Typography>
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            {props.remark}
+          </Typography>
+        </CardContent>
+        <CardActions>
+          {props?.allowDelete ? (
+            <IconButton
+              size="small"
+              onClick={() => {
+                setOpen(true);
+              }}
+            >
+              <Tooltip title="Delete Attachment">
+                <FontAwesomeIcon icon="trash" />
+              </Tooltip>
+            </IconButton>
+          ) : (
+            <></>
+          )}
+
+          <div style={{ flex: 1 }}></div>
+          {allowDownload ? (
+            <IconButton size="small" onClick={handleDownload}>
+              <Tooltip title="Download Attachment">
+                <FontAwesomeIcon icon="download" />
+              </Tooltip>
+            </IconButton>
+          ) : (
+            <></>
+          )}
+        </CardActions>
+      </Card>
+    </>
+  );
+};
+
+export default AttachmentCard;

package/src/components/templates/attachment/AttachmentImageViewer.tsx

@@ -1,45 +1,85 @@
-import { useState } from "react";
-import { useSelector } from "react-redux";
-import { Avatar, SxProps } from "@mui/material";
-
-type AttachmentImageViewerProps = {
-  attachmentId?: number;
-  attachmentCode?: string;
-  refKey?: string;
-  category?: string;
-  showAsAvatar?: boolean;
-  style?: SxProps;
-};
-
-const AttachmentImageViewer: React.FC<AttachmentImageViewerProps> = (props) => {
-  const apiBaseUrl = useSelector(
-    (state: any) => state.AppInfo.value.apiBaseUrl
-  );
-  let imagePath = apiBaseUrl + "/api/v1/attachment/";
-  if (props?.attachmentId) {
-    imagePath += "download?attachmentId=" + props.attachmentId;
-  } else {
-    imagePath += `downloadImage?attachmentCode=${props.attachmentCode}&refKey=${props.refKey}`;
-    if (props?.category) {
-      imagePath += `&category=${props.category}`;
-    }
-  }
-  const [imgSrc, setImgSrc] = useState(imagePath);
-  return props?.showAsAvatar ? (
-    <Avatar src={imgSrc} sx={props.style} />
-  ) : (
-    <img
-      src={imgSrc}
-      alt="image"
-      onError={() => setImgSrc("/no_image.png")}
-      style={{
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        display: "block",
-      }}
-    />
-  );
-};
-
-export default AttachmentImageViewer;
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Avatar, SxProps } from "@mui/material";
+
+type AttachmentImageViewerProps = {
+  attachmentId?: number;
+  attachmentCode?: string;
+  refKey?: string;
+  category?: string;
+  showAsAvatar?: boolean;
+  onErrorImage?: string;
+  style?: SxProps;
+};
+
+const AttachmentImageViewer: React.FC<AttachmentImageViewerProps> = (props) => {
+  const apiBaseUrl = useSelector(
+    (state: any) => state.AppInfo.value.apiBaseUrl
+  );
+  const [imgSrc, setImgSrc] = useState(null);
+  const handleImageSrc = () => {
+    let imagePath = apiBaseUrl + "/api/v1/attachment/";
+    if (props?.attachmentId) {
+      imagePath += "download?attachmentId=" + props.attachmentId;
+    } else {
+      imagePath += `downloadImage?attachmentCode=${props.attachmentCode}&refKey=${props.refKey}`;
+      if (props?.category) {
+        imagePath += `&category=${props.category}`;
+      }
+    }
+    setImgSrc(imagePath);
+  };
+  useEffect(() => {
+    if (props?.refKey || props?.attachmentId) {
+      handleImageSrc();
+    }
+  }, [props.refKey, props?.attachmentId]);
+  {
+    /* </Avatar>
+      src={imgSrc}
+      loading={}
+      sx={props.style}
+      onError={() => {
+        if (props?.onErrorImage) {
+          setImgSrc(props.onErrorImage);
+        } else {
+          setImgSrc("/no_image.png");
+        }
+      }}
+    /> */
+  }
+  return props?.showAsAvatar ? (
+    <Avatar
+      sx={props.style}
+      onError={() => {
+        if (props?.onErrorImage) {
+          setImgSrc(props.onErrorImage);
+        } else {
+          setImgSrc("/no_image.png");
+        }
+      }}
+      src={imgSrc}
+    />
+  ) : (
+    <img
+      src={imgSrc}
+      loading="lazy"
+      alt="image"
+      onError={() => {
+        if (props?.onErrorImage) {
+          setImgSrc(props.onErrorImage);
+        } else {
+          setImgSrc("/no_image.png");
+        }
+      }}
+      style={{
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        display: "block",
+      }}
+    />
+  );
+};
+
+export default AttachmentImageViewer;