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

Merge branch 'feature/mohammad_improve_table' into 'develop'

Browse Source 
Feature/mohammad improve table

See merge request witel-front-end/rms!6
This commit is contained in:
AmirHossein Mahmoodi
2024-05-18 12:07:34 +00:00
parent ef551d0cf3 0111ad5db3
commit a383c8510e
11 changed files with 272 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/home/index.jsx
View File

@@ -17,6 +17,7 @@ function HomeComponent() {
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
inputType: "textField",
enableClickToCopy: true,
columnFilterModeOptions: [
"equals",
@@ -30,7 +31,8 @@ function HomeComponent() {
id: "lastName",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
filterFn: "equals",
inputType: "textField",
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -38,14 +40,6 @@ function HomeComponent() {
],
},
],
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains"
],
},
{
accessorKey: 'address',
@@ -53,7 +47,8 @@ function HomeComponent() {
id: "address",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
filterFn: "notEquals",
inputType: "textField",
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -66,14 +61,15 @@ function HomeComponent() {
id: "city",
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
filterFn: "equals",
inputType: "textField",
columnFilterModeOptions: [
"equals",
"notEquals",
"contains",
"lessThan",
"greaterThan",
"between",
"fuzzy"
],
},
@@ -81,10 +77,10 @@ function HomeComponent() {
accessorKey: 'state',
header: 'وضعیت',
id: "state",
text: 'نام',
enableColumnFilter: true,
datatype: "text",
filterFn: "contains",
inputType: "textField",
columnFilterModeOptions: [
"equals",
"notEquals",
@@ -92,46 +88,40 @@ function HomeComponent() {
],
},
{
accessorKey: 'state',
accessorKey: 'price',
header: 'محدوده',
id: "betweenNum",
text: 'محدوده',
id: "price",
enableColumnFilter: true,
datatype: "text",
filterFn: "betweenNum",
columnFilterModeOptions: [],
datatype: "nemeric",
filterFn: "between",
inputType: "betweenNum",
},
{
accessorKey: 'state',
header: 'تاریخ',
id: "betweenDate",
text: 'تاریخ',
accessorKey: 'updated_at',
header: 'تاریخ بروزرسانی',
id: "updated_at",
enableColumnFilter: true,
datatype: "text",
filterFn: "betweenDate",
columnFilterModeOptions: [],
datatype: "date",
filterFn: "between",
inputType: "betweenDate",
},
{
accessorKey: 'state',
header: 'شلکت',
id: "select2",
text: 'تاریخ',
type: 'select2',
accessorKey: 'company',
header: 'نام شرکت',
id: "company",
enableColumnFilter: true,
datatype: "text",
filterFn: "equals",
columnFilterModeOptions: [],
inputType: "select2",
},
{
accessorKey: 'state',
header: 'سلکت',
id: "select",
text: 'تنتنت',
type: 'select',
accessorKey: 'area',
header: 'منطقه',
id: "area",
enableColumnFilter: true,
datatype: "text",
filterFn: "equals",
columnFilterModeOptions: [],
inputType: "select",
},
],
[],

28
src/core/components/DataTable/filter/FilterColumn.jsx
View File

@@ -1,7 +1,6 @@
"use client"
import {Box, Button, Divider, Drawer, FormControl, IconButton, styled, Tooltip, Typography} from '@mui/material';
import {useFormik} from 'formik';
import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
import {useEffect, useState} from "react";
import useTableSetting from "@/lib/hooks/useTableSetting";
import BetweenNumberFilter from "@/core/components/DataTable/filter/BetweenNumberFilter";
@@ -10,13 +9,14 @@ import SelectBoxMultiple from "@/core/components/DataTable/filter/SelectBoxMulti
import SelectBox from "@/core/components/DataTable/filter/SelectBox";
import FilterAltIcon from '@mui/icons-material/FilterAlt';
import CloseIcon from '@mui/icons-material/Close';
import TextFieldWithFnBox from "@/core/components/DataTable/filter/TextFieldWithFnBox/TextFieldWithFnBox";
function FilterColumn({columns}) {
const [open, setOpen] = useState(false);
const [selectedFilters, setSelectedFilters] = useState([]);
const [userId, setUserId] = useState(2);
const [pageName, setPageName] = useState('loan');
const [tableName, setTableName] = useState('loan_table');
const [userId, setUserId] = useState(0);
const [pageName, setPageName] = useState('testPage');
const [tableName, setTableName] = useState('testTable');
const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
const DrawerHeader = styled('div')(({theme}) => ({
@@ -34,11 +34,13 @@ function FilterColumn({columns}) {
useEffect(() => {
const settingValue = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || [];
setSelectedFilters(settingValue.length > 0 ? settingValue : []);
if (!settingValue.length > 0) {
formik.resetForm();
}
}, [settingStore]);
const handleSelectFilter = (fieldName, filterFn) => {
const filterIndex = selectedFilters.findIndex(filter => filter.id === fieldName);
if (filterIndex !== -1) {
const updatedFilters = [...selectedFilters];
updatedFilters[filterIndex].fn = filterFn;
@@ -98,7 +100,7 @@ function FilterColumn({columns}) {
}
});
console.log(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'])
return (
<>
<Tooltip title="فیلتر">
@@ -139,36 +141,32 @@ function FilterColumn({columns}) {
<FormControl fullWidth>
{columns.map((column, index) => (
column.enableColumnFilter &&
(column.filterFn === 'betweenDate' ?
(column.inputType === 'betweenDate' ?
<BetWeenDateFilter
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/>
: column.filterFn === 'betweenNum' ?
: column.inputType === 'betweenNum' ?
<BetweenNumberFilter
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ["", ""]}
/>
: column.type === 'select2' ?
: column.inputType === 'select2' ?
<SelectBoxMultiple
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || []}
/>
: column.type === 'select' ?
: column.inputType === 'select' ?
<SelectBox
key={index}
id={column.id}
formik={formik}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}
/>
:
@@ -177,7 +175,7 @@ function FilterColumn({columns}) {
id={column.id}
header={column.header}
formik={formik}
defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column.filterFn}
defaultFilter={(settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.fn || column._filterFn}
columnFilterModeOptions={column.columnFilterModeOptions}
onSelectFilter={(filterFn) => handleSelectFilter(column.id, filterFn)}
defaultValue={formik.values[column.id] || (settingStore?.[userId]?.[pageName]?.[tableName]?.['filters'] || []).find(filter => filter.id === column.id)?.value || ''}

26
src/core/components/DataTable/filter/TextFieldWithFnBox/FilterBox.jsx
View File

@@ -1,22 +1,38 @@
import { Popper, Paper, List, ListItem, ListItemText, ClickAwayListener } from '@mui/material';
import {ClickAwayListener, List, ListItem, ListItemText, Paper, Popper} from '@mui/material';
import {useState} from "react";
function FilterBox({anchorEl , open = false, handleClose = () => {} , columnFilterModeOptions , onSelectFilter , defaultFilter}) {
const columnFilterModeOptionFa = {
equals: "برابر",
notEquals: "نابرابر",
contains: "شامل",
lessThan: "کوچکتر",
greaterThan: "بزرگتر",
fuzzy: "فازی",
}
function FilterBox({
anchorEl, open = false, handleClose = () => {
}, columnFilterModeOptions, onSelectFilter, defaultFilter
}) {
const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
const id = open ? 'simple-popper' : undefined;
const handleSelectFilter = (filterFn) => {
setSelectedFilter(filterFn);
onSelectFilter(filterFn);
handleClose();
};
return (
<div>
<Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{ zIndex: 1301 }}>
<Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{zIndex: 1301}}>
<ClickAwayListener onClickAway={handleClose}>
<Paper>
<List>
{columnFilterModeOptions.map((option, index) => (
<ListItem key={index} onClick={() => handleSelectFilter(option)} selected={option === defaultFilter} sx={{ cursor: 'pointer' }}>
<ListItemText primary={option} />
<ListItem key={index} onClick={() => handleSelectFilter(option)}
selected={option === selectedFilter} sx={{cursor: 'pointer'}}>
<ListItemText primary={columnFilterModeOptionFa[option]}/>
</ListItem>
))}
</List>

21
src/core/components/DataTable/head/TableHead.js
View File

@@ -1,12 +1,12 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { TableHead } from "@mui/material";
import {parseFromValuesOrFunc} from "@/core/utils/utils";
import {TableHead} from "@mui/material";
import DataTable_TableHeadRow from "./TableHeadRow";
const DataTable_TableHead = ({
columnVirtualizer,
table,
...rest
}) => {
columnVirtualizer,
table,
...rest
}) => {
const {
getState,
options: {
@@ -15,12 +15,12 @@ const DataTable_TableHead = ({
muiTableHeadProps,
positionToolbarAlertBanner,
},
refs: { tableHeadRef },
refs: {tableHeadRef},
} = table;
const { isFullScreen, showAlertBanner } = getState();
const {isFullScreen, showAlertBanner} = getState();
const tableHeadProps = {
...parseFromValuesOrFunc(muiTableHeadProps, { table }),
...parseFromValuesOrFunc(muiTableHeadProps, {table}),
...rest,
};
@@ -47,12 +47,13 @@ const DataTable_TableHead = ({
>
{table
.getHeaderGroups()
.map((headerGroup) => (
.map((headerGroup, index) => (
<DataTable_TableHeadRow
columnVirtualizer={columnVirtualizer}
headerGroup={headerGroup}
key={headerGroup.id}
table={table}
index={index}
/>
))
}

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

@@ -1,16 +1,16 @@
import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
import { useTheme } from "@emotion/react";
import { Box, TableCell } from "@mui/material";
import { MRT_TableHeadCellSortLabel } from "material-react-table";
import { useMemo } from "react";
import {getCommonMRTCellStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
import {useTheme} from "@emotion/react";
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
}) => {
columnVirtualizer,
header,
staticColumnIndex,
table,
...rest
}) => {
const theme = useTheme();
const {
getState,
@@ -24,10 +24,10 @@ const DataTable_TableHeadCell = ({
enableGrouping,
enableMultiSort,
layoutMode,
mrtTheme: { draggingBorderColor },
mrtTheme: {draggingBorderColor},
muiTableHeadCellProps,
},
refs: { tableHeadCellRefs },
refs: {tableHeadCellRefs},
setHoveredColumn,
} = table;
const {
@@ -38,12 +38,12 @@ const DataTable_TableHeadCell = ({
hoveredColumn,
showColumnFilters,
} = getState();
const { column } = header;
const { columnDef } = column;
const { columnDefType } = columnDef;
const {column} = header;
const {columnDef} = column;
const {columnDefType} = columnDef;
const tableCellProps = {
...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
...parseFromValuesOrFunc(muiTableHeadCellProps, {column, table}),
...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
column,
table,
@@ -93,8 +93,8 @@ const DataTable_TableHeadCell = ({
if (showResizeBorder) {
return columnResizeDirection === 'ltr'
? { borderRight: borderStyle }
: { borderLeft: borderStyle };
? {borderRight: borderStyle}
: {borderLeft: borderStyle};
}
const draggingBorders = borderStyle
? {
@@ -172,47 +172,47 @@ const DataTable_TableHeadCell = ({
}}
{...tableCellProps}
sx={(theme) => ({
'& :hover': {
'.MuiButtonBase-root': {
opacity: 1,
'& :hover': {
'.MuiButtonBase-root': {
opacity: 1,
},
},
},
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',
pt:
columnDefType === 'group' || density === 'compact'
? '0.25rem'
: density === 'comfortable'
? '.75rem'
: '1.25rem',
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
verticalAlign: 'middle',
...getCommonMRTCellStyles({
column,
header,
table,
tableCellProps,
theme,
}),
...draggingBorders,
}
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',
pt:
columnDefType === 'group' || density === 'compact'
? '0.25rem'
: density === 'comfortable'
? '.75rem'
: '1.25rem',
userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
verticalAlign: 'middle',
...getCommonMRTCellStyles({
column,
header,
table,
tableCellProps,
theme,
}),
...draggingBorders,
}
)}
>
{tableCellProps.children ?? (
@@ -225,7 +225,7 @@ const DataTable_TableHeadCell = ({
tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
justifyContent:
columnDefType === 'group' ||
tableCellProps?.align === 'center'
tableCellProps?.align === 'center'
? 'center'
: column.getCanResize()
? 'space-between'
@@ -262,6 +262,9 @@ const DataTable_TableHeadCell = ({
minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
overflow: columnDefType === 'data' ? 'hidden' : undefined,
textOverflow: 'ellipsis',
color: "#fff",
fontSize: "14px",
fontWeight: "500",
whiteSpace:
(columnDef.header?.length ?? 0) < 20
? 'nowrap'
@@ -271,7 +274,8 @@ const DataTable_TableHeadCell = ({
{HeaderElement}
</Box>
{(column.getCanSort() && columnDefType !== 'group') && (
<MRT_TableHeadCellSortLabel sx={{ width: 20 }} header={header} table={table} />
<MRT_TableHeadCellSortLabel sx={{width: 20, color: "#fff"}} header={header}
table={table}/>
)}
</Box>
</Box>

86
src/core/components/DataTable/head/TableHeadRow.js
View File

@@ -1,24 +1,25 @@
import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { TableRow } from "@mui/material";
import {parseFromValuesOrFunc} from "@/core/utils/utils";
import {TableRow} from "@mui/material";
import DataTable_TableHeadCell from "./TableHeadCell";
const DataTable_TableHeadRow = ({
columnVirtualizer,
headerGroup,
table,
...rest
}) => {
columnVirtualizer,
headerGroup,
table,
index, // Add index prop
...rest
}) => {
const {
options: {
enableStickyHeader,
layoutMode,
mrtTheme: { baseBackgroundColor },
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 +27,34 @@ 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 (
<TableRow
{...tableRowProps}
sx={(theme) => ({
backgroundColor: baseBackgroundColor,
display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
position:
enableStickyHeader && layoutMode === 'semantic'
? 'sticky'
: 'relative',
top: 0,
...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
<TableRow {...tableRowProps}>
{virtualPaddingLeft && <th style={{display: 'flex', width: virtualPaddingLeft}}/>}
{(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
const header = columnVirtualizer ? headerGroup.headers[headerOrVirtualHeader.index] : headerOrVirtualHeader;
return header ? (
<DataTable_TableHeadCell
columnVirtualizer={columnVirtualizer}
header={header}
key={header.id}
staticColumnIndex={staticColumnIndex}
table={table}
/>
) : null;
})}
>
{virtualPaddingLeft ? (
<th style={{ display: 'flex', width: virtualPaddingLeft }} />
) : null}
{(virtualColumns ?? headerGroup.headers).map(
(headerOrVirtualHeader, staticColumnIndex) => {
let header = headerOrVirtualHeader;
if (columnVirtualizer) {
staticColumnIndex = (headerOrVirtualHeader)
.index;
header = headerGroup.headers[staticColumnIndex];
}
return header ? (
<DataTable_TableHeadCell
columnVirtualizer={columnVirtualizer}
header={header}
key={header.id}
staticColumnIndex={staticColumnIndex}
table={table}
/>
) : null;
},
)}
{virtualPaddingRight ? (
<th style={{ display: 'flex', width: virtualPaddingRight }} />
) : null}
{virtualPaddingRight && <th style={{display: 'flex', width: virtualPaddingRight}}/>}
</TableRow>
);
};
}
export default DataTable_TableHeadRow
export default DataTable_TableHeadRow;

72
src/core/components/DataTable/index.js
View File

@@ -8,48 +8,68 @@ import Toolbar from "@/components/home/Toolbar";
const data = [
{
name: {
firstName: 'John',
lastName: 'Doe',
firstName: 'امین',
lastName: 'قاسمپور',
},
address: '261 Erdman Ford',
city: 'East Daphne',
state: 'Kentucky',
address: 'فلان جا',
city: 'تهران',
state: 'بررسی شده',
price: '20',
updated_at: '2024/05/02',
company: 'همراه اول',
area: 'منطقه 5',
},
{
name: {
firstName: 'Jane',
lastName: 'Doe',
firstName: 'امیر حسین',
lastName: 'محمودی',
},
address: '769 Dominic Grove',
city: 'Columbus',
state: 'Ohio',
address: 'فلان جا',
city: 'تهران',
state: 'تکمیل شده',
price: '27',
updated_at: '2024/05/02',
company: 'وایتل',
area: 'منطقه 27',
},
{
name: {
firstName: 'Joe',
lastName: 'Doe',
firstName: 'یاسمن',
lastName: 'علی اکبری',
},
address: '566 Brakus Inlet',
city: 'South Linda',
state: 'West Virginia',
address: 'فلان جا',
city: 'شیراز',
state: 'بررسی شده',
price: '32',
updated_at: '2024/05/02',
company: 'ایرانسل',
area: 'منطقه 23',
},
{
name: {
firstName: 'Kevin',
lastName: 'Vandy',
firstName: 'حمیدرضا',
lastName: 'رنجبرپور',
},
address: '722 Emie Stream',
city: 'Lincoln',
state: 'Nebraska',
address: 'فلان جا',
city: 'اصفهان',
state: 'بررسی شده',
price: '45',
updated_at: '2024/05/02',
company: 'ایرانول',
area: 'منطقه 21',
},
{
name: {
firstName: 'Joshua',
lastName: 'Rolluffs',
firstName: 'محمد',
lastName: 'جلالی',
},
address: '32188 Larkin Turnpike',
city: 'Charleston',
state: 'South Carolina',
address: 'فلان جا',
city: 'رشت',
state: 'درحال بررسی',
price: '8',
updated_at: '2024/05/02',
company: 'فیلیمو',
area: 'منطقه 8',
},
];
@@ -116,7 +136,7 @@ const DataTable = (props) => {
...props
})
return <DataTable_Main table={table} columns={columns}/>;
return <DataTable_Main table={table} columns={flatColumns}/>;
};
export default DataTable;

28
src/core/components/DataTable/refactor/RefactorTable.jsx Normal file
View File

@@ -0,0 +1,28 @@
"use client"
import {IconButton, Tooltip} from '@mui/material';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import useTableSetting from "@/lib/hooks/useTableSetting";
import {useState} from "react";
function RefactorTable() {
const {refactorAction} = useTableSetting();
const [userId, setUserId] = useState(2);
const [pageName, setPageName] = useState('loan');
const [tableName, setTableName] = useState('loan_table');
const refactor = () => {
refactorAction(userId, pageName, tableName);
};
return (
<Tooltip title="بازنشانی اطلاعات">
<IconButton onClick={refactor} aria-label="refactor table">
<RestartAltIcon/>
</IconButton>
</Tooltip>
);
}
export default RefactorTable;

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

@@ -4,6 +4,7 @@ import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination";
import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
import FilterColumn from "@/core/components/DataTable/filter/FilterColumn";
import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
const DataTable_TopToolbar = ({table, columns}) => {
const {
@@ -71,6 +72,7 @@ const DataTable_TopToolbar = ({table, columns}) => {
justifyContent: 'flex-end',
}}
>
<RefactorTable/>
<FilterColumn columns={columns}/>
<DataTable_ToolbarInternalButtons table={table}/>
</Box>

21
src/lib/contexts/tableSetting.jsx
View File

@@ -1,6 +1,5 @@
'use client'
import {createContext, useCallback, useEffect, useState} from "react";
import {flattenArrayOfObjects} from "@/core/utils/flattenArrayOfObjects";
export const TableSettingContext = createContext();
export const TableSettingProvider = ({children}) => {
@@ -53,7 +52,23 @@ export const TableSettingProvider = ({children}) => {
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 = "";
@@ -122,7 +137,7 @@ export const TableSettingProvider = ({children}) => {
return (
<TableSettingContext.Provider
value={{settingStore, hideAction, sortAction, filterAction}}>
value={{settingStore, hideAction, sortAction, filterAction, refactorAction}}>
{children}
</TableSettingContext.Provider>
);

10
src/lib/hooks/useTableSetting.jsx
View File

@@ -1,10 +1,10 @@
import { useContext } from "react";
import { TableSettingContext } from "../contexts/tableSetting";
import {useContext} from "react";
import {TableSettingContext} from "../contexts/tableSetting";
const useTableSetting = () => {
const { settingStore, hideAction, sortAction, filterAction } =
useContext(TableSettingContext);
return { settingStore, hideAction, sortAction, filterAction };
const {settingStore, hideAction, sortAction, filterAction, refactorAction} =
useContext(TableSettingContext);
return {settingStore, hideAction, sortAction, filterAction, refactorAction};
};
export default useTableSetting;