@asaleh37/ui-base 25.6.19-6 → 25.6.21

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

@@ -1,271 +1,285 @@
-import { useEffect, useState } from "react";
-import { useAxios, useSession } from "../../../hooks";
-import { toast } from "react-toastify";
-import { Box, Button, Grid2, Paper } from "@mui/material";
-import ComboBox from "../DataEntryTemplates/TemplateDataForm/FormFields/ComboBox";
-import TemplateTextField from "../DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import AttachmentCard from "./AttachmentCard";
-
-export type AttachmentPanelProps = {
-  attachmentCode: string;
-  enableAttachment?: boolean;
-  refKey: string;
-};
-
-type AttachmentConfig = {
-  id: number;
-  attachmentCode: string;
-  uploadDirectory: string;
-  storageType: "FILE_SYSTEM" | "SFTP";
-  maxAllowedNumberOfFiles: number;
-  isCategoryRequired?: boolean;
-  attachmentCategories?: string;
-  uploadAuthorityKey?: string;
-  downloadAuthorityKey?: string;
-  allowedFileTypes?: string;
-  refKeyAttachments?: Array<any>;
-};
-
-const AttachmentPanel: React.FC<AttachmentPanelProps> = (props) => {
-  const { handleUploadRequest, handleGetRequest } = useAxios();
-  const [files, setFiles] = useState<FileList | null>(null);
-  const [attachmentCategories, setAttachmentCategories] = useState<
-    Array<string>
-  >([]);
-  const [remark, setRemark] = useState(null);
-  const [selectedCategory, setSelectedCategory] = useState(null);
-  const [allowedTypes, setAllowedTypes] = useState<Array<string>>([]);
-  const [attachmentConfig, setAttachmentConfig] =
-    useState<AttachmentConfig>(null);
-
-  const loadAttachmentConfig = async () => {
-    await handleGetRequest({
-      endPointURI: "api/v1/attachment/info",
-      showMask: true,
-      parameters: {
-        attachmentCode: props.attachmentCode,
-        refKey: props.refKey,
-      },
-      successCallBkFn: (response: any) => {
-        setAttachmentConfig(response.data);
-      },
-    });
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      for (const file of e.target.files) {
-        const fileExt = getFileExtension(file.name);
-        if (allowedTypes.length > 0 && !allowedTypes.includes(fileExt)) {
-          toast.error(fileExt + " is not allowed");
-          return;
-        }
-      }
-    }
-    setFiles(e.target.files);
-  };
-  const { isUserAuthorized } = useSession();
-
-  const handleUpload = async () => {
-    let existingAttachments = attachmentConfig?.refKeyAttachments.length || 0;
-    if (
-      attachmentConfig?.maxAllowedNumberOfFiles &&
-      files.length + existingAttachments >
-        attachmentConfig.maxAllowedNumberOfFiles
-    ) {
-      toast.error(
-        "Maximum number of attachments is " +
-          attachmentConfig.maxAllowedNumberOfFiles
-      );
-      return;
-    }
-    if (
-      attachmentConfig?.isCategoryRequired === true &&
-      attachmentCategories.length > 0 &&
-      (selectedCategory == null ||
-        selectedCategory === undefined ||
-        selectedCategory === "")
-    ) {
-      toast.error("You must selected document type to process your request");
-      return;
-    }
-    if (!files) {
-      toast.error("You must add files to upload");
-      return;
-    }
-    await handleUploadRequest({
-      endPointURI: "api/v1/attachment/upload",
-      showMask: true,
-      loadingMessage: "Uploading files ... please wait",
-      parameters: {
-        refKey: props.refKey,
-        attachmentCode: props.attachmentCode,
-        remark,
-        category: selectedCategory,
-      },
-      files,
-      successCallBkFn: (response) => {
-        setAttachmentConfig(response.data);
-        setFiles(null);
-        setSelectedCategory(null);
-        setRemark(null);
-        toast.success("Your request has been process successfully");
-      },
-    });
-  };
-  const getFileExtension = (name: string) => {
-    return name.split(".").pop()?.toLowerCase() || "";
-  };
-
-  useEffect(() => {
-    loadAttachmentConfig();
-  }, [props.refKey, props.attachmentCode]);
-
-  useEffect(() => {
-    if (attachmentConfig?.allowedFileTypes) {
-      setAllowedTypes(attachmentConfig.allowedFileTypes.split(","));
-    } else {
-      setAllowedTypes([]);
-    }
-    if (attachmentConfig?.attachmentCategories) {
-      const cats = [];
-      for (const category of attachmentConfig.attachmentCategories.split(",")) {
-        cats.push({ value: category });
-      }
-      setAttachmentCategories(cats);
-    } else {
-      setAttachmentCategories([]);
-    }
-  }, [attachmentConfig]);
-  let showAttachments = true;
-  if (
-    attachmentConfig?.downloadAuthorityKey &&
-    !isUserAuthorized(attachmentConfig?.downloadAuthorityKey)
-  ) {
-    showAttachments = false;
-  }
-  let allowUpload = true;
-  if (props?.enableAttachment === false) {
-    allowUpload = false;
-  }
-  if (
-    attachmentConfig?.uploadAuthorityKey &&
-    !isUserAuthorized(attachmentConfig.uploadAuthorityKey)
-  ) {
-    allowUpload = false;
-  }
-
-  return (
-    <Paper
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        alignItems: "center",
-        justifyContent: "flex-start",
-        overflow: "hidden",
-        flexGrow: 1,
-      }}
-    >
-      {allowUpload ? (
-        <>
-          {attachmentConfig?.maxAllowedNumberOfFiles === undefined ||
-          attachmentConfig?.maxAllowedNumberOfFiles === null ||
-          attachmentConfig?.maxAllowedNumberOfFiles >
-            attachmentConfig.refKeyAttachments.length ? (
-            <>
-              <h3>
-                <FontAwesomeIcon
-                  icon="paperclip"
-                  style={{ marginRight: 10, marginLeft: 10 }}
-                />
-                Attachment Uploader
-              </h3>
-              <input
-                type="file"
-                style={{ margin: 20 }}
-                accept={attachmentConfig?.allowedFileTypes}
-                multiple
-                onChange={handleChange}
-              />
-              {attachmentCategories.length > 0 ? (
-                <ComboBox
-                  label="Attachment Type"
-                  sx={{ width: 300, m: 1 }}
-                  options={attachmentCategories}
-                  displayField="value"
-                  valueField="value"
-                  value={selectedCategory}
-                  onChangeCallBack={(v) => {
-                    setSelectedCategory(v);
-                  }}
-                />
-              ) : (
-                <></>
-              )}
-
-              <TemplateTextField
-                label="Remark"
-                value={remark}
-                onChange={(event) => setRemark(event.target.value)}
-                multiline={true}
-                sx={{ width: 300, m: 1 }}
-                rows={3}
-              />
-              <Button sx={{ m: 1 }} variant="contained" onClick={handleUpload}>
-                Upload
-              </Button>
-            </>
-          ) : (
-            <></>
-          )}
-        </>
-      ) : (
-        <></>
-      )}
-
-      {showAttachments && attachmentConfig?.refKeyAttachments?.length > 0 ? (
-        <>
-          <h3>
-            <FontAwesomeIcon
-              style={{ marginRight: 10, marginLeft: 10 }}
-              icon="paperclip"
-            />
-            Attachments
-          </h3>
-          <Grid2
-            container
-            spacing={2}
-            sx={{ overflow: "auto", padding: 1, justifyContent: "center" }}
-          >
-            {attachmentConfig?.refKeyAttachments.map((refKeyAttachment) => {
-              return (
-                <Grid2
-                  sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                >
-                  <AttachmentCard
-                    {...refKeyAttachment}
-                    attachmentCode={props.attachmentCode}
-                    setAttachmentConfig={setAttachmentConfig}
-                    downloadAuthorityKey={attachmentConfig.downloadAuthorityKey}
-                    allowDelete={allowUpload}
-                  />
-                </Grid2>
-              );
-            })}
-          </Grid2>
-        </>
-      ) : (
-        <></>
-      )}
-    </Paper>
-  );
-};
-
-export default AttachmentPanel;
+import { useEffect, useState } from "react";
+import { useAxios, useSession } from "../../../hooks";
+import { toast } from "react-toastify";
+import { Box, Button, Grid2, Paper } from "@mui/material";
+import ComboBox from "../DataEntryTemplates/TemplateDataForm/FormFields/ComboBox";
+import TemplateTextField from "../DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import AttachmentCard from "./AttachmentCard";
+
+export type AttachmentPanelProps = {
+  attachmentCode: string;
+  enableAttachment?: boolean;
+  refKey: string;
+};
+
+type AttachmentConfig = {
+  id: number;
+  attachmentCode: string;
+  uploadDirectory: string;
+  storageType: "FILE_SYSTEM" | "SFTP";
+  maxAllowedNumberOfFiles: number;
+  isCategoryRequired?: boolean;
+  attachmentCategories?: string;
+  uploadAuthorityKey?: string;
+  downloadAuthorityKey?: string;
+  allowedFileTypes?: string;
+  refKeyAttachments?: Array<any>;
+};
+
+const AttachmentPanel: React.FC<AttachmentPanelProps> = (props) => {
+  const { handleUploadRequest, handleGetRequest } = useAxios();
+  const [files, setFiles] = useState<FileList | null>(null);
+  const [attachmentCategories, setAttachmentCategories] = useState<
+    Array<string>
+  >([]);
+  const [remark, setRemark] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  const [allowedTypes, setAllowedTypes] = useState<Array<string>>([]);
+  const [attachmentConfig, setAttachmentConfig] =
+    useState<AttachmentConfig>(null);
+
+  const loadAttachmentConfig = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/attachment/info",
+      showMask: true,
+      parameters: {
+        attachmentCode: props.attachmentCode,
+        refKey: props.refKey,
+      },
+      successCallBkFn: (response: any) => {
+        setAttachmentConfig(response.data);
+      },
+    });
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      for (const file of e.target.files) {
+        const fileExt = getFileExtension(file.name);
+        if (allowedTypes.length > 0 && !allowedTypes.includes(fileExt)) {
+          toast.error(fileExt + " is not allowed");
+          return;
+        }
+      }
+    }
+    setFiles(e.target.files);
+  };
+  const { isUserAuthorized } = useSession();
+
+  const handleUpload = async () => {
+    let existingAttachments = attachmentConfig?.refKeyAttachments.length || 0;
+    if (
+      attachmentConfig?.maxAllowedNumberOfFiles &&
+      files.length + existingAttachments >
+        attachmentConfig.maxAllowedNumberOfFiles
+    ) {
+      toast.error(
+        "Maximum number of attachments is " +
+          attachmentConfig.maxAllowedNumberOfFiles
+      );
+      return;
+    }
+    if (
+      attachmentConfig?.isCategoryRequired === true &&
+      attachmentCategories.length > 0 &&
+      (selectedCategory == null ||
+        selectedCategory === undefined ||
+        selectedCategory === "")
+    ) {
+      toast.error("You must selected document type to process your request");
+      return;
+    }
+    if (!files) {
+      toast.error("You must add files to upload");
+      return;
+    }
+    debugger;
+    for (const file of files) {
+      if (file.type.startsWith("image/")) {
+        const MAX_SIZE_KB = 600;
+        const maxSizeBytes = MAX_SIZE_KB * 1024;
+        if (file.size > maxSizeBytes) {
+          toast.error(
+            `File ${file.name} is too large. Max allowed is ${MAX_SIZE_KB}KB.`
+          );
+          return;
+        }
+      }
+    }
+
+    await handleUploadRequest({
+      endPointURI: "api/v1/attachment/upload",
+      showMask: true,
+      loadingMessage: "Uploading files ... please wait",
+      parameters: {
+        refKey: props.refKey,
+        attachmentCode: props.attachmentCode,
+        remark,
+        category: selectedCategory,
+      },
+      files,
+      successCallBkFn: (response) => {
+        setAttachmentConfig(response.data);
+        setFiles(null);
+        setSelectedCategory(null);
+        setRemark(null);
+        toast.success("Your request has been process successfully");
+      },
+    });
+  };
+  const getFileExtension = (name: string) => {
+    return name.split(".").pop()?.toLowerCase() || "";
+  };
+
+  useEffect(() => {
+    loadAttachmentConfig();
+  }, [props.refKey, props.attachmentCode]);
+
+  useEffect(() => {
+    if (attachmentConfig?.allowedFileTypes) {
+      setAllowedTypes(attachmentConfig.allowedFileTypes.split(","));
+    } else {
+      setAllowedTypes([]);
+    }
+    if (attachmentConfig?.attachmentCategories) {
+      const cats = [];
+      for (const category of attachmentConfig.attachmentCategories.split(",")) {
+        cats.push({ value: category });
+      }
+      setAttachmentCategories(cats);
+    } else {
+      setAttachmentCategories([]);
+    }
+  }, [attachmentConfig]);
+  let showAttachments = true;
+  if (
+    attachmentConfig?.downloadAuthorityKey &&
+    !isUserAuthorized(attachmentConfig?.downloadAuthorityKey)
+  ) {
+    showAttachments = false;
+  }
+  let allowUpload = true;
+  if (props?.enableAttachment === false) {
+    allowUpload = false;
+  }
+  if (
+    attachmentConfig?.uploadAuthorityKey &&
+    !isUserAuthorized(attachmentConfig.uploadAuthorityKey)
+  ) {
+    allowUpload = false;
+  }
+
+  return (
+    <Paper
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        overflow: "hidden",
+        flexGrow: 1,
+      }}
+    >
+      {allowUpload ? (
+        <>
+          {attachmentConfig?.maxAllowedNumberOfFiles === undefined ||
+          attachmentConfig?.maxAllowedNumberOfFiles === null ||
+          attachmentConfig?.maxAllowedNumberOfFiles >
+            attachmentConfig.refKeyAttachments.length ? (
+            <>
+              <h3>
+                <FontAwesomeIcon
+                  icon="paperclip"
+                  style={{ marginRight: 10, marginLeft: 10 }}
+                />
+                Attachment Uploader
+              </h3>
+              <input
+                type="file"
+                style={{ margin: 20 }}
+                accept={attachmentConfig?.allowedFileTypes}
+                multiple
+                onChange={handleChange}
+              />
+              {attachmentCategories.length > 0 ? (
+                <ComboBox
+                  label="Attachment Type"
+                  sx={{ width: 300, m: 1 }}
+                  options={attachmentCategories}
+                  displayField="value"
+                  valueField="value"
+                  value={selectedCategory}
+                  onChangeCallBack={(v) => {
+                    setSelectedCategory(v);
+                  }}
+                />
+              ) : (
+                <></>
+              )}
+
+              <TemplateTextField
+                label="Remark"
+                value={remark}
+                onChange={(event) => setRemark(event.target.value)}
+                multiline={true}
+                sx={{ width: 300, m: 1 }}
+                rows={3}
+              />
+              <Button sx={{ m: 1 }} variant="contained" onClick={handleUpload}>
+                Upload
+              </Button>
+            </>
+          ) : (
+            <></>
+          )}
+        </>
+      ) : (
+        <></>
+      )}
+
+      {showAttachments && attachmentConfig?.refKeyAttachments?.length > 0 ? (
+        <>
+          <h3>
+            <FontAwesomeIcon
+              style={{ marginRight: 10, marginLeft: 10 }}
+              icon="paperclip"
+            />
+            Attachments
+          </h3>
+          <Grid2
+            container
+            spacing={2}
+            sx={{ overflow: "auto", padding: 1, justifyContent: "center" }}
+          >
+            {attachmentConfig?.refKeyAttachments.map((refKeyAttachment) => {
+              return (
+                <Grid2
+                  sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <AttachmentCard
+                    {...refKeyAttachment}
+                    attachmentCode={props.attachmentCode}
+                    setAttachmentConfig={setAttachmentConfig}
+                    downloadAuthorityKey={attachmentConfig.downloadAuthorityKey}
+                    allowDelete={allowUpload}
+                  />
+                </Grid2>
+              );
+            })}
+          </Grid2>
+        </>
+      ) : (
+        <></>
+      )}
+    </Paper>
+  );
+};
+
+export default AttachmentPanel;

