Feat/single entity select relation picker (#345)

* - Implemented recoil scoped state - Implemented SingleEntitySelect - Implemented keyboard shortcut up/down select * Added useRecoilScopedValue * Fix storybook * Fix storybook * Fix storybook * Fix storybook --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2023-06-21 22:29:07 +02:00
parent 8a330b9746
commit e679f45615
23 changed files with 653 additions and 180 deletions
--- a/front/src/modules/people/components/PeopleCompanyPicker.tsx
+++ b/front/src/modules/people/components/PeopleCompanyPicker.tsx
@ -0,0 +1,73 @@
+import { useRecoilState } from 'recoil';
+
+import { SingleEntitySelect } from '@/relation-picker/components/SingleEntitySelect';
+import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery';
+import { relationPickerSearchFilterScopedState } from '@/relation-picker/states/relationPickerSearchFilterScopedState';
+import { isCreateModeScopedState } from '@/ui/components/editable-cell/states/isCreateModeScopedState';
+import { useRecoilScopedState } from '@/ui/hooks/useRecoilScopedState';
+import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
+import { getLogoUrlFromDomainName } from '@/utils/utils';
+import {
+  CommentableType,
+  Company,
+  Person,
+  useSearchCompanyQuery,
+  useUpdatePeopleMutation,
+} from '~/generated/graphql';
+
+export type OwnProps = {
+  people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
+};
+
+export function PeopleCompanyPicker({ people }: OwnProps) {
+  const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
+
+  const [searchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+  const [updatePeople] = useUpdatePeopleMutation();
+  const [, setIsSomeInputInEditMode] = useRecoilState(
+    isSomeInputInEditModeState,
+  );
+
+  const companies = useFilteredSearchEntityQuery({
+    queryHook: useSearchCompanyQuery,
+    selectedIds: [people.company?.id ?? ''],
+    searchFilter: searchFilter,
+    mappingFunction: (company) => ({
+      entityType: CommentableType.Company,
+      id: company.id,
+      name: company.name,
+      avatarType: 'squared',
+      avatarUrl: getLogoUrlFromDomainName(company.domainName),
+    }),
+    orderByField: 'name',
+    searchOnFields: ['name'],
+  });
+
+  async function handleEntitySelected(entity: any) {
+    setIsSomeInputInEditMode(false);
+
+    await updatePeople({
+      variables: {
+        ...people,
+        companyId: entity.id,
+      },
+    });
+  }
+
+  function handleCreate() {
+    setIsCreating(true);
+  }
+
+  return (
+    <SingleEntitySelect
+      onCreate={handleCreate}
+      onEntitySelected={handleEntitySelected}
+      entities={{
+        entitiesToSelect: companies.entitiesToSelect,
+        selectedEntity: companies.selectedEntities[0],
+      }}
+    />
+  );
+}