@asaleh37/ui-base 1.0.9 → 1.1.0

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGridMultiRecordAction.tsx

@@ -0,0 +1,89 @@
+import { Button } from "@mui/material";
+import { RecordAction } from "../DataEntryTypes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { toast } from "react-toastify";
+import { useTranslation } from "react-i18next";
+import useSession from "../../../../hooks/UseSession";
+import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
+
+const TemplateGridMultiRecordAction: React.FC<RecordAction> = (
+  rowAction: RecordAction
+) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const { ConfirmationWindow, setOpen } = useConfirmationWindow({
+    body: t(rowAction?.confirmationMessage || "ACTION_CONFIRMATION"),
+    title: t("CONFIRMATION"),
+    onConfirmationCallBk: async () => {
+      await rowAction?.actionFn(
+        rowAction.recordsToProcessActionOn,
+        rowAction.recordIdsToProcessActionOn
+      );
+      if (rowAction?.reloadData) {
+        rowAction.reloadData();
+      }
+    },
+  });
+  let isActionAllowed = true;
+  if (rowAction.authority) {
+    isActionAllowed = session.isUserAuthorized(rowAction.authority);
+  }
+
+  if (isActionAllowed) {
+    return (
+      <>
+        <ConfirmationWindow />
+        <Button
+          onClick={async () => {
+            if (
+              rowAction?.recordsToProcessActionOn &&
+              rowAction?.recordsToProcessActionOn.length > 0
+            ) {
+              if (rowAction?.preActionValidation) {
+                for (const record of rowAction.recordsToProcessActionOn) {
+                  if (!rowAction.preActionValidation(record)) {
+                    return;
+                  }
+                }
+              }
+              if (rowAction?.isConfirmationRequired === true) {
+                setOpen(true);
+              } else {
+                await rowAction.actionFn(
+                  rowAction.recordsToProcessActionOn,
+                  rowAction.recordIdsToProcessActionOn
+                );
+                if (rowAction?.reloadData) {
+                  rowAction.reloadData();
+                }
+              }
+            } else {
+              toast.error(t("AT_LEAST_ONE_RECORD_SELECTED_MESSAGE"));
+            }
+          }}
+          variant={
+            rowAction?.label
+              ? "outlined"
+              : rowAction?.formActionProps?.actionButtonVariant
+              ? rowAction.formActionProps.actionButtonVariant
+              : "text"
+          }
+          size="small"
+          color={rowAction?.formActionProps?.actionButtonColor || "primary"}
+        >
+          {rowAction?.icon ? (
+            <FontAwesomeIcon
+              style={{ marginRight: 5, marginLeft: 5 }}
+              icon={rowAction.icon}
+            />
+          ) : (
+            <></>
+          )}
+          {rowAction?.label ? t(rowAction.label) : <></>}
+        </Button>
+      </>
+    );
+  }
+};
+
+export default TemplateGridMultiRecordAction;

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGridRecordAction.tsx

