Add point of contact field (#754)

* WIP add point of contact field

* Simplify probability field

* Improvements

* Solve bug when new value is 0

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { companyProgressesFamilyState } from '@/companies/states/companyProgressesFamilyState';
+import { PipelineProgressPointOfContactEditableField } from '@/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField';
 import { ProbabilityEditableField } from '@/pipeline/editable-field/components/ProbabilityEditableField';
 import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '@/pipeline/queries';
 import { BoardCardContext } from '@/pipeline/states/BoardCardContext';
@@ -167,12 +168,15 @@ export function CompanyBoardCard() {
           <ProbabilityEditableField
             icon={<IconCheck />}
             value={pipelineProgress.probability}
-            onSubmit={(value) =>
+            onSubmit={(value) => {
               handleCardUpdate({
                 ...pipelineProgress,
                 probability: value,
-              })
-            }
+              });
+            }}
+          />
+          <PipelineProgressPointOfContactEditableField
+            pipelineProgress={pipelineProgress}
           />
         </StyledBoardCardBody>
       </StyledBoardCard>

front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx

@@ -0,0 +1,38 @@
+import { Context } from 'react';
+
+import { useFilteredSearchPeopleQuery } from '@/people/queries';
+import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
+import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
+import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
+import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
+
+export function FilterDropdownPeopleSearchSelect({
+  context,
+}: {
+  context: Context<string | null>;
+}) {
+  const filterDropdownSearchInput = useRecoilScopedValue(
+    filterDropdownSearchInputScopedState,
+    context,
+  );
+
+  const [filterDropdownSelectedEntityId] = useRecoilScopedState(
+    filterDropdownSelectedEntityIdScopedState,
+    context,
+  );
+
+  const peopleForSelect = useFilteredSearchPeopleQuery({
+    searchFilter: filterDropdownSearchInput,
+    selectedIds: filterDropdownSelectedEntityId
+      ? [filterDropdownSelectedEntityId]
+      : [],
+  });
+
+  return (
+    <FilterDropdownEntitySearchSelect
+      entitiesForSelect={peopleForSelect}
+      context={context}
+    />
+  );
+}

front/src/modules/pipeline/components/PipelineProgressPointOfContactPicker.tsx

