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": "حداقل باید یک دسترسی انتخاب شود", "permission_min_error": "حداقل باید یک دسترسی انتخاب شود",
"type_id": "نوع کاربر", "type_id": "نوع کاربر",
"navgan_id": "کد ناوگان", "navgan_id": "کد ناوگان",
"button-update": "ویرایش" "button-update": "ویرایش",
"loading_permissions_list": "درحال دریافت لیست دسترسی ها"
}, },
"UploadSystem": { "UploadSystem": {
"upload_file": "فایل خود را بارگذاری کنید", "upload_file": "فایل خود را بارگذاری کنید",
@@ -467,6 +468,7 @@
"type_id": "نوع کاربر", "type_id": "نوع کاربر",
"navgan_id": "کد ناوگان", "navgan_id": "کد ناوگان",
"button-cancel": "انصراف", "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 { import {
Button, Button,
Checkbox, Checkbox, CircularProgress,
DialogActions, DialogActions,
DialogContent, DialogContent,
FormControl, FormControl,
@@ -9,7 +9,7 @@ import {
FormLabel, FormLabel,
Grid, Grid,
Stack, Stack,
TextField TextField, Typography
} from "@mui/material"; } from "@mui/material";
import {useTranslations} from "next-intl"; import {useTranslations} from "next-intl";
import useRequest from "@/lib/app/hooks/useRequest"; import useRequest from "@/lib/app/hooks/useRequest";
@@ -21,7 +21,7 @@ import usePermissions from "@/lib/app/hooks/usePermissions";
const CreateContent = ({mutate, setOpenConfirmDialog}) => { const CreateContent = ({mutate, setOpenConfirmDialog}) => {
const t = useTranslations(); const t = useTranslations();
const requestServer = useRequest({auth: true}) const requestServer = useRequest({auth: true})
const {permissions_list} = usePermissions() const {permissions_list, isLoading} = usePermissions()
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
name: Yup.string().required(t("AddDialog.name_error")), name: Yup.string().required(t("AddDialog.name_error")),
name_fa: Yup.string().required(t("AddDialog.name_fa_error")), name_fa: Yup.string().required(t("AddDialog.name_fa_error")),
@@ -93,29 +93,40 @@ const CreateContent = ({mutate, setOpenConfirmDialog}) => {
sx={{mt: 2}} sx={{mt: 2}}
> >
<FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText> <FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
<Grid container spacing={2}> {isLoading ?
{permissions_list ? ( <Stack direction={'row'} alignItems={'center'} spacing={2}
permissions_list.map((permission) => ( justifyContent={'center'}>
<Grid key={permission.id} item xs={6}> <CircularProgress size={20}/>
<FormControlLabel <Typography
control={ variant={'caption'}>{t("AddDialog.loading_permissions_list")}</Typography>
<Checkbox </Stack>
checked={formik.values.permissions.includes(permission.id)} : (
onChange={(e) => { <Grid container spacing={2}>
if (e.target.checked) { <>
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id]) {permissions_list.map((permission, index) => (
} else { <Grid key={permission.id} item xs={6} data-testid= "PermissionList-checkbox">
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id)) <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}
/> />
} </Grid>
label={permission.name_fa} ))}
/> </>
</Grid> </Grid>
)) )
) : null} }
</Grid>
</FormControl> </FormControl>
</FormLabel> </FormLabel>
</Stack> </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 useRequest from "@/lib/app/hooks/useRequest";
import { import {
Button, Button,
Checkbox, Checkbox, CircularProgress,
DialogActions, DialogActions,
DialogContent, DialogContent,
FormControl, FormControl,
@@ -13,7 +13,7 @@ import {
FormLabel, FormLabel,
Grid, Grid,
Stack, Stack,
TextField TextField, Typography
} from "@mui/material" } from "@mui/material"
import {useFormik} from "formik"; import {useFormik} from "formik";
import {useTranslations} from "next-intl"; import {useTranslations} from "next-intl";
@@ -23,7 +23,7 @@ const UpdateContent = ({row, mutate, setOpenConfirmDialog}) => {
const t = useTranslations(); const t = useTranslations();
const requestServer = useRequest({auth: true}) const requestServer = useRequest({auth: true})
const {update_notification} = useNotification() const {update_notification} = useNotification()
const {permissions_list} = usePermissions() const {permissions_list, isLoading} = usePermissions()
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
name: Yup.string().required(t("UpdateDialog.name_error")), name: Yup.string().required(t("UpdateDialog.name_error")),
@@ -93,29 +93,40 @@ const UpdateContent = ({row, mutate, setOpenConfirmDialog}) => {
sx={{mt: 2}} sx={{mt: 2}}
> >
<FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText> <FormHelperText>{formik.touched.permissions && formik.errors.permissions}</FormHelperText>
<Grid container spacing={2}> {isLoading ?
{permissions_list ? ( <Stack direction={'row'} alignItems={'center'} spacing={2}
permissions_list.map((permission) => ( justifyContent={'center'}>
<Grid key={permission.id} item xs={6}> <CircularProgress size={20}/>
<FormControlLabel <Typography
control={ variant={'caption'}>{t("UpdateDialog.loading_permissions_list")}</Typography>
<Checkbox </Stack>
checked={formik.values.permissions.includes(permission.id)} : (
onChange={(e) => { <Grid container spacing={2}>
if (e.target.checked) { <>
formik.setFieldValue("permissions", [...formik.values.permissions, permission.id]) {permissions_list.map((permission) => (
} else { <Grid key={permission.id} item xs={6}>
formik.setFieldValue("permissions", formik.values.permissions.filter((id) => id !== permission.id)) <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}
/> />
} </Grid>
label={permission.name_fa} ))}
/> </>
</Grid> </Grid>
)) )
) : null} }
</Grid>
</FormControl> </FormControl>
</FormLabel> </FormLabel>
</Stack> </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, revalidateIfStale: false,
revalidateOnFocus: false, revalidateOnFocus: false,
revalidateOnReconnect: false revalidateOnReconnect: false,
keepPreviousData : true
}) })
const permissions_list = data const permissions_list = data
//swr config //swr config
// render data // render data
return {permissions_list} return {permissions_list, isLoading}
} }
export default usePermissions; export default usePermissions;