@asaleh37/ui-base 25.6.2-0.4 → 25.6.17-1

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

@@ -1,227 +1,227 @@
-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, index) =>
-          rowAction?.gridActionProps?.multiRecord === true ? (
-            <TemplateGridMultiRecordAction
-              {...rowAction}
-              key={index}
-              reloadData={async () => {
-                props.templateProps.apiActions.reloadData(
-                  props?.templateProps?.gridLoadParametersValues
-                );
-              }}
-              recordIdsToProcessActionOn={gridSelection.selectedRecordIds}
-              recordsToProcessActionOn={gridSelection.selectedRecords}
-            />
-          ) : null
-        )
-      ) : (
-        <></>
-      )}
-      <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;
+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, index) =>
+          rowAction?.gridActionProps?.multiRecord === true ? (
+            <TemplateGridMultiRecordAction
+              {...rowAction}
+              key={index}
+              reloadData={async () => {
+                props.templateProps.apiActions.reloadData(
+                  props?.templateProps?.gridLoadParametersValues
+                );
+              }}
+              recordIdsToProcessActionOn={gridSelection.selectedRecordIds}
+              recordsToProcessActionOn={gridSelection.selectedRecords}
+            />
+          ) : null
+        )
+      ) : (
+        <></>
+      )}
+      <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;