@asaleh37/ui-base 1.2.17 → 1.2.18

package/src/components/templates/DataEntryTemplates/DataEntryTypes.ts

@@ -1,3 +1,4 @@
+import { attachment } from "./../attachment/AttachmentCard";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import {
   DataGridPremiumProps,
@@ -96,7 +97,14 @@ export type TemplateGridColDef = GridColDef & {
   valueField?: string;
 };
 
+export type TemplateGridAttachmentProps = {
+  attachmentCode: string;
+  enableAttachFn?: (record: any) => boolean;
+};
+
 export type TemplateGridProps = {
+  workFlowDocumentCode?: string;
+  attachment?: TemplateGridAttachmentProps;
   formElements: Array<FormElementProps>;
   gridStateKey?: string;
   data: Array<any>;
@@ -178,7 +186,8 @@ export type RecordFieldProps = {
     | "combobox"
     | "checkbox"
     | "html"
-    | "lookup";
+    | "lookup"
+    | "custom";
   lookupType?: string;
   required?: boolean;
   disabled?: boolean;
@@ -259,6 +268,9 @@ export type FormActionProps = {
 };
 
 export type TemplateFormProps = {
+  workFlowDocumentCode?: string;
+  attachment?: TemplateGridAttachmentProps;
+  keyColumnName?: any;
   elements: Array<FormElementProps>;
   findByIdParamName?: string;
   recordIdToEdit?: any;

package/src/components/templates/DataEntryTemplates/DataEntryUtil.ts

@@ -164,6 +164,12 @@ export const constructGridColumnsFromFields: (
         minWidth: 200,
       });
       columns.push(column);
+    } else {
+      const column: TemplateGridColDef = {
+        field: tableField.fieldName,
+        ...tableField?.gridProps?.muiProps,
+      };
+      columns.push(column);
     }
   }
   return columns;

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormElementField.tsx

@@ -218,9 +218,7 @@ const FormElementField: React.FC<FormElementFieldProps> = (
               fieldName
             ]?.message?.toString()}
           />
