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

CFE-5 fixed bug in datatable

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-10-21 15:51:57 +03:30
parent 74e9c53baf
commit 416fffd93a
18 changed files with 42 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,7 @@ function ExpertManagementDataTable() {
},
{
accessorFn: (row) => row.full_name,
id: "name",
id: "full_name",
header: t("ExpertMangement.name"),
enableColumnFilter: true,
datatype: "text",
@@ -105,7 +105,7 @@ function ExpertManagementDataTable() {
},
{
accessorFn: (row) => row.province_fa,
id: "province_fa",
id: "province_id",
header: t("ExpertMangement.province_fa"),
enableColumnFilter: false,
datatype: "text",
@@ -116,10 +116,11 @@ function ExpertManagementDataTable() {
),
},
{
accessorFn: (row) => row.roles[0].name_fa,
accessorFn: (row) => row.roles[0]?.name_fa,
id: "roles[0].name_fa",
header: t("ExpertMangement.role_name"),
enableColumnFilter: false,
enableSorting: false,
datatype: "text",
filterFn: "contains",
columnFilterModeOptions: ["contains", "equals", "notEquals"],

4
src/components/dashboard/expert-management/Form/CreateForm/CreateContent/index.jsx
View File

@@ -8,7 +8,7 @@ import PersonalInfo from "@/components/dashboard/expert-management/Form/CreateFo
import UserInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/UserInfo";
import RestInfo from "@/components/dashboard/expert-management/Form/CreateForm/CreateContent/RestInfo";
const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
const CreateContent = ({setOpenCreateDialog, mutate}) => {
const t = useTranslations();
const requestServer = useRequest()
@@ -63,7 +63,7 @@ const CreateContent = ({setOpenCreateDialog, mutate, fetchUrl}) => {
requestServer(`${ADD_EXPERT}`, 'post', {auth: true, data: formData})
.then((response) => {
setOpenCreateDialog(false)
mutate(fetchUrl)
mutate()
}).catch(() => {
}).finally(() => {
setSubmitting(false);

4
src/components/dashboard/expert-management/Form/CreateForm/index.jsx
View File

@@ -4,7 +4,7 @@ import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {useState} from "react";
import CreateContent from "./CreateContent";
const Create = ({mutate, fetchUrl}) => {
const Create = ({mutate}) => {
const t = useTranslations();
const [openCreateDialog, setOpenCreateDialog] = useState(false);
@@ -30,7 +30,7 @@ const Create = ({mutate, fetchUrl}) => {
TransitionProps={{unmountOnExit: true}}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DialogTitle>{t("ExpertMangement.create")}</DialogTitle>
<CreateContent setOpenCreateDialog={setOpenCreateDialog} mutate={mutate} fetchUrl={fetchUrl}/>
<CreateContent setOpenCreateDialog={setOpenCreateDialog} mutate={mutate}/>
</Dialog>
</>
)

4
src/components/dashboard/expert-management/Form/DeleteForm/index.jsx
View File

@@ -14,7 +14,7 @@ import {DELETE_EXPERT} from "@/core/data/apiRoutes";
import useRequest from "@/lib/app/hooks/useRequest";
import {useTranslations} from "next-intl";
const Delete = ({rowId, fetchUrl, mutate}) => {
const Delete = ({rowId, mutate}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true});
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
@@ -25,7 +25,7 @@ const Delete = ({rowId, fetchUrl, mutate}) => {
requestServer(`${DELETE_EXPERT}/${rowId}`, 'DELETE')
.then((response) => {
setOpenDeleteDialog(false);
mutate(fetchUrl)
mutate()
})
.catch(() => {
})

6
src/components/dashboard/expert-management/Form/UpdateForm/UpdateContent/index.jsx
View File

@@ -8,7 +8,7 @@ import PersonalInfo from "./PersonalInfo";
import UserInfo from "./UserInfo";
import RestInfo from "./RestInfo";
const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
const UpdateContent = ({row, mutate, setOpenUpdateDialog}) => {
const t = useTranslations();
const requestServer = useRequest()
@@ -36,7 +36,7 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
national_id: row.original.national_id,
position: row.original.position,
province_id: row.original.province_id,
roles: row.original.roles[0].id
roles: row.original.roles[0]?.id
},
validationSchema,
onSubmit: (values, {setSubmitting}) => {
@@ -55,7 +55,7 @@ const UpdateContent = ({row, fetchUrl, mutate, setOpenUpdateDialog}) => {
requestServer(`${UPDATE_EXPERT}/${row.original.id}`, 'post', {auth: true, data: formData})
.then((response) => {
setOpenUpdateDialog(false)
mutate(fetchUrl)
mutate()
}).catch(() => {
}).finally(() => {
setSubmitting(false);

4
src/components/dashboard/expert-management/Form/UpdateForm/index.jsx
View File

@@ -5,7 +5,7 @@ import {useState} from "react";
import UpdateContent from "./UpdateContent";
const Update = ({row, fetchUrl, mutate}) => {
const Update = ({row, mutate}) => {
const t = useTranslations();
const [openUpdateDialog, setOpenUpdateDialog] = useState(false);
@@ -25,7 +25,7 @@ const Update = ({row, fetchUrl, mutate}) => {
<Dialog data-testid="update-dialog-content" fullWidth maxWidth={'lg'} open={openUpdateDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DialogTitle>{t("ExpertMangement.update_expert")}</DialogTitle>
<UpdateContent row={row} mutate={mutate} fetchUrl={fetchUrl} setOpenUpdateDialog={setOpenUpdateDialog}/>
<UpdateContent row={row} mutate={mutate} setOpenUpdateDialog={setOpenUpdateDialog}/>
</Dialog>
</>
);

6
src/components/dashboard/expert-management/TableRowActions.jsx
View File

@@ -1,25 +1,21 @@
import {Box} from "@mui/material";
import Update from "./Form/UpdateForm"
import Delete from "./Form/DeleteForm";
import ChangePassword from "./Form/ChangePassword";
const TableRowActions = ({row, mutate, fetchUrl}) => {
const TableRowActions = ({row, mutate}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<Update
row={row}
mutate={mutate}
fetchUrl={fetchUrl}
/>
{/*<ChangePassword*/}
{/* rowId={row.getValue("id")}*/}
{/* mutate={mutate}*/}
{/* fetchUrl={fetchUrl}*/}
{/*/>*/}
<Delete
rowId={row.getValue("id")}
mutate={mutate}
fetchUrl={fetchUrl}
/>
</Box>
);

4
src/components/dashboard/expert-management/TableToolbar.jsx
View File

@@ -2,11 +2,11 @@ import {useTranslations} from "next-intl";
import Create from "./Form/CreateForm";
import {Box} from "@mui/material";
function TableToolbar({mutate, fetchUrl}) {
function TableToolbar({mutate}) {
const t = useTranslations();
return (
<Box>
<Create mutate={mutate} fetchUrl={fetchUrl}/>
<Create mutate={mutate}/>
</Box>
);
}

4
src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx
View File

@@ -21,7 +21,7 @@ import {useFormik} from "formik";
import {ADD_ROLE} from "@/core/data/apiRoutes";
import usePermissions from "@/lib/app/hooks/usePermissions";
const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
const CreateContent = ({mutate, setOpenConfirmDialog}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {permissions_list, isLoading} = usePermissions()
@@ -47,7 +47,7 @@ const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => {
data: formData,
}).then(() => {
setOpenConfirmDialog(false)
mutate(fetchUrl)
mutate()
update_notification()
}).catch(() => {
}).finally(() => {

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

@@ -1,10 +1,10 @@
import {Button, Dialog, DialogTitle, Stack, Tooltip} from "@mui/material";
import {Button, Dialog, Stack, Tooltip} from "@mui/material";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {useTranslations} from "next-intl";
import {useState} from "react";
import CreateContent from "./CreateContent";
const CreateForm = ({mutate, fetchUrl}) => {
const CreateForm = ({mutate}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
@@ -26,7 +26,7 @@ const CreateForm = ({mutate, fetchUrl}) => {
</Tooltip>
<Dialog maxWidth={"lg"} open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<CreateContent mutate={mutate} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
<CreateContent mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog}/>
</Dialog>
</Stack>
)

4
src/components/dashboard/role-management/Form/DeleteForm/DeleteContent.jsx
View File

@@ -5,7 +5,7 @@ import useRequest from "@/lib/app/hooks/useRequest";
import useNotification from "@/lib/app/hooks/useNotification";
import {useTranslations} from "next-intl";
const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => {
const DeleteContent = ({rowId, mutate, setOpenConfirmDialog}) => {
const t = useTranslations();
const [isSubmitting, setIsSubmitting] = useState(false)
const requestServer = useRequest({auth: true})
@@ -13,7 +13,7 @@ const DeleteContent = ({rowId, fetchUrl, mutate, setOpenConfirmDialog}) => {
const handleSubmit = () => {
setIsSubmitting(true)
requestServer(`${DELETE_ROLE}/${rowId}`, 'delete').then((response) => {
mutate(fetchUrl)
mutate()
update_notification()
}).catch(() => {
}).finally(() => {

9
src/components/dashboard/role-management/Form/DeleteForm/index.jsx
View File

@@ -1,13 +1,10 @@
import {useTranslations} from "next-intl";
import {useState} from "react";
import {
Dialog, IconButton,
Tooltip,
} from "@mui/material";
import {Dialog, IconButton, Tooltip} from "@mui/material";
import DeleteIcon from '@mui/icons-material/Delete';
import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
const DeleteForm = ({rowId, fetchUrl, mutate}) => {
const DeleteForm = ({rowId, mutate}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
@@ -27,7 +24,7 @@ const DeleteForm = ({rowId, fetchUrl, mutate}) => {
</Tooltip>
<Dialog maxWidth="sm" open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<DeleteContent rowId={rowId} fetchUrl={fetchUrl} mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog} />
<DeleteContent rowId={rowId} mutate={mutate} setOpenConfirmDialog={setOpenConfirmDialog}/>
</Dialog>
</>
);

5
src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx
View File

@@ -22,7 +22,7 @@ import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest";
import {useTranslations} from "next-intl";
const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
const UpdateContent = ({mutate, row, setOpenConfirmDialog}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
@@ -50,7 +50,8 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => {
requestServer(`${UPDATE_ROLE}/${row.getValue("id")}`, 'post', {
data: formData,
}).then((response) => {
mutate(fetchUrl)
setOpenConfirmDialog(false)
mutate()
update_notification()
}).catch(() => {
}).finally(() => {

8
src/components/dashboard/role-management/Form/UpdateForm/index.jsx
View File

@@ -4,13 +4,13 @@ import {useState} from "react";
import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
import EditIcon from "@mui/icons-material/Edit";
const UpdateForm = ({mutate, fetchUrl, row}) => {
const UpdateForm = ({mutate, row}) => {
const t = useTranslations();
const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
return (
<Stack direction={"row"} spacing={2}>
<Tooltip title={t("UpdateDialog.update")} arrow placement="right">
<Tooltip title={t("UpdateDialog.update")} arrow placement="right">
<IconButton
data-testid="dialog_tooltip"
color="primary"
@@ -18,12 +18,12 @@ const UpdateForm = ({mutate, fetchUrl, row}) => {
setOpenConfirmDialog(true);
}}
>
<EditIcon />
<EditIcon/>
</IconButton>
</Tooltip>
<Dialog maxWidth={"md"} open={openConfirmDialog}
PaperProps={{sx: {boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}}>
<UpdateContent mutate={mutate} row={row} fetchUrl={fetchUrl} setOpenConfirmDialog={setOpenConfirmDialog}/>
<UpdateContent mutate={mutate} row={row} setOpenConfirmDialog={setOpenConfirmDialog}/>
</Dialog>
</Stack>
)

4
src/components/dashboard/role-management/TableRowActions.jsx
View File

@@ -3,18 +3,16 @@ import UpdateForm from "@/components/dashboard/role-management/Form/UpdateForm";
import DeleteForm from "@/components/dashboard/role-management/Form/DeleteForm";
const TableRowActions = ({row, mutate, fetchUrl}) => {
const TableRowActions = ({row, mutate}) => {
return (
<Box sx={{display: "flex", flexWrap: "nowrap", gap: "8px"}}>
<UpdateForm
row={row}
mutate={mutate}
fetchUrl={fetchUrl}
/>
<DeleteForm
rowId={row.getValue("id")}
fetchUrl={fetchUrl}
mutate={mutate}
/>
</Box>

4
src/components/dashboard/role-management/TableToolbar.jsx
View File

@@ -1,10 +1,10 @@
import {useTranslations} from "next-intl";
import CreateForm from "@/components/dashboard/role-management/Form/CreateForm";
function TableToolbar({mutate, fetchUrl}) {
function TableToolbar({mutate}) {
const t = useTranslations();
return <CreateForm mutate={mutate} fetchUrl={fetchUrl}/>
return <CreateForm mutate={mutate}/>
}

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

@@ -121,7 +121,7 @@ function DataTable(props) {
}}
enableColumnFilterModes
muiTablePaperProps={{elevation: 0}}
rowCount={data?.meta.totalRowCount}
rowCount={data?.meta?.totalRowCount ?? 0}
onColumnFilterFnsChange={setColumnFilterFns}
onColumnFiltersChange={setColumnFilters}
onPaginationChange={setPagination}
@@ -130,7 +130,7 @@ function DataTable(props) {
renderTopToolbarCustomActions={({table}) => (
<>
{props.enableCustomToolbar /* send condition */
? <props.CustomToolbar fetchUrl={fetchUrl} mutate={mutate}/> /* send component */
? <props.CustomToolbar mutate={mutate}/> /* send component */
: "<span></span>"}
</>
)}
@@ -163,7 +163,7 @@ function DataTable(props) {
}}
positionActionsColumn={"last"}
enableRowActions={props.enableRowActions}
renderRowActions={({row}) => <props.TableRowAction fetchUrl={fetchUrl} mutate={mutate} row={row}/>}
renderRowActions={({row}) => <props.TableRowAction mutate={mutate} row={row}/>}
{...props}
/>
);

3
src/lib/app/hooks/useNotification.jsx
View File

@@ -14,10 +14,9 @@ const useNotification = () => {
};
const {data, mutate} = useSWR(GET_SIDEBAR_NOTIFICATION, fetcher)
const notification_count = data
//swr config
// render data
return {notification_count, update_notification: mutate}
return {notification_count: data, update_notification: mutate}
}
export default useNotification