diff --git a/src/webparts/requestPortal/forms/PaymentRequest/sections/AmountsSection.tsx b/src/webparts/requestPortal/forms/PaymentRequest/sections/AmountsSection.tsx index e840795..eb1482c 100644 --- a/src/webparts/requestPortal/forms/PaymentRequest/sections/AmountsSection.tsx +++ b/src/webparts/requestPortal/forms/PaymentRequest/sections/AmountsSection.tsx @@ -2,15 +2,18 @@ import * as React from 'react'; import styles from './PaymentSections.module.scss'; import { FormField, TextInput, TextArea } from '../../../shared/ui'; import { formatAmount, overLimitAmount, previousPaymentsTotal } from '../amounts'; -import { FORM_ID, ISectionProps } from '../model'; -import { routeUrl } from '../../../shared/routing'; +import { IPreviousPayment, ISectionProps } from '../model'; import { AmountInput } from './AmountInput'; +import { RequestDrawer } from './RequestDrawer'; /** * Суммы платежа. Сумма всех оплат по СТ (прежние заявки + эта) не может превышать * общую сумму СТ — при превышении сумма оплаты подсвечивается, отправку это не блокирует. */ -export const AmountsSection: React.FC = ({ data, set }) => { +export const AmountsSection: React.FC = ({ data, set, context }) => { + // Прежняя заявка, открытая в панели справа; undefined — панель закрыта. + const [opened, setOpened] = React.useState(undefined); + const close = React.useCallback(() => setOpened(undefined), []); const over = overLimitAmount(data); const previousTotal = previousPaymentsTotal(data.PreviousPayments); @@ -61,14 +64,9 @@ export const AmountsSection: React.FC = ({ data, set }) => { {p.id ? ( - + ) : ( p.code )} @@ -87,6 +85,9 @@ export const AmountsSection: React.FC = ({ data, set }) => { )} + {opened && opened.id && ( + + )} ); }; diff --git a/src/webparts/requestPortal/forms/PaymentRequest/sections/PaymentSections.module.scss b/src/webparts/requestPortal/forms/PaymentRequest/sections/PaymentSections.module.scss index 8db7f96..37d98da 100644 --- a/src/webparts/requestPortal/forms/PaymentRequest/sections/PaymentSections.module.scss +++ b/src/webparts/requestPortal/forms/PaymentRequest/sections/PaymentSections.module.scss @@ -110,6 +110,11 @@ } .link { + padding: 0; + border: 0; + background: none; + font: inherit; + cursor: pointer; color: $navy-700; font-weight: 600; text-decoration: underline; diff --git a/src/webparts/requestPortal/forms/PaymentRequest/sections/RequestDrawer.tsx b/src/webparts/requestPortal/forms/PaymentRequest/sections/RequestDrawer.tsx new file mode 100644 index 0000000..b4d9c23 --- /dev/null +++ b/src/webparts/requestPortal/forms/PaymentRequest/sections/RequestDrawer.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import type { WebPartContext } from '@microsoft/sp-webpart-base'; +import { Drawer } from '../../../components/Drawer/Drawer'; +import { Spinner } from '@tnsu/ui-kit'; +import portalStyles from '../../../components/RequestPortal.module.scss'; +import { FORM_ID } from '../model'; + +// Лениво: ApproveFeature через реестр просмотров тянет PaymentRequestView, а тот — +// эту же секцию. Статический импорт замкнул бы цикл модулей. +const ApproveFeature = React.lazy(() => import(/* webpackChunkName: 'approve-feature' */ '../../../features/approve/ApproveFeature')); + +interface IRequestDrawerProps { + context: WebPartContext; + itemId: number; + /** Партиция, где лежит заявка; '' — текущая. */ + listId: string; + code: string; + onClose: () => void; +} + +/** + * Прежняя заявка на оплату в выезжающей панели — той же, что у таблиц портала. + * Открываем её здесь, а не переходом на rpmode=approve: смена маршрута + * пересоздала бы открытую форму, и всё введённое пропало бы. + * + * Через портал в body: форма сама бывает открыта в панели (черновик), а + * fixed-слой внутри неё ограничивался бы её рамками. Корневой класс портала + * возвращает шрифт и цвет, которые в body не наследуются. + */ +export const RequestDrawer: React.FC = ({ context, itemId, listId, code, onClose }) => + ReactDOM.createPortal( +
+ + }> + + + +
, + document.body + );