-        ) : (
-          <>Unknown field type</>
-        )}
+        ) : null}
       </Grid2>
     ) : (
       <></>

package/src/components/templates/DataEntryTemplates/TemplateDataForm/FormFields/SystemLookupCombobox.tsx

@@ -22,7 +22,7 @@ const SystemLookupCombobox: React.FC<SystemLookupListProps> = (props) => {
 
   const loadLookupOptions = async () => {
     await handleGetRequest({
-      endPointURI: "api/v1/dev/system/lookup",
+      endPointURI: "api/v1/public/system/lookup",
       showMask: true,
       parameters: { lookupType: props.lookupType },
       successCallBkFn: (response: any) => {

package/src/components/templates/DataEntryTemplates/TemplateDataForm/TemplateForm.tsx

@@ -4,7 +4,7 @@ import * as z from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useParams } from "react-router-dom";
-import { Button, Grid2 } from "@mui/material";
+import { Button, Grid2, Icon, IconButton, Tooltip } from "@mui/material";
 import { toast } from "react-toastify";
 import FormElementGroup from "./FormElementGroup";
 import FormElementField from "./FormElementField";
@@ -17,10 +17,33 @@ import {
 } from "../DataEntryTypes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useTranslation } from "react-i18next";
+import { useWindow } from "../../../../hooks";
+import AttachmentPanel from "../../attachment/AttachmentPanel";
+import WorkflowDocumentPanel from "../../workflow/WorkflowDocumentPanel";
 
 const TemplateForm: React.FC<TemplateFormProps> = (
   props: TemplateFormProps
 ) => {
+  const { Window: AttachmentWindow, setWindowState: setAttachmentWindowState } =
+    useWindow({
+      windowTitle: "Attachments",
+      windowIcon: "paperclip",
+      width: "fit-content",
+      height: "fit-content",
+      minHeight: 500,
+      minWidth: 400,
+    });
+  const { Window: WorkflowWindow, setWindowState: setWorkflowWindowState } =
+    useWindow({
+      windowTitle: "Approvals",
+      windowIcon: "stamp",
+      width: "fit-content",
+      height: "fit-content",
+      minHeight: 500,
+      minWidth: 400,
+    });
+  const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
+    useState<boolean>(true);
   const { t } = useTranslation();
   const fields = getAllFields(props.elements);
   const initiallyHiddenFields = [];
@@ -141,8 +164,47 @@ const TemplateForm: React.FC<TemplateFormProps> = (
     loadRecord();
   }, [props?.recordIdToEdit]);
 
+  useEffect(() => {
+    if (props?.attachment && props?.attachment?.enableAttachFn) {
+      setAttachmentPanelEnabledForRecord(
+        props.attachment.enableAttachFn(formValues)
+      );
+    } else {
+      setAttachmentPanelEnabledForRecord(true);
+    }
+  }, [formValues]);
+
   return (
     <>
+      {props?.attachment ? (
+        <AttachmentWindow>
+          <AttachmentPanel
+            attachmentCode={props.attachment.attachmentCode}
+            refKey={formValues[props?.keyColumnName || "id"]}
+            enableAttachment={attachmentPanelEnabledForRecord}
+          />
+        </AttachmentWindow>
+      ) : (
+        <></>
+      )}
+      {props?.workFlowDocumentCode ? (
+        <WorkflowWindow>
+          <WorkflowDocumentPanel
+            workFlowDocumentCode={props.workFlowDocumentCode}
+            refDocumentId={formValues[props?.keyColumnName || "id"]}
+            postActionCallBk={() => {
+              setWorkflowWindowState(false);
+              loadRecord();
+            }}
+            cancelActionCallBk={() => {
+              setWorkflowWindowState(false);
+            }}
+          />
+        </WorkflowWindow>
+      ) : (
+        <></>
+      )}
+
       <Box
         sx={{
           display: "flex",
@@ -218,14 +280,44 @@ const TemplateForm: React.FC<TemplateFormProps> = (
           justifyContent: "flex-start",
         }}
       >
+        {formValues[props?.keyColumnName || "id"] ? (
+          props?.attachment ? (
+            <Tooltip title="Attachments">
+              <IconButton
+                onClick={() => {
+                  setAttachmentWindowState(true);
+                }}
+              >
+                <FontAwesomeIcon icon="paperclip" />
+              </IconButton>
+            </Tooltip>
+          ) : null
+        ) : null}
+        {formValues[props?.keyColumnName || "id"] ? (
+          props?.workFlowDocumentCode ? (
+            <Tooltip title="Approvals">
+              <IconButton
+                onClick={() => {
+                  setWorkflowWindowState(true);
+                }}
+              >
+                <FontAwesomeIcon icon="stamp" />
+              </IconButton>
+            </Tooltip>
+          ) : null
+        ) : null}
         {props?.actions ? (
-          props.actions.map((action: RecordAction) => {
-            if (action?.formActionProps?.enabled === true) {
-              return <FormAction {...action} record={formValues} />;
-            } else {
-              return <></>;
-            }
-          })
+          formValues[props?.keyColumnName || "id"] ? (
+            props.actions.map((action: RecordAction) => {
+              if (action?.formActionProps?.enabled === true) {
+                return <FormAction {...action} record={formValues} />;
+              } else {
+                return <></>;
+              }
+            })
+          ) : (
+            <></>
+          )
         ) : (
           <></>
         )}

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid.tsx

@@ -47,6 +47,8 @@ import { useWindow } from "../../../../hooks/UseWindow";
 import { useAxios } from "../../../../hooks";
 import useLookupGridColumn from "../../../../hooks/useLookupGridColumn";
 import { ContinuousColorLegend } from "@mui/x-charts";
+import AttachmentPanel from "../../attachment/AttachmentPanel";
+import WorkflowDocumentPanel from "../../workflow/WorkflowDocumentPanel";
 let currentNewRecordIndex = -1;
 
 interface GridState {
@@ -78,12 +80,33 @@ const saveGridState = (gridStateKey: string, statePart: GridState) => {
 const PIN_FIXED_COLUMNS = ["__check__", "actions"];
 
 const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
+  const { t } = useTranslation();
   const AppLayout = useSelector((state: any) => state.AppLayout);
+  const [selectedRecord, setSelectedRecord] = useState<any>({});
+  const [attachmentPanelEnabledForRecord, setAttachmentPanelEnabledForRecord] =
+    useState<boolean>(true);
   const { getLookupOptions } = useLookupGridColumn();
+  const { Window: AttachmentWindow, setWindowState: setAttachmentWindowState } =
+    useWindow({
+      windowTitle: t(props.gridTitle) + " Attachments",
+      windowIcon: "paperclip",
+      width: "fit-content",
+      height: "fit-content",
+      minHeight: 500,
+      minWidth: 400,
+    });
+  const { Window: WorkFlowWindow, setWindowState: setWorkFlowWindowState } =
+    useWindow({
+      windowTitle: t(props.gridTitle) + " Attachments",
+      windowIcon: "paperclip",
+      width: "fit-content",
+      height: "fit-content",
+      minHeight: 500,
+      minWidth: 400,
+    });
   const [generatedColumns, setGeneratedColumns] = useState<
     Array<TemplateGridColDef>
   >([]);
-  const { t } = useTranslation();
   const fields = getAllFields(props.formElements);
   const hiddenFields = [];
   const savedState = React.useMemo<GridState>(
@@ -174,7 +197,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
         gridColumn.options = await getLookupOptions(gridColumn.lookupType);
         gridColumn.valueField = "lookupValue";
       }
-    }    
+    }
     setGeneratedColumns(gridColumns);
   };
   const [rowSelectionModel, setRowSelectionModel] =
@@ -558,6 +581,49 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
         }
       }
     }
+    if (props?.attachment) {
+      actions?.push(
+        <GridActionsCellItem
+          icon={
+            <Tooltip title={"Attachments"}>
+              <FontAwesomeIcon icon={"paperclip"} />
+            </Tooltip>
+          }
+          label={"Attachments"}
+          className="textPrimary"
+          color="inherit"
+          onClick={() => {
+            setSelectedRecord(record);
+            if (props?.attachment?.enableAttachFn) {
+              setAttachmentPanelEnabledForRecord(
+                props.attachment.enableAttachFn(record)
+              );
+            } else {
+              setAttachmentPanelEnabledForRecord(true);
+            }
+            setAttachmentWindowState(true);
+          }}
+        />
+      );
+    }
+    if (props?.workFlowDocumentCode) {
+      actions?.push(
+        <GridActionsCellItem
+          icon={
+            <Tooltip title={"Approvals"}>
+              <FontAwesomeIcon icon={"stamp"} />
+            </Tooltip>
+          }
+          label={"Approvals"}
+          className="textPrimary"
+          color="inherit"
+          onClick={() => {
+            setSelectedRecord(record);
+            setWorkFlowWindowState(true);
+          }}
+        />
+      );
+    }
     if (props?.rowActions) {
       for (const rowAction of props.rowActions) {
         if (
@@ -590,7 +656,9 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
     width:
       (props?.rowActions ? props.rowActions.length * 30 : 0) +
       (props?.editAction && props?.editAction?.isEnabled ? 30 : 0) +
-      (props?.deleteAction && props?.deleteAction?.isEnabled ? 30 : 0),
+      (props?.deleteAction && props?.deleteAction?.isEnabled ? 30 : 0) +
+      (props?.attachment ? 30 : 0) +
+      (props?.workFlowDocumentCode ? 30 : 0),
     getActions: getActionColumnActions,
   };
 
@@ -614,6 +682,10 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
     adjustGridColumns();
   }, []);
 
+  useEffect(() => {
+    props.apiActions.reloadData(props?.gridLoadParametersValues);
+  }, [session.UserInfo?.currentOrganization]);
+
   useEffect(() => {
     adjustGridColumns();
   }, [themeDirection, props.formElements]);
@@ -698,6 +770,8 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
             />
           ) : (
             <TemplateForm
+              keyColumnName={props.keyColumnName}
+              attachment={props.attachment}
               formLoadCallBk={props.formLoadCallBk}
               recordIdToEdit={
                 recordToEdit ? recordToEdit[keyColumnName] : undefined
@@ -818,7 +892,34 @@ const TemplateGrid: React.FC<TemplateGridProps> = (props) => {
       ) : (
         <></>
       )}
-
+      {props?.attachment ? (
+        <AttachmentWindow>
+          <AttachmentPanel
+            attachmentCode={props.attachment.attachmentCode}
+            refKey={selectedRecord[props?.keyColumnName || "id"]}
+            enableAttachment={attachmentPanelEnabledForRecord}
+          />
+        </AttachmentWindow>
+      ) : (
+        <></>
+      )}
+      {props?.workFlowDocumentCode ? (
+        <WorkFlowWindow>
+          <WorkflowDocumentPanel
+            workFlowDocumentCode={props.workFlowDocumentCode}
+            refDocumentId={selectedRecord[props?.keyColumnName || "id"]}
+            postActionCallBk={() => {
+              setWorkFlowWindowState(false);
+              props.apiActions.reloadData(props.gridLoadParametersValues);
+            }}
+            cancelActionCallBk={() => {
+              setWorkFlowWindowState(false);
+            }}
+          />
+        </WorkFlowWindow>
+      ) : (
+        <></>
+      )}
       <DataGridPremium
         {...props?.muiProps}
         slots={{ toolbar: TemplateGridTopBar }}

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

@@ -0,0 +1,126 @@
+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 } 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;
+  remark: string;
+};
+
+const AttachmentCard: React.FC<attachment> = (props) => {
+  const { handleGetRequest, handleDeleteRequest } = useAxios();
+
+  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>
+          <IconButton
+            size="small"
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            <Tooltip title="Delete Attachment">
+              <FontAwesomeIcon icon="trash" />
+            </Tooltip>
+          </IconButton>
+          <div style={{ flex: 1 }}></div>
+          <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

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { Avatar } from "@mui/material";
+
+type AttachmentImageViewerProps = {
+  attachmentId?: number;
+  attachmentCode?: string;
+  refKey?: string;
+  category?: string;
+  showAsAvatar?: boolean;
+};
+
+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} />
+  ) : (
+    <img
+      src={imgSrc}
+      alt="image"
+      onError={() => setImgSrc("/no_image.png")}
+      style={{
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        display: "block",
+      }}
+    />
+  );
+};
+
+export default AttachmentImageViewer;