nested sidebar

2024-02-27 15:25:52 +03:30
parent 883a7ddfab
commit bdf050f2ba
6 changed files with 198 additions and 83 deletions
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,8 +1,8 @@
-import DataTableTest from "@/components/DataTableTest";
+import SidebarTest from "@/core/components/SidebarTest";

 function page() {
    return (
-        <DataTableTest/>
+        <SidebarTest/>
    );
 }

--- a/src/components/DataTableTest.jsx
+++ b/src/components/DataTableTest.jsx
@@ -1,9 +1,8 @@
 "use client"
-import {useMemo, useState} from 'react';
-import {MaterialReactTable} from 'material-react-table';
-import useTableSetting from "@/lib/hooks/useTableSetting";
-import {Typography} from "@mui/material";
-
+import { useMemo, useState } from 'react';
+import { MaterialReactTable } from 'material-react-table';
+import useTableSetting from '@/lib/hooks/useTableSetting';
+import { Typography } from '@mui/material';

 const data = [
    {
@@ -57,118 +56,75 @@ const TestDataTable = () => {
    const [userId, setUserId] = useState(2);
    const [pageName, setPageName] = useState('loan');
    const [tableName, setTableName] = useState('loan_table');
-    const {settingStore, hideAction, filterAction, sortAction,} = useTableSetting();
+    const { settingStore, hideAction, filterAction, sortAction } = useTableSetting();

    const columns = useMemo(
        () => [
            {
-                accessorKey: 'name.firstName',
                header: 'نام',
-                size: 150,
-                id: "firstName",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
-            },
-            {
-                accessorKey: 'name.lastName',
-                header: 'نام خانوادگی',
-                size: 150,
-                id: "lastName",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
+                size: 300,
+                subHeader: [
+                    {
+                        accessorKey: 'name.firstName',
+                        header: 'نام',
+                        size: 150,
+                    },
+                    {
+                        accessorKey: 'name.lastName',
+                        header: 'نام خانوادگی',
+                        size: 150,
+                    },
                ],
            },
            {
                accessorKey: 'address',
                header: 'آدرس',
                size: 200,
-                id: "address",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
            },
            {
                accessorKey: 'city',
                header: 'شهر',
                size: 150,
-                id: "city",
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains",
-                    "lessThan",
-                    "greaterThan",
-                    "between",
-                ],
-
            },
            {
                accessorKey: 'state',
                header: 'وضعیت',
                size: 150,
-                id: "state",
-                text:'نام',
-                enableColumnFilter: true,
-                datatype: "text",
-                filterFn: "contains",
-                columnFilterModeOptions: [
-                    "equals",
-                    "notEquals",
-                    "contains"
-                ],
            },
        ],
-        [],
+        []
    );
+
    const onColumnVisibilityChange = (event) => {
        const settingValue = event();
        hideAction(userId, pageName, tableName, settingValue, columns);
    };
+
    const onSortingChange = (event) => {
        const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []);
        sortAction(userId, pageName, tableName, settingValue, columns);
-    }
+    };

    return (
        <>
-        <Typography>{settingStore?.[userId]?.[pageName]?.[tableName]?.['summary']}</Typography>
-        <MaterialReactTable
-            columns={columns}
-            data={data}
-            manualSorting={true}
-            initialState={{
-                columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-                sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
-            }}
-            state={{
-                columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
-                sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []
-            }}
-            onColumnVisibilityChange={onColumnVisibilityChange}
-            onSortingChange={onSortingChange}
-        />
+            <Typography>{settingStore?.[userId]?.[pageName]?.[tableName]?.['summary']}</Typography>
+            <MaterialReactTable
+                columns={columns}
+                data={data}
+                manualSorting={true}
+                initialState={{
+                    columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+                    sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
+                }}
+                state={{
+                    columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'],
+                    sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [],
+                }}
+                onColumnVisibilityChange={onColumnVisibilityChange}
+                onSortingChange={onSortingChange}
+            />
        </>
    );
 };

 export default TestDataTable;
