@asaleh37/ui-base 1.2.2 → 1.2.4

package/src/components/administration/dev/WorkflowDocumentStatusGrid.tsx

@@ -0,0 +1,243 @@
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import { useApiActions } from "../../../hooks";
+import { useSelector } from "react-redux";
+
+type WorkflowDocumentStatusGridProps = {
+  selectedRecord: any;
+};
+
+const WorkflowDocumentStatusGrid: React.FC<WorkflowDocumentStatusGridProps> = (
+  props
+) => {
+  const { t } = useTranslation();
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/dev/workflowdocumentstatus/all",
+    deleteById: "api/v1/dev/workflowdocumentstatus",
+    save: "api/v1/dev/workflowdocumentstatus",
+    findById: "api/v1/dev/workflowdocumentstatus",
+    setData: setData,
+  });
+  const SystemDataQueries = useSelector(
+    (state: any) => state.commonStores.stores.SystemDataQueries.data
+  );
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "id",
+        fieldName: "id",
+        fieldType: "number",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createTime",
+        fieldName: "createTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "createdBy",
+        fieldName: "createdBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateBy",
+        fieldName: "lastUpdateBy",
+        fieldType: "text",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "lastUpdateTime",
+        fieldName: "lastUpdateTime",
+        fieldType: "datetime",
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WORKFLOW_DOCUMENT_STATUS_DOCUMENT_STATUS_CODE",
+        fieldName: "documentStatusCode",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Status Arabic Name",
+        fieldName: "documentStatusArName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Status English Name",
+        fieldName: "documentStatusEnName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WORKFLOW_DOCUMENT_STATUS_DOCUMENT_STATUS_ORDER",
+        fieldName: "documentStatusOrder",
+        required: false,
+        fieldType: "number",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WORKFLOW_DOCUMENT_STATUS_IS_ZERO_STATE",
+        fieldName: "isZeroState",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel:
+          "Next Actions Query (must return array of actions in table named workflow_document_action)",
+        fieldName: "nextActionsQueryId",
+        required: false,
+        fieldType: "combobox",
+        options: SystemDataQueries,
+        optionValueField: "id",
+        optionDisplayField: "queryName",
+        gridProps: { hidden: true },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel:
+          "Next Action Takers Query (must return array of persons in table named person)",
+        fieldName: "nextActionTakersQueryId",
+        required: false,
+        fieldType: "combobox",
+        options: SystemDataQueries,
+        optionValueField: "id",
+        optionDisplayField: "queryName",
+        gridProps: { hidden: true },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Next Action Takers Authority",
+        fieldName: "nextActionTakersAuthority",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WORKFLOW_DOCUMENT_STATUS_WORKFLOW_DOCUMENT_ID",
+        fieldName: "workflowDocumentId",
+        required: false,
+        hidden: true,
+        gridProps: { hidden: true },
+        fieldType: "number",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "WORKFLOW_DOCUMENT_STATUS_ENABLED",
+        fieldName: "enabled",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      hideInfoBar={true}
+      gridLoadParametersValues={{
+        workflowDocumentId: props.selectedRecord.id,
+      }}
+      editMode={{
+        editMode: "modal",
+        specs: {
+          modalIcon: "tag",
+          modalTitle: "Workflow Document Status",
+          modalWidth: 600,
+        },
+      }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle={t("WORKFLOW_DOCUMENT_STATUS_PLURAL")}
+      girdIcon="tags"
+      editAction={{
+        isEnabled: true,
+        authority: "WORKFLOW_DOCUMENT_STATUS_EDIT",
+        preActionValidation: (record) => {
+          record.workflowDocumentId = props.selectedRecord.id;
+          return true;
+        },
+      }}
+      deleteAction={{
+        isEnabled: true,
+        authority: "WORKFLOW_DOCUMENT_STATUS_DELETE",
+      }}
+    />
+  );
+};
+
+export default WorkflowDocumentStatusGrid;