@@ -0,0 +1,92 @@
+import { Tooltip } from "@mui/material";
+import { GridActionsCellItem } from "@mui/x-data-grid-premium";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { RecordAction } from "../DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import useSession from "../../../../hooks/UseSession";
+import { useConfirmationWindow } from "../../../../hooks/UseConfirmationWindow";
+
+const TemplateGridRecordAction: React.FC<RecordAction> = (
+  rowAction: RecordAction
+) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const { ConfirmationWindow, setOpen } = useConfirmationWindow({
+    body: t(rowAction?.confirmationMessage || "ACTION_CONFIRMATION"),
+    title: t("CONFIRMATION"),
+    onConfirmationCallBk: async () => {
+      await rowAction?.actionFn(rowAction.record);
+      if (rowAction?.reloadData) {
+        rowAction.reloadData();
+      }
+    },
+  });
+  let isActionAllowed = true;
+  if (rowAction.authority) {
+    isActionAllowed = session.isUserAuthorized(rowAction.authority);
+  }
+  let iconStyle: any = {};
+  if (rowAction?.getActionIconStyleForRecord) {
+    iconStyle = rowAction.getActionIconStyleForRecord(rowAction.record);
+  }
+  let isActionVisibleForRecord = true;
+  if (rowAction?.isActionVisibleForRecord) {
+    isActionVisibleForRecord = rowAction?.isActionVisibleForRecord(
+      rowAction.record
+    );
+  }
+  let isActionDisabledForRecord = false;
+  if (rowAction?.isActionDisabledForRecord) {
+    isActionDisabledForRecord = rowAction.isActionDisabledForRecord(
+      rowAction.record
+    );
+  }
+  if (isActionAllowed && isActionVisibleForRecord) {
+    return (
+      <>
+        <ConfirmationWindow />
+        <GridActionsCellItem
+          disabled={isActionDisabledForRecord}
+          icon={
+            <Tooltip title={rowAction?.label ? t(rowAction.label) : ""}>
+              <FontAwesomeIcon
+                icon={rowAction.icon}
+                style={{
+                  ...iconStyle,
+                  color: isActionDisabledForRecord
+                    ? "gray"
+                    : iconStyle?.color != undefined
+                    ? iconStyle.color
+                    : undefined,
+                }}
+              />
+            </Tooltip>
+          }
+          showInMenu={rowAction?.gridActionProps?.showInMenu || false}
+          label={""}
+          className="textPrimary"
+          color="inherit"
+          onClick={async () => {
+            if (!isActionDisabledForRecord) {
+              if (rowAction?.preActionValidation) {
+                if (!rowAction.preActionValidation(rowAction.record)) {
+                  return;
+                }
+              }
+              if (rowAction?.isConfirmationRequired === true) {
+                setOpen(true);
+              } else {
+                await rowAction.actionFn(rowAction.record);
+                if (rowAction?.reloadData) {
+                  rowAction.reloadData();
+                }
+              }
+            }
+          }}
+        />
+      </>
+    );
+  }
+};
+
+export default TemplateGridRecordAction;

package/src/components/templates/DataEntryTemplates/TemplateDataGrid/TemplateGridTopBar.tsx

