Панель со списками заявок (#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/features/submit/SubmitFeature.module.scss

@@ -1,16 +1,16 @@
 @import '../../../../styles/design-tokens';
 
-// Центрированная колонка контента. 1080px — ширина контента из дизайн-системы
-// (как .sec в референсе): форма и плитки читаются аккуратно, не растягиваясь.
+// Колонка контента. 1080px — ширина контента из дизайн-системы (как .sec в
+// референсе): форма и плитки читаются аккуратно, не растягиваясь. Прижата
+// влево (без margin: auto), иначе на широком экране между боковым меню и
+// формой появлялась пустая полоса, а вкладки категорий сверху шли шире формы.
 .content {
   width: 100%;
   max-width: 1080px;
-  margin: 0 auto;
 }
 
 // ── Заглушка формы (до появления реальных форм) ──
 .formPlaceholder {
-  margin-top: $sp-6;
   padding: $sp-8;
   background: $white;
   border: 1px solid $gray-200;
@@ -44,7 +44,6 @@
 }
 
 .loading {
-  margin-top: $sp-6;
   padding: $sp-8;
   color: $gray-500;
   font-size: $fs-sm;

src/webparts/requestPortal/features/submit/SubmitFeature.tsx

@@ -1,41 +1,40 @@
 import * as React from 'react';
-import { useState, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import type { WebPartContext } from '@microsoft/sp-webpart-base';
 import styles from './SubmitFeature.module.scss';
 import { Icon } from '../../shared/ui/Icon/Icon';
-import { CategoryTabs } from '../../components/CategoryTabs/CategoryTabs';
 import { RequestGrid } from '../../components/RequestGrid/RequestGrid';
-import { CATEGORIES, DEFAULT_CATEGORY_ID } from '../../data/categories';
 import { getRequestsByCategory, REQUEST_TYPES } from '../../data/requests';
 import { getFormComponent } from '../../forms/registry';
 import { IRequestType } from '../../models/types';
+import { emitRequestsChanged } from '../../shared/requestEvents';
 
 export interface ISubmitFeatureProps {
   context: WebPartContext;
+  /** Активная категория. Вкладки теперь рендерятся на уровне портала (RequestPortal),
+   * чтобы оставаться на экране и в режиме согласования — эта фича их только слушает. */
+  activeCategoryId: string;
   /** Открыть сразу форму с предзаполнением (производная заявка), минуя плитки. */
   initialForm?: { formKey: string; sourceId: number };
 }
 
-// Фича «Подать заявку»: категории → плитки → беспоук-форма.
+// Фича «Подать заявку»: плитки → беспоук-форма (категории/вкладки — в RequestPortal).
 // Владелец: автор портала. Живёт целиком в features/submit/**.
-const SubmitFeature: React.FC<ISubmitFeatureProps> = ({ context, initialForm }) => {
+const SubmitFeature: React.FC<ISubmitFeatureProps> = ({ context, activeCategoryId, initialForm }) => {
   // Если пришли по ссылке «создать на основе» — сразу открываем нужную форму.
   const initialSelected = useMemo(
     () => (initialForm ? REQUEST_TYPES.filter((r) => r.id === initialForm.formKey)[0] ?? null : null),
     [initialForm]
   );
 
-  const [activeCategoryId, setActiveCategoryId] = useState<string>(
-    initialSelected ? initialSelected.categoryId : DEFAULT_CATEGORY_ID
-  );
   const [selectedRequest, setSelectedRequest] = useState<IRequestType | null>(initialSelected);
 
-  const requests = getRequestsByCategory(activeCategoryId);
+  // Смена категории (вкладка сверху) — возвращаемся к списку плиток.
+  useEffect(() => {
+    setSelectedRequest((prev) => (prev && prev.categoryId !== activeCategoryId ? null : prev));
+  }, [activeCategoryId]);
 
-  const handleCategoryChange = (categoryId: string): void => {
-    setActiveCategoryId(categoryId);
-    setSelectedRequest(null); // при смене категории возвращаемся к списку плиток
-  };
+  const requests = getRequestsByCategory(activeCategoryId);
 
   const handleBack = (): void => setSelectedRequest(null);
 
@@ -62,19 +61,19 @@ const SubmitFeature: React.FC<ISubmitFeatureProps> = ({ context, initialForm })
     // Ленивый рендер формы: её код подтягивается только сейчас, при открытии.
     return (
       <React.Suspense fallback={<div className={styles.loading}>Загрузка формы…</div>}>
-        <FormComponent requestType={request} context={context} onCancel={handleBack} sourceId={sourceId} />
+        <FormComponent
+          requestType={request}
+          context={context}
+          onCancel={handleBack}
+          onSaved={emitRequestsChanged}
+          sourceId={sourceId}
+        />
       </React.Suspense>
     );
   };
 
   return (
     <div className={styles.content}>
-      <CategoryTabs
-        categories={CATEGORIES}
-        activeId={activeCategoryId}
-        onChange={handleCategoryChange}
-      />
-
       {selectedRequest ? (
         renderSelected(selectedRequest)
       ) : (