package/src/components/common/ChangeOrgForm.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { useAxios, useSession } from "../../hooks";
+import { ComboBox } from "../templates";
+import { Box, Button } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
+
+type ChangeOrgFormProps = {
+  successChangeCallBackFn: () => void;
+};
+
+const ChangeOrgForm: React.FC<ChangeOrgFormProps> = (props) => {
+  const { UserSession } = useSession();
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+  const dispatch = useDispatch();
+  const { handlePostRequest } = useAxios();
+  const [newOrgId, setNewOrgId] = useState(
+    UserSession.value.currentOrganization.id
+  );
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 1,
+      }}
+    >
+      <ComboBox
+        sx={{ width: "100%" }}
+        displayField={
+          AppLayoutState.appDirection === "ltr"
+            ? "organizationEnName"
+            : "organizationArName"
+        }
+        valueField="id"
+        label=""
+        options={UserSession.value.userOrganizations}
+        value={newOrgId}
+        onChangeCallBack={(value) => {
+          setNewOrgId(value);
+        }}
+      />
+      <Button
+        sx={{ m: 1 }}
+        variant="contained"
+        disabled={
+          newOrgId == null ||
+          newOrgId === UserSession.value.currentOrganization.id
+        }
+        onClick={async () => {
+          await handlePostRequest({
+            endPointURI: "api/auth/changeCurrentOrg",
+            showMask: true,
+            parameters: {
+              username: UserSession.value.username,
+              orgId: newOrgId,
+            },
+            data: {},
+            successCallBkFn: (response) => {
+              const UserSession = {
+                ...response.data,
+                isAuthenticated: true,
+              };
+              dispatch(UserSessionActions.setAuthenticated(UserSession));
+              if (props.successChangeCallBackFn) {
+                props.successChangeCallBackFn();
+              }
+            },
+          });
+        }}
+      >
+        Change Organization
+      </Button>
+    </Box>
+  );
+};
+
+export default ChangeOrgForm;

package/src/components/common/Home.tsx

@@ -1,33 +1,36 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Box } from "@mui/material";
-import { useSelector } from "react-redux";
+import { TemplateForm } from "../templates";
+import ReportViewer from "../templates/report/ReportViewer";
+import WorkflowDocumentPanel from "../templates/workflow/WorkflowDocumentPanel";
+import ExampleDashboard from "../templates/visuals/ExampleDashboard";
+import DashboardViewer from "../templates/visuals/DashboardViewer";
 
 const Home: React.FC = () => {
-  const counter = useSelector((state) => state.counter.value);
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        flex: 1,
-        fontSize: 24,
-        fontWeight: "bold",
-      }}
-    >
-      <img src="logo.png" style={{ margin: 5 }} />
-      <div>Welcome to Ezzsteel Flat Product Management System</div>
-      <div style={{ fontSize: 16 }}>
-        Use side menu [
-        <FontAwesomeIcon
-          icon="bars"
-          style={{ marginLeft: 10, marginRight: 10 }}
-        />
-        ] to navigate to your authorized system modules
-      </div>
-      <div>counter [{counter}]</div>
-    </Box>
+    <DashboardViewer dashboardCode="XX_TEMPLATE_DASHBOARD" />
+    // <Box
+    //   sx={{
+    //     display: "flex",
+    //     flexDirection: "column",
+    //     alignItems: "center",
+    //     justifyContent: "center",
+    //     flex: 1,
+    //     fontSize: 24,
+    //     fontWeight: "bold",
+    //   }}
+    // >
+    //  <img src="logo.png" style={{ margin: 5 }} />
+    // <div>Welcome to Ezzsteel Flat Product Management System</div>
+    // <div style={{ fontSize: 16 }}>
+    //   Use side menu [
+    //   <FontAwesomeIcon
+    //     icon="bars"
+    //     style={{ marginLeft: 10, marginRight: 10 }}
+    //   />
+    //   ] to navigate to your authorized system modules
+    // </div>
+    // </Box>
   );
 };
 

package/src/components/common/LoadingMask.tsx

@@ -1,17 +1,22 @@
 import { useSelector } from "react-redux";
-import { RootState } from "../../redux/store";
 import { Backdrop, CircularProgress } from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 const LoadingMask: React.FC = () => {
-  const loadingMask = useSelector(
-    (state: RootState) => state.loadingMask.value
-  );
+  const { t } = useTranslation();
+  const loadingMask = useSelector((state: any) => state.loadingMask.value);
+  const AppLayoutState = useSelector((state: any) => state.AppLayout);
+
   return (
     <Backdrop
+      dir={AppLayoutState.appDirection}
       sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
       open={loadingMask.isOpened}
     >
       <CircularProgress color="inherit" />
+      <div style={{ marginRight: 10, marginLeft: 10 }}>
+        {loadingMask?.message || t("DEFAULT_LOADING_MESSAGE")}
+      </div>
     </Backdrop>
   );
 };

package/src/components/common/Login.tsx

@@ -12,18 +12,18 @@ import { ThemeProvider } from "@emotion/react";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { toast } from "react-toastify";
-import { RootState } from "../../redux/store";
 import { UserSessionActions } from "../../redux/features/common/UserSessionSlice";
