Feat/company card fields (#686)

* wip

* Ok

* asd

* Fixed cancel submit

* Renamed

* Fixed

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

@@ -1,6 +1,7 @@
 import { PersonChip } from '@/people/components/PersonChip';
 import { RelationPickerHotkeyScope } from '@/relation-picker/types/RelationPickerHotkeyScope';
 import { EditableCell } from '@/ui/components/editable-cell/EditableCell';
+import { useEditableCell } from '@/ui/components/editable-cell/hooks/useEditableCell';
 import { Company, User } from '~/generated/graphql';
 
 import { CompanyAccountOwnerPicker } from './CompanyAccountOwnerPicker';
@@ -14,10 +15,26 @@ export type OwnProps = {
 };
 
 export function CompanyAccountOwnerCell({ company }: OwnProps) {
+  const { closeEditableCell } = useEditableCell();
+
+  function handleCancel() {
+    closeEditableCell();
+  }
+
+  function handleSubmit() {
+    closeEditableCell();
+  }
+
   return (
     <EditableCell
       editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
-      editModeContent={<CompanyAccountOwnerPicker company={company} />}
+      editModeContent={
+        <CompanyAccountOwnerPicker
+          onCancel={handleCancel}
+          onSubmit={handleSubmit}
+          company={company}
+        />
+      }
       nonEditModeContent={
         company.accountOwner?.displayName ? (
           <PersonChip

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

@@ -4,7 +4,6 @@ import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/
 import { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
 import { Entity } from '@/relation-picker/types/EntityTypeForSelect';
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
-import { useEditableCell } from '@/ui/components/editable-cell/hooks/useEditableCell';
 import {
   Company,
   User,
@@ -16,20 +15,24 @@ export type OwnProps = {
   company: Pick<Company, 'id'> & {
     accountOwner?: Pick<User, 'id' | 'displayName'> | null;
   };
+  onSubmit?: () => void;
+  onCancel?: () => void;
 };
 
 type UserForSelect = EntityForSelect & {
   entityType: Entity.User;
 };
 
-export function CompanyAccountOwnerPicker({ company }: OwnProps) {
+export function CompanyAccountOwnerPicker({
+  company,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
   const [updateCompany] = useUpdateCompanyMutation();
 
-  const { closeEditableCell } = useEditableCell();
-
   const companies = useFilteredSearchEntityQuery({
     queryHook: useSearchUserQuery,
     selectedIds: [company?.accountOwner?.id ?? ''],
@@ -52,12 +55,13 @@ export function CompanyAccountOwnerPicker({ company }: OwnProps) {
       },
     });
 
-    closeEditableCell();
+    onSubmit?.();
   }
 
   return (
     <SingleEntitySelect
       onEntitySelected={handleEntitySelected}
+      onCancel={onCancel}
       entities={{
         loading: companies.loading,
         entitiesToSelect: companies.entitiesToSelect,