скелет готов

src/webparts/requestPortal/components/RequestPortal.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './RequestPortal.module.scss';
 import type { IRequestPortalProps } from './IRequestPortalProps';
 import { IconSprite } from '../shared/ui/Icon/IconSprite';
-import { navigate, useRoute, NavSection } from '../shared/routing';
+import { navigate, useRoute, NavSection, OwnTab } from '../shared/routing';
 import { onRequestsChanged, emitRequestsChanged } from '../shared/requestEvents';
 import { confirmDiscardFormChanges, markFormClean, markFormDirty } from '../shared/unsavedChanges';
 import { SideNav } from './SideNav/SideNav';
@@ -13,9 +13,10 @@ import { REQUEST_TYPES } from '../data/requests';
 import SubmitFeature from '../features/submit/SubmitFeature';
 import ApproveFeature from '../features/approve/ApproveFeature';
 import EditFeature from '../features/edit/EditFeature';
-import { RequestsTableView } from '../features/myRequests/RequestsTableView';
+import { ListView, RequestsTableView } from '../features/myRequests/RequestsTableView';
+import { OwnTabs } from '../features/myRequests/OwnTabs';
 import { SearchView } from '../features/myRequests/SearchView';
-import { getPendingApproval } from '../features/myRequests/myRequests.service';
+import { getNavCounts, INavCounts } from '../features/myRequests/myRequests.service';
 import { IMyRequest } from '../features/myRequests/models/IMyRequest';
 import { isEditableStatus } from '../shared/approval';
 
@@ -26,6 +27,16 @@ import { isEditableStatus } from '../shared/approval';
 // 'approvals'/'own' — таблицы заявок. Клик по строке таблицы открывает заявку
 // в выезжающей панели ПОВЕРХ раздела (rpmode=approve&rptype=&rpid=), поэтому
 // раздел под ней сохраняется; та же ссылка приходит из потока Power Automate.
