feat: added split print button

package-lock.json

@@ -17,7 +17,7 @@
         "@microsoft/sp-webpart-base": "1.22.1",
         "@pnp/sp": "^4.20.0",
         "@pnp/spfx-controls-react": "^3.25.0",
-        "@tnsu/ui-kit": "^0.9.0",
+        "@tnsu/ui-kit": "^0.12.0",
         "react": "17.0.1",
         "react-dom": "17.0.1",
         "tslib": "2.3.1"
@@ -9870,9 +9870,9 @@
       "license": "0BSD"
     },
     "node_modules/@tnsu/ui-kit": {
-      "version": "0.9.0",
+      "version": "0.12.0",
-      "resolved": "http://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/%40tnsu%2Fui-kit/-/0.9.0/ui-kit-0.9.0.tgz",
+      "resolved": "http://git.tnsu.kz/api/packages/timur.gorodetskiy/npm/%40tnsu%2Fui-kit/-/0.12.0/ui-kit-0.12.0.tgz",
-      "integrity": "sha512-q4eLdsAd0FW7Jem1sVazztuFrUQxdP72d6KwBa7L/6YKqJzB2PzdaZqUWaFkp7+qgtxhK9Zotx18PHjG2i5Zmw==",
+      "integrity": "sha512-lJYf2DoYaydrktbSotRNY0umeJlQw8Ekhh6fu1FGB0p+/TXTozpBfAs+TxK/mvOXlS9yYenEuGBi85fd/dRF2A==",
       "license": "ISC",
       "peerDependencies": {
         "@fluentui/react": "^8.106.4",

package.json

@@ -21,7 +21,7 @@
     "@microsoft/sp-webpart-base": "1.22.1",
     "@pnp/sp": "^4.20.0",
     "@pnp/spfx-controls-react": "^3.25.0",
-    "@tnsu/ui-kit": "^0.9.0",
+    "@tnsu/ui-kit": "^0.12.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "tslib": "2.3.1"

src/webparts/requestPortal/forms/Clearance/ClearanceView.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import type { WebPartContext } from '@microsoft/sp-webpart-base';
 import styles from './ClearanceView.module.scss';
-import { Alert, Button, FormCard, InitiatorLine, FormModeProvider, PrintButton, PrintOrgSelect, OrgLetterhead } from '../../shared/ui';
+import { Alert, Button, FormCard, InitiatorLine, FormModeProvider, PrintSplitButton, OrgLetterhead } from '../../shared/ui';
 import {
   ApproverService,
   DecisionPanel,
@@ -65,7 +65,7 @@ const ClearanceView: React.FC<IClearanceViewProps> = ({ context, itemId, formKey
   const [lockedWriteOffs, setLockedWriteOffs] = useState<Set<string>>(new Set());
   const [saveState, setSaveState] = useState<SaveState>('idle');
   // Какая из организаций сотрудника (см. OrganizationField) идёт в печать —
-  // выбор в тулбаре через PrintOrgSelect, по умолчанию первая.
+  // выбор в тулбаре через PrintSplitButton, по умолчанию первая.
   const [printOrgIndex, setPrintOrgIndex] = useState<number>(0);
   const [saveErrorMessage, setSaveErrorMessage] = useState<string>('');
 
@@ -263,8 +263,7 @@ const ClearanceView: React.FC<IClearanceViewProps> = ({ context, itemId, formKey
   return (
     <div>
       <div className={`${styles.toolbar} rp-no-print`}>
-        <PrintOrgSelect value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
+        <PrintSplitButton value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
-        <PrintButton />
       </div>
 
       {canEditAnything && (

src/webparts/requestPortal/forms/Clearance/model.ts

@@ -124,7 +124,7 @@ export interface ISectionProps {
    * отдельный обработчик. Если не передан (режим чтения) — правка через set.
    */
   onEmployeeChange?: (login: string) => void;
-  /** Индекс организации для печати (см. shared/ui/PrintOrgSelect и OrganizationField.printIndex). */
+  /** Индекс организации для печати (см. shared/ui/PrintSplitButton и OrganizationField.printIndex). */
   printOrgIndex?: number;
 }
 

src/webparts/requestPortal/forms/Referral/ReferralView.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import type { WebPartContext } from '@microsoft/sp-webpart-base';
 import styles from './ReferralView.module.scss';
-import { Alert, FormCard, InitiatorLine, FormModeProvider, PrintButton, PrintOrgSelect, OrgLetterhead } from '../../shared/ui';
+import { Alert, FormCard, InitiatorLine, FormModeProvider, PrintSplitButton, OrgLetterhead } from '../../shared/ui';
 import {
   ApproverService,
   DecisionPanel,
@@ -54,7 +54,7 @@ const ReferralView: React.FC<IReferralViewProps> = ({ context, itemId, formKey,
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   // Какая из организаций рекомендателя (см. OrganizationField) идёт в печать —
-  // выбор в тулбаре через PrintOrgSelect, по умолчанию первая.
+  // выбор в тулбаре через PrintSplitButton, по умолчанию первая.
   const [printOrgIndex, setPrintOrgIndex] = useState<number>(0);
 
   // listId уже проверен в ApproveFeature (не смонтировались бы сюда иначе) —
@@ -146,10 +146,7 @@ const ReferralView: React.FC<IReferralViewProps> = ({ context, itemId, formKey,
     <div>
       <div className={`${styles.toolbar} rp-no-print`}>
         {isApprovedStatus(status) && (
-          <>
+          <PrintSplitButton value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
-            <PrintOrgSelect value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
-            <PrintButton />
-          </>
         )}
       </div>
 

src/webparts/requestPortal/forms/Referral/model.ts

@@ -97,7 +97,7 @@ export interface ISectionProps {
    * обработчик. Если не передан (режим чтения) — правка через set.
    */
   onReferrerChange?: (login: string) => void;
-  /** Индекс организации для печати (см. shared/ui/PrintOrgSelect и OrganizationField.printIndex). */
+  /** Индекс организации для печати (см. shared/ui/PrintSplitButton и OrganizationField.printIndex). */
   printOrgIndex?: number;
 }
 

src/webparts/requestPortal/forms/TmcTransfer/TmcTransferView.tsx

@@ -11,8 +11,7 @@ import {
   CollapseSection,
   FormField,
   AttachmentList,
-  PrintButton,
+  PrintSplitButton,
-  PrintOrgSelect,
   OrgLetterhead,
   Icon
 } from '../../shared/ui';
@@ -62,7 +61,7 @@ const TmcTransferView: React.FC<ITmcTransferViewProps> = ({ context, itemId, for
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   // Какая из организаций заявителя (см. OrganizationField) идёт в печать —
-  // выбор в тулбаре через PrintOrgSelect, по умолчанию первая.
+  // выбор в тулбаре через PrintSplitButton, по умолчанию первая.
   const [printOrgIndex, setPrintOrgIndex] = useState<number>(0);
 
   const { id: requestTypeId } = useRequestTypeId(context, formKey);
@@ -159,8 +158,7 @@ const TmcTransferView: React.FC<ITmcTransferViewProps> = ({ context, itemId, for
             Редактировать
           </Button>
         )}
-        <PrintOrgSelect value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
+        <PrintSplitButton value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
-        <PrintButton />
       </div>
 
       <div className="rp-print-root">

src/webparts/requestPortal/forms/TmcTransfer/model.ts

@@ -66,7 +66,7 @@ export interface ISectionProps {
   data: IFormData;
   set: SetField;
   context: WebPartContext;
-  /** Индекс организации для печати (см. shared/ui/PrintOrgSelect и OrganizationField.printIndex). */
+  /** Индекс организации для печати (см. shared/ui/PrintSplitButton и OrganizationField.printIndex). */
   printOrgIndex?: number;
   /**
    * Выбор заявителя подтягивает его ФИО и организации — поэтому у поля отдельный

src/webparts/requestPortal/forms/UnpaidLeave/UnpaidLeaveView.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import type { WebPartContext } from '@microsoft/sp-webpart-base';
 import styles from './UnpaidLeaveView.module.scss';
-import { Alert, FormCard, InitiatorLine, FormModeProvider, PrintButton, PrintOrgSelect, OrgLetterhead } from '../../shared/ui';
+import { Alert, FormCard, InitiatorLine, FormModeProvider, PrintSplitButton, OrgLetterhead } from '../../shared/ui';
 import {
   ApproverService,
   DecisionPanel,
@@ -48,7 +48,7 @@ const UnpaidLeaveView: React.FC<IUnpaidLeaveViewProps> = ({ context, itemId, for
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   // Какая из организаций сотрудника (см. OrganizationField) идёт в печать —
-  // выбор в тулбаре через PrintOrgSelect, по умолчанию первая.
+  // выбор в тулбаре через PrintSplitButton, по умолчанию первая.
   const [printOrgIndex, setPrintOrgIndex] = useState<number>(0);
 
   // listId уже проверен в ApproveFeature (не смонтировались бы сюда иначе) —
@@ -121,8 +121,7 @@ const UnpaidLeaveView: React.FC<IUnpaidLeaveViewProps> = ({ context, itemId, for
   return (
     <div>
       <div className={`${styles.toolbar} rp-no-print`}>
-        <PrintOrgSelect value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
+        <PrintSplitButton value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
-        <PrintButton />
       </div>
 
       <div className="rp-print-root">

src/webparts/requestPortal/forms/UnpaidLeave/model.ts

@@ -60,7 +60,7 @@ export interface ISectionProps {
    * отдельный обработчик. Если не передан (режим чтения) — правка через set.
    */
   onEmployeeChange?: (login: string) => void;
-  /** Индекс организации для печати (см. shared/ui/PrintOrgSelect и OrganizationField.printIndex). */
+  /** Индекс организации для печати (см. shared/ui/PrintSplitButton и OrganizationField.printIndex). */
   printOrgIndex?: number;
 }
 

src/webparts/requestPortal/forms/Vacation/VacationView.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import type { WebPartContext } from '@microsoft/sp-webpart-base';
 import styles from './VacationView.module.scss';
-import { Alert, FormCard, InitiatorLine, FormModeProvider, PrintButton, PrintOrgSelect, OrgLetterhead } from '../../shared/ui';
+import { Alert, FormCard, InitiatorLine, FormModeProvider, PrintSplitButton, OrgLetterhead } from '../../shared/ui';
 import {
   ApproverService,
   DecisionPanel,
@@ -48,7 +48,7 @@ const VacationView: React.FC<IVacationViewProps> = ({ context, itemId, formKey,
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   // Какая из организаций сотрудника (см. OrganizationField) идёт в печать —
-  // выбор в тулбаре через PrintOrgSelect, по умолчанию первая.
+  // выбор в тулбаре через PrintSplitButton, по умолчанию первая.
   const [printOrgIndex, setPrintOrgIndex] = useState<number>(0);
 
   // listId уже проверен в ApproveFeature (не смонтировались бы сюда иначе) —
@@ -121,8 +121,7 @@ const VacationView: React.FC<IVacationViewProps> = ({ context, itemId, formKey,
   return (
     <div>
       <div className={`${styles.toolbar} rp-no-print`}>
-        <PrintOrgSelect value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
+        <PrintSplitButton value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
-        <PrintButton />
       </div>
 
       <div className="rp-print-root">

src/webparts/requestPortal/forms/Vacation/model.ts

@@ -59,7 +59,7 @@ export interface ISectionProps {
    * отдельный обработчик. Если не передан (режим чтения) — правка через set.
    */
   onEmployeeChange?: (login: string) => void;
-  /** Индекс организации для печати (см. shared/ui/PrintOrgSelect и OrganizationField.printIndex). */
+  /** Индекс организации для печати (см. shared/ui/PrintSplitButton и OrganizationField.printIndex). */
   printOrgIndex?: number;
 }
 

src/webparts/requestPortal/forms/WorkplaceSetup/WorkplaceSetupView.tsx

@@ -11,8 +11,7 @@ import {
   CollapseSection,
   FormField,
   AttachmentList,
-  PrintButton,
+  PrintSplitButton,
-  PrintOrgSelect,
   OrgLetterhead,
   Icon
 } from '../../shared/ui';
@@ -68,7 +67,7 @@ const WorkplaceSetupView: React.FC<IWorkplaceSetupViewProps> = ({ context, itemI
   const [canEditFields, setCanEditFields] = useState<boolean>(false);
   const [saveState, setSaveState] = useState<SaveState>('idle');
   // Какая из организаций заявителя (см. OrganizationField) идёт в печать —
-  // выбор в тулбаре через PrintOrgSelect, по умолчанию первая.
+  // выбор в тулбаре через PrintSplitButton, по умолчанию первая.
   const [printOrgIndex, setPrintOrgIndex] = useState<number>(0);
 
   const { id: requestTypeId } = useRequestTypeId(context, formKey);
@@ -213,8 +212,7 @@ const WorkplaceSetupView: React.FC<IWorkplaceSetupViewProps> = ({ context, itemI
             Редактировать
           </Button>
         )}
-        <PrintOrgSelect value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
+        <PrintSplitButton value={data.Organization} selectedIndex={printOrgIndex} onChange={setPrintOrgIndex} />
-        <PrintButton />
       </div>
 
       {canEditFields && (

src/webparts/requestPortal/forms/WorkplaceSetup/model.ts

@@ -53,7 +53,7 @@ export interface ISectionProps {
   data: IFormData;
   set: SetField;
   context: WebPartContext;
-  /** Индекс организации для печати (см. shared/ui/PrintOrgSelect и OrganizationField.printIndex). */
+  /** Индекс организации для печати (см. shared/ui/PrintSplitButton и OrganizationField.printIndex). */
   printOrgIndex?: number;
 }
 

src/webparts/requestPortal/shared/ui/OrgLetterhead/OrgLetterhead.tsx

@@ -10,7 +10,7 @@ interface IOrgLetterheadProps {
 
 /**
  * Брендированная плашка над FormCard — логотип организации, выбранной в
- * PrintOrgSelect (видна и на экране, и в печати). Название компании — часть
+ * PrintSplitButton (видна и на экране, и в печати). Название компании — часть
  * строки до « — должность» (см. formatEmployeeOrganizations). Если логотипа
  * для этой компании нет (shared/orgLogos.ts) — ничего не рендерим.
  */

src/webparts/requestPortal/shared/ui/OrganizationField/OrganizationField.tsx

@@ -12,11 +12,11 @@ interface IOrganizationFieldProps {
    */
   label?: string;
   /**
-   * Индекс строки, которая остаётся в печатной версии (см. PrintOrgSelect в
+   * Индекс строки, которая остаётся в печатной версии (см. shared/ui/PrintSplitButton
-   * тулбаре *View.tsx) — остальные строки помечаются `rp-no-print` и PrintButton
+   * в тулбаре *View.tsx) — остальные строки помечаются `rp-no-print` и printRoot
-   * вырезает их из клона перед печатью (shared/ui/PrintButton живёт в
+   * (@tnsu/ui-kit) вырезает их из клона перед печатью. На экране видны ВСЕ строки
-   * @tnsu/ui-kit). На экране видны ВСЕ строки независимо от выбора — это только
+   * независимо от выбора — это только для печати. Не передан → печатаются все
-   * для печати. Не передан → печатаются все организации как раньше.
+   * организации как раньше.
    */
   printIndex?: number;
 }

src/webparts/requestPortal/shared/ui/PrintOrgSelect/PrintOrgSelect.module.scss

@@ -1,16 +0,0 @@
-@import '../../../../../styles/design-tokens';
-
-.wrap {
-  display: flex;
-  align-items: center;
-  gap: $sp-2;
-  min-width: 0;
-}
-
-.label {
-  flex: none;
-  font-family: $font-sans;
-  font-size: $fs-sm;
-  color: $gray-500;
-  white-space: nowrap;
-}

src/webparts/requestPortal/shared/ui/PrintOrgSelect/PrintOrgSelect.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import styles from './PrintOrgSelect.module.scss';
-import { Select, ISelectOption } from '@tnsu/ui-kit';
-
-interface IPrintOrgSelectProps {
-  /** `\n`-joined «Компания — должность», как в data.Organization. */
-  value: string;
-  selectedIndex: number;
-  onChange: (index: number) => void;
-}
-
-/**
- * Выбор организации для печати — сотрудник может состоять сразу в нескольких
- * (см. shared/ui/OrganizationField), а печатный документ должен ссылаться на
- * одну конкретную. Живёт в тулбаре рядом с PrintButton, помечен `rp-no-print`
- * самим тулбаром — сам в печать не идёт. Рендерится, только если организаций
- * больше одной, иначе выбирать не из чего.
- */
-export const PrintOrgSelect: React.FC<IPrintOrgSelectProps> = ({ value, selectedIndex, onChange }) => {
-  const lines = value ? value.split('\n') : [];
-  if (lines.length <= 1) return null;
-
-  const options: ISelectOption[] = lines.map((line, i) => ({ value: String(i), label: line }));
-
-  return (
-    <div className={styles.wrap}>
-      <span className={styles.label}>Организация для печати</span>
-      <Select value={String(selectedIndex)} onChange={(v) => onChange(Number(v))} options={options} />
-    </div>
-  );
-};

src/webparts/requestPortal/shared/ui/PrintSplitButton/PrintSplitButton.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { DropdownButton, Icon, PrintButton, printRoot } from '@tnsu/ui-kit';
+
+interface IPrintSplitButtonProps {
+  /** `\n`-joined «Компания — должность», как в data.Organization. */
+  value: string;
+  selectedIndex: number;
+  onChange: (index: number) => void;
+  label?: string;
+}
+
+/**
+ * Кнопка «Печать» для форм с несколькими организациями сотрудника: вместо
+ * отдельных select + кнопки — одна кнопка с выпадающим списком организаций,
+ * выбор сразу печатает документ для неё. Если организация одна — рендерит
+ * обычный PrintButton (выбирать не из чего, см. OrganizationField.printIndex).
+ */
+export const PrintSplitButton: React.FC<IPrintSplitButtonProps> = ({
+  value,
+  selectedIndex,
+  onChange,
+  label = 'Печать'
+}) => {
+  const [pendingPrint, setPendingPrint] = React.useState(false);
+  const lines = value ? value.split('\n') : [];
+
+  // onChange(index) обновляет printIndex у родителя (перекрашивает rp-no-print
+  // на строках OrganizationField/OrgLetterhead) в ТОМ ЖЕ цикле обновления, что
+  // и setPendingPrint — печать запускаем эффектом после коммита, чтобы DOM уже
+  // отражал выбранную организацию.
+  React.useEffect(() => {
+    if (!pendingPrint) return;
+    setPendingPrint(false);
+    printRoot();
+  }, [pendingPrint]);
+
+  if (lines.length <= 1) {
+    return <PrintButton label={label} />;
+  }
+
+  const options = lines.map((line, i) => ({ value: String(i), label: line }));
+
+  return (
+    <DropdownButton
+      options={options}
+      value={String(selectedIndex)}
+      onSelect={(v) => {
+        onChange(Number(v));
+        setPendingPrint(true);
+      }}
+    >
+      <Icon name="document" size="sm" />
+      {label}
+    </DropdownButton>
+  );
+};

src/webparts/requestPortal/shared/ui/index.ts

@@ -39,7 +39,7 @@ export { parseExcelRows } from './ItemsTable/parseExcelRows';
 export { PeopleField } from './PeopleField/PeopleField';
 export { PeopleFieldMulti } from './PeopleField/PeopleFieldMulti';
 export { OrganizationField } from './OrganizationField/OrganizationField';
-export { PrintOrgSelect } from './PrintOrgSelect/PrintOrgSelect';
+export { PrintSplitButton } from './PrintSplitButton/PrintSplitButton';
 export { OrgLetterhead } from './OrgLetterhead/OrgLetterhead';
 export { LinkField } from './LinkField/LinkField';
 export { ErrorOverlay } from './ErrorOverlay/ErrorOverlay';