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/components/PersonPropertyBox.tsx

@@ -0,0 +1,84 @@
+import {
+  IconCalendar,
+  IconMail,
+  IconMap,
+  IconPhone,
+} from '@tabler/icons-react';
+
+import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
+import { PhoneEditableField } from '@/ui/editable-field/variants/components/PhoneEditableField';
+import { TextEditableField } from '@/ui/editable-field/variants/components/TextEditableField';
+import { Company, Person, useUpdatePeopleMutation } from '~/generated/graphql';
+
+import { PeopleCompanyEditableField } from '../editable-field/components/PeopleCompanyEditableField';
+
+type OwnProps = {
+  person: Pick<
+    Person,
+    'id' | 'city' | 'email' | 'displayName' | 'phone' | 'createdAt'
+  > & {
+    company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
+  };
+};
+
+export function PersonPropertyBox({ person }: OwnProps) {
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  return (
+    <PropertyBox extraPadding={true}>
+      <TextEditableField
+        value={person.email}
+        icon={<IconMail />}
+        placeholder={'Email'}
+        onSubmit={(newEmail) => {
+          updatePerson({
+            variables: {
+              id: person.id,
+              email: newEmail,
+            },
+          });
+        }}
+      />
+      <PhoneEditableField
+        value={person.phone}
+        icon={<IconPhone />}
+        placeholder={'Phone'}
+        onSubmit={(newPhone) => {
+          updatePerson({
+            variables: {
+              id: person.id,
+              phone: newPhone,
+            },
+          });
+        }}
+      />
+      <DateEditableField
+        value={person.createdAt}
+        icon={<IconCalendar />}
+        onSubmit={(newDate) => {
+          updatePerson({
+            variables: {
+              id: person.id,
+              createdAt: newDate,
+            },
+          });
+        }}
+      />
+      <PeopleCompanyEditableField people={person} />
+      <TextEditableField
+        value={person.city}
+        icon={<IconMap />}
+        placeholder={'City'}
+        onSubmit={(newCity) => {
+          updatePerson({
+            variables: {
+              id: person.id,
+              city: newCity,
+            },
+          });
+        }}
+      />
+    </PropertyBox>
+  );
+}

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}
+    />
+  );
+}

front/src/modules/people/queries/show.ts

@@ -11,9 +11,13 @@ export const GET_PERSON = gql`
       displayName
       email
       createdAt
+      city
+      phone
       _commentThreadCount
       company {
         id
+        name
+        domainName
       }
     }
   }