@asaleh37/ui-base 26.2.16 → 27.5.26

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

@@ -1,145 +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,
-        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;
+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

@@ -1,134 +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;
+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;