@@ -0,0 +1,87 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { Key } from 'ts-key-enum';
+
+import { useFilteredSearchPeopleQuery } from '@/people/queries';
+import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
+import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
+import {
+  Person,
+  PipelineProgress,
+  useUpdateOnePipelineProgressMutation,
+} from '~/generated/graphql';
+
+import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect';
+import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '../queries';
+
+export type OwnProps = {
+  pipelineProgress: Pick<PipelineProgress, 'id'> & {
+    pointOfContact?: Pick<Person, 'id'> | null;
+  };
+  onSubmit?: () => void;
+  onCancel?: () => void;
+};
+
+export function PipelineProgressPointOfContactPicker({
+  pipelineProgress,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
+  const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
+
+  const [searchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+  const [updatePipelineProgress] = useUpdateOnePipelineProgressMutation();
+
+  const people = useFilteredSearchPeopleQuery({
+    searchFilter,
+    selectedIds: pipelineProgress.pointOfContact?.id
+      ? [pipelineProgress.pointOfContact.id]
+      : [],
+  });
+
+  async function handleEntitySelected(entity: EntityForSelect) {
+    await updatePipelineProgress({
+      variables: {
+        ...pipelineProgress,
+        pointOfContactId: entity.id,
+      },
+      refetchQueries: [
+        getOperationName(GET_PIPELINE_PROGRESS) ?? '',
+        getOperationName(GET_PIPELINES) ?? '',
+      ],
+    });
+
+    onSubmit?.();
+  }
+
+  function handleCreate() {
+    setIsCreating(true);
+    onSubmit?.();
+  }
+
+  useScopedHotkeys(
+    Key.Escape,
+    () => {
+      onCancel && onCancel();
+    },
+    RelationPickerHotkeyScope.RelationPicker,
+    [],
+  );
+
+  return (
+    <SingleEntitySelect
+      onCreate={handleCreate}
+      onEntitySelected={handleEntitySelected}
+      entities={{
+        entitiesToSelect: people.entitiesToSelect,
+        selectedEntity: people.selectedEntities[0],
+        loading: people.loading,
+      }}
+    />
+  );
+}

front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField.tsx

@@ -0,0 +1,51 @@
+import { PersonChip } from '@/people/components/PersonChip';
+import { EditableField } from '@/ui/editable-field/components/EditableField';
+import { FieldContext } from '@/ui/editable-field/states/FieldContext';
+import { IconUser } from '@/ui/icon';
+import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { Person, PipelineProgress } from '~/generated/graphql';
+
+import { PipelineProgressPointOfContactPickerFieldEditMode } from './PipelineProgressPointOfContactPickerFieldEditMode';
+
+type OwnProps = {
+  pipelineProgress: Pick<PipelineProgress, 'id' | 'pointOfContactId'> & {
+    pointOfContact?: Pick<Person, 'id' | 'firstName' | 'lastName'> | null;
+  };
+};
+
+export function PipelineProgressPointOfContactEditableField({
+  pipelineProgress,
+}: OwnProps) {
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <RecoilScope>
+        <EditableField
+          customEditHotkeyScope={{
+            scope: RelationPickerHotkeyScope.RelationPicker,
+          }}
+          iconLabel={<IconUser />}
+          editModeContent={
+            <PipelineProgressPointOfContactPickerFieldEditMode
+              pipelineProgress={pipelineProgress}
+            />
+          }
+          displayModeContent={
+            pipelineProgress.pointOfContact ? (
+              <PersonChip
+                id={pipelineProgress.pointOfContact.id}
+                name={
+                  pipelineProgress.pointOfContact?.firstName +
+                  pipelineProgress.pointOfContact.lastName
+                }
+              />
+            ) : (
+              <></>
+            )
+          }
+          isDisplayModeContentEmpty={!pipelineProgress.pointOfContact}
+        />
+      </RecoilScope>
+    </RecoilScope>
+  );
+}

front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactPickerFieldEditMode.tsx

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+
+import { PipelineProgressPointOfContactPicker } from '@/pipeline/components/PipelineProgressPointOfContactPicker';
+import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
+import { Person, PipelineProgress } from '~/generated/graphql';
+
+const PipelineProgressPointOfContactPickerContainer = styled.div`
+  left: 24px;
+  position: absolute;
+  top: -8px;
+`;
+
+export type OwnProps = {
+  pipelineProgress: Pick<PipelineProgress, 'id'> & {
+    pointOfContact?: Pick<Person, 'id' | 'firstName' | 'lastName'> | null;
+  };
+  onSubmit?: () => void;
+  onCancel?: () => void;
+};
+
+export function PipelineProgressPointOfContactPickerFieldEditMode({
+  pipelineProgress,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
+  const { closeEditableField } = useEditableField();
+
+  function handleSubmit() {
+    closeEditableField();
+    onSubmit?.();
+  }
+
+  function handleCancel() {
+    closeEditableField();
+    onCancel?.();
+  }
+
+  return (
+    <PipelineProgressPointOfContactPickerContainer>
+      <PipelineProgressPointOfContactPicker
+        pipelineProgress={pipelineProgress}
+        onCancel={handleCancel}
+        onSubmit={handleSubmit}
+      />
+    </PipelineProgressPointOfContactPickerContainer>
+  );
+}

front/src/modules/pipeline/editable-field/components/ProbabilityEditableField.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
@@ -13,57 +11,14 @@ type OwnProps = {
 };
 
 export function ProbabilityEditableField({ icon, value, onSubmit }: OwnProps) {
-  const [internalValue, setInternalValue] = useState(value);
-
-  useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
-  async function handleChange(newValue: number) {
-    setInternalValue(newValue);
-  }
-
-  async function handleSubmit() {
-    if (!internalValue) return;
-
-    try {
-      const numberValue = internalValue;
-
-      if (isNaN(numberValue)) {
-        throw new Error('Not a number');
-      }
-
-      if (numberValue < 0 || numberValue > 100) {
-        throw new Error('Not a probability');
-      }
-
-      onSubmit?.(numberValue);
-
-      setInternalValue(numberValue);
-    } catch {
-      handleCancel();
-    }
-  }
-
-  async function handleCancel() {
-    setInternalValue(value);
-  }
-
   return (
     <RecoilScope SpecificContext={FieldContext}>
       <EditableField
-        onSubmit={handleSubmit}
-        onCancel={handleCancel}
         iconLabel={icon}
         displayModeContentOnly
         disableHoverEffect
         displayModeContent={
-          <ProbabilityFieldEditMode
-            value={internalValue ?? 0}
-            onChange={(newValue: number) => {
-              handleChange(newValue);
-            }}
-          />
+          <ProbabilityFieldEditMode value={value ?? 0} onChange={onSubmit} />
         }
       />
     </RecoilScope>

front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx

@@ -90,6 +90,7 @@ export function ProbabilityFieldEditMode({ value, onChange }: OwnProps) {
       <StyledProgressBarContainer>
         {PROBABILITY_VALUES.map((probability, i) => (
           <StyledProgressBarItemContainer
+            key={i}
             onClick={() => handleChange(probability.value)}
             onMouseEnter={() => setNextProbabilityIndex(i)}
             onMouseLeave={() => setNextProbabilityIndex(null)}

front/src/pages/opportunities/opportunities-filters.tsx

@@ -5,10 +5,13 @@ import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
   IconCurrencyDollar,
+  IconUser,
 } from '@/ui/icon/index';
 import { icon } from '@/ui/themes/icon';
 import { PipelineProgress } from '~/generated/graphql';
 
+import { FilterDropdownPeopleSearchSelect } from '../../modules/people/components/FilterDropdownPeopleSearchSelect';
+
 export const opportunitiesFilters: FilterDefinitionByEntity<PipelineProgress>[] =
   [
     {
@@ -34,4 +37,13 @@ export const opportunitiesFilters: FilterDefinitionByEntity<PipelineProgress>[]
         <FilterDropdownCompanySearchSelect context={CompanyBoardContext} />
       ),
     },
+    {
+      field: 'pointOfContactId',
+      label: 'Point of contact',
+      icon: <IconUser size={icon.size.md} stroke={icon.stroke.sm} />,
+      type: 'entity',
+      entitySelectComponent: (
+        <FilterDropdownPeopleSearchSelect context={CompanyBoardContext} />
+      ),
+    },
   ];