-import { DARK_THEME_INITIAL_MAIN_COLOR, DARK_THEME_INITIAL_SECANDARY_COLOR } from "../../util";
+import {
+  DARK_THEME_INITIAL_MAIN_COLOR,
+  DARK_THEME_INITIAL_SECANDARY_COLOR,
+} from "../../util";
 
 const Login: React.FC = () => {
-  const appInfo = useSelector((state: RootState) => state.AppInfo.value);
+  const appInfo = useSelector((state: any) => state.AppInfo.value);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoginInProcess, setIsLoginInProcess] = useState(false);
-  const UserSessionState = useSelector(
-    (state: RootState) => state.UserSession.value
-  );
+  const UserSessionState = useSelector((state: any) => state.UserSession.value);
   const dispatch = useDispatch();
   const handleLogin = async () => {
     if (username == null || username == "") {
@@ -50,9 +50,8 @@ const Login: React.FC = () => {
       if (response.data != null && response.data !== "") {
         setIsLoginInProcess(false);
         const UserSession = {
+          ...response.data,
           isAuthenticated: true,
-          authorities: response.data.authorities,
-          userProfile: response.data,
         };
         dispatch(UserSessionActions.setAuthenticated(UserSession));
       }
@@ -64,9 +63,7 @@ const Login: React.FC = () => {
       );
     }
   };
-  const userSession = useSelector(
-    (state: RootState) => state.UserSession.value
-  );
+  const userSession = useSelector((state: any) => state.UserSession.value);
   const loginTheme = createTheme({
     components: {
       MuiCssBaseline: {
@@ -113,9 +110,8 @@ const Login: React.FC = () => {
           );
           if (response != null && response.data != null) {
             const UserSession = {
+              ...response.data,
               isAuthenticated: true,
-              authorities: response.data.authorities,
-              userProfile: response.data,
             };
             dispatch(UserSessionActions.setAuthenticated(UserSession));
           } else {

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

@@ -7,7 +7,7 @@ import {
   ToolbarPropsOverrides,
 } from "@mui/x-data-grid-premium";
 import { UseFormReturn } from "react-hook-form";
-import { SxProps } from "@mui/material";
+import { SxProps, TextFieldProps } from "@mui/material";
 import { ApiActions } from "../../../hooks/useApiActions";
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
   Partial<Pick<T, K>>;
@@ -31,6 +31,7 @@ export type RecordAction = {
   gridActionProps?: {
     showInMenu?: boolean;
     multiRecord?: boolean;
+    reloadGridAfterAction?: boolean;
   };
   formActionProps?: {
     enabled?: boolean;
@@ -87,6 +88,7 @@ export type TemplateGridColumnProps = {
 };
 
 export type TemplateGridColDef = GridColDef & {
+  lookupType?: string;
   hidden?: boolean;
   searchable?: boolean;
   options?: Array<object>;
@@ -121,6 +123,11 @@ export type TemplateGridProps = {
   setRowSelectionModel?: any;
   setSelectedRecord?: any;
   setSelectedRecordIds?: any;
+  formLoadCallBk?: (
+    formActions: FormActionProps,
+    formManager: UseFormReturn,
+    record: any
+  ) => void;
   editMode:
     | { editMode: "none" }
     | {
@@ -163,19 +170,31 @@ export type FormElementSize = {
 export type RecordFieldProps = {
   fieldName: string;
   fieldLabel: string;
-  fieldType: "text" | "number" | "date" | "datetime" | "combobox" | "checkbox";
+  fieldType:
+    | "text"
+    | "number"
+    | "date"
+    | "datetime"
+    | "combobox"
+    | "checkbox"
+    | "html"
+    | "lookup";
+  lookupType?: string;
   required?: boolean;
   disabled?: boolean;
   hidden?: boolean;
   dateFormat?: string;
+  defaultValue?: any;
   options?: Array<any>;
   optionValueField?: string;
   optionDisplayField?: string;
   checkedValue?: any;
   unCheckedValue?: any;
+  muiTextFieldProps?: TextFieldProps;
   gridProps?: TemplateGridColumnProps;
   formProps?: {
     fieldSize?: FormElementSize;
+    fieldHeight?: number;
     style?: SxProps;
     onValueChangeCallBack?: (
       value: any,
@@ -195,8 +214,8 @@ export type FormElementGroupProps = {
   formManager?: UseFormReturn;
   formValues?: any;
   formActions?: any;
-  hiddenFields: string[];
-  disabledFields: string[];
+  hiddenFields?: string[];
+  disabledFields?: string[];
 };
 
 export type FormElementFieldProps = {
@@ -204,8 +223,8 @@ export type FormElementFieldProps = {
   formManager?: UseFormReturn;
   formValues?: any;
   formActions?: any;
-  hiddenFields: string[];
-  disabledFields: string[];
+  hiddenFields?: string[];
+  disabledFields?: string[];
 };
 
 export type FormElementNodeProps = {
@@ -249,6 +268,11 @@ export type TemplateFormProps = {
   apiActions: ApiActions;
   preSaveValidation?: (record: any) => boolean | Promise<boolean>;
   formSavedSuccessfullyCallBk?: (response: any) => void;
+  formLoadCallBk?: (
+    formActions: FormActionProps,
+    formManager: UseFormReturn,
+    record: any
+  ) => void;
   formCloseCallBk?: () => void;
   saveButtonSpecs?: {
     label?: string;

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

@@ -47,6 +47,7 @@ export const constructGridColumnsFromFields: (
   t: TFunction<"translation", undefined>
 ) => Array<TemplateGridColDef> = (fields, isDefaultEditable, t) => {
   const columns: Array<TemplateGridColDef> = [];
+
   for (const tableField of fields) {
     if (
       tableField?.fieldType === "text" ||
@@ -55,7 +56,9 @@ export const constructGridColumnsFromFields: (
       const column: TemplateGridColDef = {
         ...tableField?.gridProps?.muiProps,
         editable:
-          tableField?.gridProps?.muiProps?.editable || isDefaultEditable,
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
         type: tableField?.fieldType == "number" ? "number" : "string",
         field: tableField?.fieldName,
         headerName: t(tableField?.fieldLabel || tableField?.fieldName),
@@ -66,12 +69,15 @@ export const constructGridColumnsFromFields: (
         flex: 1,
         minWidth: 200,
       };
+
       columns.push(column);
     } else if (tableField?.fieldType === "date") {
       const column: TemplateGridColDef = generateDateColumn({
         ...tableField?.gridProps?.muiProps,
         editable:
-          tableField?.gridProps?.muiProps?.editable || isDefaultEditable,
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
         field: tableField?.fieldName,
         headerName: t(tableField?.fieldLabel || tableField?.fieldName),
         headerAlign: "center",
@@ -86,7 +92,9 @@ export const constructGridColumnsFromFields: (
       const column: TemplateGridColDef = generateDateTimeColumn({
         ...tableField?.gridProps?.muiProps,
         editable:
-          tableField?.gridProps?.muiProps?.editable || isDefaultEditable,
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
         field: tableField?.fieldName,
         headerName: t(tableField?.fieldLabel || tableField?.fieldName),
         headerAlign: "center",
@@ -101,7 +109,9 @@ export const constructGridColumnsFromFields: (
       const column = generateCheckBoxColumn({
         ...tableField?.gridProps?.muiProps,
         editable:
-          tableField?.gridProps?.muiProps?.editable || isDefaultEditable,
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
         field: tableField?.fieldName,
         headerName: t(tableField?.fieldLabel || tableField?.fieldName),
         headerAlign: "center",
@@ -117,7 +127,30 @@ export const constructGridColumnsFromFields: (
       const column: TemplateGridColDef = generateComboColumn({
         ...tableField?.gridProps?.muiProps,
         editable:
-          tableField?.gridProps?.muiProps?.editable || isDefaultEditable,
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        valueField: tableField?.optionValueField || "value",
+        displayField: tableField?.optionDisplayField || "display",
+        options: tableField?.options || [],
+        flex: 1,
+        minWidth: 200,
+      });
+      columns.push(column);
+    } else if (tableField?.fieldType === "lookup") {
+      const column: TemplateGridColDef = generateComboColumn({
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          tableField?.gridProps?.muiProps?.editable != undefined
+            ? tableField?.gridProps?.muiProps?.editable
+            : isDefaultEditable,
+        lookupType: tableField?.lookupType,
         field: tableField?.fieldName,
         headerName: t(tableField?.fieldLabel || tableField?.fieldName),
         headerAlign: "center",
@@ -150,6 +183,14 @@ export const constructValidationSchema = (fields: Array<RecordFieldProps>) => {
         } else {
           validationSchemaObj[fieldName] = z.number().optional().nullable();
         }
+      } else if (field.fieldType === "checkbox") {
+        if (field?.required === true) {
+          validationSchemaObj[fieldName] = z.boolean({
+            required_error: "This field is required",
+          });
+        } else {
+          validationSchemaObj[fieldName] = z.boolean().optional().nullable();
+        }
       } else {
         if (field?.required === true) {
           validationSchemaObj[fieldName] = z