CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add prettier for formatting to project

Browse Source
This commit is contained in:
mhmjalali
2025-07-28 12:18:27 +03:30
parent 1a6cb32528
commit 3a36561ab0
180 changed files with 15437 additions and 14748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
.idea/codeStyles/Project.xml generated Normal file
View File

@@ -0,0 +1,47 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<option name="LINE_SEPARATOR" value="&#13;&#10;" />
<HTMLCodeStyleSettings>
<option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
</HTMLCodeStyleSettings>
<JSCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</JSCodeStyleSettings>
<TypeScriptCodeStyleSettings version="0">
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</TypeScriptCodeStyleSettings>
<VueCodeStyleSettings>
<option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
<option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
</VueCodeStyleSettings>
<codeStyleSettings language="HTML">
<option name="SOFT_MARGINS" value="120" />
<indentOptions>
<option name="CONTINUATION_INDENT_SIZE" value="4" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="SOFT_MARGINS" value="120" />
</codeStyleSettings>
<codeStyleSettings language="TypeScript">
<option name="SOFT_MARGINS" value="120" />
</codeStyleSettings>
<codeStyleSettings language="Vue">
<option name="SOFT_MARGINS" value="120" />
<indentOptions>
<option name="INDENT_SIZE" value="4" />
<option name="TAB_SIZE" value="4" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
</component>

5
.idea/codeStyles/codeStyleConfig.xml generated Normal file
View File

@@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

12
.prettierrc Normal file
View File

@@ -0,0 +1,12 @@
{
"printWidth": 120,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"endOfLine": "crlf"
}

2
docker-compose.yml
View File

@@ -1,4 +1,4 @@
version: '3.8' version: "3.8"
services: services:
nextjs: nextjs:

2
package.json
View File

