| import React, { useState, useRef, useEffect, useMemo } from "react"; | 
| import { | 
|     Edit, | 
|     SimpleForm, | 
|     FormDataConsumer, | 
|     useTranslate, | 
|     TextInput, | 
|     NumberInput, | 
|     BooleanInput, | 
|     DateInput, | 
|     SaveButton, | 
|     SelectInput, | 
|     Toolbar, | 
|     Labeled, | 
|     NumberField, | 
|     required, | 
|     useRecordContext, | 
|     DeleteButton, | 
| } from 'react-admin'; | 
| import { useWatch, useFormContext } from "react-hook-form"; | 
| import { Stack, Grid, Box, Typography } from '@mui/material'; | 
| import * as Common from '@/utils/common'; | 
| import { EDIT_MODE } from '@/config/setting'; | 
| import EditBaseAside from "@/page/components/EditBaseAside"; | 
| import CustomerTopToolBar from "@/page/components/EditTopToolBar"; | 
| import MemoInput from "@/page/components/MemoInput"; | 
| import StatusSelectInput from "@/page/components/StatusSelectInput"; | 
|   | 
| const FormToolbar = () => { | 
|     const { getValues } = useFormContext(); | 
|   | 
|     return ( | 
|         <Toolbar sx={{ justifyContent: 'space-between' }}> | 
|             <SaveButton /> | 
|             <DeleteButton mutationMode="optimistic" /> | 
|         </Toolbar> | 
|     ) | 
| } | 
|   | 
| const RoleEdit = () => { | 
|     const translate = useTranslate(); | 
|   | 
|     return ( | 
|         <Edit | 
|             redirect="list" | 
|             mutationMode={EDIT_MODE} | 
|             actions={<CustomerTopToolBar />} | 
|             aside={<EditBaseAside />} | 
|         > | 
|             <SimpleForm | 
|                 shouldUnregister | 
|                 warnWhenUnsavedChanges | 
|                 toolbar={<FormToolbar />} | 
|                 mode="onTouched" | 
|                 defaultValues={{}} | 
|                 // validate={(values) => { }} | 
|             > | 
|                 <Grid container width={{ xs: '100%', xl: '80%' }} rowSpacing={3} columnSpacing={3}> | 
|                     <Grid item xs={12} md={8}> | 
|                         <Typography variant="h6" gutterBottom> | 
|                             {translate('common.edit.title.main')} | 
|                         </Typography> | 
|                         <Stack direction='row' gap={2}> | 
|                             <TextInput | 
|                                 label="table.field.role.name" | 
|                                 source="name" | 
|                                 parse={v => v} | 
|                                 autoFocus | 
|                                 validate={required()} | 
|                             /> | 
|                         </Stack> | 
|                         <Stack direction='row' gap={2}> | 
|                             <TextInput | 
|                                 label="table.field.role.code" | 
|                                 source="code" | 
|                                 parse={v => v} | 
|                             /> | 
|                         </Stack> | 
|   | 
|                     </Grid> | 
|                     <Grid item xs={12} md={4}> | 
|                         <Typography variant="h6" gutterBottom> | 
|                             {translate('common.edit.title.common')} | 
|                         </Typography> | 
|                         <StatusSelectInput /> | 
|                         <Box mt="2em" /> | 
|                         <MemoInput /> | 
|                     </Grid> | 
|                 </Grid> | 
|             </SimpleForm> | 
|         </Edit > | 
|     ) | 
| } | 
|   | 
| export default RoleEdit; |