Feat/account owner picker (#359)

* Added account owner picker

* Regenerated graphql files

* Fixed pickers staying in edit mode with a new generic hook

* Fixed lint

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

@@ -0,0 +1,26 @@
+import { PersonChip } from '@/people/components/PersonChip';
+import { EditableCellV2 } from '@/ui/components/editable-cell/EditableCellV2';
+import { Company, User } from '~/generated/graphql';
+
+import { CompanyAccountOwnerPicker } from './CompanyAccountOwnerPicker';
+
+export type OwnProps = {
+  company: Pick<Company, 'id'> & {
+    accountOwner?: Pick<User, 'id' | 'displayName'> | null;
+  };
+};
+
+export function CompanyAccountOwnerCell({ company }: OwnProps) {
+  return (
+    <EditableCellV2
+      editModeContent={<CompanyAccountOwnerPicker company={company} />}
+      nonEditModeContent={
+        company.accountOwner?.displayName ? (
+          <PersonChip name={company.accountOwner?.displayName ?? ''} />
+        ) : (
+          <></>
+        )
+      }
+    />
+  );
+}

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

@@ -0,0 +1,67 @@
+import { SingleEntitySelect } from '@/relation-picker/components/SingleEntitySelect';
+import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';
+import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
+import { Entity } from '@/relation-picker/types/EntityTypeForSelect';
+import { useCloseEditableCell } from '@/ui/components/editable-cell/hooks/useCloseEditableCell';
+import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
+import {
+  Company,
+  User,
+  useSearchUserQuery,
+  useUpdateCompanyMutation,
+} from '~/generated/graphql';
+
+export type OwnProps = {
+  company: Pick<Company, 'id'> & {
+    accountOwner?: Pick<User, 'id' | 'displayName'> | null;
+  };
+};
+
+type UserForSelect = EntityForSelect & {
+  entityType: Entity.User;
+};
+
+export function CompanyAccountOwnerPicker({ company }: OwnProps) {
+  const [searchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+  const [updateCompany] = useUpdateCompanyMutation();
+
+  const closeEditableCell = useCloseEditableCell();
+
+  const companies = useFilteredSearchEntityQuery({
+    queryHook: useSearchUserQuery,
+    selectedIds: [company?.accountOwner?.id ?? ''],
+    searchFilter: searchFilter,
+    mappingFunction: (user) => ({
+      entityType: Entity.User,
+      id: user.id,
+      name: user.displayName,
+      avatarType: 'rounded',
+    }),
+    orderByField: 'displayName',
+    searchOnFields: ['displayName'],
+  });
+
+  async function handleEntitySelected(selectedUser: UserForSelect) {
+    await updateCompany({
+      variables: {
+        ...company,
+        accountOwnerId: selectedUser.id,
+      },
+    });
+
+    closeEditableCell();
+  }
+
+  return (
+    <SingleEntitySelect
+      onEntitySelected={handleEntitySelected}
+      entities={{
+        entitiesToSelect: companies.entitiesToSelect,
+        selectedEntity: companies.selectedEntities[0],
+      }}
+    />
+  );
+}