diff --git a/rsconcept/frontend/src/components/Modal/ModalForm.tsx b/rsconcept/frontend/src/components/Modal/ModalForm.tsx index 72fdbbe7..6c919ab7 100644 --- a/rsconcept/frontend/src/components/Modal/ModalForm.tsx +++ b/rsconcept/frontend/src/components/Modal/ModalForm.tsx @@ -9,6 +9,7 @@ import { useDialogsStore } from '@/stores/dialogs'; import { PARAMETER } from '@/utils/constants'; import { prepareTooltip } from '@/utils/utils'; +import { Overlay } from '../Container'; import { Button, MiniButton, SubmitButton } from '../Control'; import { IconClose } from '../Icons'; import { type Styling } from '../props'; @@ -103,13 +104,15 @@ export function ModalForm({ ) : null} - } - className='float-right mt-2 mr-2' - onClick={handleCancel} - /> + + } + className='float-right mt-2 mr-2' + onClick={handleCancel} + /> + {header ?

{header}

: null} diff --git a/rsconcept/frontend/src/components/Modal/ModalView.tsx b/rsconcept/frontend/src/components/Modal/ModalView.tsx index 91020202..bcf029ee 100644 --- a/rsconcept/frontend/src/components/Modal/ModalView.tsx +++ b/rsconcept/frontend/src/components/Modal/ModalView.tsx @@ -9,6 +9,7 @@ import { useDialogsStore } from '@/stores/dialogs'; import { PARAMETER } from '@/utils/constants'; import { prepareTooltip } from '@/utils/utils'; +import { Overlay } from '../Container'; import { Button, MiniButton } from '../Control'; import { IconClose } from '../Icons'; @@ -48,13 +49,15 @@ export function ModalView({ ) : null} - } - className='float-right mt-2 mr-2' - onClick={hideDialog} - /> + + } + className='float-right mt-2 mr-2' + onClick={hideDialog} + /> + {header ?

{header}

: null} diff --git a/rsconcept/frontend/src/features/library/components/IconRole.tsx b/rsconcept/frontend/src/features/library/components/IconRole.tsx new file mode 100644 index 00000000..f76d0078 --- /dev/null +++ b/rsconcept/frontend/src/features/library/components/IconRole.tsx @@ -0,0 +1,21 @@ +import { UserRole } from '@/features/users'; + +import { IconAdmin, IconEditor, IconOwner, IconReader } from '@/components/Icons'; + +interface IconRoleProps { + role: UserRole; + size?: string; +} + +export function IconRole({ role, size = '1.25rem' }: IconRoleProps) { + switch (role) { + case UserRole.ADMIN: + return ; + case UserRole.OWNER: + return ; + case UserRole.EDITOR: + return ; + case UserRole.READER: + return ; + } +} diff --git a/rsconcept/frontend/src/features/library/components/MenuRole.tsx b/rsconcept/frontend/src/features/library/components/MenuRole.tsx new file mode 100644 index 00000000..fd057760 --- /dev/null +++ b/rsconcept/frontend/src/features/library/components/MenuRole.tsx @@ -0,0 +1,90 @@ +import { urls, useConceptNavigation } from '@/app'; +import { useAuthSuspense } from '@/features/auth'; +import { useRoleStore, UserRole } from '@/features/users'; +import { describeUserRole, labelUserRole } from '@/features/users/labels'; + +import { Button } from '@/components/Control'; +import { Dropdown, DropdownButton, useDropdown } from '@/components/Dropdown'; +import { IconAlert } from '@/components/Icons'; + +import { IconRole } from './IconRole'; + +interface MenuRoleProps { + isOwned: boolean; + isEditor: boolean; +} + +export function MenuRole({ isOwned, isEditor }: MenuRoleProps) { + const { user, isAnonymous } = useAuthSuspense(); + const router = useConceptNavigation(); + const accessMenu = useDropdown(); + + const role = useRoleStore(state => state.role); + const setRole = useRoleStore(state => state.setRole); + + function handleChangeMode(newMode: UserRole) { + accessMenu.hide(); + setRole(newMode); + } + + if (isAnonymous) { + return ( +