[PersonShow] use fieldDefinition for editable fields (#1178)

* [PersonShow] use fieldDefinition for editable fields * remove unused files * fix company chip display field
2023-08-11 16:36:38 -07:00
parent 007e42a2e6
commit a30222fe76
16 changed files with 316 additions and 347 deletions
--- a/front/src/pages/companies/CompanyShow.tsx
+++ b/front/src/pages/companies/CompanyShow.tsx
@ -24,7 +24,7 @@ import { getLogoUrlFromDomainName } from '~/utils';
 import { CompanyNameEditableField } from '../../modules/companies/editable-field/components/CompanyNameEditableField';
 import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageContainer';

-import { companyShowFieldsDefinition } from './constants/companyShowFieldsDefinition';
+import { companyShowFieldDefinition } from './constants/companyShowFieldDefinition';

 export function CompanyShow() {
  const companyId = useParams().companyId ?? '';
@ -33,11 +33,12 @@ export function CompanyShow() {
  const theme = useTheme();
  const { data } = useCompanyQuery(companyId);
  const company = data?.findUniqueCompany;
-  const isFavorite =
-    company?.Favorite && company?.Favorite?.length > 0 ? true : false;

  if (!company) return <></>;

+  const isFavorite =
+    company.Favorite && company.Favorite?.length > 0 ? true : false;
+
  async function handleFavoriteButtonClick() {
    if (isFavorite) deleteCompanyFavorite(companyId);
    else insertCompanyFavorite(companyId);
@ -45,7 +46,7 @@ export function CompanyShow() {

  return (
    <WithTopBarContainer
-      title={company?.name ?? ''}
+      title={company.name ?? ''}
      hasBackButton
      isFavorite={isFavorite}
      icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
@ -54,10 +55,10 @@ export function CompanyShow() {
      <ShowPageContainer>
        <ShowPageLeftContainer>
          <ShowPageSummaryCard
-            id={company?.id}
-            logoOrAvatar={getLogoUrlFromDomainName(company?.domainName ?? '')}
-            title={company?.name ?? 'No name'}
-            date={company?.createdAt ?? ''}
+            id={company.id}
+            logoOrAvatar={getLogoUrlFromDomainName(company.domainName ?? '')}
+            title={company.name ?? 'No name'}
+            date={company.createdAt ?? ''}
            renderTitleEditComponent={() => (
              <CompanyNameEditableField company={company} />
            )}
@ -67,7 +68,7 @@ export function CompanyShow() {
              value={useUpdateOneCompanyMutation}
            >
              <EditableFieldEntityIdContext.Provider value={company.id}>
-                {companyShowFieldsDefinition.map((fieldDefinition) => {
+                {companyShowFieldDefinition.map((fieldDefinition) => {
                  return (
                    <EditableFieldDefinitionContext.Provider
                      value={fieldDefinition}
@ -84,7 +85,7 @@ export function CompanyShow() {
        </ShowPageLeftContainer>
        <ShowPageRightContainer>
          <Timeline
-            entity={{ id: company?.id ?? '', type: CommentableType.Company }}
+            entity={{ id: company.id ?? '', type: CommentableType.Company }}
          />
        </ShowPageRightContainer>
      </ShowPageContainer>
--- a/front/src/pages/companies/constants/companyShowFieldsDefinition.tsx
+++ b/front/src/pages/companies/constants/companyShowFieldsDefinition.tsx
@ -16,7 +16,7 @@ import {
 } from '@/ui/icon';
 import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';

-export const companyShowFieldsDefinition: FieldDefinition<FieldMetadata>[] = [
+export const companyShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
  {
    id: 'domainName',
    label: 'Domain name',
--- a/front/src/pages/people/PersonShow.tsx
+++ b/front/src/pages/people/PersonShow.tsx
@ -4,8 +4,12 @@ import { useTheme } from '@emotion/react';

 import { Timeline } from '@/activities/timeline/components/Timeline';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
-import { PersonPropertyBox } from '@/people/components/PersonPropertyBox';
 import { GET_PERSON, usePersonQuery } from '@/people/queries';
+import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
+import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
+import { EditableFieldDefinitionContext } from '@/ui/editable-field/states/EditableFieldDefinitionContext';
+import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
+import { EditableFieldMutationContext } from '@/ui/editable-field/states/EditableFieldMutationContext';
 import { IconUser } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
@ -13,25 +17,30 @@ import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPag
 import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
 import {
  CommentableType,
+  useUpdateOnePersonMutation,
  useUploadPersonPictureMutation,
 } from '~/generated/graphql';

 import { PeopleFullNameEditableField } from '../../modules/people/editable-field/components/PeopleFullNameEditableField';
 import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageContainer';

+import { personShowFieldDefinition } from './constants/personShowFieldDefinition';
+
 export function PersonShow() {
  const personId = useParams().personId ?? '';
-
  const { insertPersonFavorite, deletePersonFavorite } = useFavorites();

+  const theme = useTheme();
  const { data } = usePersonQuery(personId);
  const person = data?.findUniquePerson;
-  const isFavorite =
-    person?.Favorite && person?.Favorite?.length > 0 ? true : false;

-  const theme = useTheme();
  const [uploadPicture] = useUploadPersonPictureMutation();

+  if (!person) return <></>;
+
+  const isFavorite =
+    person.Favorite && person.Favorite?.length > 0 ? true : false;
+
  async function onUploadPicture(file: File) {
    if (!file || !person?.id) {
      return;
@ -39,7 +48,7 @@ export function PersonShow() {
    await uploadPicture({
      variables: {
        file,
-        id: person?.id,
+        id: person.id,
      },
      refetchQueries: [getOperationName(GET_PERSON) ?? ''],
    });
@ -52,7 +61,7 @@ export function PersonShow() {

  return (
    <WithTopBarContainer
-      title={person?.firstName ?? ''}
+      title={person.firstName ?? ''}
      icon={<IconUser size={theme.icon.size.md} />}
      hasBackButton
      isFavorite={isFavorite}
@ -61,20 +70,37 @@ export function PersonShow() {
      <ShowPageContainer>
        <ShowPageLeftContainer>
          <ShowPageSummaryCard
-            id={person?.id}
-            title={person?.displayName ?? 'No name'}
-            logoOrAvatar={person?.avatarUrl ?? undefined}
-            date={person?.createdAt ?? ''}
+            id={person.id}
+            title={person.displayName ?? 'No name'}
+            logoOrAvatar={person.avatarUrl ?? undefined}
+            date={person.createdAt ?? ''}
            renderTitleEditComponent={() =>
              person ? <PeopleFullNameEditableField people={person} /> : <></>
            }
            onUploadPicture={onUploadPicture}
          />
-          {person && <PersonPropertyBox person={person} />}
+          <PropertyBox extraPadding={true}>
+            <EditableFieldMutationContext.Provider
+              value={useUpdateOnePersonMutation}
+            >
+              <EditableFieldEntityIdContext.Provider value={person.id}>
+                {personShowFieldDefinition.map((fieldDefinition) => {
+                  return (
+                    <EditableFieldDefinitionContext.Provider
+                      value={fieldDefinition}
+                      key={fieldDefinition.id}
+                    >
+                      <GenericEditableField />
+                    </EditableFieldDefinitionContext.Provider>
+                  );
+                })}
+              </EditableFieldEntityIdContext.Provider>
+            </EditableFieldMutationContext.Provider>
+          </PropertyBox>
        </ShowPageLeftContainer>
        <ShowPageRightContainer>
          <Timeline
-            entity={{ id: person?.id ?? '', type: CommentableType.Person }}
+            entity={{ id: person.id ?? '', type: CommentableType.Person }}
          />
        </ShowPageRightContainer>
      </ShowPageContainer>
--- a/front/src/pages/people/constants/personShowFieldDefinition.tsx
+++ b/front/src/pages/people/constants/personShowFieldDefinition.tsx
@ -0,0 +1,69 @@
+import { FieldDefinition } from '@/ui/editable-field/types/FieldDefinition';
+import {
+  FieldDateMetadata,
+  FieldMetadata,
+  FieldPhoneMetadata,
+  FieldRelationMetadata,
+  FieldTextMetadata,
+} from '@/ui/editable-field/types/FieldMetadata';
+import {
+  IconBuildingSkyscraper,
+  IconCalendar,
+  IconMail,
+  IconMap,
+  IconPhone,
+} from '@/ui/icon';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
+
+export const personShowFieldDefinition: FieldDefinition<FieldMetadata>[] = [
+  {
+    id: 'email',
+    label: 'Email',
+    icon: <IconMail />,
+    type: 'text',
+    metadata: {
+      fieldName: 'email',
+      placeHolder: 'Email',
+    },
+  } satisfies FieldDefinition<FieldTextMetadata>,
+  {
+    id: 'phone',
+    label: 'Phone',
+    icon: <IconPhone />,
+    type: 'phone',
+    metadata: {
+      fieldName: 'phone',
+      placeHolder: 'Phone',
+    },
+  } satisfies FieldDefinition<FieldPhoneMetadata>,
+  {
+    id: 'createdAt',
+    label: 'Created at',
+    icon: <IconCalendar />,
+    type: 'date',
+    metadata: {
+      fieldName: 'createdAt',
+    },
+  } satisfies FieldDefinition<FieldDateMetadata>,
+  {
+    id: 'company',
+    label: 'Company',
+    icon: <IconBuildingSkyscraper />,
+    type: 'relation',
+    metadata: {
+      fieldName: 'company',
+      relationType: Entity.Company,
+      useEditButton: true,
+    },
+  } satisfies FieldDefinition<FieldRelationMetadata>,
+  {
+    id: 'city',
+    label: 'City',
+    icon: <IconMap />,
+    type: 'text',
+    metadata: {
+      fieldName: 'city',
+      placeHolder: 'City',
+    },
+  } satisfies FieldDefinition<FieldTextMetadata>,
+];