From bc8db8d248da4c93c21f40b6b7a4e2fab1d25996 Mon Sep 17 00:00:00 2001 From: Davor Date: Fri, 27 May 2022 21:28:34 +0200 Subject: [PATCH 1/4] Modify FE for No access role - fix user settings modal - CurrentUserModal - TODO: refactor UserModal and CurrentUserModal - it's same thing --- .../CurrentUserModal/CurrentUserModal.tsx | 14 +++++++--- .../components/CurrentUserModal/consts.ts | 12 ++++---- .../users/components/UserModal/UserModal.tsx | 2 ++ .../users/components/UserModal/consts.ts | 8 +++--- src/services/users/transformations.ts | 28 +++++++++++++++++-- src/services/users/types.ts | 1 + 6 files changed, 48 insertions(+), 17 deletions(-) diff --git a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx b/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx index 29a3c16..aaa29c2 100644 --- a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx +++ b/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx @@ -83,6 +83,7 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => { name={`app_roles.${index}.role`} label="Role" options={[ + { value: UserRole.NoAccess, name: 'No access' }, { value: UserRole.Admin, name: 'Admin' }, { value: UserRole.User, name: 'User' }, ]} @@ -121,9 +122,12 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
    - {fields - .filter((field) => field.name !== 'dashboard') - .map((item, index) => ( + {fields.map((item, index) => { + if (item.name === 'dashboard') { + return null; + } + + return (
  • @@ -142,6 +146,7 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => { control={control} name={`app_roles.${index}.role`} options={[ + { value: UserRole.NoAccess, name: 'No access' }, { value: UserRole.Admin, name: 'Admin' }, { value: UserRole.User, name: 'User' }, ]} @@ -149,7 +154,8 @@ export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => {
    • - ))} + ); + })}
diff --git a/src/components/Header/components/CurrentUserModal/consts.ts b/src/components/Header/components/CurrentUserModal/consts.ts index abda708..1b02fa3 100644 --- a/src/components/Header/components/CurrentUserModal/consts.ts +++ b/src/components/Header/components/CurrentUserModal/consts.ts @@ -12,7 +12,7 @@ export const appAccessList = [ label: 'Wordpress', }, { - name: 'next-cloud', + name: 'nextcloud', image: '/assets/nextcloud.svg', label: 'NextCloud', }, @@ -30,19 +30,19 @@ const initialAppRoles = [ }, { name: 'wekan', - role: UserRole.User, + role: UserRole.NoAccess, }, { name: 'wordpress', - role: UserRole.User, + role: UserRole.NoAccess, }, { - name: 'next-cloud', - role: UserRole.User, + name: 'nextcloud', + role: UserRole.NoAccess, }, { name: 'zulip', - role: UserRole.User, + role: UserRole.NoAccess, }, ]; diff --git a/src/modules/users/components/UserModal/UserModal.tsx b/src/modules/users/components/UserModal/UserModal.tsx index b31d218..a810f30 100644 --- a/src/modules/users/components/UserModal/UserModal.tsx +++ b/src/modules/users/components/UserModal/UserModal.tsx @@ -133,6 +133,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) name={`app_roles.${index}.role`} label="Role" options={[ + { value: UserRole.NoAccess, name: 'No access' }, { value: UserRole.User, name: 'User' }, { value: UserRole.Admin, name: 'Admin' }, ]} @@ -194,6 +195,7 @@ export const UserModal = ({ open, onClose, userId, setUserId }: UserModalProps) control={control} name={`app_roles.${index}.role`} options={[ + { value: UserRole.NoAccess, name: 'No Access' }, { value: UserRole.User, name: 'User' }, { value: UserRole.Admin, name: 'Admin' }, ]} diff --git a/src/modules/users/components/UserModal/consts.ts b/src/modules/users/components/UserModal/consts.ts index a47d6de..1b02fa3 100644 --- a/src/modules/users/components/UserModal/consts.ts +++ b/src/modules/users/components/UserModal/consts.ts @@ -30,19 +30,19 @@ const initialAppRoles = [ }, { name: 'wekan', - role: UserRole.User, + role: UserRole.NoAccess, }, { name: 'wordpress', - role: UserRole.User, + role: UserRole.NoAccess, }, { name: 'nextcloud', - role: UserRole.User, + role: UserRole.NoAccess, }, { name: 'zulip', - role: UserRole.User, + role: UserRole.NoAccess, }, ]; diff --git a/src/services/users/transformations.ts b/src/services/users/transformations.ts index 5f1c2f7..e296df9 100644 --- a/src/services/users/transformations.ts +++ b/src/services/users/transformations.ts @@ -1,16 +1,38 @@ import { AppRoles, User, UserRole } from './types'; +const transformRoleById = (roleId: any): UserRole => { + switch (roleId) { + case 1: + return UserRole.Admin; + case 2: + return UserRole.User; + default: + return UserRole.NoAccess; + } +}; + +const transformRoleIdByRole = (role: UserRole | null): number | null => { + switch (role) { + case UserRole.Admin: + return 1; + case UserRole.User: + return 2; + default: + return null; + } +}; + export const transformAppRoles = (data: any): AppRoles => { - const resolvedAdminRole = data.role_id === 1 ? UserRole.Admin : UserRole.User; + const userRole = transformRoleById(data.role_id); return { name: data.name ?? '', - role: resolvedAdminRole ?? UserRole.User, + role: userRole, }; }; export const transformRequestAppRoles = (data: AppRoles): any => { - const resolvedRequestRole = data.role === UserRole.Admin ? 1 : null; + const resolvedRequestRole = transformRoleIdByRole(data.role) ?? null; return { name: data.name ?? '', diff --git a/src/services/users/types.ts b/src/services/users/types.ts index 9245247..f97f435 100644 --- a/src/services/users/types.ts +++ b/src/services/users/types.ts @@ -13,6 +13,7 @@ export interface FormUser extends User { } export enum UserRole { + NoAccess = 'no_access', Admin = 'admin', User = 'user', } From a033188b035c8c2f0fb2bfe498d622b7e4834b92 Mon Sep 17 00:00:00 2001 From: Davor Date: Mon, 30 May 2022 13:12:53 +0200 Subject: [PATCH 2/4] refactor UserModal and CurrentUserModal --- src/components/Header/Header.tsx | 20 ++- .../CurrentUserModal/CurrentUserModal.tsx | 168 ------------------ .../components/CurrentUserModal/index.ts | 1 - .../components/CurrentUserModal/types.ts | 7 - src/components/Header/components/index.ts | 1 - .../components/UserModal/UserModal.tsx | 0 .../CurrentUserModal => UserModal}/consts.ts | 0 .../users => }/components/UserModal/index.ts | 0 .../users => }/components/UserModal/types.ts | 0 src/components/index.ts | 1 + src/modules/users/Users.tsx | 3 +- .../users/components/UserModal/consts.ts | 55 ------ src/modules/users/components/index.ts | 1 - 13 files changed, 17 insertions(+), 240 deletions(-) delete mode 100644 src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx delete mode 100644 src/components/Header/components/CurrentUserModal/index.ts delete mode 100644 src/components/Header/components/CurrentUserModal/types.ts delete mode 100644 src/components/Header/components/index.ts rename src/{modules/users => }/components/UserModal/UserModal.tsx (100%) rename src/components/{Header/components/CurrentUserModal => UserModal}/consts.ts (100%) rename src/{modules/users => }/components/UserModal/index.ts (100%) rename src/{modules/users => }/components/UserModal/types.ts (100%) delete mode 100644 src/modules/users/components/UserModal/consts.ts delete mode 100644 src/modules/users/components/index.ts diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index a58e2d8..200d577 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -5,7 +5,9 @@ import { useAuth } from 'src/services/auth'; import Gravatar from 'react-gravatar'; import { Link, useLocation } from 'react-router-dom'; import clsx from 'clsx'; -import { CurrentUserModal } from './components/CurrentUserModal'; +import _ from 'lodash'; + +import { UserModal } from '../UserModal'; const navigation = [ { name: 'Dashboard', to: '/dashboard', requiresAdmin: false }, @@ -29,14 +31,20 @@ interface HeaderProps {} const Header: React.FC = () => { const [currentUserModal, setCurrentUserModal] = useState(false); + const [currentUserId, setCurrentUserId] = useState(null); const { logOut, currentUser, isAdmin } = useAuth(); const { pathname } = useLocation(); - const currentUserModalOpen = () => { + const currentUserModalOpen = (id: any) => { + setCurrentUserId(id); setCurrentUserModal(true); }; - const currentUserModalClose = () => setCurrentUserModal(false); + + const currentUserModalClose = () => { + setCurrentUserModal(false); + setCurrentUserId(null); + }; const navigationItems = filterNavigationByDashboardRole(isAdmin); @@ -106,7 +114,7 @@ const Header: React.FC = () => { {({ active }) => ( currentUserModalOpen()} + onClick={() => currentUserModalOpen(currentUser?.id)} className={classNames( active ? 'bg-gray-100 cursor-pointer' : '', 'block px-4 py-2 text-sm text-gray-700 cursor-pointer', @@ -119,7 +127,7 @@ const Header: React.FC = () => { {({ active }) => ( logOut()} + onClick={logOut} className={classNames( active ? 'bg-gray-100 cursor-pointer' : '', 'block px-4 py-2 text-sm text-gray-700 cursor-pointer', @@ -160,7 +168,7 @@ const Header: React.FC = () => { )} - + ); }; diff --git a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx b/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx deleted file mode 100644 index aaa29c2..0000000 --- a/src/components/Header/components/CurrentUserModal/CurrentUserModal.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import _ from 'lodash'; -import React, { useEffect } from 'react'; -import { useFieldArray, useForm } from 'react-hook-form'; -import { Modal } from 'src/components'; -import { Input, Select } from 'src/components/Form'; -import { useAuth } from 'src/services/auth'; -import { User, UserRole, useUsers } from 'src/services/users'; -import { appAccessList, initialUserForm } from './consts'; -import { UserModalProps } from './types'; - -export const CurrentUserModal = ({ open, onClose, user }: UserModalProps) => { - const { editUserById, userModalLoading } = useUsers(); - const { isAdmin } = useAuth(); - - const { control, reset, handleSubmit } = useForm({ - defaultValues: initialUserForm, - }); - - const { fields } = useFieldArray({ - control, - name: 'app_roles', - }); - - useEffect(() => { - if (user && !_.isEmpty(user)) { - reset(user); - } - - return () => { - reset(initialUserForm); - }; - }, [user, reset]); - - const handleSave = async () => { - try { - if (user) { - await handleSubmit((data) => editUserById(data))(); - } - - onClose(); - } catch (e: any) { - // Continue - } - }; - - const handleKeyPress = (e: any) => { - if (e.key === 'Enter' || e.key === 'NumpadEnter') { - handleSave(); - } - }; - - const handleClose = () => { - onClose(); - }; - - return ( - -
-
-
-
-

Profile

-
- -
-
- -
- -
- -
- - {isAdmin && ( - <> -
- {fields - .filter((field) => field.name === 'dashboard') - .map((item, index) => ( - */} - -
- -
-
- - )} -
-
- - {isAdmin && ( -
-
-

App Access

-
- -
-
-
    - {fields.map((item, index) => { - if (item.name === 'dashboard') { - return null; - } - - return ( -
  • -
    -
    - {item.name -

    - {_.find(appAccessList, ['name', item.name!])?.label} -

    -
    -
    -