@asaleh37/ui-base 1.2.29 → 25.1.9

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

@@ -1,140 +1,145 @@
-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";
-import AttachmentImageViewer from "../attachment/AttachmentImageViewer";
-
-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,
-                  }}
-                >
-                  <AttachmentImageViewer
-                    showAsAvatar={true}
-                    attachmentCode="EMPLOYEE_PHOTOS"
-                    refKey={actionHistoryRecord?.personId + "" || "0"}
-                    style={{ 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;
+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";
+import AttachmentImageViewer from "../attachment/AttachmentImageViewer";
+
+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,
+        width: 600,
+        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,
+                  }}
+                >
+                  <AttachmentImageViewer
+                    showAsAvatar={true}
+                    attachmentCode="EMPLOYEE_PHOTOS"
+                    refKey={
+                      actionHistoryRecord?.personId
+                        ? actionHistoryRecord?.personId + ""
+                        : undefined
+                    }
+                    style={{ 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;

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

@@ -1,14 +1,14 @@
-import { useParams } from "react-router-dom";
-import WorkflowDocumentPanel from "./WorkflowDocumentPanel";
-
-const WorkflowRouteComponent: React.FC = () => {
-  const { workflowDocumentCode, refDocumentId } = useParams();
-  return (
-    <WorkflowDocumentPanel
-      workFlowDocumentCode={workflowDocumentCode}
-      refDocumentId={refDocumentId}
-    />
-  );
-};
-
-export default WorkflowRouteComponent;
+import { useParams } from "react-router-dom";
+import WorkflowDocumentPanel from "./WorkflowDocumentPanel";
+
+const WorkflowRouteComponent: React.FC = () => {
+  const { workflowDocumentCode, refDocumentId } = useParams();
+  return (
+    <WorkflowDocumentPanel
+      workFlowDocumentCode={workflowDocumentCode}
+      refDocumentId={refDocumentId}
+    />
+  );
+};
+
+export default WorkflowRouteComponent;

package/src/examples/ExampleGrid.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { FormElementProps, TemplateGrid } from "../components";
+import { useApiActions } from "../hooks";
+
+const ExampleGrid: React.FC = () => {
+  const [data, setData] = useState([]);
+  const options = [
+    { value: 1, display: "Male" },
+    { value: 2, display: "Female" },
+  ];
+  const apiActions = useApiActions({
+    findAll: undefined,
+    commonStoreKey: undefined,
+    deleteById: undefined,
+    deleteByIdParamName: undefined,
+    findById: undefined,
+    findByIdParamName: undefined,
+    save: undefined,
+    setData: setData,
+  });
+  const elements: FormElementProps[] = [
+    {
+      mode: "props",
+      props: { fieldLabel: "ID", fieldName: "id", fieldType: "number" },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Gender",
+        fieldName: "gender",
+        fieldType: "combobox",
+        options,
+        optionValueField: "value",
+        optionDisplayField: "display",
+        formProps: {
+          onValueChangeCallBack(
+            formValues,
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {
+            if (value == 1) {
+              formActions.disableField("bithdate");
+              formManager.setValue("bithdate", new Date());
+              formManager.setValue("active", true);
+              formManager.setValue("type", value);
+            } else {
+              formActions.enableField("bithdate");
+              formManager.setValue("bithdate", null);
+              formManager.setValue("active", false);
+            }
+            formManager.setValue("type", value);
+          },
+        },
+      },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Gender",
+        fieldName: "type",
+        fieldType: "combobox",
+        options,
+        optionValueField: "value",
+        optionDisplayField: "display",
+      },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Name",
+        fieldName: "name",
+        required: true,
+        fieldType: "text",
+        gridProps: { hidden: false },
+        formProps: {
+          onValueChangeCallBack(
+            formValues,
+            value,
+            formManager,
+            formActions,
+            selectedRecord
+          ) {},
+        },
+      },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Birthdate",
+        fieldName: "bithdate",
+        required: true,
+        fieldType: "date",
+        gridProps: { hidden: false },
+      },
+      type: "field",
+    },
+    {
+      mode: "props",
+      props: {
+        fieldLabel: "Active",
+        fieldName: "active",
+        required: true,
+        fieldType: "checkbox",
+        gridProps: { hidden: false },
+      },
+      type: "field",
+    },
+  ];
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{
+        editMode: "modal",
+        specs: {
+          modalTitle: "Example Modal Form",
+          modalIcon: "user",
+        },
+      }}
+      formElements={elements}
+      girdIcon={"user"}
+      gridTitle="Example Grid "
+    />
+  );
+};
+
+export default ExampleGrid;

package/src/hooks/UseConfirmationWindow.tsx

@@ -1,54 +1,56 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@mui/material";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-interface ConfirmationWindowProps {
-  title: string;
-  body: string;
-  onConfirmationCallBk: () => void;
-}
-
-export const useConfirmationWindow = (props: ConfirmationWindowProps) => {
-  const [open, setOpen] = useState<boolean>(false);
-  const { t } = useTranslation();
-  const ConfirmationWindow: React.FC = () => {
-    return (
-      <Dialog open={open}>
-        <DialogTitle>{props.title}</DialogTitle>
-        <DialogContent>
-          <DialogContentText>{props.body}</DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            {t("NO_LABEL")}
-          </Button>
-          <Button
-            variant="contained"
-            color="error"
-            onClick={() => {
-              props.onConfirmationCallBk();
-              setOpen(false);
-            }}
-            autoFocus
-          >
-            {t("YES_LABEL")}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  };
-  return { ConfirmationWindow, open, setOpen };
-};
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ConfirmationWindowProps {
+  title: string;
+  body: string;
+  onConfirmationCallBk: () => void;
+}
+
+export const useConfirmationWindow = (props: ConfirmationWindowProps) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
+  const ConfirmationWindow: React.FC = () => {
+    return (
+      <Dialog open={open}>
+        <DialogTitle>{props.title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{props.body}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            sx={{ marginRight: 2, marginLeft: 2 }}
+            color="secondary"
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t("NO_LABEL")}
+          </Button>
+          <Button
+            variant="contained"
+            sx={{ marginRight: 2, marginLeft: 2 }}
+            color="error"
+            onClick={() => {
+              props.onConfirmationCallBk();
+              setOpen(false);
+            }}
+            autoFocus
+          >
+            {t("YES_LABEL")}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  };
+  return { ConfirmationWindow, open, setOpen };
+};

package/src/hooks/UseMobile.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useState } from "react";
-
-export const useIsMobile = (breakpoint = 768) => {
-  const [isMobile, setIsMobile] = useState(window.innerWidth < breakpoint);
-
-  useEffect(() => {
-    const handleResize = () => setIsMobile(window.innerWidth < breakpoint);
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [breakpoint]);
-
-  return isMobile;
-};
+import { useEffect, useState } from "react";
+
+export const useIsMobile = (breakpoint = 768) => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < breakpoint);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < breakpoint);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoint]);
+
+  return isMobile;
+};