Filter the opportunities "Point of contact" field (#3191)

* Filter the opportunities "Point of contact" field Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> * Refactor according to review Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-01-11 20:26:11 +01:00
parent 99247fb689
commit 299bed511f
6 changed files with 231 additions and 56 deletions
--- a/packages/twenty-front/src/modules/companies/components/AddPersonToCompany.tsx
+++ b/packages/twenty-front/src/modules/companies/components/AddPersonToCompany.tsx
@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import { v4 } from 'uuid';
+
+import { FieldDoubleText } from '@/object-record/field/types/FieldDoubleText';
+import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
+import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
+import { Person } from '@/people/types/Person';
+import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+
+export const StyledInputContainer = styled.div`
+  background-color: transparent;
+  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};
+    width: 100%;
+  }
+  div {
+    border-radius: ${({ theme }) => theme.spacing(1)};
+    overflow: hidden;
+  }
+  input {
+    display: flex;
+    flex-grow: 1;
+    padding: ${({ theme }) => theme.spacing(2)};
+  }
+`;
+
+type AddPersonToCompanyProps = {
+  companyId: string;
+  onEntitySelected: (entity?: EntityForSelect | undefined) => void;
+  closeDropdown?: () => void;
+};
+
+export const AddPersonToCompany = ({
+  companyId,
+  onEntitySelected,
+  closeDropdown,
+}: AddPersonToCompanyProps) => {
+  const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
+
+  const handleEscape = () => {
+    goBackToPreviousHotkeyScope();
+    closeDropdown?.();
+  };
+
+  const { createOneRecord: createPerson } = useCreateOneRecord<Person>({
+    objectNameSingular: 'person',
+  });
+
+  const handleCreatePerson = async ({
+    firstValue,
+    secondValue,
+  }: FieldDoubleText) => {
+    if (!firstValue && !secondValue) return;
+
+    const person = await createPerson({
+      companyId,
+      id: v4(),
+      name: {
+        firstName: firstValue,
+        lastName: secondValue,
+      },
+    });
+
+    if (person) {
+      const entityForSelect: EntityForSelect = {
+        id: person.id,
+        name: person.name?.firstName ?? '',
+        avatarUrl: person.avatarUrl ?? '',
+        avatarType: 'rounded',
+        record: person,
+      };
+      onEntitySelected(entityForSelect);
+    }
+    goBackToPreviousHotkeyScope();
+    closeDropdown?.();
+  };
+
+  return (
+    <StyledInputContainer>
+      <DoubleTextInput
+        firstValue=""
+        secondValue=""
+        firstValuePlaceholder="First Name"
+        secondValuePlaceholder="Last Name"
+        onClickOutside={handleEscape}
+        onEnter={handleCreatePerson}
+        onEscape={handleEscape}
+        hotkeyScope={RelationPickerHotkeyScope.AddNew}
+      />
+    </StyledInputContainer>
+  );
+};