Added generic relation cell (#969)

* Added generic relation cell

* Deactivated debug

* Added default warning

* Put back display component

* Removed unused types

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

@@ -1,12 +1,8 @@
-import { Key } from 'ts-key-enum';
-
 import { useFilteredSearchCompanyQuery } from '@/companies/queries';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
 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 { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
 import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
@@ -63,13 +59,6 @@ export function PeopleCompanyPicker({ people }: OwnProps) {
     addToScopeStack(TableHotkeyScope.CellDoubleTextInput);
   }
 
-  useScopedHotkeys(
-    Key.Escape,
-    () => closeEditableCell(),
-    RelationPickerHotkeyScope.RelationPicker,
-    [closeEditableCell],
-  );
-
   return (
     <SingleEntitySelect
       onCreate={handleCreate}

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

@@ -0,0 +1,55 @@
+import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
+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 { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import { useSearchPeopleQuery } from '~/generated/graphql';
+
+export type OwnProps = {
+  personId: string;
+  onSubmit: (newPersonId: string | null) => void;
+  onCancel?: () => void;
+};
+
+type PersonForSelect = EntityForSelect & {
+  entityType: Entity.Person;
+};
+
+export function PeoplePicker({ personId, onSubmit, onCancel }: OwnProps) {
+  const [searchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+
+  const people = useFilteredSearchEntityQuery({
+    queryHook: useSearchPeopleQuery,
+    selectedIds: [personId],
+    searchFilter: searchFilter,
+    mappingFunction: (person) => ({
+      entityType: Entity.Person,
+      id: person.id,
+      name: person.firstName + ' ' + person.lastName,
+      avatarType: 'rounded',
+    }),
+    orderByField: 'firstName',
+    searchOnFields: ['firstName', 'lastName'],
+  });
+
+  async function handleEntitySelected(
+    selectedPerson: PersonForSelect | null | undefined,
+  ) {
+    onSubmit(selectedPerson?.id ?? null);
+  }
+
+  return (
+    <SingleEntitySelect
+      onEntitySelected={handleEntitySelected}
+      onCancel={onCancel}
+      entities={{
+        loading: people.loading,
+        entitiesToSelect: people.entitiesToSelect,
+        selectedEntity: people.selectedEntities[0],
+      }}
+    />
+  );
+}