loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LFFE-12 add add isLoading in permissionLists

Browse Source
This commit is contained in:
AminGhasempoor
2023-11-05 14:51:50 +03:30
parent 8833120e31
commit 2e2aabc528
4 changed files with 80 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/locales/fa/app.json
View File

@@ -360,7 +360,8 @@
"permission_min_error": "حداقل باید یک دسترسی انتخاب شود",
"type_id": "نوع کاربر",
"navgan_id": "کد ناوگان",
"button-update": "ویرایش"
"button-update": "ویرایش",
"loading_permissions_list": "درحال دریافت لیست دسترسی ها"
},
"UploadSystem": {
"upload_file": "فایل خود را بارگذاری کنید",
@@ -467,6 +468,7 @@
"type_id": "نوع کاربر",
"navgan_id": "کد ناوگان",
"button-cancel": "انصراف",
"button-add": "ثبت"
"button-add": "ثبت",
"loading_permissions_list": "درحال دریافت لیست دسترسی ها"
}
}

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

@@ -1,6 +1,6 @@
import {
Button,
Checkbox,
Checkbox, CircularProgress,
DialogActions,
DialogContent,
FormControl,
@@ -9,7 +9,7 @@ import {
FormLabel,
Grid,
Stack,
TextField
TextField, Typography
} from "@mui/material";
import {useTranslations} from "next-intl";
import useRequest from "@/lib/app/hooks/useRequest";
@@ -21,7 +21,7 @@ import usePermissions from "@/lib/app/hooks/usePermissions";
const CreateContent = ({mutate, setOpenConfirmDialog}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {permissions_list} = usePermissions()
const {permissions_list, isLoading} = usePermissions()
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("AddDialog.name_error")),
name_fa: Yup.string().required(t("AddDialog.name_fa_error")),
@@ -93,29 +93,40 @@ const CreateContent = ({mutate, setOpenConfirmDialog}) => {
sx={{mt: 2}}
>
<FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
<Grid container spacing={2}>
{permissions_list ? (
permissions_list.map((permission) => (
<Grid key={permission.id} item xs={6}>
<FormControlLabel
control={
<Checkbox
checked={formik.values.permissions.includes(permission.id)}
onChange={(e) => {
if (e.target.checked) {
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
} else {
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
}
}}
{isLoading ?
<Stack direction={'row'} alignItems={'center'} spacing={2}
justifyContent={'center'}>
<CircularProgress size={20}/>
<Typography
variant={'caption'}>{t("AddDialog.loading_permissions_list")}</Typography>
</Stack>
: (
<Grid container spacing={2}>
<>
{permissions_list.map((permission, index) => (
<Grid key={permission.id} item xs={6} data-testid= "PermissionList-checkbox">
<FormControlLabel
control={
<Checkbox
data-testid= {`PermissionList-checkbox-${index}`}
checked={formik.values.permissions.includes(permission.id)}
onChange={(e) => {
if (e.target.checked) {
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
} else {
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
}
}}
/>
}
label={permission.name_fa}
/>
}
label={permission.name_fa}
/>
</Grid>
))
) : null}
</Grid>
</Grid>
))}
</>
</Grid>
)
}
</FormControl>
</FormLabel>
</Stack>

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

@@ -4,7 +4,7 @@ import usePermissions from "@/lib/app/hooks/usePermissions";
import useRequest from "@/lib/app/hooks/useRequest";
import {
Button,
Checkbox,
Checkbox, CircularProgress,
DialogActions,
DialogContent,
FormControl,
@@ -13,7 +13,7 @@ import {
FormLabel,
Grid,
Stack,
TextField
TextField, Typography
} from "@mui/material"
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
@@ -23,7 +23,7 @@ const UpdateContent = ({row, mutate, setOpenConfirmDialog}) => {
const t = useTranslations();
const requestServer = useRequest({auth: true})
const {update_notification} = useNotification()
const {permissions_list} = usePermissions()
const {permissions_list, isLoading} = usePermissions()
const validationSchema = Yup.object().shape({
name: Yup.string().required(t("UpdateDialog.name_error")),
@@ -93,29 +93,40 @@ const UpdateContent = ({row, mutate, setOpenConfirmDialog}) => {
sx={{mt: 2}}
>
<FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
<Grid container spacing={2}>
{permissions_list ? (
permissions_list.map((permission) => (
<Grid key={permission.id} item xs={6}>
<FormControlLabel
control={
<Checkbox
checked={formik.values.permissions.includes(permission.id)}
onChange={(e) => {
if (e.target.checked) {
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
} else {
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
}
}}
{isLoading ?
<Stack direction={'row'} alignItems={'center'} spacing={2}
justifyContent={'center'}>
<CircularProgress size={20}/>
<Typography
variant={'caption'}>{t("UpdateDialog.loading_permissions_list")}</Typography>
</Stack>
: (
<Grid container spacing={2}>
<>
{permissions_list.map((permission) => (
<Grid key={permission.id} item xs={6}>
<FormControlLabel
control={
<Checkbox
data-testid="PermissionList-checkbox"
checked={formik.values.permissions.includes(permission.id)}
onChange={(e) => {
if (e.target.checked) {
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id])
} else {
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id))
}
}}
/>
}
label={permission.name_fa}
/>
}
label={permission.name_fa}
/>
</Grid>
))
) : null}
</Grid>
</Grid>
))}
</>
</Grid>
)
}
</FormControl>
</FormLabel>
</Stack>

7
src/lib/app/hooks/usePermissions.jsx
View File

@@ -11,15 +11,16 @@ const usePermissions = () => {
})
};
const {data} = useSWR(GET_PERMISSIONS_LIST, fetcher, {
const {data, isLoading} = useSWR(GET_PERMISSIONS_LIST, fetcher, {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false
revalidateOnReconnect: false,
keepPreviousData : true
})
const permissions_list = data
//swr config
// render data
return {permissions_list}
return {permissions_list, isLoading}
}
export default usePermissions;