{renderEmptyRowsFallback?.({ table }) ?? (
{globalFilter || columnFilters.length
@@ -155,12 +143,10 @@ const DataTable_TableBody = ({
row,
rowVirtualizer,
staticRowIndex,
- virtualRow: rowVirtualizer
- ? (rowOrVirtualRow)
- : undefined,
+ virtualRow: rowVirtualizer ? rowOrVirtualRow : undefined,
};
const key = `${row.id}-${row.index}`;
- return memoMode === 'rows' ? (
+ return memoMode === "rows" ? (
) : (
@@ -169,39 +155,37 @@ const DataTable_TableBody = ({
))}
- {!rowPinningDisplayMode?.includes('sticky') &&
- getIsSomeRowsPinned('bottom') && (
- ({
- bottom: tableFooterHeight - 1,
- display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
- position: 'sticky',
- zIndex: 1,
- ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme)),
- })}
- >
- {getBottomRows().map((row, staticRowIndex) => {
- const props = {
- ...commonRowProps,
- row,
- staticRowIndex,
- };
- return memoMode === 'rows' ? (
-
- ) : (
-
- );
- })}
-
- )}
+ {!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("bottom") && (
+ ({
+ bottom: tableFooterHeight - 1,
+ display: layoutMode?.startsWith("grid") ? "grid" : undefined,
+ position: "sticky",
+ zIndex: 1,
+ ...parseFromValuesOrFunc(tableBodyProps?.sx, theme),
+ })}
+ >
+ {getBottomRows().map((row, staticRowIndex) => {
+ const props = {
+ ...commonRowProps,
+ row,
+ staticRowIndex,
+ };
+ return memoMode === "rows" ? (
+
+ ) : (
+
+ );
+ })}
+
+ )}
);
-
-}
-export default DataTable_TableBody
+};
+export default DataTable_TableBody;
export const Memo_DataTable_TableBody = memo(
DataTable_TableBody,
- (prev, next) => prev.table.options.data === next.table.options.data,
-);
\ No newline at end of file
+ (prev, next) => prev.table.options.data === next.table.options.data
+);
diff --git a/src/core/components/DataTable/body/TableBodyCell.js b/src/core/components/DataTable/body/TableBodyCell.js
index 9ef022d..4c1804b 100644
--- a/src/core/components/DataTable/body/TableBodyCell.js
+++ b/src/core/components/DataTable/body/TableBodyCell.js
@@ -7,15 +7,7 @@ const { useState, useEffect, useMemo, memo } = require("react");
const { default: DataTable_CopyButton } = require("../buttons/CopyButton");
const { default: DataTable_TableBodyCellValue } = require("./TableBodyCellValue");
-const DataTable_TableBodyCell = ({
- cell,
- numRows,
- rowRef,
- staticColumnIndex,
- staticRowIndex,
- table,
- ...rest
-}) => {
+const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table, ...rest }) => {
const theme = useTheme();
const {
getState,
@@ -73,9 +65,7 @@ const DataTable_TableBodyCell = ({
if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
const size = column.getSize();
setSkeletonWidth(
- columnDefType === 'display'
- ? size / 2
- : Math.round(Math.random() * (size - size / 3) + size / 3),
+ columnDefType === "display" ? size / 2 : Math.round(Math.random() * (size - size / 3) + size / 3)
);
}, [isLoading, showSkeletons]);
@@ -88,77 +78,55 @@ const DataTable_TableBodyCell = ({
const isLastColumn = column.getIsLastColumn();
const isLastRow = numRows && staticRowIndex === numRows - 1;
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
- const showResizeBorder =
- isResizingColumn && columnResizeMode === 'onChange';
+ const showResizeBorder = isResizingColumn && columnResizeMode === "onChange";
const borderStyle = showResizeBorder
? `2px solid ${draggingBorderColor} !important`
: isDraggingColumn || isDraggingRow
- ? `1px dashed ${theme.palette.grey[500]} !important`
- : isHoveredColumn || isHoveredRow || isResizingColumn
- ? `2px dashed ${draggingBorderColor} !important`
- : undefined;
+ ? `1px dashed ${theme.palette.grey[500]} !important`
+ : isHoveredColumn || isHoveredRow || isResizingColumn
+ ? `2px dashed ${draggingBorderColor} !important`
+ : undefined;
if (showResizeBorder) {
- return columnResizeDirection === 'ltr'
- ? { borderRight: borderStyle }
- : { borderLeft: borderStyle };
+ return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
}
return borderStyle
? {
- borderBottom:
- isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
- ? borderStyle
- : undefined,
- borderLeft:
- isDraggingColumn ||
- isHoveredColumn ||
- ((isDraggingRow || isHoveredRow) && isFirstColumn)
- ? borderStyle
- : undefined,
- borderRight:
- isDraggingColumn ||
- isHoveredColumn ||
- ((isDraggingRow || isHoveredRow) && isLastColumn)
- ? borderStyle
- : undefined,
- borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
- }
+ borderBottom:
+ isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn) ? borderStyle : undefined,
+ borderLeft:
+ isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isFirstColumn)
+ ? borderStyle
+ : undefined,
+ borderRight:
+ isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isLastColumn)
+ ? borderStyle
+ : undefined,
+ borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+ }
: undefined;
- }, [
- columnSizingInfo.isResizingColumn,
- draggingColumn,
- draggingRow,
- hoveredColumn,
- hoveredRow,
- staticRowIndex,
- ]);
+ }, [columnSizingInfo.isResizingColumn, draggingColumn, draggingRow, hoveredColumn, hoveredRow, staticRowIndex]);
- const isColumnPinned =
- enableColumnPinning &&
- columnDef.columnDefType !== 'group' &&
- column.getIsPinned();
+ const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
const isEditable = isCellEditable({ cell, table });
const isEditing =
isEditable &&
- !['custom', 'modal'].includes(editDisplayMode) &&
- (editDisplayMode === 'table' ||
- editingRow?.id === row.id ||
- editingCell?.id === cell.id) &&
+ !["custom", "modal"].includes(editDisplayMode) &&
+ (editDisplayMode === "table" || editingRow?.id === row.id || editingCell?.id === cell.id) &&
!row.getIsGrouped();
- const isCreating =
- isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;
+ const isCreating = isEditable && createDisplayMode === "row" && creatingRow?.id === row.id;
const showClickToCopyButton =
(parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
- !['context-menu', false].includes(
+ !["context-menu", false].includes(
// @ts-ignore
- parseFromValuesOrFunc(columnDef.enableClickToCopy, cell),
+ parseFromValuesOrFunc(columnDef.enableClickToCopy, cell)
);
const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
@@ -175,13 +143,11 @@ const DataTable_TableBodyCell = ({
const handleDragEnter = (e) => {
tableCellProps?.onDragEnter?.(e);
- if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+ if (enableGrouping && hoveredColumn?.id === "drop-zone") {
setHoveredColumn(null);
}
if (enableColumnOrdering && draggingColumn) {
- setHoveredColumn(
- columnDef.enableColumnOrdering !== false ? column : null,
- );
+ setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
}
};
@@ -210,43 +176,39 @@ const DataTable_TableBodyCell = ({
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
sx={(theme) => ({
- '&:hover': {
+ "&:hover": {
outline:
actionCell?.id === cell.id ||
- (editDisplayMode === 'cell' && isEditable) ||
- (editDisplayMode === 'table' && (isCreating || isEditing))
+ (editDisplayMode === "cell" && isEditable) ||
+ (editDisplayMode === "table" && (isCreating || isEditing))
? `1px solid ${theme.palette.grey[500]}`
: undefined,
- textOverflow: 'clip',
+ textOverflow: "clip",
},
- alignItems: layoutMode?.startsWith('grid') ? 'center' : undefined,
+ alignItems: layoutMode?.startsWith("grid") ? "center" : undefined,
cursor: isRightClickable
- ? 'context-menu'
- : isEditable && editDisplayMode === 'cell'
- ? 'pointer'
- : 'inherit',
- outline:
- actionCell?.id === cell.id
- ? `1px solid ${theme.palette.grey[500]}`
- : undefined,
- outlineOffset: '-1px',
- overflow: 'hidden',
+ ? "context-menu"
+ : isEditable && editDisplayMode === "cell"
+ ? "pointer"
+ : "inherit",
+ outline: actionCell?.id === cell.id ? `1px solid ${theme.palette.grey[500]}` : undefined,
+ outlineOffset: "-1px",
+ overflow: "hidden",
p:
- density === 'compact'
- ? columnDefType === 'display'
- ? '0 0.5rem'
- : '0.5rem'
- : density === 'comfortable'
- ? columnDefType === 'display'
- ? '0.5rem 0.75rem'
- : '1rem'
- : columnDefType === 'display'
- ? '1rem 1.25rem'
- : '1.5rem',
+ density === "compact"
+ ? columnDefType === "display"
+ ? "0 0.5rem"
+ : "0.5rem"
+ : density === "comfortable"
+ ? columnDefType === "display"
+ ? "0.5rem 0.75rem"
+ : "1rem"
+ : columnDefType === "display"
+ ? "1rem 1.25rem"
+ : "1.5rem",
- textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
- whiteSpace:
- row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
+ textOverflow: columnDefType !== "display" ? "ellipsis" : undefined,
+ whiteSpace: row.getIsPinned() || density === "compact" ? "nowrap" : "normal",
...getCommonMRTCellStyles({
column,
table,
@@ -261,17 +223,10 @@ const DataTable_TableBodyCell = ({
{cell.getIsPlaceholder() ? (
columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
) : showSkeletons !== false && (isLoading || showSkeletons) ? (
-
- ) : columnDefType === 'display' &&
- (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
- column.id,
- ) ||
- !row.getIsGrouped()) ? (
+
+ ) : columnDefType === "display" &&
+ (["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
+ !row.getIsGrouped()) ? (
columnDef.Cell?.({
cell,
column,
@@ -289,18 +244,12 @@ const DataTable_TableBodyCell = ({
) : (
)}
- {cell.getIsGrouped() && !columnDef.GroupedCell && (
- <> ({row.subRows?.length})
- )}
+ {cell.getIsGrouped() && !columnDef.GroupedCell && <> ({row.subRows?.length})}
)}
);
-
-}
+};
export default DataTable_TableBodyCell;
-export const Memo_DataTable_TableBodyCell = memo(
- DataTable_TableBodyCell,
- (prev, next) => next.cell === prev.cell,
-);
\ No newline at end of file
+export const Memo_DataTable_TableBodyCell = memo(DataTable_TableBodyCell, (prev, next) => next.cell === prev.cell);
diff --git a/src/core/components/DataTable/body/TableBodyCellValue.js b/src/core/components/DataTable/body/TableBodyCellValue.js
index 6d4f05f..aea105f 100644
--- a/src/core/components/DataTable/body/TableBodyCellValue.js
+++ b/src/core/components/DataTable/body/TableBodyCellValue.js
@@ -2,111 +2,102 @@ import { Box } from "@mui/material";
const allowedTypes = ["string", "number"];
-const DataTable_TableBodyCellValue = ({
- cell,
- rowRef,
- staticColumnIndex,
- staticRowIndex,
- table,
-}) => {
- const {
- getState,
- options: {
- enableFilterMatchHighlighting,
- mrtTheme: { matchHighlightColor },
- },
- } = table;
- const { column, row } = cell;
- const { columnDef } = column;
- const { globalFilter, globalFilterFn } = getState();
- const filterValue = column.getFilterValue();
+const DataTable_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table }) => {
+ const {
+ getState,
+ options: {
+ enableFilterMatchHighlighting,
+ mrtTheme: { matchHighlightColor },
+ },
+ } = table;
+ const { column, row } = cell;
+ const { columnDef } = column;
+ const { globalFilter, globalFilterFn } = getState();
+ const filterValue = column.getFilterValue();
- let renderedCellValue =
- cell.getIsAggregated() && columnDef.AggregatedCell
- ? columnDef.AggregatedCell({
- cell,
- column,
- row,
- table,
- })
- : row.getIsGrouped() && !cell.getIsGrouped()
- ? null
- : cell.getIsGrouped() && columnDef.GroupedCell
- ? columnDef.GroupedCell({
+ let renderedCellValue =
+ cell.getIsAggregated() && columnDef.AggregatedCell
+ ? columnDef.AggregatedCell({
+ cell,
+ column,
+ row,
+ table,
+ })
+ : row.getIsGrouped() && !cell.getIsGrouped()
+ ? null
+ : cell.getIsGrouped() && columnDef.GroupedCell
+ ? columnDef.GroupedCell({
+ cell,
+ column,
+ row,
+ table,
+ })
+ : undefined;
+
+ const isGroupedValue = renderedCellValue !== undefined;
+
+ if (!isGroupedValue) {
+ renderedCellValue = cell.renderValue();
+ }
+
+ if (
+ enableFilterMatchHighlighting &&
+ columnDef.enableFilterMatchHighlighting !== false &&
+ String(renderedCellValue) &&
+ allowedTypes.includes(typeof renderedCellValue) &&
+ ((filterValue &&
+ allowedTypes.includes(typeof filterValue) &&
+ ["autocomplete", "text"].includes(columnDef.filterVariant)) ||
+ (globalFilter && allowedTypes.includes(typeof globalFilter) && column.getCanGlobalFilter()))
+ ) {
+ const chunks = highlightWords?.({
+ matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== "fuzzy",
+ query: (filterValue ?? globalFilter ?? "").toString(),
+ text: renderedCellValue?.toString(),
+ });
+ if (chunks?.length > 1 || chunks?.[0]?.match) {
+ renderedCellValue = (
+
+ {chunks?.map(({ key, match, text }) => (
+
+ theme.palette.mode === "dark"
+ ? theme.palette.common.white
+ : theme.palette.common.black,
+ padding: "2px 1px",
+ }
+ : undefined
+ }
+ >
+ {text}
+
+ )) ?? renderedCellValue}
+
+ );
+ }
+ }
+
+ if (columnDef.Cell && !isGroupedValue) {
+ renderedCellValue = columnDef.Cell({
cell,
column,
+ renderedCellValue,
row,
+ rowRef,
+ staticColumnIndex,
+ staticRowIndex,
table,
- })
- : undefined;
-
- const isGroupedValue = renderedCellValue !== undefined;
-
- if (!isGroupedValue) {
- renderedCellValue = cell.renderValue();
- }
-
- if (
- enableFilterMatchHighlighting &&
- columnDef.enableFilterMatchHighlighting !== false &&
- String(renderedCellValue) &&
- allowedTypes.includes(typeof renderedCellValue) &&
- ((filterValue &&
- allowedTypes.includes(typeof filterValue) &&
- ["autocomplete", "text"].includes(columnDef.filterVariant)) ||
- (globalFilter &&
- allowedTypes.includes(typeof globalFilter) &&
- column.getCanGlobalFilter()))
- ) {
- const chunks = highlightWords?.({
- matchExactly:
- (filterValue ? columnDef._filterFn : globalFilterFn) !== "fuzzy",
- query: (filterValue ?? globalFilter ?? "").toString(),
- text: renderedCellValue?.toString(),
- });
- if (chunks?.length > 1 || chunks?.[0]?.match) {
- renderedCellValue = (
-
- {chunks?.map(({ key, match, text }) => (
-
- theme.palette.mode === "dark"
- ? theme.palette.common.white
- : theme.palette.common.black,
- padding: "2px 1px",
- }
- : undefined
- }
- >
- {text}
-
- )) ?? renderedCellValue}
-
- );
+ });
}
- }
- if (columnDef.Cell && !isGroupedValue) {
- renderedCellValue = columnDef.Cell({
- cell,
- column,
- renderedCellValue,
- row,
- rowRef,
- staticColumnIndex,
- staticRowIndex,
- table,
- });
- }
-
- return renderedCellValue;
+ return renderedCellValue;
};
export default DataTable_TableBodyCellValue;
diff --git a/src/core/components/DataTable/body/TableBodyRow.js b/src/core/components/DataTable/body/TableBodyRow.js
index e500eb0..a041d66 100644
--- a/src/core/components/DataTable/body/TableBodyRow.js
+++ b/src/core/components/DataTable/body/TableBodyRow.js
@@ -28,11 +28,7 @@ const DataTable_TableBodyRow = ({
enableStickyHeader,
layoutMode,
memoMode,
- mrtTheme: {
- baseBackgroundColor,
- pinnedRowBackgroundColor,
- selectedRowBackgroundColor,
- },
+ mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor },
muiTableBodyRowProps,
renderDetailPanel,
rowPinningDisplayMode,
@@ -40,21 +36,12 @@ const DataTable_TableBodyRow = ({
refs: { tableFooterRef, tableHeadRef },
setHoveredRow,
} = table;
- const {
- density,
- draggingColumn,
- draggingRow,
- editingCell,
- editingRow,
- hoveredRow,
- isFullScreen,
- rowPinning,
- } = getState();
+ const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning } =
+ getState();
const visibleCells = row.getVisibleCells();
- const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
- columnVirtualizer ?? {};
+ const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
const isRowSelected = getIsRowSelected({ row, table });
const isRowPinned = enableRowPinning && row.getIsPinned();
@@ -71,30 +58,17 @@ const DataTable_TableBodyRow = ({
};
const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
- if (
- !enableRowPinning ||
- !rowPinningDisplayMode?.includes('sticky') ||
- !pinnedRowIds ||
- !row.getIsPinned()
- )
+ if (!enableRowPinning || !rowPinningDisplayMode?.includes("sticky") || !pinnedRowIds || !row.getIsPinned())
return [];
- return [
- [...pinnedRowIds].reverse().indexOf(row.id),
- pinnedRowIds.indexOf(row.id),
- ];
+ return [[...pinnedRowIds].reverse().indexOf(row.id), pinnedRowIds.indexOf(row.id)];
}, [pinnedRowIds, rowPinning]);
- const tableHeadHeight =
- ((enableStickyHeader || isFullScreen) &&
- tableHeadRef.current?.clientHeight) ||
- 0;
- const tableFooterHeight =
- (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+ const tableHeadHeight = ((enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight) || 0;
+ const tableFooterHeight = (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme);
- const defaultRowHeight =
- density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
+ const defaultRowHeight = density === "compact" ? 37 : density === "comfortable" ? 53 : 69;
const customRowHeight =
// @ts-ignore
@@ -117,16 +91,16 @@ const DataTable_TableBodyRow = ({
const cellHighlightColor = isRowSelected
? selectedRowBackgroundColor
: isRowPinned
- ? pinnedRowBackgroundColor
- : undefined;
+ ? pinnedRowBackgroundColor
+ : undefined;
const cellHighlightColorHover =
tableRowProps?.hover !== false
? isRowSelected
? cellHighlightColor
- : theme.palette.mode === 'dark'
- ? `${lighten(baseBackgroundColor, 0.3)}`
- : `${darken(baseBackgroundColor, 0.3)}`
+ : theme.palette.mode === "dark"
+ ? `${lighten(baseBackgroundColor, 0.3)}`
+ : `${darken(baseBackgroundColor, 0.3)}`
: undefined;
return (
@@ -146,91 +120,81 @@ const DataTable_TableBodyRow = ({
selected={isRowSelected}
{...tableRowProps}
style={{
- transform: virtualRow
- ? `translateY(${virtualRow.start}px)`
- : undefined,
+ transform: virtualRow ? `translateY(${virtualRow.start}px)` : undefined,
...tableRowProps?.style,
}}
sx={(theme) => ({
- '&:hover td:after': cellHighlightColorHover
+ "&:hover td:after": cellHighlightColorHover
? {
- backgroundColor: alpha(cellHighlightColorHover, 0.3),
- ...commonCellBeforeAfterStyles,
- }
+ backgroundColor: alpha(cellHighlightColorHover, 0.3),
+ ...commonCellBeforeAfterStyles,
+ }
: undefined,
backgroundColor: `${baseBackgroundColor} !important`,
bottom:
!virtualRow && bottomPinnedIndex !== undefined && isRowPinned
- ? `${bottomPinnedIndex * rowHeight +
- (enableStickyFooter ? tableFooterHeight - 1 : 0)
- }px`
+ ? `${bottomPinnedIndex * rowHeight + (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
: undefined,
- boxSizing: 'border-box',
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+ boxSizing: "border-box",
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
position: virtualRow
- ? 'absolute'
- : rowPinningDisplayMode?.includes('sticky') && isRowPinned
- ? 'sticky'
- : 'relative',
+ ? "absolute"
+ : rowPinningDisplayMode?.includes("sticky") && isRowPinned
+ ? "sticky"
+ : "relative",
td: {
...getCommonPinnedCellStyles({ table, theme }),
},
- 'td:after': cellHighlightColor
+ "td:after": cellHighlightColor
? {
- backgroundColor: cellHighlightColor,
- ...commonCellBeforeAfterStyles,
- }
+ backgroundColor: cellHighlightColor,
+ ...commonCellBeforeAfterStyles,
+ }
: undefined,
top: virtualRow
? 0
: topPinnedIndex !== undefined && isRowPinned
- ? `${topPinnedIndex * rowHeight +
- (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+ ? `${
+ topPinnedIndex * rowHeight +
+ (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
}px`
- : undefined,
- transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
- width: '100%',
- zIndex:
- rowPinningDisplayMode?.includes('sticky') && isRowPinned ? 2 : 0,
- ...(sx),
+ : undefined,
+ transition: virtualRow ? "none" : "all 150ms ease-in-out",
+ width: "100%",
+ zIndex: rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
+ ...sx,
})}
>
- {virtualPaddingLeft ? (
- |
- ) : null}
- {(virtualColumns ?? visibleCells).map(
- (cellOrVirtualCell, staticColumnIndex) => {
- let cell = cellOrVirtualCell;
- if (columnVirtualizer) {
- staticColumnIndex = (cellOrVirtualCell).index;
- cell = visibleCells[staticColumnIndex];
- }
- const props = {
- cell,
- numRows,
- rowRef,
- staticColumnIndex,
- staticRowIndex,
- table,
- };
- return cell ? (
- memoMode === 'cells' &&
- cell.column.columnDef.columnDefType === 'data' &&
- !draggingColumn &&
- !draggingRow &&
- editingCell?.id !== cell.id &&
- editingRow?.id !== row.id ? (
-
- ) : (
-
- )
- ) : null;
- },
- )}
- {virtualPaddingRight ? (
- |
- ) : null}
+ {virtualPaddingLeft ? | : null}
+ {(virtualColumns ?? visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
+ let cell = cellOrVirtualCell;
+ if (columnVirtualizer) {
+ staticColumnIndex = cellOrVirtualCell.index;
+ cell = visibleCells[staticColumnIndex];
+ }
+ const props = {
+ cell,
+ numRows,
+ rowRef,
+ staticColumnIndex,
+ staticRowIndex,
+ table,
+ };
+ return cell ? (
+ memoMode === "cells" &&
+ cell.column.columnDef.columnDefType === "data" &&
+ !draggingColumn &&
+ !draggingRow &&
+ editingCell?.id !== cell.id &&
+ editingRow?.id !== row.id ? (
+
+ ) : (
+
+ )
+ ) : null;
+ })}
+ {virtualPaddingRight ? | : null}
{renderDetailPanel && !row.getIsGrouped() && (
);
-}
-export default DataTable_TableBodyRow
+};
+export default DataTable_TableBodyRow;
export const Memo_DataTable_TableBodyRow = memo(
DataTable_TableBodyRow,
- (prev, next) =>
- prev.row === next.row && prev.staticRowIndex === next.staticRowIndex,
-);
\ No newline at end of file
+ (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex
+);
diff --git a/src/core/components/DataTable/body/TableDetailPanel.js b/src/core/components/DataTable/body/TableDetailPanel.js
index 0c9f8a9..853aab5 100644
--- a/src/core/components/DataTable/body/TableDetailPanel.js
+++ b/src/core/components/DataTable/body/TableDetailPanel.js
@@ -23,7 +23,6 @@ const DataTable_TableDetailPanel = ({
} = table;
const { isLoading } = getState();
-
const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
isDetailPanel: true,
row,
@@ -52,16 +51,12 @@ const DataTable_TableDetailPanel = ({
}}
{...tableRowProps}
sx={(theme) => ({
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
- position: virtualRow ? 'absolute' : undefined,
- top: virtualRow
- ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
- : undefined,
- transform: virtualRow
- ? `translateY(${virtualRow?.start}px)`
- : undefined,
- width: '100%',
- ...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+ position: virtualRow ? "absolute" : undefined,
+ top: virtualRow ? `${parentRowRef.current?.getBoundingClientRect()?.height}px` : undefined,
+ transform: virtualRow ? `translateY(${virtualRow?.start}px)` : undefined,
+ width: "100%",
+ ...parseFromValuesOrFunc(tableRowProps?.sx, theme),
})}
>
({
backgroundColor: virtualRow ? baseBackgroundColor : undefined,
- borderBottom: !row.getIsExpanded() ? 'none' : undefined,
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
- py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
- transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
+ borderBottom: !row.getIsExpanded() ? "none" : undefined,
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+ py: !!DetailPanel && row.getIsExpanded() ? "1rem" : 0,
+ transition: !virtualRow ? "all 150ms ease-in-out" : undefined,
width: `100%`,
- ...(parseFromValuesOrFunc(tableCellProps?.sx, theme)),
+ ...parseFromValuesOrFunc(tableCellProps?.sx, theme),
})}
>
{virtualRow ? (
@@ -88,6 +83,5 @@ const DataTable_TableDetailPanel = ({
);
-
-}
-export default DataTable_TableDetailPanel
\ No newline at end of file
+};
+export default DataTable_TableDetailPanel;
diff --git a/src/core/components/DataTable/buttons/CopyButton.js b/src/core/components/DataTable/buttons/CopyButton.js
index c8878e0..c4dfe4b 100644
--- a/src/core/components/DataTable/buttons/CopyButton.js
+++ b/src/core/components/DataTable/buttons/CopyButton.js
@@ -2,11 +2,7 @@ import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils
import { Button, Tooltip } from "@mui/material";
import { useState } from "react";
-const DataTable_CopyButton = ({
- cell,
- table,
- ...rest
-}) => {
+const DataTable_CopyButton = ({ cell, table, ...rest }) => {
const {
options: { localization, muiCopyButtonProps },
} = table;
@@ -40,11 +36,8 @@ const DataTable_CopyButton = ({
return (
);
-}
-export default DataTable_CopyButton
\ No newline at end of file
+};
+export default DataTable_CopyButton;
diff --git a/src/core/components/DataTable/buttons/GrabHandleButton.js b/src/core/components/DataTable/buttons/GrabHandleButton.js
index 5619abb..2071eed 100644
--- a/src/core/components/DataTable/buttons/GrabHandleButton.js
+++ b/src/core/components/DataTable/buttons/GrabHandleButton.js
@@ -1,11 +1,7 @@
import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
import { IconButton, Tooltip } from "@mui/material";
-const DataTable_GrabHandleButton = ({
- location,
- table,
- ...rest
-}) => {
+const DataTable_GrabHandleButton = ({ location, table, ...rest }) => {
const {
options: {
icons: { DragHandleIcon },
@@ -14,10 +10,7 @@ const DataTable_GrabHandleButton = ({
} = table;
return (
-
+
({
- '&:active': {
- cursor: 'grabbing',
+ "&:active": {
+ cursor: "grabbing",
},
- '&:hover': {
- backgroundColor: 'transparent',
+ "&:hover": {
+ backgroundColor: "transparent",
opacity: 1,
},
- cursor: 'grab',
- m: '0 -0.1rem',
- opacity: location === 'row' ? 1 : 0.5,
- p: '2px',
- transition: 'all 150ms ease-in-out',
- ...(parseFromValuesOrFunc(rest?.sx, theme)),
+ cursor: "grab",
+ m: "0 -0.1rem",
+ opacity: location === "row" ? 1 : 0.5,
+ p: "2px",
+ transition: "all 150ms ease-in-out",
+ ...parseFromValuesOrFunc(rest?.sx, theme),
})}
title={undefined}
>
@@ -49,6 +42,5 @@ const DataTable_GrabHandleButton = ({
);
-
-}
-export default DataTable_GrabHandleButton
\ No newline at end of file
+};
+export default DataTable_GrabHandleButton;
diff --git a/src/core/components/DataTable/buttons/ShowHideColumnsButton.js b/src/core/components/DataTable/buttons/ShowHideColumnsButton.js
index d46281e..cd6c8ac 100644
--- a/src/core/components/DataTable/buttons/ShowHideColumnsButton.js
+++ b/src/core/components/DataTable/buttons/ShowHideColumnsButton.js
@@ -19,23 +19,12 @@ const DataTable_ShowHideColumnsButton = ({ table, ...rest }) => {
return (
<>
-
+
- {anchorEl && (
-
- )}
+ {anchorEl && }
);
-}
-export default DataTable_ShowHideColumnsButton
\ No newline at end of file
+};
+export default DataTable_ShowHideColumnsButton;
diff --git a/src/core/components/DataTable/buttons/ToggleFiltersButton.js b/src/core/components/DataTable/buttons/ToggleFiltersButton.js
index 9885183..6298223 100644
--- a/src/core/components/DataTable/buttons/ToggleFiltersButton.js
+++ b/src/core/components/DataTable/buttons/ToggleFiltersButton.js
@@ -1,4 +1,4 @@
const DataTable_ToggleFiltersButton = ({ table, ...rest }) => {
- return <>
-}
-export default DataTable_ToggleFiltersButton
\ No newline at end of file
+ return <>;
+};
+export default DataTable_ToggleFiltersButton;
diff --git a/src/core/components/DataTable/filter/FilterBody.jsx b/src/core/components/DataTable/filter/FilterBody.jsx
new file mode 100644
index 0000000..9dafb03
--- /dev/null
+++ b/src/core/components/DataTable/filter/FilterBody.jsx
@@ -0,0 +1,224 @@
+"use client";
+
+import { Box, Button, Drawer, styled } from "@mui/material";
+import { Form, Formik } from "formik";
+import useTableSetting from "@/lib/hooks/useTableSetting";
+import { useEffect, useRef, useState } from "react";
+import FilterHeader from "@/core/components/DataTable/filter/FilterHeader";
+import * as Yup from "yup";
+import FilterBodyField from "@/core/components/DataTable/filter/FilterBodyField";
+import { toast } from "react-toastify";
+import AskForKeep from "@/core/components/NotificationDesign/AskForKeep";
+import useDataTable from "@/lib/hooks/useDataTable";
+
+const ScrollBox = styled(Box)({
+ flexGrow: 1,
+ overflowY: "scroll",
+ maxWidth: "450px",
+ "::-webkit-scrollbar": {
+ width: "5px",
+ },
+ "::-webkit-scrollbar-track": {
+ boxShadow: "inset 0 0 5px #fff",
+ borderRadius: "5px",
+ },
+ "::-webkit-scrollbar-thumb": {
+ background: "#155175",
+ borderRadius: "0px",
+ },
+});
+
+function FilterBody({ columns, drawerState, setDrawerState, user_id, page_name, table_name }) {
+ const { settingStore, filterAction } = useTableSetting();
+ const [initialValues, setInitialValues] = useState({});
+ const [validationSchema, setValidationSchema] = useState({});
+ const { filterData, setFilterData } = useDataTable();
+ const filterDataRef = useRef(filterData);
+ useEffect(() => {
+ filterDataRef.current = filterData;
+ }, [filterData]);
+
+ useEffect(() => {
+ const values = columns.reduce((acc, column) => {
+ if (!column.enableColumnFilter) return acc;
+ const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.["filters"]?.find(
+ (filter) => filter.id === column.id
+ );
+ if (column.datatype === "array") {
+ acc[column.id] = {
+ id: column.id,
+ value: filter?.value || [],
+ filterFn: filter?.fn || column._filterFn,
+ datatype: column.datatype,
+ };
+ } else if (column._filterFn === "between") {
+ acc[column.id] = {
+ id: column.id,
+ value: filter?.value || ["", ""],
+ filterFn: filter?.fn || column._filterFn,
+ datatype: column.datatype,
+ };
+ } else {
+ acc[column.id] = {
+ id: column.id,
+ value: filter?.value || "",
+ filterFn: filter?.fn || column._filterFn,
+ datatype: column.datatype,
+ };
+ }
+ return acc;
+ }, {});
+ setInitialValues(Object.keys(filterData).length !== 0 ? filterData : values);
+ }, [columns, settingStore, user_id, page_name, table_name, filterData]);
+
+ useEffect(() => {
+ const generatedSchema = Yup.object().shape(
+ Object.keys(initialValues).reduce((acc, key) => {
+ const initialValue = initialValues[key];
+ if (initialValue.filterFn === "between") {
+ acc[key] = Yup.object().shape({
+ value: Yup.array()
+ .of(Yup.string().nullable())
+ .test({
+ test(value, ctx) {
+ const [start, end] = value || ["", ""];
+ if (
+ initialValue.datatype === "numeric" &&
+ parseInt(end, 10) <= parseInt(start, 10)
+ ) {
+ return ctx.createError({
+ message: `مقدار وارده باید بیشتر از (${start}) باشد`,
+ });
+ } else if ((start && !end) || (!start && end)) {
+ return ctx.createError({
+ message: "این بخش را تکمیل نمایید",
+ });
+ }
+ return true;
+ },
+ }),
+ });
+ }
+ return acc;
+ }, {})
+ );
+
+ setValidationSchema(generatedSchema);
+ }, [initialValues]);
+
+ const handleSubmit = (values, { setSubmitting }) => {
+ toast.dismiss({ containerId: "filtering" });
+ setDrawerState(false);
+ setFilterData(values);
+ toast(, {
+ containerId: "filtering",
+ className: "filter-toast",
+ position: "bottom-left",
+ draggable: true,
+ autoClose: false,
+ });
+ setSubmitting(false);
+ };
+
+ const onSaveFilter = () => {
+ const currentFilterData = filterDataRef.current;
+ const arrayOfObjects = Object.keys(currentFilterData)
+ .map((key) => {
+ const value = currentFilterData[key].value;
+ if (
+ value !== "" &&
+ !(
+ Array.isArray(value) &&
+ (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === ""))
+ )
+ ) {
+ return currentFilterData[key];
+ }
+ })
+ .filter(Boolean);
+ filterAction(user_id, page_name, table_name, arrayOfObjects, columns);
+ toast.dismiss({ containerId: "filtering" });
+ };
+
+ return (
+ setDrawerState(false)}
+ sx={{
+ overflowY: "hidden",
+ display: "flex",
+ flexDirection: "column",
+ height: "100%",
+ }}
+ >
+
+ {Object.keys(initialValues).length > 0 && (
+
+
+ {({
+ values,
+ handleChange,
+ handleBlur,
+ setFieldValue,
+ errors,
+ touched,
+ isSubmitting,
+ isValid,
+ dirty,
+ resetForm,
+ }) => (
+
+ )}
+
+
+ )}
+
+ );
+}
+
+export default FilterBody;
diff --git a/src/core/components/DataTable/filter/FilterBodyField.jsx b/src/core/components/DataTable/filter/FilterBodyField.jsx
new file mode 100644
index 0000000..a9bef12
--- /dev/null
+++ b/src/core/components/DataTable/filter/FilterBodyField.jsx
@@ -0,0 +1,113 @@
+import { useState } from "react";
+import FilterOptionList from "@/core/components/DataTable/filter/FilterOptionList";
+import CustomSelect from "@/core/components/DataTable/filter/fieldsType/CustomSelect";
+import CustomTextField from "@/core/components/DataTable/filter/fieldsType/CustomTextField";
+import CustomTextFieldRange from "@/core/components/DataTable/filter/fieldsType/CustomTextFieldRange";
+import CustomDatePickerRange from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange";
+import CustomDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker";
+import CustomSelectMultiple from "@/core/components/DataTable/filter/fieldsType/CustomSelectMultiple";
+
+const columnFilterModeOptionFa = {
+ equals: "برابر",
+ notEquals: "نابرابر",
+ contains: "شامل",
+ lessThan: "کوچکتر",
+ greaterThan: "بزرگتر",
+ fuzzy: "فازی",
+ between: "مابین",
+};
+
+function FilterBodyField({
+ column,
+ filterParameters,
+ handleChange,
+ handleBlur,
+ setFieldValue,
+ errors,
+ touched,
+ resetForm,
+}) {
+ const [anchorEl, setAnchorEl] = useState(null);
+ const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn;
+
+ const handleOpenFilterBox = (event) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ return (
+ <>
+ {filterParameters.datatype === "numeric" && filterParameters.filterFn === "between" ? (
+
+ ) : filterParameters.datatype === "numeric" &&
+ filterParameters.filterFn === "equals" &&
+ Array.isArray(column.columnSelectOption) ? (
+
+ ) : filterParameters.datatype === "date" && filterParameters.filterFn === "equals" ? (
+
+ ) : filterParameters.datatype === "date" && filterParameters.filterFn === "between" ? (
+
+ ) : filterParameters.datatype === "array" && filterParameters.filterFn === "equals" ? (
+
+ ) : (
+ setFieldValue(`${column.id}.value`, e.target.value)}
+ />
+ )}
+ {Array.isArray(column.columnFilterModeOptions) && (
+
+ )}
+
+ );
+}
+
+export default FilterBodyField;
diff --git a/src/core/components/DataTable/filter/FilterButton.jsx b/src/core/components/DataTable/filter/FilterButton.jsx
new file mode 100644
index 0000000..2d22501
--- /dev/null
+++ b/src/core/components/DataTable/filter/FilterButton.jsx
@@ -0,0 +1,20 @@
+"use client";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import { IconButton, Tooltip } from "@mui/material";
+
+function FilterButton({ drawerState, setDrawerState }) {
+ return (
+
+ {
+ setDrawerState(!drawerState);
+ }}
+ aria-label="filter table"
+ >
+
+
+
+ );
+}
+
+export default FilterButton;
diff --git a/src/core/components/DataTable/filter/FilterHeader.jsx b/src/core/components/DataTable/filter/FilterHeader.jsx
new file mode 100644
index 0000000..76980ce
--- /dev/null
+++ b/src/core/components/DataTable/filter/FilterHeader.jsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { Box, IconButton, Typography } from "@mui/material";
+import CancelIcon from "@mui/icons-material/Cancel";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+
+function FilterHeader({ setDrawerState }) {
+ return (
+
+
+
+
+ فیلتر
+
+
+ setDrawerState(false)}>
+
+
+
+ );
+}
+
+export default FilterHeader;
diff --git a/src/core/components/DataTable/filter/FilterOptionList.jsx b/src/core/components/DataTable/filter/FilterOptionList.jsx
new file mode 100644
index 0000000..e088832
--- /dev/null
+++ b/src/core/components/DataTable/filter/FilterOptionList.jsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { ListItem, Menu } from "@mui/material";
+import { useState } from "react";
+
+function FilterOptionList({
+ column,
+ filterType,
+ filterOption,
+ anchorEl,
+ columnFilterModeOptionFa,
+ setAnchorEl,
+ setFieldValue,
+}) {
+ const [selectedFilter, setSelectedFilter] = useState(filterType);
+
+ const handleChangeItem = (event, index) => {
+ setFieldValue(`${column.id}.value`, filterOption[index] === "between" ? ["", ""] : "");
+ setFieldValue(`${column.id}.filterFn`, filterOption[index]);
+ setSelectedFilter(filterOption[index]);
+ setAnchorEl(null);
+ };
+
+ const handleCloseFilterBox = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+
+ );
+}
+
+export default FilterOptionList;
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
new file mode 100644
index 0000000..fe5d2e0
--- /dev/null
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
+import { Typography } from "@mui/material";
+
+function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
+ return (
+
+ نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+
+ }
+ />
+ );
+}
+
+export default CustomDatePicker;
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
new file mode 100644
index 0000000..116af77
--- /dev/null
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
+
+function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslation, setFieldValue, errors, touched }) {
+ return (
+
+
+ نوع فیلتر: {defaultFilterTranslation} (تاریخ)
+
+ }
+ />
+
+
+ );
+}
+
+export default CustomDatePickerRange;
diff --git a/src/components/MuiDatePicker.jsx b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
similarity index 52%
rename from src/components/MuiDatePicker.jsx
rename to src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
index f2b0876..b4da7f5 100644
--- a/src/components/MuiDatePicker.jsx
+++ b/src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
@@ -1,38 +1,36 @@
-import { LocalizationProvider, MobileDateTimePicker } from "@mui/x-date-pickers";
+import React from "react";
+import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
import { AdapterDateFnsJalali } from "@mui/x-date-pickers/AdapterDateFnsJalali";
-import moment from "jalali-moment";
import { faIR } from "@mui/x-date-pickers/locales";
-import { Box, IconButton, InputAdornment, TextField } from "@mui/material";
+import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
-import { useState } from "react";
+import moment from "jalali-moment";
-export default function MuiDatePicker({label, name, formik, defaultValue, minDate, maxDate, onDateChange }) {
- const [pickerValue, setPickerValue] = useState(defaultValue ? new Date(defaultValue) : null);
+function MuiDatePicker({ value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
return (
-
+
- {
- const date = new Date(newValue);
- const formattedDate = moment(date)
- .locale("en")
- .format("YYYY-MM-DD HH:mm");
- formik.setFieldValue(name, formattedDate);
- onDateChange(formattedDate);
- setPickerValue(newValue);
+ {
+ const date = new Date(value);
+ const formattedDate = moment(date).locale("en").format("YYYY-MM-DD");
+ setFieldValue(name, formattedDate);
}}
+ minDate={minDate ? new Date(minDate) : null}
+ maxDate={maxDate ? new Date(maxDate) : null}
slotProps={{
textField: {
- placeholder: "تاریخ خود را وارد کنید",
- helperText: label,
+ error: error,
+ placeholder: placeholder,
InputProps: {
endAdornment: (
@@ -40,13 +38,13 @@ export default function MuiDatePicker({label, name, formik, defaultValue, minDat
size="small"
onClick={(event) => {
event.stopPropagation();
- formik.setFieldValue(name, "");
- setPickerValue(null);
+ setFieldValue(name, "");
}}
sx={{
color: "#bfbfbf",
- '&:hover': {
- backgroundColor: 'rgba(189, 189, 189, 0.1)',
+ "&:hover": {
+ backgroundColor: "rgba(189, 189, 189, 0.1)",
+ color: "#363434",
},
}}
>
@@ -57,11 +55,13 @@ export default function MuiDatePicker({label, name, formik, defaultValue, minDat
},
},
}}
- value={pickerValue}
- minDate={minDate ? new Date(minDate) : null}
- maxDate={maxDate ? new Date(maxDate) : null}
/>
+
+ {helperText ? helperText : ""}
+
);
}
+
+export default MuiDatePicker;
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
new file mode 100644
index 0000000..bd038e2
--- /dev/null
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
+
+function CustomSelect({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
+ const columnSelectOption = column.columnSelectOption;
+
+ return (
+
+ {column.header}
+ }
+ onChange={(e) => {
+ setFieldValue(`${column.id}.value`, e.target.value);
+ }}
+ >
+
+ {columnSelectOption.map((option) => (
+
+ ))}
+
+
+
+ نوع فیلتر: {defaultFilterTranslation}
+
+
+
+ );
+}
+
+export default CustomSelect;
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
new file mode 100644
index 0000000..130f98f
--- /dev/null
+++ b/src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
@@ -0,0 +1,60 @@
+"use client";
+
+import {
+ Box,
+ Chip,
+ FormControl,
+ FormHelperText,
+ InputLabel,
+ MenuItem,
+ OutlinedInput,
+ Select,
+ Typography,
+} from "@mui/material";
+
+function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, setFieldValue }) {
+ const columnSelectOption = column.columnSelectOption;
+
+ const getLabelForValue = (value) => {
+ const option = columnSelectOption.find((opt) => opt.value === value);
+ return option ? option.label : value;
+ };
+
+ return (
+
+
+ {column.header}
+
+
+
+
+ نوع فیلتر: {defaultFilterTranslation}
+
+
+
+ );
+}
+
+export default CustomSelectMultiple;
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
new file mode 100644
index 0000000..05b44ce
--- /dev/null
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
@@ -0,0 +1,40 @@
+import { InputAdornment, TextField, Typography } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
+
+function CustomTextField({
+ column,
+ filterParameters,
+ defaultFilterTranslation,
+ handleOpenFilterBox,
+ handleChange,
+ handleBlur,
+}) {
+ return (
+
+ نوع فیلتر: {defaultFilterTranslation}
+
+ }
+ variant="outlined"
+ size="normal"
+ sx={{ marginY: 1 }}
+ InputProps={{
+ endAdornment: (
+
+
+
+ ),
+ }}
+ />
+ );
+}
+
+export default CustomTextField;
diff --git a/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
new file mode 100644
index 0000000..fea4169
--- /dev/null
+++ b/src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
@@ -0,0 +1,59 @@
+import { Box, InputAdornment, TextField, Typography } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
+
+function CustomTextFieldRange({
+ column,
+ filterParameters,
+ defaultFilterTranslation,
+ handleOpenFilterBox,
+ handleChange,
+ handleBlur,
+ errors,
+ touched,
+}) {
+ return (
+
+ از {column.header}}
+ value={filterParameters.value[0]}
+ fullWidth
+ error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)}
+ helperText={
+
+ نوع فیلتر: {defaultFilterTranslation}
+
+ }
+ variant="outlined"
+ size="normal"
+ sx={{ marginY: 1, marginRight: 1 }}
+ />
+ تا {column.header}}
+ value={filterParameters.value[1]}
+ fullWidth
+ variant="outlined"
+ size="normal"
+ sx={{ marginY: 1 }}
+ InputProps={{
+ endAdornment: (
+
+
+
+ ),
+ }}
+ />
+
+ );
+}
+
+export default CustomTextFieldRange;
diff --git a/src/core/components/DataTable/filter/index.jsx b/src/core/components/DataTable/filter/index.jsx
new file mode 100644
index 0000000..8d26594
--- /dev/null
+++ b/src/core/components/DataTable/filter/index.jsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+import FilterButton from "@/core/components/DataTable/filter/FilterButton";
+import FilterBody from "@/core/components/DataTable/filter/FilterBody";
+
+function FilterColumn({ columns, user_id, page_name, table_name }) {
+ const [open, setOpen] = useState(false);
+
+ return (
+ <>
+
+
+
+ );
+}
+
+export default FilterColumn;
diff --git a/src/core/components/DataTable/head/TableHead.js b/src/core/components/DataTable/head/TableHead.js
index 055a4ed..39ee214 100644
--- a/src/core/components/DataTable/head/TableHead.js
+++ b/src/core/components/DataTable/head/TableHead.js
@@ -2,19 +2,10 @@ import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { TableHead } from "@mui/material";
import DataTable_TableHeadRow from "./TableHeadRow";
-const DataTable_TableHead = ({
- columnVirtualizer,
- table,
- ...rest
-}) => {
+const DataTable_TableHead = ({ columnVirtualizer, table, ...rest }) => {
const {
getState,
- options: {
- enableStickyHeader,
- layoutMode,
- muiTableHeadProps,
- positionToolbarAlertBanner,
- },
+ options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner },
refs: { tableHeadRef },
} = table;
const { isFullScreen, showAlertBanner } = getState();
@@ -37,27 +28,24 @@ const DataTable_TableHead = ({
}
}}
sx={(theme) => ({
- display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+ display: layoutMode?.startsWith("grid") ? "grid" : undefined,
opacity: 0.97,
- position: stickyHeader ? 'sticky' : 'relative',
- top: stickyHeader && layoutMode?.startsWith('grid') ? 0 : undefined,
+ position: stickyHeader ? "sticky" : "relative",
+ top: stickyHeader && layoutMode?.startsWith("grid") ? 0 : undefined,
zIndex: stickyHeader ? 2 : undefined,
- ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme)),
+ ...parseFromValuesOrFunc(tableHeadProps?.sx, theme),
})}
>
- {table
- .getHeaderGroups()
- .map((headerGroup) => (
-
- ))
- }
+ {table.getHeaderGroups().map((headerGroup, index) => (
+
+ ))}
);
-
-}
-export default DataTable_TableHead
\ No newline at end of file
+};
+export default DataTable_TableHead;
diff --git a/src/core/components/DataTable/head/TableHeadCell.js b/src/core/components/DataTable/head/TableHeadCell.js
index 78a9933..a0b8fc5 100644
--- a/src/core/components/DataTable/head/TableHeadCell.js
+++ b/src/core/components/DataTable/head/TableHeadCell.js
@@ -4,13 +4,7 @@ import { Box, TableCell } from "@mui/material";
import { MRT_TableHeadCellSortLabel } from "material-react-table";
import { useMemo } from "react";
-const DataTable_TableHeadCell = ({
- columnVirtualizer,
- header,
- staticColumnIndex,
- table,
- ...rest
-}) => {
+const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table, ...rest }) => {
const theme = useTheme();
const {
getState,
@@ -30,14 +24,7 @@ const DataTable_TableHeadCell = ({
refs: { tableHeadCellRefs },
setHoveredColumn,
} = table;
- const {
- columnSizingInfo,
- density,
- draggingColumn,
- grouping,
- hoveredColumn,
- showColumnFilters,
- } = getState();
+ const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters } = getState();
const { column } = header;
const { columnDef } = column;
const { columnDefType } = columnDef;
@@ -51,23 +38,17 @@ const DataTable_TableHeadCell = ({
...rest,
};
- const isColumnPinned =
- enableColumnPinning &&
- columnDef.columnDefType !== 'group' &&
- column.getIsPinned();
+ const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
const showColumnActions =
- (enableColumnActions || columnDef.enableColumnActions) &&
- columnDef.enableColumnActions !== false;
+ (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false;
const showDragHandle =
enableColumnDragging !== false &&
columnDef.enableColumnDragging !== false &&
(enableColumnDragging ||
(enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
- (enableGrouping &&
- columnDef.enableGrouping !== false &&
- !grouping.includes(column.id)));
+ (enableGrouping && columnDef.enableGrouping !== false && !grouping.includes(column.id)));
const headerPL = useMemo(() => {
let pl = 0;
@@ -80,41 +61,37 @@ const DataTable_TableHeadCell = ({
const draggingBorders = useMemo(() => {
const showResizeBorder =
columnSizingInfo.isResizingColumn === column.id &&
- columnResizeMode === 'onChange' &&
+ columnResizeMode === "onChange" &&
!header.subHeaders.length;
const borderStyle = showResizeBorder
? `2px solid ${draggingBorderColor} !important`
: draggingColumn?.id === column.id
- ? `1px dashed ${theme.palette.grey[500]}`
- : hoveredColumn?.id === column.id
- ? `2px dashed ${draggingBorderColor}`
- : undefined;
+ ? `1px dashed ${theme.palette.grey[500]}`
+ : hoveredColumn?.id === column.id
+ ? `2px dashed ${draggingBorderColor}`
+ : undefined;
if (showResizeBorder) {
- return columnResizeDirection === 'ltr'
- ? { borderRight: borderStyle }
- : { borderLeft: borderStyle };
+ return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
}
const draggingBorders = borderStyle
? {
- borderLeft: borderStyle,
- borderRight: borderStyle,
- borderTop: borderStyle,
- }
+ borderLeft: borderStyle,
+ borderRight: borderStyle,
+ borderTop: borderStyle,
+ }
: undefined;
return draggingBorders;
}, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
const handleDragEnter = (_e) => {
- if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+ if (enableGrouping && hoveredColumn?.id === "drop-zone") {
setHoveredColumn(null);
}
- if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
- setHoveredColumn(
- columnDef.enableColumnOrdering !== false ? column : null,
- );
+ if (enableColumnOrdering && draggingColumn && columnDefType !== "group") {
+ setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
}
};
@@ -124,7 +101,6 @@ const DataTable_TableHeadCell = ({
}
};
-
const HeaderElement =
parseFromValuesOrFunc(columnDef.Header, {
column,
@@ -132,12 +108,9 @@ const DataTable_TableHeadCell = ({
table,
}) ?? columnDef.header;
-
const columnRelativeDepth = header.depth - column.depth;
- if (
- columnRelativeDepth > 1
- ) {
+ if (columnRelativeDepth > 1) {
return null;
}
@@ -149,13 +122,7 @@ const DataTable_TableHeadCell = ({
return (
{
if (node) {
tableHeadCellRefs.current[column.id] = node;
- if (columnDefType !== 'group') {
+ if (columnDefType !== "group") {
columnVirtualizer?.measureElement?.(node);
}
}
}}
{...tableCellProps}
sx={(theme) => ({
- '& :hover': {
- '.MuiButtonBase-root': {
+ "& :hover": {
+ ".MuiButtonBase-root": {
opacity: 1,
},
},
- flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
- fontWeight: 'bold',
- overflow: 'visible',
+ flexDirection: layoutMode?.startsWith("grid") ? "column" : undefined,
+ fontWeight: "bold",
+ overflow: "visible",
p:
- density === 'compact'
- ? '0.5rem'
- : density === 'comfortable'
- ? columnDefType === 'display'
- ? '0.75rem'
- : '1rem'
- : columnDefType === 'display'
- ? '1rem 1.25rem'
- : '1.5rem',
- pb:
- columnDefType === 'display'
- ? 0
- : showColumnFilters || density === 'compact'
- ? '0.4rem'
- : '0.6rem',
+ density === "compact"
+ ? "0.5rem"
+ : density === "comfortable"
+ ? columnDefType === "display"
+ ? "0.75rem"
+ : "1rem"
+ : columnDefType === "display"
+ ? "1rem 1.25rem"
+ : "1.5rem",
+ pb: columnDefType === "display" ? 0 : showColumnFilters || density === "compact" ? "0.4rem" : "0.6rem",
pt:
- columnDefType === 'group' || density === 'compact'
- ? '0.25rem'
- : density === 'comfortable'
- ? '.75rem'
- : '1.25rem',
- userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
- verticalAlign: 'middle',
+ columnDefType === "group" || density === "compact"
+ ? "0.25rem"
+ : density === "comfortable"
+ ? ".75rem"
+ : "1.25rem",
+ userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined,
+ verticalAlign: "middle",
...getCommonMRTCellStyles({
column,
header,
@@ -212,72 +174,65 @@ const DataTable_TableHeadCell = ({
theme,
}),
...draggingBorders,
- }
- )}
+ })}
>
{tableCellProps.children ?? (
{HeaderElement}
- {(column.getCanSort() && columnDefType !== 'group') && (
-
+ {column.getCanSort() && columnDefType !== "group" && (
+
)}
)}
);
-
-}
-export default DataTable_TableHeadCell;
\ No newline at end of file
+};
+export default DataTable_TableHeadCell;
diff --git a/src/core/components/DataTable/head/TableHeadRow.js b/src/core/components/DataTable/head/TableHeadRow.js
index f876cf1..512147a 100644
--- a/src/core/components/DataTable/head/TableHeadRow.js
+++ b/src/core/components/DataTable/head/TableHeadRow.js
@@ -6,19 +6,15 @@ const DataTable_TableHeadRow = ({
columnVirtualizer,
headerGroup,
table,
+ index, // Add index prop
...rest
}) => {
const {
- options: {
- enableStickyHeader,
- layoutMode,
- mrtTheme: { baseBackgroundColor },
- muiTableHeadRowProps,
- },
+ options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
} = table;
+ const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
- const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
- columnVirtualizer ?? {};
+ const backgroundColor = index % 2 === 0 ? "#015688" : "#ff5c0f";
const tableRowProps = {
...parseFromValuesOrFunc(muiTableHeadRowProps, {
@@ -26,51 +22,37 @@ const DataTable_TableHeadRow = ({
table,
}),
...rest,
+ sx: (theme) => ({
+ // Access theme from the sx function
+ ...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
+ backgroundColor, // Apply background color
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+ position: enableStickyHeader && layoutMode === "semantic" ? "sticky" : "relative",
+ top: 0,
+ }),
};
return (
- ({
- backgroundColor: baseBackgroundColor,
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
- position:
- enableStickyHeader && layoutMode === 'semantic'
- ? 'sticky'
- : 'relative',
- top: 0,
- ...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
+
+ {virtualPaddingLeft && | }
+ {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
+ const header = columnVirtualizer
+ ? headerGroup.headers[headerOrVirtualHeader.index]
+ : headerOrVirtualHeader;
+
+ return header ? (
+
+ ) : null;
})}
- >
- {virtualPaddingLeft ? (
- |
- ) : null}
- {(virtualColumns ?? headerGroup.headers).map(
- (headerOrVirtualHeader, staticColumnIndex) => {
- let header = headerOrVirtualHeader;
-
- if (columnVirtualizer) {
- staticColumnIndex = (headerOrVirtualHeader)
- .index;
- header = headerGroup.headers[staticColumnIndex];
- }
-
- return header ? (
-
- ) : null;
- },
- )}
- {virtualPaddingRight ? (
- |
- ) : null}
+ {virtualPaddingRight && | }
);
+};
-}
-export default DataTable_TableHeadRow
\ No newline at end of file
+export default DataTable_TableHeadRow;
diff --git a/src/core/components/DataTable/index.js b/src/core/components/DataTable/index.js
index f453ade..f387d06 100644
--- a/src/core/components/DataTable/index.js
+++ b/src/core/components/DataTable/index.js
@@ -1,123 +1,12 @@
-import { useMaterialReactTable } from "material-react-table";
import DataTable_Main from "./Main";
-import { FA_DATATABLE_LOCALIZATION } from "./localization/fa/datatable";
-import CustomToolbar from "@/components/CustomToolbar";
-import useTableSetting from "@/lib/hooks/useTableSetting";
-import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
-
-const data = [
- {
- name: {
- firstName: 'John',
- lastName: 'Doe',
- },
- address: '261 Erdman Ford',
- city: 'East Daphne',
- state: 'Kentucky',
- },
- {
- name: {
- firstName: 'Jane',
- lastName: 'Doe',
- },
- address: '769 Dominic Grove',
- city: 'Columbus',
- state: 'Ohio',
- },
- {
- name: {
- firstName: 'Joe',
- lastName: 'Doe',
- },
- address: '566 Brakus Inlet',
- city: 'South Linda',
- state: 'West Virginia',
- },
- {
- name: {
- firstName: 'Kevin',
- lastName: 'Vandy',
- },
- address: '722 Emie Stream',
- city: 'Lincoln',
- state: 'Nebraska',
- },
- {
- name: {
- firstName: 'Joshua',
- lastName: 'Rolluffs',
- },
- address: '32188 Larkin Turnpike',
- city: 'Charleston',
- state: 'South Carolina',
- },
-];
+import DataTableProvider from "@/lib/contexts/DataTable";
const DataTable = (props) => {
- const { userId, pageName, tableName, columns, initialStateProps } = props
- const { settingStore, hideAction, sortAction } = useTableSetting();
- const flatColumns = flattenArrayOfObjects(columns,'columns')
-
- const onColumnVisibilityChange = (event) => {
- const settingValue = event();
- hideAction(userId, pageName, tableName, settingValue, flatColumns);
- };
- const onSortingChange = (event) => {
- const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
- sortAction(userId, pageName, tableName, settingValue, flatColumns);
- }
-
-
- const table = useMaterialReactTable({
- localization: FA_DATATABLE_LOCALIZATION,
- columns,
- data: data,
- // manualSorting: true,
- renderTopToolbarCustomActions: ({ table }) => (<>
-
- ),
- initialState: {
- density: 'compact',
- columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
- sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
- ...initialStateProps
- },
- state: {
- columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
- sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
- },
- muiTableHeadProps: {
- sx: {
- borderTop: "1px solid #e1e1e1",
- borderBottom: "2px solid #e1e1e1",
- }
- },
- muiTableHeadCellProps: {
- sx: {
- color: "primary.main",
- borderLeft: "1px solid #e1e1e1",
- "&:first-of-type": {
- borderLeft: "unset"
- }
- },
- },
- muiTableBodyCellProps: {
- sx: {
- borderLeft: "1px solid #e1e1e1",
- "&:first-of-type": {
- borderLeft: "unset"
- }
- },
- },
- onColumnVisibilityChange: onColumnVisibilityChange,
- onSortingChange: onSortingChange,
- ...props
- })
-
-
- return ;
+ return (
+
+
+
+ );
};
export default DataTable;
diff --git a/src/core/components/DataTable/localization/fa/datatable.js b/src/core/components/DataTable/localization/fa/datatable.js
index f80b7e0..e36f366 100644
--- a/src/core/components/DataTable/localization/fa/datatable.js
+++ b/src/core/components/DataTable/localization/fa/datatable.js
@@ -67,8 +67,7 @@ export const FA_DATATABLE_LOCALIZATION = {
rowsPerPage: "ردیف در هر صفحه",
save: "ذخیره",
search: "جستجو",
- selectedCountOfRowCountRowsSelected:
- "{selectedCount} از {rowCount} ردیف انتخاب شده",
+ selectedCountOfRowCountRowsSelected: "{selectedCount} از {rowCount} ردیف انتخاب شده",
select: "انتخاب",
showAll: "نمایش همه",
showAllColumns: "نمایش همه ستونها",
@@ -89,4 +88,4 @@ export const FA_DATATABLE_LOCALIZATION = {
unpin: "رها کردن",
unpinAll: "رها کردن همه",
unsorted: "بدون مرتب سازی",
-};
\ No newline at end of file
+};
diff --git a/src/core/components/DataTable/menus/ActionMenuItem.js b/src/core/components/DataTable/menus/ActionMenuItem.js
index 2b208b9..012fcc5 100644
--- a/src/core/components/DataTable/menus/ActionMenuItem.js
+++ b/src/core/components/DataTable/menus/ActionMenuItem.js
@@ -1,12 +1,6 @@
import { Box, IconButton, ListItemIcon, MenuItem } from "@mui/material";
-const DataTable_ActionMenuItem = ({
- icon,
- label,
- onOpenSubMenu,
- table,
- ...rest
-}) => {
+const DataTable_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
const {
options: {
icons: { ArrowRightIcon },
@@ -16,35 +10,29 @@ const DataTable_ActionMenuItem = ({
return (
);
-
-}
-export default DataTable_ActionMenuItem
\ No newline at end of file
+};
+export default DataTable_ActionMenuItem;
diff --git a/src/core/components/DataTable/menus/CellActionMenu.js b/src/core/components/DataTable/menus/CellActionMenu.js
index 36638e0..5b27ca9 100644
--- a/src/core/components/DataTable/menus/CellActionMenu.js
+++ b/src/core/components/DataTable/menus/CellActionMenu.js
@@ -2,10 +2,7 @@ import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { Menu } from "@mui/material";
import DataTable_ActionMenuItem from "./ActionMenuItem";
-const DataTable_CellActionMenu = ({
- table,
- ...rest
-}) => {
+const DataTable_CellActionMenu = ({ table, ...rest }) => {
const {
getState,
options: {
@@ -32,12 +29,11 @@ const DataTable_CellActionMenu = ({
};
const internalMenuItems = [
- (parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
- parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
- 'context-menu') && (
+ (parseFromValuesOrFunc(enableClickToCopy, cell) === "context-menu" ||
+ parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === "context-menu") && (
}
- key={'mrt-copy'}
+ key={"mrt-copy"}
label={localization.copy}
onClick={(event) => {
event.stopPropagation();
@@ -47,10 +43,10 @@ const DataTable_CellActionMenu = ({
table={table}
/>
),
- parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (
+ parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === "cell" && (
}
- key={'mrt-edit'}
+ key={"mrt-edit"}
label={localization.edit}
onClick={() => {
openEditingCell({ cell, table });
@@ -71,14 +67,13 @@ const DataTable_CellActionMenu = ({
};
const menuItems =
- columnDef.renderCellActionMenuItems?.(renderActionProps) ??
- renderCellActionMenuItems?.(renderActionProps);
+ columnDef.renderCellActionMenuItems?.(renderActionProps) ?? renderCellActionMenuItems?.(renderActionProps);
return (
(!!menuItems?.length || !!internalMenuItems?.length) && (
);
-}
-export default DataTable_BottomToolbar
\ No newline at end of file
+};
+export default DataTable_BottomToolbar;
diff --git a/src/core/components/DataTable/toolbar/LinearProgressBar.js b/src/core/components/DataTable/toolbar/LinearProgressBar.js
index cdcbc0a..74c465f 100644
--- a/src/core/components/DataTable/toolbar/LinearProgressBar.js
+++ b/src/core/components/DataTable/toolbar/LinearProgressBar.js
@@ -1,11 +1,7 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { Collapse, LinearProgress } from "@mui/material";
-const DataTable_LinearProgressBar = ({
- isTopToolbar,
- table,
- ...rest
-}) => {
+const DataTable_LinearProgressBar = ({ isTopToolbar, table, ...rest }) => {
const {
getState,
options: { muiLinearProgressProps },
@@ -26,19 +22,19 @@ const DataTable_LinearProgressBar = ({
mountOnEnter
sx={{
bottom: isTopToolbar ? 0 : undefined,
- position: 'absolute',
+ position: "absolute",
top: !isTopToolbar ? 0 : undefined,
- width: '100%',
+ width: "100%",
}}
unmountOnExit
>
);
-}
-export default DataTable_LinearProgressBar
\ No newline at end of file
+};
+export default DataTable_LinearProgressBar;
diff --git a/src/core/components/DataTable/toolbar/TablePagination.js b/src/core/components/DataTable/toolbar/TablePagination.js
index cd70fda..6492b41 100644
--- a/src/core/components/DataTable/toolbar/TablePagination.js
+++ b/src/core/components/DataTable/toolbar/TablePagination.js
@@ -1,16 +1,23 @@
import { flipIconStyles, getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
import { useTheme } from "@emotion/react";
-import { Box, IconButton, InputLabel, MenuItem, Pagination, PaginationItem, Select, Tooltip, Typography, useMediaQuery } from "@mui/material";
+import {
+ Box,
+ IconButton,
+ InputLabel,
+ MenuItem,
+ Pagination,
+ PaginationItem,
+ Select,
+ Tooltip,
+ Typography,
+ useMediaQuery,
+} from "@mui/material";
const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
-const DataTable_TablePagination = ({
- position = 'bottom',
- table,
- ...rest
-}) => {
+const DataTable_TablePagination = ({ position = "bottom", table, ...rest }) => {
const theme = useTheme();
- const isMobile = useMediaQuery('(max-width: 720px)');
+ const isMobile = useMediaQuery("(max-width: 720px)");
const {
getState,
@@ -64,26 +71,21 @@ const DataTable_TablePagination = ({
{showRowsPerPage && (
-
+
{localization.rowsPerPage}
@@ -92,22 +94,19 @@ const DataTable_TablePagination = ({
disableUnderline
disabled={disabled}
inputProps={{
- 'aria-label': localization.rowsPerPage,
- id: 'mrt-rows-per-page',
+ "aria-label": localization.rowsPerPage,
+ id: "mrt-rows-per-page",
}}
label={localization.rowsPerPage}
- onChange={(event) =>
- table.setPageSize(+(event.target.value))
- }
+ onChange={(event) => table.setPageSize(+event.target.value)}
sx={{ mb: 0 }}
value={pageSize}
variant="standard"
{...SelectProps}
>
{rowsPerPageOptions.map((option) => {
- const value = typeof option !== 'number' ? option.value : option;
- const label =
- typeof option !== 'number' ? option.label : `${option}`;
+ const value = typeof option !== "number" ? option.value : option;
+ const label = typeof option !== "number" ? option.label : `${option}`;
return (
SelectProps?.children ??
(SelectProps?.native ? (
@@ -124,7 +123,7 @@ const DataTable_TablePagination = ({
)}
- {paginationDisplayMode === 'pages' ? (
+ {paginationDisplayMode === "pages" ? (
- ) : paginationDisplayMode === 'default' ? (
+ ) : paginationDisplayMode === "default" ? (
<>
{`${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
- }-${lastRowIndex.toLocaleString()} ${localization.of
- } ${totalRowCount.toLocaleString()}`}
+ >{`${
+ lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+ }-${lastRowIndex.toLocaleString()} ${
+ localization.of
+ } ${totalRowCount.toLocaleString()}`}
{showFirstButton && (
@@ -213,5 +214,5 @@ const DataTable_TablePagination = ({
) : null}
);
-}
-export default DataTable_TablePagination
\ No newline at end of file
+};
+export default DataTable_TablePagination;
diff --git a/src/core/components/DataTable/toolbar/ToolbarInternalButtons.js b/src/core/components/DataTable/toolbar/ToolbarInternalButtons.js
index 606add0..9250b89 100644
--- a/src/core/components/DataTable/toolbar/ToolbarInternalButtons.js
+++ b/src/core/components/DataTable/toolbar/ToolbarInternalButtons.js
@@ -16,32 +16,29 @@ const DataTable_ToolbarInternalButtons = ({ table, ...rest }) => {
},
} = table;
-
return (
({
- alignItems: 'center',
- display: 'flex',
+ alignItems: "center",
+ display: "flex",
zIndex: 3,
- ...(parseFromValuesOrFunc(rest?.sx, theme)),
+ ...parseFromValuesOrFunc(rest?.sx, theme),
})}
>
{renderToolbarInternalActions?.({
table,
}) ?? (
- <>
- {enableFilters &&
- enableColumnFilters &&
- columnFilterDisplayMode !== 'popover' && (
-
- )}
- {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
-
- )}
-
- )}
+ <>
+ {enableFilters && enableColumnFilters && columnFilterDisplayMode !== "popover" && (
+
+ )}
+ {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
+
+ )}
+
+ )}
);
-}
-export default DataTable_ToolbarInternalButtons
\ No newline at end of file
+};
+export default DataTable_ToolbarInternalButtons;
diff --git a/src/core/components/DataTable/toolbar/TopToolbar.js b/src/core/components/DataTable/toolbar/TopToolbar.js
index 4eb0aba..b0e5297 100644
--- a/src/core/components/DataTable/toolbar/TopToolbar.js
+++ b/src/core/components/DataTable/toolbar/TopToolbar.js
@@ -3,8 +3,10 @@ import { Box, useMediaQuery } from "@mui/material";
import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination";
import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
+import FilterColumn from "@/core/components/DataTable/filter";
+import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
-const DataTable_TopToolbar = ({ table }) => {
+const DataTable_TopToolbar = ({ table, columns, table_url, user_id, page_name, table_name }) => {
const {
getState,
options: {
@@ -18,15 +20,12 @@ const DataTable_TopToolbar = ({ table }) => {
} = table;
const { isFullScreen, showGlobalFilter } = getState();
- const isMobile = useMediaQuery('(max-width:720px)');
- const isTablet = useMediaQuery('(max-width:1024px)');
+ const isMobile = useMediaQuery("(max-width:720px)");
+ const isTablet = useMediaQuery("(max-width:1024px)");
const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
- const stackAlertBanner =
- isMobile ||
- !!renderTopToolbarCustomActions ||
- (showGlobalFilter && isTablet);
+ const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || (showGlobalFilter && isTablet);
return (
{
}}
sx={(theme) => ({
...getCommonToolbarStyles({ table, theme }),
- position: isFullScreen ? 'sticky' : 'relative',
- top: isFullScreen ? '0' : undefined,
- ...(parseFromValuesOrFunc(toolbarProps?.sx, theme)),
+ position: isFullScreen ? "sticky" : "relative",
+ top: isFullScreen ? "0" : undefined,
+ ...parseFromValuesOrFunc(toolbarProps?.sx, theme),
})}
>
{renderTopToolbarCustomActions?.({ table }) ?? }
{enableToolbarInternalActions && (
+
+
)}
- {enablePagination &&
- ['both', 'top'].includes(positionPagination ?? '') && (
-
- )}
+ {enablePagination && ["both", "top"].includes(positionPagination ?? "") && (
+
+ )}
);
-}
+};
-export default DataTable_TopToolbar
\ No newline at end of file
+export default DataTable_TopToolbar;
diff --git a/src/core/components/NotificationDesign/AskForKeep.jsx b/src/core/components/NotificationDesign/AskForKeep.jsx
new file mode 100644
index 0000000..d4721bb
--- /dev/null
+++ b/src/core/components/NotificationDesign/AskForKeep.jsx
@@ -0,0 +1,61 @@
+"use client";
+
+import SaveIcon from "@mui/icons-material/Save";
+import { Box, Button, Typography } from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
+import { toast } from "react-toastify";
+
+function AskForKeep({ onSaveFilter }) {
+ const handleDismiss = () => {
+ toast.dismiss({ containerId: "filtering" });
+ };
+
+ return (
+
+
+
+ ذخیره سازی اطلاعات
+
+
+
+
+ آیا مایل به ذخیره فیلتر های اعمال شده برای دفعات بعد هستید؟
+
+
+
+ }
+ onClick={onSaveFilter}
+ sx={{
+ backgroundColor: "#155175",
+ ":hover": { backgroundColor: "#155175" },
+ boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
+ }}
+ >
+ ذخیره فیلتر
+
+
+
+ );
+}
+
+export default AskForKeep;
diff --git a/src/core/components/SidebarListItems.jsx b/src/core/components/SidebarListItems.jsx
index 9ffcac2..050d9a6 100644
--- a/src/core/components/SidebarListItems.jsx
+++ b/src/core/components/SidebarListItems.jsx
@@ -1,19 +1,22 @@
-import {Collapse, ListItem, ListItemButton, ListItemIcon, ListItemText} from "@mui/material";
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import WifiIcon from '@mui/icons-material/Wifi';
import SidebarSubitems from "@/core/components/SidebarSubitems";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import Link from "next/link";
-const SidebarListItems = ({menuItem, dispatch}) => {
- return(
+const SidebarListItems = ({ menuItem, dispatch }) => {
+ return (
<>
-
- {
- dispatch({type: "COLLAPSE_MENU", id: menuItem.id})
- }}>
+
+ {
+ dispatch({ type: "COLLAPSE_MENU", id: menuItem.id });
+ }}
+ >
{
color: "primary.main",
width: 40,
height: 24,
- pr: 2,
}}
>
{menuItem.icon}
-
- {menuItem.hasSubitems ? (menuItem.showSubitems ? : ) : null }
+
+ {menuItem.hasSubitems ? menuItem.showSubitems ? : : null}
- {
- menuItem.hasSubitems ? (menuItem.Subitems.map((subitem,index)=>{
- return(
-
- )
- })) : null
- }
+ {menuItem.hasSubitems ? (
+
+ {menuItem.Subitems.map((subitem, index) => {
+ return ;
+ })}
+
+ ) : null}
-
- )
-}
-export default SidebarListItems
\ No newline at end of file
+ );
+};
+export default SidebarListItems;
diff --git a/src/core/components/SidebarMenu.jsx b/src/core/components/SidebarMenu.jsx
index f7589c3..326dd11 100644
--- a/src/core/components/SidebarMenu.jsx
+++ b/src/core/components/SidebarMenu.jsx
@@ -1,170 +1,101 @@
-"use client"
-import {List} from "@mui/material";
+"use client";
import SidebarListItems from "@/core/components/SidebarListItems";
-import {useEffect, useReducer, useState} from "react";
-import {usePathname} from 'next/navigation'
-import SecurityIcon from '@mui/icons-material/Security';
-import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
-import AssessmentIcon from '@mui/icons-material/Assessment';
-import AirlineSeatReclineNormalIcon from "@mui/icons-material/AirlineSeatReclineNormal";
-import RepartitionIcon from '@mui/icons-material/Repartition';
-
-const data = [
- {
- id: "hello",
- type: "menu",
- route: "/hello",
- icon: ,
- selected: false,
- Subitems: [
- {
- id: "amin",
- route: "/s",
- icon: ,
- firstName: "amin",
- lastName: "ali",
- Subitems: [
- {
- id: "shahrokh", shahrokh: "shahrokh", type: "page", selected: false, route: "/dashbssoard", icon:
- },
- {
- id: "shasdasdsahrokh", shahrokh: "shahroasdasdkh", type: "page", selected: false, route: "/dashboardsd", icon:
- }
- ],
- hasSubitems: true,
- showSubitems: false,
- type: "menu",
- selected: false,
- },
- {
- id: "amir",
- route: "/dashboarsad",
- icon: ,
- firstName: "amir",
- lastName: "akbar",
- hasSubitems: false,
- showSubitems: false,
- selected: false,
- type: "page",
- },
- ],
- hasSubitems: true,
- showSubitems: false
- },
- {
- id: "hi",
- type: "menu",
- icon: ,
- route: "/hi",
- selected: false,
- Subitems: [
- {
- id: "ali",
- route: "/dashboardss",
- firstName: "ali",
- lastName: "ali",
- icon: ,
- hasSubitems: false,
- showSubitems: false,
- type: "page",
- selected: false,
- },
- {
- id: "akbar",
- route: "/akbar",
- firstName: "akbar",
- icon: ,
- lastName: "akbar",
- hasSubitems: false,
- showSubitems: false,
- type: "page",
- selected: false,
- },
- ],
- hasSubitems: true,
- showSubitems: false
- },
- {
- id: "hoo",
- type: "page",
- route: "/dashboard",
- icon: ,
- selected: false,
- hasSubitems: false,
- showSubitems: false
- }
-]
+import { usePermissions } from "@/lib/hooks/usePermissions";
+import { List } from "@mui/material";
+import { usePathname } from "next/navigation";
+import { useEffect, useReducer, useState } from "react";
+import { filterMenuItems } from "../utils/filterMenuItems";
+import { pageMenu } from "../utils/pageMenu";
function reducer(state, action) {
switch (action.type) {
+ case "UPDATE_MENU":
+ const _permissions = action.permissions || []
+ const filteredPageMenu = filterMenuItems(pageMenu, ['all', ..._permissions])
+ return filteredPageMenu
case "COLLAPSE_MENU":
- return state.map((item) => action.id == item.id ? {
- ...item, showSubitems: !item.showSubitems
- } : item)
- case "COLLAPSE_SUB_ITEMS" :
+ return state.map((item) =>
+ action.id == item.id
+ ? {
+ ...item,
+ showSubitems: !item.showSubitems,
+ }
+ : item
+ );
+ case "COLLAPSE_SUB_ITEMS":
return state.map((item) => {
- return item.hasSubitems ? {
- ...item, Subitems: item.Subitems.map((subitem) => action.id === subitem.id ? {
- ...subitem, showSubitems: !subitem.showSubitems
- } : subitem)
- } : item
- })
- case "COLLAPSE_SUB_SECOND_ITEMS" :
+ return item.hasSubitems
+ ? {
+ ...item,
+ Subitems: item.Subitems.map((subitem) =>
+ action.id === subitem.id
+ ? {
+ ...subitem,
+ showSubitems: !subitem.showSubitems,
+ }
+ : subitem
+ ),
+ }
+ : item;
+ });
+ case "COLLAPSE_SUB_SECOND_ITEMS":
return state.map((item) => {
- return item.hasSubitems ? {
- ...item, Subitems: item.Subitems.map((subitem) => {
- return subitem.hasSubitems ? {
- ...subitem,
- Subitems: subitem.Subitems.map((secondSubitem) => action.id === secondSubitem.id ? {
- ...secondSubitem, showSubitems: !secondSubitem.showSubitems
- } : secondSubitem)
- } : subitem
- })
- } : item
- })
+ return item.hasSubitems
+ ? {
+ ...item,
+ Subitems: item.Subitems.map((subitem) => {
+ return subitem.hasSubitems
+ ? {
+ ...subitem,
+ Subitems: subitem.Subitems.map((secondSubitem) =>
+ action.id === secondSubitem.id
+ ? {
+ ...secondSubitem,
+ showSubitems: !secondSubitem.showSubitems,
+ }
+ : secondSubitem
+ ),
+ }
+ : subitem;
+ }),
+ }
+ : item;
+ });
case "SELECTED":
return state.map((item) => {
- return item.type === "page" ? {
- ...item, selected: action.route === item.route,showSubitems: item.route === action.route
- } : item.Subitems && Array.isArray(item.Subitems) ? {
- ...item, Subitems: item.Subitems.map((subitem) => {
- return subitem.type === "page" ? {
- ...subitem, selected: action.route === subitem.route,showSubitems: subitem.route === action.route
- } : subitem.Subitems && Array.isArray(subitem.Subitems) ? {
- ...subitem, Subitems: subitem.Subitems.map((secondSubItem) => ({
- ...secondSubItem, selected: secondSubItem.route === action.route
- })),showSubitems: subitem.Subitems.some((secondSubItem) => secondSubItem.route === action.route),
- } : subitem
- }),showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
- } : item
+ return item.type === "page"
+ ? {
+ ...item,
+ selected: action.route === item.route,
+ showSubitems: item.route === action.route,
+ }
+ : item.Subitems && Array.isArray(item.Subitems)
+ ? {
+ ...item,
+ Subitems: item.Subitems.map((subitem) => {
+ return subitem.type === "page"
+ ? {
+ ...subitem,
+ selected: action.route === subitem.route,
+ showSubitems: subitem.route === action.route,
+ }
+ : subitem.Subitems && Array.isArray(subitem.Subitems)
+ ? {
+ ...subitem,
+ Subitems: subitem.Subitems.map((secondSubItem) => ({
+ ...secondSubItem,
+ selected: secondSubItem.route === action.route,
+ })),
+ showSubitems: subitem.Subitems.some(
+ (secondSubItem) => secondSubItem.route === action.route
+ ),
+ }
+ : subitem;
+ }),
+ showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
+ }
+ : item;
});
- // case "SELECTED":
- // return state.map((item) => {
- // return item.type === "page" ? {
- // ...item,
- // selected: action.route === item.route
- // } : item.Subitems && Array.isArray(item.Subitems) ? {
- // ...item,
- // Subitems: item.Subitems.map((subitem) => {
- // const updatedSubitem = subitem.type === "page" ? {
- // ...subitem,
- // selected: action.route === subitem.route
- // } : subitem.Subitems && Array.isArray(subitem.Subitems) ? {
- // ...subitem,
- // Subitems: subitem.Subitems.map((secondSubItem) => ({
- // ...secondSubItem,
- // selected: secondSubItem.route === action.route
- // })),
- // showSubitems: subitem.Subitems.some((secondSubItem) => secondSubItem.route === action.route),
- // } : subitem;
- //
- // console.log("Updated subitem:", updatedSubitem); // Log the updated subitem
- // return updatedSubitem;
- // }),
- // showSubitems: item.Subitems.some((subitem) => subitem.showSubitems),
- // } : item
- // });
-
default:
throw new Error();
@@ -172,30 +103,34 @@ function reducer(state, action) {
}
const SidebarMenu = () => {
- const [menuItems, dispatch] = useReducer(reducer, data);
- const pathname = usePathname()
+ const { data: userPermissions } = usePermissions()
+ const [menuItems, dispatch] = useReducer(reducer, pageMenu);
+ const pathname = usePathname();
const [selectedKey, setSelectedKey] = useState(null);
+
useEffect(() => {
- dispatch({type: "SELECTED", route: pathname});
+ dispatch({ type: 'UPDATE_MENU', permissions: userPermissions });
+ }, [userPermissions])
+
+ useEffect(() => {
+ dispatch({ type: "SELECTED", route: pathname });
setSelectedKey(pathname);
}, [pathname]);
useEffect(() => {
- selectedKey && document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
- behavior: "smooth", block: "center"
- });
+ selectedKey &&
+ document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
+ behavior: "smooth",
+ block: "center",
+ });
}, [selectedKey]);
return (
-
- {
- menuItems.map((menuItem) => {
- return (
-
- )
- })
- }
+
+ {menuItems.map((menuItem) => {
+ return ;
+ })}
- )
-}
-export default SidebarMenu
\ No newline at end of file
+ );
+};
+export default SidebarMenu;
diff --git a/src/core/components/SidebarSubitems.jsx b/src/core/components/SidebarSubitems.jsx
index 275befb..69418ea 100644
--- a/src/core/components/SidebarSubitems.jsx
+++ b/src/core/components/SidebarSubitems.jsx
@@ -1,74 +1,51 @@
-import {Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText} from "@mui/material";
-import {ExpandLess, ExpandMore} from "@mui/icons-material";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import Link from "next/link";
-const SidebarSubitems = ({subitem, dispatch}) => {
+const SidebarSubitems = ({ subitem, dispatch }) => {
return (
<>
-
-
- {
- dispatch({type: "COLLAPSE_SUB_ITEMS", id: subitem.id})
- }}>
-
- {subitem.icon}
-
-
- {subitem.hasSubitems ? (subitem.showSubitems ? : ) : null
- }
-
-
-
- {
- subitem.hasSubitems ? (subitem.Subitems.map((subSubitem, index) => {
- return (
-
-
-
- {
- dispatch({type: "COLLAPSE_SUB_SECOND_ITEMS", id: subSubitem.id})
- }}
- selected={subSubitem.selected}
- sx={{
- '&.Mui-selected': {
- backgroundColor: 'rgba(0, 0, 0, 0.05)',
- },
- }}
- >
-
- {subSubitem.icon}
-
-
-
-
-
-
- )
- })) : null
- }
+
+ {
+ dispatch({ type: "COLLAPSE_SUB_ITEMS", id: subitem.id });
+ }}
+ >
+
+ {subitem.icon}
+
+
+ {subitem.hasSubitems ? subitem.showSubitems ? : : null}
+
+
+
+ {subitem.hasSubitems ? (
+
+ {subitem.Subitems.map((subSubitem, index) => {
+ return ;
+ })}
+
+ ) : null}
+
- )
-}
-export default SidebarSubitems
\ No newline at end of file
+ );
+};
+export default SidebarSubitems;
diff --git a/src/core/components/Toasts/error.jsx b/src/core/components/Toasts/error.jsx
new file mode 100644
index 0000000..e93138b
--- /dev/null
+++ b/src/core/components/Toasts/error.jsx
@@ -0,0 +1,187 @@
+import { toast } from "react-toastify";
+import { Box, Typography } from "@mui/material";
+import { Dangerous } from "@mui/icons-material";
+
+export const errorServerToast = (toastContainer) =>
+ toast.error(
+ () => (
+
+
+
+
+ {"The request failed due to an internal error."}
+
+
+
+ ),
+ {
+ icon: false,
+ containerId: toastContainer,
+ autoClose: 5000,
+ hideProgressBar: true,
+ pauseOnHover: true,
+ closeOnClick: false,
+ draggable: true,
+ }
+ );
+
+export const errorUnauthorizedToast = (toastContainer) =>
+ toast.error(
+ () => (
+
+
+
+
+ {"The user is not authorized to make the request."}
+
+
+
+ ),
+ {
+ icon: false,
+ containerId: toastContainer,
+ autoClose: 3000,
+ hideProgressBar: true,
+ pauseOnHover: true,
+ closeOnClick: false,
+ draggable: true,
+ }
+ );
+
+export const errorLogicToast = (message, toastContainer) =>
+ toast.error(
+ () => (
+
+
+
+
+
+ {message ||
+ "The request was well-formed but was unable to be followed due to semantic errors."}
+
+
+
+
+ ),
+ {
+ icon: false,
+ containerId: toastContainer,
+ autoClose: false,
+ closeOnClick: false,
+ draggable: false,
+ }
+ );
+
+export const errorValidationToast = (message, toastContainer) =>
+ toast.error(
+ () => (
+
+
+
+
+
+ {message ||
+ "The request was well-formed but was unable to be followed due to semantic errors."}
+
+
+
+
+ ),
+ {
+ icon: false,
+ containerId: toastContainer,
+ autoClose: false,
+ closeOnClick: false,
+ draggable: false,
+ }
+ );
+
+export const errorTooManyToast = (toastContainer) =>
+ toast.error(
+ () => (
+
+
+
+
+
+ {"Too many requests have been sent within a given time span."}
+
+
+
+
+ ),
+ {
+ icon: false,
+ containerId: toastContainer,
+ autoClose: false,
+ closeOnClick: false,
+ draggable: false,
+ }
+ );
+
+export const errorClientToast = (toastContainer) =>
+ toast.error(
+ () => (
+
+
+
+
+
+ {
+ "The API request is invalid or improperly formed. Consequently, the API server could not understand the request."
+ }
+
+
+
+
+ ),
+ {
+ icon: false,
+ containerId: toastContainer,
+ autoClose: false,
+ closeOnClick: false,
+ draggable: false,
+ }
+ );
diff --git a/src/core/components/Toasts/success.jsx b/src/core/components/Toasts/success.jsx
new file mode 100644
index 0000000..36023c6
--- /dev/null
+++ b/src/core/components/Toasts/success.jsx
@@ -0,0 +1,33 @@
+import { toast } from "react-toastify";
+import { Box, Typography } from "@mui/material";
+import { Beenhere } from "@mui/icons-material";
+
+export const successToast = (toastContainer) =>
+ toast.success(
+ () => (
+
+
+
+
+ {"Your operation was successful"}
+
+
+
+ ),
+ {
+ icon: false,
+ containerId: toastContainer,
+ autoClose: 3000,
+ hideProgressBar: true,
+ pauseOnHover: true,
+ closeOnClick: false,
+ draggable: true,
+ }
+ );
diff --git a/src/core/middlewares/withAuth.js b/src/core/middlewares/withAuth.js
new file mode 100644
index 0000000..216b55b
--- /dev/null
+++ b/src/core/middlewares/withAuth.js
@@ -0,0 +1,22 @@
+"use client";
+import { useAuth } from "@/lib/contexts/auth";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+function WithAuthMiddleware({ children }) {
+ const router = useRouter();
+ const pathName = usePathname();
+ const { isAuth, initAuthState } = useAuth();
+
+ useEffect(() => {
+ if (!initAuthState) return;
+ if (!isAuth) {
+ router.replace(`${process.env.NEXT_PUBLIC_API_URL}/login?_back=${encodeURIComponent(pathName)}`);
+ }
+ }, [isAuth, initAuthState]);
+
+ if (!initAuthState || !isAuth) return null;
+ return <>{children};
+}
+
+export default WithAuthMiddleware;
diff --git a/src/core/utils/cacheRtl.js b/src/core/utils/cacheRtl.js
index bf8c809..1393e2e 100644
--- a/src/core/utils/cacheRtl.js
+++ b/src/core/utils/cacheRtl.js
@@ -1,16 +1,16 @@
-'use client'
+"use client";
import createCache from "@emotion/cache";
-import {prefixer} from "stylis";
+import { prefixer } from "stylis";
import stylisRTLPlugin from "stylis-plugin-rtl";
-import {CacheProvider} from "@emotion/react";
+import { CacheProvider } from "@emotion/react";
const cache = createCache({
- key: 'mui-rtl',
+ key: "mui-rtl",
stylisPlugins: [prefixer, stylisRTLPlugin],
});
const cacheProviderRtl = (props) => {
return {props.children};
-}
+};
-export default cacheProviderRtl
\ No newline at end of file
+export default cacheProviderRtl;
diff --git a/src/core/utils/errorResponse.js b/src/core/utils/errorResponse.js
new file mode 100644
index 0000000..1802581
--- /dev/null
+++ b/src/core/utils/errorResponse.js
@@ -0,0 +1,60 @@
+"use client";
+import { toast } from "react-toastify";
+import {
+ errorClientToast,
+ errorLogicToast,
+ errorServerToast,
+ errorTooManyToast,
+ errorUnauthorizedToast,
+ errorValidationToast,
+} from "@/core/components/toasts/error";
+
+const isServerError = (status) => status >= 500 && status <= 599;
+const isClientError = (status) => status >= 400 && status <= 499;
+
+const errorServer = (response, notification, toastContainer) => {
+ if (notification) errorServerToast(toastContainer);
+};
+
+const errorClient = (response, notification, toastContainer) => {
+ switch (response.status) {
+ case 401:
+ if (notification) errorUnauthorizedToast(toastContainer);
+ break;
+ case 422:
+ if ("type" in response.data) {
+ if (Array.isArray(response.data.message)) {
+ response.data.message.map((item) => {
+ if (notification) errorLogicToast(item, toastContainer);
+ });
+ } else {
+ if (notification) errorLogicToast(response.data.message, toastContainer);
+ }
+ break;
+ }
+ if (notification) {
+ const errorsMap = Object.keys(response.data.errors);
+ const errorsArray = response.data.errors;
+
+ errorsMap.map((item, index) => {
+ errorValidationToast(errorsArray[item][0], toastContainer);
+ });
+ }
+ break;
+ case 429:
+ if (notification) errorTooManyToast(toastContainer);
+ break;
+ default:
+ if (notification) errorClientToast(toastContainer);
+ break;
+ }
+};
+
+export const errorResponse = (response, notification, toastContainer) => {
+ if (notification) toast.dismiss({ container: toastContainer });
+ if (isServerError(response.status)) {
+ errorServer(response, notification, toastContainer);
+ } else if (isClientError(response.status)) {
+ errorClient(response, notification, toastContainer);
+ }
+};
diff --git a/src/core/utils/filterMenuItems.js b/src/core/utils/filterMenuItems.js
new file mode 100644
index 0000000..7bceeb5
--- /dev/null
+++ b/src/core/utils/filterMenuItems.js
@@ -0,0 +1,17 @@
+export function filterMenuItems(items, _permissions = []) {
+ return items.reduce((acc, item) => {
+ if (item.permissions) {
+ if (item.permissions.some(permission => _permissions.includes(permission))) {
+ acc.push(item);
+ }
+ } else if (item.hasSubitems) {
+ const filteredSubItems = filterMenuItems(item.Subitems, _permissions);
+ if (filteredSubItems.length > 0) {
+ acc.push({ ...item, Subitems: filteredSubItems });
+ }
+ } else {
+ acc.push(item);
+ }
+ return acc;
+ }, []);
+}
\ No newline at end of file
diff --git a/src/core/utils/flattenArrayOfObjects.js b/src/core/utils/flattenArrayOfObjects.js
index 4dd4612..5b1564c 100644
--- a/src/core/utils/flattenArrayOfObjects.js
+++ b/src/core/utils/flattenArrayOfObjects.js
@@ -7,4 +7,4 @@ export const flattenArrayOfObjects = (array, key) => {
}
return acc;
}, []);
-};
\ No newline at end of file
+};
diff --git a/src/core/utils/pageMenu.js b/src/core/utils/pageMenu.js
new file mode 100644
index 0000000..9750e63
--- /dev/null
+++ b/src/core/utils/pageMenu.js
@@ -0,0 +1,378 @@
+import { AirlineSeatReclineNormal, Assessment, Repartition, Security, SpaceDashboard } from "@mui/icons-material";
+
+export const pageMenu = [
+ {
+ id: "dashboard",
+ label: "پیشخوان",
+ type: "page",
+ route: "/dashboard",
+ icon: ,
+ permissions: ["all"]
+ },
+ {
+ id: "userManagement",
+ label: "مدیریت کاربران",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/user_management",
+ icon: ,
+ permissions: ['full-user-management', 'limited-user-management']
+ },
+ {
+ id: "projectsManagment",
+ label: "پروژه های راهداری",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "projectsManagmentFinance",
+ label: "ثبت قرارداد و پروژه",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/rahdari_projects/finance",
+ icon: ,
+ permissions: ['show-contract', 'show-contract-province'],
+ },
+ {
+ id: "projectsManagmentList",
+ label: "لیست پروژه ها",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/rahdari_projects/projects_list",
+ icon: ,
+ permissions: ["all"]
+ },
+ {
+ id: "projectsManagmentProposal",
+ label: "پروژه های پیشنهادی",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/rahdari_projects/proposal",
+ icon: ,
+ permissions: ['show-proposal', 'show-proposal-province']
+ },
+ {
+ id: "projectsManagmentLawmaker",
+ label: "درخواست نمایندگان",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/rahdari_projects/lawmakers",
+ icon: ,
+ permissions: ['show-lawmaker', 'show-lawmaker-province']
+ },
+ {
+ id: "projectsManagmentMap",
+ label: "پراکندگی بر روی نقشه",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=rahdari_projects",
+ icon: ,
+ permissions: ["all"]
+ },
+ ],
+ },
+ {
+ id: "roadItemManagment",
+ label: "فعالیت های روزانه",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadItemManagmentSupervisor",
+ label: "ارزیابی",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadItemManagmentSupervisorCartable",
+ label: "کارتابل",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/supervisor/cartable",
+ permissions: ['show-road-item-supervise-cartable', 'show-road-item-supervise-cartable-province']
+ },
+ ],
+ },
+ {
+ id: "roadItemManagmentOparation",
+ label: "عملیات",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadItemManagmentOparationCreate",
+ label: "ثبت فعالیت",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/operator/create",
+ permissions: ['create-road-item']
+ },
+ {
+ id: "roadItemManagmentOparationCartable",
+ label: "کارتابل",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/operator/cartable",
+ permissions: ['create-road-item']
+ },
+ ],
+ },
+ {
+ id: "roadItemManagmentMap",
+ label: "پراکندگی بر روی نقشه",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=road_items",
+ icon: ,
+ permissions: ['show-road-item-supervise-cartable', 'show-road-item-supervise-cartable-province', 'create-road-item']
+ },
+ {
+ id: "roadItemManagmentReport",
+ label: "گزارش ها",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_items/report",
+ icon: ,
+ permissions: ['show-road-item-supervise-cartable', 'show-road-item-supervise-cartable-province', 'create-road-item']
+ },
+ ],
+ },
+ {
+ id: "roadPatrolManagment",
+ label: "گشت راهداری و ترابری",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadPatrolManagmentSupervisor",
+ label: "ارزیابی",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadPatrolManagmentSupervisorCartable",
+ label: "کارتابل",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/road_patrols/supervisor/cartable",
+ permissions: ['show-road-patrol-supervise-cartable', 'show-road-patrol-supervise-cartable-province']
+ },
+ ],
+ },
+ {
+ id: "roadPatrolManagmentOparation",
+ label: "عملیات",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadPatrolManagmentOparationCreate",
+ label: "ثبت اقدام",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_patrols/operator/create",
+ permissions: ['add-road-patrol']
+ },
+ {
+ id: "roadPatrolManagmentOparationCartable",
+ label: "کارتابل",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_patrols/operator/cartable",
+ permissions: ['add-road-patrol']
+ },
+ ],
+ },
+ {
+ id: "roadPatrolManagmentMap",
+ label: "پراکندگی بر روی نقشه",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=road_patrols",
+ icon: ,
+ permissions: ['add-road-patrol', 'show-road-patrol-supervise-cartable', 'show-road-patrol-supervise-cartable-province']
+ },
+ {
+ id: "roadPatrolManagmentReport",
+ label: "گزارش ها",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_patrols/report",
+ icon: ,
+ permissions: ['add-road-patrol', 'show-road-patrol-supervise-cartable', 'show-road-patrol-supervise-cartable-province']
+ },
+ ],
+ },
+ {
+ id: "safetyAndPrivacyManagment",
+ label: "نگهداری حریم راه",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "safetyAndPrivacyManagmentOparation",
+ label: "عملیات",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "safetyAndPrivacyManagmentOparationCreate",
+ label: "ثبت فعالیت",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/safety_and_privacy/operator/first_step",
+ permissions: ['add-safety-and-privacy']
+ },
+ {
+ id: "safetyAndPrivacyManagmentOparationCartable",
+ label: "کارتابل",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/safety_and_privacy/operator/cartable",
+ permissions: ['show-safety-and-privacy-operator-cartable', 'show-safety-and-privacy-operator-cartable-province', 'show-safety-and-privacy-operator-cartable-edarate-shahri']
+ },
+ ],
+ },
+ {
+ id: "safetyAndPrivacyManagmentMap",
+ label: "پراکندگی بر روی نقشه",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=safety_and_privacy",
+ icon: ,
+ permissions: ['show-safety-and-privacy-operator-cartable', 'show-safety-and-privacy-operator-cartable-province',
+ 'show-safety-and-privacy-operator-cartable-edarate-shahri', 'add-safety-and-privacy']
+ },
+ {
+ id: "safetyAndPrivacyManagmentReport",
+ label: "گزارش ها",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/safety_and_privacy/report",
+ icon: ,
+ permissions: ['show-safety-and-privacy-operator-cartable', 'show-safety-and-privacy-operator-cartable-province',
+ 'show-safety-and-privacy-operator-cartable-edarate-shahri', 'add-safety-and-privacy']
+ },
+ ],
+ },
+ {
+ id: "roadObservationsManagment",
+ label: "واکنش سریع",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadObservationsManagmentSupervisor",
+ label: "ارزیابی",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadObservationsManagmentSupervisorCartable",
+ label: "کارتابل",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_observations/supervisor/cartable",
+ permissions: ['supervise-fast-react', 'supervise-fast-react-province']
+ },
+ ],
+ },
+ {
+ id: "roadObservationsManagmentList",
+ label: "رسیدگی به شکایات",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_observations",
+ icon: ,
+ permissions: ['show-fast-react', 'show-fast-react-province', 'show-fast-react-edarate-shahri']
+ },
+ {
+ id: "roadObservationsManagmentOparation",
+ label: "عملیات",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "roadObservationsManagmentOparationCartable",
+ label: "کارتابل",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_observations/operator/cartable",
+ permissions: ['show-fast-react', 'show-fast-react-province', 'show-fast-react-edarate-shahri']
+ },
+ ],
+ },
+ {
+ id: "roadObservationsManagmentMap",
+ label: "پراکندگی بر روی نقشه",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=road_observations",
+ icon: ,
+ permissions: ["all"]
+ },
+ {
+ id: "roadObservationsManagmentReport",
+ label: "گزارش ها",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/road_observations/report/index",
+ icon: ,
+ permissions: ["all"]
+ },
+ ],
+ },
+ {
+ id: "winterCampManagment",
+ label: "قرارگاه زمستانی",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "winterCampManagmentBlocking",
+ label: "محور های انسدادی",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/winter_camp",
+ icon: ,
+ permissions: ['show-camp', 'show-camp-province']
+ },
+ {
+ id: "winterCampManagmentFirstRing",
+ label: "محور های حلقه اول",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=camp",
+ icon: ,
+ permissions: ['show-camp', 'show-camp-province']
+ },
+ {
+ id: "winterCampManagmentReport",
+ label: "گزارش ها",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/map?type=campNew",
+ icon: ,
+ permissions: ['show-camp', 'show-camp-province']
+ },
+ ],
+ },
+ {
+ id: "receiptManagment",
+ label: "خسارات وارده بر ابنیه فنی و تاسیسات راه",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "receiptManagmentOparation",
+ label: "عملیات",
+ type: "menu",
+ icon: ,
+ hasSubitems: true,
+ Subitems: [
+ {
+ id: "receiptManagmentOparationCartable",
+ label: "کارتابل",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/receipt",
+ permissions: ["all"]
+ },
+ ],
+ },
+ {
+ id: "receiptManagmentReport",
+ label: "گزارش ها",
+ type: "page",
+ route: process.env.NEXT_PUBLIC_API_URL + "/v2/receipt/report",
+ icon: ,
+ permissions: ["all"]
+ },
+ ],
+ },
+];
diff --git a/src/core/utils/routes.js b/src/core/utils/routes.js
new file mode 100644
index 0000000..81ac016
--- /dev/null
+++ b/src/core/utils/routes.js
@@ -0,0 +1,6 @@
+const api = process.env.NEXT_PUBLIC_API_URL;
+
+export const GET_USER_ROUTE = api + "/webapi/user/get-permission";
+export const GET_LOGIN_ROUTE = api + "/login_dev";
+
+export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";
\ No newline at end of file
diff --git a/src/core/utils/successRequest.js b/src/core/utils/successRequest.js
new file mode 100644
index 0000000..d23776a
--- /dev/null
+++ b/src/core/utils/successRequest.js
@@ -0,0 +1,10 @@
+"use client";
+import { toast } from "react-toastify";
+import { successToast } from "@/core/components/toasts/success";
+
+export const successRequest = (notification, toastContainer) => {
+ if (notification) {
+ toast.dismiss({ container: toastContainer });
+ successToast(toastContainer);
+ }
+};
diff --git a/src/core/utils/theme.js b/src/core/utils/theme.js
index 3abbb52..f32031b 100644
--- a/src/core/utils/theme.js
+++ b/src/core/utils/theme.js
@@ -1,12 +1,22 @@
-'use client'
+"use client";
import { createTheme } from "@mui/material";
const theme = createTheme({
- direction: 'rtl',
+ direction: "rtl",
typography: {
fontFamily: `IRANSansFaNum, sans-serif`,
- fontSize: 12
+ fontSize: 12,
+ },
+ palette: {
+ primary: {
+ main: "#2070af",
+ contrastText: "#fff",
+ },
+ primary2: {
+ main: "#015688",
+ contrastText: "#fff",
+ },
},
});
-export default theme
\ No newline at end of file
+export default theme;
diff --git a/src/core/utils/utils.js b/src/core/utils/utils.js
index 98e0252..a0a320d 100644
--- a/src/core/utils/utils.js
+++ b/src/core/utils/utils.js
@@ -1,162 +1,120 @@
import { alpha, darken } from "@mui/material";
-export const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
+export const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, "_");
-export const parseFromValuesOrFunc = (
- fn,
- arg
-) => (fn instanceof Function ? fn(arg) : fn);
+export const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
-export const getCommonToolbarStyles = ({
- table,
-}) => ({
- alignItems: 'flex-start',
- backgroundColor: table.options.mrtTheme.baseBackgroundColor,
- display: 'grid',
- flexWrap: 'wrap-reverse',
- minHeight: '3.5rem',
- overflow: 'hidden',
- position: 'relative',
- transition: 'all 150ms ease-in-out',
- zIndex: 1,
+export const getCommonToolbarStyles = ({ table }) => ({
+ alignItems: "flex-start",
+ backgroundColor: table.options.mrtTheme.baseBackgroundColor,
+ display: "grid",
+ flexWrap: "wrap-reverse",
+ minHeight: "3.5rem",
+ overflow: "hidden",
+ position: "relative",
+ transition: "all 150ms ease-in-out",
+ zIndex: 1,
});
-export const getCommonTooltipProps = (
- placement,
-) => ({
- disableInteractive: true,
- enterDelay: 500,
- enterNextDelay: 500,
- placement,
+export const getCommonTooltipProps = (placement) => ({
+ disableInteractive: true,
+ enterDelay: 500,
+ enterNextDelay: 500,
+ placement,
});
export const flipIconStyles = (theme) =>
- theme.direction === 'rtl'
- ? { style: { transform: 'scaleX(-1)' } }
- : undefined;
+ theme.direction === "rtl" ? { style: { transform: "scaleX(-1)" } } : undefined;
-export const getCommonPinnedCellStyles = ({
- column,
- table,
- theme,
-}) => {
- const { baseBackgroundColor } = table.options.mrtTheme;
- const isPinned = column?.getIsPinned();
+export const getCommonPinnedCellStyles = ({ column, table, theme }) => {
+ const { baseBackgroundColor } = table.options.mrtTheme;
+ const isPinned = column?.getIsPinned();
- return {
- '&[data-pinned="true"]': {
- '&:before': {
- backgroundColor: alpha(
- darken(
- baseBackgroundColor,
- theme.palette.mode === 'dark' ? 0.05 : 0.01,
- ),
- 0.97,
- ),
- boxShadow: column
- ? isPinned === 'left' && column.getIsLastColumn(isPinned)
- ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
- : isPinned === 'right' && column.getIsFirstColumn(isPinned)
- ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
- : undefined
- : undefined,
- ...commonCellBeforeAfterStyles,
- },
- },
- };
+ return {
+ '&[data-pinned="true"]': {
+ "&:before": {
+ backgroundColor: alpha(darken(baseBackgroundColor, theme.palette.mode === "dark" ? 0.05 : 0.01), 0.97),
+ boxShadow: column
+ ? isPinned === "left" && column.getIsLastColumn(isPinned)
+ ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+ : isPinned === "right" && column.getIsFirstColumn(isPinned)
+ ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
+ : undefined
+ : undefined,
+ ...commonCellBeforeAfterStyles,
+ },
+ },
+ };
};
-export const getCommonMRTCellStyles = ({
- column,
- header,
- table,
- tableCellProps,
- theme,
-}) => {
- const {
- getState,
- options: { enableColumnVirtualization, layoutMode },
- } = table;
- const { draggingColumn } = getState();
- const { columnDef } = column;
- const { columnDefType } = columnDef;
+export const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme }) => {
+ const {
+ getState,
+ options: { enableColumnVirtualization, layoutMode },
+ } = table;
+ const { draggingColumn } = getState();
+ const { columnDef } = column;
+ const { columnDefType } = columnDef;
- const isColumnPinned =
- columnDef.columnDefType !== 'group' && column.getIsPinned();
+ const isColumnPinned = columnDef.columnDefType !== "group" && column.getIsPinned();
- const widthStyles = {
- minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
- header?.id ?? column.id,
- )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
- width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
- header?.id ?? column.id,
- )}-size) * 1px)`,
- };
+ const widthStyles = {
+ minWidth: `max(calc(var(--${header ? "header" : "col"}-${parseCSSVarId(
+ header?.id ?? column.id
+ )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
+ width: `calc(var(--${header ? "header" : "col"}-${parseCSSVarId(header?.id ?? column.id)}-size) * 1px)`,
+ };
- if (layoutMode === 'grid') {
- widthStyles.flex = `${[0, false].includes(columnDef.grow)
- ? 0
- : `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
- header?.id ?? column.id,
- )}-size)`
- } 0 auto`;
- } else if (layoutMode === 'grid-no-grow') {
- widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
- }
-
- const pinnedStyles = isColumnPinned
- ? {
- ...getCommonPinnedCellStyles({ column, table, theme }),
- left:
- isColumnPinned === 'left'
- ? `${column.getStart('left')}px`
- : undefined,
- opacity: 0.97,
- position: 'sticky',
- right:
- isColumnPinned === 'right'
- ? `${column.getAfter('right')}px`
- : undefined,
+ if (layoutMode === "grid") {
+ widthStyles.flex = `${
+ [0, false].includes(columnDef.grow)
+ ? 0
+ : `var(--${header ? "header" : "col"}-${parseCSSVarId(header?.id ?? column.id)}-size)`
+ } 0 auto`;
+ } else if (layoutMode === "grid-no-grow") {
+ widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
}
- : {};
- return {
- backgroundColor: 'inherit',
- backgroundImage: 'inherit',
- display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
- justifyContent:
- columnDefType === 'group'
- ? 'center'
- : layoutMode?.startsWith('grid')
- ? tableCellProps.align
- : undefined,
- opacity:
- table.getState().draggingColumn?.id === column.id ||
- table.getState().hoveredColumn?.id === column.id
- ? 0.5
- : 1,
- position: 'relative',
- transition: enableColumnVirtualization
- ? 'none'
- : `padding 150ms ease-in-out`,
- zIndex:
- column.getIsResizing() || draggingColumn?.id === column.id
- ? 2
- : columnDefType !== 'group' && isColumnPinned
- ? 1
- : 0,
- ...pinnedStyles,
- ...widthStyles,
- ...(parseFromValuesOrFunc(tableCellProps?.sx, theme)),
- };
+ const pinnedStyles = isColumnPinned
+ ? {
+ ...getCommonPinnedCellStyles({ column, table, theme }),
+ left: isColumnPinned === "left" ? `${column.getStart("left")}px` : undefined,
+ opacity: 0.97,
+ position: "sticky",
+ right: isColumnPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+ }
+ : {};
+
+ return {
+ backgroundColor: "inherit",
+ backgroundImage: "inherit",
+ display: layoutMode?.startsWith("grid") ? "flex" : undefined,
+ justifyContent:
+ columnDefType === "group" ? "center" : layoutMode?.startsWith("grid") ? tableCellProps.align : undefined,
+ opacity:
+ table.getState().draggingColumn?.id === column.id || table.getState().hoveredColumn?.id === column.id
+ ? 0.5
+ : 1,
+ position: "relative",
+ transition: enableColumnVirtualization ? "none" : `padding 150ms ease-in-out`,
+ zIndex:
+ column.getIsResizing() || draggingColumn?.id === column.id
+ ? 2
+ : columnDefType !== "group" && isColumnPinned
+ ? 1
+ : 0,
+ ...pinnedStyles,
+ ...widthStyles,
+ ...parseFromValuesOrFunc(tableCellProps?.sx, theme),
+ };
};
export const commonCellBeforeAfterStyles = {
- content: '""',
- height: '100%',
- left: 0,
- position: 'absolute',
- top: 0,
- width: '100%',
- zIndex: -1,
-};
\ No newline at end of file
+ content: '""',
+ height: "100%",
+ left: 0,
+ position: "absolute",
+ top: 0,
+ width: "100%",
+ zIndex: -1,
+};
diff --git a/src/lib/contexts/DataTable.js b/src/lib/contexts/DataTable.js
new file mode 100644
index 0000000..fb03fd7
--- /dev/null
+++ b/src/lib/contexts/DataTable.js
@@ -0,0 +1,11 @@
+import { createContext, useState } from "react";
+
+export const DataTableContext = createContext();
+
+const DataTableProvider = ({ children }) => {
+ const [filterData, setFilterData] = useState({});
+
+ return {children};
+};
+
+export default DataTableProvider;
diff --git a/src/lib/contexts/auth.js b/src/lib/contexts/auth.js
new file mode 100644
index 0000000..f2df0e6
--- /dev/null
+++ b/src/lib/contexts/auth.js
@@ -0,0 +1,82 @@
+"use client";
+import { createContext, useCallback, useContext, useEffect, useReducer } from "react";
+import useRequest from "../hooks/useRequest";
+import { GET_USER_ROUTE } from "@/core/utils/routes";
+
+const initAuth = {
+ initAuthState: false,
+ isAuth: false,
+ user: {},
+};
+
+const authReducer = (state, action) => {
+ switch (action.type) {
+ case "CLEAR_USER":
+ return { ...state, user: {} };
+ case "CHANGE_USER":
+ return { ...state, user: action.user };
+ case "CHANGE_AUTH_STATE":
+ return { ...state, isAuth: action.isAuth };
+ case "CHANGE_INIT_AUTH":
+ return { ...state, initAuthState: action.initAuthState };
+ default:
+ return state;
+ }
+};
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+ const [state, dispatch] = useReducer(authReducer, initAuth);
+ const request = useRequest();
+
+ const clearUser = useCallback(() => {
+ dispatch({ type: "CLEAR_USER" });
+ }, []);
+
+ const changeUser = useCallback((user) => {
+ dispatch({ type: "CHANGE_USER", user });
+ }, []);
+
+ const changeAuthState = useCallback((isAuth) => {
+ dispatch({ type: "CHANGE_AUTH_STATE", isAuth });
+ }, []);
+
+ const changeInitAuth = useCallback((initAuthState) => {
+ dispatch({ type: "CHANGE_INIT_AUTH", initAuthState });
+ }, []);
+
+ const getUser = useCallback(async () => {
+ try {
+ const { data } = await request(GET_USER_ROUTE, "get");
+ changeUser(data);
+ changeAuthState(true);
+ changeInitAuth(true);
+ } catch (error) {
+ if (error.response && error.response.status === 401) {
+ clearUser();
+ changeAuthState(false);
+ changeInitAuth(true);
+ }
+ }
+ }, [clearUser, changeUser, changeAuthState, changeInitAuth]);
+
+ useEffect(() => {
+ getUser();
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/src/lib/contexts/tableSetting.jsx b/src/lib/contexts/tableSetting.js
similarity index 55%
rename from src/lib/contexts/tableSetting.jsx
rename to src/lib/contexts/tableSetting.js
index 0c2262d..3611df9 100644
--- a/src/lib/contexts/tableSetting.jsx
+++ b/src/lib/contexts/tableSetting.js
@@ -1,27 +1,26 @@
-'use client'
-import {createContext, useCallback, useEffect, useState} from "react";
-import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
+"use client";
+import { createContext, useCallback, useEffect, useState } from "react";
export const TableSettingContext = createContext();
-export const TableSettingProvider = ({children}) => {
+export const TableSettingProvider = ({ children }) => {
const [settingStore, setSettingStore] = useState({});
useEffect(() => {
- const _localStorage = localStorage.getItem("_setting-app")
+ const _localStorage = localStorage.getItem("_setting-app");
if (_localStorage) {
- setSettingStore(JSON.parse(_localStorage))
+ setSettingStore(JSON.parse(_localStorage));
}
}, []);
const hideAction = useCallback((user_id, page_name, table_name, settingValue, columns) => {
updateSettingStorage(user_id, page_name, table_name, "hides", settingValue, columns);
- }, [])
+ }, []);
const sortAction = useCallback((user_id, page_name, table_name, settingValue, columns) => {
updateSettingStorage(user_id, page_name, table_name, "sorts", settingValue, columns);
- }, [])
+ }, []);
const filterAction = (user_id, page_name, table_name, settingValue, columns) => {
updateSettingStorage(user_id, page_name, table_name, "filters", settingValue, columns);
- }
+ };
const updateSettingStorage = (user_id, page_name, table_name, settingType, settingValue, columns) => {
const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
const userSettings = prevLocalStorage[user_id] || {};
@@ -31,7 +30,7 @@ export const TableSettingProvider = ({children}) => {
if (settingType === "sorts" || settingType === "filters") {
newSettings = [...settingValue];
} else {
- newSettings = {...tableSettings[settingType] || {}, ...settingValue};
+ newSettings = { ...(tableSettings[settingType] || {}), ...settingValue };
}
const updatedLocalStorage = {
...prevLocalStorage,
@@ -41,19 +40,38 @@ export const TableSettingProvider = ({children}) => {
...pageSettings,
[table_name]: {
...tableSettings,
- [settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings},
- summary: SummaryTextMessage({
- ...tableSettings,
- [settingType]: Array.isArray(settingValue) ? [...newSettings] : {...newSettings},
- }, columns)
+ [settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings },
+ summary: SummaryTextMessage(
+ {
+ ...tableSettings,
+ [settingType]: Array.isArray(settingValue) ? [...newSettings] : { ...newSettings },
+ },
+ columns
+ ),
},
},
},
};
localStorage.setItem("_setting-app", JSON.stringify(updatedLocalStorage));
setSettingStore(updatedLocalStorage);
- }
-
+ };
+ const refactorAction = (user_id, page_name, table_name) => {
+ const prevLocalStorage = JSON.parse(localStorage.getItem("_setting-app")) || {};
+ const userSettings = prevLocalStorage[user_id] || {};
+ const pageSettings = userSettings[page_name] || {};
+ const refactorData = {
+ ...prevLocalStorage,
+ [user_id]: {
+ ...userSettings,
+ [page_name]: {
+ ...pageSettings,
+ [table_name]: {},
+ },
+ },
+ };
+ localStorage.setItem("_setting-app", JSON.stringify(refactorData));
+ setSettingStore(refactorData);
+ };
const SummaryTextMessage = (values, columns) => {
let SummaryText = "";
let HideText = "";
@@ -61,38 +79,35 @@ export const TableSettingProvider = ({children}) => {
let SortText = "";
if (values.sorts && values.sorts.length > 0) {
- const _list = []
+ const _list = [];
for (const sort of values.sorts) {
- const _column = columns.find(column => column.id == sort.id)
- if (_column)
- _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`)
+ const _column = columns.find((column) => column.id == sort.id);
+ if (_column) _list.push(`${_column.header}` + `(${sort.desc ? "نزولی" : "صعودی"})`);
}
- if (_list.length > 0)
- SortText = " مرتب شده بر اساس : " + _list.join(", ")
+ if (_list.length > 0) SortText = " مرتب شده بر اساس : " + _list.join(", ");
}
if (values.filters && values.filters.length > 0) {
- const _list = []
+ const _list = [];
for (const filter of values.filters) {
- const _column = columns.find(column => column.id == filter.id)
- if (_column)
- _list.push(`${_column.header}`)
+ const _column = columns.find((column) => column.id == filter.id);
+ if (_column) _list.push(`${_column.header}`);
}
- if (_list.length > 0)
- FilterText = " فیلتر شده بر اساس : " + _list.join(", ")
+ if (_list.length > 0) FilterText = " فیلتر شده بر اساس : " + _list.join(", ");
}
if (values.hides) {
- const hidesArray = Object.entries(values.hides).map((e) => ({id: e[0], value: e[1]}))
+ const hidesArray = Object.entries(values.hides).map((e) => ({
+ id: e[0],
+ value: e[1],
+ }));
if (hidesArray.length > 0) {
- const _list = []
+ const _list = [];
for (const hide of hidesArray) {
- if (hide.value) continue
- const _column = columns.find(c => c.id == hide.id)
- if (_column)
- _list.push(_column.header)
+ if (hide.value) continue;
+ const _column = columns.find((c) => c.id == hide.id);
+ if (_column) _list.push(_column.header);
}
- if (_list.length > 0)
- HideText = "ستون های مخفی شده : " + _list.join(", ");
+ if (_list.length > 0) HideText = "ستون های مخفی شده : " + _list.join(", ");
}
}
@@ -113,7 +128,7 @@ export const TableSettingProvider = ({children}) => {
}
}
if (FilterText) {
- SummaryText += FilterText
+ SummaryText += FilterText;
}
}
@@ -122,8 +137,15 @@ export const TableSettingProvider = ({children}) => {
return (
+ value={{
+ settingStore,
+ hideAction,
+ sortAction,
+ filterAction,
+ refactorAction,
+ }}
+ >
{children}
);
-};
\ No newline at end of file
+};
diff --git a/src/lib/hooks/useDataTable.js b/src/lib/hooks/useDataTable.js
new file mode 100644
index 0000000..e396908
--- /dev/null
+++ b/src/lib/hooks/useDataTable.js
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { DataTableContext } from "@/lib/contexts/DataTable";
+
+const useTableSetting = () => {
+ const { filterData, setFilterData } = useContext(DataTableContext);
+ return { filterData, setFilterData };
+};
+
+export default useTableSetting;
diff --git a/src/lib/hooks/usePermissions.js b/src/lib/hooks/usePermissions.js
new file mode 100644
index 0000000..4f54b41
--- /dev/null
+++ b/src/lib/hooks/usePermissions.js
@@ -0,0 +1,18 @@
+import { GET_PERMISSIONS_ROUTE } from "@/core/utils/routes";
+import useSWR from "swr";
+import useRequest from "./useRequest";
+
+export const usePermissions = () => {
+ const request = useRequest()
+
+ const fetcher = async (url) => {
+ try {
+ const response = await request(url)
+ return response.data.data
+ } catch (error) {
+ throw new Error();
+ }
+ };
+
+ return useSWR(GET_PERMISSIONS_ROUTE, fetcher, { keepPreviousData: true });
+}
\ No newline at end of file
diff --git a/src/lib/hooks/useRequest.js b/src/lib/hooks/useRequest.js
new file mode 100644
index 0000000..2e35512
--- /dev/null
+++ b/src/lib/hooks/useRequest.js
@@ -0,0 +1,46 @@
+import { errorResponse } from "@/core/utils/errorResponse";
+import { successRequest } from "@/core/utils/successRequest";
+import axios from "axios";
+
+const defaultOptions = {
+ data: {},
+ requestOptions: {
+ headers: {},
+ },
+ notification: {
+ show: true,
+ success: false,
+ failed: true,
+ },
+};
+
+const useRequest = (initOptions) => {
+ const _options = Object.assign({}, defaultOptions, initOptions);
+
+ return async (url = "", method = "get", options) => {
+ const mergedOptions = Object.assign({}, _options, options);
+
+ try {
+ const response = await axios({
+ url,
+ method,
+ data: method === "get" ? null : mergedOptions.data,
+ withCredentials: true,
+ ...mergedOptions.requestOptions,
+ });
+ successRequest(mergedOptions.notification.show && mergedOptions.notification.success, "request_data");
+ return response;
+ } catch (error) {
+ if (error.response) {
+ errorResponse(
+ error.response,
+ mergedOptions.notification.show && mergedOptions.notification.failed,
+ "request_data"
+ );
+ }
+ throw error;
+ }
+ };
+};
+
+export default useRequest;
diff --git a/src/lib/hooks/useTableSetting.js b/src/lib/hooks/useTableSetting.js
new file mode 100644
index 0000000..6588446
--- /dev/null
+++ b/src/lib/hooks/useTableSetting.js
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { TableSettingContext } from "../contexts/tableSetting";
+
+const useTableSetting = () => {
+ const { settingStore, hideAction, sortAction, filterAction, refactorAction } = useContext(TableSettingContext);
+ return { settingStore, hideAction, sortAction, filterAction, refactorAction };
+};
+
+export default useTableSetting;
diff --git a/src/lib/hooks/useTableSetting.jsx b/src/lib/hooks/useTableSetting.jsx
deleted file mode 100644
index 14d9d4e..0000000
--- a/src/lib/hooks/useTableSetting.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { TableSettingContext } from "../contexts/tableSetting";
-
-const useTableSetting = () => {
- const { settingStore, hideAction, sortAction, filterAction } =
- useContext(TableSettingContext);
- return { settingStore, hideAction, sortAction, filterAction };
-};
-
-export default useTableSetting;
|