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

Change structure Dashboard layout

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-11-04 10:33:37 +03:30
parent 759babc0c7
commit 0b159e15de
15 changed files with 197 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/dashboard/change-password/index.jsx
View File

@@ -1,18 +1,15 @@
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayout from "@/layouts/DashboardLayout";
import {Container} from "@mui/material";
import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
const DashboardChangePasswordComponent = () => {
return (
<DashboardLayout>
<CenterLayout>
<Container maxWidth="sm">
<ChangePasswordForm />
</Container>
</CenterLayout>
</DashboardLayout>
<CenterLayout>
<Container maxWidth="sm">
<ChangePasswordForm/>
</Container>
</CenterLayout>
);
};
export default DashboardChangePasswordComponent;

279
src/components/dashboard/edit-profile/index.jsx
View File

@@ -1,6 +1,5 @@
import StyledForm from "@/core/components/StyledForm";
import CenterLayout from "@/layouts/CenterLayout";
import DashboardLayout from "@/layouts/DashboardLayout";
import useUser from "@/lib/app/hooks/useUser";
import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
import * as Yup from "yup";
@@ -50,148 +49,146 @@ const DashboardEditProfile = () => {
const validationSchema = Yup.object().shape({});
return (
<DashboardLayout>
<CenterLayout>
<Container maxWidth="sm">
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<StyledForm
onSubmit={(e) => {
e.preventDefault();
props.handleSubmit();
}}
>
<Paper elevation={0}>
<Stack spacing={3} sx={{p: 5}} component="div">
<Typography margin={2} variant="h4" textAlign="center">
{t("UpdateProfile.typography_edit_profile")}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<AvatarUpload
user={user}
setFieldValue={props.setFieldValue}
valueAvatar="expert_avatar"
changeFlag="change_avatar"
<CenterLayout>
<Container maxWidth="sm">
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
{(props) => (
<StyledForm
onSubmit={(e) => {
e.preventDefault();
props.handleSubmit();
}}
>
<Paper elevation={0}>
<Stack spacing={3} sx={{p: 5}} component="div">
<Typography margin={2} variant="h4" textAlign="center">
{t("UpdateProfile.typography_edit_profile")}
</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<AvatarUpload
user={user}
setFieldValue={props.setFieldValue}
valueAvatar="expert_avatar"
changeFlag="change_avatar"
/>
</Box>
<Grid container spacing={2} sx={{pb: 2}}>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="username"
label={t("UpdateProfile.text_field_username")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.username && props.errors.username)}
helperText={
props.touched.username
? props.errors.username
: null
}
sx={{
width: "100%",
}}
/>
</Box>
<Grid container spacing={2} sx={{pb: 2}}>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="username"
label={t("UpdateProfile.text_field_username")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.username && props.errors.username)}
helperText={
props.touched.username
? props.errors.username
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="name"
label={t("UpdateProfile.text_field_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.name && props.errors.name)}
helperText={
props.touched.name ? props.errors.name : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="email"
label={t("UpdateProfile.text_field_email")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.email && props.errors.email)}
helperText={
props.touched.email ? props.errors.email : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="province_name"
label={t("UpdateProfile.text_field_province_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.province_name && props.errors.province_name)}
helperText={
props.touched.province_name
? props.errors.province_name
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="position"
label={t("UpdateProfile.text_field_position")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.position && props.errors.position)}
helperText={
props.touched.position
? props.errors.position
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
</Grid>
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
</Container>
</CenterLayout>
</DashboardLayout>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="name"
label={t("UpdateProfile.text_field_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.name && props.errors.name)}
helperText={
props.touched.name ? props.errors.name : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="email"
label={t("UpdateProfile.text_field_email")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.email && props.errors.email)}
helperText={
props.touched.email ? props.errors.email : null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="province_name"
label={t("UpdateProfile.text_field_province_name")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.province_name && props.errors.province_name)}
helperText={
props.touched.province_name
? props.errors.province_name
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
<Grid item xs={12} sm={6}>
<Field
as={TextField}
name="position"
label={t("UpdateProfile.text_field_position")}
variant="outlined"
margin="normal"
size="small"
disabled={true}
error={!!(props.touched.position && props.errors.position)}
helperText={
props.touched.position
? props.errors.position
: null
}
sx={{
width: "100%",
}}
/>
</Grid>
</Grid>
</Stack>
</Paper>
</StyledForm>
)}
</Formik>
</Container>
</CenterLayout>
);
};

5
src/components/dashboard/expert-management/index.jsx
View File

@@ -1,11 +1,8 @@
import DashboardLayouts from "@/layouts/DashboardLayout";
import ExpertManagementDataTable from "@/components/dashboard/expert-management/DataTable";
function DashboardExpertManagementComponent() {
return (
<DashboardLayouts>
<ExpertManagementDataTable/>
</DashboardLayouts>
<ExpertManagementDataTable/>
);
}

4
src/components/dashboard/first/index.jsx
View File

@@ -1,7 +1,5 @@
import DashboardLayout from "@/layouts/DashboardLayout";
const DashboardFirstComponent = () => {
return <DashboardLayout></DashboardLayout>;
return <></>;
};
export default DashboardFirstComponent;

6
src/components/dashboard/role-management/index.jsx
View File

@@ -1,12 +1,8 @@
import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
import DashboardLayout from "@/layouts/DashboardLayout";
import moment from "jalali-moment";
function DashboardRoleManagementComponent() {
return (
<DashboardLayout>
<RoleManagementComponent />
</DashboardLayout>
<RoleManagementComponent/>
);
}

7
src/components/layouts/Dashboard/index.jsx
View File

@@ -4,6 +4,7 @@ import FullPageLayout from "@/layouts/FullPageLayout";
import {Toolbar} from "@mui/material";
import BreadCrumbs from "src/components/layouts/Dashboard/Breadcrumbs";
import {useState} from "react";
import RolePermissionMiddleware from "@/middlewares/RolePermission";
const drawerWidth = 240;
@@ -34,8 +35,10 @@ const Dashboard = (props) => {
>
<Toolbar/>
<FullPageLayout sx={{mt: 3}}>
<BreadCrumbs isVisible={true}/>
{props.children}
<RolePermissionMiddleware requiredPermissions={props.permissions}>
<BreadCrumbs isVisible={true}/>
{props.children}
</RolePermissionMiddleware>
</FullPageLayout>
</FullPageLayout>
</FullPageLayout>

7
src/layouts/DashboardLayout.jsx
View File

@@ -1,16 +1,17 @@
import Dashboard from "src/components/layouts/Dashboard";
import AppPermission from "@/middlewares/AppPermission";
import CallWidget from "@/components/layouts/Dashboard/CallWidget";
import WithAuthMiddleware from "@/middlewares/WithAuth";
const DashboardLayout = (props) => {
const permissions = ["NEXT_PUBLIC_HAS_WIDGET"];
return (
<>
<WithAuthMiddleware>
<Dashboard {...props}/>
<AppPermission permissions={permissions}>
<CallWidget />
<CallWidget/>
</AppPermission>
</>
</WithAuthMiddleware>
);
};

20
src/layouts/index.jsx Normal file
View File

@@ -0,0 +1,20 @@
import DashboardLayout from "@/layouts/DashboardLayout";
import {Fragment} from "react";
const layoutList = {
DashboardLayout
}
const Layout = ({layout, children}) => {
const Component = layoutList[layout?.name] || Fragment
const props = layout?.props || {}
return (
<Component {...props}>
{children}
</Component>
)
}
export default Layout

6
src/middlewares/RolePermission.jsx
View File

@@ -1,14 +1,14 @@
import useUser from "@/lib/app/hooks/useUser";
import RolePermissionComponent from "@/core/components/Middleware/RolePermissionComponent";
const RolePermissionMiddleware = ({children, requiredPermissions}) => {
const RolePermissionMiddleware = ({children, requiredPermissions = []}) => {
const {user} = useUser();
const hasPermission = requiredPermissions.some((permission) =>
const hasPermission = requiredPermissions.length === 0 ? true : requiredPermissions.some((permission) =>
user?.permissions?.includes(permission)
);
return !hasPermission ? <RolePermissionComponent /> : <>{children}</>;
return !hasPermission ? <RolePermissionComponent/> : <>{children}</>;
};
export default RolePermissionMiddleware;

5
src/pages/_app.jsx
View File

@@ -9,6 +9,7 @@ import {NextIntlProvider} from "next-intl";
import TitlePage from "@/core/components/TitlePage";
import {SocketProvider} from "@/lib/app/contexts/socket";
import {ToastProvider} from "@/lib/app/contexts/toast";
import Layout from "@/layouts";
const App = ({Component, pageProps}) => {
@@ -22,7 +23,9 @@ const App = ({Component, pageProps}) => {
<ToastProvider>
<AppLayout isBot={pageProps.isBot}>
<SocketProvider>
<Component {...pageProps} />
<Layout layout={pageProps.layout}>
<Component {...pageProps} />
</Layout>
</SocketProvider>
</AppLayout>
</ToastProvider>

8
src/pages/dashboard/change-password/index.jsx
View File

@@ -1,12 +1,9 @@
import DashboardChangePasswordComponent from "@/components/dashboard/change-password";
import WithAuthMiddleware from "@/middlewares/WithAuth";
import {parse} from "next-useragent";
export default function LoanFollowUp() {
return (
<WithAuthMiddleware>
<DashboardChangePasswordComponent/>
</WithAuthMiddleware>
<DashboardChangePasswordComponent/>
);
}
@@ -17,7 +14,8 @@ export async function getServerSideProps({req, locale}) {
messages: (await import(`&/locales/${locale}/app.json`)).default,
title: "Dashboard.change_password",
isBot,
locale
locale,
layout: {name: 'DashboardLayout'}
},
};
}

8
src/pages/dashboard/edit-profile/index.jsx
View File

@@ -1,12 +1,9 @@
import DashboardEditProfile from "@/components/dashboard/edit-profile";
import WithAuthMiddleware from "@/middlewares/WithAuth";
import {parse} from "next-useragent";
export default function LoanFollowUp() {
return (
<WithAuthMiddleware>
<DashboardEditProfile/>
</WithAuthMiddleware>
<DashboardEditProfile/>
);
}
@@ -17,7 +14,8 @@ export async function getServerSideProps({req, locale}) {
messages: (await import(`&/locales/${locale}/app.json`)).default,
title: "Dashboard.edit_profile",
isBot,
locale
locale,
layout: {name: 'DashboardLayout'}
},
};
}

12
src/pages/dashboard/expert-management/index.jsx
View File

@@ -1,16 +1,9 @@
import WithAuthMiddleware from "@/middlewares/WithAuth";
import {parse} from "next-useragent";
import DashboardExpertManagementComponent from "@/components/dashboard/expert-management";
import RolePermissionMiddleware from "@/middlewares/RolePermission";
const requiredPermissions = ["manage_users"];
export default function ExpertManagement() {
return (
<WithAuthMiddleware>
<RolePermissionMiddleware requiredPermissions={requiredPermissions}>
<DashboardExpertManagementComponent/>
</RolePermissionMiddleware>
</WithAuthMiddleware>
<DashboardExpertManagementComponent/>
);
}
@@ -21,7 +14,8 @@ export async function getServerSideProps({req, locale}) {
messages: (await import(`&/locales/${locale}/app.json`)).default,
title: "Dashboard.expert_management",
isBot,
locale
locale,
layout: {name: 'DashboardLayout', props: {permissions: ["manage_users"]}}
},
};
}

8
src/pages/dashboard/index.jsx
View File

@@ -1,12 +1,9 @@
import DashboardFirstComponent from "@/components/dashboard/first";
import WithAuthMiddleware from "@/middlewares/WithAuth";
import {parse} from "next-useragent";
export default function Dashboard() {
return (
<WithAuthMiddleware>
<DashboardFirstComponent/>
</WithAuthMiddleware>
<DashboardFirstComponent/>
);
}
@@ -17,7 +14,8 @@ export async function getServerSideProps({req, locale}) {
messages: (await import(`&/locales/${locale}/app.json`)).default,
title: "Dashboard.dashboard_page",
isBot,
locale
locale,
layout: {name: 'DashboardLayout'}
},
};
}

12
src/pages/dashboard/role-management/index.jsx
View File

@@ -1,16 +1,9 @@
import RolePermissionMiddleware from "@/middlewares/RolePermission";
import WithAuthMiddleware from "@/middlewares/WithAuth";
import {parse} from "next-useragent";
import DashboardRoleManagementComponent from "@/components/dashboard/role-management";
const requiredPermissions = ["manage_roles"];
export default function RoleManagement() {
return (
<WithAuthMiddleware>
<RolePermissionMiddleware requiredPermissions={requiredPermissions}>
<DashboardRoleManagementComponent/>
</RolePermissionMiddleware>
</WithAuthMiddleware>
<DashboardRoleManagementComponent/>
);
}
@@ -21,7 +14,8 @@ export async function getServerSideProps({req, locale}) {
messages: (await import(`&/locales/${locale}/app.json`)).default,
title: "Dashboard.role_management_page",
isBot,
locale
locale,
layout: {name: 'DashboardLayout', props: {permissions: ["manage_roles"]}}
},
};
}