diff --git a/front/src/modules/companies/components/AddPersonToCompany.tsx b/front/src/modules/companies/components/AddPersonToCompany.tsx index faac522720..ea7a7a1a80 100644 --- a/front/src/modules/companies/components/AddPersonToCompany.tsx +++ b/front/src/modules/companies/components/AddPersonToCompany.tsx @@ -3,6 +3,7 @@ import { getOperationName } from '@apollo/client/utilities'; import styled from '@emotion/styled'; import { flip, offset, useFloating } from '@floating-ui/react'; import { IconPlus } from '@tabler/icons-react'; +import { v4 } from 'uuid'; import { PeoplePicker, @@ -12,14 +13,32 @@ import { GET_PEOPLE } from '@/people/graphql/queries/getPeople'; import { ButtonSize } from '@/ui/button/components/Button'; import { IconButton } from '@/ui/button/components/IconButton'; import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope'; +import { TextInput } from '@/ui/input/text/components/TextInput'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { useUpdateOnePersonMutation } from '~/generated/graphql'; +import { + useInsertOnePersonMutation, + useUpdateOnePersonMutation, +} from '~/generated/graphql'; const StyledContainer = styled.div` position: relative; `; +const StyledInputContainer = styled.div` + background-color: ${({ theme }) => theme.background.tertiary}; + box-shadow: ${({ theme }) => theme.boxShadow.strong}; + display: flex; + gap: ${({ theme }) => theme.spacing(0.5)}; + width: ${({ theme }) => theme.spacing(62.5)}; + & * input, + * div { + background-color: ${({ theme }) => theme.background.primary}; + } +`; + +const defaultUsername = { firstName: '', lastName: '' }; + export function AddPersonToCompany({ companyId, peopleIds, @@ -28,7 +47,10 @@ export function AddPersonToCompany({ peopleIds?: string[]; }) { const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isCreationDropdownOpen, setIsCreationDropdownOpen] = useState(false); + const [username, setUsername] = useState(defaultUsername); const [updatePerson] = useUpdateOnePersonMutation(); + const [insertOnePerson] = useInsertOnePersonMutation(); const { refs, floatingStyles } = useFloating({ placement: 'right-start', middleware: [flip(), offset({ mainAxis: -20, crossAxis: 25 })], @@ -74,6 +96,29 @@ export function AddPersonToCompany({ } } + function handleUsernameChange(type: 'firstName' | 'lastName') { + return (name: string): void => + setUsername((prevUserName) => ({ ...prevUserName, [type]: name })); + } + + async function handleInputKeyDown(e: React.KeyboardEvent) { + if (e.key !== 'Enter' || (!username.firstName && !username.lastName)) + return; + const newPersonId = v4(); + await insertOnePerson({ + variables: { + data: { + company: { connect: { id: companyId } }, + id: newPersonId, + ...username, + }, + }, + refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], + }); + setIsCreationDropdownOpen(false); + setUsername(defaultUsername); + } + return ( @@ -88,12 +133,30 @@ export function AddPersonToCompany({ {isDropdownOpen && (
- + {isCreationDropdownOpen ? ( + + + + + ) : ( + setIsCreationDropdownOpen(true)} + excludePersonIds={peopleIds} + /> + )}
)}
diff --git a/front/src/modules/people/components/PeoplePicker.tsx b/front/src/modules/people/components/PeoplePicker.tsx index 359e45caea..e2b2cfd465 100644 --- a/front/src/modules/people/components/PeoplePicker.tsx +++ b/front/src/modules/people/components/PeoplePicker.tsx @@ -10,6 +10,7 @@ export type OwnProps = { personId: string | null; onSubmit: (newPersonId: PersonForSelect | null) => void; onCancel?: () => void; + onCreate?: () => void; excludePersonIds?: string[]; }; @@ -21,6 +22,7 @@ export function PeoplePicker({ personId, onSubmit, onCancel, + onCreate, excludePersonIds, }: OwnProps) { const [searchFilter] = useRecoilScopedState( @@ -53,6 +55,7 @@ export function PeoplePicker({