fix: поля заявки на оплату занимают всю ширину секции
Тело CollapseSection из ui-kit уже сетка в две колонки, а поля были завёрнуты ещё в один FormGrid и попадали в половину первой колонки. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import styles from './PaymentSections.module.scss';
|
import styles from './PaymentSections.module.scss';
|
||||||
import { FormGrid, FormField, TextInput, TextArea } from '../../../shared/ui';
|
import { FormField, TextInput, TextArea } from '../../../shared/ui';
|
||||||
import { formatAmount, overLimitAmount, previousPaymentsTotal } from '../amounts';
|
import { formatAmount, overLimitAmount, previousPaymentsTotal } from '../amounts';
|
||||||
import { ISectionProps } from '../model';
|
import { ISectionProps } from '../model';
|
||||||
import { AmountInput } from './AmountInput';
|
import { AmountInput } from './AmountInput';
|
||||||
@@ -15,7 +15,6 @@ export const AmountsSection: React.FC<ISectionProps> = ({ data, set }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<FormGrid>
|
|
||||||
<FormField label="Общая сумма" htmlFor="TotalAmount">
|
<FormField label="Общая сумма" htmlFor="TotalAmount">
|
||||||
<AmountInput id="TotalAmount" value={data.TotalAmount} onChange={(v) => set('TotalAmount', v)} />
|
<AmountInput id="TotalAmount" value={data.TotalAmount} onChange={(v) => set('TotalAmount', v)} />
|
||||||
</FormField>
|
</FormField>
|
||||||
@@ -42,11 +41,10 @@ export const AmountsSection: React.FC<ISectionProps> = ({ data, set }) => {
|
|||||||
<FormField label="Комментарий" htmlFor="Comment" full>
|
<FormField label="Комментарий" htmlFor="Comment" full>
|
||||||
<TextArea id="Comment" value={data.Comment} onChange={(v) => set('Comment', v)} rows={2} />
|
<TextArea id="Comment" value={data.Comment} onChange={(v) => set('Comment', v)} rows={2} />
|
||||||
</FormField>
|
</FormField>
|
||||||
</FormGrid>
|
|
||||||
|
|
||||||
<h4>Заявки на оплату по этому основанию</h4>
|
<h4 className={styles.fullRow}>Заявки на оплату по этому основанию</h4>
|
||||||
{data.PreviousPayments.length === 0 ? (
|
{data.PreviousPayments.length === 0 ? (
|
||||||
<div className={styles.empty}>Ранее заявок на оплату по этому основанию не было.</div>
|
<div className={`${styles.empty} ${styles.fullRow}`}>Ранее заявок на оплату по этому основанию не было.</div>
|
||||||
) : (
|
) : (
|
||||||
<div className={styles.tableWrap}>
|
<div className={styles.tableWrap}>
|
||||||
<table className={styles.table}>
|
<table className={styles.table}>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Alert, FormGrid, FormField, Select, ISelectOption } from '../../../shared/ui';
|
import { Alert, FormField, Select, ISelectOption } from '../../../shared/ui';
|
||||||
|
import styles from './PaymentSections.module.scss';
|
||||||
import { ICompany, ProjectPicker, getCompanies } from '../../../shared/dictionary';
|
import { ICompany, ProjectPicker, getCompanies } from '../../../shared/dictionary';
|
||||||
import { BASIS_OPTIONS, BasisKind, ISectionProps } from '../model';
|
import { BASIS_OPTIONS, BasisKind, ISectionProps } from '../model';
|
||||||
import { IBasisSelection } from '../useBasisSelection';
|
import { IBasisSelection } from '../useBasisSelection';
|
||||||
@@ -43,7 +44,6 @@ export const BasisSection: React.FC<IBasisSectionProps> = ({ data, patch, contex
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<FormGrid>
|
|
||||||
<FormField label="Основание" htmlFor="BasisKind" required>
|
<FormField label="Основание" htmlFor="BasisKind" required>
|
||||||
<Select id="BasisKind" value={data.BasisKind} onChange={handleKindChange} options={KIND_OPTIONS} />
|
<Select id="BasisKind" value={data.BasisKind} onChange={handleKindChange} options={KIND_OPTIONS} />
|
||||||
</FormField>
|
</FormField>
|
||||||
@@ -80,9 +80,8 @@ export const BasisSection: React.FC<IBasisSectionProps> = ({ data, patch, contex
|
|||||||
placeholder="Выберите компанию…"
|
placeholder="Выберите компанию…"
|
||||||
/>
|
/>
|
||||||
</FormField>
|
</FormField>
|
||||||
</FormGrid>
|
{basis.loading && <div className={styles.fullRow}><Alert variant="info">Загружаем данные основания…</Alert></div>}
|
||||||
{basis.loading && <Alert variant="info">Загружаем данные основания…</Alert>}
|
{basis.error && <div className={styles.fullRow}><Alert variant="err">{basis.error}</Alert></div>}
|
||||||
{basis.error && <Alert variant="err">{basis.error}</Alert>}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import styles from './PaymentSections.module.scss';
|
import styles from './PaymentSections.module.scss';
|
||||||
import { FormGrid, FormField, TextInput, TextArea } from '../../../shared/ui';
|
import { FormField, TextInput, TextArea } from '../../../shared/ui';
|
||||||
import {
|
import {
|
||||||
DictionaryPicker,
|
DictionaryPicker,
|
||||||
getCashFlowGroups,
|
getCashFlowGroups,
|
||||||
@@ -25,7 +25,7 @@ export const PaymentSection: React.FC<ISectionProps> = ({ data, set, patch, cont
|
|||||||
const accountFilter = { companyId: data.CompanyId, projectId: data.ProjectId };
|
const accountFilter = { companyId: data.CompanyId, projectId: data.ProjectId };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormGrid>
|
<>
|
||||||
<FormField label="Банковский счёт" htmlFor="BankAccountName" required>
|
<FormField label="Банковский счёт" htmlFor="BankAccountName" required>
|
||||||
<DictionaryPicker
|
<DictionaryPicker
|
||||||
id="BankAccountName"
|
id="BankAccountName"
|
||||||
@@ -99,6 +99,6 @@ export const PaymentSection: React.FC<ISectionProps> = ({ data, set, patch, cont
|
|||||||
<FormField label="Условия оплаты" htmlFor="PaymentTerms">
|
<FormField label="Условия оплаты" htmlFor="PaymentTerms">
|
||||||
<TextArea id="PaymentTerms" value={data.PaymentTerms} onChange={(v) => set('PaymentTerms', v)} rows={2} />
|
<TextArea id="PaymentTerms" value={data.PaymentTerms} onChange={(v) => set('PaymentTerms', v)} rows={2} />
|
||||||
</FormField>
|
</FormField>
|
||||||
</FormGrid>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -102,3 +102,9 @@
|
|||||||
color: $gray-500;
|
color: $gray-500;
|
||||||
font-size: $fs-sm;
|
font-size: $fs-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Тело CollapseSection из ui-kit — сетка в две колонки; всё не-поле растягиваем на обе.
|
||||||
|
.fullRow {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user