Панель со списками заявок (#1)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/1
Co-authored-by: gorbenko.pavel <gorbenko.pavel@tnsu.kz>
Co-committed-by: gorbenko.pavel <gorbenko.pavel@tnsu.kz>

src/webparts/requestPortal/components/RequestPortal.tsx

@@ -2,41 +2,123 @@ import * as React from 'react';
 import styles from './RequestPortal.module.scss';
 import type { IRequestPortalProps } from './IRequestPortalProps';
 import { IconSprite } from '../shared/ui/Icon/IconSprite';
-import { parseRoute } from '../shared/routing';
+import { navigate, useRoute, NavSection } from '../shared/routing';
+import { onRequestsChanged } from '../shared/requestEvents';
+import { SideNav } from './SideNav/SideNav';
+import { Drawer } from './Drawer/Drawer';
+import { CategoryTabs } from './CategoryTabs/CategoryTabs';
+import { CATEGORIES, DEFAULT_CATEGORY_ID } from '../data/categories';
+import { REQUEST_TYPES } from '../data/requests';
 import SubmitFeature from '../features/submit/SubmitFeature';
 import ApproveFeature from '../features/approve/ApproveFeature';
+import { RequestsTableView } from '../features/myRequests/RequestsTableView';
+import { getPendingApproval } from '../features/myRequests/myRequests.service';
 
-// Оболочка портала. Логики фич тут нет — файл общий, меняется редко.
-// Роутинг по URL: mode=approve&type=&id= → фича согласования, иначе — подача.
+// Оболочка портала: тёмное боковое меню (разделы) + основная область.
+// Логики фич тут нет — файл общий, меняется редко.
 //
-// Панель «Мои заявки» (features/myRequests) готова как компонент, но НЕ смонтирована —
-// её подключает второй разработчик, когда наполнит. Для этого:
-//   1) import MyRequestsPanel from '../features/myRequests/MyRequestsPanel';
-//   2) обернуть контент подачи в <div className={styles.layout}> с двумя колонками:
-//        <main className={styles.main}><SubmitFeature .../></main>
-//        <div className={styles.side}><MyRequestsPanel context={context} /></div>
-//   (классы layout/main/side уже есть в RequestPortal.module.scss)
+// Разделы (rpnav): 'new' — подача заявки (вкладки категорий + плитки + форма),
+// 'approvals'/'own' — таблицы заявок. Клик по строке таблицы открывает заявку
+// в выезжающей панели ПОВЕРХ раздела (rpmode=approve&rptype=&rpid=), поэтому
+// раздел под ней сохраняется; та же ссылка приходит из потока Power Automate.
 const RequestPortal: React.FC<IRequestPortalProps> = ({ hasTeamsContext, context }) => {
   const rootClasses = [styles.requestPortal, hasTeamsContext ? styles.teams : '']
     .filter(Boolean)
     .join(' ');
 
-  const route = parseRoute();
+  const route = useRoute();
+  const [navCollapsed, setNavCollapsed] = React.useState<boolean>(false);
+  const [approvalsCount, setApprovalsCount] = React.useState<number | undefined>(undefined);
+
+  const [activeCategoryId, setActiveCategoryId] = React.useState<string>(() => {
+    if (route.mode === 'create' && route.formKey) {
+      const found = REQUEST_TYPES.filter((r) => r.id === route.formKey)[0];
+      if (found) return found.categoryId;
+    }
+    return DEFAULT_CATEGORY_ID;
+  });
+
+  // Счётчик на пункте «На согласовании». Обновляется по тому же событию, что и
+  // сами таблицы (создание заявки, решение согласующего).
+  React.useEffect(() => {
+    let cancelled = false;
+
+    const load = (): void => {
+      getPendingApproval(context)
+        .then((r) => {
+          if (!cancelled) setApprovalsCount(r.rows.length);
+        })
+        .catch(() => {
+          if (!cancelled) setApprovalsCount(undefined);
+        });
+    };
+
+    load();
+    const unsubscribe = onRequestsChanged(load);
+    return () => {
+      cancelled = true;
+      unsubscribe();
+    };
+  }, [context]);
+
+  const goto = (nav: NavSection): void => navigate({ mode: 'submit', nav });
+  const closeDrawer = (): void => navigate({ mode: 'submit', nav: route.nav });
 
   return (
     <section className={rootClasses}>
       <IconSprite />
-      {route.mode === 'approve' && route.formKey && route.itemId ? (
-        <ApproveFeature context={context} formKey={route.formKey} itemId={route.itemId} />
-      ) : (
-        <SubmitFeature
-          context={context}
-          initialForm={
-            route.mode === 'create' && route.formKey && route.sourceId
-              ? { formKey: route.formKey, sourceId: route.sourceId }
-              : undefined
-          }
-        />
+      <div className={styles.layout}>
+        <div className={styles.side}>
+          <SideNav
+            activeId={route.nav}
+            onChange={goto}
+            approvalsCount={approvalsCount}
+            collapsed={navCollapsed}
+            onToggleCollapsed={() => setNavCollapsed((v) => !v)}
+          />
+        </div>
+
+        <main className={styles.main}>
+          {route.nav === 'new' ? (
+            <>
+              <div className={styles.tabsWrap}>
+                <CategoryTabs
+                  categories={CATEGORIES}
+                  activeId={activeCategoryId}
+                  onChange={setActiveCategoryId}
+                />
+              </div>
+              <SubmitFeature
+                context={context}
+                activeCategoryId={activeCategoryId}
+                initialForm={
+                  route.mode === 'create' && route.formKey && route.sourceId
+                    ? { formKey: route.formKey, sourceId: route.sourceId }
+                    : undefined
+                }
+              />
+            </>
+          ) : (
+            <RequestsTableView
+              context={context}
+              kind={route.nav === 'approvals' ? 'approvals' : 'own'}
+              onOpen={(request) =>
+                navigate({
+                  mode: 'approve',
+                  nav: route.nav,
+                  formKey: request.formKey,
+                  itemId: request.id,
+                })
+              }
+            />
+          )}
+        </main>
+      </div>
+
+      {route.mode === 'approve' && route.formKey && route.itemId && (
+        <Drawer title={`Заявка №${route.itemId}`} onClose={closeDrawer}>
+          <ApproveFeature context={context} formKey={route.formKey} itemId={route.itemId} />
+        </Drawer>
       )}
     </section>
   );