parvki
This commit is contained in:
54CHA
@ -112,6 +112,19 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
||||
onAdd,
|
||||
onCancel,
|
||||
}) => {
|
||||
// Состояния для отображения ошибок валидации
|
||||
const [validationErrors, setValidationErrors] = React.useState({
|
||||
inn: false,
|
||||
shortName: false,
|
||||
jurAddress: false,
|
||||
form: false,
|
||||
taxSystem: false,
|
||||
});
|
||||
|
||||
// Функция для очистки ошибки при изменении поля
|
||||
const clearError = (field: keyof typeof validationErrors) => {
|
||||
setValidationErrors(prev => ({ ...prev, [field]: false }));
|
||||
};
|
||||
const [createLegalEntity, { loading: createLoading }] = useMutation(CREATE_CLIENT_LEGAL_ENTITY, {
|
||||
onCompleted: () => {
|
||||
console.log('Юридическое лицо создано');
|
||||
@ -137,29 +150,27 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
||||
const loading = createLoading || updateLoading;
|
||||
|
||||
const handleSave = async () => {
|
||||
// Валидация
|
||||
if (!inn || inn.length < 10) {
|
||||
alert('Введите корректный ИНН');
|
||||
return;
|
||||
}
|
||||
// Сброс предыдущих ошибок
|
||||
setValidationErrors({
|
||||
inn: false,
|
||||
shortName: false,
|
||||
jurAddress: false,
|
||||
form: false,
|
||||
taxSystem: false,
|
||||
});
|
||||
|
||||
if (!shortName.trim()) {
|
||||
alert('Введите краткое наименование');
|
||||
return;
|
||||
}
|
||||
// Валидация с установкой ошибок
|
||||
const errors = {
|
||||
inn: !inn || inn.length < 10,
|
||||
shortName: !shortName.trim(),
|
||||
jurAddress: !jurAddress.trim(),
|
||||
form: form === 'Выбрать',
|
||||
taxSystem: taxSystem === 'Выбрать',
|
||||
};
|
||||
|
||||
if (!jurAddress.trim()) {
|
||||
alert('Введите юридический адрес');
|
||||
return;
|
||||
}
|
||||
|
||||
if (form === 'Выбрать') {
|
||||
alert('Выберите форму организации');
|
||||
return;
|
||||
}
|
||||
|
||||
if (taxSystem === 'Выбрать') {
|
||||
alert('Выберите систему налогообложения');
|
||||
// Если есть ошибки, устанавливаем их и прерываем выполнение
|
||||
if (Object.values(errors).some(error => error)) {
|
||||
setValidationErrors(errors);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -238,13 +249,18 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
||||
<div className="flex flex-wrap gap-5 items-start w-full whitespace-nowrap max-md:max-w-full">
|
||||
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
||||
<div className="text-gray-950">ИНН</div>
|
||||
<div className="gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid border-stone-300 min-h-[46px] max-md:px-5">
|
||||
<div className={`gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid min-h-[46px] max-md:px-5 ${
|
||||
validationErrors.inn ? 'border-red-500' : 'border-stone-300'
|
||||
}`}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="ИНН"
|
||||
className="w-full bg-transparent outline-none text-gray-600"
|
||||
value={inn}
|
||||
onChange={e => setInn(e.target.value)}
|
||||
onChange={e => {
|
||||
setInn(e.target.value);
|
||||
clearError('inn');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -252,7 +268,9 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
||||
<div className="text-gray-950">Форма</div>
|
||||
<div className="relative mt-1.5">
|
||||
<div
|
||||
className="flex gap-10 justify-between items-center px-6 py-3.5 w-full bg-white rounded border border-solid border-stone-300 min-h-[46px] text-neutral-500 max-md:px-5 cursor-pointer select-none"
|
||||
className={`flex gap-10 justify-between items-center px-6 py-3.5 w-full bg-white rounded border border-solid min-h-[46px] text-neutral-500 max-md:px-5 cursor-pointer select-none ${
|
||||
validationErrors.form ? 'border-red-500' : 'border-stone-300'
|
||||
}`}
|
||||
onClick={() => setIsFormOpen((prev: boolean) => !prev)}
|
||||
tabIndex={0}
|
||||
onBlur={() => setIsFormOpen(false)}
|
||||
@ -266,7 +284,11 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
||||
<li
|
||||
key={option}
|
||||
className={`px-6 py-3.5 cursor-pointer hover:bg-blue-100 ${option === form ? 'bg-blue-50 font-semibold' : ''}`}
|
||||
onMouseDown={() => { setForm(option); setIsFormOpen(false); }}
|
||||
onMouseDown={() => {
|
||||
setForm(option);
|
||||
setIsFormOpen(false);
|
||||
clearError('form');
|
||||
}}
|
||||
>
|
||||
{option}
|
||||
</li>
|
||||
@ -303,25 +325,35 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
||||
<div className="flex flex-wrap gap-5 items-start mt-5 w-full max-md:max-w-full">
|
||||
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
||||
<div className="text-gray-950">Юридический адрес</div>
|
||||
<div className="gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid border-stone-300 min-h-[46px] text-neutral-500 max-md:px-5">
|
||||
<div className={`gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid min-h-[46px] text-neutral-500 max-md:px-5 ${
|
||||
validationErrors.jurAddress ? 'border-red-500' : 'border-stone-300'
|
||||
}`}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Юридический адрес"
|
||||
className="w-full bg-transparent outline-none text-neutral-500"
|
||||
value={jurAddress}
|
||||
onChange={e => setJurAddress(e.target.value)}
|
||||
onChange={e => {
|
||||
setJurAddress(e.target.value);
|
||||
clearError('jurAddress');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col flex-1 shrink basis-0 min-w-[240px]">
|
||||
<div className="text-gray-950">Краткое наименование</div>
|
||||
<div className="gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid border-stone-300 min-h-[46px] text-neutral-500 max-md:px-5">
|
||||
<div className={`gap-2.5 self-stretch px-6 py-3.5 mt-1.5 w-full bg-white rounded border border-solid min-h-[46px] text-neutral-500 max-md:px-5 ${
|
||||
validationErrors.shortName ? 'border-red-500' : 'border-stone-300'
|
||||
}`}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Краткое наименование"
|
||||
className="w-full bg-transparent outline-none text-neutral-500"
|
||||
value={shortName}
|
||||
onChange={e => setShortName(e.target.value)}
|
||||
onChange={e => {
|
||||
setShortName(e.target.value);
|
||||
clearError('shortName');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -355,7 +387,9 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
||||
<div className="text-gray-950">Система налогоблажения</div>
|
||||
<div className="relative mt-1.5">
|
||||
<div
|
||||
className="flex gap-10 justify-between items-center px-6 py-3.5 w-full whitespace-nowrap bg-white rounded border border-solid border-stone-300 min-h-[46px] text-neutral-500 max-md:px-5 cursor-pointer select-none"
|
||||
className={`flex gap-10 justify-between items-center px-6 py-3.5 w-full whitespace-nowrap bg-white rounded border border-solid min-h-[46px] text-neutral-500 max-md:px-5 cursor-pointer select-none ${
|
||||
validationErrors.taxSystem ? 'border-red-500' : 'border-stone-300'
|
||||
}`}
|
||||
onClick={() => setIsTaxSystemOpen((prev: boolean) => !prev)}
|
||||
tabIndex={0}
|
||||
onBlur={() => setIsTaxSystemOpen(false)}
|
||||
@ -369,7 +403,11 @@ const LegalEntityFormBlock: React.FC<LegalEntityFormBlockProps> = ({
|
||||
<li
|
||||
key={option}
|
||||
className={`px-6 py-3.5 cursor-pointer hover:bg-blue-100 ${option === taxSystem ? 'bg-blue-50 font-semibold' : ''}`}
|
||||
onMouseDown={() => { setTaxSystem(option); setIsTaxSystemOpen(false); }}
|
||||
onMouseDown={() => {
|
||||
setTaxSystem(option);
|
||||
setIsTaxSystemOpen(false);
|
||||
clearError('taxSystem');
|
||||
}}
|
||||
>
|
||||
{option}
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user