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-11-27 11:03:40 +03:00 · 2024-01-11 20:26:11 +01:00 · 2024-01-11 20:26:11 +01:00 · 299bed511f
commit 299bed511f
parent 99247fb689
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>
+  );
+};
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/RelationPicker.tsx
@ -1,13 +1,20 @@
-import { useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';

+import { AddPersonToCompany } from '@/companies/components/AddPersonToCompany';
+import { companyProgressesFamilyState } from '@/companies/states/companyProgressesFamilyState';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { FieldDefinition } from '@/object-record/field/types/FieldDefinition';
 import { FieldRelationMetadata } from '@/object-record/field/types/FieldMetadata';
+import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import { SingleEntitySelect } from '@/object-record/relation-picker/components/SingleEntitySelect';
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
 import { IconForbid } from '@/ui/display/icon';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { isDefined } from '~/utils/isDefined';

 export type RelationPickerProps = {
  recordId?: string;
@ -35,10 +42,24 @@ export const RelationPicker = ({
    searchQuery,
  } = useRelationPicker();

+  const [showAddNewDropdown, setShowAddNewDropdown] = useState(false);
+
+  const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
+
  useEffect(() => {
    setRelationPickerSearchFilter(initialSearchFilter ?? '');
  }, [initialSearchFilter, setRelationPickerSearchFilter]);

+  const boardCardId = useContext(BoardCardIdContext);
+  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
+
+  const [companyProgress] = useRecoilState(
+    companyProgressesFamilyState(boardCardId ?? ''),
+  );
+
+  const { company } = companyProgress ?? {};
+  const companyId = company?.id;
+
  const { objectNameSingular: relationObjectNameSingular } =
    useObjectNameSingularFromPlural({
      objectNamePlural:
@ -69,16 +90,41 @@ export const RelationPicker = ({
  const handleEntitySelected = (selectedEntity: any | null | undefined) =>
    onSubmit(selectedEntity ?? null);

+  const entitiesToSelect = entities.entitiesToSelect.filter((entity) =>
+    weAreInOpportunitiesPageCard ? entity.record.companyId === companyId : true,
+  );
+
+  const weAreAddingNewPerson =
+    weAreInOpportunitiesPageCard && showAddNewDropdown && companyId;
+
  return (
+    <>
+      {!weAreAddingNewPerson ? (
        <SingleEntitySelect
          EmptyIcon={IconForbid}
          emptyLabel={'No ' + fieldDefinition.label}
-      entitiesToSelect={entities.entitiesToSelect}
+          entitiesToSelect={entitiesToSelect}
          loading={entities.loading}
          onCancel={onCancel}
          onEntitySelected={handleEntitySelected}
          selectedEntity={entities.selectedEntities[0]}
          width={width}
+          onCreate={() => {
+            if (weAreInOpportunitiesPageCard) {
+              setShowAddNewDropdown(true);
+              setHotkeyScopeAndMemorizePreviousScope(
+                RelationPickerHotkeyScope.AddNew,
+              );
+            }
+          }}
        />
+      ) : (
+        <AddPersonToCompany
+          companyId={companyId}
+          onEntitySelected={handleEntitySelected}
+          closeDropdown={() => setShowAddNewDropdown(false)}
+        />
+      )}
+    </>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx
@ -30,7 +30,14 @@ export const SingleEntitySelect = ({
    refs: [containerRef],
    callback: (event) => {
      event.stopImmediatePropagation();
-      onCancel?.();
+
+      const weAreNotInAnHTMLInput = !(
+        event.target instanceof HTMLInputElement &&
+        event.target.tagName === 'INPUT'
+      );
+      if (weAreNotInAnHTMLInput && onCancel) {
+        onCancel();
+      }
    },
  });

--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
@ -1,7 +1,8 @@
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { Key } from 'ts-key-enum';

+import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
 import { IconPlus } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
@ -14,6 +15,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { assertNotNull } from '~/utils/assert';
+import { isDefined } from '~/utils/isDefined';

 import { EntityForSelect } from '../types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
@ -69,6 +71,12 @@ export const SingleEntitySelectMenuItems = ({

  const selectableItemIds = entitiesInDropdown.map((entity) => entity.id);

+  const boardCardId = useContext(BoardCardIdContext);
+  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
+
+  const hideSearchResults =
+    weAreInOpportunitiesPageCard && !entitiesInDropdown.length;
+
  return (
    <div ref={containerRef}>
      <SelectableList
@ -86,6 +94,8 @@ export const SingleEntitySelectMenuItems = ({
          }
        }}
      >
+        {!hideSearchResults && (
+          <>
            <DropdownMenuItemsContainer hasMaxHeight>
              {loading ? (
                <DropdownMenuSkeletonItem />
@ -113,6 +123,10 @@ export const SingleEntitySelectMenuItems = ({
                      selected={!selectedEntity}
                    />
                  )}
+                </>
+              )}
+            </DropdownMenuItemsContainer>
+            <DropdownMenuItemsContainer hasMaxHeight>
              {entitiesInDropdown?.map((entity) => (
                <SelectableMenuItemSelect
                  key={entity.id}
@ -121,20 +135,18 @@ export const SingleEntitySelectMenuItems = ({
                  selectedEntity={selectedEntity}
                />
              ))}
+            </DropdownMenuItemsContainer>
          </>
        )}
-        </DropdownMenuItemsContainer>
-        {showCreateButton && (
-          <>
+        {(hideSearchResults || showCreateButton) && !loading && (
          <DropdownMenuItemsContainer hasMaxHeight>
-              <DropdownMenuSeparator />
+            {entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
            <CreateNewButton
              onClick={onCreate}
              LeftIcon={IconPlus}
              text="Add New"
            />
          </DropdownMenuItemsContainer>
-          </>
        )}
      </SelectableList>
    </div>
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
@ -1,3 +1,6 @@
+import { useContext } from 'react';
+
+import { BoardCardIdContext } from '@/object-record/record-board/contexts/BoardCardIdContext';
 import {
  SingleEntitySelectMenuItems,
  SingleEntitySelectMenuItemsProps,
@ -35,13 +38,20 @@ export const SingleEntitySelectMenuItemsWithSearch = ({

  const showCreateButton = isDefined(onCreate) && searchFilter !== '';

+  const boardCardId = useContext(BoardCardIdContext);
+  const weAreInOpportunitiesPageCard = isDefined(boardCardId);
+  const hideSearchInput =
+    weAreInOpportunitiesPageCard && !entitiesToSelect.length && !selectedEntity;
+
  return (
    <>
+      {!hideSearchInput && (
        <DropdownMenuSearchInput
          value={searchFilter}
          onChange={handleSearchFilterChange}
          autoFocus
        />
+      )}
      <DropdownMenuSeparator />
      <SingleEntitySelectMenuItems
        {...{
--- a/packages/twenty-front/src/modules/object-record/relation-picker/types/RelationPickerHotkeyScope.ts
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/types/RelationPickerHotkeyScope.ts
@ -1,3 +1,4 @@
 export enum RelationPickerHotkeyScope {
  RelationPicker = 'relation-picker',
+  AddNew = 'add-new',
 }