1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| import React, { useState, useRef, useEffect, useMemo } from "react";
| import {
| CreateBase,
| useTranslate,
| TextInput,
| NumberInput,
| BooleanInput,
| DateInput,
| SaveButton,
| SelectInput,
| Toolbar,
| required,
| useDataProvider,
| useNotify,
| Form,
| useCreateController,
| } from 'react-admin';
| import {
| Dialog,
| DialogActions,
| DialogContent,
| DialogTitle,
| Stack,
| Grid,
| Box,
| } from '@mui/material';
| import DialogCloseButton from "../components/DialogCloseButton";
| import StatusSelectInput from "../components/StatusSelectInput";
| import MemoInput from "../components/MemoInput";
|
| const TenantCreate = (props) => {
| const { open, setOpen } = props;
|
| const translate = useTranslate();
| const notify = useNotify();
|
| const handleClose = (event, reason) => {
| if (reason !== "backdropClick") {
| setOpen(false);
| }
| };
|
| const handleSuccess = async (data) => {
| setOpen(false);
| notify('common.response.success');
| };
|
| const handleError = async (error) => {
| notify(error.message || 'common.response.fail', { type: 'error', messageArgs: { _: error.message } });
| };
|
| return (
| <>
| <CreateBase
| record={{}}
| transform={(data) => {
| return data;
| }}
| mutationOptions={{ onSuccess: handleSuccess, onError: handleError }}
| >
| <Dialog
| open={open}
| onClose={handleClose}
| aria-labelledby="form-dialog-title"
| fullWidth
| disableRestoreFocus
| maxWidth="md" // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
| >
| <Form>
| <DialogTitle id="form-dialog-title" sx={{
| position: 'sticky',
| top: 0,
| backgroundColor: 'background.paper',
| zIndex: 1000
| }}
| >
| {translate('create.title')}
| <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1001 }}>
| <DialogCloseButton onClose={handleClose} />
| </Box>
| </DialogTitle>
| <DialogContent>
| <Grid container rowSpacing={2} columnSpacing={2}>
| <Grid item xs={6} display="flex" gap={1}>
| <TextInput
| label="table.field.tenant.name"
| source="name"
| parse={v => v}
| autoFocus
| validate={required()}
| />
| </Grid>
|
| <Grid item xs={6} display="flex" gap={1}>
| <StatusSelectInput />
| </Grid>
| <Grid item xs={12} display="flex" gap={1}>
| <Stack direction="column" spacing={1} width={'100%'}>
| <MemoInput />
| </Stack>
| </Grid>
| </Grid>
| </DialogContent>
| <DialogActions sx={{ position: 'sticky', bottom: 0, backgroundColor: 'background.paper', zIndex: 1000 }}>
| <Toolbar sx={{ width: '100%', justifyContent: 'space-between' }} >
| <SaveButton />
| </Toolbar>
| </DialogActions>
| </Form>
| </Dialog>
| </CreateBase>
| </>
| )
| }
|
| export default TenantCreate;
|
|
