From 22e37b6e36d2fd8a18a365fd730ba04b2e8449f3 Mon Sep 17 00:00:00 2001
From: "gorbenko.pavel" <gorbenko.pavel@tansu.kz>
Date: Wed, 28 Oct 2026 10:17:53 +0500
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=BF=D1=80=D0=B5=D0=B6=D0=BD=D1=8F?=
 =?UTF-8?q?=D1=8F=20=D0=B7=D0=B0=D1=8F=D0=B2=D0=BA=D0=B0=20=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=BB=D0=B0=D1=82=D1=83=20=D0=BE=D1=82=D0=BA=D1=80?=
 =?UTF-8?q?=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D0=B2=20=D0=BF?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8=20=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B0,=20=D0=B0=20=D0=BD=D0=B5=20=D0=B2=20=D0=BD=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=B9=20=D0=B2=D0=BA=D0=BB=D0=B0=D0=B4=D0=BA=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../sections/AmountsSection.tsx               | 21 +++++-----
 .../sections/PaymentSections.module.scss      |  5 +++
 .../PaymentRequest/sections/RequestDrawer.tsx | 41 +++++++++++++++++++
 3 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 src/webparts/requestPortal/forms/PaymentRequest/sections/RequestDrawer.tsx

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<ISectionProps> = ({ data, set }) => {
+export const AmountsSection: React.FC<ISectionProps> = ({ data, set, context }) => {
+  // Прежняя заявка, открытая в панели справа; undefined — панель закрыта.
+  const [opened, setOpened] = React.useState<IPreviousPayment | undefined>(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<ISectionProps> = ({ data, set }) => {
                 <tr key={p.code}>
                   <td>
                     {p.id ? (
-                      <a
-                        className={styles.link}
-                        href={routeUrl({ mode: 'approve', nav: 'new', formKey: FORM_ID, itemId: p.id, listId: p.listId || undefined })}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
+                      <button type="button" className={styles.link} onClick={() => setOpened(p)}>
                         {p.code}
-                      </a>
+                      </button>
                     ) : (
                       p.code
                     )}
@@ -87,6 +85,9 @@ export const AmountsSection: React.FC<ISectionProps> = ({ data, set }) => {
           </table>
         </div>
       )}
+      {opened && opened.id && (
+        <RequestDrawer context={context} itemId={opened.id} listId={opened.listId || ''} code={opened.code} onClose={close} />
+      )}
     </>
   );
 };
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<IRequestDrawerProps> = ({ context, itemId, listId, code, onClose }) =>
+  ReactDOM.createPortal(
+    <div className={portalStyles.requestPortal}>
+      <Drawer title={`Заявка №${code}`} onClose={onClose}>
+        <React.Suspense fallback={<Spinner block label="Загружаем заявку…" />}>
+          <ApproveFeature context={context} formKey={FORM_ID} itemId={itemId} listId={listId || undefined} />
+        </React.Suspense>
+      </Drawer>
+    </div>,
+    document.body
+  );