Add company creation from people table (#1100)

* Add company creation from people table

* Design

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

@@ -2,10 +2,13 @@ import { useFilteredSearchCompanyQuery } from '@/companies/queries';
 import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
+import { DoubleTextCellEdit } from '@/ui/table/editable-cell/type/components/DoubleTextCellEdit';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useInsertOneCompanyMutation } from '~/generated/graphql';
 
 export type OwnProps = {
   companyId: string | null;
@@ -22,7 +25,11 @@ export function CompanyPickerCell({
   createModeEnabled,
   width,
 }: OwnProps) {
-  const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
+  const [isCreating, setIsCreating] = useRecoilScopedState(
+    isCreateModeScopedState,
+  );
+
+  const [insertCompany] = useInsertOneCompanyMutation();
 
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
@@ -41,15 +48,43 @@ export function CompanyPickerCell({
     onSubmit(entity ?? null);
   }
 
-  function handleCreate() {
+  function handleStartCreation() {
     setIsCreating(true);
     setHotkeyScope(TableHotkeyScope.CellDoubleTextInput);
   }
 
-  return (
+  async function handleCreate(firstValue: string, secondValue: string) {
+    const insertCompanyRequest = await insertCompany({
+      variables: {
+        data: {
+          name: firstValue,
+          domainName: secondValue,
+          address: '',
+        },
+      },
+    });
+    const companyCreated = insertCompanyRequest.data?.createOneCompany;
+    companyCreated &&
+      onSubmit({
+        id: companyCreated.id,
+        name: companyCreated.name,
+        entityType: Entity.Company,
+      });
+    setIsCreating(false);
+  }
+
+  return isCreating ? (
+    <DoubleTextCellEdit
+      firstValue={searchFilter}
+      secondValue={''}
+      firstValuePlaceholder={'Name'}
+      secondValuePlaceholder={'Url'}
+      onSubmit={handleCreate}
+    />
+  ) : (
     <SingleEntitySelect
       width={width}
-      onCreate={createModeEnabled ? handleCreate : undefined}
+      onCreate={createModeEnabled ? handleStartCreation : undefined}
       onCancel={onCancel}
       onEntitySelected={handleEntitySelected}
       entities={{

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -71,22 +71,22 @@ export function SingleEntitySelect<
         autoFocus
       />
       <DropdownMenuSeparator />
-      {showCreateButton && (
-        <>
-          <DropdownMenuItemsContainer hasMaxHeight>
-            <DropdownMenuItem onClick={onCreate}>
-              <IconPlus size={theme.icon.size.md} />
-              Create new
-            </DropdownMenuItem>
-          </DropdownMenuItemsContainer>
-          <DropdownMenuSeparator />
-        </>
-      )}
       <SingleEntitySelectBase
         entities={entities}
         onEntitySelected={onEntitySelected}
         onCancel={onCancel}
       />
+      {showCreateButton && (
+        <>
+          <DropdownMenuItemsContainer hasMaxHeight>
+            <DropdownMenuItem onClick={onCreate}>
+              <IconPlus size={theme.icon.size.md} />
+              Add New
+            </DropdownMenuItem>
+          </DropdownMenuItemsContainer>
+          <DropdownMenuSeparator />
+        </>
+      )}
     </DropdownMenu>
   );
 }

front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx

@@ -55,6 +55,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
           onSubmit={handleEntitySubmit}
           onCancel={handleCancel}
           width={viewField.columnSize}
+          createModeEnabled
         />
       );
     }