+// Разделы, которые показывают таблицу заявок, и соответствующее ей
+// представление. У 'own' оно зависит ещё и от подвкладки (см. ниже), поэтому
+// здесь стоит заглушка — важен сам факт наличия ключа.
+const LIST_VIEWS: Partial<Record<NavSection, ListView>> = {
+  approvals: 'approvals',
+  execution: 'execution',
+  rework: 'rework',
+  own: 'own:created',
+};
+
 const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context }) => {
   const rootClasses = [styles.requestPortal, hasTeamsContext ? styles.teams : '']
     .filter(Boolean)
@@ -33,7 +44,7 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
 
   const route = useRoute();
   const [navCollapsed, setNavCollapsed] = React.useState<boolean>(false);
-  const [approvalsCount, setApprovalsCount] = React.useState<number | undefined>(undefined);
+  const [navCounts, setNavCounts] = React.useState<INavCounts | undefined>(undefined);
 
   const [activeCategoryId, setActiveCategoryId] = React.useState<string>(() => {
     if (route.mode === 'create' && route.formKey) {
@@ -43,22 +54,21 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
     return DEFAULT_CATEGORY_ID;
   });
 
-  // Счётчик на пункте «На согласовании». Обновляется по тому же событию, что и
-  // сами таблицы (создание заявки, решение согласующего), и на монтировании
-  // (в т.ч. на обновление страницы). Когда сама вкладка «На согласовании»
-  // открыта, RequestsTableView сообщает точное число через onMyTurnCountChange
-  // (ниже) — это перезаписывает значение отсюда, чтобы не было гонки между
-  // двумя независимыми запросами одних и тех же данных.
+  // Счётчики на пунктах-очередях («На согласовании», «На исполнении»,
+  // «Доработка»). Обновляются по тому же событию, что и сами таблицы (создание
+  // заявки, решение согласующего), и на монтировании (в т.ч. на обновление
+  // страницы). Все три приходят из одного вызова getNavCounts — он же следит,
+  // чтобы цифры не разошлись с содержимым вкладок.
   React.useEffect(() => {
     let cancelled = false;
 
     const load = (): void => {
-      getPendingApproval(context)
-        .then((r) => {
-          if (!cancelled) setApprovalsCount(r.totalRows);
+      getNavCounts(context)
+        .then((c) => {
+          if (!cancelled) setNavCounts(c);
         })
         .catch(() => {
-          if (!cancelled) setApprovalsCount(undefined);
+          if (!cancelled) setNavCounts(undefined);
         });
     };
 
@@ -100,8 +110,28 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
     // таблица на него подписана и перечитает данные фоном, не убирая с экрана
     // текущие строки (см. RequestsTableView/SearchView).
     if (nav === route.nav && route.mode === 'submit') emitRequestsChanged();
-    navigate({ mode: 'submit', nav });
+    // Возврат в «Мои заявки» открывает ту же подвкладку и с тем же фильтром,
+    // что были в прошлый раз, — иначе уход в другой раздел и обратно сбрасывал
+    // бы выбор пользователя.
+    navigate(
+      nav === 'own'
+        ? { mode: 'submit', nav, ownTab: route.ownTab, ownStatus: route.ownStatus }
+        : { mode: 'submit', nav }
+    );
   };
+
+  const gotoOwnTab = (ownTab: OwnTab): void =>
+    // Фильтр по статусу относится только к «Инициированным» — на других
+    // подвкладках отбор задаёт сама вкладка, поэтому фильтр туда не тащим.
+    navigate({
+      mode: 'submit',
+      nav: 'own',
+      ownTab,
+      ownStatus: ownTab === 'created' ? route.ownStatus : undefined,
+    });
+
+  const setOwnStatus = (ownStatus: string): void =>
+    navigate({ mode: 'submit', nav: 'own', ownTab: 'created', ownStatus: ownStatus || undefined });
   // Клик по строке таблицы. СВОЯ заявка в незавершённом статусе (черновик,
   // возвращённая, отклонённая) открывается на редактирование, всё остальное —
   // на просмотр: чужую заявку править нельзя, а свою уже ушедшую по маршруту —
@@ -112,9 +142,14 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
       nav: route.nav,
       formKey: request.formKey,
       itemId: request.id,
+      ownTab: route.ownTab,
+      ownStatus: route.ownStatus,
     });
 
-  const closeDrawer = (): void => navigate({ mode: 'submit', nav: route.nav });
+  // Закрывая панель, возвращаемся ровно в тот список, из которого её открыли —
+  // включая подвкладку и фильтр «Моих заявок».
+  const closeDrawer = (): void =>
+    navigate({ mode: 'submit', nav: route.nav, ownTab: route.ownTab, ownStatus: route.ownStatus });
 
   // Закрытие панели РЕДАКТИРОВАНИЯ: там открыта форма, и её содержимое живёт
   // только в памяти — уходя без сохранения, пользователь теряет правки.
@@ -132,7 +167,11 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
           <SideNav
             activeId={route.nav}
             onChange={goto}
-            approvalsCount={approvalsCount}
+            counts={{
+              approvals: navCounts?.approvals,
+              execution: navCounts?.execution,
+              rework: navCounts?.rework,
+            }}
             collapsed={navCollapsed}
             onToggleCollapsed={() => setNavCollapsed((v) => !v)}
           />
@@ -185,12 +224,21 @@ const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context
             />
           )}
 
-          {(route.nav === 'approvals' || route.nav === 'own') && (
+          {route.nav === 'own' && (
+            <OwnTabs activeId={route.ownTab ?? 'created'} onChange={gotoOwnTab} />
+          )}
+
+          {LIST_VIEWS[route.nav] !== undefined && (
             <RequestsTableView
               context={context}
-              kind={route.nav === 'approvals' ? 'approvals' : 'own'}
+              view={
+                route.nav === 'own'
+                  ? (`own:${route.ownTab ?? 'created'}` as ListView)
+                  : (LIST_VIEWS[route.nav] as ListView)
+              }
+              statusFilter={route.ownStatus ?? ''}
+              onStatusFilterChange={setOwnStatus}
               onOpen={openRequest}
-              onMyTurnCountChange={route.nav === 'approvals' ? setApprovalsCount : undefined}
             />
           )}
         </main>