From 76a0625ee93137839774a06317cbdea10d9697cd Mon Sep 17 00:00:00 2001 From: Amin Ghasempoor Date: Tue, 10 Oct 2023 17:04:06 +0330 Subject: [PATCH] CFE-4 permission list loading --- public/locales/fa/app.json | 6 +- .../Form/CreateForm/CreateContent.jsx | 58 ++++++++++-------- .../role-management/Form/CreateForm/index.jsx | 2 +- .../Form/UpdateForm/UpdateContent.jsx | 60 +++++++++++-------- src/lib/app/hooks/usePermissions.jsx | 4 +- 5 files changed, 74 insertions(+), 56 deletions(-) diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 38083ec..d52b977 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -34,7 +34,7 @@ "dashboard": "داشبورد", "change-password": "تغییر رمز عبور", "edit-profile": "ویرایش پروفایل", - "role-management": "مدیریت دسترسی", + "role-management": "مدیریت نقش ها", "admin": "مدیریت" }, "secondary": { @@ -74,7 +74,7 @@ "dashboard_page": "داشبورد", "change_password": "تغییر رمز عبور", "edit_profile": "ویرایش پروفایل", - "role_management_page": "مدیریت دسترسی" + "role_management_page": "مدیریت نقش ها" }, "MuiDatePicker": { "date_picker_birthday": "تاریخ" @@ -157,6 +157,7 @@ "type_id": "نوع کاربر", "navgan_id": "کد ناوگان", "button-cancel": "انصراف", + "loading_permissions_list": "درحال دریافت لیست دسترسی ها", "button-add": "ثبت" }, "UpdateDialog": { @@ -179,6 +180,7 @@ "permission_min_error": "حداقل باید یک دسترسی انتخاب شود", "type_id": "نوع کاربر", "navgan_id": "کد ناوگان", + "loading_permissions_list": "درحال دریافت لیست دسترسی ها", "button-update": "ثبت" }, "DeleteDialog": { diff --git a/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx b/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx index 12523c2..db28f49 100644 --- a/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx +++ b/src/components/dashboard/role-management/Form/CreateForm/CreateContent.jsx @@ -1,6 +1,6 @@ import { Button, - Checkbox, + Checkbox, CircularProgress, DialogActions, DialogContent, DialogTitle, 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, fetchUrl, setOpenConfirmDialog}) => { const t = useTranslations(); const requestServer = useRequest({auth: true}) - const {permissions_list} = usePermissions() + const {permissions_list, isLoading} = usePermissions() const validationSchema = Yup.object().shape({ name_en: Yup.string().required(t("AddDialog.name_en_error")), name_fa: Yup.string().required(t("AddDialog.name_fa_error")), @@ -95,30 +95,38 @@ const CreateContent = ({mutate, fetchUrl, setOpenConfirmDialog}) => { fullWidth > {formik.touched.permissions && formik.errors.permissions} - - {permissions_list ? ( - permissions_list.map((permission) => ( - - { - 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 ? + + + {t("AddDialog.loading_permissions_list")} + + :( + + <> + {permissions_list.map((permission) => ( + + { + 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} + /> + + ))} + - )) - ) : null} - + ) + } diff --git a/src/components/dashboard/role-management/Form/CreateForm/index.jsx b/src/components/dashboard/role-management/Form/CreateForm/index.jsx index 8cbe859..2265035 100644 --- a/src/components/dashboard/role-management/Form/CreateForm/index.jsx +++ b/src/components/dashboard/role-management/Form/CreateForm/index.jsx @@ -24,7 +24,7 @@ const CreateForm = ({mutate, fetchUrl}) => { {t("AddDialog.add")} - diff --git a/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx b/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx index a17c48d..0815356 100644 --- a/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx +++ b/src/components/dashboard/role-management/Form/UpdateForm/UpdateContent.jsx @@ -1,6 +1,7 @@ import { + Box, Button, - Checkbox, DialogActions, + Checkbox, CircularProgress, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, @@ -8,7 +9,7 @@ import { FormLabel, Grid, Stack, - TextField + TextField, Typography } from "@mui/material"; import {useFormik} from "formik"; import {UPDATE_ROLE_MANAGEMENT} from "@/core/data/apiRoutes"; @@ -22,7 +23,7 @@ const UpdateContent = ({mutate, row, fetchUrl, 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_en: Yup.string().required(t("UpdateDialog.name_en_error")), @@ -94,30 +95,37 @@ const UpdateContent = ({mutate, row, fetchUrl, setOpenConfirmDialog}) => { fullWidth > {formik.touched.permissions && formik.errors.permissions} - - {permissions_list ? ( - permissions_list.map((permission) => ( - - { - 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 ? + + + {t("UpdateDialog.loading_permissions_list")} + + :( + + <> + {permissions_list.map((permission) => ( + + { + 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} - /> - - )) - ) : null} - + + ))} + + + )} diff --git a/src/lib/app/hooks/usePermissions.jsx b/src/lib/app/hooks/usePermissions.jsx index 0e6aa07..8d45fd2 100644 --- a/src/lib/app/hooks/usePermissions.jsx +++ b/src/lib/app/hooks/usePermissions.jsx @@ -11,7 +11,7 @@ const usePermissions = () => { }) }; - const {data} = useSWR(GET_PERMISSIONS_LIST, fetcher, { + const {data, isLoading} = useSWR(GET_PERMISSIONS_LIST, fetcher, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false @@ -20,6 +20,6 @@ const usePermissions = () => { //swr config // render data - return {permissions_list} + return {permissions_list, isLoading} } export default usePermissions; \ No newline at end of file