-
--- a/src/components/MapTest.jsx
+++ b/src/components/MapTest.jsx
@@ -0,0 +1,41 @@
+"use client"
+import {Typography} from "@mui/material";
+
+const data = [
+    {
+        id : "hello",
+        Subitems : [
+            {id : "amin",firstName : "amin", lastName:"ali",Subitems : [{id : "shahrokh",shahrokh : "shahrokh"}], hasSubitems : true, showSubitems : false},
+            {id : "amir",firstName : "amir", lastName:"akbar", hasSubitems : false, showSubitems : false},
+        ],
+        hasSubitems : true,
+        showSubitems : false
+    },
+    {
+        id : "hi",
+        Subitems : [
+            {id : "ali",firstName : "ali", lastName:"ali", hasSubitems : false, showSubitems : false},
+            {id : "akbar",firstName : "akbar", lastName:"akbar", hasSubitems : false, showSubitems : false},
+        ],
+        hasSubitems : true,
+        showSubitems : false
+    }
+]
+const MapTest = () => {
+    const Amin =  data.map((item) => {
+        return item.hasSubitems ? {...item, Subitems: item.Subitems.map((subitem) => true ? {
+                ...subitem, showSubitems: !item.showSubitems
+            } : subitem)} : item
+    })
+
+
+    console.log(Amin)
+
+
+    return (
+        <>
+            <Typography>hello</Typography>
+        </>
+    )
+}
+export default MapTest
--- a/src/core/components/SidebarListItem.jsx
+++ b/src/core/components/SidebarListItem.jsx
@@ -0,0 +1,29 @@
+import {Collapse, ListItem, ListItemButton, ListItemText} from "@mui/material";
+import SidebarSubitem from "@/core/components/SidebarSubitem";
+import {useState} from "react";
+
+const SidebarListItem = ({menuItem, dispatch}) => {
+    const [open, setOpen] = useState(false)
+    return(
+        <>
+            <ListItem>
+                <ListItemText primary={menuItem.id}></ListItemText>
+                <ListItemButton onClick={() => {
+                    dispatch({type: "COLLAPSE_MENU", id: menuItem.id})
+                    setOpen(!open)
+                }}>click</ListItemButton>
+            </ListItem>
+            <Collapse in={menuItem.showSubitems}>
+                {
+                    menuItem.hasSubitems ?  (menuItem.Subitems.map((subitem,index)=>{
+                        return(
+                            <SidebarSubitem dispatch={dispatch} key={index} subitem={subitem} open={open}/>
+                        )
+                    })) : null
+                }
+            </Collapse>
+
+        </>
+    )
+}
+export default SidebarListItem
--- a/src/core/components/SidebarSubitem.jsx
+++ b/src/core/components/SidebarSubitem.jsx
@@ -0,0 +1,33 @@
+import {Collapse, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
+import {useState} from "react";
+
+const SidebarSubitem = ({subitem, dispatch}) => {
+    const [subOpen, setSubOpen] = useState(false)
+    return(
+        <>
+            <List>
+                <ListItem>
+                    <ListItemText primary={subitem.firstName} />
+                    {subitem.hasSubitems ? (<ListItemButton onClick={() => {
+                        dispatch({type: "Subitem1", id: subitem.id})
+                        setSubOpen(!subOpen)
+                    }}>click</ListItemButton>) : null}
+                </ListItem>
+            </List>
+            {
+                subitem.hasSubitems ? (subitem.Subitems.map((subSubitem,index) => {
+                    return(
+                        <Collapse key={index} in={subitem.showSubitems}>
+                            <List>
+                                <ListItem>
+                                    <ListItemText primary={subSubitem.shahrokh} />
+                                </ListItem>
+                            </List>
+                        </Collapse>
+                    )
+                })) : null
+            }
+        </>
+    )
+}
+export default SidebarSubitem
--- a/src/core/components/SidebarTest.jsx
+++ b/src/core/components/SidebarTest.jsx
@@ -0,0 +1,56 @@
+"use client"
+import {List} from "@mui/material";
+import SidebarListItem from "@/core/components/SidebarListItem";
+import {useReducer} from "react";
+const data = [
+    {
+        id : "hello",
+        Subitems : [
+            {id : "amin",firstName : "amin", lastName:"ali",Subitems : [{id : "shahrokh",shahrokh : "shahrokh"}], hasSubitems : true, showSubitems : false},
+            {id : "amir",firstName : "amir", lastName:"akbar", hasSubitems : false, showSubitems : false},
+        ],
+        hasSubitems : true,
+        showSubitems : false
+    },
+    {
+        id : "hi",
+        Subitems : [
+            {id : "ali",firstName : "ali", lastName:"ali", hasSubitems : false, showSubitems : false},
+            {id : "akbar",firstName : "akbar", lastName:"akbar", hasSubitems : false, showSubitems : false},
+        ],
+        hasSubitems : true,
+        showSubitems : false
+    }
+]
+function reducer(state, action) {
+    switch (action.type) {
+        case "COLLAPSE_MENU":
+            return state.map((item) => action.id == item.id ? {
+                ...item, showSubitems: !item.showSubitems
+            } : item)
+        case "Subitem1" :
+            return state.map((item) => {
+                return item.hasSubitems ? {...item, Subitems: item.Subitems.map((subitem) => action.id === subitem.id ? {
+                        ...subitem, showSubitems: !subitem.showSubitems
+                    } : subitem)} : item
+            })
+        default:
+            throw new Error();
+    }
+}
+
+const SidebarTest = () => {
+    const [itemMenu, dispatch] = useReducer(reducer, data);
+    return(
+        <List sx={{maxWidth : 500}}>
+            {
+                itemMenu.map((menuItem) => {
+                    return(
+                        <SidebarListItem dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />
+                    )
+                })
+            }
+        </List>
+    )
+}
+export default SidebarTest