@asaleh37/ui-base 1.2.3 → 1.2.5

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

@@ -0,0 +1,581 @@
+import { useEffect, useState } from "react";
+import { useAxios, useSession, useWindow } from "../../../hooks";
+import { Avatar, Box, Button, Divider, Grid2, Paper } from "@mui/material";
+import TemplateTextField from "../DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
+import ComboBox from "../DataEntryTemplates/TemplateDataForm/FormFields/ComboBox";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import WorkflowDocumentTimeLine from "./WorkflowDocumentTimeLine";
+import { toast } from "react-toastify";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ReportViewer from "../report/ReportViewer";
+
+type WorkflowDocumentPanelProps = {
+  workFlowDocumentCode: string;
+  refDocumentId: any;
+  postActionCallBk?: () => void;
+  cancelActionCallBk?: () => void;
+};
+
+export type workflowDocumentAction = {
+  id: number;
+  document_action_code: string;
+  document_action_ar_name: string;
+  document_action_en_name: string;
+  post_action_endpoint?: string;
+  pre_action_endpoint?: string;
+  next_document_status_id?: number;
+  next_action_takers?: Array<person>;
+  require_comment: any;
+};
+
+export type person = {
+  id: number;
+  email: string;
+  employeeArName: string;
+  employeeEnName: string;
+  mobileNumber: string;
+  username: string;
+};
+
+export type workflowDocumentActionHistory = {
+  id: number;
+  actionTime: string;
+  actionMethod: string;
+  actionComment: string;
+  documentActionArName: string;
+  documentActionEnName: string;
+  employeeArName: string;
+  employeeEnName: string;
+};
+
+type WorkflowDocumentInfo = {
+  workflowDocument: any;
+  referencedDocument: any;
+  workflowDocumentReport: any;
+  workflowDocumentStatus: any;
+  actionsHistory: Array<workflowDocumentActionHistory>;
+  nextActions: Array<workflowDocumentAction>;
+  nextActionTakers: any;
+};
+
+const WorkflowDocumentPanel: React.FC<WorkflowDocumentPanelProps> = (props) => {
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { isUserAuthorized, UserInfo } = useSession();
+  const { handleGetRequest, handlePostRequest } = useAxios();
+  const [action, setAction] = useState<workflowDocumentAction>(null);
+  const [authorizedActions, setAuthorizedActions] = useState<
+    Array<workflowDocumentAction>
+  >([]);
+  const { t } = useTranslation();
+  const [actionComment, setActionComment] = useState(null);
+  const [workflowDocumentInfo, setWorkflowDocumentInfo] =
+    useState<WorkflowDocumentInfo>({
+      referencedDocument: null,
+      workflowDocumentReport: null,
+      workflowDocument: null,
+      workflowDocumentStatus: null,
+      actionsHistory: [],
+      nextActionTakers: null,
+      nextActions: [],
+    });
+  const { Window: ReporTViewWindow, setWindowState: setReportViewWindowState } =
+    useWindow({
+      windowTitle:
+        AppLayout.appDirection === "ltr"
+          ? workflowDocumentInfo?.workflowDocument &&
+            workflowDocumentInfo?.referencedDocument
+            ? `${workflowDocumentInfo?.workflowDocument?.documentEnName} # ${
+                workflowDocumentInfo?.referencedDocument[
+                  workflowDocumentInfo?.workflowDocument?.documentNumberField
+                ]
+              }`
+            : "Document"
+          : workflowDocumentInfo?.workflowDocument &&
+            workflowDocumentInfo?.referencedDocument
+          ? `${workflowDocumentInfo?.workflowDocument?.documentArName} # ${
+              workflowDocumentInfo?.referencedDocument[
+                workflowDocumentInfo?.workflowDocument?.documentNumberField
+              ]
+            }`
+          : "وثيقة",
+      windowIcon: "eye",
+      width: "80%",
+    });
+  const loadWorkFlowDocumentInfo = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/dev/workflow/doc/info",
+      showMask: true,
+      parameters: {
+        workflowDocumentCode: props.workFlowDocumentCode,
+        refDocumentId: props.refDocumentId,
+      },
+      successCallBkFn: (response: any) => {
+        setWorkflowDocumentInfo(response.data);
+      },
+      failureCallBkFn: () => {
+        setWorkflowDocumentInfo({
+          referencedDocument: null,
+          workflowDocumentReport: null,
+          workflowDocument: null,
+          workflowDocumentStatus: null,
+          actionsHistory: [],
+          nextActions: [],
+          nextActionTakers: null,
+        });
+      },
+    });
+  };
+
+  const validateBeforeProcessWorkflowDocumentAction = async () => {
+    if (
+      action === undefined ||
+      action === null ||
+      action?.id === undefined ||
+      action?.id === null
+    ) {
+      toast.error("You must select action to process");
+      return;
+    }
+    if (
+      (action.require_comment === true ||
+        action.require_comment === 1 ||
+        action.require_comment === "true") &&
+      (actionComment === null || actionComment === "")
+    ) {
+      toast.error("You must enter comment for the action to be processed");
+      return;
+    }
+    if (action?.pre_action_endpoint) {
+      await handlePostRequest({
+        endPointURI: action.pre_action_endpoint,
+        showMask: true,
+        loadingMessage: "Processing pre action validation ... please wait",
+        parameters: {
+          refDocumentId: props.refDocumentId,
+          actionId: action.id,
+        },
+        successCallBkFn: () => {
+          processWorkflowDocumentAction();
+        },
+      });
+      return;
+    }
+    processWorkflowDocumentAction();
+  };
+  const processWorkflowDocumentAction = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/dev/workflow/doc/action",
+      showMask: true,
+      data: {
+        workflowDocumentId: workflowDocumentInfo?.workflowDocument?.id,
+        refDocumentId: props.refDocumentId,
+        actionId: action.id,
+        refDocumentStatus:
+          workflowDocumentInfo?.workflowDocumentStatus?.documentStatusCode,
+        actionComment: actionComment,
+      },
+      successCallBkFn: async (response) => {
+        if (action?.post_action_endpoint) {
+          await handlePostRequest({
+            endPointURI: action.post_action_endpoint,
+            showMask: true,
+            loadingMessage: "Processing post action process ... please wait",
+            parameters: {
+              refDocumentId: props.refDocumentId,
+              actionId: action.id,
+            },
+            successCallBkFn: () => {
+              loadWorkFlowDocumentInfo();
+            },
+          });
+          return;
+        }
+        loadWorkFlowDocumentInfo();
+      },
+    });
+  };
+
+  const adjustAuthorizedActions = () => {
+    if (workflowDocumentInfo?.nextActions?.length > 0) {
+      setAuthorizedActions(
+        workflowDocumentInfo.nextActions.filter((action) => {
+          if (
+            !(
+              workflowDocumentInfo?.workflowDocumentStatus
+                ?.nextActionTakersAuthority ||
+              workflowDocumentInfo?.nextActionTakers
+            )
+          ) {
+            return true;
+          }
+          if (
+            workflowDocumentInfo?.workflowDocumentStatus
+              ?.nextActionTakersAuthority
+          ) {
+            if (
+              isUserAuthorized(
+                workflowDocumentInfo.workflowDocumentStatus
+                  .nextActionTakersAuthority
+              )
+            ) {
+              return true;
+            }
+          }
+          if (workflowDocumentInfo?.nextActionTakers) {
+            for (const actionTaker of workflowDocumentInfo.nextActionTakers) {
+              if (
+                UserInfo?.username === actionTaker?.username ||
+                UserInfo?.username === actionTaker?.USERNAME
+              ) {
+                return true;
+              }
+            }
+          }
+          return false;
+        })
+      );
+    } else {
+      setAuthorizedActions([]);
+    }
+  };
+
+  useEffect(() => {
+    if (props.refDocumentId && props.workFlowDocumentCode) {
+      loadWorkFlowDocumentInfo();
+    }
+  }, [props.refDocumentId, props.workFlowDocumentCode]);
+
+  useEffect(() => {
+    if (workflowDocumentInfo?.nextActions) {
+      adjustAuthorizedActions();
+    } else {
+      setAuthorizedActions([]);
+    }
+  }, [workflowDocumentInfo.nextActions, workflowDocumentInfo.nextActionTakers]);
+  return (
+    <>
+      {workflowDocumentInfo?.workflowDocumentReport?.id ? (
+        <ReporTViewWindow>
+          <ReportViewer
+            reportCode={
+              workflowDocumentInfo?.workflowDocumentReport?.reportCode
+            }
+            resultMode="App"
+            byPassParameterEntry={true}
+            reportParametersValues={{ doc_id: props.refDocumentId+'' }}
+          />
+        </ReporTViewWindow>
+      ) : (
+        <></>
+      )}
+
+      {workflowDocumentInfo?.workflowDocument ? (
+        <Box
+          sx={{
+            width: "100%",
+            textAlign: "center",
+            fontSize: 20,
+            fontWeight: "bold",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Box sx={{ flex: 1 }}></Box>
+          <FontAwesomeIcon
+            icon="file"
+            style={{ marginRight: 10, marginLeft: 10 }}
+          />
+          {AppLayout.appDirection === "ltr"
+            ? `${workflowDocumentInfo?.workflowDocument?.documentEnName} # ${
+                workflowDocumentInfo?.referencedDocument[
+                  workflowDocumentInfo?.workflowDocument?.documentNumberField
+                ]
+              }`
+            : `${workflowDocumentInfo?.workflowDocument?.documentArName} # ${
+                workflowDocumentInfo?.referencedDocument[
+                  workflowDocumentInfo?.workflowDocument?.documentNumberField
+                ]
+              }`}
+          {workflowDocumentInfo?.workflowDocumentStatus
+            ? AppLayout.appDirection === "ltr"
+              ? ` ( ${workflowDocumentInfo?.workflowDocumentStatus?.documentStatusEnName} )`
+              : ` ( ${workflowDocumentInfo?.workflowDocumentStatus?.documentStatusArName} )`
+            : ""}
+          <Box sx={{ flex: 1 }}></Box>
+          {workflowDocumentInfo?.workflowDocumentReport?.id ? (
+            <Button
+              onClick={() => {
+                setReportViewWindowState(true);
+              }}
+              variant="outlined"
+              startIcon={<FontAwesomeIcon icon="eye" />}
+            >
+              {t("VIEW_LABEL")}
+            </Button>
+          ) : (
+            <></>
+          )}
+        </Box>
+      ) : (
+        <></>
+      )}
+
+      <Box
+        sx={{
+          flex: 1,
+          width: "100%",
+          overflow: "hidden",
+          display: "flex",
+          // flexDirection: "column",
+        }}
+      >
+        {authorizedActions?.length > 0 ? (
+          <Paper
+            sx={{
+              padding: 2,
+              display: "flex",
+              flex: 1,
+              margin: 1,
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              overflow: "hidden",
+            }}
+          >
+            <ComboBox
+              sx={{ marginBottom: 2, width: 400 }}
+              label={t("WE_AVAILABLE_ACTIONS_LABEL")}
+              displayField={
+                AppLayout.appDirection === "ltr"
+                  ? "document_action_en_name"
+                  : "document_action_ar_name"
+              }
+              valueField={"id"}
+              value={action?.id}
+              options={authorizedActions}
+              onChangeCallBack={(v, selectedRecord) => {
+                setAction(selectedRecord);
+              }}
+            />
+            {/* <ComboBox
+          sx={{ marginBottom: 2, width: 400 }}
+          label={t("WE_NEXT_APPROVER_LABEL")}
+          displayField={
+            AppLayout.appDirection === "ltr"
+              ? "employeeEnName"
+              : "employeeArName"
+          }
+          valueField={"id"}
+          value={nextActionTaker?.id}
+          options={action?.nextActionTakers || []}
+          onChangeCallBack={(v, selectedRecord) => {
+            setNextActionTaker(selectedRecord);
+          }}
+        /> */}
+            <TemplateTextField
+              sx={{ width: 400 }}
+              rows={3}
+              value={actionComment}
+              onChange={(event) => {
+                setActionComment(event.target.value);
+              }}
+              multiline={true}
+              label={t("WF_COMMENT_LABEL")}
+            />
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Button
+                color="success"
+                variant="contained"
+                sx={{ width: 200, m: 1 }}
+                onClick={validateBeforeProcessWorkflowDocumentAction}
+              >
+                {t("WF_TAKE_ACTION_BTN_LABEL")}
+              </Button>
+              {props?.cancelActionCallBk ? (
+                <Button
+                  variant="contained"
+                  sx={{ width: 200, m: 1 }}
+                  color="error"
+                  onClick={() => {
+                    if (props?.cancelActionCallBk) {
+                      props.cancelActionCallBk();
+                    }
+                  }}
+                >
+                  {t("WF_CANCEL_BTN_LABEL")}
+                </Button>
+              ) : (
+                <></>
+              )}
+            </Box>
+            {workflowDocumentInfo?.nextActionTakers &&
+            workflowDocumentInfo.nextActionTakers.length > 0 ? (
+              <>
+                <Divider
+                  variant="fullWidth"
+                  flexItem
+                  sx={{ marginTop: 1, marginBottom: 1 }}
+                >
+                  <Box
+                    sx={{
+                      width: "100%",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 18,
+                      fontWeight: "bold",
+                    }}
+                  >
+                    <FontAwesomeIcon
+                      icon="users"
+                      style={{ marginRight: 10, marginLeft: 10 }}
+                    />{" "}
+                    {t("WF_WAITING_FOR_LABEL")}
+                  </Box>
+                </Divider>
+
+                <Box
+                  sx={{
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    overflow: "auto",
+                    padding: 1,
+                    width: "100%",
+                  }}
+                >
+                  {workflowDocumentInfo.nextActionTakers.map(
+                    (nextActionTaker: any) => {
+                      return (
+                        <Box
+                          sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            border: "1px dotted black",
+                            width: 400,
+                            marginBottom: 2,
+                            padding: 2,
+                          }}
+                        >
+                          <Avatar
+                            sx={{
+                              marginRight: 2,
+                              marginLeft: 2,
+                              width: 60,
+                              height: 60,
+                            }}
+                          />
+                          <Box
+                            sx={{
+                              flex: 2,
+                              display: "flex",
+                              flexDirection: "column",
+                              alignItems: "flex-start",
+                              justifyContent: "center",
+                            }}
+                          >
+                            <div>
+                              {AppLayout.appDirection === "ltr"
+                                ? nextActionTaker?.employee_en_name
+                                : nextActionTaker?.employee_ar_name}
+                            </div>
+                            <div>
+                              {nextActionTaker?.email ? (
+                                <>
+                                  <FontAwesomeIcon
+                                    icon="envelope"
+                                    style={{ marginRight: 10, marginLeft: 10 }}
+                                  />
+                                  {nextActionTaker?.email}
+                                </>
+                              ) : (
+                                <></>
+                              )}
+                            </div>
+                            <div>
+                              {nextActionTaker?.mobile_number ? (
+                                <>
+                                  <FontAwesomeIcon
+                                    icon="mobile"
+                                    style={{ marginRight: 10, marginLeft: 10 }}
+                                  />
+                                  {nextActionTaker?.mobile_number}
+                                </>
+                              ) : (
+                                <></>
+                              )}
+                            </div>
+                          </Box>
+                        </Box>
+                      );
+                    }
+                  )}
+                </Box>
+              </>
+            ) : (
+              <></>
+            )}
+          </Paper>
+        ) : (
+          <></>
+        )}
+        {workflowDocumentInfo?.actionsHistory.length > 0 ? (
+          <WorkflowDocumentTimeLine
+            actionHistory={workflowDocumentInfo.actionsHistory}
+          />
+        ) : (
+          <Paper
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              flexGrow: 1,
+              padding: 2,
+              margin: 1,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Box
+              sx={{
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 18,
+                fontWeight: "bold",
+              }}
+            >
+              <FontAwesomeIcon
+                icon="history"
+                style={{ marginRight: 10, marginLeft: 10 }}
+              />
+              {t("WF_ACTION_HISTORY_LABEL")}
+            </Box>
+            <Box
+              sx={{
+                flex: 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              No Action Log available
+            </Box>
+          </Paper>
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default WorkflowDocumentPanel;

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

@@ -0,0 +1,134 @@
+import Typography from "@mui/material/Typography";
+import { workflowDocumentActionHistory } from "./WorkflowDocumentPanel";
+import { useSelector } from "react-redux";
+import { Avatar, Box, Divider, Paper, Stack } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useTranslation } from "react-i18next";
+
+type WorkflowDocumentTimeLineProp = {
+  actionHistory: Array<workflowDocumentActionHistory>;
+};
+
+const WorkflowDocumentTimeLine: React.FC<WorkflowDocumentTimeLineProp> = (
+  props
+) => {
+  const AppLayout = useSelector((state: any) => state.AppLayout);
+  const { t } = useTranslation();
+  return (
+    <Paper
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        flexGrow: 1,
+        padding: 1,
+        margin: 1,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Box
+        sx={{
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 18,
+          fontWeight: "bold",
+        }}
+      >
+        <FontAwesomeIcon
+          icon="history"
+          style={{ marginRight: 10, marginLeft: 10 }}
+        />
+        {t("WF_ACTION_HISTORY_LABEL")}
+      </Box>
+      <Box
+        sx={{
+          flexGrow: 1,
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          overflowY: "auto",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+      >
+        {props.actionHistory.map((actionHistoryRecord, index) => {
+          return (
+            <>
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%",
+                  marginBottom: 2,
+                }}
+              >
+                <Box
+                  sx={{
+                    display: "flex",
+                    flex: 1,
+                    flexDirection: "column",
+                    alignItems: "flex-end",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Box sx={{ marginBottom: 0.2 }}>
+                    {actionHistoryRecord.actionTime}
+                  </Box>
+                  <Typography>
+                    via {actionHistoryRecord.actionMethod}
+                  </Typography>
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    position: "relative",
+                    marginRight: 2,
+                    marginLeft: 2,
+                  }}
+                >
+                  <Avatar sx={{ m: 1, width: 70, height: 70 }} />
+                  {index !== props.actionHistory.length - 1 ? (
+                    <Box sx={{ marginTop: 11, position: "absolute" }}>|</Box>
+                  ) : (
+                    <></>
+                  )}
+                </Box>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flex: 1,
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Box sx={{ width: "100%" }}>
+                    {AppLayout.appDirection === "ltr"
+                      ? `${actionHistoryRecord?.documentActionEnName}`
+                      : `${actionHistoryRecord?.documentActionArName}`}
+                    {actionHistoryRecord?.actionComment
+                      ? " - " + actionHistoryRecord.actionComment
+                      : ""}
+                  </Box>
+                  <Box sx={{ width: "100%" }}>
+                    {AppLayout.appDirection === "ltr"
+                      ? `${actionHistoryRecord?.employeeEnName}`
+                      : `${actionHistoryRecord?.employeeArName}`}
+                  </Box>
+                </Box>
+              </Box>
+            </>
+          );
+        })}
+      </Box>
+    </Paper>
+  );
+};
+
+export default WorkflowDocumentTimeLine;