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/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)}