@asaleh37/ui-base 1.2.17 → 1.2.19

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

@@ -0,0 +1,269 @@
+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}
+                  />
+                </Grid2>
+              );
+            })}
+          </Grid2>
+        </>
+      ) : (
+        <></>
+      )}
+    </Paper>
+  );
+};
+
+export default AttachmentPanel;

package/src/components/templates/workflow/WorkflowDocumentPanel.tsx

@@ -10,7 +10,7 @@ import { toast } from "react-toastify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ReportViewer from "../report/ReportViewer";
 
-type WorkflowDocumentPanelProps = {
+export type WorkflowDocumentPanelProps = {
   workFlowDocumentCode: string;
   refDocumentId: any;
   postActionCallBk?: () => void;
@@ -104,7 +104,7 @@ const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
     });
   const loadWorkFlowDocumentInfo = async () => {
     await handleGetRequest({
-      endPointURI: "api/v1/dev/workflow/doc/info",
+      endPointURI: "api/v1/public/workflow/doc/info",
       showMask: true,
       parameters: {
         workflowDocumentCode: props.workFlowDocumentCode,
@@ -165,7 +165,7 @@ const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
   };
   const processWorkflowDocumentAction = async () => {
     await handlePostRequest({
-      endPointURI: "api/v1/dev/workflow/doc/action",
+      endPointURI: "api/v1/public/workflow/doc/action",
       showMask: true,
       data: {
         workflowDocumentId: workflowDocumentInfo?.workflowDocument?.id,
@@ -263,7 +263,7 @@ const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
             }
             resultMode="App"
             byPassParameterEntry={true}
-            reportParametersValues={{ doc_id: props.refDocumentId+'' }}
+            reportParametersValues={{ doc_id: props.refDocumentId + "" }}
           />
         </ReporTViewWindow>
       ) : (

package/src/hooks/UseSession.tsx

@@ -7,10 +7,28 @@ const useSession = () => {
     if (UserSession?.value?.authorities) {
       for (let grantedAuthority of UserSession.value.authorities) {
         if (
-          grantedAuthority?.authority === "DEVELOPMENT_ADMIN" ||
-          grantedAuthority?.authority === authorityCode
+          authorityCode === "DEVELOPMENT_ADMIN" &&
+          (grantedAuthority?.authority === "DEVELOPMENT_ADMIN" ||
+            grantedAuthority?.authority === "ORGANIZATION_ADMIN")
         ) {
           return true;
+        } else if (
+          authorityCode === "ORGANIZATION_ADMIN" &&
+          grantedAuthority?.authority === "ORGANIZATION_ADMIN"
+        ) {
+          return true;
+        } else if (
+          authorityCode !== "DEVELOPMENT_ADMIN" &&
+          authorityCode !== "ORGANIZATION_ADMIN"
+        ) {
+          if (
+            grantedAuthority?.authority === "ORGANIZATION_ADMIN" ||
+            grantedAuthority?.authority === "DEVELOPMENT_ADMIN" ||
+            grantedAuthority?.authority === "SYSTEM_ADMIN" ||
+            grantedAuthority?.authority === authorityCode
+          ) {
+            return true;
+          }
         }
       }
     }

package/src/hooks/useAxios.tsx

@@ -1,5 +1,5 @@
 import { toast } from "react-toastify";
-import axios from "axios";
+import axios, { ResponseType } from "axios";
 import { useSelector } from "react-redux";
 import useLoadingMask from "./useLoadingMask";
 
@@ -11,6 +11,18 @@ export interface APIRequest {
   loadingMessage?: string;
   successCallBkFn?: Function;
   failureCallBkFn?: Function;
+  headers?: any;
+  responseType?: ResponseType;
+}
+
+export interface UploadAttachmentRequest {
+  endPointURI: string;
+  showMask?: Boolean;
+  parameters?: any;
+  loadingMessage?: string;
+  successCallBkFn?: Function;
+  failureCallBkFn?: Function;
+  files: FileList;
 }
 
 const useAxios = () => {
@@ -77,9 +89,7 @@ const useAxios = () => {
       return "ERROR";
     }
   );
-  const handleGetRequest = async (
-    props: APIRequest = { endPointURI: "", parameters: {} }
-  ) => {
+  const handleGetRequest = async (props: APIRequest) => {
     if (
       props.showMask !== undefined &&
       props.showMask != null &&
@@ -90,7 +100,8 @@ const useAxios = () => {
     const response: any = await axiosInstance.get(props.endPointURI, {
       params: { ...props.parameters },
       withCredentials: true,
-      // withCredentials: true,
+      headers: props.headers,
+      responseType: props?.responseType,
     });
     if (
       props.showMask !== undefined &&
@@ -160,9 +171,7 @@ const useAxios = () => {
       return "ERROR";
     }
   };
-  const handlePostRequest = async (
-    props: APIRequest = { endPointURI: "", parameters: {}, data: {} }
-  ) => {
+  const handlePostRequest = async (props: APIRequest) => {
     if (
       props.showMask !== undefined &&
       props.showMask != null &&
@@ -175,6 +184,8 @@ const useAxios = () => {
       props.data,
       {
         params: props.parameters,
+        responseType: props?.responseType,
+        headers: props?.headers,
       }
     );
     if (
@@ -202,9 +213,7 @@ const useAxios = () => {
       return "ERROR";
     }
   };
-  const handleDeleteRequest = async (
-    props: APIRequest = { endPointURI: "", parameters: {} }
-  ) => {
+  const handleDeleteRequest = async (props: APIRequest) => {
     if (
       props.showMask !== undefined &&
       props.showMask != null &&
@@ -216,6 +225,56 @@ const useAxios = () => {
       params: {
         ...props.parameters,
       },
+      responseType: props?.responseType,
+      headers: props?.headers,
+    });
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.hide();
+    }
+    if (response !== "ERROR") {
+      if (
+        props.successCallBkFn !== undefined &&
+        props.successCallBkFn != null
+      ) {
+        props.successCallBkFn(response);
+      }
+      return response;
+    } else {
+      if (
+        props.failureCallBkFn !== undefined &&
+        props.failureCallBkFn != null
+      ) {
+        props.failureCallBkFn(response);
+      }
+      return "ERROR";
+    }
+  };
+
+  const handleUploadRequest = async (props: UploadAttachmentRequest) => {
+    if (props.files === null || props.files.length === 0) {
+      toast.error("You must add files to upload");
+      return "ERROR";
+    }
+    const formData = new FormData();
+    for (const file of props.files) {
+      formData.append("files", file);
+    }
+    if (
+      props.showMask !== undefined &&
+      props.showMask != null &&
+      props.showMask === true
+    ) {
+      mask.show(props.loadingMessage);
+    }
+    let response: any = await axiosInstance.post(props.endPointURI, formData, {
+      params: props?.parameters,
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
     });
     if (
       props.showMask !== undefined &&
@@ -247,6 +306,7 @@ const useAxios = () => {
     handlePostRequest,
     handleDeleteRequest,
     HandleDownloadHTTPPostPDF,
+    handleUploadRequest,
   };
 };
 

package/src/hooks/useLookupGridColumn.tsx

@@ -8,7 +8,7 @@ const useLookupGridColumn = () => {
   const getLookupOptions = async (lookupType: string) => {
     let options = [];
     await handleGetRequest({
-      endPointURI: "api/v1/dev/system/lookup",
+      endPointURI: "api/v1/public/system/lookup",
       showMask: true,
       parameters: { lookupType },
       successCallBkFn: (response: any) => {
@@ -17,7 +17,7 @@ const useLookupGridColumn = () => {
     });
     return options;
   };
-  const generateLookupGridColumn = async (props: TemplateGridColDef) => {    
+  const generateLookupGridColumn = async (props: TemplateGridColDef) => {
     let options = await getLookupOptions(props.lookupType);
     return {
       ...props,

package/src/layout/MainContent.tsx

@@ -16,6 +16,7 @@ const MainContent: React.FC = () => {
   const businessRoutes = useSelector(
     (state: any) => state.AppInfo.value.businessRoutes
   );
+  const { UserInfo } = useSession();
   const dispatch = useDispatch();
   const { show, hide } = useLoadingMask();
   const commonStores = useSelector((state: any) => state.commonStores);
@@ -24,6 +25,7 @@ const MainContent: React.FC = () => {
   const { handleGetRequest } = useAxios();
   const loadCommonStores = async () => {
     show("Loading ... please wait");
+    setAutoLoadLoaded(false);
     const stores = commonStores.stores;
     const storeKeys = commonStores.storeKeys;
     for (let storeKey of storeKeys) {
@@ -46,6 +48,7 @@ const MainContent: React.FC = () => {
         });
       }
     }
+    setAutoLoadLoaded(true);
     hide();
   };
 
@@ -53,57 +56,57 @@ const MainContent: React.FC = () => {
     if (commonStores?.storeKeys) {
       loadCommonStores();
     }
-  }, [commonStores.storeKeys]);
+  }, [commonStores.storeKeys, UserInfo?.currentOrganization]);
   return (
     <CacheProvider
       value={AppLayoutState.appDirection === "ltr" ? cacheLtr : cacheRtl}
     >
-      {/* {isAutoLoadLoaded ? ( */}
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          // alignItems: "center",
-          justifyContent: "flex-start",
-          flex: 1,
-          overflow: "hidden",
-          padding: 3,
-        }}
-      >
-        <Routes>
-          {AppInfo.enableAdministrationModule
-            ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
-                return (
-                  <Route
-                    key={"adm" + index}
-                    path={route.path}
-                    element={
-                      <RouteWrapper authority={route.authority}>
-                        <route.component />
-                      </RouteWrapper>
-                    }
-                  />
-                );
-              })
-            : null}
-          {businessRoutes.map((route: SystemRoute, index) => {
-            return (
-              <Route
-                key={"bs" + index}
-                path={route.path}
-                element={
-                  <RouteWrapper authority={route.authority}>
-                    <route.component />
-                  </RouteWrapper>
-                }
-              />
-            );
-          })}
-        </Routes>
-      </Box>
-      {/* ) : (
+      {isAutoLoadLoaded ? (
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            // alignItems: "center",
+            justifyContent: "flex-start",
+            flex: 1,
+            overflow: "hidden",
+            padding: 3,
+          }}
+        >
+          <Routes>
+            {AppInfo.enableAdministrationModule
+              ? SYSTEM_ROUTES.map((route: SystemRoute, index) => {
+                  return (
+                    <Route
+                      key={"adm" + index}
+                      path={route.path}
+                      element={
+                        <RouteWrapper authority={route.authority}>
+                          <route.component />
+                        </RouteWrapper>
+                      }
+                    />
+                  );
+                })
+              : null}
+            {businessRoutes.map((route: SystemRoute, index) => {
+              return (
+                <Route
+                  key={"bs" + index}
+                  path={route.path}
+                  element={
+                    <RouteWrapper authority={route.authority}>
+                      <route.component />
+                    </RouteWrapper>
+                  }
+                />
+              );
+            })}
+          </Routes>
+        </Box>
+      ) : (
         <></>
-      )} */}
+      )}
     </CacheProvider>
   );
 };

package/src/layout/TopBar.tsx

@@ -21,6 +21,7 @@ import i18n, { changeLanguage } from "../locales/i18n";
 import { useSession, useWindow } from "../hooks";
 import ChangeOrgForm from "../components/common/ChangeOrgForm";
 import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
+import AttachmentImageViewer from "../components/templates/attachment/AttachmentImageViewer";
 
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
@@ -191,7 +192,11 @@ const TopBar: React.FC = () => {
             <></>
           )}
 
-          <Avatar />
+          <AttachmentImageViewer
+            showAsAvatar={true}
+            attachmentCode="PERSON_IMG"
+            refKey={UserSession.value?.id + ""}
+          />
           <div style={{ marginLeft: 5, marginRight: 5 }}>
             {isMobile ? "" : UserSession.value?.username}
           </div>

package/src/locales/arabic/devLocalsAr.json

@@ -276,5 +276,17 @@
   "WORKFLOW_DOCUMENT_STATUS_IS_ZERO_STATE": "Is zero state",
   "WORKFLOW_DOCUMENT_STATUS_NEXT_ACTION_TAKERS_QUERY_ID": "Next action takers query id",
   "WORKFLOW_DOCUMENT_STATUS_NEXT_ACTIONS_QUERY_ID": "Next actions query id",
-  "WORKFLOW_DOCUMENT_STATUS_WORKFLOW_DOCUMENT_ID": "Workflow document id"
+  "WORKFLOW_DOCUMENT_STATUS_WORKFLOW_DOCUMENT_ID": "Workflow document id",    
+  "ATTACHMENT_ATTACHMENT_CONFIG_ID": "Attachment config id",  
+  "ATTACHMENT_CONFIG_SINGULAR": "Attachment Configuration",
+  "ATTACHMENT_CONFIG_PLURAL": "Attachment Configuration",
+  "ATTACHMENT_CONFIG_ALLOWED_FILE_TYPES": "Allowed file types",
+  "ATTACHMENT_CONFIG_ATTACHMENT_CATEGORIES": "Attachment categories",
+  "ATTACHMENT_CONFIG_ATTACHMENT_CODE": "Attachment code",
+  "ATTACHMENT_CONFIG_DOWNLOAD_AUTHORITY_KEY": "Download authority key",
+  "ATTACHMENT_CONFIG_MAX_ALLOWED_NUMBER_OF_FILES": "Max allowed number of files",
+  "ATTACHMENT_CONFIG_RELATED_DATABASE_TABLE": "Related database table",
+  "ATTACHMENT_CONFIG_STORAGE_TYPE": "Storage type",
+  "ATTACHMENT_CONFIG_UPLOAD_AUTHORITY_KEY": "Upload authority key",
+  "ATTACHMENT_CONFIG_UPLOAD_DIRECTORY": "Upload directory"
 }

package/src/locales/english/devLocalsEn.json

@@ -277,5 +277,17 @@
   "WORKFLOW_DOCUMENT_STATUS_IS_ZERO_STATE": "Is zero state",
   "WORKFLOW_DOCUMENT_STATUS_NEXT_ACTION_TAKERS_QUERY_ID": "Next action takers query id",
   "WORKFLOW_DOCUMENT_STATUS_NEXT_ACTIONS_QUERY_ID": "Next actions query id",
-  "WORKFLOW_DOCUMENT_STATUS_WORKFLOW_DOCUMENT_ID": "Workflow document id"
+  "WORKFLOW_DOCUMENT_STATUS_WORKFLOW_DOCUMENT_ID": "Workflow document id",
+  "ATTACHMENT_ATTACHMENT_CONFIG_ID": "Attachment config id",
+  "ATTACHMENT_CONFIG_SINGULAR": "Attachment Configuration",
+  "ATTACHMENT_CONFIG_PLURAL": "Attachment Configuration",
+  "ATTACHMENT_CONFIG_ALLOWED_FILE_TYPES": "Allowed file types",
+  "ATTACHMENT_CONFIG_ATTACHMENT_CATEGORIES": "Attachment categories",
+  "ATTACHMENT_CONFIG_ATTACHMENT_CODE": "Attachment code",
+  "ATTACHMENT_CONFIG_DOWNLOAD_AUTHORITY_KEY": "Download authority key",
+  "ATTACHMENT_CONFIG_MAX_ALLOWED_NUMBER_OF_FILES": "Max allowed number of files",
+  "ATTACHMENT_CONFIG_RELATED_DATABASE_TABLE": "Related database table",
+  "ATTACHMENT_CONFIG_STORAGE_TYPE": "Storage type",
+  "ATTACHMENT_CONFIG_UPLOAD_AUTHORITY_KEY": "Upload authority key",
+  "ATTACHMENT_CONFIG_UPLOAD_DIRECTORY": "Upload directory"
 }