fix: Filter the timePeriod options based on the userType parameter #1739 (#2657)

### What problem does this PR solve?

fix: Filter the timePeriod options based on the userType parameter #1739

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
- [ ] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):
This commit is contained in:
balibabu 2024-09-29 15:40:20 +08:00 committed by GitHub
parent 3f16377412
commit 5a8ae4a289
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,6 @@
import { useTranslate } from '@/hooks/common-hooks'; import { useTranslate } from '@/hooks/common-hooks';
import { Form, Input, Select } from 'antd'; import { Form, Input, Select } from 'antd';
import { useMemo } from 'react'; import { useCallback, useMemo } from 'react';
import { import {
QWeatherLangOptions, QWeatherLangOptions,
QWeatherTimePeriodOptions, QWeatherTimePeriodOptions,
@ -32,12 +32,19 @@ const QWeatherForm = ({ onValuesChange, form }: IOperatorForm) => {
})); }));
}, [t]); }, [t]);
const qWeatherTimePeriodOptions = useMemo(() => { const getQWeatherTimePeriodOptions = useCallback(
return QWeatherTimePeriodOptions.map((x) => ({ (userType: string) => {
value: x, let options = QWeatherTimePeriodOptions;
label: t(`qWeatherTimePeriodOptions.${x}`), if (userType === 'free') {
})); options = options.slice(0, 3);
}, [t]); }
return options.map((x) => ({
value: x,
label: t(`qWeatherTimePeriodOptions.${x}`),
}));
},
[t],
);
return ( return (
<Form <Form
@ -60,11 +67,15 @@ const QWeatherForm = ({ onValuesChange, form }: IOperatorForm) => {
<Form.Item label={t('userType')} name={'user_type'}> <Form.Item label={t('userType')} name={'user_type'}>
<Select options={qWeatherUserTypeOptions}></Select> <Select options={qWeatherUserTypeOptions}></Select>
</Form.Item> </Form.Item>
<Form.Item noStyle dependencies={['type']}> <Form.Item noStyle dependencies={['type', 'user_type']}>
{({ getFieldValue }) => {({ getFieldValue }) =>
getFieldValue('type') === 'weather' && ( getFieldValue('type') === 'weather' && (
<Form.Item label={t('timePeriod')} name={'time_period'}> <Form.Item label={t('timePeriod')} name={'time_period'}>
<Select options={qWeatherTimePeriodOptions}></Select> <Select
options={getQWeatherTimePeriodOptions(
getFieldValue('user_type'),
)}
></Select>
</Form.Item> </Form.Item>
) )
} }