@@ -7,7 +7,7 @@
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint", "lint": "next lint",
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,html,css,scss}\"" "format": "npx prettier . --write"
}, },
"dependencies": { "dependencies": {
"@emotion/cache": "^11.14.0", "@emotion/cache": "^11.14.0",

4972
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

4
src/app/(withAuth)/(dashboardLayout)/layout.js
View File

@@ -9,9 +9,7 @@ import { SWRConfig } from "swr";
const Layout = ({ children }) => { const Layout = ({ children }) => {
const { data: permissions } = usePermissions(); const { data: permissions } = usePermissions();
const isCallWidgetEnabled = permissions?.some( const isCallWidgetEnabled = permissions?.some((permission) => permission === "manage_calls");
(permission) => permission === "manage_calls",
);
return ( return (
<SocketProvider> <SocketProvider>

5
src/app/layout.js
View File

@@ -18,10 +18,7 @@ export default function RootLayout({ children }) {
<link rel="icon" href={favicon.src} type="image/png" sizes="any" /> <link rel="icon" href={favicon.src} type="image/png" sizes="any" />
</head> </head>
<body style={{ height: "100vh", width: "100vw" }}> <body style={{ height: "100vh", width: "100vw" }}>
<AppRouterCacheProvider <AppRouterCacheProvider CacheProvider={Rtl} options={{ enableCssLayer: true }}>
CacheProvider={Rtl}
options={{ enableCssLayer: true }}
>
<AuthProvider> <AuthProvider>
<TableSettingProvider>{children}</TableSettingProvider> <TableSettingProvider>{children}</TableSettingProvider>
</AuthProvider> </AuthProvider>

7
src/app/not-found.js
View File

@@ -4,12 +4,7 @@ import SvgNotFound from "@/core/components/svgs/SvgNotFound";
export default function NotFound() { export default function NotFound() {
return ( return (
<Stack <Stack sx={{ height: "100%" }} justifyContent={"center"} alignItems={"center"} spacing={2}>
sx={{ height: "100%" }}
justifyContent={"center"}
alignItems={"center"}
spacing={2}
>
<Box> <Box>
<SvgNotFound width={200} height={200} /> <SvgNotFound width={200} height={200} />
</Box> </Box>

120
src/assets/scss/fontiran.scss
View File

@@ -4,14 +4,10 @@
font-weight: 900; font-weight: 900;
src: url("../fonts/eot/IRANSansWeb(FaNum)_Black.eot"); src: url("../fonts/eot/IRANSansWeb(FaNum)_Black.eot");
src: src:
url("../fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix") url("../fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix") format("embedded-opentype"),
format("embedded-opentype"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_Black.woff2") format("woff2"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_Black.woff2") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb(FaNum)_Black.woff") format("woff"),
format("woff2"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb(FaNum)_Black.ttf") format("truetype");
/* FF39+,Chrome36+, Opera24+*/
url("../fonts/woff/IRANSansWeb(FaNum)_Black.woff") format("woff"),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb(FaNum)_Black.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -20,14 +16,10 @@
font-weight: bold; font-weight: bold;
src: url("../fonts/eot/IRANSansWeb(FaNum)_Bold.eot"); src: url("../fonts/eot/IRANSansWeb(FaNum)_Bold.eot");
src: src:
url("../fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix") url("../fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix") format("embedded-opentype"),
format("embedded-opentype"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2") format("woff2"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb(FaNum)_Bold.woff") format("woff"),
format("woff2"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf") format("truetype");
/* FF39+,Chrome36+, Opera24+*/
url("../fonts/woff/IRANSansWeb(FaNum)_Bold.woff") format("woff"),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -36,14 +28,10 @@
font-weight: 500; font-weight: 500;
src: url("../fonts/eot/IRANSansWeb(FaNum)_Medium.eot"); src: url("../fonts/eot/IRANSansWeb(FaNum)_Medium.eot");
src: src:
url("../fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix") url("../fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix") format("embedded-opentype"),
format("embedded-opentype"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2") format("woff2"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb(FaNum)_Medium.woff") format("woff"),
format("woff2"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf") format("truetype");
/* FF39+,Chrome36+, Opera24+*/
url("../fonts/woff/IRANSansWeb(FaNum)_Medium.woff") format("woff"),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -52,14 +40,10 @@
font-weight: 300; font-weight: 300;
src: url("../fonts/eot/IRANSansWeb(FaNum)_Light.eot"); src: url("../fonts/eot/IRANSansWeb(FaNum)_Light.eot");
src: src:
url("../fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix") url("../fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix") format("embedded-opentype"),
format("embedded-opentype"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_Light.woff2") format("woff2"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_Light.woff2") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb(FaNum)_Light.woff") format("woff"),
format("woff2"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb(FaNum)_Light.ttf") format("truetype");
/* FF39+,Chrome36+, Opera24+*/
url("../fonts/woff/IRANSansWeb(FaNum)_Light.woff") format("woff"),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb(FaNum)_Light.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -68,14 +52,10 @@
font-weight: 200; font-weight: 200;
src: url("../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot"); src: url("../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot");
src: src:
url("../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix") url("../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix") format("embedded-opentype"),
format("embedded-opentype"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2") format("woff2"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff") format("woff"),
format("woff2"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf") format("truetype");
/* FF39+,Chrome36+, Opera24+*/
url("../fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff") format("woff"),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -84,13 +64,10 @@
font-weight: normal; font-weight: normal;
src: url("../fonts/eot/IRANSansWeb(FaNum).eot"); src: url("../fonts/eot/IRANSansWeb(FaNum).eot");
src: src:
url("../fonts/eot/IRANSansWeb(FaNum).eot?#iefix") url("../fonts/eot/IRANSansWeb(FaNum).eot?#iefix") format("embedded-opentype"),
format("embedded-opentype"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum).woff2") format("woff2"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb(FaNum).woff2") format("woff2"),
/* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb(FaNum).woff") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb(FaNum).woff") format("woff"),
format("woff"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb(FaNum).ttf") format("truetype");
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb(FaNum).ttf") format("truetype");
} }
@font-face { @font-face {
@@ -101,10 +78,8 @@
src: src:
url("../fonts/eot/IRANSansWeb_Black.eot?#iefix") format("embedded-opentype"), url("../fonts/eot/IRANSansWeb_Black.eot?#iefix") format("embedded-opentype"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb_Black.woff2") format("woff2"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb_Black.woff2") format("woff2"),
/* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_Black.woff") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_Black.woff") format("woff"),
format("woff"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb_Black.ttf") format("truetype");
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb_Black.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -115,10 +90,8 @@
src: src:
url("../fonts/eot/IRANSansWeb_Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/eot/IRANSansWeb_Bold.eot?#iefix") format("embedded-opentype"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb_Bold.woff2") format("woff2"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb_Bold.woff2") format("woff2"),
/* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_Bold.woff") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_Bold.woff") format("woff"),
format("woff"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb_Bold.ttf") format("truetype");
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb_Bold.ttf")
format("truetype");
} }
@font-face { @font-face {
@@ -127,13 +100,10 @@
font-weight: 500; font-weight: 500;
src: url("../fonts/eot/IRANSansWeb_Medium.eot"); src: url("../fonts/eot/IRANSansWeb_Medium.eot");
src: src:
url("../fonts/eot/IRANSansWeb_Medium.eot?#iefix") url("../fonts/eot/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"),
format("embedded-opentype"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb_Medium.woff2") format("woff2"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb_Medium.woff2") format("woff2"),
/* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_Medium.woff") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_Medium.woff") format("woff"),
format("woff"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb_Medium.ttf") format("truetype");
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb_Medium.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -144,10 +114,8 @@
src: src:
url("../fonts/eot/IRANSansWeb_Light.eot?#iefix") format("embedded-opentype"), url("../fonts/eot/IRANSansWeb_Light.eot?#iefix") format("embedded-opentype"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb_Light.woff2") format("woff2"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb_Light.woff2") format("woff2"),
/* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_Light.woff") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_Light.woff") format("woff"),
format("woff"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb_Light.ttf") format("truetype");
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb_Light.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -156,14 +124,10 @@
font-weight: 200; font-weight: 200;
src: url("../fonts/eot/IRANSansWeb_UltraLight.eot"); src: url("../fonts/eot/IRANSansWeb_UltraLight.eot");
src: src:
url("../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix") url("../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix") format("embedded-opentype"),
format("embedded-opentype"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb_UltraLight.woff2") format("woff2"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb_UltraLight.woff2") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb_UltraLight.woff") format("woff"),
format("woff2"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb_UltraLight.ttf") format("truetype");
/* FF39+,Chrome36+, Opera24+*/
url("../fonts/woff/IRANSansWeb_UltraLight.woff") format("woff"),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url("../fonts/ttf/IRANSansWeb_UltraLight.ttf") format("truetype");
} }
@font-face { @font-face {
@@ -174,10 +138,8 @@
src: src:
url("../fonts/eot/IRANSansWeb.eot?#iefix") format("embedded-opentype"), url("../fonts/eot/IRANSansWeb.eot?#iefix") format("embedded-opentype"),
/* IE6-8 */ url("../fonts/woff2/IRANSansWeb.woff2") format("woff2"), /* IE6-8 */ url("../fonts/woff2/IRANSansWeb.woff2") format("woff2"),
/* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb.woff") /* FF39+,Chrome36+, Opera24+*/ url("../fonts/woff/IRANSansWeb.woff") format("woff"),
format("woff"), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb.ttf") format("truetype");
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/IRANSansWeb.ttf")
format("truetype");
} }
@font-face { @font-face {
@@ -188,8 +150,7 @@
src: src:
url("../fonts/eot/Parastoo.eot?#iefix") format("embedded-opentype"), url("../fonts/eot/Parastoo.eot?#iefix") format("embedded-opentype"),
/* IE6-8 */ url("../fonts/woff/Parastoo.woff") format("woff"), /* IE6-8 */ url("../fonts/woff/Parastoo.woff") format("woff"),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/Parastoo.ttf") /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/Parastoo.ttf") format("truetype");
format("truetype");
} }
@font-face { @font-face {
@@ -200,8 +161,7 @@
src: src:
url("../fonts/eot/Parastoo-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/eot/Parastoo-Bold.eot?#iefix") format("embedded-opentype"),
/* IE6-8 */ url("../fonts/woff/Parastoo-Bold.woff") format("woff"), /* IE6-8 */ url("../fonts/woff/Parastoo-Bold.woff") format("woff"),
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/Parastoo-Bold.ttf") /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("../fonts/ttf/Parastoo-Bold.ttf") format("truetype");
format("truetype");
} }
@font-face { @font-face {

48
src/components/Login/Form/index.jsx
View File

@@ -5,21 +5,8 @@ import { GET_USER_LOGIN_ROUTE } from "@/core/utils/routes";
import { useAuth } from "@/lib/contexts/auth"; import { useAuth } from "@/lib/contexts/auth";
import useRequest from "@/lib/hooks/useRequest"; import useRequest from "@/lib/hooks/useRequest";
import { yupResolver } from "@hookform/resolvers/yup"; import { yupResolver } from "@hookform/resolvers/yup";
import { import { Lock, Person, PhoneCallback, Visibility, VisibilityOff } from "@mui/icons-material";
Lock, import { Button, Container, IconButton, InputAdornment, Stack, Typography } from "@mui/material";
Person,
PhoneCallback,
Visibility,
VisibilityOff,
} from "@mui/icons-material";
import {
Button,
Container,
IconButton,
InputAdornment,
Stack,
Typography,
} from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { object, string } from "yup"; import { object, string } from "yup";
@@ -64,27 +51,10 @@ const LoginForm = () => {
return ( return (
<Container maxWidth="xs" sx={{ flex: 1 }}> <Container maxWidth="xs" sx={{ flex: 1 }}>
<StyledForm <StyledForm onSubmit={handleSubmit(onSubmit)} style={{ width: "100%", height: "100%" }}>
onSubmit={handleSubmit(onSubmit)} <Stack sx={{ width: "100%", height: "100%" }} justifyContent="center" alignItems="center" spacing={6}>
style={{ width: "100%", height: "100%" }} <Stack sx={{ width: "100%", mb: 2 }} justifyContent="center" alignItems="center">
> <Typography variant="h4" color="primary" fontWeight={600} textAlign="center">
<Stack
sx={{ width: "100%", height: "100%" }}
justifyContent="center"
alignItems="center"
spacing={6}
>
<Stack
sx={{ width: "100%", mb: 2 }}
justifyContent="center"
alignItems="center"
>
<Typography
variant="h4"
color="primary"
fontWeight={600}
textAlign="center"
>
ورود به سامانه CRM ورود به سامانه CRM
</Typography> </Typography>
</Stack> </Stack>
@@ -129,11 +99,7 @@ const LoginForm = () => {
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<IconButton onClick={handleClickShowPassword}> <IconButton onClick={handleClickShowPassword}>
{showPassword ? ( {showPassword ? <VisibilityOff /> : <Visibility />}
<VisibilityOff />
) : (
<Visibility />
)}
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
), ),

13
src/components/dashboard/Users/DataTable.jsx
View File

@@ -73,8 +73,7 @@ const DataTable = () => {
grow: false, grow: false,
size: 130, size: 130,
ColumnSelectComponent: (props) => { ColumnSelectComponent: (props) => {
const { provinces, errorProvinces, loadingProvinces } = const { provinces, errorProvinces, loadingProvinces } = useProvinces();
useProvinces();
const getColumnSelectOptions = useMemo(() => { const getColumnSelectOptions = useMemo(() => {
if (loadingProvinces) { if (loadingProvinces) {
return [{ value: "loading", label: "در حال بارگذاری..." }]; return [{ value: "loading", label: "در حال بارگذاری..." }];
@@ -93,9 +92,7 @@ const DataTable = () => {
return ( return (
<CustomSelectByDependency <CustomSelectByDependency
{...props} {...props}
value={ value={loadingProvinces ? "loading" : props.filterParameters.value}
loadingProvinces ? "loading" : props.filterParameters.value
}
columnSelectOption={getColumnSelectOptions} columnSelectOption={getColumnSelectOptions}
/> />
); );
@@ -187,12 +184,10 @@ const DataTable = () => {
enableColumnFilter: false, enableColumnFilter: false,
grow: false, grow: false,
size: 100, size: 100,
Cell: ({ renderedCellValue }) => ( Cell: ({ renderedCellValue }) => <>{renderedCellValue == "male" ? "آقا" : "خانم"}</>,
<>{renderedCellValue == "male" ? "آقا" : "خانم"}</>
),
}, },
], ],
[], []
); );
return ( return (

25
src/components/dashboard/Users/RowActions/Delete/DeleteContent.jsx
View File

@@ -1,12 +1,6 @@
import { DELETE_USER } from "@/core/utils/routes"; import { DELETE_USER } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest"; import useRequest from "@/lib/hooks/useRequest";
import { import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
Button,
DialogActions,
DialogContent,
Stack,
Typography,
} from "@mui/material";
import { useState } from "react"; import { useState } from "react";
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => { const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
@@ -30,22 +24,11 @@ const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
<Typography mt={2}>آیا از حذف کاربر اطمینان دارید؟</Typography> <Typography mt={2}>آیا از حذف کاربر اطمینان دارید؟</Typography>
</Stack> </Stack>
</DialogContent> </DialogContent>
<DialogActions <DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }} <Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
>
<Button
onClick={() => setOpenDeleteDialog(false)}
variant="outlined"
color="secondary"
>
خیر ! خیر !
</Button> </Button>
<Button <Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
onClick={handleClick}
variant="contained"
color="error"
disabled={submitting}
>
{submitting ? "درحال حذف..." : "بله اطمینان دارم"} {submitting ? "درحال حذف..." : "بله اطمینان دارم"}
</Button> </Button>
</DialogActions> </DialogActions>

9
src/components/dashboard/Users/RowActions/Delete/index.jsx
View File

@@ -17,19 +17,14 @@ const Delete = ({ rowId, mutate }) => {
onClose={() => setOpenDeleteDialog(false)} onClose={() => setOpenDeleteDialog(false)}
PaperProps={{ PaperProps={{
sx: { sx: {
boxShadow: boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
"rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
}, },
}} }}
dir="rtl" dir="rtl"
maxWidth={"md"} maxWidth={"md"}
> >
<DialogTitle>حذف</DialogTitle> <DialogTitle>حذف</DialogTitle>
<DeleteContent <DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
rowId={rowId}
mutate={mutate}
setOpenDeleteDialog={setOpenDeleteDialog}
/>
</Dialog> </Dialog>
</> </>
); );

10
src/components/dashboard/Users/RowActions/Edit/Form/index.jsx
View File

@@ -34,14 +34,8 @@ const validationSchema = object().shape({
.required("شماره همراه خود را وارد کنید"), .required("شماره همراه خود را وارد کنید"),
gender: string().required("جنسیت خود را وارد کنید"), gender: string().required("جنسیت خود را وارد کنید"),
national_id: string() national_id: string()
.test( .test("max", "کد ملی باید شامل 10 رقم باشد", (value) => value.toString().length === 10)
"max", .test("validation", "کد ملی صحیح نمی باشد", (value) => validateNationalCode(value))
"کد ملی باید شامل 10 رقم باشد",
(value) => value.toString().length === 10,
)
.test("validation", "کد ملی صحیح نمی باشد", (value) =>
validateNationalCode(value),
)
.required("کد ملی خود را وارد کنید"), .required("کد ملی خود را وارد کنید"),
position: string().required("سمت خود را وارد کنید"), position: string().required("سمت خود را وارد کنید"),
province_id: string().required("استان خود را وارد کنید"), province_id: string().required("استان خود را وارد کنید"),

7
src/components/dashboard/Users/RowActions/Edit/index.jsx
View File

@@ -19,12 +19,7 @@ const UpdateUser = ({ values, mutate }) => {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Dialog maxWidth="sm" fullWidth={true} open={open}> <Dialog maxWidth="sm" fullWidth={true} open={open}>
<UpdateUserForm <UpdateUserForm open={open} setOpen={setOpen} mutate={mutate} values={values} />
open={open}
setOpen={setOpen}
mutate={mutate}
values={values}
/>
</Dialog> </Dialog>
</> </>
); );

6
src/components/dashboard/Users/RowActions/Online/index.jsx
View File

@@ -6,11 +6,7 @@ const OnlineCell = ({ user_id }) => {
const { clientsOnline } = useSocket(); const { clientsOnline } = useSocket();
return ( return (
<Stack alignItems={"center"}> <Stack alignItems={"center"}>
{clientsOnline.some((co) => co.user_id == user_id) ? ( {clientsOnline.some((co) => co.user_id == user_id) ? <Power color="success" /> : <PowerOff color="error" />}
<Power color="success" />
) : (
<PowerOff color="error" />
)}
</Stack> </Stack>
); );
}; };

4
src/components/dashboard/Users/RowActions/TelephoneId/index.jsx
View File

@@ -3,9 +3,7 @@ import { Stack } from "@mui/material";
const TelephoneId = ({ user_id }) => { const TelephoneId = ({ user_id }) => {
const { clientsOnline } = useSocket(); const { clientsOnline } = useSocket();
const telephone_id = clientsOnline.find( const telephone_id = clientsOnline.find((co) => co.user_id == user_id)?.telephone_id;
(co) => co.user_id == user_id,
)?.telephone_id;
return <Stack alignItems={"center"}>{telephone_id}</Stack>; return <Stack alignItems={"center"}>{telephone_id}</Stack>;
}; };
export default TelephoneId; export default TelephoneId;

22
src/components/dashboard/Users/Toolbar/Create/Form/index.jsx
View File

@@ -39,6 +39,7 @@ const defaultValues = {
province_id: "", province_id: "",
password: "", password: "",
role_id: "", role_id: "",
telephone_id: "",
}; };
const validationSchema = object().shape({ const validationSchema = object().shape({
@@ -49,21 +50,12 @@ const validationSchema = object().shape({
.required("شماره همراه خود را وارد کنید"), .required("شماره همراه خود را وارد کنید"),
gender: string().required("جنسیت خود را وارد کنید"), gender: string().required("جنسیت خود را وارد کنید"),
national_id: string() national_id: string()
.test( .test("max", "کد ملی باید شامل 10 رقم باشد", (value) => value.toString().length === 10)
"max", .test("validation", "کد ملی صحیح نمی باشد", (value) => validateNationalCode(value))
"کد ملی باید شامل 10 رقم باشد",
(value) => value.toString().length === 10,
)
.test("validation", "کد ملی صحیح نمی باشد", (value) =>
validateNationalCode(value),
)
.required("کد ملی خود را وارد کنید"), .required("کد ملی خود را وارد کنید"),
password: string() password: string()
.required("رمز عبور خود را وارد کنید") .required("رمز عبور خود را وارد کنید")
.matches( .matches(/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/, "رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد"),
/^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
"رمز عبور باید حداقل 8 کاراکتر و متشکل از عدد، حرف یا سمبل باشد",
),
position: string().required("سمت خود را وارد کنید"), position: string().required("سمت خود را وارد کنید"),
province_id: string().required("استان خود را وارد کنید"), province_id: string().required("استان خود را وارد کنید"),
role_id: string().required("نقش خود را وارد کنید"), role_id: string().required("نقش خود را وارد کنید"),
@@ -175,11 +167,7 @@ const CreateUserForm = ({ setOpen, mutate }) => {
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<IconButton onClick={handleClickShowPassword}> <IconButton onClick={handleClickShowPassword}>
{showPassword ? ( {showPassword ? <VisibilityOff /> : <Visibility />}
<VisibilityOff />
) : (
<Visibility />
)}
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
), ),

14
src/components/dashboard/Users/Toolbar/Create/index.jsx
View File

@@ -1,12 +1,6 @@
"use client"; "use client";
import { AddCircle } from "@mui/icons-material"; import { AddCircle } from "@mui/icons-material";
import { import { Button, Dialog, IconButton, useMediaQuery, useTheme } from "@mui/material";
Button,
Dialog,
IconButton,
useMediaQuery,
useTheme,
} from "@mui/material";
import CreateUserForm from "./Form"; import CreateUserForm from "./Form";
import { useState } from "react"; import { useState } from "react";
@@ -22,11 +16,7 @@ const CreateUser = ({ mutate }) => {
return ( return (
<> <>
{isMobile ? ( {isMobile ? (
<IconButton <IconButton aria-label="کاربر جدید" color="primary" onClick={handleOpen}>
aria-label="کاربر جدید"
color="primary"
onClick={handleOpen}
>
<AddCircle sx={{ fontSize: "25px" }} /> <AddCircle sx={{ fontSize: "25px" }} />
</IconButton> </IconButton>
) : ( ) : (

8
src/components/dashboard/dashboard/OnlineUsersReport/index.jsx
View File

@@ -3,10 +3,6 @@ import { Stack } from "@mui/material";
const OnlineUsersReport = () => { const OnlineUsersReport = () => {
const { clientsOnline } = useSocket(); const { clientsOnline } = useSocket();
return ( return <Stack>clientsOnline: {clientsOnline.length}</Stack>;
<Stack> };
clientsOnline: {clientsOnline.length}
</Stack>
)
}
export default OnlineUsersReport; export default OnlineUsersReport;

6
src/components/dashboard/dashboard/index.jsx
View File

@@ -1,4 +1,4 @@
"use client" "use client";
import { Stack } from "@mui/material"; import { Stack } from "@mui/material";
import OnlineUsersReport from "./OnlineUsersReport"; import OnlineUsersReport from "./OnlineUsersReport";
@@ -7,6 +7,6 @@ const DashboardPage = () => {
<Stack> <Stack>
<OnlineUsersReport /> <OnlineUsersReport />
</Stack> </Stack>
) );
} };
export default DashboardPage; export default DashboardPage;

21
src/components/layouts/dashboard/headerWithSidebar/HeaderMenu/index.jsx
View File

@@ -1,13 +1,5 @@
import { ExpandLess, ExpandMore, Link } from "@mui/icons-material"; import { ExpandLess, ExpandMore, Link } from "@mui/icons-material";
import { import { Button, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Stack } from "@mui/material";
Button,
Divider,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
Stack,
} from "@mui/material";
import NextLink from "next/link"; import NextLink from "next/link";
import { useState } from "react"; import { useState } from "react";
@@ -36,21 +28,14 @@ const HeaderMenu = ({ menu }) => {
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}> <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
{menu.subMenu.flatMap((subMenu, index) => [ {menu.subMenu.flatMap((subMenu, index) => [
...subMenu.map((sub) => ( ...subMenu.map((sub) => (
<MenuItem <MenuItem component={NextLink} href={sub.href} key={sub.title} onClick={handleClose}>
component={NextLink}
href={sub.href}
key={sub.title}
onClick={handleClose}
>
<ListItemIcon> <ListItemIcon>
<Link fontSize="small" /> <Link fontSize="small" />
</ListItemIcon> </ListItemIcon>
<ListItemText>{sub.title}</ListItemText> <ListItemText>{sub.title}</ListItemText>
</MenuItem> </MenuItem>
)), )),
index < menu.subMenu.length - 1 && ( index < menu.subMenu.length - 1 && <Divider key={`divider-${index}`} />,
<Divider key={`divider-${index}`} />
),
])} ])}
</Menu> </Menu>
</Stack> </Stack>

33
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx
View File

@@ -1,13 +1,5 @@
import { ExpandLess, ExpandMore } from "@mui/icons-material"; import { ExpandLess, ExpandMore } from "@mui/icons-material";
import { import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material";
Collapse,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Stack,
} from "@mui/material";
import Link from "next/link"; import Link from "next/link";
import SidebarBadge from "./SidebarBadge"; import SidebarBadge from "./SidebarBadge";
import SidebarSubitems from "./SidebarSubitems"; import SidebarSubitems from "./SidebarSubitems";
@@ -51,21 +43,10 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
))} ))}
</Stack> </Stack>
)} )}
{menuItem.hasSubitems ? ( {menuItem.hasSubitems ? menuItem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
menuItem.showSubitems ? (
<ExpandLess />
) : (
<ExpandMore />
)
) : null}
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
<Collapse <Collapse in={menuItem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
in={menuItem.showSubitems}
timeout="auto"
mountOnEnter={true}
unmountOnExit={true}
>
{menuItem.hasSubitems ? ( {menuItem.hasSubitems ? (
<List <List
disablePadding disablePadding
@@ -75,13 +56,7 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
}} }}
> >
{menuItem.Subitems.map((subitem, index) => { {menuItem.Subitems.map((subitem, index) => {
return ( return <SidebarSubitems key={index} dispatch={dispatch} subitem={subitem} />;
<SidebarSubitems
key={index}
dispatch={dispatch}
subitem={subitem}
/>
);
})} })}
</List> </List>
) : null} ) : null}

28
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarMenu.jsx
View File

@@ -16,15 +16,11 @@ function selectPage(item, route) {
showSubitems: item.route === route, showSubitems: item.route === route,
}; };
} else if (item.Subitems && Array.isArray(item.Subitems)) { } else if (item.Subitems && Array.isArray(item.Subitems)) {
const updatedSubitems = item.Subitems.map((subitem) => const updatedSubitems = item.Subitems.map((subitem) => selectPage(subitem, route));
selectPage(subitem, route),
);
return { return {
...item, ...item,
Subitems: updatedSubitems, Subitems: updatedSubitems,
showSubitems: updatedSubitems.some( showSubitems: updatedSubitems.some((subitem) => subitem.showSubitems || subitem.route === route),
(subitem) => subitem.showSubitems || subitem.route === route,
),
}; };
} }
return item; return item;
@@ -32,9 +28,7 @@ function selectPage(item, route) {
function toggleSubitems(items, actionId) { function toggleSubitems(items, actionId) {
return items.map((item) => return items.map((item) =>
actionId === item.id actionId === item.id ? { ...item, showSubitems: !item.showSubitems } : { ...item, showSubitems: false }
? { ...item, showSubitems: !item.showSubitems }
: { ...item, showSubitems: false },
); );
} }
@@ -52,9 +46,7 @@ function reducer(state, action) {
case "COLLAPSE_SUB_ITEMS": case "COLLAPSE_SUB_ITEMS":
return state.map((item) => return state.map((item) =>
item.hasSubitems item.hasSubitems ? { ...item, Subitems: toggleSubitems(item.Subitems, action.id) } : item
? { ...item, Subitems: toggleSubitems(item.Subitems, action.id) }
: item,
); );
case "COLLAPSE_SUB_SECOND_ITEMS": case "COLLAPSE_SUB_SECOND_ITEMS":
@@ -68,10 +60,10 @@ function reducer(state, action) {
...subitem, ...subitem,
Subitems: toggleSubitems(subitem.Subitems, action.id), Subitems: toggleSubitems(subitem.Subitems, action.id),
} }
: subitem, : subitem
), ),
} }
: item, : item
); );
case "SELECTED": case "SELECTED":
@@ -112,13 +104,7 @@ const SidebarMenu = () => {
{userPermissions && ( {userPermissions && (
<List sx={{ overflow: "auto", flex: 1 }} disablePadding dense> <List sx={{ overflow: "auto", flex: 1 }} disablePadding dense>
{menuItems.map((menuItem) => { {menuItems.map((menuItem) => {
return ( return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
<SidebarListItems
dispatch={dispatch}
key={menuItem.id}
menuItem={menuItem}
/>
);
})} })}
</List> </List>
)} )}

26
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx
View File

@@ -1,14 +1,5 @@
import { ExpandLess, ExpandMore } from "@mui/icons-material"; import { ExpandLess, ExpandMore } from "@mui/icons-material";
import { import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material";
Box,
Collapse,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
Stack,
} from "@mui/material";
import Link from "next/link"; import Link from "next/link";
import SidebarBadge from "./SidebarBadge"; import SidebarBadge from "./SidebarBadge";
@@ -64,12 +55,7 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
)} )}
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
<Collapse <Collapse in={subitem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>
in={subitem.showSubitems}
timeout="auto"
mountOnEnter={true}
unmountOnExit={true}
>
{subitem.hasSubitems ? ( {subitem.hasSubitems ? (
<List <List
disablePadding disablePadding
@@ -79,13 +65,7 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
}} }}
> >
{subitem.Subitems.map((subSubitem, index) => { {subitem.Subitems.map((subSubitem, index) => {
return ( return <SidebarSubitems key={index} dispatch={dispatch} subitem={subSubitem} />;
<SidebarSubitems
key={index}
dispatch={dispatch}
subitem={subSubitem}
/>
);
})} })}
</List> </List>
) : null} ) : null}

35
src/components/layouts/dashboard/headerWithSidebar/index.jsx
View File

@@ -1,17 +1,7 @@
"use client"; "use client";
import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import MenuIcon from "@mui/icons-material/Menu"; import MenuIcon from "@mui/icons-material/Menu";
import { import { Box, Drawer, IconButton, Stack, styled, Toolbar, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Drawer,
IconButton,
Stack,
styled,
Toolbar,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import MuiAppBar from "@mui/material/AppBar"; import MuiAppBar from "@mui/material/AppBar";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import HeaderMenu from "./HeaderMenu"; import HeaderMenu from "./HeaderMenu";
@@ -21,8 +11,7 @@ import SidebarMenu from "./Sidebar/SidebarMenu";
const drawerWidth = 300; const drawerWidth = 300;
const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })( const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
({ theme, open }) => ({
flexGrow: 1, flexGrow: 1,
height: "100%", height: "100%",
transition: theme.transitions.create("margin", { transition: theme.transitions.create("margin", {
@@ -37,8 +26,7 @@ const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(
}), }),
marginLeft: 0, marginLeft: 0,
}), }),
}), }));
);
const AppBar = styled(MuiAppBar, { const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== "open", shouldForwardProp: (prop) => prop !== "open",
@@ -92,11 +80,7 @@ const HeaderWithSidebar = ({ children }) => {
width: "100%", width: "100%",
}} }}
> >
<AppBar <AppBar sx={{ position: "fixed", top: "unset" }} elevation={0} open={open}>
sx={{ position: "fixed", top: "unset" }}
elevation={0}
open={open}
>
<Toolbar variant="dense" sx={{ minHeight: 40 }}> <Toolbar variant="dense" sx={{ minHeight: 40 }}>
<IconButton <IconButton
color="inherit" color="inherit"
@@ -158,18 +142,11 @@ const HeaderWithSidebar = ({ children }) => {
</IconButton> </IconButton>
</DrawerHeader> </DrawerHeader>
<SidebarMenu /> <SidebarMenu />
<Typography <Typography textAlign={"center"} variant="caption" sx={{ py: 0.2, fontFamily: "sans-serif" }}>
textAlign={"center"}
variant="caption"
sx={{ py: 0.2, fontFamily: "sans-serif" }}
>
v{process.env.NEXT_PUBLIC_VERSION} v{process.env.NEXT_PUBLIC_VERSION}
</Typography> </Typography>
</Drawer> </Drawer>
<Main <Main open={open} sx={{ height: "100%", width: "100%", overflow: "hidden" }}>
open={open}
sx={{ height: "100%", width: "100%", overflow: "hidden" }}
>
<DrawerHeader /> <DrawerHeader />
<Box <Box
sx={{ sx={{

6
src/components/widget/call/CallTabs/CallTabPanel/CallActions/ActionHeader.jsx
View File

@@ -15,11 +15,7 @@ const ActionHeader = ({ tab }) => {
<Typography variant="subtitle1" sx={{ marginRight: 1, color: "#fff" }}> <Typography variant="subtitle1" sx={{ marginRight: 1, color: "#fff" }}>
.... عملیات های مربوط به تماس: .... عملیات های مربوط به تماس:
</Typography> </Typography>
<Typography <Typography data-testid="phone_number" variant="subtitle1" sx={{ color: "#fff" }}>
data-testid="phone_number"
variant="subtitle1"
sx={{ color: "#fff" }}
>
{tab.phone_number} .... {tab.phone_number} ....
</Typography> </Typography>
</Stack> </Stack>

4
src/components/widget/call/CallTabs/CallTabPanel/CallActions/CallActionCategoriesButton.jsx
View File

@@ -9,9 +9,7 @@ const CallActionCategoriesButton = ({ category, control }) => {
<Button <Button
sx={{ py: 1.5 }} sx={{ py: 1.5 }}
fullWidth fullWidth
variant={ variant={field.value === category.category_id ? "contained" : "outlined"}
field.value === category.category_id ? "contained" : "outlined"
}
color={"primary"} color={"primary"}
onClick={() => { onClick={() => {
field.onChange(category.category_id); field.onChange(category.category_id);

2
src/components/widget/call/CallTabs/CallTabPanel/CallActions/CallActionSubcategoriesButton.jsx
View File

@@ -12,7 +12,7 @@ const CallActionSubcategoriesButton = ({ sub_category, control, onSubmit }) => {
onSubmit(); onSubmit();
}, 0); }, 0);
}, },
[sub_category.subcategory_id], [sub_category.subcategory_id]
); );
return ( return (

6
src/components/widget/call/CallTabs/CallTabPanel/CallActions/CallActionsCategories.jsx
View File

@@ -11,11 +11,7 @@ const CallActionsCategories = ({ control }) => {
</Divider> </Divider>
<Stack sx={{ m: 1, p: 1 }} direction={"row"} spacing={3}> <Stack sx={{ m: 1, p: 1 }} direction={"row"} spacing={3}>
{categoryLists.map((category) => ( {categoryLists.map((category) => (
<CallActionCategoriesButton <CallActionCategoriesButton key={category.category_id} category={category} control={control} />
key={category.category_id}
category={category}
control={control}
/>
))} ))}
</Stack> </Stack>
</> </>

10
src/components/widget/call/CallTabs/CallTabPanel/CallActions/index.jsx
View File

@@ -39,8 +39,7 @@ function CallActions({ tab }) {
const onSubmit = handleSubmit(async (data) => { const onSubmit = handleSubmit(async (data) => {
try { try {
const formData = new FormData(); const formData = new FormData();
data.description != "" && data.description != "" && formData.append("description", data.description);
formData.append("description", data.description);
formData.append("category_id", data.category_id); formData.append("category_id", data.category_id);
formData.append("subcategory_id", data.subcategory_id); formData.append("subcategory_id", data.subcategory_id);
await requestServer(`${CALL_ACTION}/${tab.id}`, "post", { await requestServer(`${CALL_ACTION}/${tab.id}`, "post", {
@@ -71,12 +70,7 @@ function CallActions({ tab }) {
zIndex: 9999, zIndex: 9999,
}} }}
> >
<LoadingHardPage <LoadingHardPage width={80} height={80} loading={true} sx={{ position: "absolute" }} />
width={80}
height={80}
loading={true}
sx={{ position: "absolute" }}
/>
</Box> </Box>
)} )}
</Stack> </Stack>

4
src/components/widget/call/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/PreviousOperatorData.jsx
View File

@@ -12,9 +12,7 @@ const PreviousOperatorData = ({ historyItem }) => {
</Box> </Box>
<Stack> <Stack>
<Stack direction={"row"} sx={{ alignItems: "end" }}> <Stack direction={"row"} sx={{ alignItems: "end" }}>
<Typography sx={{ mr: 1 }}> <Typography sx={{ mr: 1 }}>{historyItem.operator_full_name}</Typography>
{historyItem.operator_full_name}
</Typography>
<Typography variant="caption" sx={{ color: "secondary.main" }}> <Typography variant="caption" sx={{ color: "secondary.main" }}>
(کارشناس) (کارشناس)
</Typography> </Typography>

22
src/components/widget/call/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/Topics..jsx
View File

@@ -13,9 +13,7 @@ const Topics = ({ historyItem }) => {
> >
<Chip label={"موضوع"} size="small" variant="outlined" color="primary" /> <Chip label={"موضوع"} size="small" variant="outlined" color="primary" />
<Divider sx={{ flex: 1 }} /> <Divider sx={{ flex: 1 }} />
{historyItem.category_name && ( {historyItem.category_name && <Chip label={historyItem.category_name} />}
<Chip label={historyItem.category_name} />
)}
</Stack> </Stack>
<Stack <Stack
sx={{ sx={{
@@ -25,16 +23,9 @@ const Topics = ({ historyItem }) => {
spacing={1} spacing={1}
direction={"row"} direction={"row"}
> >
<Chip <Chip label={"زیر موضوع"} size="small" variant="outlined" color="primary" />
label={"زیر موضوع"}
size="small"
variant="outlined"
color="primary"
/>
<Divider sx={{ flex: 1 }} /> <Divider sx={{ flex: 1 }} />
{historyItem.subcategory_name && ( {historyItem.subcategory_name && <Chip label={historyItem.subcategory_name} />}
<Chip label={historyItem.subcategory_name} />
)}
</Stack> </Stack>
<Stack <Stack
sx={{ sx={{
@@ -44,12 +35,7 @@ const Topics = ({ historyItem }) => {
spacing={1} spacing={1}
direction={"row"} direction={"row"}
> >
<Chip <Chip label={"توضیحات تماس"} size="small" variant="outlined" color="primary" />
label={"توضیحات تماس"}
size="small"
variant="outlined"
color="primary"
/>
<Divider sx={{ flex: 1 }} /> <Divider sx={{ flex: 1 }} />
{historyItem.description && <Chip label={historyItem.description} />} {historyItem.description && <Chip label={historyItem.description} />}
</Stack> </Stack>

9
src/components/widget/call/CallTabs/CallTabPanel/CallHistory/LoadingHistory.jsx
View File

@@ -1,11 +1,4 @@
import { import { Box, List, ListItem, ListItemAvatar, ListItemText, Skeleton } from "@mui/material";
Box,
List,
ListItem,
ListItemAvatar,
ListItemText,
Skeleton,
} from "@mui/material";
const LoadingHistory = () => { const LoadingHistory = () => {
return ( return (

11
src/components/widget/call/CallTabs/CallTabPanel/CallHistory/index.jsx
View File

@@ -9,12 +9,11 @@ import { Headphones } from "@mui/icons-material";
const max_size = 10; const max_size = 10;
const CallHistory = ({ tab }) => { const CallHistory = ({ tab }) => {
const { const { firstItemOfHistory, historyList, isLoadingHistoryList, errorHistoryList } = useCallerHistory(
firstItemOfHistory, tab.id,
historyList, tab.phone_number,
isLoadingHistoryList, max_size
errorHistoryList, );
} = useCallerHistory(tab.id, tab.phone_number, max_size);
const [showRestOfHistory, setShowRestOfHistory] = useState(false); const [showRestOfHistory, setShowRestOfHistory] = useState(false);
return ( return (

7
src/components/widget/call/CallTabs/CallTabsList/CallTabDetails.jsx
View File

@@ -4,12 +4,7 @@ import CallTabTime from "./CallTabTime";
const CallTabDetails = ({ tab }) => { const CallTabDetails = ({ tab }) => {
return ( return (
<Stack <Stack direction="row" justifyContent="center" alignItems="center" spacing={3}>
direction="row"
justifyContent="center"
alignItems="center"
spacing={3}
>
<Call /> <Call />
<Stack alignItems={"start"}> <Stack alignItems={"start"}>
<Typography>{tab.phone_number}</Typography> <Typography>{tab.phone_number}</Typography>

3
src/components/widget/call/CallTabs/CallTabsList/CallTabLabel.jsx
View File

@@ -14,8 +14,7 @@ const CallTabLabel = ({ tab, index }) => {
sx={{ sx={{
width: "100%", width: "100%",
px: 1, px: 1,
borderRight: borderRight: activeCall === index ? 0 : activeCall - 1 === index ? 0 : 1,
activeCall === index ? 0 : activeCall - 1 === index ? 0 : 1,
borderRightColor: "divider", borderRightColor: "divider",
}} }}
direction={"row"} direction={"row"}

6
src/components/widget/call/CallWidgetDialog.jsx
View File

@@ -35,11 +35,7 @@ const CallWidgetDialog = () => {
}, [calls.length]); }, [calls.length]);
return ( return (
<Dialog <Dialog fullScreen open={openCallDialog} slots={{ transition: DialogTransition }}>
fullScreen
open={openCallDialog}
slots={{ transition: DialogTransition }}
>
<CallTabs /> <CallTabs />
</Dialog> </Dialog>
); );

11
src/core/components/CustomDatePicker.jsx
View File

@@ -5,12 +5,7 @@ import { LocalizationProvider, MobileDatePicker } from "@mui/x-date-pickers";
import { IconButton, InputAdornment } from "@mui/material"; import { IconButton, InputAdornment } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear"; import ClearIcon from "@mui/icons-material/Clear";
const CustomDatePicker = ({ const CustomDatePicker = ({ dateValue, setDateValue, placeholder = "انتخاب تاریخ", size = "small" }) => {
dateValue,
setDateValue,
placeholder = "انتخاب تاریخ",
size = "small",
}) => {
const handleDateChange = (newValue) => { const handleDateChange = (newValue) => {
setDateValue(newValue); setDateValue(newValue);
}; };
@@ -18,9 +13,7 @@ const CustomDatePicker = ({
return ( return (
<LocalizationProvider <LocalizationProvider
dateAdapter={AdapterDateFnsJalali} dateAdapter={AdapterDateFnsJalali}
localeText={ localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
faIR.components.MuiLocalizationProvider.defaultProps.localeText
}
> >
<MobileDatePicker <MobileDatePicker
value={dateValue || null} value={dateValue || null}

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

@@ -23,10 +23,7 @@ const rowSelectionReducer = (state, action) => {
const DataTable_Main = (props) => { const DataTable_Main = (props) => {
const request = useRequest(); const request = useRequest();
const [rowSelection, dispatchRowSelection] = useReducer( const [rowSelection, dispatchRowSelection] = useReducer(rowSelectionReducer, {});
rowSelectionReducer,
{},
);
const { filterData, sortData, setSortData, hideData } = useDataTable(); const { filterData, sortData, setSortData, hideData } = useDataTable();
const { const {
need_filter, need_filter,
@@ -56,20 +53,12 @@ const DataTable_Main = (props) => {
params.set("size", pagination.pageSize); params.set("size", pagination.pageSize);
if (specialFilter) { if (specialFilter) {
const filteredSpecialFilterData = Object.values(specialFilter).filter( const filteredSpecialFilterData = Object.values(specialFilter).filter(
(filter) => !isArrayEmpty(filter.value), (filter) => !isArrayEmpty(filter.value)
); );
params.set("filters", JSON.stringify(filteredSpecialFilterData || [])); params.set("filters", JSON.stringify(filteredSpecialFilterData || []));
} else { } else {
const filteredFilterData = DataTableFilterDataStructure( const filteredFilterData = DataTableFilterDataStructure(filterData, isArrayEmpty);
filterData, params.set("filters", JSON.stringify(filteredFilterData.length === 0 ? [] : filteredFilterData));
isArrayEmpty,
);
params.set(
"filters",
JSON.stringify(
filteredFilterData.length === 0 ? [] : filteredFilterData,
),
);
} }
params.set( params.set(
"sorting", "sorting",
@@ -77,8 +66,8 @@ const DataTable_Main = (props) => {
Object.values(sortData).map(({ id, ...rest }) => ({ Object.values(sortData).map(({ id, ...rest }) => ({
...rest, ...rest,
id: id.replace(/__/g, "."), id: id.replace(/__/g, "."),
})), }))
), )
); );
return `${table_url}?${params}`; return `${table_url}?${params}`;
}, [table_url, filterData, pagination, sortData, specialFilter]); }, [table_url, filterData, pagination, sortData, specialFilter]);
@@ -97,16 +86,12 @@ const DataTable_Main = (props) => {
} }
}; };
const { data, isValidating, mutate } = useSWR( const { data, isValidating, mutate } = useSWR(props.data ? "" : fetchUrl(), fetcher, {
props.data ? "" : fetchUrl(),
fetcher,
{
revalidateIfStale: true, revalidateIfStale: true,
revalidateOnFocus: false, revalidateOnFocus: false,
revalidateOnReconnect: true, revalidateOnReconnect: true,
keepPreviousData: true, keepPreviousData: true,
}, });
);
useEffect(() => { useEffect(() => {
if (!isValidating) return; if (!isValidating) return;
@@ -118,8 +103,7 @@ const DataTable_Main = (props) => {
columns, columns,
data: data ?? [], data: data ?? [],
muiTableBodyRowProps: ({ row }) => ({ muiTableBodyRowProps: ({ row }) => ({
onClick: () => onClick: () => dispatchRowSelection({ type: "TOGGLE_ROW", payload: row.id }),
dispatchRowSelection({ type: "TOGGLE_ROW", payload: row.id }),
selected: !!rowSelection[row.id], selected: !!rowSelection[row.id],
}), }),
initialState: { initialState: {
@@ -167,11 +151,7 @@ const DataTable_Main = (props) => {
renderTopToolbarCustomActions: ({ table }) => ( renderTopToolbarCustomActions: ({ table }) => (
<> <>
{TableToolbar && ( {TableToolbar && (
<TableToolbar <TableToolbar table={table} mutate={mutate} filterData={specialFilter || filterData} />
table={table}
mutate={mutate}
filterData={specialFilter || filterData}
/>
)} )}
</> </>
), ),

24
src/core/components/DataTable/body/TableBody.js
View File

@@ -2,9 +2,7 @@ import { parseFromValuesOrFunc } from "@/core/utils/utils";
import { TableBody, Typography } from "@mui/material"; import { TableBody, Typography } from "@mui/material";
import { useMRT_RowVirtualizer, useMRT_Rows } from "material-react-table"; import { useMRT_RowVirtualizer, useMRT_Rows } from "material-react-table";
import { memo, useMemo } from "react"; import { memo, useMemo } from "react";
import DataTable_TableBodyRow, { import DataTable_TableBodyRow, { Memo_DataTable_TableBodyRow } from "./TableBodyRow";
Memo_DataTable_TableBodyRow,
} from "./TableBodyRow";
const DataTable_TableBody = ({ columnVirtualizer, table, ...rest }) => { const DataTable_TableBody = ({ columnVirtualizer, table, ...rest }) => {
const { const {
@@ -33,12 +31,8 @@ const DataTable_TableBody = ({ columnVirtualizer, table, ...rest }) => {
...rest, ...rest,
}; };
const tableHeadHeight = const tableHeadHeight = ((enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight) || 0;
((enableStickyHeader || isFullScreen) && const tableFooterHeight = (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
tableHeadRef.current?.clientHeight) ||
0;
const tableFooterHeight =
(enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
const pinnedRowIds = useMemo(() => { const pinnedRowIds = useMemo(() => {
if (!rowPinning.bottom?.length && !rowPinning.top?.length) return []; if (!rowPinning.bottom?.length && !rowPinning.top?.length) return [];
@@ -61,8 +55,7 @@ const DataTable_TableBody = ({ columnVirtualizer, table, ...rest }) => {
return ( return (
<> <>
{!rowPinningDisplayMode?.includes("sticky") && {!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("top") && (
getIsSomeRowsPinned("top") && (
<TableBody <TableBody
{...tableBodyProps} {...tableBodyProps}
sx={(theme) => ({ sx={(theme) => ({
@@ -91,9 +84,7 @@ const DataTable_TableBody = ({ columnVirtualizer, table, ...rest }) => {
{...tableBodyProps} {...tableBodyProps}
sx={(theme) => ({ sx={(theme) => ({
display: layoutMode?.startsWith("grid") ? "grid" : undefined, display: layoutMode?.startsWith("grid") ? "grid" : undefined,
height: rowVirtualizer height: rowVirtualizer ? `${rowVirtualizer.getTotalSize()}px` : undefined,
? `${rowVirtualizer.getTotalSize()}px`
: undefined,
minHeight: !rows.length ? "100px" : undefined, minHeight: !rows.length ? "100px" : undefined,
position: "relative", position: "relative",
...parseFromValuesOrFunc(tableBodyProps?.sx, theme), ...parseFromValuesOrFunc(tableBodyProps?.sx, theme),
@@ -164,8 +155,7 @@ const DataTable_TableBody = ({ columnVirtualizer, table, ...rest }) => {
</> </>
))} ))}
</TableBody> </TableBody>
{!rowPinningDisplayMode?.includes("sticky") && {!rowPinningDisplayMode?.includes("sticky") && getIsSomeRowsPinned("bottom") && (
getIsSomeRowsPinned("bottom") && (
<TableBody <TableBody
{...tableBodyProps} {...tableBodyProps}
sx={(theme) => ({ sx={(theme) => ({
@@ -197,5 +187,5 @@ export default DataTable_TableBody;
export const Memo_DataTable_TableBody = memo( export const Memo_DataTable_TableBody = memo(
DataTable_TableBody, DataTable_TableBody,
(prev, next) => prev.table.options.data === next.table.options.data, (prev, next) => prev.table.options.data === next.table.options.data
); );

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

@@ -1,7 +1,4 @@
import { import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
getCommonMRTCellStyles,
parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { useTheme } from "@emotion/react"; import { useTheme } from "@emotion/react";
import { Skeleton, TableCell } from "@mui/material"; import { Skeleton, TableCell } from "@mui/material";
import { isCellEditable, openEditingCell } from "material-react-table"; import { isCellEditable, openEditingCell } from "material-react-table";
@@ -9,15 +6,7 @@ import { memo, useEffect, useMemo, useState } from "react";
import DataTable_CopyButton from "../buttons/CopyButton"; import DataTable_CopyButton from "../buttons/CopyButton";
import DataTable_TableBodyCellValue from "./TableBodyCellValue"; import DataTable_TableBodyCellValue from "./TableBodyCellValue";
const DataTable_TableBodyCell = ({ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table, ...rest }) => {
cell,
numRows,
rowRef,
staticColumnIndex,
staticRowIndex,
table,
...rest
}) => {
const theme = useTheme(); const theme = useTheme();
const { const {
getState, getState,
@@ -75,9 +64,7 @@ const DataTable_TableBodyCell = ({
if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return; if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
const size = column.getSize(); const size = column.getSize();
setSkeletonWidth( setSkeletonWidth(
columnDefType === "display" columnDefType === "display" ? size / 2 : Math.round(Math.random() * (size - size / 3) + size / 3)
? size / 2
: Math.round(Math.random() * (size - size / 3) + size / 3),
); );
}, [isLoading, showSkeletons]); }, [isLoading, showSkeletons]);
@@ -90,8 +77,7 @@ const DataTable_TableBodyCell = ({
const isLastColumn = column.getIsLastColumn(); const isLastColumn = column.getIsLastColumn();
const isLastRow = numRows && staticRowIndex === numRows - 1; const isLastRow = numRows && staticRowIndex === numRows - 1;
const isResizingColumn = columnSizingInfo.isResizingColumn === column.id; const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
const showResizeBorder = const showResizeBorder = isResizingColumn && columnResizeMode === "onChange";
isResizingColumn && columnResizeMode === "onChange";
const borderStyle = showResizeBorder const borderStyle = showResizeBorder
? `2px solid ${draggingBorderColor} !important` ? `2px solid ${draggingBorderColor} !important`
@@ -102,65 +88,44 @@ const DataTable_TableBodyCell = ({
: undefined; : undefined;
if (showResizeBorder) { if (showResizeBorder) {
return columnResizeDirection === "ltr" return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
? { borderRight: borderStyle }
: { borderLeft: borderStyle };
} }
return borderStyle return borderStyle
? { ? {
borderBottom: borderBottom:
isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn) isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn) ? borderStyle : undefined,
? borderStyle
: undefined,
borderLeft: borderLeft:
isDraggingColumn || isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isFirstColumn)
isHoveredColumn ||
((isDraggingRow || isHoveredRow) && isFirstColumn)
? borderStyle ? borderStyle
: undefined, : undefined,
borderRight: borderRight:
isDraggingColumn || isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isLastColumn)
isHoveredColumn ||
((isDraggingRow || isHoveredRow) && isLastColumn)
? borderStyle ? borderStyle
: undefined, : undefined,
borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined, borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
} }
: undefined; : undefined;
}, [ }, [columnSizingInfo.isResizingColumn, draggingColumn, draggingRow, hoveredColumn, hoveredRow, staticRowIndex]);
columnSizingInfo.isResizingColumn,
draggingColumn,
draggingRow,
hoveredColumn,
hoveredRow,
staticRowIndex,
]);
const isColumnPinned = const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
enableColumnPinning &&
columnDef.columnDefType !== "group" &&
column.getIsPinned();
const isEditable = isCellEditable({ cell, table }); const isEditable = isCellEditable({ cell, table });
const isEditing = const isEditing =
isEditable && isEditable &&
!["custom", "modal"].includes(editDisplayMode) && !["custom", "modal"].includes(editDisplayMode) &&
(editDisplayMode === "table" || (editDisplayMode === "table" || editingRow?.id === row.id || editingCell?.id === cell.id) &&
editingRow?.id === row.id ||
editingCell?.id === cell.id) &&
!row.getIsGrouped(); !row.getIsGrouped();
const isCreating = const isCreating = isEditable && createDisplayMode === "row" && creatingRow?.id === row.id;
isEditable && createDisplayMode === "row" && creatingRow?.id === row.id;
const showClickToCopyButton = const showClickToCopyButton =
(parseFromValuesOrFunc(enableClickToCopy, cell) === true || (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) && parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
!["context-menu", false].includes( !["context-menu", false].includes(
// @ts-ignore // @ts-ignore
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell), parseFromValuesOrFunc(columnDef.enableClickToCopy, cell)
); );
const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell); const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
@@ -181,9 +146,7 @@ const DataTable_TableBodyCell = ({
setHoveredColumn(null); setHoveredColumn(null);
} }
if (enableColumnOrdering && draggingColumn) { if (enableColumnOrdering && draggingColumn) {
setHoveredColumn( setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
columnDef.enableColumnOrdering !== false ? column : null,
);
} }
}; };
@@ -227,10 +190,7 @@ const DataTable_TableBodyCell = ({
: isEditable && editDisplayMode === "cell" : isEditable && editDisplayMode === "cell"
? "pointer" ? "pointer"
: "inherit", : "inherit",
outline: outline: actionCell?.id === cell.id ? `1px solid ${theme.palette.grey[500]}` : undefined,
actionCell?.id === cell.id
? `1px solid ${theme.palette.grey[500]}`
: undefined,
outlineOffset: "-1px", outlineOffset: "-1px",
overflow: "hidden", overflow: "hidden",
p: p:
@@ -247,8 +207,7 @@ const DataTable_TableBodyCell = ({
: "1.5rem", : "1.5rem",
textOverflow: columnDefType !== "display" ? "ellipsis" : undefined, textOverflow: columnDefType !== "display" ? "ellipsis" : undefined,
whiteSpace: whiteSpace: row.getIsPinned() || density === "compact" ? "nowrap" : "normal",
row.getIsPinned() || density === "compact" ? "nowrap" : "normal",
...getCommonMRTCellStyles({ ...getCommonMRTCellStyles({
column, column,
table, table,
@@ -264,16 +223,9 @@ const DataTable_TableBodyCell = ({
{cell.getIsPlaceholder() ? ( {cell.getIsPlaceholder() ? (
(columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null) (columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null)
) : showSkeletons !== false && (isLoading || showSkeletons) ? ( ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
<Skeleton <Skeleton animation="wave" height={20} width={skeletonWidth} {...skeletonProps} />
animation="wave"
height={20}
width={skeletonWidth}
{...skeletonProps}
/>
) : columnDefType === "display" && ) : columnDefType === "display" &&
(["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes( (["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
column.id,
) ||
!row.getIsGrouped()) ? ( !row.getIsGrouped()) ? (
columnDef.Cell?.({ columnDef.Cell?.({
cell, cell,
@@ -292,9 +244,7 @@ const DataTable_TableBodyCell = ({
) : ( ) : (
<DataTable_TableBodyCellValue {...cellValueProps} /> <DataTable_TableBodyCellValue {...cellValueProps} />
)} )}
{cell.getIsGrouped() && !columnDef.GroupedCell && ( {cell.getIsGrouped() && !columnDef.GroupedCell && <> ({row.subRows?.length})</>}
<> ({row.subRows?.length})</>
)}
</> </>
)} )}
</TableCell> </TableCell>
@@ -302,7 +252,4 @@ const DataTable_TableBodyCell = ({
}; };
export default DataTable_TableBodyCell; export default DataTable_TableBodyCell;
export const Memo_DataTable_TableBodyCell = memo( export const Memo_DataTable_TableBodyCell = memo(DataTable_TableBodyCell, (prev, next) => next.cell === prev.cell);
DataTable_TableBodyCell,
(prev, next) => next.cell === prev.cell,
);

15
src/core/components/DataTable/body/TableBodyCellValue.js
View File

@@ -2,13 +2,7 @@ import { Box } from "@mui/material";
const allowedTypes = ["string", "number"]; const allowedTypes = ["string", "number"];
const DataTable_TableBodyCellValue = ({ const DataTable_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table }) => {
cell,
rowRef,
staticColumnIndex,
staticRowIndex,
table,
}) => {
const { const {
getState, getState,
options: { options: {
@@ -54,13 +48,10 @@ const DataTable_TableBodyCellValue = ({
((filterValue && ((filterValue &&
allowedTypes.includes(typeof filterValue) && allowedTypes.includes(typeof filterValue) &&
["autocomplete", "text"].includes(columnDef.filterVariant)) || ["autocomplete", "text"].includes(columnDef.filterVariant)) ||
(globalFilter && (globalFilter && allowedTypes.includes(typeof globalFilter) && column.getCanGlobalFilter()))
allowedTypes.includes(typeof globalFilter) &&
column.getCanGlobalFilter()))
) { ) {
const chunks = highlightWords?.({ const chunks = highlightWords?.({
matchExactly: matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== "fuzzy",
(filterValue ? columnDef._filterFn : globalFilterFn) !== "fuzzy",
query: (filterValue ?? globalFilter ?? "").toString(), query: (filterValue ?? globalFilter ?? "").toString(),
text: renderedCellValue?.toString(), text: renderedCellValue?.toString(),
}); });

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

@@ -1,15 +1,9 @@
import { import { commonCellBeforeAfterStyles, getCommonPinnedCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
commonCellBeforeAfterStyles,
getCommonPinnedCellStyles,
parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { useTheme } from "@emotion/react"; import { useTheme } from "@emotion/react";
import { TableRow, alpha, darken, lighten } from "@mui/material"; import { TableRow, alpha, darken, lighten } from "@mui/material";
import { getIsRowSelected } from "material-react-table"; import { getIsRowSelected } from "material-react-table";
import { memo, useMemo, useRef } from "react"; import { memo, useMemo, useRef } from "react";
import DataTable_TableBodyCell, { import DataTable_TableBodyCell, { Memo_DataTable_TableBodyCell } from "./TableBodyCell";
Memo_DataTable_TableBodyCell,
} from "./TableBodyCell";
import DataTable_TableDetailPanel from "./TableDetailPanel"; import DataTable_TableDetailPanel from "./TableDetailPanel";
const DataTable_TableBodyRow = ({ const DataTable_TableBodyRow = ({
@@ -34,11 +28,7 @@ const DataTable_TableBodyRow = ({
enableStickyHeader, enableStickyHeader,
layoutMode, layoutMode,
memoMode, memoMode,
mrtTheme: { mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor },
baseBackgroundColor,
pinnedRowBackgroundColor,
selectedRowBackgroundColor,
},
muiTableBodyRowProps, muiTableBodyRowProps,
renderDetailPanel, renderDetailPanel,
rowPinningDisplayMode, rowPinningDisplayMode,
@@ -46,21 +36,12 @@ const DataTable_TableBodyRow = ({
refs: { tableFooterRef, tableHeadRef }, refs: { tableFooterRef, tableHeadRef },
setHoveredRow, setHoveredRow,
} = table; } = table;
const { const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning } =
density, getState();
draggingColumn,
draggingRow,
editingCell,
editingRow,
hoveredRow,
isFullScreen,
rowPinning,
} = getState();
const visibleCells = row.getVisibleCells(); const visibleCells = row.getVisibleCells();
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
columnVirtualizer ?? {};
const isRowSelected = getIsRowSelected({ row, table }); const isRowSelected = getIsRowSelected({ row, table });
const isRowPinned = enableRowPinning && row.getIsPinned(); const isRowPinned = enableRowPinning && row.getIsPinned();
@@ -77,30 +58,17 @@ const DataTable_TableBodyRow = ({
}; };
const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => { const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
if ( if (!enableRowPinning || !rowPinningDisplayMode?.includes("sticky") || !pinnedRowIds || !row.getIsPinned())
!enableRowPinning ||
!rowPinningDisplayMode?.includes("sticky") ||
!pinnedRowIds ||
!row.getIsPinned()
)
return []; return [];
return [ return [[...pinnedRowIds].reverse().indexOf(row.id), pinnedRowIds.indexOf(row.id)];
[...pinnedRowIds].reverse().indexOf(row.id),
pinnedRowIds.indexOf(row.id),
];
}, [pinnedRowIds, rowPinning]); }, [pinnedRowIds, rowPinning]);
const tableHeadHeight = const tableHeadHeight = ((enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight) || 0;
((enableStickyHeader || isFullScreen) && const tableFooterHeight = (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
tableHeadRef.current?.clientHeight) ||
0;
const tableFooterHeight =
(enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme); const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme);
const defaultRowHeight = const defaultRowHeight = density === "compact" ? 37 : density === "comfortable" ? 53 : 69;
density === "compact" ? 37 : density === "comfortable" ? 53 : 69;
const customRowHeight = const customRowHeight =
// @ts-ignore // @ts-ignore
@@ -152,9 +120,7 @@ const DataTable_TableBodyRow = ({
selected={isRowSelected} selected={isRowSelected}
{...tableRowProps} {...tableRowProps}
style={{ style={{
transform: virtualRow transform: virtualRow ? `translateY(${virtualRow.start}px)` : undefined,
? `translateY(${virtualRow.start}px)`
: undefined,
...tableRowProps?.style, ...tableRowProps?.style,
}} }}
sx={(theme) => ({ sx={(theme) => ({
@@ -195,16 +161,12 @@ const DataTable_TableBodyRow = ({
: undefined, : undefined,
transition: virtualRow ? "none" : "all 150ms ease-in-out", transition: virtualRow ? "none" : "all 150ms ease-in-out",
width: "100%", width: "100%",
zIndex: zIndex: rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
...sx, ...sx,
})} })}
> >
{virtualPaddingLeft ? ( {virtualPaddingLeft ? <td style={{ display: "flex", width: virtualPaddingLeft }} /> : null}
<td style={{ display: "flex", width: virtualPaddingLeft }} /> {(virtualColumns ?? visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
) : null}
{(virtualColumns ?? visibleCells).map(
(cellOrVirtualCell, staticColumnIndex) => {
let cell = cellOrVirtualCell; let cell = cellOrVirtualCell;
if (columnVirtualizer) { if (columnVirtualizer) {
staticColumnIndex = cellOrVirtualCell.index; staticColumnIndex = cellOrVirtualCell.index;
@@ -230,11 +192,8 @@ const DataTable_TableBodyRow = ({
<DataTable_TableBodyCell key={cell.id} {...props} /> <DataTable_TableBodyCell key={cell.id} {...props} />
) )
) : null; ) : null;
}, })}
)} {virtualPaddingRight ? <td style={{ display: "flex", width: virtualPaddingRight }} /> : null}
{virtualPaddingRight ? (
<td style={{ display: "flex", width: virtualPaddingRight }} />
) : null}
</TableRow> </TableRow>
{renderDetailPanel && !row.getIsGrouped() && ( {renderDetailPanel && !row.getIsGrouped() && (
<DataTable_TableDetailPanel <DataTable_TableDetailPanel
@@ -253,6 +212,5 @@ export default DataTable_TableBodyRow;
export const Memo_DataTable_TableBodyRow = memo( export const Memo_DataTable_TableBodyRow = memo(
DataTable_TableBodyRow, DataTable_TableBodyRow,
(prev, next) => (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex
prev.row === next.row && prev.staticRowIndex === next.staticRowIndex,
); );

8
src/core/components/DataTable/body/TableDetailPanel.js
View File

@@ -53,12 +53,8 @@ const DataTable_TableDetailPanel = ({
sx={(theme) => ({ sx={(theme) => ({
display: layoutMode?.startsWith("grid") ? "flex" : undefined, display: layoutMode?.startsWith("grid") ? "flex" : undefined,
position: virtualRow ? "absolute" : undefined, position: virtualRow ? "absolute" : undefined,
top: virtualRow top: virtualRow ? `${parentRowRef.current?.getBoundingClientRect()?.height}px` : undefined,
? `${parentRowRef.current?.getBoundingClientRect()?.height}px` transform: virtualRow ? `translateY(${virtualRow?.start}px)` : undefined,
: undefined,
transform: virtualRow
? `translateY(${virtualRow?.start}px)`
: undefined,
width: "100%", width: "100%",
...parseFromValuesOrFunc(tableRowProps?.sx, theme), ...parseFromValuesOrFunc(tableRowProps?.sx, theme),
})} })}

10
src/core/components/DataTable/buttons/CopyButton.js
View File

@@ -1,7 +1,4 @@
import { import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
getCommonTooltipProps,
parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { Button, Tooltip } from "@mui/material"; import { Button, Tooltip } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
@@ -40,10 +37,7 @@ const DataTable_CopyButton = ({ cell, table, ...rest }) => {
return ( return (
<Tooltip <Tooltip
{...getCommonTooltipProps("top")} {...getCommonTooltipProps("top")}
title={ title={buttonProps?.title ?? (copied ? localization.copiedToClipboard : localization.clickToCopy)}
buttonProps?.title ??
(copied ? localization.copiedToClipboard : localization.clickToCopy)
}
> >
<Button <Button
onClick={(e) => handleCopy(e, cell.getValue())} onClick={(e) => handleCopy(e, cell.getValue())}

10
src/core/components/DataTable/buttons/GrabHandleButton.js
View File

@@ -1,7 +1,4 @@
import { import { getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
getCommonTooltipProps,
parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { IconButton, Tooltip } from "@mui/material"; import { IconButton, Tooltip } from "@mui/material";
const DataTable_GrabHandleButton = ({ location, table, ...rest }) => { const DataTable_GrabHandleButton = ({ location, table, ...rest }) => {
@@ -13,10 +10,7 @@ const DataTable_GrabHandleButton = ({ location, table, ...rest }) => {
} = table; } = table;
return ( return (
<Tooltip <Tooltip {...getCommonTooltipProps("top")} title={rest?.title ?? localization.move}>
{...getCommonTooltipProps("top")}
title={rest?.title ?? localization.move}
>
<IconButton <IconButton
aria-label={rest.title ?? localization.move} aria-label={rest.title ?? localization.move}
disableRipple disableRipple

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

@@ -46,7 +46,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
}); });
} }
return acc; return acc;
}, {}), }, {})
); );
setValidationSchema(schema); setValidationSchema(schema);
@@ -94,7 +94,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
reset={reset} reset={reset}
/> />
) )
) : null, ) : null
)} )}
</Box> </Box>
<Box <Box
@@ -112,8 +112,7 @@ function FilterBody({ columns, drawerState, setDrawerState }) {
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
sx={{ sx={{
px: 8, px: 8,
boxShadow: boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
"rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "primary2", backgroundColor: "primary2",
":hover": { ":hover": {
backgroundColor: "primary2", backgroundColor: "primary2",

7
src/core/components/DataTable/filter/FilterBodyControllerWithDependency.jsx
View File

@@ -1,12 +1,7 @@
import { Controller, useWatch } from "react-hook-form"; import { Controller, useWatch } from "react-hook-form";
import FilterBodyField from "./FilterBodyField"; import FilterBodyField from "./FilterBodyField";
const FilterBodyControllerWithDependency = ({ const FilterBodyControllerWithDependency = ({ column, control, reset, errors }) => {
column,
control,
reset,
errors,
}) => {
const dependencyField = useWatch({ control, name: column.dependencyId }); const dependencyField = useWatch({ control, name: column.dependencyId });
return ( return (

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

@@ -29,8 +29,7 @@ function FilterBodyField({
}) { }) {
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const defaultFilterTranslation = const defaultFilterTranslation =
columnFilterModeOptionFa[filterParameters.filterMode] || columnFilterModeOptionFa[filterParameters.filterMode] || filterParameters.filterMode;
filterParameters.filterMode;
const handleOpenFilterBox = (event) => { const handleOpenFilterBox = (event) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);

4
src/core/components/DataTable/filter/FilterButton.jsx
View File

@@ -11,9 +11,7 @@ function FilterButton({ drawerState, setDrawerState }) {
} }
return value === "" || value === null || value === undefined; return value === "" || value === null || value === undefined;
}; };
const filteredFilterData = Object.values(filterData).filter( const filteredFilterData = Object.values(filterData).filter((filter) => !isValueEmpty(filter.value));
(filter) => !isValueEmpty(filter.value),
);
return ( return (
<Tooltip title="فیلتر"> <Tooltip title="فیلتر">
<IconButton <IconButton

3
src/core/components/DataTable/filter/FilterHeader.jsx
View File

@@ -14,8 +14,7 @@ function FilterHeader({ setDrawerState }) {
px: 2, px: 2,
py: 1, py: 1,
backgroundColor: (theme) => theme.palette.primary.main, backgroundColor: (theme) => theme.palette.primary.main,
boxShadow: boxShadow: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
"rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
maxWidth: "450px", maxWidth: "450px",
}} }}
> >

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

@@ -29,13 +29,7 @@ function FilterOptionList({
}; };
return ( return (
<Menu <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleCloseFilterBox}>
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleCloseFilterBox}
>
{filterOption.map((option, index) => ( {filterOption.map((option, index) => (
<ListItem <ListItem
key={index} key={index}

12
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePicker.jsx
View File

@@ -2,12 +2,7 @@ import React from "react";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker"; import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import { Typography } from "@mui/material"; import { Typography } from "@mui/material";
function CustomDatePicker({ function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, handleChange }) {
column,
filterParameters,
defaultFilterTranslation,
handleChange,
}) {
return ( return (
<MuiDatePicker <MuiDatePicker
name={`${column.id}.value`} name={`${column.id}.value`}
@@ -17,10 +12,7 @@ function CustomDatePicker({
}} }}
placeholder={column.header} placeholder={column.header}
helperText={ helperText={
<Typography <Typography variant="button" sx={{ color: (theme) => theme.palette.primary.main }}>
variant="button"
sx={{ color: (theme) => theme.palette.primary.main }}
>
نوع فیلتر: {defaultFilterTranslation} (تاریخ) نوع فیلتر: {defaultFilterTranslation} (تاریخ)
</Typography> </Typography>
} }

19
src/core/components/DataTable/filter/fieldsType/CustomDate/CustomDatePickerRange.jsx
View File

@@ -4,13 +4,7 @@ import React from "react";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker"; import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
function CustomDatePickerRange({ function CustomDatePickerRange({ column, filterParameters, defaultFilterTranslation, handleChange, errors }) {
column,
filterParameters,
defaultFilterTranslation,
handleChange,
errors,
}) {
return ( return (
<Box sx={{ display: "flex", gap: 1 }}> <Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker <MuiDatePicker
@@ -26,10 +20,7 @@ function CustomDatePickerRange({
maxDate={filterParameters.value[1]} maxDate={filterParameters.value[1]}
placeholder={`از تاریخ`} placeholder={`از تاریخ`}
helperText={ helperText={
<Typography <Typography variant="button" sx={{ color: (theme) => theme.palette.primary.main }}>
variant="button"
sx={{ color: (theme) => theme.palette.primary.main }}
>
نوع فیلتر: {defaultFilterTranslation} (تاریخ) نوع فیلتر: {defaultFilterTranslation} (تاریخ)
</Typography> </Typography>
} }
@@ -46,11 +37,7 @@ function CustomDatePickerRange({
}} }}
minDate={filterParameters.value[0]} minDate={filterParameters.value[0]}
placeholder={`تا تاریخ`} placeholder={`تا تاریخ`}
helperText={ helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
errors?.[`${column.id}`]?.value
? errors?.[`${column.id}`]?.value.message
: null
}
error={Boolean(errors?.[`${column.id}`]?.value)} error={Boolean(errors?.[`${column.id}`]?.value)}
/> />
</Box> </Box>

20
src/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker.jsx
View File

@@ -6,24 +6,12 @@ import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear"; import ClearIcon from "@mui/icons-material/Clear";
import moment from "jalali-moment"; import moment from "jalali-moment";
function MuiDatePicker({ function MuiDatePicker({ label, value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
label,
value,
setFieldValue,
name,
minDate,
maxDate,
helperText,
placeholder,
error,
}) {
return ( return (
<Box sx={{ display: "flex", flexDirection: "column", my: 1 }}> <Box sx={{ display: "flex", flexDirection: "column", my: 1 }}>
<LocalizationProvider <LocalizationProvider
dateAdapter={AdapterDateFnsJalali} dateAdapter={AdapterDateFnsJalali}
localeText={ localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
faIR.components.MuiLocalizationProvider.defaultProps.localeText
}
> >
<MobileDatePicker <MobileDatePicker
value={value ? new Date(value) : null} value={value ? new Date(value) : null}
@@ -35,9 +23,7 @@ function MuiDatePicker({
aria-describedby="component-helper-text" aria-describedby="component-helper-text"
onChange={(value) => { onChange={(value) => {
const date = new Date(value); const date = new Date(value);
const formattedDate = moment(date) const formattedDate = moment(date).locale("en").format("YYYY-MM-DD");
.locale("en")
.format("YYYY-MM-DD");
setFieldValue(name, formattedDate); setFieldValue(name, formattedDate);
}} }}
minDate={minDate ? new Date(minDate) : null} minDate={minDate ? new Date(minDate) : null}

12
src/core/components/DataTable/filter/fieldsType/CustomSelect.jsx
View File

@@ -1,12 +1,6 @@
"use client"; "use client";
import { import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
FormControl,
InputLabel,
MenuItem,
OutlinedInput,
Select,
} from "@mui/material";
function CustomSelect({ column, filterParameters, handleChange }) { function CustomSelect({ column, filterParameters, handleChange }) {
return ( return (
<FormControl fullWidth sx={{ marginY: 1 }} size="small"> <FormControl fullWidth sx={{ marginY: 1 }} size="small">
@@ -20,9 +14,7 @@ function CustomSelect({ column, filterParameters, handleChange }) {
value={filterParameters.value} value={filterParameters.value}
input={<OutlinedInput label={column.header} />} input={<OutlinedInput label={column.header} />}
size="small" size="small"
onChange={(e) => onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
handleChange({ ...filterParameters, value: e.target.value })
}
displayEmpty displayEmpty
> >
{column.columnSelectOption().map((option) => ( {column.columnSelectOption().map((option) => (

14
src/core/components/DataTable/filter/fieldsType/CustomSelectByDependency.jsx
View File

@@ -1,14 +1,6 @@
"use client"; "use client";
import { import { FormControl, FormHelperText, InputLabel, MenuItem, OutlinedInput, Select, Typography } from "@mui/material";
FormControl,
FormHelperText,
InputLabel,
MenuItem,
OutlinedInput,
Select,
Typography,
} from "@mui/material";
import { useCallback, useEffect } from "react"; import { useCallback, useEffect } from "react";
function CustomSelectByDependency({ function CustomSelectByDependency({
@@ -31,9 +23,7 @@ function CustomSelectByDependency({
value={value} value={value}
size="small" size="small"
input={<OutlinedInput label={column.header} />} input={<OutlinedInput label={column.header} />}
onChange={(e) => onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
handleChange({ ...filterParameters, value: e.target.value })
}
displayEmpty displayEmpty
> >
{columnSelectOption.map((option) => ( {columnSelectOption.map((option) => (

11
src/core/components/DataTable/filter/fieldsType/CustomSelectMultiple.jsx
View File

@@ -12,12 +12,7 @@ import {
Typography, Typography,
} from "@mui/material"; } from "@mui/material";
function CustomSelectMultiple({ function CustomSelectMultiple({ column, filterParameters, defaultFilterTranslation, handleChange }) {
column,
filterParameters,
defaultFilterTranslation,
handleChange,
}) {
const columnSelectOption = column.columnSelectOption; const columnSelectOption = column.columnSelectOption;
const getLabelForValue = (value) => { const getLabelForValue = (value) => {
@@ -36,9 +31,7 @@ function CustomSelectMultiple({
value={filterParameters.value} value={filterParameters.value}
multiple multiple
size="small" size="small"
onChange={(e) => onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
handleChange({ ...filterParameters, value: e.target.value })
}
renderValue={(selected) => ( renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}> <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => ( {selected.map((value) => (

10
src/core/components/DataTable/filter/fieldsType/CustomTextField.jsx
View File

@@ -15,9 +15,7 @@ function CustomTextField({
name={column.id} name={column.id}
label={column.header} label={column.header}
value={filterParameters.value} value={filterParameters.value}
onChange={(e) => onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
handleChange({ ...filterParameters, value: e.target.value })
}
onBlur={handleBlur} onBlur={handleBlur}
fullWidth fullWidth
variant="outlined" variant="outlined"
@@ -25,11 +23,7 @@ function CustomTextField({
sx={{ my: 1 }} sx={{ my: 1 }}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment <InputAdornment position="end" sx={{ cursor: "pointer" }} onClick={handleOpenFilterBox}>
position="end"
sx={{ cursor: "pointer" }}
onClick={handleOpenFilterBox}
>
<FilterListIcon /> <FilterListIcon />
</InputAdornment> </InputAdornment>
), ),

17
src/core/components/DataTable/filter/fieldsType/CustomTextFieldRange.jsx
View File

@@ -25,10 +25,7 @@ function CustomTextFieldRange({
label={<Typography>از {column.header}</Typography>} label={<Typography>از {column.header}</Typography>}
value={filterParameters.value[0]} value={filterParameters.value[0]}
fullWidth fullWidth
error={ error={touched?.[`${column.id}`]?.value && Boolean(errors?.[`${column.id}`]?.value)}
touched?.[`${column.id}`]?.value &&
Boolean(errors?.[`${column.id}`]?.value)
}
helperText={ helperText={
<Typography <Typography
variant="caption" variant="caption"
@@ -55,11 +52,7 @@ function CustomTextFieldRange({
} }
onBlur={handleBlur} onBlur={handleBlur}
error={Boolean(errors?.[`${column.id}`]?.value)} error={Boolean(errors?.[`${column.id}`]?.value)}
helperText={ helperText={errors?.[`${column.id}`]?.value ? errors?.[`${column.id}`]?.value.message : null}
errors?.[`${column.id}`]?.value
? errors?.[`${column.id}`]?.value.message
: null
}
label={<Typography>تا {column.header}</Typography>} label={<Typography>تا {column.header}</Typography>}
value={filterParameters.value[1]} value={filterParameters.value[1]}
fullWidth fullWidth
@@ -68,11 +61,7 @@ function CustomTextFieldRange({
sx={{ my: 1 }} sx={{ my: 1 }}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment <InputAdornment position="end" sx={{ cursor: "pointer" }} onClick={handleOpenFilterBox}>
position="end"
sx={{ cursor: "pointer" }}
onClick={handleOpenFilterBox}
>
<FilterListIcon /> <FilterListIcon />
</InputAdornment> </InputAdornment>
), ),

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

@@ -5,12 +5,7 @@ import DataTable_TableHeadRow from "./TableHeadRow";
const DataTable_TableHead = ({ columnVirtualizer, table, ...rest }) => { const DataTable_TableHead = ({ columnVirtualizer, table, ...rest }) => {
const { const {
getState, getState,
options: { options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner },
enableStickyHeader,
layoutMode,
muiTableHeadProps,
positionToolbarAlertBanner,
},
refs: { tableHeadRef }, refs: { tableHeadRef },
} = table; } = table;
const { isFullScreen, showAlertBanner } = getState(); const { isFullScreen, showAlertBanner } = getState();

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

@@ -1,20 +1,10 @@
import { import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
getCommonMRTCellStyles,
parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { useTheme } from "@emotion/react"; import { useTheme } from "@emotion/react";
import { Box, TableCell } from "@mui/material"; import { Box, TableCell } from "@mui/material";
import { MRT_TableHeadCellSortLabel } from "material-react-table"; import { MRT_TableHeadCellSortLabel } from "material-react-table";
import { useMemo } from "react"; import { useMemo } from "react";
const DataTable_TableHeadCell = ({ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, backgroundColor, table, ...rest }) => {
columnVirtualizer,
header,
staticColumnIndex,
backgroundColor,
table,
...rest
}) => {
const theme = useTheme(); const theme = useTheme();
const { const {
getState, getState,
@@ -34,14 +24,7 @@ const DataTable_TableHeadCell = ({
refs: { tableHeadCellRefs }, refs: { tableHeadCellRefs },
setHoveredColumn, setHoveredColumn,
} = table; } = table;
const { const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters } = getState();
columnSizingInfo,
density,
draggingColumn,
grouping,
hoveredColumn,
showColumnFilters,
} = getState();
const { column } = header; const { column } = header;
const { columnDef } = column; const { columnDef } = column;
const { columnDefType } = columnDef; const { columnDefType } = columnDef;
@@ -55,23 +38,17 @@ const DataTable_TableHeadCell = ({
...rest, ...rest,
}; };
const isColumnPinned = const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== "group" && column.getIsPinned();
enableColumnPinning &&
columnDef.columnDefType !== "group" &&
column.getIsPinned();
const showColumnActions = const showColumnActions =
(enableColumnActions || columnDef.enableColumnActions) && (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false;
columnDef.enableColumnActions !== false;
const showDragHandle = const showDragHandle =
enableColumnDragging !== false && enableColumnDragging !== false &&
columnDef.enableColumnDragging !== false && columnDef.enableColumnDragging !== false &&
(enableColumnDragging || (enableColumnDragging ||
(enableColumnOrdering && columnDef.enableColumnOrdering !== false) || (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
(enableGrouping && (enableGrouping && columnDef.enableGrouping !== false && !grouping.includes(column.id)));
columnDef.enableGrouping !== false &&
!grouping.includes(column.id)));
const headerPL = useMemo(() => { const headerPL = useMemo(() => {
let pl = 0; let pl = 0;
@@ -96,9 +73,7 @@ const DataTable_TableHeadCell = ({
: undefined; : undefined;
if (showResizeBorder) { if (showResizeBorder) {
return columnResizeDirection === "ltr" return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
? { borderRight: borderStyle }
: { borderLeft: borderStyle };
} }
const draggingBorders = borderStyle const draggingBorders = borderStyle
? { ? {
@@ -116,9 +91,7 @@ const DataTable_TableHeadCell = ({
setHoveredColumn(null); setHoveredColumn(null);
} }
if (enableColumnOrdering && draggingColumn && columnDefType !== "group") { if (enableColumnOrdering && draggingColumn && columnDefType !== "group") {
setHoveredColumn( setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
columnDef.enableColumnOrdering !== false ? column : null,
);
} }
}; };
@@ -149,13 +122,7 @@ const DataTable_TableHeadCell = ({
return ( return (
<TableCell <TableCell
align={ align={columnDefType === "group" ? "center" : theme.direction === "rtl" ? "right" : "left"}
columnDefType === "group"
? "center"
: theme.direction === "rtl"
? "right"
: "left"
}
colSpan={header.colSpan} colSpan={header.colSpan}
rowSpan={rowSpan} rowSpan={rowSpan}
data-index={staticColumnIndex} data-index={staticColumnIndex}
@@ -190,12 +157,7 @@ const DataTable_TableHeadCell = ({
: columnDefType === "display" : columnDefType === "display"
? "1rem 1.25rem" ? "1rem 1.25rem"
: "1.5rem", : "1.5rem",
pb: pb: columnDefType === "display" ? 0 : showColumnFilters || density === "compact" ? "0.4rem" : "0.6rem",
columnDefType === "display"
? 0
: showColumnFilters || density === "compact"
? "0.4rem"
: "0.6rem",
pt: pt:
columnDefType === "group" || density === "compact" columnDefType === "group" || density === "compact"
? "0.25rem" ? "0.25rem"
@@ -221,8 +183,7 @@ const DataTable_TableHeadCell = ({
sx={{ sx={{
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
flexDirection: flexDirection: tableCellProps?.align === "right" ? "row-reverse" : "row",
tableCellProps?.align === "right" ? "row-reverse" : "row",
justifyContent: justifyContent:
columnDefType === "group" || tableCellProps?.align === "center" columnDefType === "group" || tableCellProps?.align === "center"
? "center" ? "center"
@@ -238,18 +199,11 @@ const DataTable_TableHeadCell = ({
onClick={column.getToggleSortingHandler()} onClick={column.getToggleSortingHandler()}
sx={{ sx={{
alignItems: "center", alignItems: "center",
cursor: cursor: column.getCanSort() && columnDefType !== "group" ? "pointer" : undefined,
column.getCanSort() && columnDefType !== "group"
? "pointer"
: undefined,
display: "flex", display: "flex",
flexDirection: flexDirection: tableCellProps?.align === "right" ? "row-reverse" : "row",
tableCellProps?.align === "right" ? "row-reverse" : "row",
overflow: columnDefType === "data" ? "hidden" : undefined, overflow: columnDefType === "data" ? "hidden" : undefined,
pl: pl: tableCellProps?.align === "center" ? `${headerPL}rem` : undefined,
tableCellProps?.align === "center"
? `${headerPL}rem`
: undefined,
}} }}
> >
<Box <Box

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

@@ -14,11 +14,9 @@ const DataTable_TableHeadRow = ({
const { const {
options: { enableStickyHeader, layoutMode, muiTableHeadRowProps }, options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
} = table; } = table;
const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
columnVirtualizer ?? {};
const backgroundColor = const backgroundColor = index % 2 === 0 ? palette.primary.main : palette.secondary.main;
index % 2 === 0 ? palette.primary.main : palette.secondary.main;
const tableRowProps = { const tableRowProps = {
...parseFromValuesOrFunc(muiTableHeadRowProps, { ...parseFromValuesOrFunc(muiTableHeadRowProps, {
@@ -30,19 +28,15 @@ const DataTable_TableHeadRow = ({
// Access theme from the sx function // Access theme from the sx function
...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}), ...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
display: layoutMode?.startsWith("grid") ? "flex" : undefined, display: layoutMode?.startsWith("grid") ? "flex" : undefined,
position: position: enableStickyHeader && layoutMode === "semantic" ? "sticky" : "relative",
enableStickyHeader && layoutMode === "semantic" ? "sticky" : "relative",
top: 0, top: 0,
}), }),
}; };
return ( return (
<TableRow {...tableRowProps}> <TableRow {...tableRowProps}>
{virtualPaddingLeft && ( {virtualPaddingLeft && <th style={{ display: "flex", width: virtualPaddingLeft }} />}
<th style={{ display: "flex", width: virtualPaddingLeft }} /> {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
)}
{(virtualColumns ?? headerGroup.headers).map(
(headerOrVirtualHeader, staticColumnIndex) => {
const header = columnVirtualizer const header = columnVirtualizer
? headerGroup.headers[headerOrVirtualHeader.index] ? headerGroup.headers[headerOrVirtualHeader.index]
: headerOrVirtualHeader; : headerOrVirtualHeader;
@@ -57,11 +51,8 @@ const DataTable_TableHeadRow = ({
table={table} table={table}
/> />
) : null; ) : null;
}, })}
)} {virtualPaddingRight && <th style={{ display: "flex", width: virtualPaddingRight }} />}
{virtualPaddingRight && (
<th style={{ display: "flex", width: virtualPaddingRight }} />
)}
</TableRow> </TableRow>
); );
}; };

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

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

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

@@ -44,11 +44,7 @@ function HideBodyField({ column, hideData, setHideData }) {
if (typeof hideData[column.id] === "boolean") { if (typeof hideData[column.id] === "boolean") {
return ( return (
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Checkbox <Checkbox checked={hideData[column.id]} onChange={handleCheckboxChange} name={column.id} />
checked={hideData[column.id]}
onChange={handleCheckboxChange}
name={column.id}
/>
<Typography variant="subtitle1">{column.header}</Typography> <Typography variant="subtitle1">{column.header}</Typography>
</Box> </Box>
); );

4
src/core/components/DataTable/hide/HideButton.jsx
View File

@@ -7,9 +7,7 @@ import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
function HideButton({ drawerState, setDrawerState }) { function HideButton({ drawerState, setDrawerState }) {
const { hideData } = useDataTable(); const { hideData } = useDataTable();
const flattenHideData = flattenObjectOfObjects(hideData); const flattenHideData = flattenObjectOfObjects(hideData);
const falseCount = Object.values(flattenHideData).filter( const falseCount = Object.values(flattenHideData).filter((value) => value === false).length;
(value) => value === false,
).length;
return ( return (
<Tooltip title="نمایش/مخفی کردن ستون ها"> <Tooltip title="نمایش/مخفی کردن ستون ها">

3
src/core/components/DataTable/hide/HideHeader.jsx
View File

@@ -14,8 +14,7 @@ function FilterHeader({ setDrawerState }) {
px: 2, px: 2,
py: 1, py: 1,
backgroundColor: "#155175", backgroundColor: "#155175",
boxShadow: boxShadow: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
"rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
maxWidth: "450px", maxWidth: "450px",
}} }}
> >

3
src/core/components/DataTable/localization/fa/datatable.js
View File

@@ -67,8 +67,7 @@ export const FA_DATATABLE_LOCALIZATION = {
rowsPerPage: "ردیف در هر صفحه", rowsPerPage: "ردیف در هر صفحه",
save: "ذخیره", save: "ذخیره",
search: "جستجو", search: "جستجو",
selectedCountOfRowCountRowsSelected: selectedCountOfRowCountRowsSelected: "{selectedCount} از {rowCount} ردیف انتخاب شده",
"{selectedCount} از {rowCount} ردیف انتخاب شده",
select: "انتخاب", select: "انتخاب",
showAll: "نمایش همه", showAll: "نمایش همه",
showAllColumns: "نمایش همه ستون‌ها", showAllColumns: "نمایش همه ستون‌ها",

15
src/core/components/DataTable/menus/ActionMenuItem.js
View File

@@ -1,12 +1,6 @@
import { Box, IconButton, ListItemIcon, MenuItem } from "@mui/material"; import { Box, IconButton, ListItemIcon, MenuItem } from "@mui/material";
const DataTable_ActionMenuItem = ({ const DataTable_ActionMenuItem = ({ icon, label, onOpenSubMenu, table, ...rest }) => {
icon,
label,
onOpenSubMenu,
table,
...rest
}) => {
const { const {
options: { options: {
icons: { ArrowRightIcon }, icons: { ArrowRightIcon },
@@ -34,12 +28,7 @@ const DataTable_ActionMenuItem = ({
{label} {label}
</Box> </Box>
{onOpenSubMenu && ( {onOpenSubMenu && (
<IconButton <IconButton onClick={onOpenSubMenu} onMouseEnter={onOpenSubMenu} size="small" sx={{ p: 0 }}>
onClick={onOpenSubMenu}
onMouseEnter={onOpenSubMenu}
size="small"
sx={{ p: 0 }}
>
<ArrowRightIcon /> <ArrowRightIcon />
</IconButton> </IconButton>
)} )}

6
src/core/components/DataTable/menus/CellActionMenu.js
View File

@@ -30,8 +30,7 @@ const DataTable_CellActionMenu = ({ table, ...rest }) => {
const internalMenuItems = [ const internalMenuItems = [
(parseFromValuesOrFunc(enableClickToCopy, cell) === "context-menu" || (parseFromValuesOrFunc(enableClickToCopy, cell) === "context-menu" ||
parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === "context-menu") && (
"context-menu") && (
<DataTable_ActionMenuItem <DataTable_ActionMenuItem
icon={<ContentCopy />} icon={<ContentCopy />}
key={"mrt-copy"} key={"mrt-copy"}
@@ -68,8 +67,7 @@ const DataTable_CellActionMenu = ({ table, ...rest }) => {
}; };
const menuItems = const menuItems =
columnDef.renderCellActionMenuItems?.(renderActionProps) ?? columnDef.renderCellActionMenuItems?.(renderActionProps) ?? renderCellActionMenuItems?.(renderActionProps);
renderCellActionMenuItems?.(renderActionProps);
return ( return (
(!!menuItems?.length || !!internalMenuItems?.length) && ( (!!menuItems?.length || !!internalMenuItems?.length) && (

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

@@ -93,9 +93,7 @@ const DataTable_Paper = ({
))} ))}
<DataTable_TableContainer table={table} /> <DataTable_TableContainer table={table} />
{enableBottomToolbar && {enableBottomToolbar &&
(parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? ( (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? <DataTable_BottomToolbar table={table} />)}
<DataTable_BottomToolbar table={table} />
))}
</Paper> </Paper>
); );
}; };

7
src/core/components/DataTable/table/Table.js
View File

@@ -2,9 +2,7 @@ import { parseCSSVarId, parseFromValuesOrFunc } from "@/core/utils/utils";
import { Table } from "@mui/material"; import { Table } from "@mui/material";
import { useMRT_ColumnVirtualizer } from "material-react-table"; import { useMRT_ColumnVirtualizer } from "material-react-table";
import { useMemo } from "react"; import { useMemo } from "react";
import DataTable_TableBody, { import DataTable_TableBody, { Memo_DataTable_TableBody } from "../body/TableBody";
Memo_DataTable_TableBody,
} from "../body/TableBody";
import DataTable_TableHead from "../head/TableHead"; import DataTable_TableHead from "../head/TableHead";
const DataTable_Table = ({ table, ...rest }) => { const DataTable_Table = ({ table, ...rest }) => {
@@ -22,8 +20,7 @@ const DataTable_Table = ({ table, ...rest }) => {
renderCaption, renderCaption,
}, },
} = table; } = table;
const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } = const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } = getState();
getState();
const tableProps = { const tableProps = {
...parseFromValuesOrFunc(muiTableProps, { table }), ...parseFromValuesOrFunc(muiTableProps, { table }),

26
src/core/components/DataTable/table/TableContainer.js
View File

@@ -5,8 +5,7 @@ import DataTable_CellActionMenu from "../menus/CellActionMenu";
import DataTable_Table from "./Table"; import DataTable_Table from "./Table";
import DataTable_TableLoadingOverlay from "./TableLoadingOverlay"; import DataTable_TableLoadingOverlay from "./TableLoadingOverlay";
const useIsomorphicLayoutEffect = const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
typeof window !== "undefined" ? useLayoutEffect : useEffect;
const DataTable_TableContainer = ({ table, ...rest }) => { const DataTable_TableContainer = ({ table, ...rest }) => {
const { const {
@@ -14,11 +13,9 @@ const DataTable_TableContainer = ({ table, ...rest }) => {
options: { enableCellActions, enableStickyHeader, muiTableContainerProps }, options: { enableCellActions, enableStickyHeader, muiTableContainerProps },
refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
} = table; } = table;
const { actionCell, isFullScreen, isLoading, showLoadingOverlay } = const { actionCell, isFullScreen, isLoading, showLoadingOverlay } = getState();
getState();
const loading = const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
const [totalToolbarHeight, setTotalToolbarHeight] = useState(0); const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
@@ -30,15 +27,10 @@ const DataTable_TableContainer = ({ table, ...rest }) => {
}; };
useIsomorphicLayoutEffect(() => { useIsomorphicLayoutEffect(() => {
const topToolbarHeight = const topToolbarHeight = typeof document !== "undefined" ? (topToolbarRef.current?.offsetHeight ?? 0) : 0;
typeof document !== "undefined"
? (topToolbarRef.current?.offsetHeight ?? 0)
: 0;
const bottomToolbarHeight = const bottomToolbarHeight =
typeof document !== "undefined" typeof document !== "undefined" ? (bottomToolbarRef?.current?.offsetHeight ?? 0) : 0;
? (bottomToolbarRef?.current?.offsetHeight ?? 0)
: 0;
setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight); setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
}); });
@@ -58,9 +50,7 @@ const DataTable_TableContainer = ({ table, ...rest }) => {
} }
}} }}
style={{ style={{
maxHeight: isFullScreen maxHeight: isFullScreen ? `calc(100vh - ${totalToolbarHeight}px)` : undefined,
? `calc(100vh - ${totalToolbarHeight}px)`
: undefined,
...tableContainerProps?.style, ...tableContainerProps?.style,
}} }}
sx={(theme) => ({ sx={(theme) => ({
@@ -75,9 +65,7 @@ const DataTable_TableContainer = ({ table, ...rest }) => {
> >
{loading ? <DataTable_TableLoadingOverlay table={table} /> : null} {loading ? <DataTable_TableLoadingOverlay table={table} /> : null}
<DataTable_Table table={table} /> <DataTable_Table table={table} />
{enableCellActions && actionCell && ( {enableCellActions && actionCell && <DataTable_CellActionMenu table={table} />}
<DataTable_CellActionMenu table={table} />
)}
</TableContainer> </TableContainer>
); );
}; };

21
src/core/components/DataTable/toolbar/BottomToolbar.js
View File

@@ -1,7 +1,4 @@
import { import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
getCommonToolbarStyles,
parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { Box, alpha, useMediaQuery } from "@mui/material"; import { Box, alpha, useMediaQuery } from "@mui/material";
import DataTable_LinearProgressBar from "./LinearProgressBar"; import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination"; import DataTable_TablePagination from "./TablePagination";
@@ -9,12 +6,7 @@ import DataTable_TablePagination from "./TablePagination";
const DataTable_BottomToolbar = ({ table, ...rest }) => { const DataTable_BottomToolbar = ({ table, ...rest }) => {
const { const {
getState, getState,
options: { options: { enablePagination, muiBottomToolbarProps, positionPagination, renderBottomToolbarCustomActions },
enablePagination,
muiBottomToolbarProps,
positionPagination,
renderBottomToolbarCustomActions,
},
refs: { bottomToolbarRef }, refs: { bottomToolbarRef },
} = table; } = table;
const { isFullScreen } = getState(); const { isFullScreen } = getState();
@@ -59,11 +51,7 @@ const DataTable_BottomToolbar = ({ table, ...rest }) => {
width: "100%", width: "100%",
}} }}
> >
{renderBottomToolbarCustomActions ? ( {renderBottomToolbarCustomActions ? renderBottomToolbarCustomActions({ table }) : <span />}
renderBottomToolbarCustomActions({ table })
) : (
<span />
)}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@@ -73,8 +61,7 @@ const DataTable_BottomToolbar = ({ table, ...rest }) => {
top: 0, top: 0,
}} }}
> >
{enablePagination && {enablePagination && ["both", "bottom"].includes(positionPagination ?? "") && (
["both", "bottom"].includes(positionPagination ?? "") && (
<DataTable_TablePagination position="bottom" table={table} /> <DataTable_TablePagination position="bottom" table={table} />
)} )}
</Box> </Box>

16
src/core/components/DataTable/toolbar/TablePagination.js
View File

@@ -1,8 +1,4 @@
import { import { flipIconStyles, getCommonTooltipProps, parseFromValuesOrFunc } from "@/core/utils/utils";
flipIconStyles,
getCommonTooltipProps,
parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { useTheme } from "@emotion/react"; import { useTheme } from "@emotion/react";
import { import {
Box, Box,
@@ -81,12 +77,7 @@ const DataTable_TablePagination = ({ position = "bottom", table, ...rest }) => {
gap: "8px", gap: "8px",
justifyContent: { md: "space-between", sm: "center" }, justifyContent: { md: "space-between", sm: "center" },
justifySelf: "flex-end", justifySelf: "flex-end",
mt: mt: position === "top" && enableToolbarInternalActions && !showGlobalFilter ? "3rem" : undefined,
position === "top" &&
enableToolbarInternalActions &&
!showGlobalFilter
? "3rem"
: undefined,
position: "relative", position: "relative",
px: "8px", px: "8px",
py: "12px", py: "12px",
@@ -115,8 +106,7 @@ const DataTable_TablePagination = ({ position = "bottom", table, ...rest }) => {
> >
{rowsPerPageOptions.map((option) => { {rowsPerPageOptions.map((option) => {
const value = typeof option !== "number" ? option.value : option; const value = typeof option !== "number" ? option.value : option;
const label = const label = typeof option !== "number" ? option.label : `${option}`;
typeof option !== "number" ? option.label : `${option}`;
return ( return (
SelectProps?.children ?? SelectProps?.children ??
(SelectProps?.native ? ( (SelectProps?.native ? (

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

@@ -1,7 +1,4 @@
import { import { getCommonToolbarStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
getCommonToolbarStyles,
parseFromValuesOrFunc,
} from "@/core/utils/utils";
import { Box, Typography, useMediaQuery } from "@mui/material"; import { Box, Typography, useMediaQuery } from "@mui/material";
import DataTable_LinearProgressBar from "./LinearProgressBar"; import DataTable_LinearProgressBar from "./LinearProgressBar";
import DataTable_TablePagination from "./TablePagination"; import DataTable_TablePagination from "./TablePagination";
@@ -43,10 +40,7 @@ const DataTable_TopToolbar = ({
const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table }); const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
const stackAlertBanner = const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || (showGlobalFilter && isTablet);
isMobile ||
!!renderTopToolbarCustomActions ||
(showGlobalFilter && isTablet);
return ( return (
<Box <Box
@@ -112,11 +106,7 @@ const DataTable_TopToolbar = ({
> >
{!special_data && ( {!special_data && (
<> <>
<ResetStorage <ResetStorage user_id={user_id} page_name={page_name} table_name={table_name} />
user_id={user_id}
page_name={page_name}
table_name={table_name}
/>
<UpdateTable mutate={mutate} /> <UpdateTable mutate={mutate} />
</> </>
)} )}
@@ -136,16 +126,12 @@ const DataTable_TopToolbar = ({
/> />
)} )}
{special_filter && setFilterData && ( {special_filter && setFilterData && (
<FilterCustom <FilterCustom filterData={special_filter} setFilterData={setFilterData} />
filterData={special_filter}
setFilterData={setFilterData}
/>
)} )}
</Box> </Box>
)} )}
</Box> </Box>
{enablePagination && {enablePagination && ["both", "top"].includes(positionPagination ?? "") && (
["both", "top"].includes(positionPagination ?? "") && (
<DataTable_TablePagination position="top" table={table} /> <DataTable_TablePagination position="top" table={table} />
)} )}
<DataTable_LinearProgressBar isTopToolbar table={table} /> <DataTable_LinearProgressBar isTopToolbar table={table} />

6
src/core/components/DialogTransition.jsx
View File

@@ -1,8 +1,6 @@
import { forwardRef } from "react"; import { forwardRef } from "react";
import { Slide } from "@mui/material"; import { Slide } from "@mui/material";
export const DialogTransition = forwardRef( export const DialogTransition = forwardRef(function DialogTransition(props, ref) {
function DialogTransition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />; return <Slide direction="up" ref={ref} {...props} />;
}, });
);

4
src/core/components/FilterDrawer/FilterField.jsx
View File

@@ -28,9 +28,7 @@ function FilterField({
errors, errors,
}) { }) {
const [anchorEl, setAnchorEl] = useState(null); const [anchorEl, setAnchorEl] = useState(null);
const defaultFilterTranslation = const defaultFilterTranslation = filterModeOptionFa[filterParameters.filterMode] || filterParameters.filterMode;
filterModeOptionFa[filterParameters.filterMode] ||
filterParameters.filterMode;
const handleOpenFilterBox = (event) => { const handleOpenFilterBox = (event) => {
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);

8
src/core/components/FilterDrawer/FilterOptionList.jsx
View File

@@ -29,13 +29,7 @@ function FilterOptionList({
}; };
return ( return (
<Menu <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleCloseFilterBox}>
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleCloseFilterBox}
>
{filterOption.map((option, index) => ( {filterOption.map((option, index) => (
<ListItem <ListItem
key={index} key={index}

12
src/core/components/FilterDrawer/fieldsType/CustomDate/CustomDatePicker.jsx
View File

@@ -2,12 +2,7 @@ import React from "react";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker"; import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
import { Typography } from "@mui/material"; import { Typography } from "@mui/material";
function CustomDatePicker({ function CustomDatePicker({ column, filterParameters, defaultFilterTranslation, handleChange }) {
column,
filterParameters,
defaultFilterTranslation,
handleChange,
}) {
return ( return (
<MuiDatePicker <MuiDatePicker
name={`${column.id}.value`} name={`${column.id}.value`}
@@ -17,10 +12,7 @@ function CustomDatePicker({
}} }}
placeholder={column.header} placeholder={column.header}
helperText={ helperText={
<Typography <Typography variant="button" sx={{ color: (theme) => theme.palette.primary.main }}>
variant="button"
sx={{ color: (theme) => theme.palette.primary.main }}
>
نوع فیلتر: {defaultFilterTranslation} (تاریخ) نوع فیلتر: {defaultFilterTranslation} (تاریخ)
</Typography> </Typography>
} }

19
src/core/components/FilterDrawer/fieldsType/CustomDate/CustomDatePickerRange.jsx
View File

@@ -4,13 +4,7 @@ import React from "react";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker"; import MuiDatePicker from "@/core/components/DataTable/filter/fieldsType/CustomDate/MuiDatePicker";
function CustomDatePickerRange({ function CustomDatePickerRange({ item, filterParameters, defaultFilterTranslation, handleChange, errors }) {
item,
filterParameters,
defaultFilterTranslation,
handleChange,
errors,
}) {
return ( return (
<Box sx={{ display: "flex", gap: 1 }}> <Box sx={{ display: "flex", gap: 1 }}>
<MuiDatePicker <MuiDatePicker
@@ -26,10 +20,7 @@ function CustomDatePickerRange({
maxDate={filterParameters.value[1]} maxDate={filterParameters.value[1]}
placeholder={`از تاریخ`} placeholder={`از تاریخ`}
helperText={ helperText={
<Typography <Typography variant="button" sx={{ color: (theme) => theme.palette.primary.main }}>
variant="button"
sx={{ color: (theme) => theme.palette.primary.main }}
>
نوع فیلتر: {defaultFilterTranslation} (تاریخ) نوع فیلتر: {defaultFilterTranslation} (تاریخ)
</Typography> </Typography>
} }
@@ -46,11 +37,7 @@ function CustomDatePickerRange({
}} }}
minDate={filterParameters.value[0]} minDate={filterParameters.value[0]}
placeholder={`تا تاریخ`} placeholder={`تا تاریخ`}
helperText={ helperText={errors?.[`${item.id}`]?.value ? errors?.[`${item.id}`]?.value.message : null}
errors?.[`${item.id}`]?.value
? errors?.[`${item.id}`]?.value.message
: null
}
error={Boolean(errors?.[`${item.id}`]?.value)} error={Boolean(errors?.[`${item.id}`]?.value)}
/> />
</Box> </Box>

20
src/core/components/FilterDrawer/fieldsType/CustomDate/MuiDatePicker.jsx
View File

@@ -6,24 +6,12 @@ import { Box, FormHelperText, IconButton, InputAdornment } from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear"; import ClearIcon from "@mui/icons-material/Clear";
import moment from "jalali-moment"; import moment from "jalali-moment";
function MuiDatePicker({ function MuiDatePicker({ label, value, setFieldValue, name, minDate, maxDate, helperText, placeholder, error }) {
label,
value,
setFieldValue,
name,
minDate,
maxDate,
helperText,
placeholder,
error,
}) {
return ( return (
<Box sx={{ display: "flex", flexDirection: "column", my: 1 }}> <Box sx={{ display: "flex", flexDirection: "column", my: 1 }}>
<LocalizationProvider <LocalizationProvider
dateAdapter={AdapterDateFnsJalali} dateAdapter={AdapterDateFnsJalali}
localeText={ localeText={faIR.components.MuiLocalizationProvider.defaultProps.localeText}
faIR.components.MuiLocalizationProvider.defaultProps.localeText
}
> >
<MobileDatePicker <MobileDatePicker
value={value ? new Date(value) : null} value={value ? new Date(value) : null}
@@ -35,9 +23,7 @@ function MuiDatePicker({
aria-describedby="component-helper-text" aria-describedby="component-helper-text"
onChange={(value) => { onChange={(value) => {
const date = new Date(value); const date = new Date(value);
const formattedDate = moment(date) const formattedDate = moment(date).locale("en").format("YYYY-MM-DD");
.locale("en")
.format("YYYY-MM-DD");
setFieldValue(name, formattedDate); setFieldValue(name, formattedDate);
}} }}
minDate={minDate ? new Date(minDate) : null} minDate={minDate ? new Date(minDate) : null}

12
src/core/components/FilterDrawer/fieldsType/CustomSelect.jsx
View File

@@ -1,12 +1,6 @@
"use client"; "use client";
import { import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
FormControl,
InputLabel,
MenuItem,
OutlinedInput,
Select,
} from "@mui/material";
function CustomSelect({ item, filterParameters, handleChange }) { function CustomSelect({ item, filterParameters, handleChange }) {
return ( return (
<FormControl fullWidth sx={{ marginY: 1 }} size="small"> <FormControl fullWidth sx={{ marginY: 1 }} size="small">
@@ -20,9 +14,7 @@ function CustomSelect({ item, filterParameters, handleChange }) {
value={filterParameters.value} value={filterParameters.value}
input={<OutlinedInput label={item.header} />} input={<OutlinedInput label={item.header} />}
size="small" size="small"
onChange={(e) => onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
handleChange({ ...filterParameters, value: e.target.value })
}
displayEmpty displayEmpty
> >
{item.selectOption().map((option) => ( {item.selectOption().map((option) => (

20
src/core/components/FilterDrawer/fieldsType/CustomSelectByDependency.jsx
View File

@@ -1,19 +1,7 @@
"use client"; "use client";
import { import { FormControl, InputLabel, MenuItem, OutlinedInput, Select } from "@mui/material";
FormControl, function CustomSelectByDependency({ item, filterParameters, value, handleChange, selectOption }) {
InputLabel,
MenuItem,
OutlinedInput,
Select,
} from "@mui/material";
function CustomSelectByDependency({
item,
filterParameters,
value,
handleChange,
selectOption,
}) {
return ( return (
<FormControl fullWidth sx={{ my: 1 }} size="small"> <FormControl fullWidth sx={{ my: 1 }} size="small">
<InputLabel id={`label${item.id}`} shrink> <InputLabel id={`label${item.id}`} shrink>
@@ -26,9 +14,7 @@ function CustomSelectByDependency({
value={value} value={value}
size="small" size="small"
input={<OutlinedInput label={item.header} />} input={<OutlinedInput label={item.header} />}
onChange={(e) => onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
handleChange({ ...filterParameters, value: e.target.value })
}
displayEmpty displayEmpty
> >
{selectOption.map((option) => ( {selectOption.map((option) => (

4
src/core/components/FilterDrawer/fieldsType/CustomSelectMultiple.jsx
View File

@@ -31,9 +31,7 @@ function CustomSelectMultiple({ item, filterParameters, handleChange }) {
value={filterParameters.value} value={filterParameters.value}
multiple multiple
size="small" size="small"
onChange={(e) => onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
handleChange({ ...filterParameters, value: e.target.value })
}
renderValue={(selected) => ( renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}> <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => ( {selected.map((value) => (

18
src/core/components/FilterDrawer/fieldsType/CustomTextField.jsx
View File

@@ -1,22 +1,14 @@
import { InputAdornment, TextField, Typography } from "@mui/material"; import { InputAdornment, TextField, Typography } from "@mui/material";
import FilterListIcon from "@mui/icons-material/FilterList"; import FilterListIcon from "@mui/icons-material/FilterList";
function CustomTextField({ function CustomTextField({ item, filterParameters, handleOpenFilterBox, handleBlur, handleChange }) {
item,
filterParameters,
handleOpenFilterBox,
handleBlur,
handleChange,
}) {
return ( return (
<TextField <TextField
id={item.id} id={item.id}
name={item.id} name={item.id}
label={item.header} label={item.header}
value={filterParameters.value} value={filterParameters.value}
onChange={(e) => onChange={(e) => handleChange({ ...filterParameters, value: e.target.value })}
handleChange({ ...filterParameters, value: e.target.value })
}
onBlur={handleBlur} onBlur={handleBlur}
fullWidth fullWidth
variant="outlined" variant="outlined"
@@ -24,11 +16,7 @@ function CustomTextField({
sx={{ my: 1 }} sx={{ my: 1 }}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment <InputAdornment position="end" sx={{ cursor: "pointer" }} onClick={handleOpenFilterBox}>
position="end"
sx={{ cursor: "pointer" }}
onClick={handleOpenFilterBox}
>
<FilterListIcon /> <FilterListIcon />
</InputAdornment> </InputAdornment>
), ),

17
src/core/components/FilterDrawer/fieldsType/CustomTextFieldRange.jsx
View File

@@ -25,10 +25,7 @@ function CustomTextFieldRange({
label={<Typography>از {item.header}</Typography>} label={<Typography>از {item.header}</Typography>}
value={filterParameters.value[0]} value={filterParameters.value[0]}
fullWidth fullWidth
error={ error={touched?.[`${item.id}`]?.value && Boolean(errors?.[`${item.id}`]?.value)}
touched?.[`${item.id}`]?.value &&
Boolean(errors?.[`${item.id}`]?.value)
}
helperText={ helperText={
<Typography <Typography
variant="caption" variant="caption"
@@ -55,11 +52,7 @@ function CustomTextFieldRange({
} }
onBlur={handleBlur} onBlur={handleBlur}
error={Boolean(errors?.[`${item.id}`]?.value)} error={Boolean(errors?.[`${item.id}`]?.value)}
helperText={ helperText={errors?.[`${item.id}`]?.value ? errors?.[`${item.id}`]?.value.message : null}
errors?.[`${item.id}`]?.value
? errors?.[`${item.id}`]?.value.message
: null
}
label={<Typography>تا {item.header}</Typography>} label={<Typography>تا {item.header}</Typography>}
value={filterParameters.value[1]} value={filterParameters.value[1]}
fullWidth fullWidth
@@ -68,11 +61,7 @@ function CustomTextFieldRange({
sx={{ my: 1 }} sx={{ my: 1 }}
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<InputAdornment <InputAdornment position="end" sx={{ cursor: "pointer" }} onClick={handleOpenFilterBox}>
position="end"
sx={{ cursor: "pointer" }}
onClick={handleOpenFilterBox}
>
<FilterListIcon /> <FilterListIcon />
</InputAdornment> </InputAdornment>
), ),

12
src/core/components/FilterDrawer/index.jsx
View File

@@ -14,8 +14,7 @@ const headerSx = {
px: 2, px: 2,
py: 1, py: 1,
backgroundColor: (theme) => theme.palette.primary.main, backgroundColor: (theme) => theme.palette.primary.main,
boxShadow: boxShadow: "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
"rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px",
maxWidth: "450px", maxWidth: "450px",
}; };
@@ -33,8 +32,7 @@ const footerSx = {
const submitButtonSx = { const submitButtonSx = {
px: 8, px: 8,
boxShadow: boxShadow: "rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
"rgba(0, 0, 0, 0.23) 0px 6px 6px, rgba(0, 0, 0, 0.19) 10px 0px 20px",
backgroundColor: "primary2", backgroundColor: "primary2",
":hover": { backgroundColor: "primary2" }, ":hover": { backgroundColor: "primary2" },
}; };
@@ -91,8 +89,8 @@ const FilterDrawer = ({ defaultValues, setFilterData, closeDrawer }) => {
}); });
} }
return acc; return acc;
}, {}), }, {})
), )
), ),
mode: "all", mode: "all",
}); });
@@ -137,7 +135,7 @@ const FilterDrawer = ({ defaultValues, setFilterData, closeDrawer }) => {
errors={errors} errors={errors}
reset={reset} reset={reset}
/> />
)), ))
)} )}
<Box sx={footerSx}> <Box sx={footerSx}>

22
src/core/components/LoadingHardPage.jsx
View File

@@ -43,35 +43,21 @@ const LoadingHardPage = ({
{authState ? ( {authState ? (
<Box> <Box>
{icon ? ( {icon ? (
<Box <Box sx={{ color: "primary.main", width: width, height: height }}>{icon}</Box>
sx={{ color: "primary.main", width: width, height: height }}
>
{icon}
</Box>
) : ( ) : (
<SvgError <SvgError color={theme.palette.error.main} width={width} height={height} />
color={theme.palette.error.main}
width={width}
height={height}
/>
)} )}
</Box> </Box>
) : ( ) : (
<LoadingImage> <LoadingImage>
{icon ? ( {icon ? (
<Box <Box sx={{ color: "primary.main", width: width, height: height }}>{icon}</Box>
sx={{ color: "primary.main", width: width, height: height }}
>
{icon}
</Box>
) : ( ) : (
<SvgLoading width={width} height={height} /> <SvgLoading width={width} height={height} />
)} )}
</LoadingImage> </LoadingImage>
)} )}
<Stack sx={{ color: authState ? "error.main" : "primary.main" }}> <Stack sx={{ color: authState ? "error.main" : "primary.main" }}>{label}</Stack>
{label}
</Stack>
</Stack> </Stack>
</Backdrop> </Backdrop>
{children} {children}

34
src/core/components/NotificationDesign/AskForKeepData.jsx
View File

@@ -7,20 +7,10 @@ import { toast } from "react-toastify";
import useTableSetting from "@/lib/hooks/useTableSetting"; import useTableSetting from "@/lib/hooks/useTableSetting";
import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects"; import { flattenObjectOfObjects } from "@/core/utils/flattenObjectOfObjects";
function AskForKeepData({ function AskForKeepData({ filterData, sortData, hideData, user_id, page_name, table_name, columns }) {
filterData,
sortData,
hideData,
user_id,
page_name,
table_name,
columns,
}) {
const { filterAction, sortAction, hideAction } = useTableSetting(); const { filterAction, sortAction, hideAction } = useTableSetting();
const filteredHideData = Object.fromEntries( const filteredHideData = Object.fromEntries(Object.entries(hideData).filter(([key, value]) => value === false));
Object.entries(hideData).filter(([key, value]) => value === false),
);
const flattenHideData = flattenObjectOfObjects(filteredHideData); const flattenHideData = flattenObjectOfObjects(filteredHideData);
@@ -32,8 +22,7 @@ function AskForKeepData({
value !== "" && value !== "" &&
!( !(
Array.isArray(value) && Array.isArray(value) &&
(value.length === 0 || (value.length === 0 || (value.length === 2 && value[0] === "" && value[1] === ""))
(value.length === 2 && value[0] === "" && value[1] === ""))
) )
) { ) {
return filterData[key]; return filterData[key];
@@ -60,27 +49,16 @@ function AskForKeepData({
mb: 1, mb: 1,
}} }}
> >
<Typography <Typography color="primary.main" variant="subtitle1" sx={{ fontWeight: "500" }}>
color="primary.main"
variant="subtitle1"
sx={{ fontWeight: "500" }}
>
ذخیره سازی تغییرات ذخیره سازی تغییرات
</Typography> </Typography>
<SaveIcon sx={{ color: "primary.main" }} /> <SaveIcon sx={{ color: "primary.main" }} />
</Box> </Box>
<Box sx={{ display: "flex", flexDirection: "column" }}> <Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="caption"> <Typography variant="caption">آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟</Typography>
آیا مایل به ذخیره تغییر های اعمال شده برای دفعات بعد هستید؟
</Typography>
</Box> </Box>
<Box sx={{ display: "flex", gap: 1, mt: 2 }}> <Box sx={{ display: "flex", gap: 1, mt: 2 }}>
<Button <Button variant="contained" size="small" endIcon={<DownloadIcon />} onClick={onSaveFilter}>
variant="contained"
size="small"
endIcon={<DownloadIcon />}
onClick={onSaveFilter}
>
ذخیره ذخیره
</Button> </Button>
<Button variant="outlined" size="small" onClick={handleDismiss}> <Button variant="outlined" size="small" onClick={handleDismiss}>

7
src/core/components/PageLoading.jsx
View File

@@ -13,12 +13,7 @@ const PageLoading = () => {
height: "100%", height: "100%",
}} }}
> >
<LoadingHardPage <LoadingHardPage width={100} height={100} loading={true} sx={{ position: "absolute" }} />
width={100}
height={100}
loading={true}
sx={{ position: "absolute" }}
/>
</Paper> </Paper>
); );
}; };

51
src/core/components/Profile/ChangePassword/Form.jsx
View File

@@ -26,13 +26,9 @@ const validationSchema = object({
new_password: string().required("اجباری"), new_password: string().required("اجباری"),
repeat_new_password: string() repeat_new_password: string()
.required("اجباری") .required("اجباری")
.test( .test("password-match", "رمز عبور جدید و تکرار آن باید یکسان باشند", function (value) {
"password-match",
"رمز عبور جدید و تکرار آن باید یکسان باشند",
function (value) {
return this.parent.new_password === value; return this.parent.new_password === value;
}, }),
),
}); });
const defaultValues = { const defaultValues = {
@@ -76,12 +72,7 @@ const Form = ({ handleCloseForm, setLoading }) => {
<StyledForm onSubmit={handleSubmit(onSubmit)} id={"ChangePassword"}> <StyledForm onSubmit={handleSubmit(onSubmit)} id={"ChangePassword"}>
<Grid container columns={1} spacing={3}> <Grid container columns={1} spacing={3}>
<Grid size={1}> <Grid size={1}>
<FormControl <FormControl error={!!errors.current_password} size="small" fullWidth variant="outlined">
error={!!errors.current_password}
size="small"
fullWidth
variant="outlined"
>
<InputLabel htmlFor="current_password">رمز عبور فعلی</InputLabel> <InputLabel htmlFor="current_password">رمز عبور فعلی</InputLabel>
<OutlinedInput <OutlinedInput
id="current_password" id="current_password"
@@ -93,19 +84,12 @@ const Form = ({ handleCloseForm, setLoading }) => {
type="text" type="text"
/> />
<FormHelperText id="current_password"> <FormHelperText id="current_password">
{errors.current_password {errors.current_password ? errors.current_password.message : null}
? errors.current_password.message
: null}
</FormHelperText> </FormHelperText>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid size={1}> <Grid size={1}>
<FormControl <FormControl error={!!errors.new_password} size="small" fullWidth variant="outlined">
error={!!errors.new_password}
size="small"
fullWidth
variant="outlined"
>
<InputLabel htmlFor="new_password">رمز عبور جدید</InputLabel> <InputLabel htmlFor="new_password">رمز عبور جدید</InputLabel>
<OutlinedInput <OutlinedInput
id="new_password" id="new_password"
@@ -134,15 +118,8 @@ const Form = ({ handleCloseForm, setLoading }) => {
</FormControl> </FormControl>
</Grid> </Grid>
<Grid size={1}> <Grid size={1}>
<FormControl <FormControl error={!!errors.repeat_new_password} size="small" fullWidth variant="outlined">
error={!!errors.repeat_new_password} <InputLabel htmlFor="repeat_new_password">تکرار رمز عبور جدید</InputLabel>
size="small"
fullWidth
variant="outlined"
>
<InputLabel htmlFor="repeat_new_password">
تکرار رمز عبور جدید
</InputLabel>
<OutlinedInput <OutlinedInput
id="repeat_new_password" id="repeat_new_password"
autoComplete="off" autoComplete="off"
@@ -155,25 +132,17 @@ const Form = ({ handleCloseForm, setLoading }) => {
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton <IconButton
aria-label="toggle password visibility" aria-label="toggle password visibility"
onClick={() => onClick={() => setShowRepeatNewPassword(!showRepeatNewPassword)}
setShowRepeatNewPassword(!showRepeatNewPassword)
}
onMouseDown={(event) => event.preventDefault()} onMouseDown={(event) => event.preventDefault()}
edge="end" edge="end"
> >
{showRepeatNewPassword ? ( {showRepeatNewPassword ? <VisibilityOff /> : <Visibility />}
<VisibilityOff />
) : (
<Visibility />
)}
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
} }
/> />
<FormHelperText id="repeat_new_password"> <FormHelperText id="repeat_new_password">
{errors.repeat_new_password {errors.repeat_new_password ? errors.repeat_new_password.message : null}
? errors.repeat_new_password.message
: null}
</FormHelperText> </FormHelperText>
</FormControl> </FormControl>
</Grid> </Grid>

8
src/core/components/Profile/ChangePassword/index.jsx
View File

@@ -18,13 +18,7 @@ const ChangePassword = ({ open, setOpen }) => {
<Form handleCloseForm={handleCloseForm} setLoading={setLoading} /> <Form handleCloseForm={handleCloseForm} setLoading={setLoading} />
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button <Button disabled={loading} variant="outlined" color="secondary" size="large" onClick={handleCloseForm}>
disabled={loading}
variant="outlined"
color="secondary"
size="large"
onClick={handleCloseForm}
>
بستن بستن
</Button> </Button>
<Button <Button

7
src/core/components/Profile/ProfileActions.jsx
View File

@@ -48,12 +48,7 @@ const ProfileActions = () => {
<PowerSettingsNewIcon /> <PowerSettingsNewIcon />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<Divider <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} />
orientation="vertical"
variant="middle"
flexItem
sx={{ mx: 1 }}
/>
<Tooltip title="تغییر رمز عبور" arrow> <Tooltip title="تغییر رمز عبور" arrow>
<IconButton <IconButton
aria-label="تغییر رمز عبور" aria-label="تغییر رمز عبور"

17
src/core/components/Profile/ProfileInfo.jsx
View File

@@ -10,18 +10,12 @@ const ProfileInfo = () => {
return ( return (
<> <>
<Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}> <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
<Avatar <Avatar alt="User Image" src={user?.avatar} sx={{ width: 56, height: 56 }} />
alt="User Image"
src={user?.avatar}
sx={{ width: 56, height: 56 }}
/>
<Stack sx={{ ml: 1 }}> <Stack sx={{ ml: 1 }}>
<Box sx={{ display: "flex", alignItems: "end", gap: 0.7 }}> <Box sx={{ display: "flex", alignItems: "end", gap: 0.7 }}>
<Typography variant="h6">{`${user.full_name}`}</Typography> <Typography variant="h6">{`${user.full_name}`}</Typography>
</Box> </Box>
<Typography variant="caption"> <Typography variant="caption">شماره تماس داخلی : {user.telephone_id}</Typography>
شماره تماس داخلی : {user.telephone_id}
</Typography>
</Stack> </Stack>
</Box> </Box>
<Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}> <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
@@ -35,12 +29,7 @@ const ProfileInfo = () => {
</Box> </Box>
<Box sx={{ my: 0.5 }}> <Box sx={{ my: 0.5 }}>
<Divider> <Divider>
<Chip <Chip size="small" label={user.username} color="success" variant="outlined" />
size="small"
label={user.username}
color="success"
variant="outlined"
/>
</Divider> </Divider>
</Box> </Box>
</> </>

26
src/core/components/Toasts/error.jsx
View File

@@ -16,9 +16,7 @@ export const errorServerToast = (toastContainer) =>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Dangerous color="error" sx={{ mr: 1.6 }} /> <Dangerous color="error" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}> <Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="caption"> <Typography variant="caption">{"The request failed due to an internal error."}</Typography>
{"The request failed due to an internal error."}
</Typography>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@@ -31,7 +29,7 @@ export const errorServerToast = (toastContainer) =>
pauseOnHover: true, pauseOnHover: true,
closeOnClick: false, closeOnClick: false,
draggable: true, draggable: true,
}, }
); );
export const errorUnauthorizedToast = (toastContainer) => export const errorUnauthorizedToast = (toastContainer) =>
@@ -48,9 +46,7 @@ export const errorUnauthorizedToast = (toastContainer) =>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Dangerous color="error" sx={{ mr: 1.6 }} /> <Dangerous color="error" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}> <Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="caption"> <Typography variant="caption">{"The user is not authorized to make the request."}</Typography>
{"The user is not authorized to make the request."}
</Typography>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@@ -63,7 +59,7 @@ export const errorUnauthorizedToast = (toastContainer) =>
pauseOnHover: true, pauseOnHover: true,
closeOnClick: false, closeOnClick: false,
draggable: true, draggable: true,
}, }
); );
export const errorAccessDeniedToast = (message, toastContainer) => export const errorAccessDeniedToast = (message, toastContainer) =>
toast.error( toast.error(
@@ -79,9 +75,7 @@ export const errorAccessDeniedToast = (message, toastContainer) =>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Dangerous color="error" sx={{ mr: 1.6 }} /> <Dangerous color="error" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}> <Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="caption"> <Typography variant="caption">{message || "Access Denied"}</Typography>
{message || "Access Denied"}
</Typography>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@@ -94,7 +88,7 @@ export const errorAccessDeniedToast = (message, toastContainer) =>
pauseOnHover: true, pauseOnHover: true,
closeOnClick: false, closeOnClick: false,
draggable: true, draggable: true,
}, }
); );
export const errorLogicToast = (message, toastContainer) => export const errorLogicToast = (message, toastContainer) =>
@@ -125,7 +119,7 @@ export const errorLogicToast = (message, toastContainer) =>
autoClose: false, autoClose: false,
closeOnClick: false, closeOnClick: false,
draggable: false, draggable: false,
}, }
); );
export const errorValidationToast = (message, toastContainer) => export const errorValidationToast = (message, toastContainer) =>
@@ -156,7 +150,7 @@ export const errorValidationToast = (message, toastContainer) =>
autoClose: false, autoClose: false,
closeOnClick: false, closeOnClick: false,
draggable: false, draggable: false,
}, }
); );
export const errorTooManyToast = (toastContainer) => export const errorTooManyToast = (toastContainer) =>
@@ -186,7 +180,7 @@ export const errorTooManyToast = (toastContainer) =>
autoClose: false, autoClose: false,
closeOnClick: false, closeOnClick: false,
draggable: false, draggable: false,
}, }
); );
export const errorClientToast = (toastContainer) => export const errorClientToast = (toastContainer) =>
@@ -218,5 +212,5 @@ export const errorClientToast = (toastContainer) =>
autoClose: false, autoClose: false,
closeOnClick: false, closeOnClick: false,
draggable: false, draggable: false,
}, }
); );

6
src/core/components/Toasts/success.jsx
View File

@@ -16,9 +16,7 @@ export const successToast = (toastContainer) =>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Beenhere color="success" sx={{ mr: 1.6 }} /> <Beenhere color="success" sx={{ mr: 1.6 }} />
<Box sx={{ display: "flex", flexDirection: "column" }}> <Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="caption"> <Typography variant="caption">{"عملیات با موفقیت انجام شد"}</Typography>
{"عملیات با موفقیت انجام شد"}
</Typography>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@@ -31,5 +29,5 @@ export const successToast = (toastContainer) =>
pauseOnHover: true, pauseOnHover: true,
closeOnClick: false, closeOnClick: false,
draggable: true, draggable: true,
}, }
); );

7
src/core/components/svgs/SvgError.jsx
View File

@@ -6,12 +6,7 @@ const SvgError = ({ width, height, color = null }) => {
const fillColor = color || theme.palette.primary.main; const fillColor = color || theme.palette.primary.main;
return ( return (
<svg <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 524.67001 418.27099">
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 524.67001 418.27099"
>
<path <path
d="M442.17403,400.47713c2.06599,.12871,3.20692-2.43846,1.64338-3.93389l-.1557-.61814c.0204-.04935,.04089-.09868,.06153-.14794,1.23211-2.94003,4.62545-4.33201,7.57137-3.11404,9.3142,3.85087-.51966,12.69986,.21957,18.68773,.25911,2.06671,8.35473,2.18034,7.89681,4.2086,4.30482-9.41207,6.56835-19.68889,6.56478-30.02306-.0009-2.59653-.14392-5.19297-.43543-7.78281-.23975-2.11845-.56985-4.22389-.9969-6.30999-2.30966-11.27639-7.30614-22.01572-14.51084-30.98461-3.46263-1.89129-1.35074-4.85018-3.09586-8.39544-.62694-1.27868-6.21792-1.30745-6.45092-2.70892,.25019,.03272,3.86434-3.721,2.6705-5.5767-.78555-1.22107-.54106-2.7763,.4681-3.82017,.09887-.1023,.19234-.2103,.27796-.32648,2.98093-4.04443,7.09003-3.33985,9.23695,2.15406,4.58304,2.31107,4.62871,6.14647,1.81834,9.83619-1.78798,2.34745-2.03264,5.52304-3.60129,8.03604,.16157,.20664,.32958,.40684,.49112,.61348,2.96237,3.79686,5.52482,7.87809,7.68524,12.16592-.61182-4.76599,.28705-10.50831,1.8215-14.21023,1.75933-4.24835,5.06953-7.8221,7.96883-11.49665,3.46275-4.38865,10.5104-2.39707,11.12286,3.15951,.00588,.05337,.0116,.10665,.01724,.16003-.42884,.24212-.84895,.49935-1.25929,.77094-2.33882,1.54808-1.52824,5.17442,1.24391,5.60071l.06278,.00965c-.1545,1.54372-5.63258,6.40679-6.01957,7.91187,3.70514,14.30838,.93282,16.19755-10.46624,16.43703l-.59825,.8522c1.08024,3.1058,1.94956,6.2861,2.60235,9.50743,.61462,2.99021,1.042,6.01282,1.28197,9.04845,.29847,3.82994,.27396,7.6795-.04769,11.50325l.01933-.13563c.81879-4.21143,3.1039-8.1457,6.42284-10.87249,4.94421-4.06436,11.93091-5.56281,17.2652-8.83022,2.56778-1.57285,5.85959,.45742,5.41241,3.4352l-.02177,.14262c-.79432,.32315-1.56922,.69808-2.31831,1.11814-.42921,.24237-.84965,.49978-1.26032,.77165-2.33916,1.54848-1.52796,5.1753,1.24498,5.60009l.06281,.00962c.0452,.00645,.08399,.01291,.12913,.0194-1.3617,3.23628-14.33553,7.80147-16.71149,10.39229-2.31031,12.49793-1.17531,12.12596-11.81075,8.49032h-.00647c-1.16085,5.06419-2.8578,10.01225-5.03931,14.72794l-18.0202,.00623c-.06471-.2002-.12288-.40688-.18109-.60712,1.66645,.10285,3.34571,.00534,4.98619-.29875-1.33757-1.64013-2.67509-3.29317-4.01266-4.93324-.0323-.03228-.05819-.06459-.08402-.09686l-.02036-.02517-1.85532-6.10724c.14644-1.35476,.38536-2.69828,.70958-4.02051l.00049-.00037v.00006Z" d="M442.17403,400.47713c2.06599,.12871,3.20692-2.43846,1.64338-3.93389l-.1557-.61814c.0204-.04935,.04089-.09868,.06153-.14794,1.23211-2.94003,4.62545-4.33201,7.57137-3.11404,9.3142,3.85087-.51966,12.69986,.21957,18.68773,.25911,2.06671,8.35473,2.18034,7.89681,4.2086,4.30482-9.41207,6.56835-19.68889,6.56478-30.02306-.0009-2.59653-.14392-5.19297-.43543-7.78281-.23975-2.11845-.56985-4.22389-.9969-6.30999-2.30966-11.27639-7.30614-22.01572-14.51084-30.98461-3.46263-1.89129-1.35074-4.85018-3.09586-8.39544-.62694-1.27868-6.21792-1.30745-6.45092-2.70892,.25019,.03272,3.86434-3.721,2.6705-5.5767-.78555-1.22107-.54106-2.7763,.4681-3.82017,.09887-.1023,.19234-.2103,.27796-.32648,2.98093-4.04443,7.09003-3.33985,9.23695,2.15406,4.58304,2.31107,4.62871,6.14647,1.81834,9.83619-1.78798,2.34745-2.03264,5.52304-3.60129,8.03604,.16157,.20664,.32958,.40684,.49112,.61348,2.96237,3.79686,5.52482,7.87809,7.68524,12.16592-.61182-4.76599,.28705-10.50831,1.8215-14.21023,1.75933-4.24835,5.06953-7.8221,7.96883-11.49665,3.46275-4.38865,10.5104-2.39707,11.12286,3.15951,.00588,.05337,.0116,.10665,.01724,.16003-.42884,.24212-.84895,.49935-1.25929,.77094-2.33882,1.54808-1.52824,5.17442,1.24391,5.60071l.06278,.00965c-.1545,1.54372-5.63258,6.40679-6.01957,7.91187,3.70514,14.30838,.93282,16.19755-10.46624,16.43703l-.59825,.8522c1.08024,3.1058,1.94956,6.2861,2.60235,9.50743,.61462,2.99021,1.042,6.01282,1.28197,9.04845,.29847,3.82994,.27396,7.6795-.04769,11.50325l.01933-.13563c.81879-4.21143,3.1039-8.1457,6.42284-10.87249,4.94421-4.06436,11.93091-5.56281,17.2652-8.83022,2.56778-1.57285,5.85959,.45742,5.41241,3.4352l-.02177,.14262c-.79432,.32315-1.56922,.69808-2.31831,1.11814-.42921,.24237-.84965,.49978-1.26032,.77165-2.33916,1.54848-1.52796,5.1753,1.24498,5.60009l.06281,.00962c.0452,.00645,.08399,.01291,.12913,.0194-1.3617,3.23628-14.33553,7.80147-16.71149,10.39229-2.31031,12.49793-1.17531,12.12596-11.81075,8.49032h-.00647c-1.16085,5.06419-2.8578,10.01225-5.03931,14.72794l-18.0202,.00623c-.06471-.2002-.12288-.40688-.18109-.60712,1.66645,.10285,3.34571,.00534,4.98619-.29875-1.33757-1.64013-2.67509-3.29317-4.01266-4.93324-.0323-.03228-.05819-.06459-.08402-.09686l-.02036-.02517-1.85532-6.10724c.14644-1.35476,.38536-2.69828,.70958-4.02051l.00049-.00037v.00006Z"
fill="#f2f2f2" fill="#f2f2f2"

Some files were not shown because too many files have changed in this diff Show More