On Company Show, I can select an existing person and add it to the company (#1201)

* On Company Show, I can select an existing person and add it to the company Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> * Add requested changes Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Add excludePersonIds Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Matheus <matheus_benini@hotmail.com> * Add hotkey support * Fix popin placement and fix company show mobile * Fix popin placement and fix company show mobile --------- Co-authored-by: Matheus <matheus_benini@hotmail.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2023-08-17 03:47:14 +08:00
parent 5969f1cdd4
commit cd1bf14925
12 changed files with 144 additions and 24 deletions
--- a/front/src/modules/companies/components/AddPersonToCompany.tsx
+++ b/front/src/modules/companies/components/AddPersonToCompany.tsx
@ -0,0 +1,102 @@
+import { useState } from 'react';
+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 {
+  PeoplePicker,
+  PersonForSelect,
+} from '@/people/components/PeoplePicker';
+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 { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';
+
+const StyledContainer = styled.div`
+  position: relative;
+`;
+
+export function AddPersonToCompany({
+  companyId,
+  peopleIds,
+}: {
+  companyId: string;
+  peopleIds?: string[];
+}) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [updatePerson] = useUpdateOnePersonMutation();
+  const { refs, floatingStyles } = useFloating({
+    placement: 'right-start',
+    middleware: [flip(), offset({ mainAxis: -20, crossAxis: 25 })],
+  });
+
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  function handlePersonSelected(companyId: string) {
+    return async (newPerson: PersonForSelect | null) => {
+      if (newPerson) {
+        await updatePerson({
+          variables: {
+            where: {
+              id: newPerson.id,
+            },
+            data: {
+              company: { connect: { id: companyId } },
+            },
+          },
+          refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
+        });
+        handleClosePicker();
+      }
+    };
+  }
+
+  function handleClosePicker() {
+    if (isDropdownOpen) {
+      setIsDropdownOpen(false);
+      goBackToPreviousHotkeyScope();
+    }
+  }
+
+  function handleOpenPicker() {
+    if (!isDropdownOpen) {
+      setIsDropdownOpen(true);
+      setHotkeyScopeAndMemorizePreviousScope(
+        RelationPickerHotkeyScope.RelationPicker,
+      );
+    }
+  }
+
+  return (
+    <RecoilScope>
+      <StyledContainer>
+        <div ref={refs.setReference}>
+          <IconButton
+            icon={<IconPlus size={14} />}
+            onClick={handleOpenPicker}
+            size={ButtonSize.Small}
+            variant={'transparent'}
+          />
+        </div>
+
+        {isDropdownOpen && (
+          <div ref={refs.setFloating} style={floatingStyles}>
+            <PeoplePicker
+              personId={''}
+              onSubmit={handlePersonSelected(companyId)}
+              onCancel={handleClosePicker}
+              excludePersonIds={peopleIds}
+            />
+          </div>
+        )}
+      </StyledContainer>
+    </RecoilScope>
+  );
+}