98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
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;
|
|
onSubmit: (newCompany: EntityForSelect | null) => void;
|
|
onCancel?: () => void;
|
|
createModeEnabled?: boolean;
|
|
width?: number;
|
|
};
|
|
|
|
export function CompanyPickerCell({
|
|
companyId,
|
|
onSubmit,
|
|
onCancel,
|
|
createModeEnabled,
|
|
width,
|
|
}: OwnProps) {
|
|
const [isCreating, setIsCreating] = useRecoilScopedState(
|
|
isCreateModeScopedState,
|
|
);
|
|
|
|
const [insertCompany] = useInsertOneCompanyMutation();
|
|
|
|
const [searchFilter] = useRecoilScopedState(
|
|
relationPickerSearchFilterScopedState,
|
|
);
|
|
|
|
const setHotkeyScope = useSetHotkeyScope();
|
|
|
|
const companies = useFilteredSearchCompanyQuery({
|
|
searchFilter,
|
|
selectedIds: [companyId ?? ''],
|
|
});
|
|
|
|
async function handleEntitySelected(
|
|
entity: EntityForSelect | null | undefined,
|
|
) {
|
|
onSubmit(entity ?? null);
|
|
}
|
|
|
|
function handleStartCreation() {
|
|
setIsCreating(true);
|
|
setHotkeyScope(TableHotkeyScope.CellDoubleTextInput);
|
|
}
|
|
|
|
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 ? handleStartCreation : undefined}
|
|
onCancel={onCancel}
|
|
onEntitySelected={handleEntitySelected}
|
|
entities={{
|
|
entitiesToSelect: companies.entitiesToSelect,
|
|
selectedEntity: companies.selectedEntities[0],
|
|
loading: companies.loading,
|
|
}}
|
|
/>
|
|
);
|
|
}
|