From cb2248e108fb80dfc63c61559d4cd67f9f50c26b Mon Sep 17 00:00:00 2001 From: Amirhossein Mahmoodi Date: Tue, 27 Aug 2024 13:00:17 +0330 Subject: [PATCH] add badge for sidebar --- .../Sidebar/SidebarBadge.jsx | 22 +++++++++++++++++++ .../Sidebar/SidebarListItems.jsx | 8 ++++++- .../Sidebar/SidebarSubitems.jsx | 10 +++++++-- src/core/utils/getValueByPath.js | 14 ++++++++++++ src/core/utils/pageMenu.js | 10 +++++++++ src/core/utils/routes.js | 1 + src/lib/hooks/useSidebarBadge.js | 18 +++++++++++++++ 7 files changed, 80 insertions(+), 3 deletions(-) create mode 100644 src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarBadge.jsx create mode 100644 src/core/utils/getValueByPath.js create mode 100644 src/lib/hooks/useSidebarBadge.js diff --git a/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarBadge.jsx b/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarBadge.jsx new file mode 100644 index 0000000..df8fbc2 --- /dev/null +++ b/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarBadge.jsx @@ -0,0 +1,22 @@ +import { getValueByPath } from "@/core/utils/getValueByPath"; +import { useSidebarBadge } from "@/lib/hooks/useSidebarBadge" +import { Chip } from "@mui/material" +import { useEffect, useState } from "react"; + +const SidebarBadge = ({ badge, chipProps = {} }) => { + const { data } = useSidebarBadge() + const [value, setValue] = useState() + + useEffect(() => { + setValue(getValueByPath(data, badge)) + }, [data, badge]) + + + if (!data) return null + if (!value) return null + + return ( + + ) +} +export default SidebarBadge \ No newline at end of file diff --git a/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx b/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx index 533d2b8..bde3bae 100644 --- a/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx +++ b/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx @@ -1,6 +1,7 @@ import { ExpandLess, ExpandMore } from "@mui/icons-material"; -import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material"; import Link from "next/link"; +import SidebarBadge from "./SidebarBadge"; import SidebarSubitems from "./SidebarSubitems"; const SidebarListItems = ({ menuItem, dispatch }) => { @@ -29,6 +30,11 @@ const SidebarListItems = ({ menuItem, dispatch }) => { {menuItem.icon} + {menuItem.badges && ( + + {menuItem.badges.map((badge, i) => )} + + )} {menuItem.hasSubitems ? menuItem.showSubitems ? : : null} diff --git a/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx b/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx index e539394..6e51bcd 100644 --- a/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx +++ b/src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx @@ -1,6 +1,7 @@ import { ExpandLess, ExpandMore } from "@mui/icons-material"; -import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material"; +import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material"; import Link from "next/link"; +import SidebarBadge from "./SidebarBadge"; const SidebarSubitems = ({ subitem, dispatch }) => { return ( @@ -27,7 +28,12 @@ const SidebarSubitems = ({ subitem, dispatch }) => { {subitem.icon} - {subitem.hasSubitems ? subitem.showSubitems ? : : null} + {subitem.badges && ( + + {subitem.badges.map((badge, i) => )} + + )} + {subitem.hasSubitems ? subitem.showSubitems ? : : } diff --git a/src/core/utils/getValueByPath.js b/src/core/utils/getValueByPath.js new file mode 100644 index 0000000..6f51b4f --- /dev/null +++ b/src/core/utils/getValueByPath.js @@ -0,0 +1,14 @@ +export const getValueByPath = (obj, path) => { + const keys = path.split("."); + + let value = obj; + + for (const key of keys) { + if (value === undefined) { + return undefined; + } + value = value[key]; + } + + return value; +} \ No newline at end of file diff --git a/src/core/utils/pageMenu.js b/src/core/utils/pageMenu.js index 5718053..306b6ec 100644 --- a/src/core/utils/pageMenu.js +++ b/src/core/utils/pageMenu.js @@ -91,6 +91,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_items.total'], Subitems: [ { id: "roadItemManagmentSupervisor", @@ -98,6 +99,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_items.supervise_cnt'], Subitems: [ { id: "roadItemManagmentSupervisorCartable", @@ -117,6 +119,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_items.operation_cnt'], Subitems: [ { id: "roadItemManagmentOparationCreate", @@ -166,6 +169,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_patrols.total'], Subitems: [ { id: "roadPatrolManagmentSupervisor", @@ -173,6 +177,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_patrols.supervise_cnt'], Subitems: [ { id: "roadPatrolManagmentSupervisorCartable", @@ -192,6 +197,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_patrols.operation_cnt'], Subitems: [ { id: "roadPatrolManagmentOparationCreate", @@ -271,6 +277,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['safety_and_privacy.step_one', 'safety_and_privacy.step_two'], Subitems: [ { id: "safetyAndPrivacyManagmentOparation", @@ -333,6 +340,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_observations.total'], Subitems: [ { id: "roadObservationsManagmentSupervisor", @@ -340,6 +348,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_observations.supervise_cnt'], Subitems: [ { id: "roadObservationsManagmentSupervisorCartable", @@ -364,6 +373,7 @@ export const pageMenu = [ type: "menu", icon: , hasSubitems: true, + badges: ['road_observations.operation_cnt'], Subitems: [ { id: "roadObservationsManagmentOparationCartable", diff --git a/src/core/utils/routes.js b/src/core/utils/routes.js index d33fa7d..5ab9d74 100644 --- a/src/core/utils/routes.js +++ b/src/core/utils/routes.js @@ -4,5 +4,6 @@ export const GET_USER_ROUTE = api + "/webapi/user/get-permission"; export const GET_LOGIN_ROUTE = api + "/login_dev"; export const GET_INQUIRY_PRIVACY_FENCING_ROUTE = api + "/api/v3/harim/divarkeshi"; export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission"; +export const GET_SIDEBAR_BADGE_ROUTE = api + "/v2/activity_statistics"; export const SET_INQUIRE_PRIVACY_FENCING = api + "/api/v3/harim/divarkeshi/store"; diff --git a/src/lib/hooks/useSidebarBadge.js b/src/lib/hooks/useSidebarBadge.js new file mode 100644 index 0000000..621ce55 --- /dev/null +++ b/src/lib/hooks/useSidebarBadge.js @@ -0,0 +1,18 @@ +import { GET_SIDEBAR_BADGE_ROUTE } from "@/core/utils/routes"; +import useSWR from "swr"; +import useRequest from "./useRequest"; + +export const useSidebarBadge = () => { + const request = useRequest(); + + const fetcher = async (url) => { + try { + const response = await request(url); + return response.data; + } catch (error) { + throw new Error(); + } + }; + + return useSWR(GET_SIDEBAR_BADGE_ROUTE, fetcher, { keepPreviousData: true }); +};