Feat(crm): Add a type for contact phone numbers

marmelab · Jul 25, 2024 · ed38e78 · ed38e78
1 parent 717a638
commit ed38e78
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 23 deletions.
diff --git a/examples/crm/src/contacts/ContactAside.tsx b/examples/crm/src/contacts/ContactAside.tsx
@@ -66,33 +66,31 @@ export const ContactAside = ({ link = 'edit' }: { link?: 'edit' | 'show' }) => {
                     />
                 </Stack>
             )}
-            {record.phone_number1 && (
+            {record.phone_number1.number && (
                 <Stack direction="row" alignItems="center" gap={1}>
                     <PhoneIcon color="disabled" fontSize="small" />
                     <Box>
-                        <TextField source="phone_number1" />{' '}
-                        <Typography
-                            variant="body2"
-                            color="textSecondary"
-                            component="span"
-                        >
-                            Work
-                        </Typography>
+                        <TextField source="phone_number1.number" />{' '}
+                        {record.phone_number1.type !== 'Other' && (
+                            <TextField
+                                source="phone_number1.type"
+                                color="textSecondary"
+                            />
+                        )}
                     </Box>
                 </Stack>
             )}
-            {record.phone_number2 && (
+            {record.phone_number2.number && (
                 <Stack direction="row" alignItems="center" gap={1}>
                     <PhoneIcon color="disabled" fontSize="small" />
                     <Box>
-                        <TextField source="phone_number2" />{' '}
-                        <Typography
-                            variant="body2"
-                            color="textSecondary"
-                            component="span"
-                        >
-                            Home
-                        </Typography>
+                        <TextField source="phone_number2.number" />{' '}
+                        {record.phone_number2.type !== 'Other' && (
+                            <TextField
+                                source="phone_number2.type"
+                                color="textSecondary"
+                            />
+                        )}
                     </Box>
                 </Stack>
             )}

diff --git a/examples/crm/src/contacts/ContactInputs.tsx b/examples/crm/src/contacts/ContactInputs.tsx
@@ -42,7 +42,7 @@ export const ContactInputs = () => {
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
     return (
-        <Stack gap={8} p={1}>
+        <Stack gap={4} p={1}>
             <Stack gap={2}>
                 <Avatar />
                 <Stack gap={4} flexDirection={isMobile ? 'column' : 'row'}>
@@ -141,8 +141,34 @@ const ContactPersonalInformationInputs = () => {
         <Stack gap={1} flex={1}>
             <Typography variant="h6">Personal info</Typography>
             <TextInput source="email" helperText={false} validate={email()} />
-            <TextInput source="phone_number1" helperText={false} />
-            <TextInput source="phone_number2" helperText={false} />
+            <Stack gap={1} flexDirection="row">
+                <TextInput
+                    source="phone_number1.number"
+                    label="Phone number 1"
+                    helperText={false}
+                />
+                <SelectInput
+                    source="phone_number1.type"
+                    label="Type"
+                    helperText={false}
+                    optionText={choice => choice.id}
+                    choices={[{ id: 'Work' }, { id: 'Home' }, { id: 'Other' }]}
+                />
+            </Stack>
+            <Stack gap={1} flexDirection="row">
+                <TextInput
+                    source="phone_number2.number"
+                    label="Phone number 2"
+                    helperText={false}
+                />
+                <SelectInput
+                    source="phone_number2.type"
+                    label="Type"
+                    helperText={false}
+                    optionText={choice => choice.id}
+                    choices={[{ id: 'Work' }, { id: 'Home' }, { id: 'Other' }]}
+                />
+            </Stack>
             <TextInput
                 source="linkedin_url"
                 label="Linkedin URL"

diff --git a/examples/crm/src/dataGenerator/contacts.ts b/examples/crm/src/dataGenerator/contacts.ts
@@ -66,8 +66,14 @@ export const generateContacts = (db: Db): Contact[] => {
             company_id: company.id,
             company_name: company.name,
             email,
-            phone_number1: phone.phoneNumber(),
-            phone_number2: phone.phoneNumber(),
+            phone_number1: {
+                number: phone.phoneNumber(),
+                type: random.arrayElement(['Work', 'Home', 'Other']),
+            },
+            phone_number2: {
+                number: phone.phoneNumber(),
+                type: random.arrayElement(['Work', 'Home', 'Other']),
+            },
             background: lorem.sentence(),
             acquisition: random.arrayElement(['inbound', 'outbound']),
             avatar,

diff --git a/examples/crm/src/types.ts b/examples/crm/src/types.ts
@@ -56,6 +56,8 @@ export interface Contact extends RaRecord {
     nb_notes: number;
     status: string;
     background: string;
+    phone_number1: { number: string; type: 'Work' | 'Home' | 'Other' };
+    phone_number2: { number: string; type: 'Work' | 'Home' | 'Other' };
 }
 
 export interface ContactNote extends RaRecord {