@@ -0,0 +1,228 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Divider,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  styled,
+  TextField,
+  Tooltip,
+} from "@mui/material";
+import {
+  Toolbar,
+  ToolbarButton,
+  ColumnsPanelTrigger,
+  FilterPanelTrigger,
+  QuickFilter,
+  QuickFilterControl,
+  QuickFilterClear,
+  QuickFilterTrigger,
+  GridViewColumnIcon,
+  GridFilterListIcon,
+  ExportExcel,
+} from "@mui/x-data-grid-premium";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import TemplateGridMultiRecordAction from "./TemplateGridMultiRecordAction";
+import { getGridSelection } from "../DataEntryUtil";
+import { useTranslation } from "react-i18next";
+import { TemplateGridTopBarProps } from "../DataEntryTypes";
+import useSession from "../../../../hooks/UseSession";
+
+type OwnerState = {
+  expanded: boolean;
+};
+
+const StyledQuickFilter = styled(QuickFilter)({
+  display: "grid",
+  alignItems: "center",
+});
+
+const StyledToolbarButton = styled(ToolbarButton)<{ ownerState: OwnerState }>(
+  ({ theme, ownerState }) => ({
+    gridArea: "1 / 1",
+    width: "min-content",
+    height: "min-content",
+    zIndex: 1,
+    opacity: ownerState.expanded ? 0 : 1,
+    pointerEvents: ownerState.expanded ? "none" : "auto",
+    transition: theme.transitions.create(["opacity"]),
+  })
+);
+
+const StyledTextField = styled(TextField)<{
+  ownerState: OwnerState;
+}>(({ theme, ownerState }) => ({
+  gridArea: "1 / 1",
+  overflowX: "clip",
+  width: ownerState.expanded ? 260 : "var(--trigger-width)",
+  opacity: ownerState.expanded ? 1 : 0,
+  transition: theme.transitions.create(["width", "opacity"]),
+}));
+
+const TemplateGridTopBar: React.FC<TemplateGridTopBarProps> = (
+  props: TemplateGridTopBarProps
+) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const isCreationAuthorized = props?.templateProps?.editAction?.authority
+    ? session.isUserAuthorized(props.templateProps.editAction.authority)
+    : true;
+  const isCreationEnabled = props?.templateProps?.disableDefaultAction || true;
+  const gridSelection = getGridSelection(
+    props?.templateProps?.rowSelectionModel || {
+      ids: new Set(),
+      type: "include",
+    },
+    props?.templateProps?.data || [],
+    props?.templateProps?.keyColumnName || "id"
+  );
+  return (
+    <Toolbar>
+      {isCreationEnabled &&
+      isCreationAuthorized &&
+      props?.templateProps?.editMode?.editMode != "none" ? (
+        <Button onClick={props?.handleCreateNewRecord}>
+          <FontAwesomeIcon
+            icon="add"
+            style={{ marginRight: 5, marginLeft: 5 }}
+          />
+          {t("ADD_BTN_LABEL")}
+        </Button>
+      ) : (
+        <></>
+      )}
+      {props?.templateProps?.rowActions ? (
+        props.templateProps.rowActions.map((rowAction) =>
+          rowAction?.gridActionProps?.multiRecord === true ? (
+            <TemplateGridMultiRecordAction
+              {...rowAction}
+              reloadData={async () => {
+                props.templateProps.apiActions.reloadData(
+                  props?.templateProps?.gridLoadParametersValues
+                );
+              }}
+              recordIdsToProcessActionOn={gridSelection.selectedRecordIds}
+              recordsToProcessActionOn={gridSelection.selectedRecords}
+            />
+          ) : (
+            <></>
+          )
+        )
+      ) : (
+        <></>
+      )}
+      <Box sx={{ flex: 1, mx: 0.5 }}>{props?.templateProps?.tBar}</Box>
+
+      <Tooltip title="Columns">
+        <ColumnsPanelTrigger render={<ToolbarButton />}>
+          <GridViewColumnIcon fontSize="small" />
+        </ColumnsPanelTrigger>
+      </Tooltip>
+
+      <Tooltip title="Filters">
+        <FilterPanelTrigger
+          render={(props, state) => (
+            <ToolbarButton {...props} color="default">
+              <Badge
+                badgeContent={state.filterCount}
+                color="primary"
+                variant="dot"
+              >
+                <GridFilterListIcon fontSize="small" />
+              </Badge>
+            </ToolbarButton>
+          )}
+        />
+      </Tooltip>
+
+      {props?.templateProps?.gridStateKey ? (
+        <Tooltip title={t("RESET_GRID_STATE")}>
+          <IconButton onClick={props?.clearGridState}>
+            <FontAwesomeIcon icon="eraser" />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <></>
+      )}
+
+      <Divider
+        orientation="vertical"
+        variant="middle"
+        flexItem
+        sx={{ mx: 0.5 }}
+      />
+
+      <Tooltip title={t("EXPORT_EXECL_LABEL")}>
+        <ExportExcel render={<MenuItem />}>
+          <FontAwesomeIcon icon="file-excel" color="green" />
+        </ExportExcel>
+      </Tooltip>
+
+      <StyledQuickFilter>
+        <QuickFilterTrigger
+          render={(triggerProps, state) => (
+            <Tooltip title={t("SEARCH_BTN_LABEL")} enterDelay={0}>
+              <StyledToolbarButton
+                {...triggerProps}
+                ownerState={{ expanded: state.expanded }}
+                color="default"
+                aria-disabled={state.expanded}
+              >
+                <FontAwesomeIcon icon="search" />
+              </StyledToolbarButton>
+            </Tooltip>
+          )}
+        />
+        <QuickFilterControl
+          render={({ ref, ...controlProps }, state) => (
+            <StyledTextField
+              {...controlProps}
+              ownerState={{ expanded: state.expanded }}
+              inputRef={ref}
+              aria-label="Search"
+              placeholder={`${t("SEARCH_BTN_LABEL")}...`}
+              size="small"
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FontAwesomeIcon icon="search" />
+                    </InputAdornment>
+                  ),
+                  endAdornment: state.value ? (
+                    <InputAdornment position="end">
+                      <QuickFilterClear
+                        edge="end"
+                        size="small"
+                        aria-label="Clear search"
+                        // material={{ sx: { marginRight: -0.75 } }}
+                      >
+                        <FontAwesomeIcon icon="xmark" />
+                      </QuickFilterClear>
+                    </InputAdornment>
+                  ) : null,
+                  ...controlProps.slotProps?.input,
+                },
+                ...controlProps.slotProps,
+              }}
+            />
+          )}
+        />
+      </StyledQuickFilter>
+
+      <IconButton
+        onClick={() => {
+          props.templateProps.apiActions.reloadData(
+            props?.templateProps?.gridLoadParametersValues
+          );
+        }}
+      >
+        <FontAwesomeIcon icon="refresh" />
+      </IconButton>
+    </Toolbar>
+  );
+};
+
+export default TemplateGridTopBar;

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

