@@ -423,10 +423,11 @@ import {
423
423
SelectField ,
424
424
SelectInput ,
425
425
SimpleForm ,
426
+ TextField ,
426
427
TextInput ,
427
428
useRecordContext ,
428
429
} from ' react-admin' ;
429
- import { EditDialog } from ' @react-admin/ra-form-layout' ;
430
+ import { CreateDialog } from ' @react-admin/ra-form-layout' ;
430
431
431
432
const sexChoices = [
432
433
{ id: ' male' , name: ' Male' },
@@ -445,19 +446,37 @@ const CustomerForm = (props: any) => (
445
446
const EmployerSimpleFormWithFullyControlledDialogs = () => {
446
447
const record = useRecordContext ();
447
448
448
- const [isEditDialogOpen, setIsEditDialogOpen ] = useState (false );
449
- const openEditDialog = useCallback (() => {
450
- setIsEditDialogOpen (true );
449
+ const [isCreateDialogOpen, setIsCreateDialogOpen ] = useState (false );
450
+ const openCreateDialog = useCallback (() => {
451
+ setIsCreateDialogOpen (true );
451
452
}, []);
452
- const closeEditDialog = useCallback (() => {
453
- setIsEditDialogOpen (false );
453
+ const closeCreateDialog = useCallback (() => {
454
+ setIsCreateDialogOpen (false );
454
455
}, []);
455
456
456
457
return (
457
458
<SimpleForm >
458
459
<TextInput source = " name" validate = { required ()} />
459
460
<TextInput source = " address" validate = { required ()} />
460
461
<TextInput source = " city" validate = { required ()} />
462
+ <Button
463
+ label = " Create a new customer"
464
+ onClick = { () => openCreateDialog ()}
465
+ size = " medium"
466
+ variant = " contained"
467
+ sx = { { mb: 4 }}
468
+ />
469
+ <CreateDialog
470
+ fullWidth
471
+ maxWidth = " md"
472
+ record = { { employer_id: record ?.id }} // pre-populates the employer_id to link the new customer to the current employer
473
+ isOpen = { isCreateDialogOpen }
474
+ open = { openCreateDialog }
475
+ close = { closeCreateDialog }
476
+ resource = " customers"
477
+ >
478
+ <CustomerForm />
479
+ </CreateDialog >
461
480
<ReferenceManyField
462
481
label = " Customers"
463
482
reference = " customers"
@@ -471,28 +490,8 @@ const EmployerSimpleFormWithFullyControlledDialogs = () => {
471
490
<DataTable.Col source = " sex" >
472
491
<SelectField source = " sex" choices = { sexChoices } />
473
492
</DataTable.Col >
474
- <DataTable.Col >
475
- <Button
476
- label = " Edit customer"
477
- onClick = { () => openEditDialog ()}
478
- size = " medium"
479
- variant = " contained"
480
- sx = { { mb: 4 }}
481
- />
482
- <DataTable.Col >
483
493
</DataTable >
484
494
</ReferenceManyField >
485
- <EditDialog
486
- fullWidth
487
- maxWidth = " md"
488
- record = { { employer_id: record ?.id }} // pre-populates the employer_id to link the new customer to the current employer
489
- isOpen = { isEditDialogOpen }
490
- open = { openEditDialog }
491
- close = { closeEditDialog }
492
- resource = " customers"
493
- >
494
- <CustomerForm />
495
- </EditDialog >
496
495
</SimpleForm >
497
496
);
498
497
};
0 commit comments