Feat(crm): Add ImageCropField for Company

marmelab · Jul 29, 2024 · 53ceba0 · 53ceba0
1 parent bf0dc47
commit 53ceba0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 35 deletions.
diff --git a/examples/crm/src/companies/CompanyInputs.tsx b/examples/crm/src/companies/CompanyInputs.tsx
@@ -12,10 +12,11 @@ import {
     SimpleFormIterator,
     TextInput,
     required,
+    useRecordContext,
 } from 'react-admin';
 import { isLinkedinUrl } from '../misc/isLinkedInUrl';
 import { useConfigurationContext } from '../root/ConfigurationContext';
-import { Sale } from '../types';
+import { Company, Sale } from '../types';
 import { sizes } from './sizes';
 import ImageEditorField from '../misc/ImageEditorField';
 
@@ -62,13 +63,15 @@ export const CompanyInputs = () => {
 };
 
 const CompanyDisplayInputs = () => {
+    const record = useRecordContext<Company>();
     return (
         <Stack gap={2} flex={1} direction="row">
             <ImageEditorField
                 source="logo.src"
                 type="avatar"
                 width={60}
                 height={60}
+                emptyText={record?.name.charAt(0)}
             />
             <TextInput source="name" validate={required()} helperText={false} />
         </Stack>

diff --git a/examples/crm/src/misc/ImageEditorField.tsx b/examples/crm/src/misc/ImageEditorField.tsx
@@ -24,10 +24,6 @@ const ImageEditorField = (props: ImageEditorFieldProps) => {
     const imageUrl = getValues(props.source);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
-    if (!imageUrl) {
-        return null;
-    }
-
     const commonProps = {
         src: imageUrl,
         onClick: () => setIsDialogOpen(true),
@@ -43,7 +39,7 @@ const ImageEditorField = (props: ImageEditorFieldProps) => {
         <div style={{ position: 'relative', display: 'inline-block' }}>
             <Tooltip title="Update image" followCursor>
                 {props.type === 'avatar' ? (
-                    <Avatar {...commonProps} />
+                    <Avatar {...commonProps}>{props.emptyText}</Avatar>
                 ) : (
                     <Box component={'img'} {...commonProps} />
                 )}

diff --git a/examples/crm/src/settings/SettingsPage.tsx b/examples/crm/src/settings/SettingsPage.tsx
@@ -128,16 +128,6 @@ const SettingsForm = ({
                     <Typography variant="h5" color="textSecondary">
                         My info
                     </Typography>
-                    <Button
-                        variant="text"
-                        size="small"
-                        startIcon={
-                            isEditMode ? <VisibilityIcon /> : <EditIcon />
-                        }
-                        onClick={() => setEditMode(!isEditMode)}
-                    >
-                        {isEditMode ? 'Show' : 'Edit'}
-                    </Button>
                 </Stack>
                 <Stack gap={1} mb={2}>
                     <ImageEditorField
@@ -149,24 +139,30 @@ const SettingsForm = ({
                     <TextRender source="last_name" isEditMode={isEditMode} />
                     <TextRender source="email" isEditMode={isEditMode} />
                 </Stack>
-                <Button
-                    variant="outlined"
-                    onClick={handleClickOpenPasswordChange}
-                >
-                    Change password
-                </Button>
-                <UpdatePassword
-                    open={openPasswordChange}
-                    setOpen={setOpenPasswordChange}
-                />
+                {!isEditMode && (
+                    <>
+                        <Button
+                            variant="outlined"
+                            onClick={handleClickOpenPasswordChange}
+                        >
+                            Change password
+                        </Button>
+                        <UpdatePassword
+                            open={openPasswordChange}
+                            setOpen={setOpenPasswordChange}
+                        />
+                    </>
+                )}
             </CardContent>
-            {isEditMode && (
-                <CardActions
-                    sx={{
-                        paddingX: 2,
-                        background: theme => theme.palette.background.default,
-                    }}
-                >
+
+            <CardActions
+                sx={{
+                    paddingX: 2,
+                    background: theme => theme.palette.background.default,
+                    justifyContent: isEditMode ? 'space-between' : 'flex-end',
+                }}
+            >
+                {isEditMode && (
                     <Button
                         variant="contained"
                         type="submit"
@@ -175,8 +171,16 @@ const SettingsForm = ({
                     >
                         Save
                     </Button>
-                </CardActions>
-            )}
+                )}
+                <Button
+                    variant="text"
+                    size="small"
+                    startIcon={isEditMode ? <VisibilityIcon /> : <EditIcon />}
+                    onClick={() => setEditMode(!isEditMode)}
+                >
+                    {isEditMode ? 'Show' : 'Edit'}
+                </Button>
+            </CardActions>
         </Card>
     );
 };