Merge pull request #10096 from marmelab/fix/crm-company-contacts

Fix(crm): Add create contact button to company even if there is no contacts attached to it
marmelab · Jul 29, 2024 · f8d615a · f8d615a
2 parents 7e2268f + 3c7298b
commit f8d615a
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 44 deletions.
diff --git a/examples/crm/src/companies/CompanyShow.tsx b/examples/crm/src/companies/CompanyShow.tsx
@@ -85,15 +85,15 @@ const CompanyShowContent = () => {
                             textColor="primary"
                             onChange={handleTabChange}
                         >
-                            {record.nb_contacts && (
-                                <Tab
-                                    label={
-                                        record.nb_contacts === 1
-                                            ? '1 Contact'
-                                            : `${record.nb_contacts} Contacts`
-                                    }
-                                />
-                            )}
+                            <Tab
+                                label={
+                                    !record.nb_contacts
+                                        ? 'No Contacts'
+                                        : record.nb_contacts === 1
+                                          ? '1 Contact'
+                                          : `${record.nb_contacts} Contacts`
+                                }
+                            />
                             {record.nb_deals && (
                                 <Tab
                                     label={
@@ -107,32 +107,33 @@ const CompanyShowContent = () => {
                             <Tab label="Activity Log" />
                         </Tabs>
                         <Divider />
-                        {record.nb_contacts ? (
-                            <TabPanel value={tabValue} index={tabIndex++}>
-                                <ReferenceManyField
-                                    reference="contacts"
-                                    target="company_id"
-                                    sort={{ field: 'last_name', order: 'ASC' }}
+
+                        <TabPanel value={tabValue} index={tabIndex++}>
+                            <ReferenceManyField
+                                reference="contacts"
+                                target="company_id"
+                                sort={{ field: 'last_name', order: 'ASC' }}
+                            >
+                                <Stack
+                                    direction="row"
+                                    justifyContent="flex-end"
+                                    spacing={2}
+                                    mt={1}
                                 >
-                                    <Stack
-                                        direction="row"
-                                        justifyContent="flex-end"
-                                        spacing={2}
-                                        mt={1}
-                                    >
+                                    {!!record.nb_contacts && (
                                         <SortButton
                                             fields={[
                                                 'last_name',
                                                 'first_name',
                                                 'last_seen',
                                             ]}
                                         />
-                                        <CreateRelatedContactButton />
-                                    </Stack>
-                                    <ContactsIterator />
-                                </ReferenceManyField>
-                            </TabPanel>
-                        ) : null}
+                                    )}
+                                    <CreateRelatedContactButton />
+                                </Stack>
+                                <ContactsIterator />
+                            </ReferenceManyField>
+                        </TabPanel>
                         {record.nb_deals ? (
                             <TabPanel value={tabValue} index={tabIndex++}>
                                 <ReferenceManyField

diff --git a/examples/crm/src/contacts/Avatar.tsx b/examples/crm/src/contacts/Avatar.tsx
@@ -9,7 +9,11 @@ export const Avatar = (props: {
     height?: number;
 }) => {
     const record = useRecordContext<Contact>(props);
-    if (!record) return null;
+    // If we come from company page, the record is defined (to pass the company as a prop),
+    // but neither of those fields are and this lead to an error when creating contact.
+    if (!record?.avatar && !record?.first_name && !record?.last_name) {
+        return null;
+    }
 
     return (
         <MuiAvatar
@@ -20,8 +24,8 @@ export const Avatar = (props: {
                 fontSize: props.height ? '0.6rem' : undefined,
             }}
         >
-            {record.first_name.charAt(0)}
-            {record.last_name.charAt(0)}
+            {record.first_name?.charAt(0)}
+            {record.last_name?.charAt(0)}
         </MuiAvatar>
     );
 };
diff --git a/examples/crm/src/dataProvider.ts b/examples/crm/src/dataProvider.ts
@@ -158,6 +158,23 @@ const dataProviderWithCustomMethod = {
 
 export type CustomDataProvider = typeof dataProviderWithCustomMethod;
 
+async function updateCompany(
+    companyId: Identifier,
+    updateFn: (company: Company) => Partial<Company>
+) {
+    const { data: company } = await dataProvider.getOne<Company>('companies', {
+        id: companyId,
+    });
+
+    return await dataProvider.update('companies', {
+        id: companyId,
+        data: {
+            ...updateFn(company),
+        },
+        previousData: company,
+    });
+}
+
 export const dataProvider = withLifecycleCallbacks(
     dataProviderWithCustomMethod,
     [
@@ -258,9 +275,23 @@ export const dataProvider = withLifecycleCallbacks(
             beforeCreate: async (params, dataProvider) => {
                 return processContactAvatar(params, dataProvider);
             },
+            afterCreate: async result => {
+                await updateCompany(result.data.company_id, company => ({
+                    nb_contacts: (company.nb_contacts ?? 0) + 1,
+                }));
+
+                return result;
+            },
             beforeUpdate: async params => {
                 return processContactAvatar(params, dataProvider);
             },
+            afterDelete: async result => {
+                await updateCompany(result.data.company_id, company => ({
+                    nb_contacts: (company.nb_contacts ?? 1) - 1,
+                }));
+
+                return result;
+            },
         } satisfies ResourceCallbacks<Contact>,
         {
             resource: 'contactNotes',
@@ -424,20 +455,10 @@ export const dataProvider = withLifecycleCallbacks(
                     },
                 };
             },
-            afterCreate: async (result, dataProvider) => {
-                const { data: company } = await dataProvider.getOne<Company>(
-                    'companies',
-                    {
-                        id: result.data.company_id,
-                    }
-                );
-                await dataProvider.update('companies', {
-                    id: company.id,
-                    data: {
-                        nb_deals: (company.nb_deals ?? 0) + 1,
-                    },
-                    previousData: company,
-                });
+            afterCreate: async result => {
+                await updateCompany(result.data.company_id, company => ({
+                    nb_deals: (company.nb_deals ?? 0) + 1,
+                }));
 
                 return result;
             },
@@ -450,6 +471,13 @@ export const dataProvider = withLifecycleCallbacks(
                     },
                 };
             },
+            afterDelete: async result => {
+                await updateCompany(result.data.company_id, company => ({
+                    nb_deals: (company.nb_deals ?? 1) - 1,
+                }));
+
+                return result;
+            },
         } satisfies ResourceCallbacks<Deal>,
     ]
 );