RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-08-18 11:11:58 +03:30
parent f7c93d0404
commit f2e199ee8a
40 changed files with 733 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/components/DataTable/Main.js
View File

@@ -32,13 +32,11 @@ const DataTable_Main = (props) => {
const fetchUrl = useMemo(() => {
const isValueEmpty = (value) => {
if (Array.isArray(value)) {
return value.length === 0 || value.every(v => v === "");
return value.length === 0 || value.every((v) => v === "");
}
return value === "" || value === null || value === undefined;
};
const filteredFilterData = Object.values(filterData).filter(
(filter) => !isValueEmpty(filter.value),
);
const filteredFilterData = Object.values(filterData).filter((filter) => !isValueEmpty(filter.value));
const params = new URLSearchParams();
params.set("start", `${pagination.pageIndex * pagination.pageSize}`);

72
src/core/components/DataTable/body/TableBodyCell.js
View File

@@ -1,10 +1,10 @@
import { getCommonMRTCellStyles, parseFromValuesOrFunc } from '@/core/utils/utils';
import { useTheme } from '@emotion/react';
import { Skeleton, TableCell } from '@mui/material';
import { isCellEditable, openEditingCell } from 'material-react-table';
import { memo, useEffect, useMemo, useState } from 'react';
import DataTable_CopyButton from '../buttons/CopyButton';
import DataTable_TableBodyCellValue from './TableBodyCellValue';
import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
import { useTheme } from "@emotion/react";
import { Skeleton, TableCell } from "@mui/material";
import { isCellEditable, openEditingCell } from "material-react-table";
import { memo, useEffect, useMemo, useState } from "react";
import DataTable_CopyButton from "../buttons/CopyButton";
import DataTable_TableBodyCellValue from "./TableBodyCellValue";
const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table, ...rest }) => {
const theme = useTheme();
@@ -82,10 +82,10 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
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 };
@@ -93,18 +93,18 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
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]);
@@ -178,8 +178,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
"&: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",
@@ -188,8 +188,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
cursor: isRightClickable
? "context-menu"
: isEditable && editDisplayMode === "cell"
? "pointer"
: "inherit",
? "pointer"
: "inherit",
outline: actionCell?.id === cell.id ? `1px solid ${theme.palette.grey[500]}` : undefined,
outlineOffset: "-1px",
overflow: "hidden",
@@ -199,12 +199,12 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
? "0 0.5rem"
: "0.5rem"
: density === "comfortable"
? columnDefType === "display"
? "0.5rem 0.75rem"
: "1rem"
: columnDefType === "display"
? "1rem 1.25rem"
: "1.5rem",
? 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",
@@ -215,7 +215,7 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
theme,
}),
...draggingBorders,
backgroundColor: baseBackgroundColor
backgroundColor: baseBackgroundColor,
})}
>
{tableCellProps.children ?? (
@@ -225,8 +225,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
) : showSkeletons !== false && (isLoading || showSkeletons) ? (
<Skeleton animation="wave" height={20} width={skeletonWidth} {...skeletonProps} />
) : columnDefType === "display" &&
(["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
!row.getIsGrouped()) ? (
(["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
!row.getIsGrouped()) ? (
columnDef.Cell?.({
cell,
column,

41
src/core/components/DataTable/body/TableBodyRow.js
View File

@@ -91,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.2)}`
: `${darken(baseBackgroundColor, 0.2)}`
? `${lighten(baseBackgroundColor, 0.2)}`
: `${darken(baseBackgroundColor, 0.2)}`
: undefined;
return (
@@ -126,9 +126,9 @@ const DataTable_TableBodyRow = ({
sx={(theme) => ({
"&:hover td:after": cellHighlightColorHover
? {
backgroundColor: alpha(cellHighlightColorHover, 0.3),
...commonCellBeforeAfterStyles,
}
backgroundColor: alpha(cellHighlightColorHover, 0.3),
...commonCellBeforeAfterStyles,
}
: undefined,
bottom:
!virtualRow && bottomPinnedIndex !== undefined && isRowPinned
@@ -140,24 +140,25 @@ const DataTable_TableBodyRow = ({
position: virtualRow
? "absolute"
: rowPinningDisplayMode?.includes("sticky") && isRowPinned
? "sticky"
: "relative",
? "sticky"
: "relative",
td: {
...getCommonPinnedCellStyles({ table, theme }),
},
"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,
: undefined,
transition: virtualRow ? "none" : "all 150ms ease-in-out",
width: "100%",
zIndex: rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
@@ -181,11 +182,11 @@ const DataTable_TableBodyRow = ({
};
return cell ? (
memoMode === "cells" &&
cell.column.columnDef.columnDefType === "data" &&
!draggingColumn &&
!draggingRow &&
editingCell?.id !== cell.id &&
editingRow?.id !== row.id ? (
cell.column.columnDef.columnDefType === "data" &&
!draggingColumn &&
!draggingRow &&
editingCell?.id !== cell.id &&
editingRow?.id !== row.id ? (
<Memo_DataTable_TableBodyCell key={cell.id} {...props} />
) : (
<DataTable_TableBodyCell key={cell.id} {...props} />

22
src/core/components/DataTable/filter/FilterBodyField.jsx
View File

@@ -18,15 +18,15 @@ const columnFilterModeOptionFa = {
};
function FilterBodyField({
column,
filterParameters,
handleChange,
handleBlur,
setFieldValue,
errors,
touched,
resetForm,
}) {
column,
filterParameters,
handleChange,
handleBlur,
setFieldValue,
errors,
touched,
resetForm,
}) {
const [anchorEl, setAnchorEl] = useState(null);
const defaultFilterTranslation = columnFilterModeOptionFa[filterParameters.filterFn] || filterParameters.filterFn;
@@ -48,8 +48,8 @@ function FilterBodyField({
touched={touched}
/>
) : filterParameters.datatype === "numeric" &&
filterParameters.filterFn === "equals" &&
Array.isArray(column.columnSelectOption) ? (
filterParameters.filterFn === "equals" &&
Array.isArray(column.columnSelectOption) ? (
<CustomSelect
column={column}
filterParameters={filterParameters}

17
src/core/components/DataTable/filter/FilterOptionList.jsx
View File

@@ -4,15 +4,14 @@ import { ListItem, Menu } from "@mui/material";
import { useState } from "react";
function FilterOptionList({
column,
filterType,
filterOption,
anchorEl,
columnFilterModeOptionFa,
setAnchorEl,
setFieldValue,
}) {
column,
filterType,
filterOption,
anchorEl,
columnFilterModeOptionFa,
setAnchorEl,
setFieldValue,
}) {
const [selectedFilter, setSelectedFilter] = useState(filterType);
const handleChangeItem = (event, index) => {

43
src/core/components/DataTable/head/TableHeadCell.js
View File

@@ -67,20 +67,20 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
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 };
}
const draggingBorders = borderStyle
? {
borderLeft: borderStyle,
borderRight: borderStyle,
borderTop: borderStyle,
}
borderLeft: borderStyle,
borderRight: borderStyle,
borderTop: borderStyle,
}
: undefined;
return draggingBorders;
@@ -151,19 +151,19 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
density === "compact"
? "0.5rem"
: density === "comfortable"
? columnDefType === "display"
? "0.75rem"
: "1rem"
: columnDefType === "display"
? "1rem 1.25rem"
: "1.5rem",
? 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",
? ".75rem"
: "1.25rem",
userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined,
verticalAlign: "middle",
...getCommonMRTCellStyles({
@@ -188,8 +188,8 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
columnDefType === "group" || tableCellProps?.align === "center"
? "center"
: column.getCanResize()
? "space-between"
: "flex-start",
? "space-between"
: "flex-start",
position: "relative",
width: "100%",
}}
@@ -218,7 +218,7 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
textAlign: "start",
color: "#fff",
fontWeight: "400",
whiteSpace: "nowrap"
whiteSpace: "nowrap",
}}
>
{HeaderElement}
@@ -226,9 +226,10 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
{column.getCanSort() && columnDefType !== "group" && (
<MRT_TableHeadCellSortLabel
sx={{
width: 20, '& .MuiTableSortLabel-icon': {
width: 20,
"& .MuiTableSortLabel-icon": {
color: `#fff !important`,
}
},
}}
header={header}
table={table}

9
src/core/components/DataTable/hide/HideBody.jsx
View File

@@ -37,12 +37,7 @@ function HideBody({ columns, drawerState, setDrawerState }) {
<ScrollBox>
<Box sx={{ px: 1, py: 2, display: "flex", flexDirection: "column" }}>
{columns.map((column) => (
<HideBodyField
key={column.id}
column={column}
hideData={hideData}
setHideData={setHideData}
/>
<HideBodyField key={column.id} column={column} hideData={hideData} setHideData={setHideData} />
))}
</Box>
</ScrollBox>
@@ -50,4 +45,4 @@ function HideBody({ columns, drawerState, setDrawerState }) {
);
}
export default HideBody;
export default HideBody;

10
src/core/components/DataTable/hide/HideBodyField.jsx
View File

@@ -22,7 +22,7 @@ const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
function HideBodyField({ column, hideData, setHideData }) {
const handleCheckboxChange = () => {
setHideData(prevData => {
setHideData((prevData) => {
const updateHideData = (data, id) => {
if (data.hasOwnProperty(id)) {
return { ...data, [id]: !data[id] };
@@ -44,11 +44,7 @@ function HideBodyField({ column, hideData, setHideData }) {
if (typeof hideData[column.id] === "boolean") {
return (
<Box sx={{ display: "flex", alignItems: "center" }}>
<Checkbox
checked={hideData[column.id]}
onChange={handleCheckboxChange}
name={column.id}
/>
<Checkbox checked={hideData[column.id]} onChange={handleCheckboxChange} name={column.id} />
<Typography variant="subtitle1">{column.header}</Typography>
</Box>
);
@@ -77,4 +73,4 @@ function HideBodyField({ column, hideData, setHideData }) {
);
}
export default HideBodyField;
export default HideBodyField;

2
src/core/components/DataTable/hide/HideOrShowAll.jsx
View File

@@ -67,4 +67,4 @@ function HideOrShowAll({ hideData, setHideData }) {
);
}
export default HideOrShowAll;
export default HideOrShowAll;

2
src/core/components/DataTable/reset/ResetStorage.jsx
View File

@@ -19,4 +19,4 @@ function ResetStorage({ user_id, page_name, table_name }) {
);
}
export default ResetStorage;
export default ResetStorage;

48
src/core/components/DataTable/table/Paper.js
View File

@@ -5,17 +5,17 @@ import DataTable_TopToolbar from "../toolbar/TopToolbar";
import DataTable_TableContainer from "./TableContainer";
const DataTable_Paper = ({
table,
table_name,
columns,
user_id,
page_name,
mutate,
need_filter,
table_url,
table_title,
...rest
}) => {
table,
table_name,
columns,
user_id,
page_name,
mutate,
need_filter,
table_url,
table_title,
...rest
}) => {
const {
getState,
options: {
@@ -50,19 +50,19 @@ const DataTable_Paper = ({
style={{
...(isFullScreen
? {
bottom: 0,
height: "100dvh",
left: 0,
margin: 0,
maxHeight: "100dvh",
maxWidth: "100dvw",
padding: 0,
position: "fixed",
right: 0,
top: 0,
width: "100dvw",
zIndex: 999,
}
bottom: 0,
height: "100dvh",
left: 0,
margin: 0,
maxHeight: "100dvh",
maxWidth: "100dvw",
padding: 0,
position: "fixed",
right: 0,
top: 0,
width: "100dvw",
zIndex: 999,
}
: {}),
...paperProps?.style,
}}

49
src/core/components/DataTable/toolbar/TopToolbar.js
View File

@@ -8,16 +8,16 @@ import ResetStorage from "@/core/components/DataTable/reset/ResetStorage";
import HideColumn from "@/core/components/DataTable/hide";
const DataTable_TopToolbar = ({
mutate,
need_filter,
table,
columns,
table_url,
user_id,
page_name,
table_name,
table_title,
}) => {
mutate,
need_filter,
table,
columns,
table_url,
user_id,
page_name,
table_name,
table_title,
}) => {
const {
getState,
options: {
@@ -70,13 +70,21 @@ const DataTable_TopToolbar = ({
width: "100%",
}}
>
<Box sx={{
display: "flex",
alignItems: "center",
order: { xs: 2, sm: 1 },
}}>{renderTopToolbarCustomActions?.({ table })}</Box>
<Typography sx={{ textAlign: "center", order: { xs: 1, sm: 2 }, width: { xs: "100%", sm: "unset" } }}
fontWeight={600}>{table_title || ""}</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
order: { xs: 2, sm: 1 },
}}
>
{renderTopToolbarCustomActions?.({ table })}
</Box>
<Typography
sx={{ textAlign: "center", order: { xs: 1, sm: 2 }, width: { xs: "100%", sm: "unset" } }}
fontWeight={600}
>
{table_title || ""}
</Typography>
{enableToolbarInternalActions && (
<Box
sx={{
@@ -88,15 +96,14 @@ const DataTable_TopToolbar = ({
order: 3,
}}
>
<ResetStorage user_id={user_id}
page_name={page_name}
table_name={table_name} />
<ResetStorage user_id={user_id} page_name={page_name} table_name={table_name} />
<UpdateTable mutate={mutate} />
<HideColumn
columns={table.options.columns}
user_id={user_id}
page_name={page_name}
table_name={table_name} />
table_name={table_name}
/>
{need_filter && (
<FilterColumn
columns={columns}