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

debug name props problems

Browse Source
This commit is contained in:
Mohammad Jalali
2024-06-26 10:25:22 +03:30
parent 2777cdba08
commit be792f14fe
6 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -141,7 +141,7 @@ function HomeComponent() {
return ( return (
<> <>
<DataTable columns={columns} userId={0} pageName={'testPage'} tableName={'testTable'}/> <DataTable columns={columns} user_id={0} page_name={'testPage'} table_name={'testTable'}/>
</> </>
); );

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

@@ -76,18 +76,18 @@ const data = [
const DataTable_Main = (props) => { const DataTable_Main = (props) => {
const {filterData} = useDataTable(); const {filterData} = useDataTable();
const {userId, pageName, tableName, columns, initialStateProps} = props const {user_id, page_name, table_name, columns, initialStateProps} = props
const flatColumns = flattenArrayOfObjects(columns, 'columns') const flatColumns = flattenArrayOfObjects(columns, 'columns')
const {settingStore, hideAction, sortAction} = useTableSetting(); const {settingStore, hideAction, sortAction} = useTableSetting();
const onColumnVisibilityChange = (event) => { const onColumnVisibilityChange = (event) => {
const settingValue = event(); const settingValue = event();
hideAction(userId, pageName, tableName, settingValue, flatColumns); hideAction(user_id, page_name, table_name, settingValue, flatColumns);
}; };
const onSortingChange = (event) => { const onSortingChange = (event) => {
const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []); const settingValue = event(settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []);
sortAction(userId, pageName, tableName, settingValue, flatColumns); sortAction(user_id, page_name, table_name, settingValue, flatColumns);
} }
const table = useMaterialReactTable({ const table = useMaterialReactTable({
@@ -102,13 +102,13 @@ const DataTable_Main = (props) => {
</>), </>),
initialState: { initialState: {
density: 'compact', density: 'compact',
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [], sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || [],
...initialStateProps ...initialStateProps
}, },
state: { state: {
columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], columnVisibility: settingStore?.[user_id]?.[page_name]?.[table_name]?.['hides'],
sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [] sorting: settingStore?.[user_id]?.[page_name]?.[table_name]?.['sorts'] || []
}, },
muiTableHeadProps: { muiTableHeadProps: {
sx: { sx: {
@@ -141,8 +141,8 @@ const DataTable_Main = (props) => {
...props ...props
}) })
return <DataTable_Paper table={table} columns={flatColumns} userid={userId} pagename={pageName} return <DataTable_Paper table={table} columns={flatColumns} user_id={user_id} page_name={page_name}
tablename={tableName}/>; table_name={table_name}/>;
}; };
export default DataTable_Main; export default DataTable_Main;

15
src/core/components/DataTable/filter/FilterBody.jsx
View File

@@ -28,21 +28,20 @@ const ScrollBox = styled(Box)({
} }
}); });
function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tableName}) { function FilterBody({columns, drawerState, setDrawerState, user_id, page_name, table_name}) {
const {settingStore, filterAction} = useTableSetting(); const {settingStore, filterAction} = useTableSetting();
const [initialValues, setInitialValues] = useState({}); const [initialValues, setInitialValues] = useState({});
const [validationSchema, setValidationSchema] = useState({}); const [validationSchema, setValidationSchema] = useState({});
const {filterData, setFilterData} = useDataTable(); const {filterData, setFilterData} = useDataTable();
const filterDataRef = useRef(filterData); // Create a ref to hold the latest filterData const filterDataRef = useRef(filterData);
useEffect(() => { useEffect(() => {
filterDataRef.current = filterData; // Update ref whenever filterData changes filterDataRef.current = filterData;
}, [filterData]); }, [filterData]);
useEffect(() => { useEffect(() => {
const values = columns.reduce((acc, column) => { const values = columns.reduce((acc, column) => {
if (!column.enableColumnFilter) return acc; if (!column.enableColumnFilter) return acc;
const filter = settingStore?.[userId]?.[pageName]?.[tableName]?.['filters']?.find((filter) => filter.id === column.id); const filter = settingStore?.[user_id]?.[page_name]?.[table_name]?.['filters']?.find((filter) => filter.id === column.id);
if (column.datatype === 'array') { if (column.datatype === 'array') {
acc[column.id] = { acc[column.id] = {
id: column.id, id: column.id,
@@ -68,7 +67,7 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
return acc; return acc;
}, {}); }, {});
setInitialValues(Object.keys(filterData).length !== 0 ? filterData : values); setInitialValues(Object.keys(filterData).length !== 0 ? filterData : values);
}, [columns, settingStore, userId, pageName, tableName, filterData]); }, [columns, settingStore, user_id, page_name, table_name, filterData]);
useEffect(() => { useEffect(() => {
@@ -119,7 +118,7 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
}; };
const onSaveFilter = () => { const onSaveFilter = () => {
const currentFilterData = filterDataRef.current; // Use the ref to get the latest filterData const currentFilterData = filterDataRef.current;
const arrayOfObjects = Object.keys(currentFilterData).map(key => { const arrayOfObjects = Object.keys(currentFilterData).map(key => {
const value = currentFilterData[key].value; const value = currentFilterData[key].value;
if (value !== "" && if (value !== "" &&
@@ -127,7 +126,7 @@ function FilterBody({columns, drawerState, setDrawerState, userId, pageName, tab
return currentFilterData[key]; return currentFilterData[key];
} }
}).filter(Boolean); }).filter(Boolean);
console.log("arrayOfObjects", arrayOfObjects); filterAction(user_id, page_name, table_name, arrayOfObjects, columns)
toast.dismiss({containerId: "filtering"}); toast.dismiss({containerId: "filtering"});
}; };

6
src/core/components/DataTable/filter/index.jsx
View File

@@ -4,14 +4,14 @@ import {useState} from "react";
import FilterButton from "@/core/components/DataTable/filter/FilterButton"; import FilterButton from "@/core/components/DataTable/filter/FilterButton";
import FilterBody from "@/core/components/DataTable/filter/FilterBody"; import FilterBody from "@/core/components/DataTable/filter/FilterBody";
function FilterColumn({columns, userid, pagename, tablename}) { function FilterColumn({columns, user_id, page_name, table_name}) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
<> <>
<FilterButton drawerState={open} setDrawerState={setOpen}/> <FilterButton drawerState={open} setDrawerState={setOpen}/>
<FilterBody columns={columns} drawerState={open} setDrawerState={setOpen} userid={userid} <FilterBody columns={columns} drawerState={open} setDrawerState={setOpen} user_id={user_id}
pagename={pagename} tablename={tablename}/> page_name={page_name} table_name={table_name}/>
</> </>
); );
} }

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

@@ -65,9 +65,9 @@ const DataTable_Paper = ({table, ...rest}) => {
> >
{enableTopToolbar && {enableTopToolbar &&
(parseFromValuesOrFunc(renderTopToolbar, {table}) ?? ( (parseFromValuesOrFunc(renderTopToolbar, {table}) ?? (
<DataTable_TopToolbar table={table} columns={paperProps.columns} userid={paperProps.userid} <DataTable_TopToolbar table={table} columns={paperProps.columns} userId={paperProps.userId}
pagename={paperProps.pagename} pageName={paperProps.pageName}
tablename={paperProps.tablename}/> tableName={paperProps.tableName}/>
))} ))}
<DataTable_TableContainer table={table}/> <DataTable_TableContainer table={table}/>
{enableBottomToolbar && {enableBottomToolbar &&

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

@@ -6,7 +6,7 @@ import DataTable_ToolbarInternalButtons from "./ToolbarInternalButtons";
import FilterColumn from "@/core/components/DataTable/filter"; import FilterColumn from "@/core/components/DataTable/filter";
import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable"; import RefactorTable from "@/core/components/DataTable/refactor/RefactorTable";
const DataTable_TopToolbar = ({table, columns, userid, pagename, tablename}) => { const DataTable_TopToolbar = ({table, columns, user_id, page_name, table_name}) => {
const { const {
getState, getState,
options: { options: {
@@ -73,7 +73,8 @@ const DataTable_TopToolbar = ({table, columns, userid, pagename, tablename}) =>
}} }}
> >
<RefactorTable/> <RefactorTable/>
<FilterColumn columns={columns} userid={userid} pagename={pagename} tablename={tablename}/> <FilterColumn columns={columns} user_id={user_id} page_name={page_name}
table_name={table_name}/>
<DataTable_ToolbarInternalButtons table={table}/> <DataTable_ToolbarInternalButtons table={table}/>
</Box> </Box>
)} )}