feat: working version
This commit is contained in:
Тимур Городецкий
+321
@@ -0,0 +1,321 @@
|
||||
require('@rushstack/eslint-config/patch/modern-module-resolution');
|
||||
module.exports = {
|
||||
extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
|
||||
parserOptions: { tsconfigRootDir: __dirname },
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.ts', '*.tsx'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
'parserOptions': {
|
||||
'project': './tsconfig.json',
|
||||
'ecmaVersion': 2018,
|
||||
'sourceType': 'module'
|
||||
},
|
||||
rules: {
|
||||
// Prevent usage of the JavaScript null value, while allowing code to access existing APIs that may require null. https://www.npmjs.com/package/@rushstack/eslint-plugin
|
||||
'@rushstack/no-new-null': 1,
|
||||
// Require Jest module mocking APIs to be called before any other statements in their code block. https://www.npmjs.com/package/@rushstack/eslint-plugin
|
||||
'@rushstack/hoist-jest-mock': 1,
|
||||
// Require chunk names for dynamic imports in SPFx projects. https://www.npmjs.com/package/@rushstack/eslint-plugin
|
||||
'@rushstack/import-requires-chunk-name': 1,
|
||||
// Ensure that React components rendered with ReactDOM.render() are unmounted with ReactDOM.unmountComponentAtNode(). https://www.npmjs.com/package/@rushstack/eslint-plugin
|
||||
'@rushstack/pair-react-dom-render-unmount': 1,
|
||||
// Require regular expressions to be constructed from string constants rather than dynamically building strings at runtime. https://www.npmjs.com/package/@rushstack/eslint-plugin-security
|
||||
'@rushstack/security/no-unsafe-regexp': 1,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'@typescript-eslint/adjacent-overload-signatures': 1,
|
||||
// RATIONALE: Code is more readable when the type of every variable is immediately obvious.
|
||||
// Even if the compiler may be able to infer a type, this inference will be unavailable
|
||||
// to a person who is reviewing a GitHub diff. This rule makes writing code harder,
|
||||
// but writing code is a much less important activity than reading it.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'@typescript-eslint/explicit-function-return-type': [
|
||||
1,
|
||||
{
|
||||
'allowExpressions': true,
|
||||
'allowTypedFunctionExpressions': true,
|
||||
'allowHigherOrderFunctions': false
|
||||
}
|
||||
],
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
// Rationale to disable: although this is a recommended rule, it is up to dev to select coding style.
|
||||
// Set to 1 (warning) or 2 (error) to enable.
|
||||
'@typescript-eslint/explicit-member-accessibility': 0,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'@typescript-eslint/no-array-constructor': 1,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
//
|
||||
// RATIONALE: The "any" keyword disables static type checking, the main benefit of using TypeScript.
|
||||
// This rule should be suppressed only in very special cases such as JSON.stringify()
|
||||
// where the type really can be anything. Even if the type is flexible, another type
|
||||
// may be more appropriate such as "unknown", "{}", or "Record<k,V>".
|
||||
'@typescript-eslint/no-explicit-any': 1,
|
||||
// RATIONALE: The #1 rule of promises is that every promise chain must be terminated by a catch()
|
||||
// handler. Thus wherever a Promise arises, the code must either append a catch handler,
|
||||
// or else return the object to a caller (who assumes this responsibility). Unterminated
|
||||
// promise chains are a serious issue. Besides causing errors to be silently ignored,
|
||||
// they can also cause a NodeJS process to terminate unexpectedly.
|
||||
'@typescript-eslint/no-floating-promises': 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'@typescript-eslint/no-for-in-array': 2,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'@typescript-eslint/no-misused-new': 2,
|
||||
// RATIONALE: The "namespace" keyword is not recommended for organizing code because JavaScript lacks
|
||||
// a "using" statement to traverse namespaces. Nested namespaces prevent certain bundler
|
||||
// optimizations. If you are declaring loose functions/variables, it's better to make them
|
||||
// static members of a class, since classes support property getters and their private
|
||||
// members are accessible by unit tests. Also, the exercise of choosing a meaningful
|
||||
// class name tends to produce more discoverable APIs: for example, search+replacing
|
||||
// the function "reverse()" is likely to return many false matches, whereas if we always
|
||||
// write "Text.reverse()" is more unique. For large scale organization, it's recommended
|
||||
// to decompose your code into separate NPM packages, which ensures that component
|
||||
// dependencies are tracked more conscientiously.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'@typescript-eslint/no-namespace': [
|
||||
1,
|
||||
{
|
||||
'allowDeclarations': false,
|
||||
'allowDefinitionFiles': false
|
||||
}
|
||||
],
|
||||
// RATIONALE: Parameter properties provide a shorthand such as "constructor(public title: string)"
|
||||
// that avoids the effort of declaring "title" as a field. This TypeScript feature makes
|
||||
// code easier to write, but arguably sacrifices readability: In the notes for
|
||||
// "@typescript-eslint/member-ordering" we pointed out that fields are central to
|
||||
// a class's design, so we wouldn't want to bury them in a constructor signature
|
||||
// just to save some typing.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
// Set to 1 (warning) or 2 (error) to enable the rule
|
||||
'@typescript-eslint/parameter-properties': 0,
|
||||
// RATIONALE: When left in shipping code, unused variables often indicate a mistake. Dead code
|
||||
// may impact performance.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
1,
|
||||
{
|
||||
'vars': 'all',
|
||||
// Unused function arguments often indicate a mistake in JavaScript code. However in TypeScript code,
|
||||
// the compiler catches most of those mistakes, and unused arguments are fairly common for type signatures
|
||||
// that are overriding a base class method or implementing an interface.
|
||||
'args': 'none'
|
||||
}
|
||||
],
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'@typescript-eslint/no-use-before-define': [
|
||||
2,
|
||||
{
|
||||
'functions': false,
|
||||
'classes': true,
|
||||
'variables': true,
|
||||
'enums': true,
|
||||
'typedefs': true
|
||||
}
|
||||
],
|
||||
// Disallows require statements except in import statements.
|
||||
// In other words, the use of forms such as var foo = require("foo") are banned. Instead use ES6 style imports or import foo = require("foo") imports.
|
||||
'@typescript-eslint/no-var-requires': 'error',
|
||||
// RATIONALE: The "module" keyword is deprecated except when describing legacy libraries.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'@typescript-eslint/prefer-namespace-keyword': 1,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
// Rationale to disable: it's up to developer to decide if he wants to add type annotations
|
||||
// Set to 1 (warning) or 2 (error) to enable the rule
|
||||
'@typescript-eslint/no-inferrable-types': 0,
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
// Rationale to disable: declaration of empty interfaces may be helpful for generic types scenarios
|
||||
'@typescript-eslint/no-empty-interface': 0,
|
||||
// RATIONALE: This rule warns if setters are defined without getters, which is probably a mistake.
|
||||
'accessor-pairs': 1,
|
||||
// RATIONALE: In TypeScript, if you write x["y"] instead of x.y, it disables type checking.
|
||||
'dot-notation': [
|
||||
1,
|
||||
{
|
||||
'allowPattern': '^_'
|
||||
}
|
||||
],
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
'eqeqeq': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'for-direction': 1,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'guard-for-in': 2,
|
||||
// RATIONALE: If you have more than 2,000 lines in a single source file, it's probably time
|
||||
// to split up your code.
|
||||
'max-lines': ['warn', { max: 2000 }],
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-async-promise-executor': 2,
|
||||
// RATIONALE: Deprecated language feature.
|
||||
'no-caller': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-compare-neg-zero': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-cond-assign': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-constant-condition': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-control-regex': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-debugger': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-delete-var': 2,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-duplicate-case': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-empty': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-empty-character-class': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-empty-pattern': 1,
|
||||
// RATIONALE: Eval is a security concern and a performance concern.
|
||||
'no-eval': 1,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-ex-assign': 2,
|
||||
// RATIONALE: System types are global and should not be tampered with in a scalable code base.
|
||||
// If two different libraries (or two versions of the same library) both try to modify
|
||||
// a type, only one of them can win. Polyfills are acceptable because they implement
|
||||
// a standardized interoperable contract, but polyfills are generally coded in plain
|
||||
// JavaScript.
|
||||
'no-extend-native': 1,
|
||||
// Disallow unnecessary labels
|
||||
'no-extra-label': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-fallthrough': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-func-assign': 1,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'no-implied-eval': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-invalid-regexp': 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'no-label-var': 2,
|
||||
// RATIONALE: Eliminates redundant code.
|
||||
'no-lone-blocks': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-misleading-character-class': 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'no-multi-str': 2,
|
||||
// RATIONALE: It's generally a bad practice to call "new Thing()" without assigning the result to
|
||||
// a variable. Either it's part of an awkward expression like "(new Thing()).doSomething()",
|
||||
// or else implies that the constructor is doing nontrivial computations, which is often
|
||||
// a poor class design.
|
||||
'no-new': 1,
|
||||
// RATIONALE: Obsolete language feature that is deprecated.
|
||||
'no-new-func': 2,
|
||||
// RATIONALE: Obsolete language feature that is deprecated.
|
||||
'no-new-object': 2,
|
||||
// RATIONALE: Obsolete notation.
|
||||
'no-new-wrappers': 1,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-octal': 2,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
'no-octal-escape': 2,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-regex-spaces': 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'no-return-assign': 2,
|
||||
// RATIONALE: Security risk.
|
||||
'no-script-url': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-self-assign': 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'no-self-compare': 2,
|
||||
// RATIONALE: This avoids statements such as "while (a = next(), a && a.length);" that use
|
||||
// commas to create compound expressions. In general code is more readable if each
|
||||
// step is split onto a separate line. This also makes it easier to set breakpoints
|
||||
// in the debugger.
|
||||
'no-sequences': 1,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-shadow-restricted-names': 2,
|
||||
// RATIONALE: Obsolete language feature that is deprecated.
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-sparse-arrays': 2,
|
||||
// RATIONALE: Although in theory JavaScript allows any possible data type to be thrown as an exception,
|
||||
// such flexibility adds pointless complexity, by requiring every catch block to test
|
||||
// the type of the object that it receives. Whereas if catch blocks can always assume
|
||||
// that their object implements the "Error" contract, then the code is simpler, and
|
||||
// we generally get useful additional information like a call stack.
|
||||
'no-throw-literal': 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'no-unmodified-loop-condition': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-unsafe-finally': 2,
|
||||
// RATIONALE: Catches a common coding mistake.
|
||||
'no-unused-expressions': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-unused-labels': 1,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-useless-catch': 1,
|
||||
// RATIONALE: Avoids a potential performance problem.
|
||||
'no-useless-concat': 1,
|
||||
// RATIONALE: The "var" keyword is deprecated because of its confusing "hoisting" behavior.
|
||||
// Always use "let" or "const" instead.
|
||||
//
|
||||
// STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json
|
||||
'no-var': 2,
|
||||
// RATIONALE: Generally not needed in modern code.
|
||||
'no-void': 1,
|
||||
// RATIONALE: Obsolete language feature that is deprecated.
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'no-with': 2,
|
||||
// RATIONALE: Makes logic easier to understand, since constants always have a known value
|
||||
// @typescript-eslint\eslint-plugin\dist\configs\eslint-recommended.js
|
||||
'prefer-const': 1,
|
||||
// RATIONALE: Catches a common coding mistake where "resolve" and "reject" are confused.
|
||||
'promise/param-names': 2,
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'require-atomic-updates': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'require-yield': 1,
|
||||
// "Use strict" is redundant when using the TypeScript compiler.
|
||||
'strict': [
|
||||
2,
|
||||
'never'
|
||||
],
|
||||
// RATIONALE: Catches code that is likely to be incorrect
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
'use-isnan': 2,
|
||||
// STANDARDIZED BY: eslint\conf\eslint-recommended.js
|
||||
// Set to 1 (warning) or 2 (error) to enable.
|
||||
// Rationale to disable: !!{}
|
||||
'no-extra-boolean-cast': 0,
|
||||
// ====================================================================
|
||||
// @microsoft/eslint-plugin-spfx
|
||||
// ====================================================================
|
||||
'@microsoft/spfx/no-require-ensure': 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
// For unit tests, we can be a little bit less strict. The settings below revise the
|
||||
// defaults specified in the extended configurations, as well as above.
|
||||
files: [
|
||||
// Test files
|
||||
'*.test.ts',
|
||||
'*.test.tsx',
|
||||
'*.spec.ts',
|
||||
'*.spec.tsx',
|
||||
|
||||
// Facebook convention
|
||||
'**/__mocks__/*.ts',
|
||||
'**/__mocks__/*.tsx',
|
||||
'**/__tests__/*.ts',
|
||||
'**/__tests__/*.tsx',
|
||||
|
||||
// Microsoft convention
|
||||
'**/test/*.ts',
|
||||
'**/test/*.tsx'
|
||||
],
|
||||
rules: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
node_modules/
|
||||
lib/
|
||||
lib-commonjs/
|
||||
dist/
|
||||
temp/
|
||||
release/
|
||||
jest-output/
|
||||
*.sppkg
|
||||
.heft/
|
||||
sharepoint/solution/
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
# Ignore everything by default
|
||||
**
|
||||
|
||||
# Use negative patterns to bring back the specific things we want to publish
|
||||
!/bin/**
|
||||
!/dist/**
|
||||
!/EULA/**
|
||||
!/lib/**
|
||||
!ThirdPartyNotice.txt
|
||||
|
||||
# Ignore certain files in the above folders
|
||||
/dist/*.stats.*
|
||||
/dist/**/*.js.map
|
||||
/lib/**/*.js.map
|
||||
/lib/**/test/**
|
||||
|
||||
# NOTE: These don't need to be specified, because NPM includes them automatically.
|
||||
#
|
||||
# package.json
|
||||
# README (and its variants)
|
||||
# CHANGELOG (and its variants)
|
||||
# LICENSE / LICENCE
|
||||
Vendored
+23
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Hosted workbench",
|
||||
"type": "msedge",
|
||||
"request": "launch",
|
||||
"url": "https://{tenantDomain}/_layouts/workbench.aspx",
|
||||
"webRoot": "${workspaceRoot}",
|
||||
"sourceMaps": true,
|
||||
"sourceMapPathOverrides": {
|
||||
"webpack:///.././src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../../src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../../../src/*": "${webRoot}/src/*"
|
||||
},
|
||||
"runtimeArgs": [
|
||||
"--remote-debugging-port=9222",
|
||||
"-incognito"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
Vendored
+14
@@ -0,0 +1,14 @@
|
||||
// Place your settings in this file to overwrite default and user settings.
|
||||
{
|
||||
// Configure glob patterns for excluding files and folders in the file explorer.
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/bower_components": true,
|
||||
"**/coverage": true,
|
||||
"**/jest-output": true,
|
||||
"**/lib-amd": true,
|
||||
"src/**/*.scss.ts": true
|
||||
},
|
||||
"typescript.tsdk": ".\\node_modules\\typescript\\lib"
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"useGulp": false,
|
||||
"plusBeta": false,
|
||||
"isCreatingSolution": true,
|
||||
"nodeVersion": "22.22.2",
|
||||
"sdksVersions": {},
|
||||
"version": "1.22.2",
|
||||
"libraryName": "kps-ct-form",
|
||||
"libraryId": "340fb0b3-70e1-4aba-904d-94651e35fe80",
|
||||
"environment": "spo",
|
||||
"packageManager": "npm",
|
||||
"solutionName": "kps-ct-form",
|
||||
"solutionShortDescription": "kps-ct-form description",
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
Ты — опытный Senior Frontend Engineer.
|
||||
Твоя специализация: React (TypeScript), корпоративные веб‑приложения, порталы и SPA.
|
||||
|
||||
ОБЩИЕ ПРИНЦИПЫ
|
||||
- Пиши код так, как если бы он шёл в production.
|
||||
- Предпочитай простые и читаемые решения.
|
||||
- Избегай overengineering.
|
||||
- Всегда думай о поддерживаемости кода через 1–2 года.
|
||||
- Не выдумывай API, props или окружение — используй только то, что явно указано.
|
||||
- Если информации недостаточно — делай разумные предположения и явно их помечай.
|
||||
|
||||
СТЕК И СИНТАКСИС
|
||||
- React (Function Components)
|
||||
- TypeScript (строгая типизация, без any)
|
||||
- Hooks вместо классов
|
||||
- JSX / TSX
|
||||
- CSS Modules или SCSS Modules
|
||||
- Без deprecated API
|
||||
|
||||
СТРУКТУРА КОДА
|
||||
- Один компонент — один файл
|
||||
- Явные интерфейсы props (`interface Props {}`)
|
||||
- Логика отделена от представления
|
||||
- Минимум вложенности
|
||||
- Ранние return’ы вместо глубоких if
|
||||
|
||||
РАЗМЕР И ДЕКОМПОЗИЦИЯ
|
||||
- Компонент — не больше 300 строк. Больше — сигнал, что пора разбивать.
|
||||
- Функция / хук — не больше ~50 строк, делает одну вещь.
|
||||
- Файл делает что-то одно: не смешивай несколько компонентов в одном файле.
|
||||
- Не больше 3–4 уровней вложенности JSX — глубже выноси в под-компонент.
|
||||
- Props: до ~7 штук. Больше — сгруппируй в объект или пересмотри разбивку.
|
||||
- Большой компонент дели по смыслу: под-компоненты (`Foo.tsx` → `FooHeader.tsx`, `FooRow.tsx`), кастомные хуки для логики (`useFooData.ts`), утилиты (`utils/`).
|
||||
- Повторяешь один и тот же блок 3-й раз — выноси в общий компонент/функцию.
|
||||
|
||||
ИМЕНА И СТИЛЬ
|
||||
- Компоненты: PascalCase
|
||||
- Хуки: useSomething
|
||||
- Переменные: camelCase
|
||||
- CSS‑классы: kebab-case или camelCase (последовательно)
|
||||
- Названия должны отражать смысл, а не реализацию
|
||||
|
||||
REACT‑ПРАКТИКИ
|
||||
- useEffect — только для сайд‑эффектов
|
||||
- Не клади бизнес‑логику в JSX
|
||||
- Используй useMemo / useCallback только при реальной необходимости
|
||||
- Контролируемые компоненты предпочтительнее неконтролируемых
|
||||
- Не мутируй props и state
|
||||
|
||||
УПРАВЛЕНИЕ СОСТОЯНИЕМ
|
||||
- Состояние живёт как можно ниже; поднимай наверх только то, что реально общее.
|
||||
- State многошаговой формы держи в одном родителе (например, `CtCreateForm`) — шаги получают срез данных и колбэки, а не тянут состояние сами.
|
||||
- Prop-drilling глубже 2–3 уровней — сигнал вынести общее в React Context.
|
||||
- Context — для по-настоящему сквозных данных (текущая СТ, пользователь, справочники), не для всего подряд.
|
||||
- Один источник истины: не дублируй одни и те же данные в нескольких useState.
|
||||
- Изменяй state иммутабельно (`setItems(prev => [...prev, x])`), без мутаций массивов/объектов.
|
||||
- Производные данные считай на лету (useMemo), не храни в отдельном state.
|
||||
|
||||
LAYOUT И ВЁРСТКА
|
||||
- Верстка адаптивная
|
||||
- Используй flex / grid
|
||||
- Контейнеры по умолчанию занимают 100% доступной ширины
|
||||
- Не используй magic‑numbers без комментариев
|
||||
- Padding и margin — консистентные
|
||||
|
||||
КОНСТАНТЫ И СТРОКИ
|
||||
- Никаких magic-strings в логике: статусы, ключи и имена SP-списков, роуты — в константах.
|
||||
- Повторяющиеся значения выноси в один модуль констант (`constants.ts`), а не хардкодь по месту.
|
||||
- Статусы и перечисления — через union-типы или enum, чтобы опечатка ловилась компилятором.
|
||||
- Числовые «магические» значения — именованные константы с понятным смыслом.
|
||||
- Пользовательские тексты собирай в одном месте — задел под локализацию, чтобы строки не были размазаны по JSX.
|
||||
- URL, id ресурсов и настройки окружения — не в коде компонентов, а в конфиге/константах.
|
||||
|
||||
КОММЕНТАРИИ
|
||||
- Комментируй ПОЧЕМУ, а не ЧТО
|
||||
- Не дублируй комментариями очевидный код
|
||||
- Для сложной логики — короткий поясняющий комментарий
|
||||
|
||||
ОШИБКИ И СОСТОЯНИЯ
|
||||
- Явно обрабатывай loading / error / empty state
|
||||
- Не скрывай ошибки
|
||||
- UI должен корректно вести себя при отсутствии данных
|
||||
|
||||
GIT И КОММИТЫ
|
||||
- Формат: `тип: краткое описание в настоящем времени` (`feat:`, `fix:`, `refactor:`, `chore:`, `docs:`, `test:`).
|
||||
- Один коммит — одно логическое изменение, без свалки несвязанных правок.
|
||||
- Сообщение объясняет ЧТО и ЗАЧЕМ, а не пересказывает диф.
|
||||
- Не коммить закомментированный/отладочный код и секреты.
|
||||
- Пиши так, чтобы по истории джун понял ход работы без расспросов.
|
||||
|
||||
ФОРМАТ ОТВЕТА
|
||||
- Если даёшь код — давай ПОЛНЫЙ пример, а не фрагмент
|
||||
- Если есть несколько вариантов — объясни, почему выбран именно этот
|
||||
- Не пиши лишний текст вокруг кода
|
||||
- Ответы краткие, структурированные, по делу
|
||||
|
||||
ПОДДЕРЖИВАЕМОСТЬ (ЧТОБЫ ДЖУН МОГ ПОДХВАТИТЬ)
|
||||
- Пиши так, будто проект дальше ведёт джун без твоего контекста.
|
||||
- Никакой «магии» и умных однострочников — понятный код важнее короткого.
|
||||
- Понятные имена вместо комментариев-костылей: `isLoading`, а не `flag`.
|
||||
- Предпочитай явное неявному: не полагайся на неочевидные побочные эффекты.
|
||||
- Структура папок предсказуемая и одинаковая по всему проекту.
|
||||
- Типы описывают данные явно — джун должен понять форму объекта, не запуская код.
|
||||
- Сложную бизнес-логику сопровождай коротким «почему» в комментарии.
|
||||
- Не оставляй мёртвый/закомментированный код — удаляй.
|
||||
|
||||
КОНТЕКСТ
|
||||
- Код пишется для корпоративного портала
|
||||
- Основной приоритет: читаемость, стабильность, предсказуемость
|
||||
@@ -0,0 +1,335 @@
|
||||
# Стартовый промт для нового SPFx-проекта (многошаговая форма)
|
||||
|
||||
> **Как использовать этот файл.**
|
||||
> Положи его в корень нового репозитория (например, переименуй в `CLAUDE.md`, чтобы Claude Code подхватывал автоматически).
|
||||
> В начале работы над новым проектом дай агенту команду: _«Прочитай `NEW-PROJECT-PROMPT.md` и следуй ему»_.
|
||||
> Разделы, помеченные `⟨…⟩`, — это **плейсхолдеры**: замени их под свою предметную область до старта.
|
||||
> Этот файл — обобщение боевого проекта `ct-create-form` (СТ — сравнительная таблица закупок). Новый проект «похожий»: тот же стек, та же архитектура, другая доменная модель.
|
||||
|
||||
---
|
||||
|
||||
## 1. Роль
|
||||
|
||||
Ты — опытный Senior Frontend Engineer. Специализация: React (TypeScript), корпоративные веб-приложения на **SharePoint Framework (SPFx)**, порталы и SPA.
|
||||
Код пишешь так, будто он идёт в production и дальше его ведёт джун без твоего контекста: приоритет — **читаемость, стабильность, предсказуемость**.
|
||||
|
||||
---
|
||||
|
||||
## 2. Что за проект (замени под себя)
|
||||
|
||||
⟨Опиши в 3–5 предложениях, что делает приложение.⟩
|
||||
|
||||
Шаблон, от которого отталкиваемся: **SPFx WebPart — многошаговая форма (wizard) на корпоративном портале**. Пользователь проходит N шагов (выбор данных → загрузка → формирование → согласование), данные на каждом шаге сохраняются в SharePoint через REST, форму можно открыть повторно по ссылке (в т.ч. из уведомления Power Automate/Teams) и продолжить с любого шага.
|
||||
|
||||
- **Предметная область:** ⟨напр. «заявка на …», «карточка …», «согласование …»⟩
|
||||
- **Шаги формы:** 4 шага (подробно — см. §12). Каркас потока: **сбор данных → загрузка/обогащение → формирование/сравнение → согласование.**
|
||||
- **Роли пользователей:** ⟨автор/инициатор, согласующие, наблюдатели с ограниченным доступом⟩
|
||||
- **Внешние системы:** ⟨SharePoint-списки, внешний API, Power Automate flows⟩
|
||||
|
||||
---
|
||||
|
||||
## 3. Технологический стек (фиксированный)
|
||||
|
||||
- **SPFx 1.22.x** (Heft-сборка: `heft start` / `heft test` / `heft package-solution`)
|
||||
- **Node** `>=22.14.0 <23`
|
||||
- **React 17** (function components + hooks, без классов)
|
||||
- **TypeScript ~5.8**, строгая типизация, **без `any`**
|
||||
- **Fluent UI React v8** (`@fluentui/react ^8`)
|
||||
- **SCSS Modules** (`*.module.scss`)
|
||||
- Работа с SharePoint — через `SPHttpClient` (из `@microsoft/sp-http`), REST `_api/web/lists/...`. **PnPjs не используем.**
|
||||
- Внешние API — через `aadTokenProviderFactory` (Bearer-токен Azure AD) + нативный `fetch`.
|
||||
|
||||
> Не добавляй новые зависимости без явной необходимости и без согласования. Не выдумывай API/props/окружение — используй только то, что явно есть.
|
||||
|
||||
---
|
||||
|
||||
## 4. Эталонная структура проекта
|
||||
|
||||
```
|
||||
src/webparts/⟨feature⟩/
|
||||
⟨Feature⟩WebPart.ts — точка входа: пробрасывает context, userDisplayName, isDarkTheme в React
|
||||
components/
|
||||
I⟨Feature⟩Props.ts — props корневого компонента (context, userDisplayName, isDarkTheme)
|
||||
⟨Feature⟩.tsx — ГЛАВНЫЙ контейнер (functional). Мемоизирует Service, держит стейт через хук, рендерит шаги
|
||||
⟨Feature⟩.module.scss
|
||||
types/domain.ts — ВСЕ доменные типы + union-типы статусов + константа шагов
|
||||
hooks/
|
||||
use⟨Feature⟩Form.ts — стейт формы: currentStep, formData, completedSteps, highestStep + persist в sessionStorage
|
||||
useRequests.ts — загрузка данных с отменой на unmount
|
||||
Breadcrumbs/ — индикатор прогресса шагов (completed / current / доступность)
|
||||
Step1…/ Step2…/ Step3…/ Step4…/
|
||||
— на каждый шаг папка: контейнер Step*.tsx + под-компоненты (таблицы, формы, диалоги)
|
||||
utils/ — чистые функции (конвертации, форматирование, расчёты)
|
||||
services/⟨Feature⟩Service.ts — ВСЕ вызовы SharePoint REST + внешние API + Power Automate в одном классе
|
||||
loc/ — строки локализации
|
||||
```
|
||||
|
||||
Правила декомпозиции: один компонент — один файл; компонент ≤ 300 строк; функция/хук ≤ ~50 строк; ≤ 3–4 уровня вложенности JSX; ≤ ~7 props (иначе группируй в объект). Повторил блок 3-й раз → выноси в общий компонент/функцию/хук.
|
||||
|
||||
---
|
||||
|
||||
## 5. Ключевые архитектурные паттерны
|
||||
|
||||
Эти паттерны — суть проекта. Соблюдай их, расширяя форму.
|
||||
|
||||
### 5.1. Единый стейт формы в одном хуке-родителе
|
||||
|
||||
Весь стейт многошаговой формы живёт в **одном** хуке (`use⟨Feature⟩Form`) внутри главного контейнера. Шаги **не** держат общий стейт сами — они получают срез данных и колбэки.
|
||||
|
||||
- `formData` — единый объект со всеми данными формы (см. `CTFormData` как образец).
|
||||
- Обновление — иммутабельно и точечно: `updateFormData(partial: Partial<FormData>)`.
|
||||
- Производные данные считай на лету (`useMemo`), не дублируй в отдельный `useState`.
|
||||
- `currentStep`, `completedSteps` (пройденные), `highestStep` (максимально доступный) — тоже здесь.
|
||||
|
||||
### 5.2. Контракт props для шага (единый на все шаги)
|
||||
|
||||
Каждый `Step*` получает один и тот же набор:
|
||||
|
||||
```ts
|
||||
interface StepProps {
|
||||
service: ⟨Feature⟩Service;
|
||||
formData: FormData;
|
||||
onSave: (partial: Partial<FormData>) => void; // = updateFormData
|
||||
onNext?: () => void;
|
||||
onPrev?: () => void;
|
||||
onStepComplete: (step: FormStep) => void;
|
||||
isReadOnly?: boolean; // форма на согласовании/согласована/отклонена
|
||||
isRestrictedView?: boolean; // урезанный доступ (напр. скрытие цен)
|
||||
userDisplayName: string;
|
||||
isNotificationLink?: boolean; // открыто по ссылке из уведомления
|
||||
}
|
||||
```
|
||||
|
||||
### 5.3. Сервисный слой
|
||||
|
||||
`⟨Feature⟩Service` — единственное место, где происходят сетевые вызовы. Компоненты не делают `fetch`/`SPHttpClient` напрямую.
|
||||
|
||||
- Конструктор принимает `WebPartContext`, вытаскивает `baseUrl = context.pageContext.web.absoluteUrl` и `spHttpClient`.
|
||||
- Приватные хелперы для URL списков: `_li(listName)` и `_liById(listName, id)`.
|
||||
- Мемоизируй сервис в контейнере: `const service = useMemo(() => new ⟨Feature⟩Service(context), [context])`.
|
||||
|
||||
### 5.4. Персист и восстановление сессии
|
||||
|
||||
- Стейт формы сериализуется в `sessionStorage` по ключу `⟨prefix⟩_${entityId}` при каждом изменении.
|
||||
- `entityId` кладётся в URL (`?⟨entity⟩Id=…`) через `history.replaceState`, чтобы перезагрузка/шаринг ссылки продолжали ту же форму.
|
||||
- Поддержи **ссылку из уведомления** (Power Automate/Teams) с другим регистром параметра (напр. `?⟨entity⟩id=…`): по ней всегда подгружай свежие данные из SharePoint и открывай нужный шаг.
|
||||
- При восстановлении **не затирай** несохранённые правки из сессии данными из SharePoint без нужды: бери SP-данные только когда в сессии пусто **или** это ссылка из уведомления (см. слияние в `⟨Feature⟩.tsx`).
|
||||
|
||||
### 5.5. Доступность шагов и режимы только для чтения
|
||||
|
||||
- Breadcrumbs даёт кликать только по `completedSteps` и в пределах `highestStep`.
|
||||
- `isReadOnly` включается по статусу сущности (`on_approval` / `approved` / `rejected`).
|
||||
- Особые ограничения по компании/роли (напр. скрытие цен) — отдельным флагом, который **складывается** с общими правилами, а не заменяет их.
|
||||
|
||||
### 5.6. Статусы — только union-типы
|
||||
|
||||
Статусы сущности и участников согласования — `type X = 'a' | 'b' | ...`, чтобы опечатка ловилась компилятором. Никаких magic-strings по коду.
|
||||
|
||||
### 5.7. Верстка на всю ширину экрана (full-width)
|
||||
|
||||
По умолчанию SPFx-страница зажимает WebPart шириной канвы (`max-width` ~1204px). Чтобы форма занимала всю ширину экрана, нужны **две вещи в связке**:
|
||||
|
||||
**1. Флаг в манифесте WebPart** (`⟨Feature⟩WebPart.manifest.json`) — разрешает положить WebPart в полноширинную секцию страницы:
|
||||
|
||||
```json
|
||||
"supportsFullBleed": true
|
||||
```
|
||||
|
||||
После деплоя на странице добавь WebPart в **полноширинную секцию** (Full-width section — доступна только на страницах без баннера/на пустом шаблоне).
|
||||
|
||||
**2. Обход контейнера канвы в корневом `*.module.scss`** через `:global` — снимает `max-width` и у воркбенча (dev), и у живой канвы:
|
||||
|
||||
```scss
|
||||
:global {
|
||||
#workbenchPageContent,
|
||||
.CanvasComponent.LCS .CanvasZone {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.root {
|
||||
min-height: 100vh; // тянем на всю высоту вьюпорта
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`!important` тут оправдан: перебиваем инлайновые/встроенные стили канвы SharePoint, на которые повлиять иначе нельзя (это тот редкий случай, когда `!important` — не костыль). Селекторы `#workbenchPageContent` и `.CanvasComponent.LCS .CanvasZone` — внутренние классы SharePoint; если после обновления платформы ширина «вернётся», проверь актуальные имена в DevTools.
|
||||
|
||||
---
|
||||
|
||||
## 6. Playbook по SharePoint (важно — тут «грабли»)
|
||||
|
||||
Внутренние имена списков и полей — **только в константах** сервиса (`const LISTS = {...}`), не размазывай по коду. Помни: внутреннее имя SP-поля ≠ отображаемое (напр. поле «Статус» может иметь internal name `status`).
|
||||
|
||||
**Запись lookup-поля:** в теле запроса ключ — `{InternalName}Id` со **скалярным** значением (напр. `{ winSupplierId: 42 }`). Суффикс `LookupId` бывает только в GET-ответах, для записи он не нужен.
|
||||
|
||||
**Грабли с «защищёнными» списками (Retention / event receiver).**
|
||||
На некоторых списках hard `DELETE` и `MERGE/PATCH` падают с `E_FAIL` (`-2147467259, SPException`). Признак — на списке стоит политика удержания или ресивер.
|
||||
|
||||
- ✅ Работают: `POST` (создание), `GET` (чтение), `POST /items(N)/recycle()` (мягкое удаление — то же, что делает кнопка «Удалить» в UI).
|
||||
- ❌ Не работают: `DELETE` любым синтаксисом, `MERGE/PATCH`.
|
||||
- **Приём:** для «обновления» такой записи — `recycle()` + повторный `POST`, а не `MERGE`.
|
||||
- Если на новом списке REST `DELETE/MERGE` падает с `E_FAIL` — первым делом пробуй `recycle()`.
|
||||
|
||||
**Грабли с `$expand`/`$select`:** выборка Choice-поля через `$expand` по lookup иногда даёт `400`. Решение — грузить связанные данные отдельным запросом по id и мерджить на клиенте (см. загрузку курсов валют в `⟨Feature⟩.tsx`).
|
||||
|
||||
**Округление денег:** округляй монетарные значения до 2 знаков перед записью (`Math.round(v*100)/100`), чтобы не улетали float-хвосты.
|
||||
|
||||
---
|
||||
|
||||
## 7. Внешний API и Power Automate
|
||||
|
||||
**Azure AD Bearer-токен** (паттерн SPFx):
|
||||
|
||||
```ts
|
||||
const tokenProvider = await context.aadTokenProviderFactory.getTokenProvider();
|
||||
const token = await tokenProvider.getToken(⟨AAD_RESOURCE_ID⟩);
|
||||
const res = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
|
||||
```
|
||||
|
||||
- Внутренний API TNSU: base `https://api.tnsu.kz`, AAD Resource ID `9232d9e2-9807-4753-808f-07250e5474b0`.
|
||||
- Пример готовой реализации: `pmo-records/src/webparts/pmoRecords/services/TnsuApiService.ts`.
|
||||
- Требуется прописать разрешение в `package-solution.json` (`webApiPermissionRequests`) и одобрить его в API access центра администрирования SharePoint.
|
||||
|
||||
**Power Automate:** триггеры вызываются POST-запросом на HTTP-trigger URL. Все URL флоу — **в константах сервиса**, не в компонентах. Обрабатывай ответ и ошибки явно; вызовы, которые не должны блокировать UX (уведомления, статусы), делай non-blocking: `service.doX(...).catch(() => undefined)`.
|
||||
|
||||
---
|
||||
|
||||
## 8. Конвенции кода (обязательны)
|
||||
|
||||
**React-практики**
|
||||
|
||||
- `useEffect` — только для сайд-эффектов; бизнес-логику не клади в JSX.
|
||||
- `useMemo`/`useCallback` — только при реальной необходимости.
|
||||
- Контролируемые компоненты предпочтительнее неконтролируемых. Props/state не мутируем.
|
||||
- Загрузку данных отменяй на unmount (флаг `cancelled`/`AbortController`), чтобы не было setState после размонтирования.
|
||||
|
||||
**Состояние**
|
||||
|
||||
- Состояние живёт максимально низко; наверх поднимаем только реально общее.
|
||||
- Prop-drilling глубже 2–3 уровней → React Context (для сквозного: текущая сущность, пользователь, справочники).
|
||||
- Один источник истины; изменения иммутабельны (`setItems(prev => [...prev, x])`).
|
||||
|
||||
**Имена и стиль**
|
||||
|
||||
- Компоненты — `PascalCase`; хуки — `useSomething`; переменные — `camelCase`; CSS-классы — единообразно (`kebab-case` или `camelCase`).
|
||||
- Имена отражают смысл, а не реализацию (`isLoading`, а не `flag`).
|
||||
|
||||
**Константы и строки**
|
||||
|
||||
- Никаких magic-strings в логике: статусы, имена списков/полей, роуты, id ресурсов, URL — в константах/конфиге.
|
||||
- Пользовательские тексты — по возможности в одном месте (задел под локализацию).
|
||||
- Числовые «магические» значения — именованные константы с комментарием-смыслом.
|
||||
|
||||
**Ошибки и состояния**
|
||||
|
||||
- Явно обрабатывай `loading` / `error` / `empty`. Ошибки не скрывай. UI корректен при отсутствии данных.
|
||||
|
||||
**Layout**
|
||||
|
||||
- Адаптив; `flex`/`grid`; контейнеры по умолчанию 100% ширины; консистентные `padding`/`margin`; без magic-numbers без комментария.
|
||||
|
||||
**Комментарии**
|
||||
|
||||
- Комментируй **ПОЧЕМУ**, а не ЧТО. Не дублируй очевидный код. Сложную бизнес-логику сопровождай коротким «почему».
|
||||
- Не оставляй мёртвый/закомментированный код — удаляй.
|
||||
|
||||
---
|
||||
|
||||
## 9. Git и коммиты
|
||||
|
||||
- Формат: `тип: краткое описание в настоящем времени` (`feat:`, `fix:`, `refactor:`, `chore:`, `docs:`, `test:`).
|
||||
- Один коммит — одно логическое изменение. Сообщение объясняет **что** и **зачем**, а не пересказывает диф.
|
||||
- Не коммить отладочный код и секреты. По истории джун должен понять ход работы.
|
||||
|
||||
---
|
||||
|
||||
## 10. Чеклист старта нового проекта
|
||||
|
||||
1. `yo @microsoft/sharepoint` (SPFx 1.22.x) → WebPart с React-фреймворком. Проверь Node `22.x`.
|
||||
2. Замени все `⟨плейсхолдеры⟩` в этом файле и переименуй его в `CLAUDE.md`.
|
||||
3. Опиши доменную модель в `types/domain.ts`: сущности, `type Status = …`, `FORM_STEPS`.
|
||||
4. Заведи `⟨Feature⟩Service` с `const LISTS = {...}` и хелперами `_li`/`_liById`.
|
||||
5. Собери каркас: `WebPart.ts` → главный контейнер → `use⟨Feature⟩Form` → `Breadcrumbs` + пустые `Step1..N`.
|
||||
6. Настрой persist в `sessionStorage` и чтение `entityId` из URL (+ вариант ссылки из уведомления).
|
||||
7. Пропиши API-разрешения в `package-solution.json`, если нужен внешний API.
|
||||
8. Для full-width: поставь `"supportsFullBleed": true` в манифесте + `:global`-обход канвы в корневом SCSS (§5.7), и клади WebPart в полноширинную секцию страницы.
|
||||
9. Реализуй шаги по одному, соблюдая единый контракт props (§5.2).
|
||||
|
||||
## 11. TODO-заглушки (типовые места, которые обычно доделываются позже)
|
||||
|
||||
- `⟨Feature⟩Service`: заменить константы `LISTS` на реальные имена SP-списков.
|
||||
- Загрузка файлов в библиотеку SharePoint + триггер обработки (Syntex/Flow), если есть шаг с документами.
|
||||
- People picker (`NormalPeoplePicker`) для добавления согласующих.
|
||||
- Вызовы Power Automate для уведомлений/сохранения статусов.
|
||||
|
||||
---
|
||||
|
||||
## 12. Шаги формы — эталонная модель (на примере СТ)
|
||||
|
||||
Ниже — реальный поток из проекта `ct-create-form`. Каркас (4 шага, роли, статусы, режимы) переноси как есть, **содержимое шагов адаптируй под свою предметку.** Все 4 шага рендерятся из главного контейнера, стейт — в `use⟨Feature⟩Form`, каждый шаг получает единый контракт props (§5.2).
|
||||
|
||||
Метки шагов (`FORM_STEPS` в `types/domain.ts`):
|
||||
|
||||
```ts
|
||||
export const FORM_STEPS = [
|
||||
{ step: 1, label: "Выбор позиций" },
|
||||
{ step: 2, label: "Загрузка КП" },
|
||||
{ step: 3, label: "Формирование СТ" },
|
||||
{ step: 4, label: "Согласование" },
|
||||
];
|
||||
```
|
||||
|
||||
### Шаг 1 — «Выбор позиций» (сбор исходных данных)
|
||||
|
||||
**Задача:** пользователь выбирает исходные записи (в СТ — позиции потребностей), из которых собирается сущность.
|
||||
|
||||
- Грузит данные из **внешнего API** за последние N дней (по умолчанию 30), с поиском по номеру и пагинацией (~10/страница). Загрузка — через хук с отменой на unmount (`useRequests`).
|
||||
- Таблица с раскрывающимися строками (родитель → дочерние записи) и чекбоксами выбора.
|
||||
- **Бизнес-ограничение:** все выбранные записи — из одного проекта. На первом чекбоксе фиксируется `selectedProject`, остальные проекты блокируются (`lockedProjectId`).
|
||||
- **По «Далее»:** создаёт сущность (СТ) и её позиции в SharePoint, кладёт `selectedPositions` / `selectedProject` в `formData`, помечает шаг завершённым, проставляет `?⟨entity⟩Id` в URL.
|
||||
- **Read-only:** если сущность уже на согласовании/согласована/отклонена — показывает выбранное без правки.
|
||||
|
||||
### Шаг 2 — «Загрузка КП» (загрузка и обогащение данных)
|
||||
|
||||
**Задача:** загрузить документы (коммерческие предложения) и извлечь из них структурированные данные.
|
||||
|
||||
- **Drag&drop загрузка файлов** в библиотеку SharePoint (`FileUploadArea`).
|
||||
- После загрузки — триггер обработки документа (**Syntex / Power Automate flow**) для извлечения полей (позиции, цены, поставщик). Идёт **поллинг результата** (интервал ~5с, лимит ~5 мин; статусы файла: `uploading → extracting → flowing → done/error`).
|
||||
- **Курсы валют** (`CurrencyRatesForm`): подгрузка из SP-списка «Курс Валют» / API + ручной ввод. Валюта КП запоминается на поставщике, чтобы Шаг 3 показал верные колонки.
|
||||
- Поставщики **без КП** фиксируются отдельно (список «Не получены КП») с комментарием.
|
||||
- **Результат в `formData`:** `suppliers`, `offers`, `currencyRates`, `uploadedKpFiles`.
|
||||
|
||||
### Шаг 3 — «Формирование СТ» (сведение и сравнение)
|
||||
|
||||
**Задача:** свести всё в сравнительную матрицу и выбрать победителя.
|
||||
|
||||
- **Excel-подобная матрица:** строки = позиции, столбцы = поставщики; в ячейках — цена/сумма с НДС.
|
||||
- **Подсветка минимума** по строке (зелёным) и **авто-выбор рекомендованного поставщика** (наименьшая итоговая сумма) → `recommendedSupplierId`.
|
||||
- Редактируемо: количество по позиции (`step3PositionQtyOverrides`), доп-позиции и доп-поставщики (`step3Extra*`), строки доставки с км (`step3DeliveryKm`), критерии (оплата/доставка/срок/сертификаты) и кастомные критерии. Конвертация единиц измерения — `utils/unitConversion`.
|
||||
- **AI-комментарий** по таблице (через Power Automate flow).
|
||||
- **Скрытие цен** (`isRestrictedView`) для урезанного доступа.
|
||||
- При открытии **по ссылке из уведомления** этот шаг — главный: тут же показывается цепочка согласования и доступны действия «Согласовать/Отклонить».
|
||||
|
||||
### Шаг 4 — «Согласование» (маршрут и решение)
|
||||
|
||||
**Задача:** собрать цепочку согласующих и провести сущность по маршруту.
|
||||
|
||||
- **Конструктор цепочки:** добавление согласующих через `NormalPeoplePicker` (поиск пользователей SP), порядок, роли, право делегирования (`canAddApprover`).
|
||||
- Инициатор ставит **«Рекомендую»** → цепочка активируется, статус сущности → **«На согласовании»**.
|
||||
- **Диалог «Согласовать/Отклонить»** с комментарием. Статусы участников: `pending | recommends | approved | rejected | skipped`.
|
||||
- **Побочные эффекты (non-blocking):** уведомления через Power Automate; запись статуса сущности и выбранного поставщика (`winSupplier`, lookup) в SP-список. Статусы сущности: `draft | kp_loading | kp_loaded | formed | on_approval | approved | rejected`.
|
||||
|
||||
> **Как адаптировать под новый проект:** сохрани роли (автор/инициатор → согласующие → наблюдатель), 3 режима отображения (обычный / read-only по статусу / restricted), персист+ссылку из уведомления и деривацию статуса из цепочки (`deriveCtStatus` в контейнере). Меняй только _содержимое_: какие данные собираешь на Шаге 1, что грузишь/извлекаешь на Шаге 2, что и как сравниваешь на Шаге 3.
|
||||
|
||||
---
|
||||
|
||||
### Ссылки на образцы (в текущем окружении разработчика)
|
||||
|
||||
- Боевой проект-образец: `ct-create-form` (СТ). Смотри `CtService.ts`, `useCtForm.ts`, `CtCreateForm.tsx`.
|
||||
- Родственный проект той же архитектуры: `oid-create-form`.
|
||||
- Пример внешнего API с AAD-токеном: `pmo-records/.../TnsuApiService.ts`.
|
||||
@@ -0,0 +1,77 @@
|
||||
# kps-ct-form
|
||||
|
||||
## Summary
|
||||
|
||||
Short summary on functionality and used technologies.
|
||||
|
||||
[picture of the solution in action, if possible]
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
- [SharePoint Framework](https://aka.ms/spfx)
|
||||
- [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
> Any special pre-requisites?
|
||||
|
||||
## Solution
|
||||
|
||||
| Solution | Author(s) |
|
||||
| ----------- | ------------------------------------------------------- |
|
||||
| folder name | Author details (name, company, twitter alias with link) |
|
||||
|
||||
## Version history
|
||||
|
||||
| Version | Date | Comments |
|
||||
| ------- | ---------------- | --------------- |
|
||||
| 1.1 | March 10, 2021 | Update comment |
|
||||
| 1.0 | January 29, 2021 | Initial release |
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Ensure that you are at the solution folder
|
||||
- in the command-line run:
|
||||
- `npm install -g @rushstack/heft`
|
||||
- `npm install`
|
||||
- `heft start`
|
||||
|
||||
> Include any additional steps as needed.
|
||||
|
||||
Other build commands can be listed using `heft --help`.
|
||||
|
||||
## Features
|
||||
|
||||
Description of the extension that expands upon high-level summary above.
|
||||
|
||||
This extension illustrates the following concepts:
|
||||
|
||||
- topic 1
|
||||
- topic 2
|
||||
- topic 3
|
||||
|
||||
> Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance.
|
||||
|
||||
> Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.
|
||||
|
||||
## References
|
||||
|
||||
- [Getting started with SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
- [Building for Microsoft teams](https://docs.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview)
|
||||
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
|
||||
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||
- [Heft Documentation](https://heft.rushstack.io/)
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"kps-ct-form-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/kpsCtForm/KpsCtFormWebPart.js",
|
||||
"manifest": "./src/webparts/kpsCtForm/KpsCtFormWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"KpsCtFormWebPartStrings": "lib/webparts/kpsCtForm/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "kps-ct-form",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "kps-ct-form-client-side-solution",
|
||||
"id": "340fb0b3-70e1-4aba-904d-94651e35fe80",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
"webApiPermissionRequests": [
|
||||
{
|
||||
"resource": "9232d9e2-9807-4753-808f-07250e5474b0",
|
||||
"scope": "user_impersonation"
|
||||
},
|
||||
{
|
||||
"resource": "Microsoft Flow Service",
|
||||
"scope": "Flows.Read.All"
|
||||
}
|
||||
],
|
||||
"developer": {
|
||||
"name": "",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": "Undefined-1.22.2"
|
||||
},
|
||||
"metadata": {
|
||||
"shortDescription": {
|
||||
"default": "kps-ct-form description"
|
||||
},
|
||||
"longDescription": {
|
||||
"default": "kps-ct-form description"
|
||||
},
|
||||
"screenshotPaths": [],
|
||||
"videoUrl": "",
|
||||
"categories": []
|
||||
},
|
||||
"features": [
|
||||
{
|
||||
"title": "kps-ct-form Feature",
|
||||
"description": "The feature that activates elements of the kps-ct-form solution.",
|
||||
"id": "2161c099-d0c8-4e19-a596-6a93d09eb523",
|
||||
"version": "1.0.0.0"
|
||||
}
|
||||
]
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/kps-ct-form.sppkg"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
|
||||
"rigPackageName": "@microsoft/spfx-web-build-rig"
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json",
|
||||
"extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json"
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://tnsukz.sharepoint.com/sites/kps/_layouts/workbench.aspx"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json",
|
||||
"staticAssetsToCopy": {
|
||||
"fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"],
|
||||
"includeGlobs": ["webparts/*/loc/*.js"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
+282
@@ -0,0 +1,282 @@
|
||||
# =============================================================
|
||||
# SPFx + Heft project bootstrap script (PowerShell)
|
||||
# Запустите из корня вашей ПУСТОЙ папки проекта:
|
||||
# .\setup-spfx-heft.ps1
|
||||
#
|
||||
# Если запуск скриптов заблокирован, выполните сначала:
|
||||
# Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
|
||||
# =============================================================
|
||||
|
||||
$ErrorActionPreference = "Stop"
|
||||
|
||||
# ---- Цвета вывода ----
|
||||
function Info { param($msg) Write-Host "[INFO] $msg" -ForegroundColor Cyan }
|
||||
function Success { param($msg) Write-Host "[OK] $msg" -ForegroundColor Green }
|
||||
function Warn { param($msg) Write-Host "[WARN] $msg" -ForegroundColor Yellow }
|
||||
function Header { param($msg) Write-Host "`n$msg" -ForegroundColor White }
|
||||
|
||||
Header "================================================="
|
||||
Header " SPFx + Heft — автоматическая инициализация"
|
||||
Header "=================================================`n"
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 1. Проверка Node.js (SPFx 1.20+ требует Node 18+)
|
||||
# ---------------------------------------------------------
|
||||
Info "Проверка Node.js..."
|
||||
|
||||
try {
|
||||
$nodeVersion = node -e "process.stdout.write(process.version)" 2>&1
|
||||
} catch {
|
||||
Warn "Node.js не найден. Установите Node 18 LTS: https://nodejs.org"
|
||||
exit 1
|
||||
}
|
||||
|
||||
$nodeMajor = [int]($nodeVersion.TrimStart('v').Split('.')[0])
|
||||
if ($nodeMajor -lt 18) {
|
||||
Warn "Обнаружен Node.js $nodeVersion. SPFx 1.20+ требует Node 18.x или выше."
|
||||
Warn "Установите Node 18 LTS через nvm-windows или с https://nodejs.org"
|
||||
exit 1
|
||||
}
|
||||
Success "Node.js $nodeVersion — подходит."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 2. Вспомогательная функция: установка глобального пакета
|
||||
# ---------------------------------------------------------
|
||||
function Install-GlobalIfMissing {
|
||||
param(
|
||||
[string]$Package,
|
||||
[string]$Command = ""
|
||||
)
|
||||
if ($Command -eq "") { $Command = $Package.Split('/')[-1] }
|
||||
|
||||
if (-not (Get-Command $Command -ErrorAction SilentlyContinue)) {
|
||||
Info "Устанавливаем $Package глобально..."
|
||||
npm install -g $Package
|
||||
Success "$Package установлен."
|
||||
} else {
|
||||
Success "$Package уже установлен."
|
||||
}
|
||||
}
|
||||
|
||||
Install-GlobalIfMissing "@microsoft/generator-sharepoint" "yo"
|
||||
Install-GlobalIfMissing "yo" "yo"
|
||||
Install-GlobalIfMissing "@rushstack/heft" "heft"
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 3. Создание package.json
|
||||
# ---------------------------------------------------------
|
||||
Info "Создаём package.json..."
|
||||
|
||||
$packageJson = @'
|
||||
{
|
||||
"name": "spfx-heft-project",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "heft build",
|
||||
"bundle": "heft build && gulp bundle --ship",
|
||||
"package-solution": "heft build && gulp package-solution --ship",
|
||||
"serve": "heft build && gulp serve",
|
||||
"clean": "heft clean"
|
||||
},
|
||||
"overrides": {
|
||||
"ajv": "^8.0.0"
|
||||
}
|
||||
}
|
||||
'@
|
||||
|
||||
$packageJson | Set-Content -Encoding UTF8 "package.json"
|
||||
Success "package.json создан."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 4. Создание структуры папок
|
||||
# ---------------------------------------------------------
|
||||
Info "Создаём структуру папок..."
|
||||
New-Item -ItemType Directory -Force -Path "config" | Out-Null
|
||||
New-Item -ItemType Directory -Force -Path "src\webparts" | Out-Null
|
||||
Success "Папки созданы."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 5. Запуск Yeoman-генератора SPFx
|
||||
# ---------------------------------------------------------
|
||||
Info "Запускаем Yeoman-генератор SPFx..."
|
||||
Write-Host ""
|
||||
Write-Host ">>> Сейчас откроется интерактивный генератор Yeoman." -ForegroundColor Yellow
|
||||
Write-Host ">>> Выберите тип: WebPart, Framework: No framework (или React)." -ForegroundColor Yellow
|
||||
Write-Host ""
|
||||
|
||||
yo "@microsoft/sharepoint"
|
||||
|
||||
npm uninstall @microsoft/sp-build-web ajv gulp
|
||||
npm uninstall @microsoft/rush-stack-compiler-5.3
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 6. Установка Heft и Rush Stack зависимостей
|
||||
# ---------------------------------------------------------
|
||||
Info "Устанавливаем Heft и плагины..."
|
||||
|
||||
$devDeps = @(
|
||||
"@microsoft/spfx-web-build-rig@1.22.1",
|
||||
"@microsoft/spfx-heft-plugins@1.22.1",
|
||||
"@microsoft/eslint-config-spfx@1.22.1",
|
||||
"@microsoft/eslint-plugin-spfx@1.22.17",
|
||||
"@microsoft/sp-module-interfaces@1.22.1",
|
||||
"@rushstack/eslint-config@4.5.2",
|
||||
"@rushstack/heft@1.1.2",
|
||||
"@types/heft-jest@1.0.2",
|
||||
"@typescript-eslint/parser@8.46.2"
|
||||
)
|
||||
|
||||
npm install --save-dev @($devDeps) --save-exact --force --legacy-peer-deps
|
||||
npm install typescript@~5.8.0 --save-dev
|
||||
|
||||
Success "Heft и плагины установлены."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 7. config/rig.json
|
||||
# ---------------------------------------------------------
|
||||
Info "Создаём config\rig.json..."
|
||||
New-Item -ItemType Directory -Force -Path "config" | Out-Null
|
||||
|
||||
$rigJson = @'
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
|
||||
"rigPackageName": "@microsoft/spfx-web-build-rig"
|
||||
}
|
||||
'@
|
||||
|
||||
$rigJson | Set-Content -Encoding UTF8 "config\rig.json"
|
||||
Success "config\rig.json создан."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 8. config/sass.json
|
||||
# ---------------------------------------------------------
|
||||
Info "Создаём config\sass.json..."
|
||||
New-Item -ItemType Directory -Force -Path "config" | Out-Null
|
||||
|
||||
$sassJson = @'
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json",
|
||||
"extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json"
|
||||
}
|
||||
'@
|
||||
|
||||
$sassJson | Set-Content -Encoding UTF8 "config\sass.json"
|
||||
Success "config\sass.json создан."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 9. config/typescript.json
|
||||
# ---------------------------------------------------------
|
||||
Info "Создаём config\typescript.json..."
|
||||
New-Item -ItemType Directory -Force -Path "config" | Out-Null
|
||||
|
||||
$typescriptJson = @'
|
||||
{
|
||||
"extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json",
|
||||
"staticAssetsToCopy": {
|
||||
"fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"],
|
||||
"includeGlobs": ["webparts/*/loc/*.js"]
|
||||
}
|
||||
}
|
||||
'@
|
||||
|
||||
$typescriptJson | Set-Content -Encoding UTF8 "config\typescript.json"
|
||||
Success "config\typescript.json создан."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 8. tsconfig.json (если Yeoman ещё не создал)
|
||||
# ---------------------------------------------------------
|
||||
if (-not (Test-Path "tsconfig.json")) {
|
||||
Info "Создаём tsconfig.json..."
|
||||
|
||||
$tsConfig = @'
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json"
|
||||
}
|
||||
'@
|
||||
|
||||
$tsConfig | Set-Content -Encoding UTF8 "tsconfig.json"
|
||||
Success "tsconfig.json создан."
|
||||
} else {
|
||||
Success "tsconfig.json уже существует, пропускаем."
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 9. .eslintrc.js (если не создан)
|
||||
# ---------------------------------------------------------
|
||||
if (-not (Test-Path ".eslintrc.js")) {
|
||||
Info "Создаём .eslintrc.js..."
|
||||
|
||||
$eslintConfig = @'
|
||||
require('@rushstack/eslint-config/patch/modern-module-resolution');
|
||||
|
||||
module.exports = {
|
||||
extends: ['@microsoft/eslint-config-spfx/lib/profiles/default'],
|
||||
parserOptions: { tsconfigRootDir: __dirname }
|
||||
};
|
||||
'@
|
||||
|
||||
$eslintConfig | Set-Content -Encoding UTF8 ".eslintrc.js"
|
||||
Success ".eslintrc.js создан."
|
||||
} else {
|
||||
Success ".eslintrc.js уже существует, пропускаем."
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 10. .gitignore
|
||||
# ---------------------------------------------------------
|
||||
Info "Создаём .gitignore..."
|
||||
|
||||
$gitignore = @'
|
||||
node_modules/
|
||||
lib/
|
||||
dist/
|
||||
temp/
|
||||
*.sppkg
|
||||
.heft/
|
||||
sharepoint/solution/
|
||||
'@
|
||||
|
||||
$gitignore | Set-Content -Encoding UTF8 ".gitignore"
|
||||
Success ".gitignore создан."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# 11. Финальный npm install
|
||||
# ---------------------------------------------------------
|
||||
$devDeps = @(
|
||||
"@microsoft/sp-component-base@1.22.1",
|
||||
"@microsoft/sp-core-library@1.22.1",
|
||||
"@microsoft/sp-lodash-subset@1.22.1",
|
||||
"@microsoft/sp-office-ui-fabric-core@1.22.1",
|
||||
"@microsoft/sp-property-pane@1.22.1",
|
||||
"@microsoft/sp-webpart-base@1.22.1"
|
||||
)
|
||||
|
||||
Info "Финальный npm install..."
|
||||
npm install @($devDeps) --save-exact --legacy-peer-deps
|
||||
Success "Все зависимости установлены."
|
||||
|
||||
# ---------------------------------------------------------
|
||||
# Готово
|
||||
# ---------------------------------------------------------
|
||||
Write-Host ""
|
||||
Write-Host "=================================================" -ForegroundColor Green
|
||||
Write-Host " Проект успешно инициализирован!" -ForegroundColor Green
|
||||
Write-Host "=================================================" -ForegroundColor Green
|
||||
Write-Host ""
|
||||
Write-Host " Доступные команды:" -ForegroundColor White
|
||||
Write-Host ""
|
||||
Write-Host " npm run serve " -NoNewline -ForegroundColor Cyan
|
||||
Write-Host "— локальная разработка (gulp serve)"
|
||||
Write-Host " npm run build " -NoNewline -ForegroundColor Cyan
|
||||
Write-Host "— сборка через Heft"
|
||||
Write-Host " npm run bundle " -NoNewline -ForegroundColor Cyan
|
||||
Write-Host "— бандлинг для продакшна"
|
||||
Write-Host " npm run package-solution " -NoNewline -ForegroundColor Cyan
|
||||
Write-Host "— создание .sppkg пакета"
|
||||
Write-Host " npm run clean " -NoNewline -ForegroundColor Cyan
|
||||
Write-Host "— очистка артефактов сборки"
|
||||
Write-Host ""
|
||||
Write-Host " Следующий шаг: " -NoNewline -ForegroundColor Yellow
|
||||
Write-Host "npm run serve" -ForegroundColor Cyan
|
||||
Write-Host ""
|
||||
Generated
+20036
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "kps-ct-form",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=22.14.0 < 23.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "heft test --clean --production && heft package-solution --production",
|
||||
"start": "heft start --clean",
|
||||
"clean": "heft clean",
|
||||
"eject-webpack": "heft eject-webpack"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react": "^8.106.4",
|
||||
"@microsoft/sp-component-base": "1.22.1",
|
||||
"@microsoft/sp-core-library": "1.22.1",
|
||||
"@microsoft/sp-lodash-subset": "1.22.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.22.1",
|
||||
"@microsoft/sp-property-pane": "1.22.1",
|
||||
"@microsoft/sp-webpart-base": "1.22.1",
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1",
|
||||
"tslib": "2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/eslint-config-spfx": "1.22.2",
|
||||
"@microsoft/eslint-plugin-spfx": "1.22.2",
|
||||
"@microsoft/sp-module-interfaces": "1.22.2",
|
||||
"@microsoft/spfx-heft-plugins": "1.22.2",
|
||||
"@microsoft/spfx-web-build-rig": "1.22.2",
|
||||
"@rushstack/eslint-config": "4.5.2",
|
||||
"@rushstack/heft": "1.1.2",
|
||||
"@types/heft-jest": "1.0.2",
|
||||
"@types/react": "17.0.45",
|
||||
"@types/react-dom": "17.0.17",
|
||||
"@types/webpack-env": "~1.15.2",
|
||||
"@typescript-eslint/parser": "8.46.2",
|
||||
"css-loader": "~7.1.2",
|
||||
"eslint": "8.57.1",
|
||||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"typescript": "~5.8.0"
|
||||
},
|
||||
"overrides": {
|
||||
"@rushstack/heft": "1.1.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "17.0.45"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "62bec383-4744-4235-8d54-15d168e0282b",
|
||||
"alias": "KpsCtFormWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
|
||||
"supportsThemeVariants": true,
|
||||
|
||||
// Разрешает класть WebPart в полноширинную секцию страницы (full-bleed). См. §5.7 гайда.
|
||||
"supportsFullBleed": true,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
|
||||
"group": { "default": "Advanced" },
|
||||
"title": { "default": "kps-ct-form" },
|
||||
"description": { "default": "kps-ct-form description" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "kps-ct-form"
|
||||
}
|
||||
}]
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import { type IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
|
||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||
import { IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||
import { initializeIcons } from '@fluentui/react';
|
||||
|
||||
import * as strings from 'KpsCtFormWebPartStrings';
|
||||
import KpsCtForm from './components/KpsCtForm';
|
||||
import { IKpsCtFormProps } from './components/IKpsCtFormProps';
|
||||
|
||||
export interface IKpsCtFormWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
||||
// Точка входа: пробрасывает context, userDisplayName, isDarkTheme в React (§4).
|
||||
export default class KpsCtFormWebPart extends BaseClientSideWebPart<IKpsCtFormWebPartProps> {
|
||||
private _isDarkTheme: boolean = false;
|
||||
|
||||
// Регистрируем иконки Fluent (стрелки/галочки/загрузка). disableWarnings — на случай,
|
||||
// если хост-страница уже их зарегистрировала (иначе шумит в консоль).
|
||||
protected onInit(): Promise<void> {
|
||||
initializeIcons(undefined, { disableWarnings: true });
|
||||
return super.onInit();
|
||||
}
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IKpsCtFormProps> = React.createElement(KpsCtForm, {
|
||||
context: this.context,
|
||||
userDisplayName: this.context.pageContext.user.displayName,
|
||||
isDarkTheme: this._isDarkTheme
|
||||
});
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
|
||||
if (!currentTheme) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isDarkTheme = !!currentTheme.isInverted;
|
||||
const { semanticColors } = currentTheme;
|
||||
|
||||
if (semanticColors) {
|
||||
this.domElement.style.setProperty('--bodyText', semanticColors.bodyText || null);
|
||||
this.domElement.style.setProperty('--link', semanticColors.link || null);
|
||||
this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered || null);
|
||||
}
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField('description', {
|
||||
label: strings.DescriptionFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,71 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.stepper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
// Один шаг: кружок + подпись под ним.
|
||||
.step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 6px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $border-strong;
|
||||
background: $hover;
|
||||
color: $muted;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.completed {
|
||||
border-color: $ok;
|
||||
background: $ok;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.current {
|
||||
border-color: $accent;
|
||||
background: $accent;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: $muted;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.labelCurrent {
|
||||
color: $accent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Линия между кружками, выровнена по центру кружка (высота 28 → отступ ~13px).
|
||||
.connector {
|
||||
flex: 0 0 40px;
|
||||
height: 2px;
|
||||
margin-top: 13px;
|
||||
background: $border-strong;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import * as React from 'react';
|
||||
import { Icon } from '@fluentui/react';
|
||||
import styles from './Breadcrumbs.module.scss';
|
||||
import { FormStep, FormStepMeta } from '../types/domain';
|
||||
|
||||
export interface BreadcrumbsProps {
|
||||
steps: ReadonlyArray<FormStepMeta>;
|
||||
currentStep: FormStep;
|
||||
completedSteps: FormStep[];
|
||||
highestStep: FormStep; // максимально доступный шаг (§5.5)
|
||||
onStepClick: (step: FormStep) => void;
|
||||
}
|
||||
|
||||
// Степпер прогресса (эталон): кружки с номером/галочкой, подпись снизу, коннекторы между.
|
||||
// Кликабельны только шаги в пределах highestStep (§5.5).
|
||||
export function Breadcrumbs(props: BreadcrumbsProps): JSX.Element {
|
||||
const { steps, currentStep, completedSteps, highestStep, onStepClick } = props;
|
||||
|
||||
return (
|
||||
<nav className={styles.stepper} aria-label="Прогресс формы">
|
||||
{steps.map(({ step, label }, index) => {
|
||||
const isCompleted = completedSteps.indexOf(step) !== -1;
|
||||
const isCurrent = step === currentStep;
|
||||
const isNavigable = step <= highestStep;
|
||||
|
||||
const circleClass = [
|
||||
styles.circle,
|
||||
isCompleted ? styles.completed : '',
|
||||
isCurrent ? styles.current : ''
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<React.Fragment key={step}>
|
||||
{index > 0 ? <span className={styles.connector} /> : undefined}
|
||||
<button
|
||||
type="button"
|
||||
className={styles.step}
|
||||
disabled={!isNavigable}
|
||||
aria-current={isCurrent ? 'step' : undefined}
|
||||
onClick={() => onStepClick(step)}
|
||||
>
|
||||
<span className={circleClass}>
|
||||
{isCompleted ? <Icon iconName="CheckMark" /> : step}
|
||||
</span>
|
||||
<span className={isCurrent ? `${styles.label} ${styles.labelCurrent}` : styles.label}>{label}</span>
|
||||
</button>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||
|
||||
// Props корневого компонента: контекст SPFx + данные пользователя/темы (§4).
|
||||
export interface IKpsCtFormProps {
|
||||
context: WebPartContext;
|
||||
userDisplayName: string;
|
||||
isDarkTheme: boolean;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
// Full-width (§5.7): снимаем max-width канвы SharePoint и у воркбенча (dev), и на живой странице.
|
||||
// !important здесь оправдан — перебиваем встроенные стили канвы, иначе неотключаемые.
|
||||
// Если после обновления платформы ширина «вернётся» — проверить актуальные селекторы в DevTools.
|
||||
:global {
|
||||
#workbenchPageContent,
|
||||
.CanvasComponent.LCS .CanvasZone {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.root {
|
||||
min-height: 100vh; // тянем на всю высоту вьюпорта
|
||||
color: var(--bodyText);
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
// Единый вид состояний loading/error/empty (§8).
|
||||
.state {
|
||||
padding: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #a4262c;
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
import * as React from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import styles from './KpsCtForm.module.scss';
|
||||
import { IKpsCtFormProps } from './IKpsCtFormProps';
|
||||
import { KpsCtFormService } from '../services/KpsCtFormService';
|
||||
import { useKpsCtForm } from './hooks/useKpsCtForm';
|
||||
import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
|
||||
import { FormHeader } from './common/FormHeader';
|
||||
import { Step1SelectPositions } from './Step1SelectPositions/Step1SelectPositions';
|
||||
import { Step2LoadKp } from './Step2LoadKp/Step2LoadKp';
|
||||
import { Step3BuildCt } from './Step3BuildCt/Step3BuildCt';
|
||||
import { Step4Approval } from './Step4Approval/Step4Approval';
|
||||
import { loadFormState, readEntityFromUrl, sessionKey } from './utils/session';
|
||||
import {
|
||||
CtFormData,
|
||||
CtStatus,
|
||||
CT_STATUS_META,
|
||||
EMPTY_FORM_DATA,
|
||||
FORM_STEPS,
|
||||
FormStep,
|
||||
READ_ONLY_STATUSES,
|
||||
StepProps
|
||||
} from './types/domain';
|
||||
|
||||
// Главный контейнер (§4): мемоизирует сервис, держит стейт через хук, рендерит шаги.
|
||||
export default function KpsCtForm(props: IKpsCtFormProps): JSX.Element {
|
||||
const { context, userDisplayName } = props;
|
||||
|
||||
// Единственное место создания сервиса — мемоизируем на context (§5.3).
|
||||
const service = useMemo(() => new KpsCtFormService(context), [context]);
|
||||
|
||||
// id сущности и признак ссылки из уведомления читаем из URL один раз (§5.4).
|
||||
const url = useMemo(() => readEntityFromUrl(), []);
|
||||
|
||||
const form = useKpsCtForm(url.ctId);
|
||||
const { formData, currentStep, completedSteps, highestStep } = form;
|
||||
|
||||
// Загружаем свежие данные из SharePoint только если это ссылка из уведомления
|
||||
// ИЛИ в сессии пусто — иначе не затираем несохранённые правки (§5.4).
|
||||
const shouldLoadFromSp = useMemo(
|
||||
() => !!url.ctId && (url.isNotificationLink || loadFormState(sessionKey(url.ctId)) === undefined),
|
||||
[url.ctId, url.isNotificationLink]
|
||||
);
|
||||
|
||||
const spLoad = useSharePointLoad(service, form.replaceFormData, form.goToStep, form.markStepComplete, url, shouldLoadFromSp);
|
||||
|
||||
// Режимы отображения (§5.5): read-only по статусу + отдельный флаг ограниченного доступа.
|
||||
const status: CtStatus = deriveCtStatus(formData);
|
||||
const isReadOnly = READ_ONLY_STATUSES.indexOf(status) !== -1;
|
||||
const isRestrictedView = false; // TODO: включать по компании/роли пользователя.
|
||||
|
||||
if (spLoad.isLoading) {
|
||||
return <div className={styles.state}>Загрузка…</div>;
|
||||
}
|
||||
if (spLoad.error) {
|
||||
return <div className={`${styles.state} ${styles.error}`}>Ошибка загрузки: {spLoad.error}</div>;
|
||||
}
|
||||
|
||||
const stepProps: StepProps = {
|
||||
service,
|
||||
formData,
|
||||
onSave: form.updateFormData,
|
||||
onNext: form.next,
|
||||
onPrev: form.prev,
|
||||
onStepComplete: form.markStepComplete,
|
||||
isReadOnly,
|
||||
isRestrictedView,
|
||||
userDisplayName,
|
||||
isNotificationLink: url.isNotificationLink
|
||||
};
|
||||
|
||||
const title = formData.ctId ? `Сравнительная таблица №${formData.ctId}` : 'Новая сравнительная таблица';
|
||||
|
||||
return (
|
||||
<section className={styles.root}>
|
||||
<div className={styles.inner}>
|
||||
<FormHeader title={title} statusLabel={CT_STATUS_META[status].label} statusKind={CT_STATUS_META[status].kind} />
|
||||
<Breadcrumbs
|
||||
steps={FORM_STEPS}
|
||||
currentStep={currentStep}
|
||||
completedSteps={completedSteps}
|
||||
highestStep={highestStep}
|
||||
onStepClick={form.goToStep}
|
||||
/>
|
||||
{renderStep(currentStep, stepProps)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Рендер текущего шага. Все шаги получают единый контракт props (§5.2).
|
||||
function renderStep(step: FormStep, stepProps: StepProps): JSX.Element {
|
||||
switch (step) {
|
||||
case 1:
|
||||
return <Step1SelectPositions {...stepProps} />;
|
||||
case 2:
|
||||
return <Step2LoadKp {...stepProps} />;
|
||||
case 3:
|
||||
return <Step3BuildCt {...stepProps} />;
|
||||
case 4:
|
||||
return <Step4Approval {...stepProps} />;
|
||||
default:
|
||||
return <React.Fragment />;
|
||||
}
|
||||
}
|
||||
|
||||
// Деривация статуса сущности из цепочки согласования (§12).
|
||||
// TODO: реальная логика (pending/recommends/approved/rejected → статус СТ). Пока — статус из formData.
|
||||
function deriveCtStatus(formData: CtFormData): CtStatus {
|
||||
return formData.status;
|
||||
}
|
||||
|
||||
// Самый дальний «заполненный» шаг существующей СТ — для приземления при входе по URL (режим редактирования).
|
||||
// По фактическим данным реконструкции: цепочка/на согласовании → 4, есть офферы → 3, есть поставщики → 2,
|
||||
// иначе (есть позиции) → 1.
|
||||
function furthestFilledStep(data: CtFormData): FormStep {
|
||||
if (data.approvers.length > 0 || data.status === 'on_approval' || data.status === 'approved' || data.status === 'rejected') {
|
||||
return 4;
|
||||
}
|
||||
if (data.offers.length > 0) {
|
||||
return 3;
|
||||
}
|
||||
if (data.suppliers.length > 0) {
|
||||
return 2;
|
||||
}
|
||||
return 1;
|
||||
}
|
||||
|
||||
interface SpLoadState {
|
||||
isLoading: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// Подгрузка сущности из SharePoint (ссылка из уведомления / восстановление при пустой сессии).
|
||||
// Отменяет setState на unmount (§8). По уведомлению открывает Шаг 3 — он главный (§12).
|
||||
function useSharePointLoad(
|
||||
service: KpsCtFormService,
|
||||
replaceFormData: (data: CtFormData) => void,
|
||||
goToStep: (step: FormStep) => void,
|
||||
markStepComplete: (step: FormStep) => void,
|
||||
url: { ctId?: number; isNotificationLink: boolean },
|
||||
shouldLoad: boolean
|
||||
): SpLoadState {
|
||||
const [state, setState] = useState<SpLoadState>({ isLoading: shouldLoad });
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldLoad || !url.ctId) {
|
||||
return undefined;
|
||||
}
|
||||
let cancelled = false;
|
||||
setState({ isLoading: true });
|
||||
|
||||
const run = async (): Promise<void> => {
|
||||
try {
|
||||
const data = await service.loadCt(url.ctId as number);
|
||||
if (cancelled) {
|
||||
return;
|
||||
}
|
||||
const loaded = { ...EMPTY_FORM_DATA, ...data, ctId: url.ctId };
|
||||
replaceFormData(loaded);
|
||||
if (url.isNotificationLink) {
|
||||
// Согласующий по ссылке: открываем Шаг 3 (главный) и открываем навигацию — Шаги 1–3 к этому
|
||||
// моменту уже пройдены инициатором (СТ «на согласовании»), поэтому помечаем их пройденными
|
||||
// (→ highestStep=4, доступны все шаги), как в эталоне.
|
||||
goToStep(3);
|
||||
markStepComplete(1);
|
||||
markStepComplete(2);
|
||||
markStepComplete(3);
|
||||
} else {
|
||||
// Обычный вход по URL (режим редактирования): открываем навигацию по фактическому прогрессу
|
||||
// и приземляем на самый дальний заполненный шаг.
|
||||
const furthest = furthestFilledStep(loaded);
|
||||
for (let s = 1; s <= Math.min(furthest, 3); s++) {
|
||||
markStepComplete(s as FormStep);
|
||||
}
|
||||
if (loaded.status === 'approved' || loaded.status === 'rejected') {
|
||||
markStepComplete(4);
|
||||
}
|
||||
goToStep(furthest);
|
||||
}
|
||||
setState({ isLoading: false });
|
||||
} catch (error) {
|
||||
if (!cancelled) {
|
||||
setState({ isLoading: false, error: (error as Error).message });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// run() сам ловит ошибки внутрь state; .catch — чтобы промис не «висел» необработанным.
|
||||
run().catch(() => undefined);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [service, replaceFormData, goToStep, markStepComplete, url.ctId, url.isNotificationLink, shouldLoad]);
|
||||
|
||||
return state;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import * as React from 'react';
|
||||
import { Checkbox } from '@fluentui/react';
|
||||
import styles from './Step1SelectPositions.module.scss';
|
||||
import { PurchaseRequestDetail } from '../types/domain';
|
||||
import { UseStep1SelectionResult } from './useStep1Selection';
|
||||
|
||||
interface RequestLinesProps {
|
||||
detail: PurchaseRequestDetail;
|
||||
selection: UseStep1SelectionResult;
|
||||
disabled?: boolean; // форма только для чтения
|
||||
}
|
||||
|
||||
// Позиции (строки) заявки: таблица с чекбоксами. То, что попадёт в СТ.
|
||||
// Цены на Шаге 1 не показываем — они появятся на Шагах 2–3 (КП/сравнение).
|
||||
export function RequestLines({ detail, selection, disabled }: RequestLinesProps): JSX.Element {
|
||||
return (
|
||||
<div className={styles.lines}>
|
||||
<div className={`${styles.lineRow} ${styles.lineHead}`}>
|
||||
<span />
|
||||
<span>№</span>
|
||||
<span>Код</span>
|
||||
<span>Наименование</span>
|
||||
<span>Кат. №</span>
|
||||
<span>Кол-во</span>
|
||||
<span>Ед. изм.</span>
|
||||
</div>
|
||||
|
||||
{detail.lines.map((line) => (
|
||||
<div key={line.id} className={styles.lineRow}>
|
||||
<Checkbox
|
||||
checked={selection.selectedIds.has(line.id)}
|
||||
onChange={() => selection.toggleLine(detail, line)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<span>{line.lineNo}</span>
|
||||
<span>{line.code || '—'}</span>
|
||||
<span className={styles.lineName}>{line.name}</span>
|
||||
<span>{line.catalogNumber || '—'}</span>
|
||||
<span>{line.quantity}</span>
|
||||
<span>{line.unit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import * as React from 'react';
|
||||
import { Checkbox, Icon } from '@fluentui/react';
|
||||
import styles from './Step1SelectPositions.module.scss';
|
||||
import { Pill } from '../common/Pill';
|
||||
import { PurchaseRequest, PurchaseRequestDetail } from '../types/domain';
|
||||
import { RequestState } from '../hooks/useRequests';
|
||||
import { UseStep1SelectionResult } from './useStep1Selection';
|
||||
import { RequestLines } from './RequestLines';
|
||||
import { formatDateTime } from '../utils/format';
|
||||
|
||||
interface RequestRowProps {
|
||||
request: PurchaseRequest;
|
||||
expanded: boolean;
|
||||
disabled: boolean; // заявка другого проекта — выбор недоступен (фиксация одного проекта)
|
||||
detailState?: RequestState<PurchaseRequestDetail>;
|
||||
selection: UseStep1SelectionResult;
|
||||
isReadOnly?: boolean;
|
||||
onToggleExpand: () => void;
|
||||
onToggleSelectAll: () => void;
|
||||
}
|
||||
|
||||
// Раскрытое тело заявки: состояния загрузки/ошибки/пусто или таблица позиций (§8).
|
||||
function renderBody(
|
||||
detailState: RequestState<PurchaseRequestDetail> | undefined,
|
||||
selection: UseStep1SelectionResult,
|
||||
isReadOnly?: boolean
|
||||
): JSX.Element {
|
||||
if (!detailState || detailState.isLoading) {
|
||||
return <div className={styles.reqBody}>Загрузка позиций…</div>;
|
||||
}
|
||||
if (detailState.error) {
|
||||
return <div className={`${styles.reqBody} ${styles.error}`}>Ошибка: {detailState.error.message}</div>;
|
||||
}
|
||||
if (!detailState.data || detailState.data.lines.length === 0) {
|
||||
return <div className={styles.reqBody}>В заявке нет позиций.</div>;
|
||||
}
|
||||
return <RequestLines detail={detailState.data} selection={selection} disabled={isReadOnly} />;
|
||||
}
|
||||
|
||||
// Заявка (потребность) — строка таблицы + раскрытие в позиции по клику.
|
||||
export function RequestRow(props: RequestRowProps): JSX.Element {
|
||||
const { request, expanded, disabled, detailState, selection, isReadOnly, onToggleExpand, onToggleSelectAll } = props;
|
||||
|
||||
const detail = detailState?.data;
|
||||
const total = detail?.lines.length ?? 0;
|
||||
const allSelected = detail !== undefined && selection.isRequestFullySelected(detail);
|
||||
const someSelected = selection.selectedCountForRequest(request.id) > 0 && !allSelected;
|
||||
|
||||
const onKeyDown = (event: React.KeyboardEvent): void => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
onToggleExpand();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={disabled ? `${styles.request} ${styles.requestDisabled}` : styles.request}>
|
||||
<div
|
||||
className={styles.trow}
|
||||
role="button"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-expanded={expanded}
|
||||
onClick={disabled ? undefined : onToggleExpand}
|
||||
onKeyDown={disabled ? undefined : onKeyDown}
|
||||
>
|
||||
<span className={styles.cellCheck} onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={allSelected}
|
||||
indeterminate={someSelected}
|
||||
disabled={disabled || isReadOnly}
|
||||
onChange={onToggleSelectAll}
|
||||
/>
|
||||
</span>
|
||||
<Icon iconName={expanded ? 'ChevronDown' : 'ChevronRight'} className={styles.chevron} />
|
||||
<span className={styles.reqNumber}>{request.number}</span>
|
||||
<span className={styles.ellipsis}>{request.projectName || '—'}</span>
|
||||
<span className={styles.ellipsis}>{request.vehicleName || '—'}</span>
|
||||
<span className={styles.ellipsis}>{request.initiatorFullName || '—'}</span>
|
||||
<span>{formatDateTime(request.createdAt)}</span>
|
||||
<span className={styles.cellPositions}>{detail ? <Pill kind="neutral">{total}</Pill> : '—'}</span>
|
||||
</div>
|
||||
|
||||
{expanded ? renderBody(detailState, selection, isReadOnly) : undefined}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { Checkbox, Icon } from '@fluentui/react';
|
||||
import styles from './Step1SelectPositions.module.scss';
|
||||
import { Pill } from '../common/Pill';
|
||||
import { SelectedPosition } from '../types/domain';
|
||||
|
||||
interface Step1ReadOnlyViewProps {
|
||||
positions: SelectedPosition[];
|
||||
}
|
||||
|
||||
interface RequestGroup {
|
||||
key: string;
|
||||
number: string;
|
||||
projectName: string;
|
||||
positions: SelectedPosition[];
|
||||
}
|
||||
|
||||
// Группируем сохранённые позиции по номеру потребности. При реконструкции из SP requestId пустой,
|
||||
// поэтому ключ — requestNumber; если и он пуст — одна общая группа.
|
||||
function groupByRequest(positions: SelectedPosition[]): RequestGroup[] {
|
||||
const map = new Map<string, RequestGroup>();
|
||||
positions.forEach((p) => {
|
||||
const key = p.requestNumber || p.requestId || '—';
|
||||
const group = map.get(key);
|
||||
if (group) {
|
||||
group.positions.push(p);
|
||||
} else {
|
||||
map.set(key, { key, number: p.requestNumber || '—', projectName: p.projectName, positions: [p] });
|
||||
}
|
||||
});
|
||||
return Array.from(map.values());
|
||||
}
|
||||
|
||||
// Позиции группы (раскрытие потребности) — только для чтения. Цены на Шаге 1 не показываем.
|
||||
function ReadOnlyLines({ positions }: { positions: SelectedPosition[] }): JSX.Element {
|
||||
return (
|
||||
<div className={styles.lines}>
|
||||
<div className={`${styles.lineRow} ${styles.lineHead}`}>
|
||||
<span />
|
||||
<span>№</span>
|
||||
<span>Код</span>
|
||||
<span>Наименование</span>
|
||||
<span>Кат. №</span>
|
||||
<span>Кол-во</span>
|
||||
<span>Ед. изм.</span>
|
||||
</div>
|
||||
|
||||
{positions.map((p, i) => (
|
||||
<div key={p.lineId} className={styles.lineRow}>
|
||||
<Checkbox checked disabled />
|
||||
<span>{i + 1}</span>
|
||||
<span>{p.code || '—'}</span>
|
||||
<span className={styles.lineName}>{p.name}</span>
|
||||
<span>{p.catalogNumber || '—'}</span>
|
||||
<span>{p.quantity}</span>
|
||||
<span>{p.unit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Шаг 1 в режиме просмотра готовой СТ: таблица строится из сохранённых позиций (formData),
|
||||
// БЕЗ обращения к API заявок. Иначе показывались бы актуальные заявки за последние N дней, не
|
||||
// относящиеся к этой СТ (у сохранённых позиций ключ = SP Id, а не lineId из API — не сматчить).
|
||||
export function Step1ReadOnlyView({ positions }: Step1ReadOnlyViewProps): JSX.Element {
|
||||
const [expanded, setExpanded] = useState<Set<string>>(new Set());
|
||||
|
||||
if (positions.length === 0) {
|
||||
return <p className={styles.state}>В этой СТ нет сохранённых позиций.</p>;
|
||||
}
|
||||
|
||||
const groups = groupByRequest(positions);
|
||||
const projectName = positions[0].projectName;
|
||||
|
||||
const toggle = (key: string): void => {
|
||||
setExpanded((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.add(key);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const onKeyDown = (event: React.KeyboardEvent, key: string): void => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
toggle(key);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.lockBanner}>
|
||||
Проект: <b>{projectName || '—'}</b>. Позиций в СТ: {positions.length}.
|
||||
</div>
|
||||
|
||||
<div className={styles.tableScroll}>
|
||||
<div className={styles.table}>
|
||||
<div className={`${styles.trow} ${styles.thead}`}>
|
||||
<span />
|
||||
<span />
|
||||
<span>№ потребности</span>
|
||||
<span>Проект</span>
|
||||
<span>Техника</span>
|
||||
<span>Инициатор</span>
|
||||
<span>Дата создания</span>
|
||||
<span className={styles.cellPositions}>Позиций</span>
|
||||
</div>
|
||||
|
||||
{groups.map((group) => (
|
||||
<div key={group.key} className={styles.request}>
|
||||
<div
|
||||
className={styles.trow}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-expanded={expanded.has(group.key)}
|
||||
onClick={() => toggle(group.key)}
|
||||
onKeyDown={(e) => onKeyDown(e, group.key)}
|
||||
>
|
||||
<span className={styles.cellCheck} onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox checked disabled />
|
||||
</span>
|
||||
<Icon iconName={expanded.has(group.key) ? 'ChevronDown' : 'ChevronRight'} className={styles.chevron} />
|
||||
<span className={styles.reqNumber}>{group.number}</span>
|
||||
<span className={styles.ellipsis}>{group.projectName || '—'}</span>
|
||||
<span className={styles.ellipsis}>—</span>
|
||||
<span className={styles.ellipsis}>—</span>
|
||||
<span>—</span>
|
||||
<span className={styles.cellPositions}>
|
||||
<Pill kind="neutral">{group.positions.length}</Pill>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{expanded.has(group.key) ? <ReadOnlyLines positions={group.positions} /> : undefined}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+148
@@ -0,0 +1,148 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Состояния списка (loading/error/empty), §8.
|
||||
.state {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.lockBanner {
|
||||
padding: 8px 12px;
|
||||
border-left: 3px solid $accent;
|
||||
background: $accent-bg;
|
||||
color: $text;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footHint {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// --- Таблица заявок ---
|
||||
|
||||
.tableScroll {
|
||||
overflow-x: auto;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table {
|
||||
min-width: 900px; // ниже — горизонтальный скролл, чтобы колонки не схлопывались
|
||||
}
|
||||
|
||||
// Общий грид строки: [чекбокс][стрелка] № | проект | техника | инициатор | дата | позиций.
|
||||
.trow {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 24px 140px minmax(140px, 1fr) minmax(160px, 1.4fr) 160px 140px 90px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.thead {
|
||||
background: $head-bg;
|
||||
font-weight: 600;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
// Строка-потребность.
|
||||
.request {
|
||||
border-top: 1px solid $border;
|
||||
|
||||
.trow {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.requestDisabled {
|
||||
opacity: 0.5;
|
||||
|
||||
.trow {
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cellCheck {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
font-size: 12px;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.reqNumber {
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
// Обрезаем длинные значения многоточием (проект/техника/инициатор).
|
||||
.ellipsis {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.cellPositions {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// --- Позиции (раскрытие заявки) ---
|
||||
|
||||
.reqBody {
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid $border;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.lines {
|
||||
border-top: 1px solid $border;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
// Табличная строка позиции: [чекбокс] № | код | наименование | кат.№ | кол-во | ед. изм.
|
||||
.lineRow {
|
||||
display: grid;
|
||||
grid-template-columns: 36px 44px 130px minmax(180px, 1fr) 120px 90px 90px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
border-top: 1px solid $border;
|
||||
font-size: 13px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.lineHead {
|
||||
color: $muted;
|
||||
font-weight: 600;
|
||||
background: $head-bg;
|
||||
}
|
||||
|
||||
.lineName {
|
||||
font-variant-numeric: normal;
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
import * as React from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { StepShell } from '../common/StepShell';
|
||||
import { PurchaseRequest, StepProps } from '../types/domain';
|
||||
import { useRequests } from '../hooks/useRequests';
|
||||
import { usePurchaseRequestDetails } from '../hooks/usePurchaseRequestDetails';
|
||||
import { useStep1Selection } from './useStep1Selection';
|
||||
import { RequestRow } from './RequestRow';
|
||||
import { Step1ReadOnlyView } from './Step1ReadOnlyView';
|
||||
import styles from './Step1SelectPositions.module.scss';
|
||||
|
||||
// Шаг 1 «Выбор позиций» (§12): таблица заявок TNSU → раскрытие в позиции → выбор строк.
|
||||
// Все выбранные позиции — из одного проекта; выбор живёт в formData (источник истины).
|
||||
export function Step1SelectPositions(props: StepProps): JSX.Element {
|
||||
const { service, formData, onSave, onNext, onStepComplete, isReadOnly } = props;
|
||||
|
||||
// В режиме просмотра готовой СТ в API заявок НЕ ходим — таблица строится из сохранённых позиций
|
||||
// (Step1ReadOnlyView). Иначе показывались бы актуальные заявки, не относящиеся к этой СТ.
|
||||
const requests = useRequests<PurchaseRequest[]>(
|
||||
() => (isReadOnly ? Promise.resolve([]) : service.getPurchaseRequests()),
|
||||
[service, isReadOnly]
|
||||
);
|
||||
const { details, loadDetail } = usePurchaseRequestDetails(service);
|
||||
const selection = useStep1Selection(formData, onSave);
|
||||
|
||||
const [expanded, setExpanded] = useState<Set<string>>(new Set());
|
||||
// Заявки, у которых по чекбоксу «выбрать все» ждём догрузки позиций, чтобы выделить их.
|
||||
const [pendingSelectAll, setPendingSelectAll] = useState<Set<string>>(new Set());
|
||||
// Создание СТ на «Далее»: индикатор + ошибка.
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | undefined>(undefined);
|
||||
|
||||
const openRequest = (id: string): void => {
|
||||
setExpanded((prev) => new Set(prev).add(id));
|
||||
loadDetail(id); // повторный вызов безопасен (кэш в хуке)
|
||||
};
|
||||
|
||||
const toggleExpand = (request: PurchaseRequest): void => {
|
||||
if (!expanded.has(request.id)) {
|
||||
openRequest(request.id);
|
||||
return;
|
||||
}
|
||||
setExpanded((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(request.id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleSelectAll = (request: PurchaseRequest): void => {
|
||||
const detail = details[request.id]?.data;
|
||||
if (detail) {
|
||||
selection.toggleAllLines(detail);
|
||||
return;
|
||||
}
|
||||
// Позиции ещё не загружены — раскрываем, грузим и выбираем все по готовности.
|
||||
openRequest(request.id);
|
||||
setPendingSelectAll((prev) => new Set(prev).add(request.id));
|
||||
};
|
||||
|
||||
// Догруженные заявки из очереди «выбрать все» — выделяем и убираем из очереди.
|
||||
useEffect(() => {
|
||||
if (pendingSelectAll.size === 0) {
|
||||
return;
|
||||
}
|
||||
const done: string[] = [];
|
||||
pendingSelectAll.forEach((id) => {
|
||||
const detail = details[id]?.data;
|
||||
if (detail) {
|
||||
selection.selectAllLines(detail);
|
||||
done.push(id);
|
||||
}
|
||||
});
|
||||
if (done.length > 0) {
|
||||
setPendingSelectAll((prev) => {
|
||||
const next = new Set(prev);
|
||||
done.forEach((id) => next.delete(id));
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}, [details, pendingSelectAll, selection]);
|
||||
|
||||
const handleNext = (): void => {
|
||||
// СТ уже создана (повторный вход) или read-only — просто идём дальше, без повторного POST.
|
||||
if (formData.ctId || isReadOnly) {
|
||||
onStepComplete(1);
|
||||
onNext?.();
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setSaveError(undefined);
|
||||
service
|
||||
.createCt(formData)
|
||||
.then(({ ctId, positionSpIds }) => {
|
||||
// сохраняем SP Id созданных позиций в formData — нужны для офферов на Шаге 3
|
||||
const selectedPositions = formData.selectedPositions.map((p) => ({ ...p, spId: positionSpIds[p.lineId] }));
|
||||
onSave({ ctId, status: 'draft', selectedPositions }); // ctId → в URL (эффект хука), форма продолжится после перезагрузки
|
||||
onStepComplete(1);
|
||||
onNext?.();
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
setSaveError(e.message);
|
||||
setSaving(false); // при успехе шаг сменится — стейт не трогаем (размонтирование)
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<StepShell
|
||||
title="Выбор позиций"
|
||||
onNext={handleNext}
|
||||
nextLabel={saving ? 'Создание…' : isReadOnly ? 'Далее' : 'Создать и далее'}
|
||||
nextDisabled={saving || (!isReadOnly && selection.selectedCount === 0)}
|
||||
>
|
||||
{isReadOnly ? <Step1ReadOnlyView positions={formData.selectedPositions} /> : renderBody()}
|
||||
</StepShell>
|
||||
);
|
||||
|
||||
function renderBody(): JSX.Element {
|
||||
if (requests.isLoading) {
|
||||
return <p className={styles.state}>Загрузка заявок…</p>;
|
||||
}
|
||||
if (requests.error) {
|
||||
return <p className={`${styles.state} ${styles.error}`}>Ошибка загрузки заявок: {requests.error.message}</p>;
|
||||
}
|
||||
const list = requests.data ?? [];
|
||||
if (list.length === 0) {
|
||||
return <p className={styles.state}>Заявок на закупку нет.</p>;
|
||||
}
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
{selection.lockedProjectName ? (
|
||||
<div className={styles.lockBanner}>
|
||||
Проект зафиксирован: <b>{selection.lockedProjectName}</b>. Позиции — только из него. Выбрано позиций:{' '}
|
||||
{selection.selectedCount}.
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
<div className={styles.tableScroll}>
|
||||
<div className={styles.table}>
|
||||
<div className={`${styles.trow} ${styles.thead}`}>
|
||||
<span />
|
||||
<span />
|
||||
<span>№ потребности</span>
|
||||
<span>Проект</span>
|
||||
<span>Техника</span>
|
||||
<span>Инициатор</span>
|
||||
<span>Дата создания</span>
|
||||
<span className={styles.cellPositions}>Позиций</span>
|
||||
</div>
|
||||
|
||||
{list.map((request) => (
|
||||
<RequestRow
|
||||
key={request.id}
|
||||
request={request}
|
||||
expanded={expanded.has(request.id)}
|
||||
disabled={!!selection.lockedProjectName && request.projectName !== selection.lockedProjectName}
|
||||
detailState={details[request.id]}
|
||||
selection={selection}
|
||||
isReadOnly={isReadOnly}
|
||||
onToggleExpand={() => toggleExpand(request)}
|
||||
onToggleSelectAll={() => toggleSelectAll(request)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{saveError ? (
|
||||
<p className={`${styles.state} ${styles.error}`}>Не удалось создать СТ: {saveError}</p>
|
||||
) : undefined}
|
||||
|
||||
<p className={styles.footHint}>Выберите позиции для формирования СТ.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import {
|
||||
CtFormData,
|
||||
PurchaseRequestDetail,
|
||||
PurchaseRequestLine,
|
||||
SelectedPosition
|
||||
} from '../types/domain';
|
||||
|
||||
export interface UseStep1SelectionResult {
|
||||
selectedIds: Set<string>; // id выбранных строк — для быстрой проверки в UI
|
||||
selectedCount: number;
|
||||
lockedProjectId?: string; // проект зафиксирован после первого выбора
|
||||
lockedProjectName?: string; // имя зафиксированного проекта (в списке заявок есть только имя)
|
||||
selectedCountForRequest: (requestId: string) => number; // для бейджа на свёрнутой строке
|
||||
isRequestFullySelected: (detail: PurchaseRequestDetail) => boolean;
|
||||
toggleLine: (detail: PurchaseRequestDetail, line: PurchaseRequestLine) => void;
|
||||
toggleAllLines: (detail: PurchaseRequestDetail) => void;
|
||||
selectAllLines: (detail: PurchaseRequestDetail) => void; // идемпотентно добавить все строки
|
||||
}
|
||||
|
||||
// Собираем позицию-снимок из строки заявки и её деталей.
|
||||
function toSelectedPosition(detail: PurchaseRequestDetail, line: PurchaseRequestLine): SelectedPosition {
|
||||
return {
|
||||
lineId: line.id,
|
||||
code: line.code,
|
||||
name: line.name,
|
||||
catalogNumber: line.catalogNumber,
|
||||
quantity: line.quantity,
|
||||
unit: line.unit,
|
||||
estimatedUnitPrice: line.estimatedUnitPrice,
|
||||
estimatedAmount: line.estimatedAmount,
|
||||
requestId: detail.id,
|
||||
requestNumber: detail.number,
|
||||
vehicleName: detail.vehicleName,
|
||||
projectId: detail.projectId,
|
||||
projectCode: detail.projectCode,
|
||||
projectName: detail.projectName
|
||||
};
|
||||
}
|
||||
|
||||
// Выбор позиций Шага 1. Источник истины — formData.selectedPositions (§5.1):
|
||||
// пишем через onSave, так выбор переживает переходы между шагами и персист в сессии.
|
||||
export function useStep1Selection(
|
||||
formData: CtFormData,
|
||||
onSave: (partial: Partial<CtFormData>) => void
|
||||
): UseStep1SelectionResult {
|
||||
const selected = formData.selectedPositions;
|
||||
const selectedIds = useMemo(() => new Set(selected.map((p) => p.lineId)), [selected]);
|
||||
|
||||
// Проект берём из первой выбранной позиции — все остальные обязаны совпадать (бизнес-правило).
|
||||
const first = selected[0];
|
||||
const lockedProjectId = first?.projectId;
|
||||
const lockedProjectName = first?.projectName;
|
||||
|
||||
// Сколько позиций выбрано у каждой заявки — считаем один раз на изменение выбора.
|
||||
const countByRequest = useMemo(() => {
|
||||
const acc: Record<string, number> = {};
|
||||
selected.forEach((p) => {
|
||||
acc[p.requestId] = (acc[p.requestId] ?? 0) + 1;
|
||||
});
|
||||
return acc;
|
||||
}, [selected]);
|
||||
|
||||
const commit = useCallback(
|
||||
(next: SelectedPosition[]): void => {
|
||||
onSave({
|
||||
selectedPositions: next,
|
||||
lockedProjectId: next[0]?.projectId,
|
||||
selectedProject: next[0]?.projectName
|
||||
});
|
||||
},
|
||||
[onSave]
|
||||
);
|
||||
|
||||
const isRequestFullySelected = useCallback(
|
||||
(detail: PurchaseRequestDetail): boolean =>
|
||||
detail.lines.length > 0 && detail.lines.every((line) => selectedIds.has(line.id)),
|
||||
[selectedIds]
|
||||
);
|
||||
|
||||
const toggleLine = useCallback(
|
||||
(detail: PurchaseRequestDetail, line: PurchaseRequestLine): void => {
|
||||
if (selectedIds.has(line.id)) {
|
||||
commit(selected.filter((p) => p.lineId !== line.id));
|
||||
} else {
|
||||
commit([...selected, toSelectedPosition(detail, line)]);
|
||||
}
|
||||
},
|
||||
[selected, selectedIds, commit]
|
||||
);
|
||||
|
||||
const toggleAllLines = useCallback(
|
||||
(detail: PurchaseRequestDetail): void => {
|
||||
const lineIds = detail.lines.map((line) => line.id);
|
||||
if (isRequestFullySelected(detail)) {
|
||||
commit(selected.filter((p) => lineIds.indexOf(p.lineId) === -1));
|
||||
} else {
|
||||
const additions = detail.lines
|
||||
.filter((line) => !selectedIds.has(line.id))
|
||||
.map((line) => toSelectedPosition(detail, line));
|
||||
commit([...selected, ...additions]);
|
||||
}
|
||||
},
|
||||
[selected, selectedIds, isRequestFullySelected, commit]
|
||||
);
|
||||
|
||||
const selectAllLines = useCallback(
|
||||
(detail: PurchaseRequestDetail): void => {
|
||||
const additions = detail.lines
|
||||
.filter((line) => !selectedIds.has(line.id))
|
||||
.map((line) => toSelectedPosition(detail, line));
|
||||
if (additions.length > 0) {
|
||||
commit([...selected, ...additions]);
|
||||
}
|
||||
},
|
||||
[selected, selectedIds, commit]
|
||||
);
|
||||
|
||||
const selectedCountForRequest = useCallback(
|
||||
(requestId: string): number => countByRequest[requestId] ?? 0,
|
||||
[countByRequest]
|
||||
);
|
||||
|
||||
return {
|
||||
selectedIds,
|
||||
selectedCount: selected.length,
|
||||
lockedProjectId,
|
||||
lockedProjectName,
|
||||
selectedCountForRequest,
|
||||
isRequestFullySelected,
|
||||
toggleLine,
|
||||
toggleAllLines,
|
||||
selectAllLines
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.presets {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.presetsLabel {
|
||||
font-size: 13px;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.presetBtn {
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nbkRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.error {
|
||||
flex: 1 1 220px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: $muted;
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 6px 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
tr:hover td {
|
||||
background: $head-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.code {
|
||||
display: inline-block;
|
||||
background: $border;
|
||||
color: $text;
|
||||
border-radius: 3px;
|
||||
padding: 2px 6px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rateInput {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.courseDate {
|
||||
color: $muted;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { DefaultButton, IconButton, MessageBar, MessageBarType, Spinner, SpinnerSize, TextField } from '@fluentui/react';
|
||||
import { CurrencyRate } from '../types/domain';
|
||||
import { formatDate } from '../utils/format';
|
||||
import styles from './CurrencyRatesForm.module.scss';
|
||||
|
||||
interface CurrencyRatesFormProps {
|
||||
rates: CurrencyRate[];
|
||||
onChange: (rates: CurrencyRate[]) => void;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
// Пресеты валют для быстрого добавления (name — для отображения; currency = код).
|
||||
const PRESET_CURRENCIES: Array<{ currency: string; name: string }> = [
|
||||
{ currency: 'USD', name: 'Доллар США' },
|
||||
{ currency: 'EUR', name: 'Евро' },
|
||||
{ currency: 'RUB', name: 'Российский рубль' },
|
||||
{ currency: 'CNY', name: 'Китайский юань' }
|
||||
];
|
||||
|
||||
// Бесплатный API курсов (без ключа): база USD, кросс-курсом считаем каждую валюту к KZT.
|
||||
const RATES_API_URL = 'https://open.er-api.com/v6/latest/USD';
|
||||
|
||||
// Блок «Курсы валют» Шага 2: добавление валют, ручной ввод курса и авто-подтягивание актуального курса.
|
||||
export function CurrencyRatesForm({ rates, onChange, readOnly = false }: CurrencyRatesFormProps): JSX.Element {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
|
||||
const addCurrency = (preset: { currency: string; name: string }): void => {
|
||||
if (rates.some((r) => r.currency === preset.currency)) {
|
||||
return;
|
||||
}
|
||||
onChange([...rates, { currency: preset.currency, name: preset.name, rate: 0 }]);
|
||||
};
|
||||
|
||||
const updateRate = (currency: string, value: string): void => {
|
||||
const parsed = parseFloat(value.replace(',', '.'));
|
||||
// Дата курса = момент ручного ввода (когда курс зафиксирован пользователем).
|
||||
const now = new Date().toISOString();
|
||||
onChange(
|
||||
rates.map((r) => (r.currency === currency ? { ...r, rate: isNaN(parsed) ? 0 : parsed, courseDate: now } : r))
|
||||
);
|
||||
};
|
||||
|
||||
const removeRate = (currency: string): void => {
|
||||
onChange(rates.filter((r) => r.currency !== currency));
|
||||
};
|
||||
|
||||
const fetchLiveRates = (): void => {
|
||||
if (rates.length === 0) {
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(undefined);
|
||||
fetch(RATES_API_URL)
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP ${res.status}`);
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then((data: { result: string; rates: Record<string, number> }) => {
|
||||
const usdToKzt = data.rates?.KZT;
|
||||
if (data.result !== 'success' || !usdToKzt) {
|
||||
throw new Error('Курс не получен');
|
||||
}
|
||||
// Дата курса = момент запроса актуального курса.
|
||||
const now = new Date().toISOString();
|
||||
onChange(
|
||||
rates.map((r) => {
|
||||
const rateToUsd = data.rates[r.currency];
|
||||
if (!rateToUsd) {
|
||||
return r;
|
||||
}
|
||||
const rateToKzt = r.currency === 'USD' ? usdToKzt : usdToKzt / rateToUsd;
|
||||
return { ...r, rate: Math.round(rateToKzt * 100) / 100, courseDate: now };
|
||||
})
|
||||
);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setError('Не удалось получить курсы. Проверьте подключение к интернету.');
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const presetsToShow = PRESET_CURRENCIES.filter((p) => !rates.some((r) => r.currency === p.currency));
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
{!readOnly ? (
|
||||
<p className={styles.hint}>Укажите курсы валют к тенге. Если все КП в тенге — оставьте пустым.</p>
|
||||
) : undefined}
|
||||
|
||||
{!readOnly && presetsToShow.length > 0 ? (
|
||||
<div className={styles.presets}>
|
||||
<span className={styles.presetsLabel}>Добавить:</span>
|
||||
{presetsToShow.map((p) => (
|
||||
<DefaultButton key={p.currency} className={styles.presetBtn} onClick={() => addCurrency(p)}>
|
||||
{p.currency} — {p.name}
|
||||
</DefaultButton>
|
||||
))}
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{!readOnly && rates.length > 0 ? (
|
||||
<div className={styles.nbkRow}>
|
||||
<DefaultButton iconProps={loading ? undefined : { iconName: 'Download' }} onClick={fetchLiveRates} disabled={loading}>
|
||||
{loading ? <Spinner size={SpinnerSize.small} /> : 'Получить актуальный курс'}
|
||||
</DefaultButton>
|
||||
{error ? (
|
||||
<MessageBar messageBarType={MessageBarType.error} isMultiline={false} className={styles.error}>
|
||||
{error}
|
||||
</MessageBar>
|
||||
) : undefined}
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{rates.length === 0 ? (
|
||||
<p className={styles.muted}>Все предложения в тенге (KZT).</p>
|
||||
) : (
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Валюта</th>
|
||||
<th>Код</th>
|
||||
<th>Курс к KZT</th>
|
||||
<th>Дата курса</th>
|
||||
{!readOnly ? <th /> : undefined}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rates.map((rate) => (
|
||||
<tr key={rate.currency}>
|
||||
<td>{rate.name ?? rate.currency}</td>
|
||||
<td>
|
||||
<span className={styles.code}>{rate.currency}</span>
|
||||
</td>
|
||||
<td>
|
||||
{readOnly ? (
|
||||
<span>{rate.rate === 0 ? '—' : `${rate.rate} KZT`}</span>
|
||||
) : (
|
||||
<TextField
|
||||
value={rate.rate === 0 ? '' : String(rate.rate)}
|
||||
onChange={(_, val) => updateRate(rate.currency, val ?? '')}
|
||||
placeholder="0.00"
|
||||
suffix="KZT"
|
||||
className={styles.rateInput}
|
||||
ariaLabel={`Курс ${rate.currency} к KZT`}
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
<span className={styles.courseDate}>{formatDate(rate.courseDate)}</span>
|
||||
</td>
|
||||
{!readOnly ? (
|
||||
<td>
|
||||
<IconButton iconProps={{ iconName: 'Delete' }} title={`Удалить ${rate.currency}`} onClick={() => removeRate(rate.currency)} />
|
||||
</td>
|
||||
) : undefined}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.fileList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.fileItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fileIcon {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.fileName {
|
||||
color: $text;
|
||||
text-decoration: none;
|
||||
|
||||
&[href]:hover {
|
||||
color: $accent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 1px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
background: $head-bg;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.badge_done {
|
||||
background: $ok-bg;
|
||||
color: $ok;
|
||||
}
|
||||
|
||||
.badge_error {
|
||||
background: $danger-bg;
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.progress {
|
||||
color: $muted;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.supplierTag {
|
||||
padding: 1px 8px;
|
||||
border-radius: 10px;
|
||||
background: $accent-bg;
|
||||
color: $accent;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.currency {
|
||||
padding: 2px 6px;
|
||||
border: 1px solid $border-strong;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.errorMsg {
|
||||
color: $danger;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.removeBtn {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: $muted;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import * as React from 'react';
|
||||
import { Icon, Spinner, SpinnerSize } from '@fluentui/react';
|
||||
import { KpFile, KpFileStatus } from './kpTypes';
|
||||
import styles from './KpFileList.module.scss';
|
||||
|
||||
// Список загруженных файлов КП со статусом обработки (заливка/Syntex/поток), поставщиком и валютой.
|
||||
// Презентационный компонент: всё поведение приходит через props (стайл-гайд).
|
||||
|
||||
interface Props {
|
||||
files: KpFile[];
|
||||
currencyOptions: string[];
|
||||
onRemove: (localId: string) => void;
|
||||
onCurrencyChange: (localId: string, currency: string) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const STATUS_LABEL: Record<KpFileStatus, string> = {
|
||||
uploading: 'Загрузка…',
|
||||
extracting: 'Обработка…',
|
||||
flowing: 'Разбор КП…',
|
||||
done: 'Готово',
|
||||
error: 'Ошибка'
|
||||
};
|
||||
|
||||
const isBusy = (status: KpFileStatus): boolean =>
|
||||
status === 'uploading' || status === 'extracting' || status === 'flowing';
|
||||
|
||||
// Модификатор-класс бейджа задан только для done/error; для остальных — только базовый.
|
||||
const badgeModifier = (status: KpFileStatus): string =>
|
||||
status === 'done' ? styles.badge_done : status === 'error' ? styles.badge_error : '';
|
||||
|
||||
// Родитель рендерит список только при непустом files (см. Step2LoadKp).
|
||||
export function KpFileList(props: Props): JSX.Element {
|
||||
const { files, currencyOptions, onRemove, onCurrencyChange, disabled } = props;
|
||||
|
||||
return (
|
||||
<ul className={styles.fileList}>
|
||||
{files.map((f) => (
|
||||
<li key={f.localId} className={styles.fileItem}>
|
||||
<Icon iconName="TextDocument" className={styles.fileIcon} />
|
||||
{f.url ? (
|
||||
<a className={styles.fileName} href={f.url} target="_blank" rel="noreferrer">
|
||||
{f.file.name}
|
||||
</a>
|
||||
) : (
|
||||
<span className={styles.fileName}>{f.file.name}</span>
|
||||
)}
|
||||
|
||||
<span className={`${styles.badge} ${badgeModifier(f.status)}`.trim()}>
|
||||
{isBusy(f.status) ? <Spinner size={SpinnerSize.xSmall} className={styles.spinner} /> : undefined}
|
||||
{STATUS_LABEL[f.status]}
|
||||
</span>
|
||||
|
||||
{f.status === 'flowing' && f.flowTotal > 0 ? (
|
||||
<span className={styles.progress}>
|
||||
{f.flowDone}/{f.flowTotal} позиций
|
||||
</span>
|
||||
) : undefined}
|
||||
|
||||
{f.supplierName ? <span className={styles.supplierTag}>{f.supplierName}</span> : undefined}
|
||||
|
||||
{f.status === 'done' && currencyOptions.length > 0 ? (
|
||||
<select
|
||||
className={styles.currency}
|
||||
value={f.currencyCode}
|
||||
onChange={(e) => onCurrencyChange(f.localId, e.currentTarget.value)}
|
||||
aria-label={`Валюта КП ${f.file.name}`}
|
||||
disabled={disabled}
|
||||
>
|
||||
{currencyOptions.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : undefined}
|
||||
|
||||
{f.error ? <span className={styles.errorMsg}>{f.error}</span> : undefined}
|
||||
|
||||
{!disabled && !isBusy(f.status) ? (
|
||||
<button type="button" className={styles.removeBtn} onClick={() => onRemove(f.localId)} title="Удалить файл">
|
||||
✕
|
||||
</button>
|
||||
) : undefined}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 32px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
// Узкий экран — колонки в одну.
|
||||
@media (max-width: 900px) {
|
||||
.grid2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Заголовок секции с разделительной линией снизу (как в эталоне).
|
||||
.h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: $danger;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// --- Зона загрузки ---
|
||||
|
||||
.dropzone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 40px 24px;
|
||||
border: 2px dashed $border-strong;
|
||||
border-radius: 8px;
|
||||
background: $head-bg;
|
||||
color: $muted;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
|
||||
&:hover {
|
||||
border-color: $accent;
|
||||
background: $accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropzoneOver {
|
||||
border-color: $accent;
|
||||
background: $accent-bg;
|
||||
}
|
||||
|
||||
.dropzoneDisabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
border-color: $border-strong;
|
||||
background: $head-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropIcon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: #a19f9d;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.dropText {
|
||||
font-size: 14px;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $accent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.formats {
|
||||
font-size: 12px;
|
||||
color: #a19f9d;
|
||||
}
|
||||
|
||||
.hiddenInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fileList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.fileItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fileIcon {
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
// --- Курсы валют ---
|
||||
|
||||
.rateList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.rateItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// --- Поставщики без КП ---
|
||||
|
||||
.supplierForm {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.supplierName {
|
||||
flex: 1 1 260px;
|
||||
}
|
||||
|
||||
.supplierComment {
|
||||
flex: 1 1 200px;
|
||||
}
|
||||
|
||||
.supplierList {
|
||||
list-style: none;
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.supplierItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
background: $head-bg;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.supplierItemName {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.supplierItemComment {
|
||||
color: $muted;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.removeBtn {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: $muted;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
import * as React from 'react';
|
||||
import { useRef, useState } from 'react';
|
||||
import { MessageBar, MessageBarType } from '@fluentui/react';
|
||||
import { StepShell } from '../common/StepShell';
|
||||
import { StepProps } from '../types/domain';
|
||||
import { SuppliersWithoutKp } from './SuppliersWithoutKp';
|
||||
import { CurrencyRatesForm } from './CurrencyRatesForm';
|
||||
import { KpFileList } from './KpFileList';
|
||||
import { UploadedKpList } from './UploadedKpList';
|
||||
import { useKpProcessing } from './useKpProcessing';
|
||||
import { persistStep2 } from './step2Persist';
|
||||
import styles from './Step2LoadKp.module.scss';
|
||||
|
||||
const ACCEPTED_FORMATS = '.pdf,.docx,.doc';
|
||||
|
||||
// Шаг 2 «Загрузка КП»: заливка коммерческих предложений в библиотеку, обработка потоком (Syntex →
|
||||
// поток по позициям → офферы), курсы валют, поставщики без КП. Конвейер — в useKpProcessing/kpPipeline;
|
||||
// запись на «Далее» — в step2Persist. Компонент только компонует блоки и колбэки (стайл-гайд).
|
||||
export function Step2LoadKp(props: StepProps): JSX.Element {
|
||||
const { service, formData, onSave, onPrev, onNext, onStepComplete, isReadOnly } = props;
|
||||
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | undefined>(undefined);
|
||||
|
||||
const { kpFiles, isProcessing, duplicateWarning, addFiles, removeFile, setCurrency } = useKpProcessing(
|
||||
service,
|
||||
formData,
|
||||
!!isReadOnly
|
||||
);
|
||||
|
||||
const suppliers = formData.suppliers ?? [];
|
||||
const withOffer = suppliers.filter((s) => s.hasOffer !== false); // поставщики с КП — не трогаем здесь
|
||||
const noKp = suppliers.filter((s) => s.hasOffer === false); // поставщики без КП (блок ниже)
|
||||
|
||||
const rates = formData.currencyRates ?? [];
|
||||
const currencyOptions = ['KZT', ...rates.filter((r) => r.currency !== 'KZT').map((r) => r.currency)];
|
||||
|
||||
// Постоянный список КП (из formData) минус файлы текущей сессии (они уже видны в KpFileList со статусом).
|
||||
const uploadedKp = (formData.uploadedKpFiles ?? []).filter((u) => !kpFiles.some((f) => f.file.name === u.name));
|
||||
const removeUploaded = (spId: number): void =>
|
||||
onSave({ uploadedKpFiles: (formData.uploadedKpFiles ?? []).filter((u) => u.spId !== spId) });
|
||||
|
||||
const pickFiles = (list: FileList | null): void => {
|
||||
if (list && list.length > 0) {
|
||||
addFiles(Array.from(list));
|
||||
}
|
||||
};
|
||||
|
||||
const onDrop = (event: React.DragEvent): void => {
|
||||
event.preventDefault();
|
||||
setDragOver(false);
|
||||
if (!isReadOnly) {
|
||||
pickFiles(event.dataTransfer.files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = (): void => {
|
||||
if (isReadOnly) {
|
||||
onStepComplete(2);
|
||||
onNext?.();
|
||||
return;
|
||||
}
|
||||
if (isProcessing) {
|
||||
return; // не уходим, пока файлы обрабатываются
|
||||
}
|
||||
setSaving(true);
|
||||
setSaveError(undefined);
|
||||
persistStep2({ service, ctId: formData.ctId, kpFiles, formData })
|
||||
.then((patch) => {
|
||||
onSave(patch);
|
||||
onStepComplete(2);
|
||||
onNext?.();
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
setSaveError(e.message);
|
||||
setSaving(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<StepShell
|
||||
title="Загрузка КП"
|
||||
onPrev={onPrev}
|
||||
onNext={handleNext}
|
||||
nextLabel={saving ? 'Сохранение…' : 'Далее'}
|
||||
nextDisabled={saving || isProcessing}
|
||||
>
|
||||
<div className={styles.body}>
|
||||
<div className={styles.grid2}>
|
||||
<section className={styles.section}>
|
||||
<h3 className={styles.h3}>Загрузка коммерческих предложений</h3>
|
||||
|
||||
<div
|
||||
className={[styles.dropzone, dragOver ? styles.dropzoneOver : '', isReadOnly ? styles.dropzoneDisabled : '']
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
onClick={() => {
|
||||
if (!isReadOnly) {
|
||||
inputRef.current?.click();
|
||||
}
|
||||
}}
|
||||
onDragOver={(event) => {
|
||||
event.preventDefault();
|
||||
if (!isReadOnly) {
|
||||
setDragOver(true);
|
||||
}
|
||||
}}
|
||||
onDragLeave={() => setDragOver(false)}
|
||||
onDrop={onDrop}
|
||||
>
|
||||
<svg className={styles.dropIcon} viewBox="0 0 32 32" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M16 22V10M10 16l6-6 6 6"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<rect x="4" y="24" width="24" height="4" rx="2" fill="currentColor" opacity=".2" />
|
||||
</svg>
|
||||
<div className={styles.dropText}>
|
||||
Перетащите файлы или <span className={styles.link}>выберите на диске</span>
|
||||
</div>
|
||||
<div className={styles.formats}>Поддерживаемые форматы: .pdf, .docx, .doc</div>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept={ACCEPTED_FORMATS}
|
||||
className={styles.hiddenInput}
|
||||
onChange={(event) => pickFiles(event.currentTarget.files)}
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{duplicateWarning ? (
|
||||
<MessageBar messageBarType={MessageBarType.warning}>{duplicateWarning}</MessageBar>
|
||||
) : undefined}
|
||||
|
||||
{kpFiles.length > 0 ? (
|
||||
<KpFileList
|
||||
files={kpFiles}
|
||||
currencyOptions={currencyOptions}
|
||||
onRemove={removeFile}
|
||||
onCurrencyChange={setCurrency}
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
) : undefined}
|
||||
|
||||
{uploadedKp.length > 0 ? (
|
||||
<UploadedKpList files={uploadedKp} onRemove={isReadOnly ? undefined : removeUploaded} />
|
||||
) : undefined}
|
||||
</section>
|
||||
|
||||
<section className={styles.section}>
|
||||
<h3 className={styles.h3}>Курсы валют</h3>
|
||||
<CurrencyRatesForm rates={rates} onChange={(next) => onSave({ currencyRates: next })} readOnly={isReadOnly} />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<SuppliersWithoutKp
|
||||
items={noKp.map((s) => ({ name: s.name, comment: s.comment ?? '' }))}
|
||||
onChange={(items) =>
|
||||
onSave({
|
||||
suppliers: [
|
||||
...withOffer,
|
||||
...items.map((i) => ({ id: `nokp_${i.name}`, name: i.name, comment: i.comment, hasOffer: false }))
|
||||
]
|
||||
})
|
||||
}
|
||||
disabled={isReadOnly}
|
||||
/>
|
||||
|
||||
{saveError ? <p className={styles.error}>Не удалось сохранить Шаг 2: {saveError}</p> : undefined}
|
||||
</div>
|
||||
</StepShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { DefaultButton, TextField } from '@fluentui/react';
|
||||
import { NoKpSupplier } from '../types/domain';
|
||||
import styles from './Step2LoadKp.module.scss';
|
||||
|
||||
interface SuppliersWithoutKpProps {
|
||||
items: NoKpSupplier[]; // источник истины — formData.noKpSuppliers
|
||||
onChange: (items: NoKpSupplier[]) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
// Поставщики, не приславшие КП. Источник истины — formData (через onChange), запись в SP на «Далее».
|
||||
export function SuppliersWithoutKp({ items, onChange, disabled }: SuppliersWithoutKpProps): JSX.Element {
|
||||
const [name, setName] = useState('');
|
||||
const [comment, setComment] = useState('');
|
||||
|
||||
const add = (): void => {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) {
|
||||
return;
|
||||
}
|
||||
// Дедуп по имени (без учёта регистра) — тот же поставщик не добавляется дважды.
|
||||
if (items.some((i) => i.name.toLowerCase() === trimmed.toLowerCase())) {
|
||||
setName('');
|
||||
setComment('');
|
||||
return;
|
||||
}
|
||||
onChange([...items, { name: trimmed, comment: comment.trim() }]);
|
||||
setName('');
|
||||
setComment('');
|
||||
};
|
||||
|
||||
const remove = (index: number): void => {
|
||||
onChange(items.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<h3 className={styles.h3}>Поставщики без КП</h3>
|
||||
<p className={styles.hint}>Укажите поставщиков, которые не предоставили коммерческое предложение.</p>
|
||||
|
||||
<div className={styles.supplierForm}>
|
||||
<TextField
|
||||
className={styles.supplierName}
|
||||
placeholder="Наименование поставщика"
|
||||
value={name}
|
||||
onChange={(_, value) => setName(value ?? '')}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.supplierComment}
|
||||
placeholder="Комментарий (необязательно)"
|
||||
value={comment}
|
||||
onChange={(_, value) => setComment(value ?? '')}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<DefaultButton iconProps={{ iconName: 'Add' }} text="Добавить" onClick={add} disabled={disabled || !name.trim()} />
|
||||
</div>
|
||||
|
||||
{items.length > 0 ? (
|
||||
<ul className={styles.supplierList}>
|
||||
{items.map((item, index) => (
|
||||
<li key={`${item.name}-${index}`} className={styles.supplierItem}>
|
||||
<span className={styles.supplierItemName}>{item.name}</span>
|
||||
{item.comment ? <span className={styles.supplierItemComment}>{item.comment}</span> : undefined}
|
||||
{!disabled ? (
|
||||
<button type="button" className={styles.removeBtn} onClick={() => remove(index)} aria-label="Удалить">
|
||||
✕
|
||||
</button>
|
||||
) : undefined}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : undefined}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: #0078d4;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.supplier {
|
||||
font-size: 12px;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import * as React from 'react';
|
||||
import { Icon, IconButton, Link } from '@fluentui/react';
|
||||
import { UploadedKpFile } from '../types/domain';
|
||||
import styles from './UploadedKpList.module.scss';
|
||||
|
||||
interface UploadedKpListProps {
|
||||
files: UploadedKpFile[];
|
||||
onRemove?: (spId: number) => void; // в read-only не передаём — кнопку удаления не показываем
|
||||
}
|
||||
|
||||
// Постоянный список загруженных КП (из formData.uploadedKpFiles): переживает перезагрузку и вход по
|
||||
// ссылке-уведомлению. Отличается от KpFileList — тот показывает файлы ТЕКУЩЕЙ сессии со статусами обработки.
|
||||
// Пустой список не рендерим на уровне родителя (как KpFileList).
|
||||
export function UploadedKpList({ files, onRemove }: UploadedKpListProps): JSX.Element {
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<h4 className={styles.title}>Загруженные КП</h4>
|
||||
<ul className={styles.list}>
|
||||
{files.map((f) => (
|
||||
<li key={f.spId} className={styles.row}>
|
||||
<Icon iconName="TextDocument" className={styles.icon} />
|
||||
{f.url ? (
|
||||
<Link href={f.url} target="_blank" className={styles.name}>
|
||||
{f.name}
|
||||
</Link>
|
||||
) : (
|
||||
<span className={styles.name}>{f.name}</span>
|
||||
)}
|
||||
{f.supplierName ? <span className={styles.supplier}>{f.supplierName}</span> : undefined}
|
||||
<span className={styles.spacer} />
|
||||
{onRemove ? (
|
||||
<IconButton
|
||||
iconProps={{ iconName: 'Delete' }}
|
||||
title={`Убрать ${f.name} из списка`}
|
||||
onClick={() => onRemove(f.spId)}
|
||||
/>
|
||||
) : undefined}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
import { CurrencyRate, SelectedPosition, Supplier, SupplierCriteria, SupplierOffer } from '../types/domain';
|
||||
import { KpFile } from './kpTypes';
|
||||
|
||||
// Чистые сборщики доменных сущностей из обработанных файлов КП (без React, без сети).
|
||||
|
||||
// Поставщики с КП — по одному на файл с распознанным поставщиком. id = String(spId) для связи с офферами.
|
||||
export function buildKpSuppliers(files: KpFile[]): Supplier[] {
|
||||
return files
|
||||
.filter((f) => f.supplierName)
|
||||
.map((f) => ({
|
||||
id: f.supplierSpId !== undefined ? String(f.supplierSpId) : f.localId,
|
||||
spId: f.supplierSpId,
|
||||
name: f.supplierName as string,
|
||||
hasOffer: true,
|
||||
currency: f.currencyCode
|
||||
}));
|
||||
}
|
||||
|
||||
// Офферы из результатов потока (позиция × поставщик). Цена/кол-во — в валюте поставщика.
|
||||
export function buildKpOffers(files: KpFile[]): SupplierOffer[] {
|
||||
const offers: SupplierOffer[] = [];
|
||||
for (const f of files) {
|
||||
if (f.supplierSpId === undefined || f.flowResults.length === 0) {
|
||||
continue;
|
||||
}
|
||||
const supplierId = String(f.supplierSpId);
|
||||
for (const fr of f.flowResults) {
|
||||
offers.push({
|
||||
supplierId,
|
||||
positionId: fr.positionId,
|
||||
itemIndex: 0,
|
||||
supplierPosition: fr.flowResult.position,
|
||||
unit: fr.flowResult.unit,
|
||||
quantity: fr.flowResult.quantity ?? 0,
|
||||
pricePerUnit: fr.flowResult.price ?? 0,
|
||||
offerId: f.spId !== undefined ? String(f.spId) : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
return offers;
|
||||
}
|
||||
|
||||
// Критерии из результатов потока — один набор на поставщика (первый файл с любым критерием).
|
||||
export function buildKpCriteria(files: KpFile[]): SupplierCriteria[] {
|
||||
const criteria: SupplierCriteria[] = [];
|
||||
for (const f of files) {
|
||||
if (f.supplierSpId === undefined) {
|
||||
continue;
|
||||
}
|
||||
const entry = f.flowResults.find(
|
||||
(r) => r.flowResult.conditions || r.flowResult.deliveryType || r.flowResult.deadline || r.flowResult.sertificates
|
||||
);
|
||||
if (!entry) {
|
||||
continue;
|
||||
}
|
||||
const fr = entry.flowResult;
|
||||
criteria.push({
|
||||
supplierId: String(f.supplierSpId),
|
||||
paymentType: fr.conditions,
|
||||
deliveryType: fr.deliveryType,
|
||||
deadline: fr.deadline,
|
||||
sertificates: fr.sertificates
|
||||
});
|
||||
}
|
||||
return criteria;
|
||||
}
|
||||
|
||||
// Строка оффера для записи в SP (как ожидает service.saveOffers).
|
||||
export interface OfferSpRow {
|
||||
positionSpId: number;
|
||||
supplierSpId: number;
|
||||
supplierPosition: string;
|
||||
unit: string;
|
||||
itemIndex: number;
|
||||
quantity: number;
|
||||
price: number;
|
||||
summa: number;
|
||||
priceTenge: number;
|
||||
summaTenge: number;
|
||||
valutaSpId?: number;
|
||||
offerSpId?: number;
|
||||
}
|
||||
|
||||
// Маппинг офферов formData → строки SP: разрешаем positionId (lineId → spId), считаем ₸ по курсу.
|
||||
export function buildOffersForSp(
|
||||
offers: SupplierOffer[],
|
||||
suppliers: Supplier[],
|
||||
positions: SelectedPosition[],
|
||||
rates: CurrencyRate[]
|
||||
): { positionSpIds: number[]; rows: OfferSpRow[] } {
|
||||
const posByLineId: Record<string, { spId: number; name: string; unit: string }> = {};
|
||||
positions.forEach((p) => {
|
||||
if (p.spId !== undefined) {
|
||||
posByLineId[p.lineId] = { spId: p.spId, name: p.name, unit: p.unit };
|
||||
}
|
||||
});
|
||||
|
||||
const rows: OfferSpRow[] = [];
|
||||
for (const o of offers) {
|
||||
const sup = suppliers.find((s) => s.id === o.supplierId);
|
||||
const pos = posByLineId[o.positionId];
|
||||
if (sup?.spId === undefined || pos === undefined) {
|
||||
continue;
|
||||
}
|
||||
const currency = sup.currency ?? 'KZT';
|
||||
const rateObj = currency !== 'KZT' ? rates.find((r) => r.currency === currency) : undefined;
|
||||
const rate = rateObj?.rate ?? 1;
|
||||
const qty = o.quantity || 0;
|
||||
const price = o.pricePerUnit || 0;
|
||||
const summaTenge = qty * price * rate;
|
||||
if (summaTenge <= 0) {
|
||||
continue;
|
||||
}
|
||||
rows.push({
|
||||
positionSpId: pos.spId,
|
||||
supplierSpId: sup.spId,
|
||||
supplierPosition: o.supplierPosition ?? pos.name,
|
||||
unit: o.unit ?? pos.unit,
|
||||
itemIndex: o.itemIndex,
|
||||
quantity: qty,
|
||||
price,
|
||||
summa: qty * price,
|
||||
priceTenge: price * rate,
|
||||
summaTenge,
|
||||
valutaSpId: rateObj?.spId,
|
||||
offerSpId: o.offerId ? parseInt(o.offerId, 10) || undefined : undefined
|
||||
});
|
||||
}
|
||||
|
||||
const positionSpIds = Array.from(new Set(rows.map((r) => r.positionSpId)));
|
||||
return { positionSpIds, rows };
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
import { SelectedPosition } from '../types/domain';
|
||||
import { FlowPositionResult, PatchFile } from './kpTypes';
|
||||
|
||||
// Чистый конвейер обработки файла КП (без React). Мирроринг эталона Step2CommercialOffers:
|
||||
// заливка → (extractWordText для Word) → поллинг Syntex (file_content) → поток по каждой позиции.
|
||||
|
||||
const POLL_INTERVAL_MS = 5000;
|
||||
const MAX_POLL_RETRIES = 60; // ~5 минут
|
||||
|
||||
export interface PipelineDeps {
|
||||
service: KpsCtFormService;
|
||||
getPositions: () => SelectedPosition[];
|
||||
isMounted: () => boolean;
|
||||
patch: PatchFile;
|
||||
incFlowDone: (localId: string) => void;
|
||||
}
|
||||
|
||||
const wait = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
const isWordOrExcel = (name: string): boolean => /\.(doc|docx|xls|xlsx)$/i.test(name);
|
||||
|
||||
// Полный цикл одного файла. Бросает — вызывающий переводит файл в статус 'error'.
|
||||
export async function processKpFile(file: File, localId: string, deps: PipelineDeps): Promise<void> {
|
||||
const { service, patch } = deps;
|
||||
|
||||
// Уже загруженный (в этой СТ) файл с готовым разбором — не гоняем Syntex повторно.
|
||||
let spId: number | undefined;
|
||||
try {
|
||||
const existing = await service.findExistingKpFile(file.name, file.size);
|
||||
if (existing) {
|
||||
spId = existing.spId;
|
||||
}
|
||||
} catch {
|
||||
/* поиск не удался — грузим как обычно */
|
||||
}
|
||||
|
||||
if (spId === undefined) {
|
||||
const uploaded = await service.uploadKpFile(file);
|
||||
spId = uploaded.spId;
|
||||
patch(localId, { spId, url: uploaded.url, status: 'extracting' });
|
||||
if (isWordOrExcel(file.name)) {
|
||||
await service.extractWordText(spId);
|
||||
}
|
||||
} else {
|
||||
patch(localId, { spId, status: 'extracting' });
|
||||
}
|
||||
|
||||
await pollSyntex(localId, spId, file.name, 0, deps);
|
||||
}
|
||||
|
||||
// Поллинг: ждём, пока Syntex проставит file_content (в kps это единственная колонка модели).
|
||||
async function pollSyntex(
|
||||
localId: string,
|
||||
fileSpId: number,
|
||||
fileName: string,
|
||||
retries: number,
|
||||
deps: PipelineDeps
|
||||
): Promise<void> {
|
||||
const { service, isMounted, patch } = deps;
|
||||
if (!isMounted()) {
|
||||
return;
|
||||
}
|
||||
if (retries >= MAX_POLL_RETRIES) {
|
||||
patch(localId, { status: 'error', error: 'Syntex не завершил обработку за 5 минут' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const fields = await service.getKpItemFields(fileSpId);
|
||||
if (fields.fileContent) {
|
||||
await runFlow(localId, fileSpId, fileName, deps);
|
||||
} else {
|
||||
await wait(POLL_INTERVAL_MS);
|
||||
await pollSyntex(localId, fileSpId, fileName, retries + 1, deps);
|
||||
}
|
||||
} catch {
|
||||
await wait(POLL_INTERVAL_MS);
|
||||
await pollSyntex(localId, fileSpId, fileName, retries + 1, deps);
|
||||
}
|
||||
}
|
||||
|
||||
// Вызов потока по каждой выбранной позиции; сбой по одной позиции не останавливает остальные.
|
||||
async function runFlow(localId: string, fileSpId: number, fileName: string, deps: PipelineDeps): Promise<void> {
|
||||
const { service, getPositions, isMounted, patch, incFlowDone } = deps;
|
||||
const positions = getPositions();
|
||||
if (!isMounted()) {
|
||||
return;
|
||||
}
|
||||
patch(localId, { status: 'flowing', flowTotal: positions.length, flowDone: 0, flowResults: [] });
|
||||
|
||||
const collected: FlowPositionResult[] = [];
|
||||
await Promise.all(
|
||||
positions.map(async (pos) => {
|
||||
try {
|
||||
const flowResult = await service.triggerKpFlow(fileName, fileSpId, pos.name);
|
||||
collected.push({ positionId: pos.lineId, flowResult });
|
||||
} catch {
|
||||
/* сбой по одной позиции игнорируем */
|
||||
}
|
||||
if (isMounted()) {
|
||||
incFlowDone(localId);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// Поставщик — из результата потока (в kps отдельной колонки customer нет).
|
||||
const supplierName = collected.find((r) => r.flowResult.supplier)?.flowResult.supplier;
|
||||
if (supplierName) {
|
||||
try {
|
||||
const supplierSpId = await service.saveSupplier(supplierName);
|
||||
patch(localId, { supplierName, supplierSpId });
|
||||
} catch {
|
||||
/* продолжаем без поставщика */
|
||||
}
|
||||
}
|
||||
|
||||
patch(localId, { status: 'done', flowResults: collected });
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { FlowResult } from '../types/domain';
|
||||
|
||||
// Локальные типы обработки КП на Шаге 2 (стейт файла в процессе конвейера).
|
||||
|
||||
export type KpFileStatus = 'uploading' | 'extracting' | 'flowing' | 'done' | 'error';
|
||||
|
||||
// Результат потока по одной позиции (для последующей сборки офферов).
|
||||
export interface FlowPositionResult {
|
||||
positionId: string; // локальный id позиции (SelectedPosition.lineId)
|
||||
flowResult: FlowResult;
|
||||
}
|
||||
|
||||
// Файл КП в процессе обработки. Живёт в локальном стейте Шага 2; готовые (done) попадают в formData.
|
||||
export interface KpFile {
|
||||
localId: string;
|
||||
file: File;
|
||||
status: KpFileStatus;
|
||||
spId?: number; // Id файла в библиотеке «Коммерческие предложения» (offerId для офферов)
|
||||
url?: string; // ссылка на залитый файл
|
||||
supplierName?: string; // распознанный поставщик (Syntex customer / поток supplier)
|
||||
supplierSpId?: number; // Id поставщика в «Поставщики»
|
||||
currencyCode: string; // валюта КП (KZT по умолчанию)
|
||||
flowDone: number; // сколько позиций уже обработал поток
|
||||
flowTotal: number; // всего позиций
|
||||
error?: string;
|
||||
flowResults: FlowPositionResult[];
|
||||
}
|
||||
|
||||
// Точечное обновление файла в стейте (передаётся в конвейер вместо прямого доступа к React-стейту).
|
||||
export type PatchFile = (localId: string, patch: Partial<KpFile>) => void;
|
||||
@@ -0,0 +1,69 @@
|
||||
import { CtFormData, Supplier, SupplierCriteria, SupplierOffer, UploadedKpFile } from '../types/domain';
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
import { KpFile } from './kpTypes';
|
||||
import { buildKpCriteria, buildKpOffers, buildKpSuppliers, buildOffersForSp } from './kpOffers';
|
||||
|
||||
// Чистая логика сохранения Шага 2 (без React) — вынесено из компонента ради читаемости (стайл-гайд).
|
||||
// Порядок: курсы → поставщики без КП → офферы КП в SP → мерж КП-данных в formData.
|
||||
export interface PersistStep2Input {
|
||||
service: KpsCtFormService;
|
||||
ctId?: number;
|
||||
kpFiles: KpFile[];
|
||||
formData: CtFormData;
|
||||
}
|
||||
|
||||
export async function persistStep2(input: PersistStep2Input): Promise<Partial<CtFormData>> {
|
||||
const { service, ctId, kpFiles, formData } = input;
|
||||
const doneFiles = kpFiles.filter((f) => f.status === 'done');
|
||||
|
||||
// 1) Курсы валют — первыми: их spId нужны как valuta в офферах.
|
||||
const savedRates = await service.saveCurrencyRates(formData.currencyRates ?? []);
|
||||
|
||||
// 2) Поставщики без КП → «Не получены КП», привязка к СТ (ctId) для восстановления у согласующего.
|
||||
const noKp = (formData.suppliers ?? []).filter((s) => s.hasOffer === false);
|
||||
for (const s of noKp) {
|
||||
await service.saveNoKpSupplier(s.name, s.comment ?? '', ctId);
|
||||
}
|
||||
|
||||
// 3) Сущности из обработанных КП.
|
||||
const kpSuppliers = buildKpSuppliers(doneFiles);
|
||||
const kpOffers = buildKpOffers(doneFiles);
|
||||
const kpCriteria = buildKpCriteria(doneFiles);
|
||||
|
||||
// 4) Офферы → «Оценка поставщиков» (на Шаге 2, как эталон). Нужен ctId — позиции должны иметь spId.
|
||||
if (ctId !== undefined && kpOffers.length > 0) {
|
||||
const { positionSpIds, rows } = buildOffersForSp(kpOffers, kpSuppliers, formData.selectedPositions, savedRates);
|
||||
if (rows.length > 0) {
|
||||
await service.saveOffers(positionSpIds, rows);
|
||||
}
|
||||
}
|
||||
|
||||
// 5) Мерж КП-данных в formData: заменяем записи по поставщикам из этой загрузки.
|
||||
const kpNames = new Set(kpSuppliers.map((s) => s.name));
|
||||
const kpIds = new Set(kpSuppliers.map((s) => s.id));
|
||||
const existing = formData.suppliers ?? [];
|
||||
const suppliers: Supplier[] = [
|
||||
...existing.filter((s) => s.hasOffer === false), // без-КП — управляются своим блоком, сохраняем
|
||||
...existing.filter((s) => s.hasOffer !== false && !kpNames.has(s.name)), // прочие с-КП (напр. с Шага 3)
|
||||
...kpSuppliers
|
||||
];
|
||||
const offers: SupplierOffer[] = [...(formData.offers ?? []).filter((o) => !kpIds.has(o.supplierId)), ...kpOffers];
|
||||
const criteria: SupplierCriteria[] = [
|
||||
...(formData.criteria ?? []).filter((c) => !kpIds.has(c.supplierId)),
|
||||
...kpCriteria
|
||||
];
|
||||
const uploadedKpFiles = mergeUploaded(formData.uploadedKpFiles ?? [], doneFiles);
|
||||
|
||||
return { currencyRates: savedRates, suppliers, offers, criteria, uploadedKpFiles };
|
||||
}
|
||||
|
||||
function mergeUploaded(existing: UploadedKpFile[], doneFiles: KpFile[]): UploadedKpFile[] {
|
||||
const bySpId = new Map<number, UploadedKpFile>();
|
||||
existing.forEach((u) => bySpId.set(u.spId, u));
|
||||
doneFiles.forEach((f) => {
|
||||
if (f.spId !== undefined) {
|
||||
bySpId.set(f.spId, { spId: f.spId, name: f.file.name, supplierName: f.supplierName, url: f.url });
|
||||
}
|
||||
});
|
||||
return Array.from(bySpId.values());
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { CtFormData } from '../types/domain';
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
import { KpFile } from './kpTypes';
|
||||
import { processKpFile } from './kpPipeline';
|
||||
|
||||
// Хук обработки КП на Шаге 2: держит стейт файлов и запускает конвейер (заливка → Syntex → поток).
|
||||
// Логика конвейера — в kpPipeline.ts; здесь только React-стейт и колбэки (стайл-гайд: логика вне view).
|
||||
|
||||
let localIdCounter = 0;
|
||||
|
||||
export interface UseKpProcessingResult {
|
||||
kpFiles: KpFile[];
|
||||
isProcessing: boolean;
|
||||
duplicateWarning?: string;
|
||||
addFiles: (files: File[]) => void;
|
||||
removeFile: (localId: string) => void;
|
||||
setCurrency: (localId: string, currency: string) => void;
|
||||
}
|
||||
|
||||
export function useKpProcessing(service: KpsCtFormService, formData: CtFormData, disabled: boolean): UseKpProcessingResult {
|
||||
const [kpFiles, setKpFiles] = useState<KpFile[]>([]);
|
||||
const [duplicateWarning, setDuplicateWarning] = useState<string | undefined>(undefined);
|
||||
|
||||
const mountedRef = useRef(true);
|
||||
const formDataRef = useRef(formData);
|
||||
const kpFilesRef = useRef<KpFile[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
formDataRef.current = formData;
|
||||
}, [formData]);
|
||||
useEffect(() => {
|
||||
kpFilesRef.current = kpFiles;
|
||||
}, [kpFiles]);
|
||||
useEffect(() => () => {
|
||||
mountedRef.current = false;
|
||||
}, []);
|
||||
|
||||
const patch = useCallback((localId: string, part: Partial<KpFile>) => {
|
||||
if (!mountedRef.current) {
|
||||
return;
|
||||
}
|
||||
setKpFiles((prev) => prev.map((f) => (f.localId === localId ? { ...f, ...part } : f)));
|
||||
}, []);
|
||||
|
||||
const incFlowDone = useCallback((localId: string) => {
|
||||
if (!mountedRef.current) {
|
||||
return;
|
||||
}
|
||||
setKpFiles((prev) => prev.map((f) => (f.localId === localId ? { ...f, flowDone: f.flowDone + 1 } : f)));
|
||||
}, []);
|
||||
|
||||
const addFiles = useCallback(
|
||||
(files: File[]) => {
|
||||
if (disabled || files.length === 0) {
|
||||
return;
|
||||
}
|
||||
const known = new Set([
|
||||
...kpFilesRef.current.map((f) => f.file.name),
|
||||
...(formDataRef.current.uploadedKpFiles ?? []).map((f) => f.name)
|
||||
]);
|
||||
const fresh = files.filter((f) => !known.has(f.name));
|
||||
const skipped = files.filter((f) => known.has(f.name));
|
||||
setDuplicateWarning(skipped.length ? `Файл(ы) уже загружены: ${skipped.map((f) => f.name).join(', ')}` : undefined);
|
||||
if (fresh.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const entries: KpFile[] = fresh.map((file) => ({
|
||||
localId: `kp_${++localIdCounter}`,
|
||||
file,
|
||||
status: 'uploading',
|
||||
currencyCode: 'KZT',
|
||||
flowDone: 0,
|
||||
flowTotal: 0,
|
||||
flowResults: []
|
||||
}));
|
||||
setKpFiles((prev) => [...prev, ...entries]);
|
||||
|
||||
const deps = {
|
||||
service,
|
||||
getPositions: () => formDataRef.current.selectedPositions,
|
||||
isMounted: () => mountedRef.current,
|
||||
patch,
|
||||
incFlowDone
|
||||
};
|
||||
entries.forEach((entry) => {
|
||||
processKpFile(entry.file, entry.localId, deps).catch((err: Error) => {
|
||||
patch(entry.localId, { status: 'error', error: err.message });
|
||||
});
|
||||
});
|
||||
},
|
||||
[service, disabled, patch, incFlowDone]
|
||||
);
|
||||
|
||||
const removeFile = useCallback((localId: string) => {
|
||||
setKpFiles((prev) => prev.filter((f) => f.localId !== localId));
|
||||
}, []);
|
||||
|
||||
const setCurrency = useCallback((localId: string, currency: string) => {
|
||||
setKpFiles((prev) => prev.map((f) => (f.localId === localId ? { ...f, currencyCode: currency } : f)));
|
||||
}, []);
|
||||
|
||||
const isProcessing = kpFiles.some(
|
||||
(f) => f.status === 'uploading' || f.status === 'extracting' || f.status === 'flowing'
|
||||
);
|
||||
|
||||
return { kpFiles, isProcessing, duplicateWarning, addFiles, removeFile, setCurrency };
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { DefaultButton, PrimaryButton, TextField } from '@fluentui/react';
|
||||
import styles from './Step3BuildCt.module.scss';
|
||||
|
||||
// Строка добавления в конце таблицы (по эталону): ссылки «+ Добавить позицию/доставку» → инлайн-форма.
|
||||
// Держит только UI-стейт формы; запись — через колбэки матрицы (логика в useStep3Matrix).
|
||||
interface AddExtraRowProps {
|
||||
colSpan: number;
|
||||
onAddPosition: (name: string, unit: string) => void;
|
||||
onAddDelivery: () => void;
|
||||
}
|
||||
|
||||
export function AddExtraRow({ colSpan, onAddPosition, onAddDelivery }: AddExtraRowProps): JSX.Element {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [name, setName] = useState('');
|
||||
const [unit, setUnit] = useState('');
|
||||
|
||||
const reset = (): void => {
|
||||
setShowForm(false);
|
||||
setName('');
|
||||
setUnit('');
|
||||
};
|
||||
|
||||
const submit = (): void => {
|
||||
if (!name.trim()) {
|
||||
return;
|
||||
}
|
||||
onAddPosition(name, unit);
|
||||
reset();
|
||||
};
|
||||
|
||||
if (showForm) {
|
||||
return (
|
||||
<tr className={styles.addPositionRow}>
|
||||
<td colSpan={colSpan}>
|
||||
<div className={styles.addPosInlineForm}>
|
||||
<TextField
|
||||
className={styles.addInput}
|
||||
placeholder="Наименование позиции"
|
||||
ariaLabel="Наименование позиции"
|
||||
value={name}
|
||||
onChange={(_, val) => setName(val ?? '')}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
className={styles.addInputSmall}
|
||||
placeholder="Ед."
|
||||
ariaLabel="Единица измерения"
|
||||
value={unit}
|
||||
onChange={(_, val) => setUnit(val ?? '')}
|
||||
/>
|
||||
<PrimaryButton iconProps={{ iconName: 'Add' }} text="Добавить" onClick={submit} disabled={!name.trim()} />
|
||||
<DefaultButton iconProps={{ iconName: 'Cancel' }} text="Отмена" onClick={reset} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className={styles.addPositionRow}>
|
||||
<td colSpan={colSpan}>
|
||||
<div className={styles.addPositionLinks}>
|
||||
<button type="button" className={styles.addPositionBtn} onClick={() => setShowForm(true)}>
|
||||
+ Добавить позицию (Доп. расходы)
|
||||
</button>
|
||||
<button type="button" className={styles.addPositionBtn} onClick={onAddDelivery}>
|
||||
+ Добавить доставку
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import * as React from 'react';
|
||||
import { IconButton, MessageBar, MessageBarType, Spinner, SpinnerSize } from '@fluentui/react';
|
||||
import styles from './Step3BuildCt.module.scss';
|
||||
|
||||
// Блок «Комментарий ИИ» (Шаг 3): показывается только если есть комментарий, идёт загрузка или ошибка.
|
||||
// Кнопка удаления — лишь когда onDelete задан (в read-only её не передаём).
|
||||
interface AiCommentBlockProps {
|
||||
comment?: string;
|
||||
isLoading: boolean;
|
||||
error?: string;
|
||||
onDelete?: () => void;
|
||||
}
|
||||
|
||||
// Комментарий ИИ приходит в Markdown (**жирный**, маркированные списки «- »). Рендерим лёгкую разметку
|
||||
// в React-узлы (без dangerouslySetInnerHTML): жирный/списки/абзацы — сами звёздочки-маркеры не видны.
|
||||
function renderInline(text: string, keyPrefix: string): React.ReactNode[] {
|
||||
return text.split(/(\*\*[^*]+\*\*)/g).map((part, i) => {
|
||||
const bold = /^\*\*([^*]+)\*\*$/.exec(part);
|
||||
return bold ? <strong key={`${keyPrefix}-${i}`}>{bold[1]}</strong> : part;
|
||||
});
|
||||
}
|
||||
|
||||
function renderComment(text: string): JSX.Element[] {
|
||||
const blocks: JSX.Element[] = [];
|
||||
let bullets: string[] = [];
|
||||
const flushBullets = (): void => {
|
||||
if (bullets.length === 0) return;
|
||||
const at = blocks.length;
|
||||
blocks.push(
|
||||
<ul key={`ul-${at}`}>
|
||||
{bullets.map((b, i) => (
|
||||
<li key={i}>{renderInline(b, `li-${at}-${i}`)}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
bullets = [];
|
||||
};
|
||||
text.split(/\r?\n/).forEach((raw) => {
|
||||
const line = raw.trim();
|
||||
if (!line) {
|
||||
flushBullets();
|
||||
return;
|
||||
}
|
||||
const bullet = /^[-*]\s+(.*)$/.exec(line); // «- » или «* » (но не «**жирный**» — там нет пробела)
|
||||
if (bullet) {
|
||||
bullets.push(bullet[1]);
|
||||
return;
|
||||
}
|
||||
flushBullets();
|
||||
blocks.push(<p key={`p-${blocks.length}`}>{renderInline(line, `p-${blocks.length}`)}</p>);
|
||||
});
|
||||
flushBullets();
|
||||
return blocks;
|
||||
}
|
||||
|
||||
export function AiCommentBlock(props: AiCommentBlockProps): JSX.Element {
|
||||
const { comment, isLoading, error, onDelete } = props;
|
||||
return (
|
||||
<div className={styles.aiCommentBlock}>
|
||||
<div className={styles.aiCommentTitle}>
|
||||
Комментарий ИИ
|
||||
{comment && !isLoading && onDelete ? (
|
||||
<IconButton
|
||||
iconProps={{ iconName: 'Delete' }}
|
||||
title="Удалить комментарий"
|
||||
className={styles.aiCommentDeleteBtn}
|
||||
onClick={onDelete}
|
||||
/>
|
||||
) : undefined}
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className={styles.aiCommentBody}>
|
||||
<Spinner size={SpinnerSize.small} label="Генерация комментария…" />
|
||||
</div>
|
||||
) : undefined}
|
||||
{error ? (
|
||||
<div className={styles.aiCommentBody}>
|
||||
<MessageBar messageBarType={MessageBarType.error} isMultiline={false}>
|
||||
{error}
|
||||
</MessageBar>
|
||||
</div>
|
||||
) : undefined}
|
||||
{comment ? <div className={styles.aiCommentText}>{renderComment(comment)}</div> : undefined}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import * as React from 'react';
|
||||
import { Supplier } from '../types/domain';
|
||||
import { formatKzt } from '../utils/format';
|
||||
import { Step3Matrix, subColsOf } from './useStep3Matrix';
|
||||
import { MatrixRowView } from './MatrixRowView';
|
||||
import { AddExtraRow } from './AddExtraRow';
|
||||
import styles from './Step3BuildCt.module.scss';
|
||||
|
||||
const FIXED_COLS = 3; // Наименование / Ед. изм. / Кол-во
|
||||
|
||||
interface ComparisonMatrixProps {
|
||||
suppliers: Supplier[];
|
||||
matrix: Step3Matrix;
|
||||
isReadOnly: boolean;
|
||||
}
|
||||
|
||||
// Таблица сравнения: слева фикс-колонки, справа по колонке(ам) на поставщика. Только вёрстка —
|
||||
// вся логика в useStep3Matrix (§стайл-гайд: логика отделена от представления).
|
||||
export function ComparisonMatrix({ suppliers, matrix, isReadOnly }: ComparisonMatrixProps): JSX.Element {
|
||||
const { recommendedId, selectedId, supplierTotals, regularTotals, extraTotals } = matrix;
|
||||
const regularRows = matrix.rows.filter((r) => !r.isExtra);
|
||||
const extraRows = matrix.rows.filter((r) => r.isExtra);
|
||||
// Полная ширина таблицы (фикс-колонки + суб-колонки всех поставщиков) — для строки добавления.
|
||||
const totalColSpan = FIXED_COLS + suppliers.reduce((sum, s) => sum + subColsOf(s.currency ?? 'KZT'), 0);
|
||||
|
||||
// Строка итога: подпись + по каждому поставщику пустые под-колонки и ячейка суммы.
|
||||
const totalsRow = (label: string, totals: Record<string, number>, highlightRecommended: boolean, rowCls: string): JSX.Element => (
|
||||
<tr className={rowCls}>
|
||||
<td colSpan={FIXED_COLS} className={styles.totalLabel}>
|
||||
<strong>{label}</strong>
|
||||
</td>
|
||||
{suppliers.map((s) => {
|
||||
const isSel = s.id === selectedId;
|
||||
const total = totals[s.id] ?? 0;
|
||||
return (
|
||||
<React.Fragment key={s.id}>
|
||||
<td colSpan={subColsOf(s.currency ?? 'KZT') - 1} className={isSel ? styles.colSelected : undefined} />
|
||||
<td
|
||||
className={[styles.totalCell, highlightRecommended && s.id === recommendedId ? styles.totalRecommended : '', isSel ? styles.colSelected : '']
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
<strong>{total > 0 ? formatKzt(total) : '—'}</strong>
|
||||
</td>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.tableScroll}>
|
||||
<table className={styles.ctTable}>
|
||||
<thead>
|
||||
<tr className={styles.headerRow1}>
|
||||
<th rowSpan={2} className={styles.colPosition}>Наименование</th>
|
||||
<th rowSpan={2} className={styles.colUnit}>Ед. изм.</th>
|
||||
<th rowSpan={2} className={styles.colQty}>Кол-во</th>
|
||||
{suppliers.map((s) => {
|
||||
const currency = s.currency ?? 'KZT';
|
||||
const isSel = s.id === selectedId;
|
||||
return (
|
||||
<th
|
||||
key={s.id}
|
||||
colSpan={subColsOf(currency)}
|
||||
className={[styles.supplierGroupHeader, isSel ? styles.colSelected : ''].filter(Boolean).join(' ')}
|
||||
>
|
||||
<div className={styles.supplierHeader}>
|
||||
<span className={styles.supplierNameText}>{s.name}</span>
|
||||
{s.id === recommendedId ? <span className={styles.recommendedBadge}>Рекомендуется</span> : undefined}
|
||||
{s.hasOffer === false ? <span className={styles.noOfferTag}>Без КП</span> : undefined}
|
||||
{currency !== 'KZT' ? <span className={styles.currencyTag}>{currency}</span> : undefined}
|
||||
<div className={styles.supplierActions}>
|
||||
{!isReadOnly ? (
|
||||
<>
|
||||
<button
|
||||
className={[styles.selectBtn, isSel ? styles.selectBtnActive : ''].filter(Boolean).join(' ')}
|
||||
onClick={() => matrix.selectSupplier(s.id)}
|
||||
>
|
||||
{isSel ? 'Выбран' : 'Выбрать'}
|
||||
</button>
|
||||
<button className={styles.deleteBtn} title="Удалить поставщика" onClick={() => matrix.removeSupplier(s.id)}>
|
||||
×
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
isSel ? <span className={styles.selectedBadge}>Выбран</span> : undefined
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
<tr className={styles.headerRow2}>
|
||||
{suppliers.map((s) => {
|
||||
const isForeign = (s.currency ?? 'KZT') !== 'KZT';
|
||||
const selCls = s.id === selectedId ? styles.colSelected : '';
|
||||
const sub = (label: string, name = false): JSX.Element => (
|
||||
<th className={[styles.subHeader, name ? styles.subHeaderName : '', selCls].filter(Boolean).join(' ')}>{label}</th>
|
||||
);
|
||||
return (
|
||||
<React.Fragment key={s.id}>
|
||||
{sub('Наименование ТМЦ', true)}
|
||||
{sub('Ед. изм.')}
|
||||
{sub('Кол-во')}
|
||||
{isForeign ? (
|
||||
<>
|
||||
{sub(`Цена, ${s.currency}`)}
|
||||
{sub(`Сумма, ${s.currency}`)}
|
||||
</>
|
||||
) : undefined}
|
||||
{sub('Цена, ₸')}
|
||||
{sub('Сумма, ₸')}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{regularRows.map((row, index) => (
|
||||
<MatrixRowView key={row.id} row={row} index={index} suppliers={suppliers} matrix={matrix} isReadOnly={isReadOnly} />
|
||||
))}
|
||||
{totalsRow('Итого, ₸', regularTotals, false, styles.subtotalRow)}
|
||||
|
||||
{extraRows.map((row, index) => (
|
||||
<MatrixRowView key={row.id} row={row} index={regularRows.length + index} suppliers={suppliers} matrix={matrix} isReadOnly={isReadOnly} />
|
||||
))}
|
||||
{extraRows.length > 0 ? totalsRow('Сумма доп. расходов, ₸', extraTotals, false, styles.subtotalRow) : undefined}
|
||||
|
||||
{totalsRow('Общая сумма, ₸', supplierTotals, true, styles.totalRow)}
|
||||
|
||||
{!isReadOnly ? (
|
||||
<AddExtraRow colSpan={totalColSpan} onAddPosition={matrix.addExtraPosition} onAddDelivery={matrix.addDelivery} />
|
||||
) : undefined}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.root {
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
padding: 10px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
background: #f0f6fc; // тон шапки как в эталоне (на шаг светлее $accent-bg)
|
||||
border-bottom: 1px solid #c7e0f4;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.labelHead {
|
||||
min-width: 180px;
|
||||
padding: 8px 12px;
|
||||
background: $head-bg;
|
||||
border-right: 1px solid $border;
|
||||
}
|
||||
|
||||
.supplierHead {
|
||||
padding: 8px 14px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
background: #f0f6fc;
|
||||
border-left: 1px solid $border;
|
||||
border-bottom: 1px solid #c7e0f4;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 10px 12px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: $muted;
|
||||
background: $head-bg;
|
||||
border-right: 1px solid $border;
|
||||
border-bottom: 1px solid $hover; // мягкая горизонтальная линия строк, как в эталоне
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.cell {
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
color: $text;
|
||||
border-left: 1px solid $border;
|
||||
border-bottom: 1px solid $hover;
|
||||
vertical-align: top;
|
||||
line-height: 1.5;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
// Свободный ввод (paymentType/deadline/comment) — с аффордансом редактирования из эталона:
|
||||
// пунктирное подчёркивание, синяя подсветка на hover/focus, без ручки ресайза.
|
||||
.input {
|
||||
:global(.ms-TextField-wrapper) {
|
||||
border-bottom: 1px dashed $border-strong;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: $accent;
|
||||
background: rgba(0, 120, 212, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within :global(.ms-TextField-wrapper) {
|
||||
border-bottom-color: $accent;
|
||||
border-bottom-width: 2px;
|
||||
background: rgba(0, 120, 212, 0.06);
|
||||
}
|
||||
|
||||
:global(.ms-TextField-field) {
|
||||
font-size: 13px;
|
||||
padding: 2px 4px;
|
||||
min-height: 26px;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
height: 30px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid $border-strong;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
color: $text;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: $accent;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import * as React from 'react';
|
||||
import { TextField } from '@fluentui/react';
|
||||
import { Supplier, SupplierCriteria } from '../types/domain';
|
||||
import styles from './CriteriaTable.module.scss';
|
||||
|
||||
type CriteriaField = 'paymentType' | 'deliveryType' | 'deadline' | 'sertificates' | 'comment';
|
||||
|
||||
// Строки блока «Дополнительная информация». Для Choice-полей задаём варианты (options).
|
||||
const ROWS: Array<{ key: CriteriaField; label: string; options?: string[] }> = [
|
||||
{ key: 'paymentType', label: 'Условия оплаты' },
|
||||
{ key: 'deliveryType', label: 'Условия поставки', options: ['DAP', 'FOB', 'DDP', 'EXW'] },
|
||||
{ key: 'deadline', label: 'Сроки изготовления и доставки' },
|
||||
{ key: 'sertificates', label: 'Сертификаты', options: ['Да', 'Нет'] },
|
||||
{ key: 'comment', label: 'Примечание' }
|
||||
];
|
||||
|
||||
interface CriteriaTableProps {
|
||||
suppliers: Supplier[];
|
||||
criteria: SupplierCriteria[];
|
||||
onChange: (criteria: SupplierCriteria[]) => void;
|
||||
isReadOnly: boolean;
|
||||
}
|
||||
|
||||
// Блок «Дополнительная информация»: строки-критерии × колонки-поставщики. Логика правок — локальная
|
||||
// (иммутабельно через onChange в formData.criteria); сохранение в «Критерии» — на «Далее» (step3Persist).
|
||||
export function CriteriaTable({ suppliers, criteria, onChange, isReadOnly }: CriteriaTableProps): JSX.Element {
|
||||
const valueOf = (supplierId: string, field: CriteriaField): string => criteria.find((c) => c.supplierId === supplierId)?.[field] ?? '';
|
||||
|
||||
const update = (supplierId: string, field: CriteriaField, value: string): void => {
|
||||
const exists = criteria.some((c) => c.supplierId === supplierId);
|
||||
const next = exists
|
||||
? criteria.map((c) => (c.supplierId === supplierId ? { ...c, [field]: value } : c))
|
||||
: [...criteria, { supplierId, [field]: value }];
|
||||
onChange(next);
|
||||
};
|
||||
|
||||
const renderInput = (supplier: Supplier, row: { key: CriteriaField; options?: string[] }): JSX.Element => {
|
||||
const value = valueOf(supplier.id, row.key);
|
||||
if (isReadOnly) {
|
||||
return <span>{value || '—'}</span>;
|
||||
}
|
||||
if (row.options) {
|
||||
// Значение из потока может не совпасть с вариантами Choice — добавляем его в список, чтобы показать.
|
||||
const options = value && row.options.indexOf(value) === -1 ? [value, ...row.options] : row.options;
|
||||
return (
|
||||
<select className={styles.select} value={value} onChange={(e) => update(supplier.id, row.key, e.target.value)} aria-label={`${row.key} ${supplier.name}`}>
|
||||
<option value="">—</option>
|
||||
{options.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TextField
|
||||
borderless
|
||||
multiline
|
||||
autoAdjustHeight
|
||||
className={styles.input}
|
||||
value={value}
|
||||
onChange={(_, v) => update(supplier.id, row.key, v ?? '')}
|
||||
placeholder="—"
|
||||
ariaLabel={`${row.key} ${supplier.name}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<h3 className={styles.title}>Дополнительная информация</h3>
|
||||
<div className={styles.scroll}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={styles.labelHead} />
|
||||
{suppliers.map((s) => (
|
||||
<th key={s.id} className={styles.supplierHead}>
|
||||
{s.name}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ROWS.map((row) => (
|
||||
<tr key={row.key}>
|
||||
<td className={styles.label}>{row.label}</td>
|
||||
{suppliers.map((s) => (
|
||||
<td key={s.id} className={styles.cell}>
|
||||
{renderInput(s, row)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import * as React from 'react';
|
||||
import { Supplier } from '../types/domain';
|
||||
import { MatrixRow, Step3Matrix, subColsOf } from './useStep3Matrix';
|
||||
import { OfferCells } from './OfferCells';
|
||||
import styles from './Step3BuildCt.module.scss';
|
||||
|
||||
interface MatrixRowViewProps {
|
||||
row: MatrixRow;
|
||||
index: number;
|
||||
suppliers: Supplier[];
|
||||
matrix: Step3Matrix;
|
||||
isReadOnly: boolean;
|
||||
}
|
||||
|
||||
// Одна позиция матрицы: несколько <tr> при комплекте (bundle). Фикс-колонки (наименование/ед./кол-во)
|
||||
// объединены rowSpan на первой под-строке; у поставщика с меньшим числом строк — пустые ячейки.
|
||||
export function MatrixRowView({ row, index, suppliers, matrix, isReadOnly }: MatrixRowViewProps): JSX.Element {
|
||||
const perSupplierItems = suppliers.map((s) => matrix.itemsFor(s.id, row.id));
|
||||
const maxSubRows = Math.max(1, ...perSupplierItems.map((items) => items.length));
|
||||
const rowClass = row.isExtra ? styles.extraRow : styles.row;
|
||||
|
||||
const subRows: JSX.Element[] = [];
|
||||
for (let rowIdx = 0; rowIdx < maxSubRows; rowIdx++) {
|
||||
subRows.push(
|
||||
<tr key={rowIdx} className={rowClass}>
|
||||
{rowIdx === 0 ? (
|
||||
<>
|
||||
<td className={styles.nameCell} rowSpan={maxSubRows}>
|
||||
<span className={styles.idx}>{index + 1}.</span> {row.name}
|
||||
{row.isExtra ? <span className={styles.extraBadge}>{row.isDelivery ? 'Доставка' : 'Доп. расходы'}</span> : undefined}
|
||||
{row.isExtra && !isReadOnly ? (
|
||||
<button className={styles.deleteExtraBtn} title="Удалить" onClick={() => matrix.removeExtraPosition(row.id)}>
|
||||
×
|
||||
</button>
|
||||
) : undefined}
|
||||
</td>
|
||||
<td className={styles.unitCell} rowSpan={maxSubRows}>{row.unit}</td>
|
||||
<td className={styles.qtyCell} rowSpan={maxSubRows}>{row.isExtra ? '—' : row.quantity}</td>
|
||||
</>
|
||||
) : undefined}
|
||||
{suppliers.map((s, si) => {
|
||||
const items = perSupplierItems[si];
|
||||
const item = items[rowIdx];
|
||||
const selected = s.id === matrix.selectedId;
|
||||
if (rowIdx > 0 && item === undefined) {
|
||||
// у этого поставщика меньше строк комплекта — пустая ячейка на всю ширину группы
|
||||
return <td key={s.id} colSpan={subColsOf(s.currency ?? 'KZT')} className={[styles.cell, selected ? styles.colSelected : ''].filter(Boolean).join(' ')} />;
|
||||
}
|
||||
return (
|
||||
<OfferCells
|
||||
key={s.id}
|
||||
supplier={s}
|
||||
row={row}
|
||||
matrix={matrix}
|
||||
isReadOnly={isReadOnly}
|
||||
selected={selected}
|
||||
item={item}
|
||||
itemIndex={rowIdx}
|
||||
itemsCount={items.length}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{subRows}</>;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import * as React from 'react';
|
||||
import { TextField } from '@fluentui/react';
|
||||
import { Supplier, SupplierOffer } from '../types/domain';
|
||||
import { formatKzt, formatMoney } from '../utils/format';
|
||||
import { MatrixRow, Step3Matrix } from './useStep3Matrix';
|
||||
import styles from './Step3BuildCt.module.scss';
|
||||
|
||||
interface OfferCellsProps {
|
||||
supplier: Supplier;
|
||||
row: MatrixRow;
|
||||
matrix: Step3Matrix;
|
||||
isReadOnly: boolean;
|
||||
selected: boolean;
|
||||
item?: SupplierOffer; // строка комплекта (может отсутствовать → значения по умолчанию)
|
||||
itemIndex: number;
|
||||
itemsCount: number; // сколько строк комплекта у этой ячейки (0 = одна пустая по умолчанию)
|
||||
}
|
||||
|
||||
// Ячейки одного поставщика по одной строке комплекта: 5 колонок для ₸, 7 для валюты.
|
||||
// Кнопки комплекта (+/×) — в колонке наименования (кроме доставки).
|
||||
export function OfferCells(props: OfferCellsProps): JSX.Element {
|
||||
const { supplier, row, matrix, isReadOnly, selected, item, itemIndex, itemsCount } = props;
|
||||
|
||||
const currency = supplier.currency ?? 'KZT';
|
||||
const isForeign = currency !== 'KZT';
|
||||
const rate = matrix.rateOf(currency);
|
||||
|
||||
const qty = item?.quantity ?? (itemIndex === 0 ? row.quantity : 0);
|
||||
const price = item?.pricePerUnit ?? 0;
|
||||
const km = item?.deliveryDistanceKm;
|
||||
const sumCur = qty * price;
|
||||
const priceKzt = price * rate;
|
||||
const sumKzt = qty * priceKzt;
|
||||
|
||||
const nameVal = item?.supplierPosition ?? row.name;
|
||||
const unitVal = item?.unit ?? row.unit;
|
||||
const selCls = selected ? styles.colSelected : '';
|
||||
const key = (field: string): string => `${supplier.id}::${row.id}::${itemIndex}::${field}`;
|
||||
|
||||
const cell = (content: React.ReactNode, extraCls = ''): JSX.Element => (
|
||||
<td className={[styles.cell, extraCls, selCls].filter(Boolean).join(' ')}>{content}</td>
|
||||
);
|
||||
|
||||
const numInput = (field: 'quantity' | 'pricePerUnit' | 'deliveryDistanceKm', value: string, placeholder: string): JSX.Element => (
|
||||
<TextField
|
||||
borderless
|
||||
className={styles.input}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={(_, v) => matrix.editNumber(supplier.id, row.id, itemIndex, field, v ?? '')}
|
||||
/>
|
||||
);
|
||||
|
||||
const showBundle = !isReadOnly && !row.isDelivery;
|
||||
const isLast = itemIndex === Math.max(0, itemsCount - 1);
|
||||
|
||||
// Доставка: «км» под названием «Доставка» в широком столбце «Наименование ТМЦ» — там есть место,
|
||||
// поэтому узкая колонка «Кол-во» больше не режет цифры (в неё кладём только рейсы).
|
||||
const kmContent = (
|
||||
<div className={styles.kmLine}>
|
||||
{isReadOnly ? (
|
||||
<span className={styles.kmReadonly}>{km !== undefined ? `${km} км` : '—'}</span>
|
||||
) : (
|
||||
<span className={styles.kmControl}>
|
||||
{numInput('deliveryDistanceKm', matrix.raw[key('deliveryDistanceKm')] ?? (km !== undefined ? String(km) : ''), '0')}
|
||||
<span className={styles.kmUnit}>км</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const nameContent = (
|
||||
<>
|
||||
<div className={styles.bundleName}>
|
||||
{isReadOnly ? (
|
||||
<span>{nameVal}</span>
|
||||
) : (
|
||||
<TextField borderless className={styles.input} value={nameVal} onChange={(_, v) => matrix.editText(supplier.id, row.id, itemIndex, 'supplierPosition', v ?? '')} />
|
||||
)}
|
||||
{showBundle ? (
|
||||
<span className={styles.bundleBtns}>
|
||||
{itemsCount > 1 ? (
|
||||
<button className={styles.bundleRemoveBtn} title="Удалить строку" onClick={() => matrix.removeBundleItem(supplier.id, row.id, itemIndex)}>
|
||||
×
|
||||
</button>
|
||||
) : undefined}
|
||||
{isLast ? (
|
||||
<button className={styles.bundleAddBtn} title="Добавить строку комплекта" onClick={() => matrix.addBundleItem(supplier.id, row.id)}>
|
||||
+
|
||||
</button>
|
||||
) : undefined}
|
||||
</span>
|
||||
) : undefined}
|
||||
</div>
|
||||
{row.isDelivery ? kmContent : undefined}
|
||||
</>
|
||||
);
|
||||
|
||||
const qtyContent = isReadOnly ? (
|
||||
<span>{qty || '—'}</span>
|
||||
) : (
|
||||
numInput('quantity', matrix.raw[key('quantity')] ?? (qty ? String(qty) : ''), row.isDelivery ? 'рейсы' : '—')
|
||||
);
|
||||
|
||||
const priceInput = numInput('pricePerUnit', matrix.raw[key('pricePerUnit')] ?? (price ? String(price) : ''), '0');
|
||||
|
||||
return (
|
||||
<>
|
||||
{cell(nameContent, styles.cellName)}
|
||||
{cell(
|
||||
isReadOnly ? (
|
||||
<span>{unitVal}</span>
|
||||
) : (
|
||||
<TextField borderless className={styles.input} value={unitVal} onChange={(_, v) => matrix.editText(supplier.id, row.id, itemIndex, 'unit', v ?? '')} />
|
||||
)
|
||||
)}
|
||||
{cell(qtyContent)}
|
||||
{isForeign ? (
|
||||
<>
|
||||
{cell(isReadOnly ? <span>{formatMoney(price)}</span> : priceInput)}
|
||||
{cell(<span>{formatMoney(sumCur)}</span>)}
|
||||
{cell(<span>{priceKzt > 0 ? formatKzt(priceKzt) : '—'}</span>)}
|
||||
</>
|
||||
) : (
|
||||
cell(isReadOnly ? <span>{price ? formatKzt(price) : '—'}</span> : priceInput)
|
||||
)}
|
||||
{cell(<span>{sumKzt > 0 ? formatKzt(sumKzt) : '—'}</span>, styles.sumCell)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,598 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.state {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 4px 0 0;
|
||||
color: $danger;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// --- Комментарий ИИ ---
|
||||
|
||||
.aiCommentBlock {
|
||||
border: 1px solid #c7e0f4;
|
||||
border-radius: 4px;
|
||||
background: #f0f9ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aiCommentTitle {
|
||||
padding: 6px 16px;
|
||||
background: #e8f2fc;
|
||||
border-bottom: 1px solid #c7e0f4;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #004578;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.aiCommentDeleteBtn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
color: #a4262c;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.15s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.aiCommentBody {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.aiCommentText {
|
||||
padding: 14px 16px;
|
||||
font-size: 13px;
|
||||
color: $text;
|
||||
line-height: 1.6;
|
||||
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 0 10px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Тулбар добавления поставщика ---
|
||||
|
||||
.supplierToolbar {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.addInput {
|
||||
flex: 0 1 280px;
|
||||
}
|
||||
|
||||
.currencySelect {
|
||||
height: 32px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid $border-strong;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
color: $text;
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: $accent;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.currencyTag {
|
||||
font-size: 11px;
|
||||
background: #e8f2fc;
|
||||
color: #004578;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.noOfferTag {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background: $danger-bg;
|
||||
color: $danger;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// --- Таблица сравнения ---
|
||||
|
||||
.tableScroll {
|
||||
overflow: auto;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
max-height: 70vh;
|
||||
}
|
||||
|
||||
.ctTable {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.headerRow1 th {
|
||||
background: $accent-bg;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
border-bottom: 1px solid #c7e0f4;
|
||||
border-right: 1px solid $border;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.headerRow2 th {
|
||||
background: #e8f2fc;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
color: $muted;
|
||||
border-bottom: 2px solid #c7e0f4;
|
||||
border-right: 1px solid $border;
|
||||
position: sticky;
|
||||
top: 38px; // высота headerRow1 (приблизительно)
|
||||
z-index: 1;
|
||||
white-space: nowrap;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.colPosition {
|
||||
min-width: 220px;
|
||||
text-align: left !important;
|
||||
position: sticky !important;
|
||||
left: 0;
|
||||
z-index: 4 !important;
|
||||
background: $accent-bg !important;
|
||||
}
|
||||
|
||||
.colUnit {
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.colQty {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.supplierGroupHeader {
|
||||
border-left: 2px solid #c7e0f4 !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.colSelected {
|
||||
background: #fffde7 !important;
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
border-left: 1px solid $border;
|
||||
|
||||
&:first-of-type {
|
||||
border-left: 2px solid #c7e0f4;
|
||||
}
|
||||
}
|
||||
|
||||
.subHeaderName {
|
||||
min-width: 150px;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.supplierHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.supplierNameText {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.recommendedBadge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
background: $accent;
|
||||
color: #ffffff;
|
||||
padding: 1px 6px;
|
||||
border-radius: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.supplierActions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.selectBtn {
|
||||
font-size: 11px;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid $accent;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
color: $accent;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
|
||||
&:hover {
|
||||
background: $accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.selectBtnActive {
|
||||
background: $accent;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.deleteBtn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: $border;
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: $danger-bg;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.selectedBadge {
|
||||
font-size: 11px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 3px;
|
||||
background: $accent;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// --- Тело ---
|
||||
|
||||
.row {
|
||||
&:hover td {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
|
||||
.row td {
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid $border;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nameCell {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: #ffffff;
|
||||
z-index: 1;
|
||||
min-width: 220px;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.idx {
|
||||
color: $muted;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.unitCell {
|
||||
text-align: center;
|
||||
color: $muted;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.qtyCell {
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
|
||||
.cell {
|
||||
text-align: right;
|
||||
border-left: 1px solid $border;
|
||||
min-width: 90px;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.cellName {
|
||||
text-align: left;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.sumCell {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input {
|
||||
:global(.ms-TextField-field) {
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
padding: 2px 6px;
|
||||
min-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.cellName .input {
|
||||
:global(.ms-TextField-field) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Итого ---
|
||||
|
||||
.subtotalRow td {
|
||||
padding: 6px 12px;
|
||||
background: #f0f6fc; // светло-синий подытог
|
||||
border-top: 1px solid #c7e0f4;
|
||||
border-bottom: 1px solid #c7e0f4;
|
||||
text-align: right;
|
||||
color: #004578;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.totalRow td {
|
||||
padding: 8px 12px;
|
||||
background: $accent-bg;
|
||||
border-top: 2px solid $accent;
|
||||
text-align: right;
|
||||
color: #004578;
|
||||
}
|
||||
|
||||
.totalLabel {
|
||||
text-align: left !important;
|
||||
color: $text !important;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background: $accent-bg;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.totalCell {
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
border-left: 1px solid #c7e0f4;
|
||||
}
|
||||
|
||||
.totalRecommended {
|
||||
background: #c7e0f4 !important;
|
||||
color: #003a6c !important;
|
||||
}
|
||||
|
||||
// --- Доп. расходы / доставка ---
|
||||
|
||||
// Строка добавления доп. позиции/доставки в конце таблицы (ссылки + инлайн-форма).
|
||||
.addPositionRow td {
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid $border;
|
||||
background: #ffffff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Ссылки добавления — вертикально (одна под другой).
|
||||
.addPositionLinks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.addPositionBtn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $accent;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
padding: 2px 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.addPosInlineForm {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.addInputSmall {
|
||||
flex: 0 0 90px;
|
||||
}
|
||||
|
||||
.extraRow {
|
||||
td {
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid $border;
|
||||
vertical-align: middle;
|
||||
background: #fffbf5; // кремовый фон доп.строки
|
||||
}
|
||||
|
||||
&:hover td {
|
||||
background: #fff6e9;
|
||||
}
|
||||
|
||||
.nameCell {
|
||||
background: #fffbf5;
|
||||
}
|
||||
}
|
||||
|
||||
.extraBadge {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
background: #fff4ce;
|
||||
color: #7d5900;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.deleteExtraBtn {
|
||||
margin-left: 6px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: $border;
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
background: $danger-bg;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Доставка: «км» выводится под названием «Доставка» в широком столбце «Наименование ТМЦ»
|
||||
// (не в узкой колонке «Кол-во») — места достаточно, цифры не режутся. Подпись не нужна:
|
||||
// строка и так «Доставка», хватает суффикса «км».
|
||||
.kmLine {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.kmControl {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
width: 84px; // компактно, как аннотация под «Доставка» (не второе название)
|
||||
|
||||
:global(.ms-TextField) {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.kmUnit {
|
||||
flex: 0 0 auto;
|
||||
font-size: 11px;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.kmReadonly {
|
||||
font-size: 12px;
|
||||
color: $muted;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// --- Комплекты (bundle) ---
|
||||
|
||||
.bundleName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
> *:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bundleBtns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bundleAddBtn {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: $accent;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: #106ebe;
|
||||
}
|
||||
}
|
||||
|
||||
.bundleRemoveBtn {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: $border;
|
||||
color: $muted;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: $danger-bg;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
import * as React from 'react';
|
||||
import { DefaultButton, Dialog, DialogFooter, DialogType, PrimaryButton, TextField } from '@fluentui/react';
|
||||
import { StepShell } from '../common/StepShell';
|
||||
import { StepProps } from '../types/domain';
|
||||
import { useStep3Matrix } from './useStep3Matrix';
|
||||
import { useAiComment, AiCommentPayload } from './useAiComment';
|
||||
import { ComparisonMatrix } from './ComparisonMatrix';
|
||||
import { CriteriaTable } from './CriteriaTable';
|
||||
import { AiCommentBlock } from './AiCommentBlock';
|
||||
import { InlineApprovalChain } from '../Step4Approval/InlineApprovalChain';
|
||||
import styles from './Step3BuildCt.module.scss';
|
||||
|
||||
// Шаг 3 «Формирование СТ» (§12): контейнер — тулбары (поставщики, доп. расходы) + матрица + комментарий ИИ.
|
||||
// Логика — в useStep3Matrix/useAiComment, таблица — в ComparisonMatrix (§стайл-гайд: логика вне вёрстки).
|
||||
export function Step3BuildCt(props: StepProps): JSX.Element {
|
||||
const { formData, onPrev, isReadOnly } = props;
|
||||
const positions = formData.selectedPositions;
|
||||
const suppliers = formData.suppliers;
|
||||
|
||||
const matrix = useStep3Matrix({
|
||||
service: props.service,
|
||||
formData,
|
||||
onSave: props.onSave,
|
||||
onStepComplete: props.onStepComplete,
|
||||
onNext: props.onNext,
|
||||
isReadOnly
|
||||
});
|
||||
|
||||
// Собираем payload для потока ИИ из текущей матрицы (номер/проект добавит сам хук из шапки СТ).
|
||||
const buildAiPayload = (): AiCommentPayload => ({
|
||||
positions: [
|
||||
...positions.map((p) => ({ name: p.name, unit: p.unit, quantity: p.quantity })),
|
||||
...(formData.step3ExtraPositions ?? []).map((e) => ({ name: e.materialName, unit: e.unit || '—', quantity: 0 }))
|
||||
],
|
||||
suppliers: suppliers
|
||||
.map((s) => ({ name: s.name, grandTotal: matrix.supplierTotals[s.id] ?? 0 }))
|
||||
.filter((s) => s.grandTotal > 0),
|
||||
recommendedSupplier: suppliers.find((s) => s.id === matrix.selectedId)?.name
|
||||
});
|
||||
|
||||
const ai = useAiComment({ service: props.service, ctId: formData.ctId, buildPayload: buildAiPayload });
|
||||
|
||||
// «Далее»: на редактируемой СТ перед переходом предлагаем получить комментарий ИИ (как эталон).
|
||||
// Диалог показываем один раз (нет комментария и не идёт загрузка); дальше кнопка сохраняет.
|
||||
const handleNextClick = (): void => {
|
||||
if (!isReadOnly && formData.ctId && !ai.comment && !ai.isLoading) {
|
||||
ai.openPrompt();
|
||||
return;
|
||||
}
|
||||
matrix.handleNext();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<StepShell
|
||||
title="Формирование СТ"
|
||||
onPrev={onPrev}
|
||||
onNext={handleNextClick}
|
||||
nextLabel={matrix.saving ? 'Сохранение…' : 'Далее'}
|
||||
nextDisabled={matrix.saving || ai.isLoading}
|
||||
>
|
||||
{positions.length === 0 ? (
|
||||
<p className={styles.state}>Позиции не выбраны — вернитесь на шаг «Выбор позиций».</p>
|
||||
) : (
|
||||
<div className={styles.body}>
|
||||
{!isReadOnly ? (
|
||||
<div className={styles.supplierToolbar}>
|
||||
<TextField
|
||||
className={styles.addInput}
|
||||
placeholder="Наименование поставщика"
|
||||
value={matrix.supplierName}
|
||||
onChange={(_, value) => matrix.setSupplierName(value ?? '')}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
matrix.addSupplier();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<select
|
||||
className={styles.currencySelect}
|
||||
value={matrix.supplierCurrency}
|
||||
onChange={(e) => matrix.setSupplierCurrency(e.target.value)}
|
||||
aria-label="Валюта поставщика"
|
||||
>
|
||||
{matrix.currencyOptions.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<DefaultButton
|
||||
iconProps={{ iconName: 'Add' }}
|
||||
text="Добавить поставщика"
|
||||
onClick={matrix.addSupplier}
|
||||
disabled={!matrix.supplierName.trim()}
|
||||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{suppliers.length === 0 ? (
|
||||
<p className={styles.state}>Добавьте поставщиков, чтобы заполнить цены.</p>
|
||||
) : (
|
||||
<>
|
||||
<ComparisonMatrix suppliers={suppliers} matrix={matrix} isReadOnly={!!isReadOnly} />
|
||||
|
||||
<CriteriaTable
|
||||
suppliers={suppliers}
|
||||
criteria={formData.criteria ?? []}
|
||||
onChange={(c) => props.onSave({ criteria: c })}
|
||||
isReadOnly={!!isReadOnly}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{ai.comment || ai.isLoading || ai.error ? (
|
||||
<AiCommentBlock
|
||||
comment={ai.comment}
|
||||
isLoading={ai.isLoading}
|
||||
error={ai.error}
|
||||
onDelete={isReadOnly ? undefined : ai.deleteComment}
|
||||
/>
|
||||
) : undefined}
|
||||
|
||||
{props.isNotificationLink && isReadOnly ? (
|
||||
<InlineApprovalChain
|
||||
service={props.service}
|
||||
formData={formData}
|
||||
onSave={props.onSave}
|
||||
onStepComplete={props.onStepComplete}
|
||||
userDisplayName={props.userDisplayName}
|
||||
/>
|
||||
) : undefined}
|
||||
|
||||
{matrix.saveError ? <p className={styles.error}>Не удалось сохранить: {matrix.saveError}</p> : undefined}
|
||||
</div>
|
||||
)}
|
||||
</StepShell>
|
||||
|
||||
{ai.showPrompt ? (
|
||||
<Dialog
|
||||
hidden={false}
|
||||
onDismiss={ai.closePrompt}
|
||||
dialogContentProps={{
|
||||
type: DialogType.normal,
|
||||
title: 'Комментарий от ИИ',
|
||||
subText: 'Получить комментарий от ИИ перед переходом на следующий шаг?'
|
||||
}}
|
||||
>
|
||||
<DialogFooter>
|
||||
<PrimaryButton
|
||||
iconProps={{ iconName: 'Lightbulb' }}
|
||||
text="Получить"
|
||||
onClick={() => {
|
||||
ai.closePrompt();
|
||||
ai.requestComment().catch(() => undefined);
|
||||
}}
|
||||
/>
|
||||
<DefaultButton
|
||||
text="Пропустить"
|
||||
onClick={() => {
|
||||
ai.closePrompt();
|
||||
matrix.handleNext();
|
||||
}}
|
||||
/>
|
||||
</DialogFooter>
|
||||
</Dialog>
|
||||
) : undefined}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import { CtFormData, CurrencyRate, ExtraPosition, SelectedPosition, Supplier, SupplierCriteria, SupplierOffer } from '../types/domain';
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
|
||||
// Чистая логика сохранения Шага 3 в SharePoint (без React) — вынесено из хука ради читаемости.
|
||||
// Порядок: поставщики → доп. позиции → офферы → winSupplier. Возвращает патч formData с новыми spId.
|
||||
export interface PersistStep3Input {
|
||||
service: KpsCtFormService;
|
||||
ctId: number;
|
||||
suppliers: Supplier[];
|
||||
offers: SupplierOffer[];
|
||||
positions: SelectedPosition[];
|
||||
extras: ExtraPosition[];
|
||||
rates: CurrencyRate[];
|
||||
criteria: SupplierCriteria[];
|
||||
selectedId?: string;
|
||||
}
|
||||
|
||||
interface RowMeta {
|
||||
spId: number;
|
||||
name: string;
|
||||
unit: string;
|
||||
isDelivery: boolean;
|
||||
}
|
||||
|
||||
export async function persistStep3(input: PersistStep3Input): Promise<Partial<CtFormData>> {
|
||||
const { service, ctId, suppliers, offers, positions, extras, rates, criteria, selectedId } = input;
|
||||
|
||||
// 1) Поставщики → «Поставщики» (проставляем spId; push без индексного присваивания после await).
|
||||
// Без-КП (hasOffer:false) заводим в справочник только если по ним введены цены — иначе они остаются
|
||||
// лишь в «Не получены КП» (как в эталоне). Поставщики с КП заводим всегда.
|
||||
const hasPrices = (supplierId: string): boolean =>
|
||||
offers.some((o) => o.supplierId === supplierId && (o.quantity || 0) * (o.pricePerUnit || 0) > 0);
|
||||
const savedSuppliers: Supplier[] = [];
|
||||
for (const s of suppliers) {
|
||||
const promote = s.hasOffer !== false || hasPrices(s.id);
|
||||
savedSuppliers.push(promote && s.spId === undefined ? { ...s, spId: await service.saveSupplier(s.name) } : s);
|
||||
}
|
||||
|
||||
// 2) Доп. позиции → «Позиции СТ» (проставляем spId).
|
||||
const savedExtras: ExtraPosition[] = [];
|
||||
for (const e of extras) {
|
||||
savedExtras.push(e.spId === undefined ? { ...e, spId: await service.createExtraPosition(ctId, e.materialName, e.unit) } : e);
|
||||
}
|
||||
|
||||
// Метаданные строк по локальному id (обычные позиции + доп.) — для маппинга офферов.
|
||||
const rowMeta: Record<string, RowMeta> = {};
|
||||
positions.forEach((p) => {
|
||||
if (p.spId !== undefined) {
|
||||
rowMeta[p.lineId] = { spId: p.spId, name: p.name, unit: p.unit, isDelivery: false };
|
||||
}
|
||||
});
|
||||
savedExtras.forEach((e) => {
|
||||
if (e.spId !== undefined) {
|
||||
rowMeta[e.id] = { spId: e.spId, name: e.materialName, unit: e.unit, isDelivery: !!e.isDelivery };
|
||||
}
|
||||
});
|
||||
|
||||
// 3) Офферы → «Оценка поставщиков».
|
||||
const posSpIds = Object.keys(rowMeta).map((id) => rowMeta[id].spId);
|
||||
const toSave = offers.map((o) => buildOfferRow(o, savedSuppliers, rowMeta, rates)).filter((r): r is OfferRow => r !== undefined);
|
||||
await service.saveOffers(posSpIds, toSave);
|
||||
|
||||
// 4) Критерии → «Критерии» (только по поставщикам с spId и хотя бы одним заполненным полем).
|
||||
const criteriaRows = criteria
|
||||
.map((c) => {
|
||||
const sup = savedSuppliers.find((s) => s.id === c.supplierId);
|
||||
if (sup?.spId === undefined || !(c.paymentType || c.deliveryType || c.deadline || c.sertificates || c.comment)) {
|
||||
return undefined;
|
||||
}
|
||||
return {
|
||||
supplierSpId: sup.spId,
|
||||
paymentType: c.paymentType ?? '',
|
||||
deliveryType: c.deliveryType ?? '',
|
||||
deadline: c.deadline ?? '',
|
||||
sertificates: c.sertificates ?? '',
|
||||
comment: c.comment ?? ''
|
||||
};
|
||||
})
|
||||
.filter((r): r is CriteriaRow => r !== undefined);
|
||||
await service.saveCriteria(ctId, criteriaRows);
|
||||
|
||||
// 5) Поставщик-победитель → winSupplier в шапке.
|
||||
const winSup = savedSuppliers.find((s) => s.id === selectedId);
|
||||
let winSupplierId: number | undefined;
|
||||
if (winSup?.spId !== undefined) {
|
||||
await service.setWinSupplier(ctId, winSup.spId);
|
||||
winSupplierId = winSup.spId;
|
||||
}
|
||||
|
||||
return { suppliers: savedSuppliers, step3ExtraPositions: savedExtras, recommendedSupplierId: selectedId, winSupplierId };
|
||||
}
|
||||
|
||||
interface OfferRow {
|
||||
positionSpId: number;
|
||||
supplierSpId: number;
|
||||
itemIndex: number;
|
||||
supplierPosition: string;
|
||||
unit: string;
|
||||
quantity: number;
|
||||
price: number;
|
||||
summa: number;
|
||||
priceTenge: number;
|
||||
summaTenge: number;
|
||||
valutaSpId?: number;
|
||||
deliveryDistanceKm?: number;
|
||||
offerSpId?: number;
|
||||
}
|
||||
|
||||
interface CriteriaRow {
|
||||
supplierSpId: number;
|
||||
paymentType: string;
|
||||
deliveryType: string;
|
||||
deadline: string;
|
||||
sertificates: string;
|
||||
comment: string;
|
||||
}
|
||||
|
||||
function buildOfferRow(
|
||||
o: SupplierOffer,
|
||||
savedSuppliers: Supplier[],
|
||||
rowMeta: Record<string, { spId: number; name: string; unit: string; isDelivery: boolean }>,
|
||||
rates: CurrencyRate[]
|
||||
): OfferRow | undefined {
|
||||
const sup = savedSuppliers.find((s) => s.id === o.supplierId);
|
||||
const row = rowMeta[o.positionId];
|
||||
if (sup?.spId === undefined || row === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
const currency = sup.currency ?? 'KZT';
|
||||
const rateObj = currency !== 'KZT' ? rates.find((r) => r.currency === currency) : undefined;
|
||||
const rate = rateObj?.rate ?? 1;
|
||||
const qty = o.quantity || 0;
|
||||
const price = o.pricePerUnit || 0;
|
||||
const summaTenge = qty * price * rate;
|
||||
if (summaTenge <= 0) {
|
||||
return undefined;
|
||||
}
|
||||
return {
|
||||
positionSpId: row.spId,
|
||||
supplierSpId: sup.spId,
|
||||
itemIndex: o.itemIndex,
|
||||
supplierPosition: o.supplierPosition ?? row.name,
|
||||
unit: o.unit ?? row.unit,
|
||||
quantity: qty,
|
||||
price,
|
||||
summa: qty * price,
|
||||
priceTenge: price * rate,
|
||||
summaTenge,
|
||||
valutaSpId: rateObj?.spId,
|
||||
deliveryDistanceKm: row.isDelivery ? o.deliveryDistanceKm : undefined,
|
||||
offerSpId: o.offerId ? parseInt(o.offerId, 10) || undefined : undefined
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
|
||||
// Логика блока «Комментарий ИИ» на Шаге 3: стейт комментария + вызов потока (по образцу эталона).
|
||||
// Комментарий хранится в SP (колонка `comment` шапки), поэтому переживает переходы шагов —
|
||||
// в formData его не держим (стайл-гайд: логика вне вёрстки, состояние ближе к источнику).
|
||||
|
||||
// Полезная нагрузка, которую собирает Шаг 3 (номер/проект добавляет сам хук из шапки СТ).
|
||||
export interface AiCommentPayload {
|
||||
positions: Array<{ name: string; unit: string; quantity: number }>;
|
||||
suppliers: Array<{ name: string; grandTotal: number }>;
|
||||
recommendedSupplier?: string;
|
||||
}
|
||||
|
||||
interface UseAiCommentArgs {
|
||||
service: KpsCtFormService;
|
||||
ctId?: number;
|
||||
buildPayload: () => AiCommentPayload;
|
||||
}
|
||||
|
||||
export interface UseAiCommentResult {
|
||||
comment?: string;
|
||||
isLoading: boolean;
|
||||
error?: string;
|
||||
showPrompt: boolean;
|
||||
openPrompt: () => void;
|
||||
closePrompt: () => void;
|
||||
requestComment: () => Promise<void>;
|
||||
deleteComment: () => void;
|
||||
}
|
||||
|
||||
export function useAiComment(args: UseAiCommentArgs): UseAiCommentResult {
|
||||
const { service, ctId } = args;
|
||||
const [comment, setComment] = useState<string | undefined>(undefined);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
const [showPrompt, setShowPrompt] = useState(false);
|
||||
|
||||
const mountedRef = useRef(true);
|
||||
const headerRef = useRef<{ number?: number; project?: string }>({});
|
||||
const buildRef = useRef(args.buildPayload);
|
||||
buildRef.current = args.buildPayload; // всегда актуальная сборка payload (без пересоздания колбэков)
|
||||
|
||||
useEffect(() => () => {
|
||||
mountedRef.current = false;
|
||||
}, []);
|
||||
|
||||
// На маунте подтягиваем шапку: номер/проект — в payload; сохранённый ранее комментарий — показать.
|
||||
useEffect(() => {
|
||||
if (!ctId) {
|
||||
return;
|
||||
}
|
||||
service
|
||||
.loadCtHeader(ctId)
|
||||
.then((h) => {
|
||||
headerRef.current = { number: h.number, project: h.project };
|
||||
if (h.comment && mountedRef.current) {
|
||||
setComment(h.comment);
|
||||
}
|
||||
})
|
||||
.catch(() => undefined);
|
||||
}, [ctId, service]);
|
||||
|
||||
const requestComment = useCallback(async () => {
|
||||
if (!ctId) {
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setError(undefined);
|
||||
try {
|
||||
const response = await service.triggerAiComment({
|
||||
ctId,
|
||||
ctNumber: headerRef.current.number,
|
||||
projectName: headerRef.current.project,
|
||||
...buildRef.current()
|
||||
});
|
||||
if (response) {
|
||||
if (mountedRef.current) {
|
||||
setComment(response);
|
||||
}
|
||||
// Персист в шапку СТ ЖДЁМ и НЕ глотаем: раньше сбой MERGE проглатывался, коммент был виден в
|
||||
// сессии, но не сохранялся → при перезагрузке пропадал («не сохраняется/не читается»).
|
||||
try {
|
||||
await service.updateCtComment(ctId, response);
|
||||
} catch (persistErr) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('[AI] не удалось сохранить комментарий в шапку СТ', persistErr);
|
||||
if (mountedRef.current) {
|
||||
setError('Комментарий получен, но не сохранён в СТ — при перезагрузке он пропадёт. Попробуйте ещё раз.');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Поток не вернул тело — подождём и перечитаем: он мог записать комментарий в SP сам.
|
||||
await new Promise<void>((resolve) => setTimeout(resolve, 5000));
|
||||
const saved = await service.loadCtHeader(ctId).then((h) => h.comment).catch(() => undefined);
|
||||
if (saved && mountedRef.current) {
|
||||
setComment(saved);
|
||||
} else if (mountedRef.current) {
|
||||
setError('Поток не вернул комментарий. Попробуйте ещё раз через несколько секунд.');
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
if (mountedRef.current) {
|
||||
setError((e as Error).message ?? 'Ошибка получения комментария ИИ');
|
||||
}
|
||||
} finally {
|
||||
if (mountedRef.current) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}, [ctId, service]);
|
||||
|
||||
const deleteComment = useCallback(() => {
|
||||
setComment(undefined);
|
||||
if (ctId) {
|
||||
service.updateCtComment(ctId, '').catch((e) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('[AI] не удалось очистить комментарий в шапке СТ', e);
|
||||
});
|
||||
}
|
||||
}, [ctId, service]);
|
||||
|
||||
const openPrompt = useCallback(() => setShowPrompt(true), []);
|
||||
const closePrompt = useCallback(() => setShowPrompt(false), []);
|
||||
|
||||
return { comment, isLoading, error, showPrompt, openPrompt, closePrompt, requestComment, deleteComment };
|
||||
}
|
||||
@@ -0,0 +1,294 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { CtFormData, CurrencyRate, FormStep, SupplierOffer } from '../types/domain';
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
import { persistStep3 } from './step3Persist';
|
||||
|
||||
// Вся логика матрицы Шага 3 (офферы, курсы, доп. позиции, комплекты, итоги, сохранение) — отдельно от вёрстки.
|
||||
|
||||
// Единая строка матрицы: обычная позиция или доп. расход/доставка.
|
||||
export interface MatrixRow {
|
||||
id: string; // lineId (обычная) или extra id (доп.)
|
||||
name: string;
|
||||
unit: string;
|
||||
quantity: number; // кол-во заявки (для доп./доставки = 0)
|
||||
isExtra: boolean;
|
||||
isDelivery: boolean;
|
||||
spId?: number;
|
||||
}
|
||||
|
||||
// Число под-колонок поставщика: KZT = 5, валюта = 7 (+ Цена/Сумма в валюте).
|
||||
export function subColsOf(currency: string): number {
|
||||
return currency !== 'KZT' ? 7 : 5;
|
||||
}
|
||||
|
||||
type NumberField = 'quantity' | 'pricePerUnit' | 'deliveryDistanceKm';
|
||||
|
||||
interface UseStep3MatrixArgs {
|
||||
service: KpsCtFormService;
|
||||
formData: CtFormData;
|
||||
onSave: (partial: Partial<CtFormData>) => void;
|
||||
onStepComplete: (step: FormStep) => void;
|
||||
onNext?: () => void;
|
||||
isReadOnly?: boolean;
|
||||
}
|
||||
|
||||
export interface Step3Matrix {
|
||||
rows: MatrixRow[];
|
||||
currencyOptions: string[];
|
||||
supplierName: string;
|
||||
setSupplierName: (v: string) => void;
|
||||
supplierCurrency: string;
|
||||
setSupplierCurrency: (v: string) => void;
|
||||
raw: Record<string, string>;
|
||||
saving: boolean;
|
||||
saveError?: string;
|
||||
rateOf: (currency: string) => number;
|
||||
itemsFor: (supplierId: string, rowId: string) => SupplierOffer[];
|
||||
supplierTotals: Record<string, number>; // общий итог по поставщику (₸)
|
||||
regularTotals: Record<string, number>; // итог по обычным позициям
|
||||
extraTotals: Record<string, number>; // итог по доп. расходам
|
||||
recommendedId?: string;
|
||||
selectedId?: string;
|
||||
addSupplier: () => void;
|
||||
removeSupplier: (id: string) => void;
|
||||
selectSupplier: (id: string) => void;
|
||||
addExtraPosition: (name: string, unit: string) => void;
|
||||
addDelivery: () => void;
|
||||
removeExtraPosition: (id: string) => void;
|
||||
addBundleItem: (supplierId: string, rowId: string) => void;
|
||||
removeBundleItem: (supplierId: string, rowId: string, itemIndex: number) => void;
|
||||
editNumber: (supplierId: string, rowId: string, itemIndex: number, field: NumberField, v: string) => void;
|
||||
editText: (supplierId: string, rowId: string, itemIndex: number, field: 'supplierPosition' | 'unit', v: string) => void;
|
||||
handleNext: () => void;
|
||||
}
|
||||
|
||||
export function useStep3Matrix(args: UseStep3MatrixArgs): Step3Matrix {
|
||||
const { service, formData, onSave, onStepComplete, onNext, isReadOnly } = args;
|
||||
const positions = formData.selectedPositions;
|
||||
const suppliers = formData.suppliers;
|
||||
const offers = formData.offers;
|
||||
const extras = formData.step3ExtraPositions ?? [];
|
||||
|
||||
const [supplierName, setSupplierName] = useState('');
|
||||
const [supplierCurrency, setSupplierCurrency] = useState('KZT');
|
||||
const [raw, setRaw] = useState<Record<string, string>>({}); // сырой ввод чисел (чтобы не терять «10.»)
|
||||
const [rates, setRates] = useState<CurrencyRate[]>(formData.currencyRates);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | undefined>(undefined);
|
||||
|
||||
// Курсы валют грузим один раз, если ещё не в formData.
|
||||
useEffect(() => {
|
||||
if (formData.currencyRates.length > 0) {
|
||||
return;
|
||||
}
|
||||
service
|
||||
.getCurrencyRates()
|
||||
.then((r) => {
|
||||
setRates(r);
|
||||
onSave({ currencyRates: r });
|
||||
})
|
||||
.catch(() => undefined);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const rows = useMemo<MatrixRow[]>(
|
||||
() => [
|
||||
...positions.map((p) => ({ id: p.lineId, name: p.name, unit: p.unit, quantity: p.quantity, isExtra: false, isDelivery: false, spId: p.spId })),
|
||||
...extras.map((e) => ({ id: e.id, name: e.materialName, unit: e.unit, quantity: 0, isExtra: true, isDelivery: !!e.isDelivery, spId: e.spId }))
|
||||
],
|
||||
[positions, extras]
|
||||
);
|
||||
|
||||
const rateOf = (currency: string): number => (currency === 'KZT' ? 1 : rates.find((r) => r.currency === currency)?.rate ?? 1);
|
||||
|
||||
// Строки комплекта одной ячейки (по возрастанию itemIndex).
|
||||
const itemsFor = (supplierId: string, rowId: string): SupplierOffer[] =>
|
||||
offers.filter((o) => o.supplierId === supplierId && o.positionId === rowId).sort((a, b) => a.itemIndex - b.itemIndex);
|
||||
|
||||
// Итоги по поставщику (₸): отдельно обычные позиции, отдельно доп. расходы, и общий.
|
||||
const totals = useMemo(() => {
|
||||
const extraIds = new Set(rows.filter((r) => r.isExtra).map((r) => r.id));
|
||||
const regular: Record<string, number> = {};
|
||||
const extra: Record<string, number> = {};
|
||||
const grand: Record<string, number> = {};
|
||||
suppliers.forEach((s) => {
|
||||
const rate = rateOf(s.currency ?? 'KZT');
|
||||
let r = 0;
|
||||
let e = 0;
|
||||
offers.forEach((o) => {
|
||||
if (o.supplierId !== s.id) {
|
||||
return;
|
||||
}
|
||||
const value = (o.quantity || 0) * (o.pricePerUnit || 0) * rate;
|
||||
if (extraIds.has(o.positionId)) {
|
||||
e += value;
|
||||
} else {
|
||||
r += value;
|
||||
}
|
||||
});
|
||||
regular[s.id] = r;
|
||||
extra[s.id] = e;
|
||||
grand[s.id] = r + e;
|
||||
});
|
||||
return { regular, extra, grand };
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [suppliers, offers, rates, rows]);
|
||||
|
||||
const supplierTotals = totals.grand;
|
||||
const regularTotals = totals.regular;
|
||||
const extraTotals = totals.extra;
|
||||
|
||||
const recommendedId = useMemo<string | undefined>(() => {
|
||||
const withTotal = suppliers.map((s) => ({ id: s.id, total: supplierTotals[s.id] ?? 0 })).filter((t) => t.total > 0);
|
||||
if (withTotal.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
const min = Math.min(...withTotal.map((t) => t.total));
|
||||
return withTotal.find((t) => t.total === min)?.id;
|
||||
}, [suppliers, supplierTotals]);
|
||||
|
||||
const selectedId = formData.recommendedSupplierId ?? recommendedId;
|
||||
const currencyOptions = useMemo(() => ['KZT', ...rates.map((r) => r.currency)], [rates]);
|
||||
|
||||
const makeOffer = (supplierId: string, rowId: string, itemIndex: number, patch?: Partial<SupplierOffer>): SupplierOffer => {
|
||||
const row = rows.find((r) => r.id === rowId);
|
||||
return {
|
||||
supplierId,
|
||||
positionId: rowId,
|
||||
itemIndex,
|
||||
supplierPosition: row?.name,
|
||||
unit: row?.unit,
|
||||
quantity: itemIndex === 0 ? row?.quantity ?? 0 : 0, // доп. строки комплекта — кол-во с нуля
|
||||
pricePerUnit: 0,
|
||||
...patch
|
||||
};
|
||||
};
|
||||
|
||||
const upsertOffer = (supplierId: string, rowId: string, itemIndex: number, patch: Partial<SupplierOffer>): void => {
|
||||
const exists = offers.some((o) => o.supplierId === supplierId && o.positionId === rowId && o.itemIndex === itemIndex);
|
||||
const next = exists
|
||||
? offers.map((o) => (o.supplierId === supplierId && o.positionId === rowId && o.itemIndex === itemIndex ? { ...o, ...patch } : o))
|
||||
: [...offers, makeOffer(supplierId, rowId, itemIndex, patch)];
|
||||
onSave({ offers: next });
|
||||
};
|
||||
|
||||
const parseNum = (v: string): number => {
|
||||
const n = parseFloat(v.replace(',', '.'));
|
||||
return isNaN(n) ? 0 : n;
|
||||
};
|
||||
|
||||
const addSupplier = (): void => {
|
||||
const trimmed = supplierName.trim();
|
||||
if (!trimmed || suppliers.some((s) => s.name.toLowerCase() === trimmed.toLowerCase())) {
|
||||
setSupplierName('');
|
||||
return;
|
||||
}
|
||||
onSave({ suppliers: [...suppliers, { id: `sup_${trimmed}`, name: trimmed, currency: supplierCurrency, hasOffer: true }] });
|
||||
setSupplierName('');
|
||||
setSupplierCurrency('KZT');
|
||||
};
|
||||
|
||||
const removeSupplier = (id: string): void => {
|
||||
onSave({
|
||||
suppliers: suppliers.filter((s) => s.id !== id),
|
||||
offers: offers.filter((o) => o.supplierId !== id),
|
||||
recommendedSupplierId: formData.recommendedSupplierId === id ? undefined : formData.recommendedSupplierId
|
||||
});
|
||||
};
|
||||
|
||||
const selectSupplier = (id: string): void => onSave({ recommendedSupplierId: id });
|
||||
|
||||
const addExtraPosition = (name: string, unit: string): void => {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) {
|
||||
return;
|
||||
}
|
||||
onSave({ step3ExtraPositions: [...extras, { id: `extra_pos_${Date.now()}`, materialName: trimmed, unit: unit.trim() }] });
|
||||
};
|
||||
|
||||
const addDelivery = (): void => {
|
||||
onSave({ step3ExtraPositions: [...extras, { id: `extra_pos_${Date.now()}`, materialName: 'Доставка', unit: 'рейс', isDelivery: true }] });
|
||||
};
|
||||
|
||||
const removeExtraPosition = (id: string): void => {
|
||||
onSave({ step3ExtraPositions: extras.filter((e) => e.id !== id), offers: offers.filter((o) => o.positionId !== id) });
|
||||
};
|
||||
|
||||
// Добавить строку комплекта. Если ячейка пуста — материализуем базовую (0) и добавляем следующую.
|
||||
const addBundleItem = (supplierId: string, rowId: string): void => {
|
||||
const items = itemsFor(supplierId, rowId);
|
||||
const base = items.length === 0 ? [makeOffer(supplierId, rowId, 0)] : [];
|
||||
const nextIndex = items.length === 0 ? 1 : items.length;
|
||||
onSave({ offers: [...offers, ...base, makeOffer(supplierId, rowId, nextIndex)] });
|
||||
};
|
||||
|
||||
const removeBundleItem = (supplierId: string, rowId: string, itemIndex: number): void => {
|
||||
const remaining = itemsFor(supplierId, rowId)
|
||||
.filter((o) => o.itemIndex !== itemIndex)
|
||||
.map((o, i) => ({ ...o, itemIndex: i })); // переиндексация, чтобы не было дыр
|
||||
const others = offers.filter((o) => !(o.supplierId === supplierId && o.positionId === rowId));
|
||||
onSave({ offers: [...others, ...remaining] });
|
||||
};
|
||||
|
||||
const editNumber = (supplierId: string, rowId: string, itemIndex: number, field: NumberField, v: string): void => {
|
||||
setRaw((prev) => ({ ...prev, [`${supplierId}::${rowId}::${itemIndex}::${field}`]: v }));
|
||||
upsertOffer(supplierId, rowId, itemIndex, { [field]: parseNum(v) });
|
||||
};
|
||||
|
||||
const editText = (supplierId: string, rowId: string, itemIndex: number, field: 'supplierPosition' | 'unit', v: string): void =>
|
||||
upsertOffer(supplierId, rowId, itemIndex, { [field]: v });
|
||||
|
||||
const handleNext = (): void => {
|
||||
if (isReadOnly) {
|
||||
onStepComplete(3);
|
||||
onNext?.();
|
||||
return;
|
||||
}
|
||||
if (!formData.ctId) {
|
||||
setSaveError('Сначала создайте СТ на Шаге 1 (кнопка «Создать и далее»).');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setSaveError(undefined);
|
||||
persistStep3({ service, ctId: formData.ctId, suppliers, offers, positions, extras, rates, criteria: formData.criteria ?? [], selectedId })
|
||||
.then((patch) => {
|
||||
onSave(patch);
|
||||
onStepComplete(3);
|
||||
onNext?.();
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
setSaveError(e.message);
|
||||
setSaving(false);
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
rows,
|
||||
currencyOptions,
|
||||
supplierName,
|
||||
setSupplierName,
|
||||
supplierCurrency,
|
||||
setSupplierCurrency,
|
||||
raw,
|
||||
saving,
|
||||
saveError,
|
||||
rateOf,
|
||||
itemsFor,
|
||||
supplierTotals,
|
||||
regularTotals,
|
||||
extraTotals,
|
||||
recommendedId,
|
||||
selectedId,
|
||||
addSupplier,
|
||||
removeSupplier,
|
||||
selectSupplier,
|
||||
addExtraPosition,
|
||||
addDelivery,
|
||||
removeExtraPosition,
|
||||
addBundleItem,
|
||||
removeBundleItem,
|
||||
editNumber,
|
||||
editText,
|
||||
handleNext
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import * as React from 'react';
|
||||
import { DefaultButton, Dialog, DialogFooter, DialogType, MessageBar, MessageBarType, PrimaryButton, TextField } from '@fluentui/react';
|
||||
import { Pill } from '../common/Pill';
|
||||
import { APPROVER_STATUS_META, CtFormData, FormStep } from '../types/domain';
|
||||
import { formatDateTime } from '../utils/format';
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
import { useStep4Approval } from './useStep4Approval';
|
||||
import styles from './Step4Approval.module.scss';
|
||||
|
||||
interface InlineApprovalChainProps {
|
||||
service: KpsCtFormService;
|
||||
formData: CtFormData;
|
||||
onSave: (partial: Partial<CtFormData>) => void;
|
||||
onStepComplete: (step: FormStep) => void;
|
||||
userDisplayName: string;
|
||||
}
|
||||
|
||||
// Инлайн-цепочка согласования на Шаге 3 — для согласующего, открывшего СТ по ссылке-уведомлению (read-only,
|
||||
// как в эталоне). Переиспользует useStep4Approval (сам грузит цепочку из SP): только просмотр статусов +
|
||||
// «Согласовать/Отклонить» своей строки + диалог. Правка цепочки/отправка — это Шаг 4, здесь их нет.
|
||||
export function InlineApprovalChain(props: InlineApprovalChainProps): JSX.Element | null {
|
||||
// Инлайн-блок только читает цепочку из SP и даёт проголосовать — сид новой цепочки здесь запрещён.
|
||||
const a = useStep4Approval({ ...props, canSeed: false });
|
||||
if (a.chain.length === 0) {
|
||||
return null; // цепочка ещё грузится из SP или её нет — блок не показываем
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={styles.section}>
|
||||
<h3 className={styles.title}>Цепочка согласования</h3>
|
||||
<ol className={styles.list}>
|
||||
{a.chain.map((member) => {
|
||||
const meta = APPROVER_STATUS_META[member.status];
|
||||
return (
|
||||
<li key={member.rowId} className={styles.row}>
|
||||
<span className={styles.num}>{member.order}</span>
|
||||
<span className={styles.name}>{member.displayName}</span>
|
||||
{member.isInitiator ? <Pill kind="neutral">Инициатор</Pill> : undefined}
|
||||
<span className={styles.spacer} />
|
||||
{a.showStatuses ? <Pill kind={meta.kind}>{meta.label}</Pill> : undefined}
|
||||
{member.comment ? <span className={styles.comment}>«{member.comment}»</span> : undefined}
|
||||
{member.decidedAt ? <span className={styles.date}>{formatDateTime(member.decidedAt)}</span> : undefined}
|
||||
|
||||
{a.isOnApproval && a.currentUserRowId === member.rowId ? (
|
||||
<div className={styles.actions}>
|
||||
<PrimaryButton iconProps={{ iconName: 'CheckMark' }} text="Согласовать" onClick={() => a.openAction(member, 'approve')} />
|
||||
<DefaultButton iconProps={{ iconName: 'Cancel' }} text="Отклонить" className={styles.rejectBtn} onClick={() => a.openAction(member, 'reject')} />
|
||||
</div>
|
||||
) : undefined}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
|
||||
{a.error ? (
|
||||
<MessageBar messageBarType={MessageBarType.error} isMultiline={false}>{a.error}</MessageBar>
|
||||
) : undefined}
|
||||
{a.notifyWarning ? (
|
||||
<MessageBar messageBarType={MessageBarType.warning}>{a.notifyWarning}</MessageBar>
|
||||
) : undefined}
|
||||
|
||||
{a.action ? (
|
||||
<Dialog
|
||||
hidden={false}
|
||||
onDismiss={a.closeAction}
|
||||
dialogContentProps={{
|
||||
type: DialogType.normal,
|
||||
title: a.action.kind === 'approve' ? 'Согласование' : 'Отклонение',
|
||||
subText: a.action.kind === 'approve' ? 'Подтвердите согласование СТ. Комментарий необязателен.' : 'Укажите причину отклонения (обязательно).'
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label="Комментарий"
|
||||
multiline
|
||||
rows={3}
|
||||
value={a.action.comment}
|
||||
onChange={(_, v) => a.setActionComment(v ?? '')}
|
||||
required={a.action.kind === 'reject'}
|
||||
placeholder={a.action.kind === 'reject' ? 'Причина отклонения…' : 'Комментарий (необязательно)…'}
|
||||
/>
|
||||
<DialogFooter>
|
||||
<PrimaryButton
|
||||
onClick={a.submitAction}
|
||||
disabled={a.sending || (a.action.kind === 'reject' && !a.action.comment.trim())}
|
||||
text={a.action.kind === 'approve' ? 'Согласовать' : 'Отклонить'}
|
||||
/>
|
||||
<DefaultButton onClick={a.closeAction} text="Отмена" disabled={a.sending} />
|
||||
</DialogFooter>
|
||||
</Dialog>
|
||||
) : undefined}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
@import '../common/theme';
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
max-width: 860px; // цепочка не на всю ширину — как в эталоне (.chainList)
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: $head-bg;
|
||||
color: $muted;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: $muted;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: $muted;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rejectBtn {
|
||||
color: $danger !important;
|
||||
border-color: $danger !important;
|
||||
|
||||
&:hover {
|
||||
background: $danger-bg !important;
|
||||
}
|
||||
}
|
||||
|
||||
// --- Поиск согласующего ---
|
||||
|
||||
.searchBox {
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
list-style: none;
|
||||
margin: 2px 0 0;
|
||||
padding: 4px 0;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid $border-strong;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $hover;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestionName {
|
||||
font-size: 13px;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.suggestionEmail {
|
||||
font-size: 11px;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
// --- Футер ---
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid $border;
|
||||
}
|
||||
@@ -0,0 +1,203 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
DefaultButton,
|
||||
Dialog,
|
||||
DialogFooter,
|
||||
DialogType,
|
||||
IconButton,
|
||||
MessageBar,
|
||||
MessageBarType,
|
||||
PrimaryButton,
|
||||
Spinner,
|
||||
SpinnerSize,
|
||||
TextField
|
||||
} from '@fluentui/react';
|
||||
import { StepShell } from '../common/StepShell';
|
||||
import { Pill } from '../common/Pill';
|
||||
import { APPROVER_STATUS_META, StepProps } from '../types/domain';
|
||||
import { formatDateTime } from '../utils/format';
|
||||
import { useStep4Approval } from './useStep4Approval';
|
||||
import styles from './Step4Approval.module.scss';
|
||||
|
||||
// Шаг 4 «Согласование» (§12): цепочка согласования. Логика — в useStep4Approval.
|
||||
// Оповещение согласующих в Teams (4c) — через notify; замена участника — через диалог openReplace.
|
||||
export function Step4Approval(props: StepProps): JSX.Element {
|
||||
const { service, formData, onSave, onPrev, onStepComplete, userDisplayName } = props;
|
||||
const a = useStep4Approval({ service, formData, onSave, onStepComplete, userDisplayName });
|
||||
const status = formData.status;
|
||||
|
||||
return (
|
||||
<StepShell title="Согласование" onPrev={onPrev}>
|
||||
<div className={styles.body}>
|
||||
{status === 'approved' ? (
|
||||
<MessageBar messageBarType={MessageBarType.success}>СТ согласована всеми участниками.</MessageBar>
|
||||
) : undefined}
|
||||
{status === 'rejected' ? (
|
||||
<MessageBar messageBarType={MessageBarType.error}>СТ отклонена. Требуется корректировка и повторная отправка.</MessageBar>
|
||||
) : undefined}
|
||||
{status === 'on_approval' ? (
|
||||
<MessageBar messageBarType={MessageBarType.info} isMultiline={false}>СТ находится на согласовании.</MessageBar>
|
||||
) : undefined}
|
||||
|
||||
<section className={styles.section}>
|
||||
<h3 className={styles.title}>Цепочка согласования</h3>
|
||||
|
||||
{a.chain.length === 0 ? (
|
||||
<p className={styles.empty}>Добавьте участников для согласования.</p>
|
||||
) : (
|
||||
<ol className={styles.list}>
|
||||
{a.chain.map((member, index) => {
|
||||
const meta = APPROVER_STATUS_META[member.status];
|
||||
// Заменить можно не-инициатора со статусом pending, кроме того, чья очередь идёт сейчас
|
||||
// (до отправки и во время согласования) — как в эталоне.
|
||||
const canReplace =
|
||||
!member.isInitiator &&
|
||||
member.status === 'pending' &&
|
||||
!(a.isOnApproval && a.currentUserRowId === member.rowId);
|
||||
return (
|
||||
<li key={member.rowId} className={styles.row}>
|
||||
<span className={styles.num}>{member.order}</span>
|
||||
<span className={styles.name}>{member.displayName}</span>
|
||||
{member.isInitiator ? <Pill kind="neutral">Инициатор</Pill> : undefined}
|
||||
<span className={styles.spacer} />
|
||||
{a.showStatuses ? <Pill kind={meta.kind}>{meta.label}</Pill> : undefined}
|
||||
{member.comment ? <span className={styles.comment}>«{member.comment}»</span> : undefined}
|
||||
{member.decidedAt ? <span className={styles.date}>{formatDateTime(member.decidedAt)}</span> : undefined}
|
||||
|
||||
{a.canEdit && !member.isInitiator ? (
|
||||
<div className={styles.actions}>
|
||||
<IconButton iconProps={{ iconName: 'Up' }} title="Выше" disabled={index === 0} onClick={() => a.moveApprover(member.rowId, 'up')} />
|
||||
<IconButton iconProps={{ iconName: 'Down' }} title="Ниже" disabled={index === a.chain.length - 1} onClick={() => a.moveApprover(member.rowId, 'down')} />
|
||||
<IconButton iconProps={{ iconName: 'Delete' }} title="Удалить" onClick={() => a.removeApprover(member.rowId)} />
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{a.isOnApproval && a.currentUserRowId === member.rowId ? (
|
||||
<div className={styles.actions}>
|
||||
<PrimaryButton iconProps={{ iconName: 'CheckMark' }} text="Согласовать" onClick={() => a.openAction(member, 'approve')} />
|
||||
<DefaultButton iconProps={{ iconName: 'Cancel' }} text="Отклонить" className={styles.rejectBtn} onClick={() => a.openAction(member, 'reject')} />
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{canReplace ? (
|
||||
<div className={styles.actions}>
|
||||
<IconButton iconProps={{ iconName: 'Switch' }} title="Заменить согласующего" onClick={() => a.openReplace(member)} />
|
||||
</div>
|
||||
) : undefined}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
|
||||
{a.canEdit ? (
|
||||
<div className={styles.searchBox}>
|
||||
<TextField
|
||||
placeholder="Поиск согласующего (имя)…"
|
||||
value={a.query}
|
||||
onChange={(_, v) => a.setQuery(v ?? '')}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{a.suggestions.length > 0 ? (
|
||||
<ul className={styles.suggestions}>
|
||||
{a.suggestions.map((s) => (
|
||||
<li key={s.spId} className={styles.suggestion} onClick={() => a.addApprover(s)}>
|
||||
<span className={styles.suggestionName}>{s.displayName}</span>
|
||||
<span className={styles.suggestionEmail}>{s.email}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : undefined}
|
||||
</div>
|
||||
) : undefined}
|
||||
</section>
|
||||
|
||||
<div className={styles.footer}>
|
||||
{a.error ? (
|
||||
<MessageBar messageBarType={MessageBarType.error} isMultiline={false}>{a.error}</MessageBar>
|
||||
) : undefined}
|
||||
{a.notifyWarning ? (
|
||||
<MessageBar messageBarType={MessageBarType.warning}>{a.notifyWarning}</MessageBar>
|
||||
) : undefined}
|
||||
{a.canEdit ? (
|
||||
<PrimaryButton
|
||||
iconProps={a.sending ? undefined : { iconName: 'Send' }}
|
||||
onClick={a.sendForApproval}
|
||||
disabled={a.chain.length === 0 || a.sending}
|
||||
>
|
||||
{a.sending ? <Spinner size={SpinnerSize.small} /> : 'Отправить на согласование'}
|
||||
</PrimaryButton>
|
||||
) : undefined}
|
||||
{(status === 'on_approval' || status === 'rejected') && a.currentUserIsInitiator ? (
|
||||
<DefaultButton iconProps={{ iconName: 'Refresh' }} text="Перезапустить согласование" onClick={a.restart} disabled={a.sending} />
|
||||
) : undefined}
|
||||
</div>
|
||||
|
||||
{a.action ? (
|
||||
<Dialog
|
||||
hidden={false}
|
||||
onDismiss={a.closeAction}
|
||||
dialogContentProps={{
|
||||
type: DialogType.normal,
|
||||
title: a.action.kind === 'approve' ? 'Согласование' : 'Отклонение',
|
||||
subText: a.action.kind === 'approve' ? 'Подтвердите согласование СТ. Комментарий необязателен.' : 'Укажите причину отклонения (обязательно).'
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label="Комментарий"
|
||||
multiline
|
||||
rows={3}
|
||||
value={a.action.comment}
|
||||
onChange={(_, v) => a.setActionComment(v ?? '')}
|
||||
required={a.action.kind === 'reject'}
|
||||
placeholder={a.action.kind === 'reject' ? 'Причина отклонения…' : 'Комментарий (необязательно)…'}
|
||||
/>
|
||||
<DialogFooter>
|
||||
<PrimaryButton
|
||||
onClick={a.submitAction}
|
||||
disabled={a.sending || (a.action.kind === 'reject' && !a.action.comment.trim())}
|
||||
text={a.action.kind === 'approve' ? 'Согласовать' : 'Отклонить'}
|
||||
/>
|
||||
<DefaultButton onClick={a.closeAction} text="Отмена" disabled={a.sending} />
|
||||
</DialogFooter>
|
||||
</Dialog>
|
||||
) : undefined}
|
||||
|
||||
{a.replace ? (
|
||||
<Dialog
|
||||
hidden={false}
|
||||
onDismiss={a.closeReplace}
|
||||
dialogContentProps={{
|
||||
type: DialogType.normal,
|
||||
title: 'Заменить согласующего',
|
||||
subText: `Текущий: ${a.replace.name}. Найдите нового участника.`
|
||||
}}
|
||||
>
|
||||
<div className={styles.searchBox}>
|
||||
<TextField
|
||||
placeholder="Поиск участника (имя)…"
|
||||
value={a.replace.query}
|
||||
onChange={(_, v) => a.setReplaceQuery(v ?? '')}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{a.replace.suggestions.length > 0 ? (
|
||||
<ul className={styles.suggestions}>
|
||||
{a.replace.suggestions.map((s) => (
|
||||
<li key={s.spId} className={styles.suggestion} onClick={() => a.selectReplace(s)}>
|
||||
<span className={styles.suggestionName}>{s.displayName}</span>
|
||||
<span className={styles.suggestionEmail}>{s.email}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : undefined}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<PrimaryButton onClick={a.submitReplace} disabled={!a.replace.selected || a.sending} text="Заменить" />
|
||||
<DefaultButton onClick={a.closeReplace} text="Отмена" disabled={a.sending} />
|
||||
</DialogFooter>
|
||||
</Dialog>
|
||||
) : undefined}
|
||||
</div>
|
||||
</StepShell>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,396 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Approver, CtFormData, FormStep } from '../types/domain';
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
|
||||
// Логика Шага 4 (цепочка согласования) — отдельно от вёрстки. Оповещение согласующих — через notify (4c).
|
||||
|
||||
// Уникальный ключ СТРОКИ цепочки (счётчик на время жизни страницы) — один человек может быть в цепочке
|
||||
// несколько раз. Загруженные из SP строки получают `sp_<id>` в сервисе; локальные — `row_<n>` отсюда.
|
||||
let rowIdCounter = 0;
|
||||
function makeRowId(): string {
|
||||
rowIdCounter += 1;
|
||||
return `row_${rowIdCounter}`;
|
||||
}
|
||||
|
||||
export interface UserSuggestion {
|
||||
spId: number;
|
||||
displayName: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
export interface ActionDialog {
|
||||
rowId: string; // строка цепочки, по которой голосуем (не userId — человек может быть в цепочке дважды)
|
||||
name: string;
|
||||
kind: 'approve' | 'reject';
|
||||
comment: string;
|
||||
}
|
||||
|
||||
export interface ReplaceDialog {
|
||||
rowId: string; // строка цепочки, которую меняем
|
||||
spApprovalId?: number; // запись в SP (есть в фазе согласования; до отправки — нет)
|
||||
name: string; // текущее имя — для заголовка диалога
|
||||
query: string;
|
||||
suggestions: UserSuggestion[];
|
||||
selected?: UserSuggestion;
|
||||
}
|
||||
|
||||
interface UseStep4ApprovalArgs {
|
||||
service: KpsCtFormService;
|
||||
formData: CtFormData;
|
||||
onSave: (partial: Partial<CtFormData>) => void;
|
||||
onStepComplete: (step: FormStep) => void;
|
||||
userDisplayName: string;
|
||||
// Разрешено ли засевать новую цепочку (инициатор + матрица) при пустой цепочке. Инлайн-блок на Шаге 3
|
||||
// (согласующий по ссылке) сид НЕ запускает — только читает из SP. По умолчанию — да (Шаг 4).
|
||||
canSeed?: boolean;
|
||||
}
|
||||
|
||||
export interface Step4Approval {
|
||||
chain: Approver[];
|
||||
canEdit: boolean; // до отправки — цепочку можно менять
|
||||
isOnApproval: boolean; // активная фаза голосования
|
||||
showStatuses: boolean;
|
||||
currentUserIsInitiator: boolean;
|
||||
currentUserRowId?: string; // rowId строки, чья очередь = текущий пользователь
|
||||
query: string;
|
||||
setQuery: (q: string) => void;
|
||||
suggestions: UserSuggestion[];
|
||||
addApprover: (u: UserSuggestion) => void;
|
||||
removeApprover: (rowId: string) => void;
|
||||
moveApprover: (rowId: string, dir: 'up' | 'down') => void;
|
||||
sending: boolean;
|
||||
error?: string;
|
||||
notifyWarning?: string; // голос/отправка прошли, но флоу-оповещение не удалось
|
||||
sendForApproval: () => void;
|
||||
action?: ActionDialog;
|
||||
openAction: (approver: Approver, kind: 'approve' | 'reject') => void;
|
||||
closeAction: () => void;
|
||||
setActionComment: (c: string) => void;
|
||||
submitAction: () => void;
|
||||
replace?: ReplaceDialog;
|
||||
openReplace: (approver: Approver) => void;
|
||||
closeReplace: () => void;
|
||||
setReplaceQuery: (q: string) => void;
|
||||
selectReplace: (u: UserSuggestion) => void;
|
||||
submitReplace: () => void;
|
||||
restart: () => void;
|
||||
}
|
||||
|
||||
export function useStep4Approval(args: UseStep4ApprovalArgs): Step4Approval {
|
||||
const { service, formData, onSave, onStepComplete, userDisplayName, canSeed = true } = args;
|
||||
const chain = formData.approvers;
|
||||
const status = formData.status;
|
||||
const isOnApprovalPhase = status === 'on_approval' || status === 'approved' || status === 'rejected';
|
||||
const canEdit = !isOnApprovalPhase;
|
||||
const isOnApproval = status === 'on_approval';
|
||||
|
||||
const [query, setQueryState] = useState('');
|
||||
const [suggestions, setSuggestions] = useState<UserSuggestion[]>([]);
|
||||
const [sending, setSending] = useState(false);
|
||||
const [error, setError] = useState<string | undefined>(undefined);
|
||||
const [action, setAction] = useState<ActionDialog | undefined>(undefined);
|
||||
const [replace, setReplace] = useState<ReplaceDialog | undefined>(undefined);
|
||||
const [notifyWarning, setNotifyWarning] = useState<string | undefined>(undefined);
|
||||
const searchTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
const replaceTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
|
||||
// Некритичное оповещение согласующего: сбой флоу НЕ должен валить голос/отправку (§7).
|
||||
const notify = async (spApprovalId: number): Promise<void> => {
|
||||
try {
|
||||
await service.triggerApprovalNotification(spApprovalId);
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('[Step4] triggerApprovalNotification failed for spId', spApprovalId, e);
|
||||
setNotifyWarning('Действие выполнено, но уведомление в Teams не удалось отправить. Проверьте Power Automate.');
|
||||
}
|
||||
};
|
||||
|
||||
// Восстановление/инициализация цепочки один раз при монтировании.
|
||||
useEffect(() => {
|
||||
if (chain.length > 0) {
|
||||
return;
|
||||
}
|
||||
if (isOnApprovalPhase && formData.ctId) {
|
||||
service
|
||||
.loadApprovalChain(formData.ctId)
|
||||
.then((loaded) => {
|
||||
if (loaded.length > 0) {
|
||||
onSave({ approvers: loaded });
|
||||
}
|
||||
})
|
||||
.catch(() => undefined);
|
||||
} else if (canSeed && canEdit && service.currentUserSpId > 0) {
|
||||
const me = service.currentUserSpId;
|
||||
const initiator: Approver = { rowId: makeRowId(), userId: me, displayName: userDisplayName, order: 1, status: 'pending', isInitiator: true };
|
||||
// Автозаполнение из «Матрица согласования КПС» (инициатор + участники по порядку); при ошибке — только инициатор.
|
||||
service
|
||||
.loadApprovalMatrix()
|
||||
.then((matrix) => {
|
||||
const rest: Approver[] = matrix
|
||||
.filter((m) => m.userId !== me)
|
||||
.map((m, i): Approver => ({ rowId: makeRowId(), userId: m.userId, displayName: m.displayName, order: i + 2, status: 'pending' }));
|
||||
onSave({ approvers: [initiator, ...rest] });
|
||||
})
|
||||
.catch(() => onSave({ approvers: [initiator] }));
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const setQuery = (q: string): void => {
|
||||
setQueryState(q);
|
||||
setSuggestions([]);
|
||||
if (searchTimer.current) {
|
||||
clearTimeout(searchTimer.current);
|
||||
}
|
||||
if (q.trim().length < 2) {
|
||||
return;
|
||||
}
|
||||
searchTimer.current = setTimeout(() => {
|
||||
// Показываем всех найденных — фильтра «уже в цепочке» нет: один человек может быть добавлен
|
||||
// в цепочку несколько раз (строки различаются по rowId).
|
||||
service
|
||||
.searchUsers(q.trim())
|
||||
.then((res) => setSuggestions(res))
|
||||
.catch(() => undefined);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const reindex = (list: Approver[]): Approver[] => list.map((m, i) => ({ ...m, order: i + 1 }));
|
||||
|
||||
const addApprover = (u: UserSuggestion): void => {
|
||||
onSave({ approvers: reindex([...chain, { rowId: makeRowId(), userId: u.spId, displayName: u.displayName, email: u.email, order: chain.length + 1, status: 'pending' }]) });
|
||||
setQueryState('');
|
||||
setSuggestions([]);
|
||||
};
|
||||
|
||||
const removeApprover = (rowId: string): void => {
|
||||
onSave({ approvers: reindex(chain.filter((m) => m.rowId !== rowId || m.isInitiator)) });
|
||||
};
|
||||
|
||||
const moveApprover = (rowId: string, dir: 'up' | 'down'): void => {
|
||||
const idx = chain.findIndex((m) => m.rowId === rowId);
|
||||
const swap = dir === 'up' ? idx - 1 : idx + 1;
|
||||
if (idx === -1 || swap < 0 || swap >= chain.length || chain[swap].isInitiator) {
|
||||
return;
|
||||
}
|
||||
const next = [...chain];
|
||||
[next[idx], next[swap]] = [next[swap], next[idx]];
|
||||
onSave({ approvers: reindex(next) });
|
||||
};
|
||||
|
||||
const sendForApproval = (): void => {
|
||||
if (!formData.ctId || chain.length === 0) {
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
setError(undefined);
|
||||
setNotifyWarning(undefined);
|
||||
const ctId = formData.ctId;
|
||||
const activated: Approver[] = chain.map((m) => ({ ...m, status: m.isInitiator ? 'recommends' : 'pending' }));
|
||||
const winSpId = formData.suppliers.find((s) => s.id === formData.recommendedSupplierId)?.spId;
|
||||
(async () => {
|
||||
const saved = await service.saveApprovalChain(ctId, activated);
|
||||
await service.updateCtStatus(ctId, 'on_approval', winSpId);
|
||||
onSave({ approvers: saved, status: 'on_approval' });
|
||||
const firstApprover = saved.find((m) => !m.isInitiator && m.spApprovalId);
|
||||
if (firstApprover?.spApprovalId) {
|
||||
await notify(firstApprover.spApprovalId);
|
||||
}
|
||||
onStepComplete(4);
|
||||
})()
|
||||
.then(() => setSending(false))
|
||||
.catch((e: Error) => {
|
||||
setError(e.message);
|
||||
setSending(false);
|
||||
});
|
||||
};
|
||||
|
||||
const openAction = (approver: Approver, kind: 'approve' | 'reject'): void =>
|
||||
setAction({ rowId: approver.rowId, name: approver.displayName, kind, comment: '' });
|
||||
const closeAction = (): void => setAction(undefined);
|
||||
const setActionComment = (c: string): void => setAction((prev) => (prev ? { ...prev, comment: c } : prev));
|
||||
|
||||
const submitAction = (): void => {
|
||||
if (!action || !formData.ctId) {
|
||||
return;
|
||||
}
|
||||
const member = chain.find((m) => m.rowId === action.rowId);
|
||||
if (!member?.spApprovalId) {
|
||||
setError('Не найден ID записи согласования');
|
||||
return;
|
||||
}
|
||||
if (action.kind === 'reject' && !action.comment.trim()) {
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
setError(undefined);
|
||||
setNotifyWarning(undefined);
|
||||
const ctId = formData.ctId;
|
||||
const decision = action.kind === 'approve' ? 'approved' : 'rejected';
|
||||
const comment = action.comment.trim();
|
||||
const spId = member.spApprovalId;
|
||||
(async () => {
|
||||
await service.submitApprovalStep(spId, decision, comment);
|
||||
const updated: Approver[] = chain.map((m) =>
|
||||
m.rowId === action.rowId ? { ...m, status: decision, comment, decidedAt: new Date().toISOString() } : m
|
||||
);
|
||||
if (decision === 'approved') {
|
||||
// Уведомить проголосовавшего (поток видит «Согласовано») и следующего по очереди.
|
||||
await notify(spId);
|
||||
const nextPending = updated.find((m) => m.status === 'pending' && !m.isInitiator);
|
||||
if (nextPending?.spApprovalId) {
|
||||
await notify(nextPending.spApprovalId);
|
||||
}
|
||||
const allApproved = updated.every((m) => m.status === 'approved' || m.status === 'recommends');
|
||||
if (allApproved) {
|
||||
await service.updateCtStatus(ctId, 'approved');
|
||||
onSave({ approvers: updated, status: 'approved' });
|
||||
} else {
|
||||
onSave({ approvers: updated });
|
||||
}
|
||||
} else {
|
||||
// Отклонение — процесс остановлен: удалить оставшихся pending из SP и цепочки, уведомить инициатора.
|
||||
// Уведомляем через spId ОТКЛОНИВШЕГО (его статус уже "Отклонено" — поток определяет ветку по этой строке),
|
||||
// а не через строку инициатора: там статус всегда "Рекомендую" и ни под одно условие потока не подходит.
|
||||
const others = updated.filter((m) => m.status === 'pending' && !m.isInitiator && m.spApprovalId);
|
||||
if (others.length > 0) {
|
||||
await service.deleteApprovalMembers(others.map((m) => m.spApprovalId as number));
|
||||
}
|
||||
const finalChain = updated.filter((m) => m.status !== 'pending' || m.isInitiator);
|
||||
await service.updateCtStatus(ctId, 'rejected');
|
||||
onSave({ approvers: finalChain, status: 'rejected' });
|
||||
await notify(spId);
|
||||
}
|
||||
})()
|
||||
.then(() => {
|
||||
setSending(false);
|
||||
setAction(undefined);
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
setError(e.message);
|
||||
setSending(false);
|
||||
});
|
||||
};
|
||||
|
||||
const openReplace = (approver: Approver): void =>
|
||||
setReplace({
|
||||
rowId: approver.rowId,
|
||||
spApprovalId: approver.spApprovalId,
|
||||
name: approver.displayName,
|
||||
query: '',
|
||||
suggestions: [],
|
||||
selected: undefined
|
||||
});
|
||||
const closeReplace = (): void => setReplace(undefined);
|
||||
|
||||
const setReplaceQuery = (q: string): void => {
|
||||
setReplace((prev) => (prev ? { ...prev, query: q, suggestions: [], selected: undefined } : prev));
|
||||
if (replaceTimer.current) {
|
||||
clearTimeout(replaceTimer.current);
|
||||
}
|
||||
if (q.trim().length < 2) {
|
||||
return;
|
||||
}
|
||||
replaceTimer.current = setTimeout(() => {
|
||||
service
|
||||
.searchUsers(q.trim())
|
||||
.then((res) => {
|
||||
// Без фильтра «уже в цепочке» — заменить можно на кого угодно (в т.ч. уже присутствующего).
|
||||
setReplace((prev) => (prev ? { ...prev, suggestions: res } : prev));
|
||||
})
|
||||
.catch(() => undefined);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const selectReplace = (u: UserSuggestion): void =>
|
||||
setReplace((prev) => (prev ? { ...prev, selected: u, query: u.displayName, suggestions: [] } : prev));
|
||||
|
||||
// Замена персоны на записи: до отправки (нет spApprovalId) — только локально, при отправке цепочка пишется
|
||||
// заново; в фазе согласования — MERGE aprooverId на записи «Согласование КПС».
|
||||
const submitReplace = (): void => {
|
||||
if (!replace?.selected) {
|
||||
return;
|
||||
}
|
||||
const targetRowId = replace.rowId;
|
||||
const spApprovalId = replace.spApprovalId;
|
||||
const picked = replace.selected;
|
||||
setSending(true);
|
||||
setError(undefined);
|
||||
(async () => {
|
||||
if (spApprovalId) {
|
||||
await service.replaceApprovalMember(spApprovalId, picked.spId);
|
||||
}
|
||||
const updated: Approver[] = chain.map((m) =>
|
||||
m.rowId === targetRowId ? { ...m, userId: picked.spId, displayName: picked.displayName, email: picked.email } : m
|
||||
);
|
||||
onSave({ approvers: updated });
|
||||
})()
|
||||
.then(() => {
|
||||
setSending(false);
|
||||
setReplace(undefined);
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
setError(e.message);
|
||||
setSending(false);
|
||||
});
|
||||
};
|
||||
|
||||
const restart = (): void => {
|
||||
if (!formData.ctId) {
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
setError(undefined);
|
||||
const ctId = formData.ctId;
|
||||
const reset: Approver[] = chain.map((m) => ({ ...m, status: 'pending', comment: undefined, decidedAt: undefined }));
|
||||
(async () => {
|
||||
await service.updateCtStatus(ctId, 'formed');
|
||||
onSave({ approvers: reset, status: 'formed' });
|
||||
})()
|
||||
.then(() => setSending(false))
|
||||
.catch((e: Error) => {
|
||||
setError(e.message);
|
||||
setSending(false);
|
||||
});
|
||||
};
|
||||
|
||||
const currentUserIsInitiator = chain.some((m) => m.displayName === userDisplayName && m.isInitiator);
|
||||
const currentUserMember = chain.find(
|
||||
(m) =>
|
||||
m.displayName === userDisplayName &&
|
||||
m.status === 'pending' &&
|
||||
!m.isInitiator &&
|
||||
chain.filter((p) => p.order < m.order).every((p) => p.status !== 'pending')
|
||||
);
|
||||
|
||||
return {
|
||||
chain,
|
||||
canEdit,
|
||||
isOnApproval,
|
||||
showStatuses: isOnApprovalPhase,
|
||||
currentUserIsInitiator,
|
||||
currentUserRowId: currentUserMember?.rowId,
|
||||
query,
|
||||
setQuery,
|
||||
suggestions,
|
||||
addApprover,
|
||||
removeApprover,
|
||||
moveApprover,
|
||||
sending,
|
||||
error,
|
||||
notifyWarning,
|
||||
sendForApproval,
|
||||
action,
|
||||
openAction,
|
||||
closeAction,
|
||||
setActionComment,
|
||||
submitAction,
|
||||
replace,
|
||||
openReplace,
|
||||
closeReplace,
|
||||
setReplaceQuery,
|
||||
selectReplace,
|
||||
submitReplace,
|
||||
restart
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
@import './theme';
|
||||
|
||||
.chain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin: 0;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.num {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: $hover;
|
||||
color: $muted;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 600;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.comment {
|
||||
color: $muted;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: $muted;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import * as React from 'react';
|
||||
import styles from './ApprovalChain.module.scss';
|
||||
import { Pill } from './Pill';
|
||||
import { Approver, APPROVER_STATUS_META } from '../types/domain';
|
||||
import { formatDateTime } from '../utils/format';
|
||||
|
||||
interface ApprovalChainProps {
|
||||
approvers: Approver[];
|
||||
}
|
||||
|
||||
// Цепочка согласования (эталон): номер, имя, роль, статус-пилюля, комментарий, дата.
|
||||
// Общая для Шага 3 (внизу таблицы) и Шага 4.
|
||||
export function ApprovalChain({ approvers }: ApprovalChainProps): JSX.Element {
|
||||
return (
|
||||
<div className={styles.chain}>
|
||||
<h3 className={styles.title}>Цепочка согласования</h3>
|
||||
{approvers.length === 0 ? (
|
||||
<p className={styles.empty}>Цепочка согласования ещё не сформирована.</p>
|
||||
) : (
|
||||
<ol className={styles.list}>
|
||||
{approvers.map((approver, index) => {
|
||||
const meta = APPROVER_STATUS_META[approver.status];
|
||||
return (
|
||||
<li key={approver.rowId} className={styles.row}>
|
||||
<span className={styles.num}>{approver.order || index + 1}</span>
|
||||
<span className={styles.name}>{approver.displayName}</span>
|
||||
{approver.isInitiator ? <Pill kind="neutral">Инициатор</Pill> : undefined}
|
||||
<span className={styles.spacer} />
|
||||
<Pill kind={meta.kind}>{meta.label}</Pill>
|
||||
{approver.comment ? <span className={styles.comment}>«{approver.comment}»</span> : undefined}
|
||||
<span className={styles.date}>{formatDateTime(approver.decidedAt)}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
@import './theme';
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
background: $accent-bg;
|
||||
border-left: 4px solid $accent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: $accent;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $accent;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import * as React from 'react';
|
||||
import { Icon } from '@fluentui/react';
|
||||
import styles from './FormHeader.module.scss';
|
||||
import { Pill } from './Pill';
|
||||
import { PillKind } from '../types/domain';
|
||||
|
||||
interface FormHeaderProps {
|
||||
title: string;
|
||||
statusLabel: string;
|
||||
statusKind: PillKind;
|
||||
}
|
||||
|
||||
// Общая шапка формы (эталон): синяя плашка с иконкой, титулом и статус-пилюлей.
|
||||
export function FormHeader({ title, statusLabel, statusKind }: FormHeaderProps): JSX.Element {
|
||||
return (
|
||||
<div className={styles.header}>
|
||||
<Icon iconName="TextDocument" className={styles.icon} />
|
||||
<span className={styles.title}>{title}</span>
|
||||
<Pill kind={statusKind}>{statusLabel}</Pill>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
@import './theme';
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// --- Мягкие пилюли: светлый фон + цветной текст ---
|
||||
|
||||
.neutral {
|
||||
background: #f3f2f1;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.accent {
|
||||
background: $accent-bg;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
.ok {
|
||||
background: $ok-bg;
|
||||
color: $ok;
|
||||
}
|
||||
|
||||
.danger {
|
||||
background: $danger-bg;
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
// --- Залитые пилюли (solid): насыщенный фон + белый текст ---
|
||||
|
||||
.solid {
|
||||
color: #ffffff;
|
||||
|
||||
&.neutral {
|
||||
background: $muted;
|
||||
}
|
||||
&.accent {
|
||||
background: $accent;
|
||||
}
|
||||
&.ok {
|
||||
background: $ok;
|
||||
}
|
||||
&.danger {
|
||||
background: $danger;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import * as React from 'react';
|
||||
import styles from './Pill.module.scss';
|
||||
import { PillKind } from '../types/domain';
|
||||
|
||||
interface PillProps {
|
||||
kind: PillKind;
|
||||
solid?: boolean; // залитая пилюля (напр. «РЕКОМЕНДУЕТСЯ», «Выбран»)
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
// Единая статус-пилюля формы: цвет по kind, залитая/мягкая по solid.
|
||||
export function Pill({ kind, solid, children }: PillProps): JSX.Element {
|
||||
const className = [styles.pill, styles[kind], solid ? styles.solid : ''].filter(Boolean).join(' ');
|
||||
return <span className={className}>{children}</span>;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.stepShell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #323130;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #edebe9;
|
||||
}
|
||||
|
||||
// Кнопка «Далее» прижата вправо даже когда «Назад» отсутствует.
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import * as React from 'react';
|
||||
import { DefaultButton, PrimaryButton } from '@fluentui/react';
|
||||
import styles from './StepShell.module.scss';
|
||||
|
||||
export interface StepShellProps {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
onPrev?: () => void;
|
||||
onNext?: () => void;
|
||||
nextLabel?: string;
|
||||
nextDisabled?: boolean;
|
||||
}
|
||||
|
||||
// Общий каркас шага: заголовок, контент и панель навигации (§4 — блок повторяется на всех шагах).
|
||||
export function StepShell(props: StepShellProps): JSX.Element {
|
||||
const { title, children, onPrev, onNext, nextLabel = 'Далее', nextDisabled } = props;
|
||||
|
||||
return (
|
||||
<div className={styles.stepShell}>
|
||||
<h2 className={styles.header}>{title}</h2>
|
||||
<div className={styles.content}>{children}</div>
|
||||
|
||||
<div className={styles.actions}>
|
||||
{onPrev ? <DefaultButton text="Назад" onClick={onPrev} /> : <span className={styles.spacer} />}
|
||||
{onNext ? <PrimaryButton text={nextLabel} disabled={nextDisabled} onClick={onNext} /> : undefined}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// Единая палитра формы (эталонный дизайн СТ). Импортируется в module.scss шагов:
|
||||
// @import '../common/theme';
|
||||
// Только переменные — партиал (имя с "_") в отдельный css не компилируется.
|
||||
|
||||
$accent: #0078d4; // основной синий (титул, текущий шаг, акценты)
|
||||
$accent-bg: #eff6fc; // светло-синий фон (шапка, текущий шаг)
|
||||
$ok: #107c10; // зелёный (согласовано/завершено)
|
||||
$ok-bg: #dff6dd; // светло-зелёный фон пилюль/баннеров
|
||||
$danger: #a4262c; // красный (ошибки/отклонено)
|
||||
$danger-bg: #fde7e9;
|
||||
|
||||
$text: #323130; // основной текст
|
||||
$muted: #605e5c; // вторичный текст
|
||||
$border: #edebe9; // тонкие границы
|
||||
$border-strong: #c8c6c4; // границы посильнее (неактивные кружки)
|
||||
|
||||
$head-bg: #faf9f8; // фон шапок таблиц
|
||||
$hover: #f3f2f1; // ховер строк/кнопок
|
||||
$supplier-bg: #fffdf0; // кремовая панель поставщика (Шаг 3)
|
||||
$supplier-border: #f2e9b8;
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
CtFormData,
|
||||
EMPTY_FORM_DATA,
|
||||
FIRST_STEP,
|
||||
FormStep,
|
||||
LAST_STEP
|
||||
} from '../types/domain';
|
||||
import { loadFormState, saveFormState, sessionKey, writeCtIdToUrl } from '../utils/session';
|
||||
|
||||
// То, что сериализуем в sessionStorage. highestStep не храним — он производный от completedSteps.
|
||||
interface PersistedState {
|
||||
formData: CtFormData;
|
||||
currentStep: FormStep;
|
||||
completedSteps: FormStep[];
|
||||
}
|
||||
|
||||
export interface UseKpsCtFormResult {
|
||||
formData: CtFormData;
|
||||
currentStep: FormStep;
|
||||
completedSteps: FormStep[];
|
||||
highestStep: FormStep; // максимально доступный шаг (§5.5)
|
||||
updateFormData: (partial: Partial<CtFormData>) => void; // точечное иммутабельное обновление (§5.1)
|
||||
replaceFormData: (data: CtFormData) => void; // полная замена (загрузка из SharePoint)
|
||||
goToStep: (step: FormStep) => void;
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
markStepComplete: (step: FormStep) => void;
|
||||
}
|
||||
|
||||
// Весь стейт многошаговой формы живёт здесь (§5.1). Шаги получают срез данных и колбэки.
|
||||
export function useKpsCtForm(initialCtId?: number): UseKpsCtFormResult {
|
||||
const [state, setState] = useState<PersistedState>(() => readInitialState(initialCtId));
|
||||
const { formData, currentStep, completedSteps } = state;
|
||||
|
||||
// Производный: доступен следующий шаг после максимального завершённого (§5.5).
|
||||
const highestStep = useMemo<FormStep>(() => {
|
||||
const maxCompleted = completedSteps.reduce((max, step) => Math.max(max, step), 0);
|
||||
return clampStep(Math.max(FIRST_STEP, maxCompleted + 1));
|
||||
}, [completedSteps]);
|
||||
|
||||
// Персист при каждом изменении (§5.4). Ключ зависит от ctId (он часть state).
|
||||
useEffect(() => {
|
||||
saveFormState<PersistedState>(sessionKey(state.formData.ctId), state);
|
||||
}, [state]);
|
||||
|
||||
// Как только сущность создана — фиксируем id в URL, чтобы перезагрузка продолжила форму (§5.4).
|
||||
useEffect(() => {
|
||||
if (formData.ctId) {
|
||||
writeCtIdToUrl(formData.ctId);
|
||||
}
|
||||
}, [formData.ctId]);
|
||||
|
||||
const updateFormData = useCallback((partial: Partial<CtFormData>) => {
|
||||
setState(prev => ({ ...prev, formData: { ...prev.formData, ...partial } }));
|
||||
}, []);
|
||||
|
||||
const replaceFormData = useCallback((data: CtFormData) => {
|
||||
setState(prev => ({ ...prev, formData: data }));
|
||||
}, []);
|
||||
|
||||
const goToStep = useCallback((step: FormStep) => {
|
||||
setState(prev => ({ ...prev, currentStep: clampStep(step) }));
|
||||
}, []);
|
||||
|
||||
const next = useCallback(() => {
|
||||
setState(prev => ({ ...prev, currentStep: clampStep(prev.currentStep + 1) }));
|
||||
}, []);
|
||||
|
||||
const prev = useCallback(() => {
|
||||
setState(prevState => ({ ...prevState, currentStep: clampStep(prevState.currentStep - 1) }));
|
||||
}, []);
|
||||
|
||||
const markStepComplete = useCallback((step: FormStep) => {
|
||||
setState(prev => {
|
||||
if (prev.completedSteps.indexOf(step) !== -1) {
|
||||
return prev;
|
||||
}
|
||||
return { ...prev, completedSteps: [...prev.completedSteps, step] };
|
||||
});
|
||||
}, []);
|
||||
|
||||
return {
|
||||
formData,
|
||||
currentStep,
|
||||
completedSteps,
|
||||
highestStep,
|
||||
updateFormData,
|
||||
replaceFormData,
|
||||
goToStep,
|
||||
next,
|
||||
prev,
|
||||
markStepComplete
|
||||
};
|
||||
}
|
||||
|
||||
// Стартовое состояние: из сессии, если есть; иначе пустая форма (с ctId из URL, если задан).
|
||||
function readInitialState(initialCtId?: number): PersistedState {
|
||||
const persisted = loadFormState<PersistedState>(sessionKey(initialCtId));
|
||||
if (persisted) {
|
||||
return persisted;
|
||||
}
|
||||
return {
|
||||
formData: initialCtId ? { ...EMPTY_FORM_DATA, ctId: initialCtId } : EMPTY_FORM_DATA,
|
||||
currentStep: FIRST_STEP,
|
||||
completedSteps: []
|
||||
};
|
||||
}
|
||||
|
||||
function clampStep(step: number): FormStep {
|
||||
const bounded = Math.min(LAST_STEP, Math.max(FIRST_STEP, step));
|
||||
return bounded as FormStep;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
import { PurchaseRequestDetail } from '../types/domain';
|
||||
import { RequestState } from './useRequests';
|
||||
|
||||
// Состояние деталей по каждой заявке: ключ — id заявки.
|
||||
export type DetailsByRequestId = Record<string, RequestState<PurchaseRequestDetail>>;
|
||||
|
||||
export interface UsePurchaseRequestDetailsResult {
|
||||
details: DetailsByRequestId;
|
||||
loadDetail: (requestId: string) => void; // грузит лениво, один раз на id (кэш)
|
||||
}
|
||||
|
||||
// Ленивая подгрузка деталей заявки при раскрытии строки (§8: loading/error, отмена на unmount).
|
||||
export function usePurchaseRequestDetails(service: KpsCtFormService): UsePurchaseRequestDetailsResult {
|
||||
const [details, setDetails] = useState<DetailsByRequestId>({});
|
||||
|
||||
// Уже запрошенные id — чтобы повторное раскрытие не дёргало API снова.
|
||||
const requestedRef = useRef<Set<string>>(new Set());
|
||||
const mountedRef = useRef(true);
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
mountedRef.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const loadDetail = useCallback(
|
||||
(requestId: string): void => {
|
||||
if (requestedRef.current.has(requestId)) {
|
||||
return;
|
||||
}
|
||||
requestedRef.current.add(requestId);
|
||||
setDetails((prev) => ({ ...prev, [requestId]: { isLoading: true } }));
|
||||
|
||||
service
|
||||
.getPurchaseRequestDetail(requestId)
|
||||
.then((data) => {
|
||||
if (mountedRef.current) {
|
||||
setDetails((prev) => ({ ...prev, [requestId]: { isLoading: false, data } }));
|
||||
}
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
// Даём возможность повторить при следующем раскрытии.
|
||||
requestedRef.current.delete(requestId);
|
||||
if (mountedRef.current) {
|
||||
setDetails((prev) => ({ ...prev, [requestId]: { isLoading: false, error } }));
|
||||
}
|
||||
});
|
||||
},
|
||||
[service]
|
||||
);
|
||||
|
||||
return { details, loadDetail };
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { useEffect, useState, DependencyList } from 'react';
|
||||
|
||||
// Явно обрабатываем loading/error/empty (§8): data приходит только по успеху.
|
||||
export interface RequestState<T> {
|
||||
data?: T;
|
||||
isLoading: boolean;
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
// Загружает данные и отменяет setState после unmount, чтобы не было обновления
|
||||
// размонтированного компонента (§8). deps — как у useEffect.
|
||||
export function useRequests<T>(loader: () => Promise<T>, deps: DependencyList): RequestState<T> {
|
||||
const [state, setState] = useState<RequestState<T>>({ isLoading: true });
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setState({ isLoading: true });
|
||||
|
||||
const run = async (): Promise<void> => {
|
||||
try {
|
||||
const data = await loader();
|
||||
if (!cancelled) {
|
||||
setState({ data, isLoading: false });
|
||||
}
|
||||
} catch (error) {
|
||||
if (!cancelled) {
|
||||
setState({ error: error as Error, isLoading: false });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// run() сам ловит ошибки внутрь state; .catch — чтобы промис не «висел» необработанным.
|
||||
run().catch(() => undefined);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// Зависимости передаёт вызывающий код — он отвечает за их полноту.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, deps);
|
||||
|
||||
return state;
|
||||
}
|
||||
@@ -0,0 +1,313 @@
|
||||
// Единый источник истины по модели данных формы: доменные типы, статусы-union и метки шагов.
|
||||
// Скелет перенесён из эталонной модели СТ (§12 гайда). Содержимое адаптируется под предметку
|
||||
// на этапе замены заглушек — помечено TODO.
|
||||
|
||||
import type { KpsCtFormService } from '../../services/KpsCtFormService';
|
||||
|
||||
// --- Статусы (только union, чтобы опечатка ловилась компилятором, §5.6) ---
|
||||
|
||||
// Жизненный цикл сущности (СТ).
|
||||
export type CtStatus =
|
||||
| 'draft' // черновик, идёт заполнение
|
||||
| 'kp_loading' // идёт загрузка КП
|
||||
| 'kp_loaded' // КП загружены
|
||||
| 'formed' // СТ сформирована
|
||||
| 'on_approval' // отправлена на согласование
|
||||
| 'approved' // согласована
|
||||
| 'rejected'; // отклонена
|
||||
|
||||
// Статусы, при которых форма доступна только для чтения (§5.5).
|
||||
export const READ_ONLY_STATUSES: ReadonlyArray<CtStatus> = ['on_approval', 'approved', 'rejected'];
|
||||
|
||||
// Вид пилюли-статуса (цветовая семантика единая по форме).
|
||||
export type PillKind = 'neutral' | 'accent' | 'ok' | 'danger';
|
||||
|
||||
// Метка + цвет статуса сущности для шапки формы.
|
||||
export const CT_STATUS_META: Record<CtStatus, { label: string; kind: PillKind }> = {
|
||||
draft: { label: 'Черновик', kind: 'neutral' },
|
||||
kp_loading: { label: 'Загрузка КП', kind: 'accent' },
|
||||
kp_loaded: { label: 'КП загружены', kind: 'accent' },
|
||||
formed: { label: 'Сформирована', kind: 'accent' },
|
||||
on_approval: { label: 'На согласовании', kind: 'accent' },
|
||||
approved: { label: 'Согласована', kind: 'ok' },
|
||||
rejected: { label: 'Отклонена', kind: 'danger' }
|
||||
};
|
||||
|
||||
// Статус участника цепочки согласования.
|
||||
export type ApproverStatus =
|
||||
| 'pending' // ждёт своей очереди/решения
|
||||
| 'recommends' // инициатор поставил «Рекомендую»
|
||||
| 'approved' // согласовал
|
||||
| 'rejected' // отклонил
|
||||
| 'skipped'; // пропущен
|
||||
|
||||
// Метка + цвет статуса согласующего для цепочки (Шаги 3–4).
|
||||
export const APPROVER_STATUS_META: Record<ApproverStatus, { label: string; kind: PillKind }> = {
|
||||
pending: { label: 'Ожидает', kind: 'neutral' },
|
||||
recommends: { label: 'Рекомендую', kind: 'ok' },
|
||||
approved: { label: 'Согласовано', kind: 'ok' },
|
||||
rejected: { label: 'Отклонено', kind: 'danger' },
|
||||
skipped: { label: 'Пропущен', kind: 'neutral' }
|
||||
};
|
||||
|
||||
// --- Шаги формы ---
|
||||
|
||||
// Номер шага. На него опираются Breadcrumbs и хук формы.
|
||||
export type FormStep = 1 | 2 | 3 | 4;
|
||||
|
||||
export interface FormStepMeta {
|
||||
step: FormStep;
|
||||
label: string;
|
||||
}
|
||||
|
||||
// Метки шагов. TODO: адаптировать под предметку при замене заглушек.
|
||||
export const FORM_STEPS: ReadonlyArray<FormStepMeta> = [
|
||||
{ step: 1, label: 'Выбор позиций' },
|
||||
{ step: 2, label: 'Загрузка КП' },
|
||||
{ step: 3, label: 'Формирование СТ' },
|
||||
{ step: 4, label: 'Согласование' }
|
||||
];
|
||||
|
||||
export const FIRST_STEP: FormStep = 1;
|
||||
export const LAST_STEP: FormStep = 4;
|
||||
|
||||
// --- Доменные сущности (TODO: поля под свою предметку) ---
|
||||
|
||||
// Заявка на закупку из внешнего API TNSU (GET /inventory/api/purchase-requests).
|
||||
// Источник записей для Шага 1. Поля — «как отдаёт API» (форма подтверждена по факту 2026-07-10).
|
||||
export interface PurchaseRequest {
|
||||
id: string; // GUID заявки
|
||||
number: string; // номер, напр. "PR-00002" / "PR-2026-00004"
|
||||
createdAt: string; // ISO datetime с оффсетом
|
||||
projectName: string; // проект (ключ бизнес-ограничения «один проект» на Шаге 1)
|
||||
vehicleName: string; // предмет закупки
|
||||
estimatedAmount: number; // ориентировочная сумма
|
||||
status: string; // машинный статус: "on_coordination" | "on_final_approval" | … (полный набор пока неизвестен)
|
||||
statusLabel: string; // человекочитаемый статус для UI
|
||||
initiatorFullName: string; // инициатор
|
||||
currentApproverFullName: string; // текущий согласующий
|
||||
}
|
||||
|
||||
// Строка (позиция) заявки — из деталей заявки. Единица, по которой торгуемся в СТ.
|
||||
export interface PurchaseRequestLine {
|
||||
id: string; // GUID строки
|
||||
lineNo: number; // порядковый номер в заявке
|
||||
code: string; // код строки, напр. "PR-00002-01"
|
||||
name: string; // наименование позиции
|
||||
catalogNumber: string; // каталожный номер
|
||||
quantity: number;
|
||||
unit: string; // ед. измерения ("компл", "шт")
|
||||
estimatedUnitPrice?: number; // ориентировочная цена за единицу (API заполняет не всегда)
|
||||
estimatedAmount?: number; // ориентировочная сумма по строке (может отсутствовать)
|
||||
}
|
||||
|
||||
// Детали заявки (GET /inventory/api/purchase-requests/{id}): шапка + строки (lines).
|
||||
// Внимание: НЕ супермножество PurchaseRequest — деталь даёт createdByFullName вместо
|
||||
// initiator/currentApprover из списка. Форма подтверждена по факту 2026-07-10.
|
||||
export interface PurchaseRequestDetail {
|
||||
id: string;
|
||||
number: string;
|
||||
status: string;
|
||||
statusLabel: string;
|
||||
defectActId: string; // акт дефектов — основание заявки
|
||||
defectActNumber: string;
|
||||
projectId: string; // GUID проекта (ключ фиксации «один проект»)
|
||||
projectCode: string; // код проекта, напр. "БК0000001"
|
||||
projectName: string;
|
||||
vehicleId: string;
|
||||
vehicleName: string;
|
||||
vehicleGroupName: string;
|
||||
stateNumber: string; // гос-/инвентарный номер техники
|
||||
vinCode: string;
|
||||
description: string;
|
||||
estimatedAmount: number;
|
||||
hasServiceNoteAttachment: boolean;
|
||||
createdByFullName: string;
|
||||
createdAt: string;
|
||||
lines: PurchaseRequestLine[];
|
||||
canEdit: boolean;
|
||||
canSubmit: boolean;
|
||||
canCancel: boolean;
|
||||
}
|
||||
|
||||
// Участник цепочки согласования (строка «Согласование СТ»).
|
||||
export interface Approver {
|
||||
rowId: string; // уникальный ключ СТРОКИ цепочки (не человека) — один человек может быть в цепочке
|
||||
// несколько раз; по нему идут ключи React и операции выше/ниже/удалить/заменить/голосовать.
|
||||
// Загруженные из SP: `sp_<spApprovalId>`; локально добавленные: `row_<n>`.
|
||||
spApprovalId?: number; // Id строки в «Согласование СТ» (после сохранения)
|
||||
userId: number; // ID пользователя SharePoint (aproover)
|
||||
displayName: string;
|
||||
email?: string;
|
||||
order: number; // порядок в цепочке (order0)
|
||||
status: ApproverStatus;
|
||||
comment?: string;
|
||||
decidedAt?: string; // aproovDate — когда принято решение (ISO)
|
||||
isInitiator?: boolean; // инициатор маршрута (первый в цепочке)
|
||||
}
|
||||
|
||||
// Позиция, выбранная на Шаге 1 = строка заявки + контекст родителя и проекта.
|
||||
// Снимок нужных полей, чтобы Шаги 2–4 (КП, СТ, согласование) не тянули деталь заново.
|
||||
export interface SelectedPosition {
|
||||
spId?: number; // Id строки в списке «Позиции СТ» (после createCt) — связь с офферами Шага 3
|
||||
// из строки заявки (PurchaseRequestLine)
|
||||
lineId: string;
|
||||
code: string;
|
||||
name: string;
|
||||
catalogNumber: string;
|
||||
quantity: number;
|
||||
unit: string;
|
||||
estimatedUnitPrice?: number;
|
||||
estimatedAmount?: number;
|
||||
// родительская потребность
|
||||
requestId: string;
|
||||
requestNumber: string;
|
||||
vehicleName: string;
|
||||
// проект — все выбранные позиции из одного проекта (бизнес-ограничение Шага 1)
|
||||
projectId: string;
|
||||
projectCode: string;
|
||||
projectName: string;
|
||||
}
|
||||
|
||||
// Поставщик (Шаги 2–3). Единый список: с КП (hasOffer≠false) и без КП (hasOffer===false).
|
||||
export interface Supplier {
|
||||
id: string; // локальный клиентский id
|
||||
spId?: number; // Id в списке «Поставщики» (после сохранения)
|
||||
name: string;
|
||||
currency?: string; // валюта КП запоминается на поставщике для Шага 3
|
||||
hasOffer?: boolean; // false = поставщик без КП (добавлен на Шаге 2); отсутствие/true = с КП
|
||||
comment?: string; // комментарий для поставщика без КП
|
||||
}
|
||||
|
||||
// Лёгкий DTO для UI-блока «Поставщики без КП» на Шаге 2 (маппится в Supplier с hasOffer:false).
|
||||
export interface NoKpSupplier {
|
||||
name: string;
|
||||
comment: string;
|
||||
}
|
||||
|
||||
// Курс валюты (Шаг 2). Читается/пишется в список «Курс Валют».
|
||||
export interface CurrencyRate {
|
||||
currency: string; // код валюты (code)
|
||||
rate: number; // курс к тенге (course)
|
||||
name?: string; // отображаемое имя валюты (Title), напр. «Китайский юань»
|
||||
spId?: number; // Id в «Курс Валют» — для записи lookup valuta в оффер и upsert курса
|
||||
courseDate?: string; // дата курса (courseDate) — когда курс получен/введён (ISO)
|
||||
}
|
||||
|
||||
// Предложение поставщика по позиции (ячейка матрицы Шага 3). Пишется в «Оценка поставщиков».
|
||||
// pricePerUnit — в валюте поставщика (для KZT = ₸); пересчёт в ₸ по курсу на лету.
|
||||
export interface SupplierOffer {
|
||||
supplierId: string; // локальный id поставщика (formData.suppliers[].id)
|
||||
positionId: string; // локальный id строки (SelectedPosition.lineId или ExtraPosition.id)
|
||||
itemIndex: number; // строка комплекта (bundle): 0 — базовая, 1+ — доп. строки одной позиции
|
||||
supplierPosition?: string; // наименование ТМЦ у поставщика
|
||||
unit?: string;
|
||||
quantity: number;
|
||||
pricePerUnit: number; // цена за ед. в валюте
|
||||
deliveryDistanceKm?: number; // километраж — только для строки доставки (Шаг 3, доп. расходы)
|
||||
offerId?: string; // Id файла КП в библиотеке (lookup offer → «Оценка поставщиков»), Шаг 2
|
||||
}
|
||||
|
||||
// Результат потока обработки КП (Power Automate) по одной позиции. Форма подтверждена по эталону
|
||||
// (responsev2.predictionOutput.text → JSON). Все поля опциональны — поток заполняет что распознал.
|
||||
export interface FlowResult {
|
||||
position?: string; // наименование позиции у поставщика
|
||||
unit?: string;
|
||||
conditions?: string; // условия оплаты (→ критерий paymentType)
|
||||
deliveryType?: string; // условия поставки (→ критерий deliveryType)
|
||||
deadline?: string; // сроки (→ критерий deadline)
|
||||
sertificates?: string; // сертификаты (→ критерий sertificates)
|
||||
cost?: number; // сумма по позиции (в валюте поставщика)
|
||||
price?: number; // цена за единицу (в валюте поставщика)
|
||||
quantity?: number;
|
||||
supplier?: string; // имя поставщика, если поток его распознал
|
||||
}
|
||||
|
||||
// Поля со строки файла КП в библиотеке (поллинг на Шаге 2). В kps Syntex-модель заполняет только
|
||||
// file_content (распознанный текст); поставщик/цены/критерии извлекает поток (см. FlowResult).
|
||||
export interface SyntexFields {
|
||||
fileContent?: string; // непустой = Syntex закончил разбор файла (пусто — ещё обрабатывается)
|
||||
}
|
||||
|
||||
// Загруженный файл КП (снимок для formData: связь с библиотекой + распознанный поставщик).
|
||||
export interface UploadedKpFile {
|
||||
spId: number; // Id строки файла в библиотеке «Коммерческие предложения» (offerId для офферов)
|
||||
name: string;
|
||||
supplierName?: string;
|
||||
url?: string; // ссылка на файл в библиотеке (для открытия/скачивания)
|
||||
}
|
||||
|
||||
// Критерии поставщика (Шаг 3, блок «Дополнительная информация»). Пишется в список «Критерии».
|
||||
export interface SupplierCriteria {
|
||||
supplierId: string; // локальный id поставщика (formData.suppliers[].id)
|
||||
paymentType?: string; // Условия оплаты (текст)
|
||||
deliveryType?: string; // Условия поставки (Choice: DAP/FOB/DDP/EXW)
|
||||
deadline?: string; // Сроки изготовления и доставки (текст)
|
||||
sertificates?: string; // Сертификаты (Choice: Да/Нет)
|
||||
comment?: string; // Примечание (текст)
|
||||
}
|
||||
|
||||
// Доп. позиция Шага 3 (не из заявки): доп. расходы или доставка. Пишется в «Позиции СТ».
|
||||
export interface ExtraPosition {
|
||||
id: string; // локальный id (extra_pos_N)
|
||||
materialName: string;
|
||||
unit: string;
|
||||
isDelivery?: boolean; // строка доставки (кол-во = рейсы, есть километраж)
|
||||
spId?: number; // Id строки в «Позиции СТ» (после сохранения)
|
||||
}
|
||||
|
||||
// --- Единый объект данных формы (один источник истины, §5.1) ---
|
||||
|
||||
export interface CtFormData {
|
||||
ctId?: number; // id сущности в SharePoint (появляется после Шага 1)
|
||||
status: CtStatus;
|
||||
|
||||
// Шаг 1 — выбор позиций
|
||||
selectedProject?: string;
|
||||
lockedProjectId?: string; // проект зафиксирован на первом выборе, остальные блокируются
|
||||
selectedPositions: SelectedPosition[];
|
||||
|
||||
// Шаг 2 — загрузка КП
|
||||
suppliers: Supplier[]; // единый список поставщиков (с КП и без КП — по флагу hasOffer)
|
||||
currencyRates: CurrencyRate[];
|
||||
uploadedKpFiles?: UploadedKpFile[]; // файлы КП, залитые в библиотеку (Шаг 2)
|
||||
|
||||
// Шаг 3 — формирование СТ
|
||||
offers: SupplierOffer[]; // предложения поставщиков (матрица цен)
|
||||
step3ExtraPositions: ExtraPosition[]; // доп. расходы / доставка (Шаг 3)
|
||||
criteria: SupplierCriteria[]; // критерии поставщиков («Дополнительная информация»)
|
||||
recommendedSupplierId?: string; // выбранный поставщик (локальный id)
|
||||
// TODO: step3PositionQtyOverrides
|
||||
|
||||
// Шаг 4 — согласование
|
||||
approvers: Approver[];
|
||||
winSupplierId?: number; // выбранный поставщик (lookup в SP)
|
||||
}
|
||||
|
||||
// Пустая форма — стартовое состояние новой сущности.
|
||||
export const EMPTY_FORM_DATA: CtFormData = {
|
||||
status: 'draft',
|
||||
selectedPositions: [],
|
||||
suppliers: [],
|
||||
currencyRates: [],
|
||||
offers: [],
|
||||
step3ExtraPositions: [],
|
||||
criteria: [],
|
||||
approvers: []
|
||||
};
|
||||
|
||||
// --- Единый контракт props для всех шагов (§5.2) ---
|
||||
// import type у сервиса: тип стирается при компиляции, поэтому цикла импортов в рантайме нет.
|
||||
|
||||
export interface StepProps {
|
||||
service: KpsCtFormService;
|
||||
formData: CtFormData;
|
||||
onSave: (partial: Partial<CtFormData>) => void; // = updateFormData
|
||||
onNext?: () => void;
|
||||
onPrev?: () => void;
|
||||
onStepComplete: (step: FormStep) => void;
|
||||
isReadOnly?: boolean; // форма на согласовании/согласована/отклонена
|
||||
isRestrictedView?: boolean; // урезанный доступ (напр. скрытие цен)
|
||||
userDisplayName: string;
|
||||
isNotificationLink?: boolean; // открыто по ссылке из уведомления
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
// Форматирование значений для UI. Держим в одном месте, чтобы формат был единым по форме.
|
||||
|
||||
// Сумма в тенге: 320000 → "320 000 ₸". Тенге — валюта заявок TNSU.
|
||||
// В позициях сумма/цена может прийти пустой (API заполняет не всегда) — тогда «—».
|
||||
// typeof-проверка ловит и undefined, и null (если API вернёт его в рантайме).
|
||||
export function formatKzt(amount: number | undefined): string {
|
||||
if (typeof amount !== 'number') {
|
||||
return '—';
|
||||
}
|
||||
return `${amount.toLocaleString('ru-RU')} ₸`;
|
||||
}
|
||||
|
||||
// Денежный формат без знака валюты (цена/сумма в валюте поставщика). 0/пусто → «—».
|
||||
export function formatMoney(amount: number | undefined): string {
|
||||
if (typeof amount !== 'number' || amount <= 0) {
|
||||
return '—';
|
||||
}
|
||||
return amount.toLocaleString('ru-RU', { maximumFractionDigits: 2 });
|
||||
}
|
||||
|
||||
// ISO-дата → "02.06.2026" (без времени). Пусто/битую дату показываем как «—».
|
||||
export function formatDate(iso: string | undefined): string {
|
||||
if (!iso) {
|
||||
return '—';
|
||||
}
|
||||
const date = new Date(iso);
|
||||
if (isNaN(date.getTime())) {
|
||||
return '—';
|
||||
}
|
||||
return date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||||
}
|
||||
|
||||
// ISO-дата → "02.06.2026, 11:33". Пусто/битую дату показываем как «—».
|
||||
export function formatDateTime(iso: string | undefined): string {
|
||||
if (!iso) {
|
||||
return '—';
|
||||
}
|
||||
const date = new Date(iso);
|
||||
if (isNaN(date.getTime())) {
|
||||
return '—';
|
||||
}
|
||||
return date.toLocaleString('ru-RU', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
// Персист формы и чтение id сущности из URL (§5.4).
|
||||
// Ключ sessionStorage: `kps_ct_${ctId}`. Пока сущность не создана — временный ключ 'new'.
|
||||
|
||||
const SESSION_PREFIX = 'kps_ct';
|
||||
const NEW_ENTITY_KEY = `${SESSION_PREFIX}_new`;
|
||||
|
||||
// Обычная ссылка и ссылка из уведомления различаются РЕГИСТРОМ параметра (§5.4).
|
||||
const CT_ID_PARAM = 'ctId'; // обычная ссылка
|
||||
const NOTIFICATION_CT_ID_PARAM = 'ctid'; // ссылка из уведомления (Power Automate/Teams)
|
||||
|
||||
export interface UrlEntityInfo {
|
||||
ctId?: number;
|
||||
isNotificationLink: boolean;
|
||||
}
|
||||
|
||||
export function sessionKey(ctId?: number): string {
|
||||
return ctId ? `${SESSION_PREFIX}_${ctId}` : NEW_ENTITY_KEY;
|
||||
}
|
||||
|
||||
// Читает id сущности из URL. Параметр в нижнем регистре => ссылка из уведомления.
|
||||
export function readEntityFromUrl(): UrlEntityInfo {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const notificationRaw = params.get(NOTIFICATION_CT_ID_PARAM);
|
||||
const normalRaw = params.get(CT_ID_PARAM);
|
||||
|
||||
if (notificationRaw) {
|
||||
return { ctId: toId(notificationRaw), isNotificationLink: true };
|
||||
}
|
||||
return { ctId: normalRaw ? toId(normalRaw) : undefined, isNotificationLink: false };
|
||||
}
|
||||
|
||||
// Кладёт ctId в URL без перезагрузки — чтобы перезагрузка/шаринг продолжали ту же форму (§5.4).
|
||||
export function writeCtIdToUrl(ctId: number): void {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set(CT_ID_PARAM, String(ctId));
|
||||
window.history.replaceState(undefined, '', url.toString());
|
||||
}
|
||||
|
||||
export function loadFormState<T>(key: string): T | undefined {
|
||||
const raw = window.sessionStorage.getItem(key);
|
||||
if (!raw) {
|
||||
return undefined;
|
||||
}
|
||||
try {
|
||||
return JSON.parse(raw) as T;
|
||||
} catch {
|
||||
// Битый JSON в сессии не должен ронять форму — начинаем с чистого состояния.
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export function saveFormState<T>(key: string, state: T): void {
|
||||
window.sessionStorage.setItem(key, JSON.stringify(state));
|
||||
}
|
||||
|
||||
function toId(raw: string): number | undefined {
|
||||
const id = Number(raw);
|
||||
return Number.isFinite(id) && id > 0 ? id : undefined;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Description",
|
||||
"BasicGroupName": "Group Name",
|
||||
"DescriptionFieldLabel": "Description Field",
|
||||
"AppLocalEnvironmentSharePoint": "The app is running on your local environment as SharePoint web part",
|
||||
"AppLocalEnvironmentTeams": "The app is running on your local environment as Microsoft Teams app",
|
||||
"AppLocalEnvironmentOffice": "The app is running on your local environment in office.com",
|
||||
"AppLocalEnvironmentOutlook": "The app is running on your local environment in Outlook",
|
||||
"AppSharePointEnvironment": "The app is running on SharePoint page",
|
||||
"AppTeamsTabEnvironment": "The app is running in Microsoft Teams",
|
||||
"AppOfficeEnvironment": "The app is running in office.com",
|
||||
"AppOutlookEnvironment": "The app is running in Outlook",
|
||||
"UnknownEnvironment": "The app is running in an unknown environment"
|
||||
}
|
||||
});
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
declare interface IKpsCtFormWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
AppLocalEnvironmentSharePoint: string;
|
||||
AppLocalEnvironmentTeams: string;
|
||||
AppLocalEnvironmentOffice: string;
|
||||
AppLocalEnvironmentOutlook: string;
|
||||
AppSharePointEnvironment: string;
|
||||
AppTeamsTabEnvironment: string;
|
||||
AppOfficeEnvironment: string;
|
||||
AppOutlookEnvironment: string;
|
||||
UnknownEnvironment: string;
|
||||
}
|
||||
|
||||
declare module 'KpsCtFormWebPartStrings' {
|
||||
const strings: IKpsCtFormWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 249 B |
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json"
|
||||
}
|
||||
Reference in New Issue
Block a user