Feat/editable fields update (#743)

* Removed console log

* Used current scope as default parent scope for fields

* Finished editable fields on people show page

* Added stories

* Console log

* Lint

front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx

@@ -0,0 +1,47 @@
+import { IconBuildingSkyscraper } from '@tabler/icons-react';
+
+import { CompanyChip } from '@/companies/components/CompanyChip';
+import { EditableField } from '@/ui/editable-field/components/EditableField';
+import { FieldContext } from '@/ui/editable-field/states/FieldContext';
+import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { Company, Person } from '~/generated/graphql';
+import { getLogoUrlFromDomainName } from '~/utils';
+
+import { PeopleCompanyEditableFieldEditMode } from './PeopleCompanyEditableFieldEditMode';
+
+export type OwnProps = {
+  people: Pick<Person, 'id'> & {
+    company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
+  };
+};
+
+export function PeopleCompanyEditableField({ people }: OwnProps) {
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <RecoilScope>
+        <EditableField
+          customEditHotkeyScope={{
+            scope: RelationPickerHotkeyScope.RelationPicker,
+          }}
+          iconLabel={<IconBuildingSkyscraper />}
+          editModeContent={
+            <PeopleCompanyEditableFieldEditMode people={people} />
+          }
+          displayModeContent={
+            people.company ? (
+              <CompanyChip
+                id={people.company.id}
+                name={people.company.name}
+                picture={getLogoUrlFromDomainName(people.company.domainName)}
+              />
+            ) : (
+              <></>
+            )
+          }
+          isDisplayModeContentEmpty={!people.company}
+        />
+      </RecoilScope>
+    </RecoilScope>
+  );
+}

front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx

@@ -0,0 +1,51 @@
+import { useFilteredSearchCompanyQuery } from '@/companies/queries';
+import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
+import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { Company, Person, useUpdatePeopleMutation } from '~/generated/graphql';
+
+export type OwnProps = {
+  people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
+};
+
+export function PeopleCompanyEditableFieldEditMode({ people }: OwnProps) {
+  const { closeEditableField } = useEditableField();
+
+  const [searchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+  const [updatePeople] = useUpdatePeopleMutation();
+
+  const companies = useFilteredSearchCompanyQuery({
+    searchFilter,
+    selectedIds: people.company?.id ? [people.company.id] : [],
+  });
+
+  async function handleEntitySelected(entity: EntityForSelect) {
+    await updatePeople({
+      variables: {
+        ...people,
+        companyId: entity.id,
+      },
+    });
+    closeEditableField();
+  }
+
+  function handleCancel() {
+    closeEditableField();
+  }
+
+  return (
+    <SingleEntitySelect
+      onEntitySelected={handleEntitySelected}
+      entities={{
+        entitiesToSelect: companies.entitiesToSelect,
+        selectedEntity: companies.selectedEntities[0],
+        loading: companies.loading,
+      }}
+      onCancel={handleCancel}
+    />
+  );
+}