@asaleh37/ui-base 1.0.8 → 1.1.0

package/src/components/common/Login.tsx

@@ -0,0 +1,183 @@
+import {
+  Box,
+  Button,
+  CircularProgress,
+  createTheme,
+  Paper,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+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 { DarkThemeOptions } from "../../theme/DarkThemeOptions";
+
+const Login: React.FC = () => {
+  const appInfo = useSelector((state: RootState) => state.AppInfo);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoginInProcess, setIsLoginInProcess] = useState(false);
+  const UserSessionState = useSelector(
+    (state: RootState) => state.UserSession.value
+  );
+  const dispatch = useDispatch();
+  const handleLogin = async () => {
+    if (username == null || username == "") {
+      toast.error("username is required to proceed");
+      return;
+    }
+    if (password == null || password == "") {
+      toast.error("password is required to proceed");
+      return;
+    }
+    setIsLoginInProcess(true);
+    let response: any = null;
+    try {
+      response = await axios.post(
+        `${appInfo.apiBaseUrl}/api/auth/login`,
+        {
+          username,
+          password,
+        },
+        {
+          withCredentials: true,
+        }
+      );
+      if (response.data != null && response.data !== "") {
+        setIsLoginInProcess(false);
+        const UserSession = {
+          isAuthenticated: true,
+          authorities: response.data.authorities,
+          userProfile: response.data,
+        };
+        dispatch(UserSessionActions.setAuthenticated(UserSession));
+      }
+    } catch (e: any) {
+      setIsLoginInProcess(false);
+      toast.error(
+        e?.response?.data ||
+          "failed to authenticate, contact your administrator"
+      );
+    }
+  };
+  const userSession = useSelector(
+    (state: RootState) => state.UserSession.value
+  );
+  const loginTheme = createTheme(DarkThemeOptions);
+  const checkUserSession = async () => {
+    if (userSession.isAuthenticated == null) {
+      try {
+        let response = await axios.get(
+          `${appInfo.apiBaseUrl}/api/auth/userInfo`,
+          {
+            withCredentials: true,
+          }
+        );
+        if (response != null && response.data != null) {
+          const UserSession = {
+            isAuthenticated: true,
+            authorities: response.data.authorities,
+            userProfile: response.data,
+          };
+          dispatch(UserSessionActions.setAuthenticated(UserSession));
+        } else {
+          dispatch(UserSessionActions.setUnAuthenticated());
+        }
+      } catch (error) {
+        dispatch(UserSessionActions.setUnAuthenticated());
+      }
+    }
+  };
+  useEffect(() => {
+    checkUserSession();
+  }, []);
+  return (
+    <ThemeProvider theme={loginTheme}>
+      <Paper
+        sx={{
+          display: "flex",
+          height: "100vh",
+          width: "100%",
+          borderRadius: 0,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {UserSessionState.isAuthenticated == false ? (
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <img src={appInfo?.appLogo} width={150} height={150} />
+            <Typography sx={{ m: 1 }} variant="h4" color="textSecondary">
+              {appInfo?.appName}
+            </Typography>
+            <Typography
+              sx={{
+                paddingRight: 1,
+                width: "100%",
+                textAlign: "right",
+                fontSize: 10,
+              }}
+              variant="caption"
+              color="textSecondary"
+            >
+              V.{appInfo.appVersion}
+            </Typography>
+            <TextField
+              label="username"
+              sx={{ width: 300, m: 1 }}
+              value={username}
+              onChange={(event) => {
+                setUsername(event.target.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  handleLogin();
+                }
+              }}
+            />
+            <TextField
+              label="password"
+              sx={{ width: 300, m: 1 }}
+              value={password}
+              type="password"
+              onChange={(event) => {
+                setPassword(event.target.value);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  handleLogin();
+                }
+              }}
+            />
+            <Button
+              loading={isLoginInProcess}
+              onClick={handleLogin}
+              variant="contained"
+              color="primary"
+              sx={{ m: 1 }}
+            >
+              login
+            </Button>
+          </Box>
+        ) : (
+          <>
+            <CircularProgress sx={{ marginRight: 1 }} />
+            <div>You will be redirected shortly ... please wait</div>
+          </>
+        )}
+      </Paper>
+    </ThemeProvider>
+  );
+};
+
+export default Login;

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

@@ -0,0 +1,288 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import {
+  DataGridPremiumProps,
+  GridColDef,
+  GridRowSelectionModel,
+  GridToolbarProps,
+  ToolbarPropsOverrides,
+} from "@mui/x-data-grid-premium";
+import { UseFormReturn } from "react-hook-form";
+import { SxProps } from "@mui/material";
+import { ApiActions } from "./useApiActions";
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>;
+
+// Generic Types for Data Entry
+export type RecordAction = {
+  label?: string;
+  icon: IconProp;
+  isConfirmationRequired?: boolean;
+  confirmationMessage?: string;
+  authority?: string;
+  getActionIconStyleForRecord?: (record: any) => object;
+  isActionVisibleForRecord?: (record: any) => boolean;
+  isActionDisabledForRecord?: (record: any) => boolean;
+  actionFn: (
+    data: any | Array<any>,
+    recordIdsToProcessActionOn?: Array<any>
+  ) => Promise<void>;
+  preActionValidation?: (record: any) => boolean | Promise<boolean>;
+  postActionCallBack?: (record: any) => any | void;
+  gridActionProps?: {
+    showInMenu?: boolean;
+    multiRecord?: boolean;
+  };
+  formActionProps?: {
+    enabled?: boolean;
+    actionButtonVariant?: "text" | "outlined" | "contained";
+    actionButtonColor?:
+      | "inherit"
+      | "primary"
+      | "secondary"
+      | "success"
+      | "error"
+      | "info"
+      | "warning";
+  };
+  record?: any;
+  reloadData?: (parameters?: any) => Promise<void>;
+  recordsToProcessActionOn?: Array<any>;
+  recordIdsToProcessActionOn?: Array<any>;
+};
+
+export type EditDeleteAction = {
+  isEnabled: boolean;
+  authority?: string;
+  isActionVisibleForRecord?: (record: any) => boolean;
+  isActionDisabledForRecord?: (record: any) => boolean;
+  preActionValidation?: (record: any) => boolean | Promise<boolean>;
+  postActionCallBack?: (record: any) => any | void;
+  gridActionProps?: {
+    showInMenu?: boolean;
+  };
+  formActionProps?: {
+    actionButtonVariant?: "text" | "outlined" | "contained";
+    actionButtonColor?:
+      | "inherit"
+      | "primary"
+      | "secondary"
+      | "success"
+      | "error"
+      | "info"
+      | "warning";
+  };
+  record?: any;
+  reloadData?: (parameters?: any) => Promise<void>;
+};
+
+// Template Grid Types
+
+export type TemplateGridColumnProps = {
+  hidden?: boolean;
+  searchable?: boolean;
+  options?: Array<object>;
+  displayField?: string;
+  valueField?: string;
+  muiProps?: MakeOptional<GridColDef, "field">;
+};
+
+export type TemplateGridColDef = GridColDef & {
+  hidden?: boolean;
+  searchable?: boolean;
+  options?: Array<object>;
+  displayField?: string;
+  valueField?: string;
+};
+
+export type TemplateGridProps = {
+  formElements: Array<FormElementProps>;
+  gridStateKey?: string;
+  data: Array<any>;
+  setData: any;
+  keyColumnName?: any;
+  autoLoad?: boolean;
+  gridTitle: string;
+  girdIcon: IconProp;
+  editAction?: EditDeleteAction;
+  deleteAction?: EditDeleteAction;
+  rowActions?: Array<RecordAction>;
+  gridLoadParameters?: Array<FormElementProps>;
+  gridLoadParametersValues?: { [key: string]: any };
+  setGridLoadParametersValues?: any;
+  tBar?: any;
+  disableDefaultAction?: boolean;
+  enableQuickSearch?: boolean;
+  enableExport?: boolean;
+  enableDensitySelector?: boolean;
+  hideInfoBar?: boolean;
+  hideBackButton?: boolean;
+  apiActions: ApiActions;
+  rowSelectionModel?: GridRowSelectionModel;
+  setRowSelectionModel?: any;
+  setSelectedRecord?: any;
+  setSelectedRecordIds?: any;
+  editMode:
+    | { editMode: "none" }
+    | {
+        editMode: "row";
+        reloadAfterSave?: boolean;
+      }
+    | {
+        editMode: "modal";
+        specs?: {
+          modalTitle?: string;
+          modalIcon?: IconProp;
+          modalHeight?: any;
+          modalWidth?: any;
+          modalMinHeight?: any;
+          modalMinWidth?: any;
+          formComponent?: React.FC<ModalFormProps>;
+        };
+      }
+    | {
+        editMode: "form";
+        specs: {
+          formRoute: string;
+        };
+      };
+  muiProps?: MakeOptional<DataGridPremiumProps, "rows" | "columns">;
+};
+
+// Form Types
+export type ModalFormProps = {
+  recordIdToEdit?: any;
+  formCloseCallBk?: () => void;
+};
+
+export type FormElementSize = {
+  lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+
+export type RecordFieldProps = {
+  fieldName: string;
+  fieldLabel: string;
+  fieldType: "text" | "number" | "date" | "datetime" | "combobox" | "checkbox";
+  required?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  dateFormat?: string;
+  options?: Array<any>;
+  optionValueField?: string;
+  optionDisplayField?: string;
+  checkedValue?: any;
+  unCheckedValue?: any;
+  gridProps?: TemplateGridColumnProps;
+  formProps?: {
+    fieldSize?: FormElementSize;
+    style?: SxProps;
+    onValueChangeCallBack?: (
+      value: any,
+      formManager: UseFormReturn,
+      formActions?: FormActionProps,
+      selectedRecord?: any
+    ) => void;
+  };
+};
+
+export type FormElementGroupProps = {
+  style?: SxProps;
+  icon?: IconProp;
+  label?: string;
+  elements?: Array<FormElementProps>;
+  actions?: Array<RecordAction>;
+  formManager?: UseFormReturn;
+  formValues?: any;
+  formActions?: any;
+  hiddenFields: string[];
+  disabledFields: string[];
+};
+
+export type FormElementFieldProps = {
+  fieldInfo: RecordFieldProps;
+  formManager?: UseFormReturn;
+  formValues?: any;
+  formActions?: any;
+  hiddenFields: string[];
+  disabledFields: string[];
+};
+
+export type FormElementNodeProps = {
+  formManager?: UseFormReturn;
+  formValues: any;
+  formActions?: any;
+};
+
+export type FormElementProps =
+  | {
+      type: "group";
+      props: FormElementGroupProps;
+    }
+  | {
+      type: "field";
+      mode: "node";
+      node: React.FC<FormElementNodeProps>;
+      props?: RecordFieldProps;
+    }
+  | {
+      type: "field";
+      mode: "props";
+      props: RecordFieldProps;
+    };
+
+export type FormActionProps = {
+  setFieldValue: (fieldName: string, fieldValue: any) => void;
+  hideField: (fieldName: string) => void;
+  showField: (fieldName: string) => void;
+  disableField: (fieldName: string) => void;
+  enableField: (fieldName: string) => void;
+};
+
+export type TemplateFormProps = {
+  elements: Array<FormElementProps>;
+  findByIdParamName?: string;
+  recordIdToEdit?: any;
+  formRouteRecordIdParamName?: string;
+  actions?: Array<RecordAction>;
+  editAuthorityKey?: string;
+  apiActions: ApiActions;
+  preSaveValidation?: (record: any) => boolean | Promise<boolean>;
+  formSavedSuccessfullyCallBk?: (response: any) => void;
+  formCloseCallBk?: () => void;
+  saveButtonSpecs?: {
+    label?: string;
+    icon?: IconProp;
+    hidden?: boolean;
+    actionButtonVariant?: "text" | "outlined" | "contained";
+    actionButtonColor?:
+      | "inherit"
+      | "primary"
+      | "secondary"
+      | "success"
+      | "error"
+      | "info"
+      | "warning";
+  };
+  cancelButtonSpecs?: {
+    label?: string;
+    icon?: IconProp;
+    hidden?: boolean;
+    actionButtonVariant?: "text" | "outlined" | "contained";
+    actionButtonColor?:
+      | "inherit"
+      | "primary"
+      | "secondary"
+      | "success"
+      | "error"
+      | "info"
+      | "warning";
+  };
+};
+
+export type TemplateGridTopBarProps = GridToolbarProps &
+  ToolbarPropsOverrides & {
+    templateProps: TemplateGridProps;
+    handleCreateNewRecord?: () => void;
+    clearGridState: () => void;
+  };

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

@@ -0,0 +1,201 @@
+import { GridRowSelectionModel } from "@mui/x-data-grid-premium";
+import {
+  FormElementProps,
+  RecordFieldProps,
+  TemplateGridColDef,
+} from "./DataEntryTypes";
+import {
+  generateCheckBoxColumn,
+  generateComboColumn,
+  generateDateColumn,
+  generateDateTimeColumn,
+} from "./TemplateDataGrid/DataGridColumnsUtil";
+import * as z from "zod";
+import { TFunction } from "i18next";
+
+export const getElementFields: (
+  element: FormElementProps
+) => Array<RecordFieldProps> = (element: FormElementProps) => {
+  const fields: Array<RecordFieldProps> = [];
+  if (element.type === "field" && element.mode === "props" && element?.props) {
+    fields.push(element.props);
+  } else if (
+    element.type === "group" &&
+    element?.props &&
+    element?.props?.elements
+  ) {
+    for (const childElement of element.props.elements) {
+      fields.push(...getElementFields(childElement));
+    }
+  }
+  return fields;
+};
+
+export const getAllFields: (
+  elements: Array<FormElementProps>
+) => Array<RecordFieldProps> = (elements: Array<FormElementProps>) => {
+  const fields: Array<RecordFieldProps> = [];
+  for (const element of elements) {
+    fields.push(...getElementFields(element));
+  }
+  return fields;
+};
+
+export const constructGridColumnsFromFields: (
+  fields: Array<RecordFieldProps>,
+  isDefaultEditable: boolean,
+  t: TFunction<"translation", undefined>
+) => Array<TemplateGridColDef> = (fields, isDefaultEditable, t) => {
+  const columns: Array<TemplateGridColDef> = [];
+  for (const tableField of fields) {
+    if (
+      tableField?.fieldType === "text" ||
+      tableField?.fieldType === "number"
+    ) {
+      const column: TemplateGridColDef = {
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          tableField?.gridProps?.muiProps?.editable || isDefaultEditable,
+        type: tableField?.fieldType == "number" ? "number" : "string",
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        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,
+        field: tableField?.fieldName,
+        headerName: t(tableField?.fieldLabel || tableField?.fieldName),
+        headerAlign: "center",
+        align: "center",
+        hidden: tableField?.hidden,
+        searchable: tableField?.gridProps?.searchable,
+        flex: 1,
+        minWidth: 200,
+      });
+      columns.push(column);
+    } else if (tableField?.fieldType === "datetime") {
+      const column: TemplateGridColDef = generateDateTimeColumn({
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          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,
+        flex: 1,
+        minWidth: 200,
+      });
+      columns.push(column);
+    } else if (tableField?.fieldType === "checkbox") {
+      const column = generateCheckBoxColumn({
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          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,
+        checkedValue: tableField?.checkedValue,
+        unCheckedValue: tableField?.unCheckedValue,
+        width: 150,
+      });
+      columns.push(column);
+    } else if (tableField?.fieldType === "combobox") {
+      const column: TemplateGridColDef = generateComboColumn({
+        ...tableField?.gridProps?.muiProps,
+        editable:
+          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);
+    }
+  }
+  return columns;
+};
+
+export const constructValidationSchema = (fields: Array<RecordFieldProps>) => {
+  const validationSchemaObj: any = {};
+  for (const field of fields) {
+    if (field?.fieldName) {
+      const fieldName = field.fieldName;
+      if (field.fieldType === "number") {
+        if (field?.required === true) {
+          validationSchemaObj[fieldName] = z.number({
+            required_error: "This field is required",
+            invalid_type_error: "This field must be a number",
+          });
+        } else {
+          validationSchemaObj[fieldName] = z.number().optional().nullable();
+        }
+      } else {
+        if (field?.required === true) {
+          validationSchemaObj[fieldName] = z
+            .string({ message: "This field is required" })
+            .min(1, "This field is required");
+        } else {
+          validationSchemaObj[fieldName] = z.string().optional().nullable();
+        }
+      }
+    }
+  }
+  return validationSchemaObj;
+};
+
+export type GridSelection = {
+  selectedRecords: Array<any>;
+  selectedRecordIds: Array<any>;
+};
+
+export const getGridSelection: (
+  rowSelectionModel: GridRowSelectionModel,
+  data: Array<any>,
+  keyColumnName: string
+) => GridSelection = (
+  rowSelectionModel: GridRowSelectionModel,
+  data: Array<any>,
+  keyColumnName: string
+) => {
+  const sRecords = [];
+  const sRecordIds = [];
+  if (
+    rowSelectionModel.type === "exclude" &&
+    rowSelectionModel.ids.size === 0
+  ) {
+    for (const record of data) {
+      sRecords.push(record);
+      sRecordIds.push(record[keyColumnName]);
+    }
+  } else {
+    if (rowSelectionModel?.ids) {
+      for (const selectedId of rowSelectionModel.ids) {
+        const record = data.find((x) => x[keyColumnName] === selectedId);
+        sRecords.push(record);
+        sRecordIds.push(selectedId);
+      }
+    }
+  }
+  return { selectedRecords: sRecords, selectedRecordIds: sRecordIds };
+};