import React from 'react';
|
import { Stack, TextField } from '@mui/material';
|
import {
|
AutocompleteInput,
|
FormDataConsumer,
|
ReferenceInput,
|
SelectInput,
|
required,
|
useTranslate,
|
} from 'react-admin';
|
import { REFERENCE_INPUT_PAGESIZE } from '@/config/setting';
|
import { DEFAULT_SCOPE_TYPE, SCOPE_OPTIONS, getScopeConfig } from './guaranteeConstants';
|
|
const ScopeField = () => {
|
const translate = useTranslate();
|
|
return (
|
<Stack spacing={2} sx={{ width: '100%' }}>
|
<SelectInput
|
label="table.field.guarantee.scopeType"
|
source="scopeType"
|
choices={SCOPE_OPTIONS}
|
optionText={(choice) => translate(choice.labelKey)}
|
optionValue="id"
|
translateChoice={false}
|
defaultValue={DEFAULT_SCOPE_TYPE}
|
helperText={translate('page.guarantee.scope.helper')}
|
validate={[required()]}
|
/>
|
<FormDataConsumer>
|
{({ formData, ...rest }) => {
|
const currentType = formData.scopeType || DEFAULT_SCOPE_TYPE;
|
const config = getScopeConfig(currentType);
|
|
if (config.valueType === 'reference') {
|
return (
|
<ReferenceInput
|
key={currentType}
|
source="scopeValue"
|
reference={config.reference}
|
perPage={REFERENCE_INPUT_PAGESIZE}
|
{...rest}
|
>
|
<AutocompleteInput
|
label="table.field.guarantee.scopeValue"
|
optionText={config.optionText}
|
optionValue={config.optionValue || 'id'}
|
filterToQuery={config.filterToQuery}
|
validate={[required()]}
|
fullWidth
|
/>
|
</ReferenceInput>
|
);
|
}
|
|
return (
|
<TextField
|
label={translate('table.field.guarantee.scopeValue')}
|
value={translate('page.guarantee.scope.globalHelper')}
|
helperText={translate('page.guarantee.scope.globalTip')}
|
disabled
|
fullWidth
|
/>
|
);
|
}}
|
</FormDataConsumer>
|
</Stack>
|
);
|
};
|
|
export default ScopeField;
|