package/src/components/templates/index.ts

@@ -1,33 +1,33 @@
-export { default as TransferList } from "./TransferList";
-export { default as CheckBox } from "./DataEntryTemplates/TemplateDataForm/FormFields/CheckBox";
-export { default as ComboBox } from "./DataEntryTemplates/TemplateDataForm/FormFields/ComboBox";
-export { default as Datefield } from "./DataEntryTemplates/TemplateDataForm/FormFields/Datefield";
-export { default as DatetimeField } from "./DataEntryTemplates/TemplateDataForm/FormFields/DatetimeField";
-export { default as TemplateTextField } from "./DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
-export { default as SystemLookupCombobox } from "./DataEntryTemplates/TemplateDataForm/FormFields/SystemLookupCombobox";
-
-export * from "./DataEntryTemplates/DataEntryUtil";
-
-export { default as TemplateForm } from "./DataEntryTemplates/TemplateDataForm/TemplateForm";
-export { default as TemplateGrid } from "./DataEntryTemplates/TemplateDataGrid/TemplateGrid";
-export { default as AttachmentCard } from "./attachment/AttachmentCard";
-export { default as AttachmentImageViewer } from "./attachment/AttachmentImageViewer";
-export { default as AttachmentPanel } from "./attachment/AttachmentPanel";
-export { default as WorkflowDocumentPanel } from "./workflow/WorkflowDocumentPanel";
-export { default as WorkflowDocumentTimeLine } from "./workflow/WorkflowDocumentTimeLine";
-export { default as WorkflowRouteComponent } from "./workflow/WorkflowRouteComponent";
-
-export { default as ExcelReportViewer } from "./report/ExcelReportViewer";
-export { default as ReportViewer } from "./report/ReportViewer";
-
-export { default as TemplateBarChart } from "./visuals/charts/TemplateBarChart";
-export { default as TemplateDataCard } from "./visuals/charts/TemplateDataCard";
-export { default as TemplateGauge } from "./visuals/charts/TemplateGauge";
-export { default as TemplateLineChart } from "./visuals/charts/TemplateLineChart";
-export { default as TemplateLineProgress } from "./visuals/charts/TemplateLineProgress";
-export { default as TemplatePieChart } from "./visuals/charts/TemplatePieChart";
-export { default as DashboardRouteView } from "./visuals/DashboardRouteView";
-export { default as DashboardViewer } from "./visuals/DashboardViewer";
-
-export type * from "./DataEntryTemplates/DataEntryTypes";
-export type { TransferListProps } from "./TransferList";
+export { default as TransferList } from "./TransferList";
+export { default as CheckBox } from "./DataEntryTemplates/TemplateDataForm/FormFields/CheckBox";
+export { default as ComboBox } from "./DataEntryTemplates/TemplateDataForm/FormFields/ComboBox";
+export { default as Datefield } from "./DataEntryTemplates/TemplateDataForm/FormFields/Datefield";
+export { default as DatetimeField } from "./DataEntryTemplates/TemplateDataForm/FormFields/DatetimeField";
+export { default as TemplateTextField } from "./DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
+export { default as SystemLookupCombobox } from "./DataEntryTemplates/TemplateDataForm/FormFields/SystemLookupCombobox";
+
+export * from "./DataEntryTemplates/DataEntryUtil";
+
+export { default as TemplateForm } from "./DataEntryTemplates/TemplateDataForm/TemplateForm";
+export { default as TemplateGrid } from "./DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+export { default as AttachmentCard } from "./attachment/AttachmentCard";
+export { default as AttachmentImageViewer } from "./attachment/AttachmentImageViewer";
+export { default as AttachmentPanel } from "./attachment/AttachmentPanel";
+export { default as WorkflowDocumentPanel } from "./workflow/WorkflowDocumentPanel";
+export { default as WorkflowDocumentTimeLine } from "./workflow/WorkflowDocumentTimeLine";
+export { default as WorkflowRouteComponent } from "./workflow/WorkflowRouteComponent";
+
+export { default as ExcelReportViewer } from "./report/ExcelReportViewer";
+export { default as ReportViewer } from "./report/ReportViewer";
+
+export { default as TemplateBarChart } from "./visuals/charts/TemplateBarChart";
+export { default as TemplateDataCard } from "./visuals/charts/TemplateDataCard";
+export { default as TemplateGauge } from "./visuals/charts/TemplateGauge";
+export { default as TemplateLineChart } from "./visuals/charts/TemplateLineChart";
+export { default as TemplateLineProgress } from "./visuals/charts/TemplateLineProgress";
+export { default as TemplatePieChart } from "./visuals/charts/TemplatePieChart";
+export { default as DashboardRouteView } from "./visuals/DashboardRouteView";
+export { default as DashboardViewer } from "./visuals/DashboardViewer";
+
+export type * from "./DataEntryTemplates/DataEntryTypes";
+export type { TransferListProps } from "./TransferList";