From 459799748549c1553f8411cec64e3be56b3e9431 Mon Sep 17 00:00:00 2001 From: Vijaykant Yadav Date: Thu, 24 Apr 2025 15:26:36 +0530 Subject: [PATCH] bug fixes --- .../LeftSidebar/PageMenu/PagePermission.jsx | 158 ++++++++++++------ .../LeftSidebar/PageMenu/style.scss | 7 + 2 files changed, 115 insertions(+), 50 deletions(-) diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PagePermission.jsx b/frontend/src/AppBuilder/LeftSidebar/PageMenu/PagePermission.jsx index 645bdcdc49..83c017f883 100644 --- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/PagePermission.jsx +++ b/frontend/src/AppBuilder/LeftSidebar/PageMenu/PagePermission.jsx @@ -7,6 +7,7 @@ import useStore from '@/AppBuilder/_stores/store'; import { appPermissionService } from '@/_services'; import { ConfirmDialog } from '@/_components'; import toast from 'react-hot-toast'; +import Spinner from '@/_ui/Spinner'; const PERMISSION_TYPES = { single: 'SINGLE', @@ -18,7 +19,6 @@ export default function PagePermission({ darkMode }) { const showPagePermissionModal = useStore((state) => state.showPagePermissionModal); const togglePagePermissionModal = useStore((state) => state.togglePagePermissionModal); const editingPage = useStore((state) => state.editingPage); - const setEditingPage = useStore((state) => state.setEditingPage); const appId = useStore((state) => state.app.appId); const selectedUserGroups = useStore((state) => state.selectedUserGroups); const setSelectedUserGroups = useStore((state) => state.setSelectedUserGroups); @@ -33,48 +33,96 @@ export default function PagePermission({ darkMode }) { const [showUsersSelect, toggleUsersSelect] = useState(false); const [showConfirmDelete, setShowConfirmDelete] = useState(false); const [isLoading, setIsLoading] = useState(false); + const [isPermissionsLoading, setPermissionsLoading] = useState(true); const [pageToDelete, setPageToDelete] = useState(null); + const [initialSelectedGroups, setInitialSelectedGroups] = useState([]); + const [initialSelectedUsers, setInitialSelectedUsers] = useState([]); + const [initalPagePermissionType, setInitialPagePermissionType] = useState('all'); useEffect(() => { - if (!editingPage?.id && !showPagePermissionModal) return; + if (!showPagePermissionModal) return; const fetchPagePermission = () => { - appPermissionService.getPagePermission(appId, editingPage?.id).then((data) => { + appPermissionService.getPagePermission(appId, editingPage?.id || pageToDelete).then((data) => { if (data) { if (data[0] && data[0]?.type === PERMISSION_TYPES.group) { + const groups = + data[0]?.groups?.map((user) => ({ + label: user?.permissionGroup?.name, + value: user?.permissionGroup?.id, + count: user?.permissionGroup?.count, + })) ?? []; setPagePermissionType(data[0]?.type?.toLowerCase()); + setInitialPagePermissionType(data[0]?.type?.toLowerCase()); setPagePermission(data); toggleUserGroupSelect(true); - data?.length && - setSelectedUserGroups( - data[0]?.groups?.map((user) => ({ - label: user?.permissionGroup?.name, - value: user?.permissionGroup?.id, - count: user?.permissionGroup?.count, - })) - ); + setPageToDelete(null); + setInitialSelectedGroups(groups); + data?.length && setSelectedUserGroups(groups); } else if (data[0] && data[0]?.type === PERMISSION_TYPES.single) { + const users = + data[0]?.users?.map(({ user }) => { + const firstName = user.firstName || ''; + const lastName = user.lastName || ''; + return { + value: user.id, + label: `${firstName} ${lastName}`.trim(), + email: user.email, + initials: `${firstName[0] || ''}${lastName[0] || ''}`.toUpperCase(), + }; + }) ?? []; setPagePermissionType(data[0]?.type?.toLowerCase()); + setInitialPagePermissionType(data[0]?.type?.toLowerCase()); setPagePermission(data); toggleUsersSelect(true); - data?.length && - setSelectedUsers( - data[0]?.users?.map(({ user }) => { - const firstName = user.firstName || ''; - const lastName = user.lastName || ''; - return { - value: user.id, - label: `${firstName} ${lastName}`.trim(), - email: user.email, - initials: `${firstName[0] || ''}${lastName[0] || ''}`.toUpperCase(), - }; - }) - ); + setPageToDelete(null); + setInitialSelectedUsers(users); + data?.length && setSelectedUsers(users); } } + setPermissionsLoading(false); }); }; fetchPagePermission(); - }, [editingPage]); + }, [showPagePermissionModal, pageToDelete]); + + const isSelectionUnchanged = useMemo(() => { + if (pagePermissionType === 'group') { + if (!selectedUserGroups.length) return true; + const current = selectedUserGroups + .map((g) => g.value) + .sort() + .join(','); + const initial = initialSelectedGroups + .map((g) => g.value) + .sort() + .join(','); + return current === initial; + } else if (pagePermissionType === 'single') { + if (!selectedUsers.length) return true; + const current = selectedUsers + .map((u) => u.value) + .sort() + .join(','); + const initial = initialSelectedUsers + .map((u) => u.value) + .sort() + .join(','); + return current === initial; + } else { + if (!pagePermission?.length) { + return true; + } else { + return initalPagePermissionType == pagePermissionType; + } + } + }, [ + pagePermissionType, + selectedUserGroups, + initialSelectedGroups, + selectedUsers, + initialSelectedUsers, + initalPagePermissionType, + ]); const permissionTypeOptions = useMemo( () => [ @@ -124,9 +172,10 @@ export default function PagePermission({ darkMode }) { toggleUsersSelect(false); setPagePermissionType('all'); setPagePermission(null); - setEditingPage(null); setSelectedUsers([]); setSelectedUserGroups([]); + setInitialSelectedGroups([]); + setInitialSelectedUsers([]); }; const createPagePermission = () => { @@ -184,15 +233,16 @@ export default function PagePermission({ darkMode }) { .then((data) => { toast.success('Permission successfully deleted!'); updatePageWithPermissions(pageToDelete, []); + setPageToDelete(null); }) .catch(() => { toast.error('Permission could not be deleted. Please try again!'); + setShowConfirmDelete(false); + togglePagePermissionModal(true); }) .finally(() => { setIsLoading(false); setShowConfirmDelete(false); - setPageToDelete(null); - handlePagePermissionModalClose(); }); }; @@ -223,7 +273,7 @@ export default function PagePermission({ darkMode }) { handleClose={handlePagePermissionModalClose} confirmBtnProps={{ title: pagePermission ? 'Update' : pagePermissionType === 'all' ? 'Default permission' : 'Create permission', - disabled: pagePermissionType == 'all' ? true : false, + disabled: isPermissionsLoading || isSelectionUnchanged, tooltipMessage: '', }} darkMode={darkMode} @@ -243,29 +293,37 @@ export default function PagePermission({ darkMode }) { } >
-
-
- + {isPermissionsLoading ? ( +
+
-
-
-

- Only selected users will be allowed to access this page. Read docs to know more. -

+ ) : ( + <> +
+
+ +
+
+
+

+ Only selected users will be allowed to access this page. Read docs to know more. +

+
+
-
-
- - + {showUserGroupSelect && } + {showUsersSelect && } + + )}
{showConfirmDelete && ( diff --git a/frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss b/frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss index c4e4f97d33..968218b106 100644 --- a/frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss +++ b/frontend/src/AppBuilder/LeftSidebar/PageMenu/style.scss @@ -354,6 +354,7 @@ display: flex; flex-direction: row; gap: 8px; + align-items: center; .name { font-weight: 400; @@ -367,4 +368,10 @@ } } } +} + +.page-permission { + .spinner-center { + min-height: 250px; + } } \ No newline at end of file