rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: add permission selection dropdown when inviting contacts

Browse Source
This commit is contained in:
Aman Harwara
2023-09-13 19:26:15 +05:30
parent f0566c7d07
commit 7eb0098fff
7 changed files with 87 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
View File

@@ -1,15 +1,7 @@
import Icon from '@/Components/Icon/Icon'
import { DropdownItem } from './DropdownItem'
import { classNames } from '@standardnotes/snjs'
import {
Select,
SelectItem,
SelectLabel,
SelectPopover,
SelectStoreProps,
useSelectStore,
VisuallyHidden,
} from '@ariakit/react'
import { Select, SelectItem, SelectLabel, SelectPopover, SelectStoreProps, useSelectStore } from '@ariakit/react'
import { KeyboardKey } from '@standardnotes/ui-services'
type DropdownProps = {
@@ -25,6 +17,7 @@ type DropdownProps = {
}
fullWidth?: boolean
popoverPlacement?: SelectStoreProps['placement']
showLabel?: boolean
}
const Dropdown = ({
@@ -36,6 +29,7 @@ const Dropdown = ({
fullWidth,
classNameOverride = {},
popoverPlacement,
showLabel,
}: DropdownProps) => {
const select = useSelectStore({
value,
@@ -57,12 +51,12 @@ const Dropdown = ({
}
}}
>
<VisuallyHidden>
<SelectLabel store={select}>{label}</SelectLabel>
</VisuallyHidden>
<SelectLabel className={!showLabel ? 'sr-only' : ''} store={select}>
{label}
</SelectLabel>
<Select
className={classNames(
'flex w-full min-w-55 items-center justify-between rounded border border-passive-3 bg-default md:translucent-ui:bg-transparent px-3.5 py-1.5 text-sm text-foreground',
'flex w-full min-w-55 items-center justify-between rounded border border-passive-3 bg-default px-3.5 py-1.5 text-sm text-foreground md:translucent-ui:bg-transparent',
disabled && 'opacity-50',
classNameOverride.button,
!fullWidth && 'md:w-fit',
@@ -83,7 +77,7 @@ const Dropdown = ({
<SelectPopover
store={select}
className={classNames(
'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] [backdrop-filter:var(--popover-backdrop-filter)] overflow-y-auto rounded border border-passive-3 bg-default py-1',
'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-passive-3 bg-default py-1 [backdrop-filter:var(--popover-backdrop-filter)]',
classNameOverride.popover,
)}
portal={false}

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx
View File

@@ -33,7 +33,7 @@ const ContactItem = ({ contact }: Props) => {
</ModalOverlay>
<div className="flex items-start gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
<div className="grid grid-cols-[1fr,auto] grid-rows-2 place-items-center overflow-hidden [column-gap:0.875rem] [row-gap:0.25rem]">
<div className="grid grid-cols-[1fr,auto] grid-rows-2 place-items-center gap-x-3.5 gap-y-1 overflow-hidden">
<Icon type="user" size="custom" className="h-5 w-5 flex-shrink-0" />
<span
className={classNames(

93
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Invites/ContactInviteModal.tsx
View File

@@ -8,18 +8,25 @@ import {
classNames,
} from '@standardnotes/snjs'
import Spinner from '@/Components/Spinner/Spinner'
import Dropdown from '@/Components/Dropdown/Dropdown'
type Props = {
vault: SharedVaultListingInterface
onCloseDialog: () => void
}
type SelectedContact = {
uuid: string
permission: keyof typeof SharedVaultUserPermission.PERMISSIONS
}
const ContactInviteModal: FunctionComponent<Props> = ({ vault, onCloseDialog }) => {
const application = useApplication()
const [selectedContacts, setSelectedContacts] = useState<TrustedContactInterface[]>([])
const [selectedContacts, setSelectedContacts] = useState<SelectedContact[]>([])
const [isLoadingContacts, setIsLoadingContacts] = useState(false)
const [contacts, setContacts] = useState<TrustedContactInterface[]>([])
const [isInvitingContacts, setIsInvitingContacts] = useState(false)
useEffect(() => {
const loadContacts = async () => {
@@ -36,37 +43,48 @@ const ContactInviteModal: FunctionComponent<Props> = ({ vault, onCloseDialog })
}, [onCloseDialog])
const inviteSelectedContacts = useCallback(async () => {
for (const contact of selectedContacts) {
setIsInvitingContacts(true)
for (const selectedContact of selectedContacts) {
const contact = contacts.find((contact) => contact.uuid === selectedContact.uuid)
if (!contact) {
continue
}
await application.vaultInvites.inviteContactToSharedVault(
vault,
contact,
SharedVaultUserPermission.PERMISSIONS.Write,
SharedVaultUserPermission.PERMISSIONS[selectedContact.permission],
)
}
setIsInvitingContacts(false)
handleDialogClose()
}, [application.vaultInvites, vault, handleDialogClose, selectedContacts])
}, [handleDialogClose, selectedContacts, contacts, application.vaultInvites, vault])
const toggleContact = useCallback(
(contact: TrustedContactInterface) => {
if (selectedContacts.includes(contact)) {
const index = selectedContacts.indexOf(contact)
const updatedContacts = [...selectedContacts]
updatedContacts.splice(index, 1)
setSelectedContacts(updatedContacts)
} else {
setSelectedContacts([...selectedContacts, contact])
const contactWithPermission: SelectedContact = {
uuid: contact.uuid,
permission: 'Read',
}
setSelectedContacts((selectedContacts) => {
if (selectedContacts.find((c) => c.uuid === contact.uuid)) {
return selectedContacts.filter((selectedContact) => selectedContact.uuid !== contact.uuid)
} else {
return [...selectedContacts, contactWithPermission]
}
})
},
[selectedContacts, setSelectedContacts],
[setSelectedContacts],
)
const modalActions = useMemo(
(): ModalAction[] => [
{
label: 'Invite Selected Contacts',
label: isInvitingContacts ? <Spinner className="h-5 w-5 border-info-contrast" /> : 'Invite Selected Contacts',
onClick: inviteSelectedContacts,
type: 'primary',
mobileSlot: 'right',
disabled: isInvitingContacts,
hidden: contacts.length === 0,
},
{
label: 'Cancel',
@@ -75,7 +93,7 @@ const ContactInviteModal: FunctionComponent<Props> = ({ vault, onCloseDialog })
mobileSlot: 'left',
},
],
[handleDialogClose, inviteSelectedContacts],
[contacts.length, handleDialogClose, inviteSelectedContacts, isInvitingContacts],
)
return (
@@ -85,17 +103,54 @@ const ContactInviteModal: FunctionComponent<Props> = ({ vault, onCloseDialog })
<Spinner className="h-5 w-5" />
) : contacts.length > 0 ? (
contacts.map((contact) => {
const selectedContact = selectedContacts.find((c) => c.uuid === contact.uuid)
const isSelected = !!selectedContact
return (
<label className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5" key={contact.uuid}>
<div
className={classNames('grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5', isSelected && 'py-0.5')}
key={contact.uuid}
>
<input
id={contact.uuid}
className="h-4 w-4 self-center accent-info"
type="checkbox"
checked={selectedContacts.includes(contact)}
checked={isSelected}
onChange={() => toggleContact(contact)}
/>
<div className="col-start-2 text-sm font-semibold">{contact.name}</div>
<div className="col-start-2">{contact.contactUuid}</div>
</label>
<label htmlFor={contact.uuid} className="col-start-2">
<div className="text-sm font-semibold">{contact.name}</div>
<div className="opacity-90">{contact.contactUuid}</div>
</label>
{isSelected && (
<Dropdown
showLabel
label={'Permission:'}
classNameOverride={{
wrapper: 'col-start-2',
}}
items={Object.keys(SharedVaultUserPermission.PERMISSIONS).map((key) => ({
label: key === 'Write' ? 'Read/Write' : key,
value: key,
}))}
value={selectedContact.permission}
onChange={(value) => {
setSelectedContacts((selectedContacts) =>
selectedContacts.map((c) => {
if (c.uuid === contact.uuid) {
return {
...c,
permission: value as keyof typeof SharedVaultUserPermission.PERMISSIONS,
}
} else {
return c
}
}),
)
}}
/>
)}
</div>
)
})
) : (

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/KeyStoragePreference.tsx
View File

@@ -44,7 +44,7 @@ export const KeyStoragePreference = ({
return (
<label
key={option.value}
className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.25rem] md:text-sm"
className="grid grid-cols-[auto,1fr] gap-x-[0.65rem] gap-y-1 text-base font-medium md:text-sm"
>
<StyledRadioInput
className="col-start-1 col-end-2 place-self-center"

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/PasswordTypePreference.tsx
View File

@@ -48,7 +48,7 @@ export const PasswordTypePreference = ({
return (
<label
key={option.value}
className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.25rem] md:text-sm"
className="grid grid-cols-[auto,1fr] gap-x-[0.65rem] gap-y-1 text-base font-medium md:text-sm"
>
<StyledRadioInput
className="col-start-1 col-end-2 place-self-center"

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
View File

@@ -32,7 +32,7 @@ export const VaultModalInvites = ({
return (
<div
key={invite.uuid}
className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.5rem] md:text-sm"
className="grid grid-cols-[auto,1fr] gap-x-[0.65rem] gap-y-2 text-base font-medium md:text-sm"
>
<Icon type="user" className="col-start-1 col-end-2 place-self-center" />
<div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">

2
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalMembers.tsx
View File

@@ -37,7 +37,7 @@ export const VaultModalMembers = ({
return (
<div
key={contact?.uuid || member.user_uuid}
className="grid grid-cols-[auto,1fr] text-base font-medium [column-gap:0.65rem] [row-gap:0.5rem] md:text-sm"
className="grid grid-cols-[auto,1fr] gap-x-[0.65rem] gap-y-2 text-base font-medium md:text-sm"
>
<Icon type="user" className="col-start-1 col-end-2 place-self-center" />
<div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">