@@ -0,0 +1,125 @@
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+import { setStoreData } from "../../../redux/features/business/CommonStoreSlice";
+import useSession from "../../../hooks/UseSession";
+import useAxios from "../../../hooks/useAxios";
+
+export type ApiActionsProps = {
+  findAll?: string;
+  commonStoreKey?: string;
+  setData?: any;
+  findById?: string;
+  findByIdParamName?: string;
+  save?: string;
+  deleteById?: string;
+  deleteByIdParamName?: string;
+};
+
+export type ApiActions = {
+  reloadData: (params?: any) => Promise<void>;
+  saveRecord: (record: any) => Promise<any | null>;
+  loadRecordById: (recordId: any) => Promise<any>;
+  deleteRecordById: (recordId: any) => Promise<boolean>;
+};
+
+const useApiActions: (apiActionsProps: ApiActionsProps) => ApiActions = (
+  apiActionsProps: ApiActionsProps
+) => {
+  const CommonStores = useSelector((state: RootState) => state.commonStores);
+  const dispatch = useDispatch();
+  const session = useSession();
+  const { handleGetRequest, handlePostRequest, handleDeleteRequest } =
+    useAxios();
+  const reloadData = async (params?: any) => {
+    if (apiActionsProps?.commonStoreKey) {
+      const storeKeys = Object.keys(CommonStores);
+      for (const storeKey of storeKeys) {
+        if (storeKey === apiActionsProps.commonStoreKey) {
+          if (
+            (CommonStores[storeKey]?.authority === undefined ||
+              CommonStores[storeKey]?.authority === null ||
+              session.isUserAuthorized(CommonStores[storeKey]?.authority)) &&
+            CommonStores[storeKey]?.url != ""
+          ) {
+            await handleGetRequest({
+              endPointURI: CommonStores[storeKey].url,
+              showMask: false,
+              successCallBkFn: (response: any) => {
+                dispatch(setStoreData({ storeKey, data: response.data }));
+                apiActionsProps.setData(response.data);
+              },
+              failureCallBkFn: () => {
+                dispatch(setStoreData({ storeKey, data: [] }));
+                apiActionsProps.setData([]);
+              },
+            });
+            break;
+          }
+        }
+      }
+    } else if (apiActionsProps?.findAll) {
+      await handleGetRequest({
+        endPointURI: apiActionsProps.findAll,
+        showMask: true,
+        parameters: params || {},
+        successCallBkFn: (response: any) => {
+          apiActionsProps.setData(response.data);
+        },
+      });
+    }
+  };
+  const saveRecord = async (record: any) => {
+    let savedRecord = null;
+    if (apiActionsProps?.save) {
+      await handlePostRequest({
+        endPointURI: apiActionsProps.save,
+        data: record,
+        showMask: true,
+        successCallBkFn: (response: any) => {
+          savedRecord = response.data;
+        },
+      });
+    }
+    return savedRecord;
+  };
+  const loadRecordById = async (recordId: any) => {
+    let record: any = null;
+    if (apiActionsProps?.findById) {
+      const parameters: any = {};
+      const keyParameterName = apiActionsProps?.findByIdParamName || "id";
+      parameters[keyParameterName] = recordId;
+      await handleGetRequest({
+        endPointURI: apiActionsProps.findById,
+        showMask: true,
+        parameters,
+        successCallBkFn: (response: any) => {
+          record = response.data;
+        },
+      });
+    }
+    return record;
+  };
+  const deleteRecordById = async (recordId: any) => {
+    let result = true;
+    if (apiActionsProps?.deleteById) {
+      const parameters: any = {};
+      const keyParameterName = apiActionsProps?.deleteByIdParamName || "id";
+      parameters[keyParameterName] = recordId;
+      await handleDeleteRequest({
+        endPointURI: apiActionsProps.deleteById,
+        showMask: true,
+        parameters,
+        successCallBkFn: () => {
+          result = true;
+        },
+        failureCallBkFn: () => {
+          result = false;
+        },
+      });
+    }
+    return result;
+  };
+  return { reloadData, loadRecordById, saveRecord, deleteRecordById };
+};
+
+export default useApiActions;