каркас вроде есть
This commit is contained in:
gorbenko.pavel
@@ -22,7 +22,10 @@
|
||||
"description": { "default": "approval-admin description" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "approval-admin"
|
||||
"apiBaseUrl": "https://localhost:5443",
|
||||
"useDevAuth": true,
|
||||
"devUserEmail": "dev@tnsu.kz",
|
||||
"aadResourceId": "api://9232d9e2-9807-4753-808f-07250e5474b0"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
@@ -3,90 +3,41 @@ import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
type IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
PropertyPaneTextField,
|
||||
PropertyPaneToggle
|
||||
} from '@microsoft/sp-property-pane';
|
||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||
import { IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||
|
||||
import * as strings from 'ApprovalAdminWebPartStrings';
|
||||
import ApprovalAdmin from './components/ApprovalAdmin';
|
||||
import { IApprovalAdminProps } from './components/IApprovalAdminProps';
|
||||
|
||||
export interface IApprovalAdminWebPartProps {
|
||||
description: string;
|
||||
apiBaseUrl: string;
|
||||
useDevAuth: boolean;
|
||||
devUserEmail: string;
|
||||
aadResourceId: string;
|
||||
}
|
||||
|
||||
export default class ApprovalAdminWebPart extends BaseClientSideWebPart<IApprovalAdminWebPartProps> {
|
||||
|
||||
private _isDarkTheme: boolean = false;
|
||||
private _environmentMessage: string = '';
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<IApprovalAdminProps> = React.createElement(
|
||||
ApprovalAdmin,
|
||||
{
|
||||
description: this.properties.description,
|
||||
isDarkTheme: this._isDarkTheme,
|
||||
environmentMessage: this._environmentMessage,
|
||||
hasTeamsContext: !!this.context.sdks.microsoftTeams,
|
||||
userDisplayName: this.context.pageContext.user.displayName
|
||||
}
|
||||
);
|
||||
const element: React.ReactElement<IApprovalAdminProps> = React.createElement(ApprovalAdmin, {
|
||||
context: this.context,
|
||||
apiBaseUrl: this.properties.apiBaseUrl,
|
||||
useDevAuth: this.properties.useDevAuth,
|
||||
devUserEmail: this.properties.devUserEmail,
|
||||
aadResourceId: this.properties.aadResourceId
|
||||
});
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected onInit(): Promise<void> {
|
||||
return this._getEnvironmentMessage().then(message => {
|
||||
this._environmentMessage = message;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
private _getEnvironmentMessage(): Promise<string> {
|
||||
if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
|
||||
return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
|
||||
.then(context => {
|
||||
let environmentMessage: string = '';
|
||||
switch (context.app.host.name) {
|
||||
case 'Office': // running in Office
|
||||
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
|
||||
break;
|
||||
case 'Outlook': // running in Outlook
|
||||
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
|
||||
break;
|
||||
case 'Teams': // running in Teams
|
||||
case 'TeamsModern':
|
||||
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
|
||||
break;
|
||||
default:
|
||||
environmentMessage = strings.UnknownEnvironment;
|
||||
}
|
||||
|
||||
return environmentMessage;
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.resolve(this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment);
|
||||
}
|
||||
|
||||
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.properties.apiBaseUrl = this.properties.apiBaseUrl || 'https://localhost:5443';
|
||||
this.properties.useDevAuth = this.properties.useDevAuth ?? true;
|
||||
this.properties.devUserEmail = this.properties.devUserEmail || 'dev@tnsu.kz';
|
||||
this.properties.aadResourceId = this.properties.aadResourceId || 'api://9232d9e2-9807-4753-808f-07250e5474b0';
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
@@ -102,14 +53,28 @@ export default class ApprovalAdminWebPart extends BaseClientSideWebPart<IApprova
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
description: 'Подключение к Tnsu.ApprovalRoute.Api'
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupName: 'API',
|
||||
groupFields: [
|
||||
PropertyPaneTextField('description', {
|
||||
label: strings.DescriptionFieldLabel
|
||||
PropertyPaneTextField('apiBaseUrl', {
|
||||
label: 'Api Base Url',
|
||||
description: 'Например, https://localhost:5443 локально или прод-адрес API.'
|
||||
}),
|
||||
PropertyPaneToggle('useDevAuth', {
|
||||
label: 'Локальный Dev-режим (без Azure AD)',
|
||||
onText: 'Вкл. (заголовок X-Dev-User-Email)',
|
||||
offText: 'Выкл. (AAD-токен через SPFx)'
|
||||
}),
|
||||
PropertyPaneTextField('devUserEmail', {
|
||||
label: 'Dev: email пользователя',
|
||||
description: 'Используется только при включённом Dev-режиме.'
|
||||
}),
|
||||
PropertyPaneTextField('aadResourceId', {
|
||||
label: 'AAD Resource Id (App ID URI)',
|
||||
description: 'Используется только при выключенном Dev-режиме. Должен совпадать с webApiPermissionRequests в package-solution.json.'
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,34 +1,15 @@
|
||||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
@import '../../../styles/design-tokens';
|
||||
|
||||
.approvalAdmin {
|
||||
overflow: hidden;
|
||||
padding: 1em;
|
||||
color: "[theme:bodyText, default: #323130]";
|
||||
color: var(--bodyText);
|
||||
&.teams {
|
||||
font-family: $ms-font-family-fallbacks;
|
||||
}
|
||||
font-family: $font-sans;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
.stateBox {
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
color: $gray-500;
|
||||
font-size: 13.5px;
|
||||
background: $gray-50;
|
||||
border-radius: $r-lg;
|
||||
border: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.welcomeImage {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.links {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: "[theme:link, default:#03787c]";
|
||||
color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: "[theme:linkHovered, default: #014446]";
|
||||
color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,43 +1,63 @@
|
||||
import * as React from 'react';
|
||||
import styles from './ApprovalAdmin.module.scss';
|
||||
import type { IApprovalAdminProps } from './IApprovalAdminProps';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
import { AdminApp } from './app/AdminApp';
|
||||
import { ApprovalRouteApi } from '../services/api';
|
||||
import { AadApiHttpClient, DevApiHttpClient, IHttpClient } from '../services/httpClient';
|
||||
|
||||
export default class ApprovalAdmin extends React.Component<IApprovalAdminProps> {
|
||||
public render(): React.ReactElement<IApprovalAdminProps> {
|
||||
const {
|
||||
description,
|
||||
isDarkTheme,
|
||||
environmentMessage,
|
||||
hasTeamsContext,
|
||||
userDisplayName
|
||||
} = this.props;
|
||||
const FONTS_LINK_ID = 'tnsu-approval-admin-fonts';
|
||||
|
||||
return (
|
||||
<section className={`${styles.approvalAdmin} ${hasTeamsContext ? styles.teams : ''}`}>
|
||||
<div className={styles.welcome}>
|
||||
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
|
||||
<h2>Well done, {escape(userDisplayName)}!</h2>
|
||||
<div>{environmentMessage}</div>
|
||||
<div>Web part property value: <strong>{escape(description)}</strong></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Welcome to SharePoint Framerk!</h3>
|
||||
<p>
|
||||
The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
|
||||
</p>
|
||||
<h4>Learn more about SPFx development:</h4>
|
||||
<ul className={styles.links}>
|
||||
<li><a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">SharePoint Framework Overview</a></li>
|
||||
<li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank" rel="noreferrer">Use Microsoft Graph in your solution</a></li>
|
||||
<li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank" rel="noreferrer">Build for Microsoft Teams using SharePoint Framework</a></li>
|
||||
<li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank" rel="noreferrer">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
|
||||
<li><a href="https://aka.ms/spfx-yeoman-store" target="_blank" rel="noreferrer">Publish SharePoint Framework applications to the marketplace</a></li>
|
||||
<li><a href="https://aka.ms/spfx-yeoman-api" target="_blank" rel="noreferrer">SharePoint Framework API reference</a></li>
|
||||
<li><a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">Microsoft 365 Developer Community</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
function ensureFontsLoaded(): void {
|
||||
if (typeof document === 'undefined' || document.getElementById(FONTS_LINK_ID)) return;
|
||||
const link = document.createElement('link');
|
||||
link.id = FONTS_LINK_ID;
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@500;600;700&display=swap';
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
async function createHttpClient(props: IApprovalAdminProps): Promise<IHttpClient> {
|
||||
if (props.useDevAuth) {
|
||||
return new DevApiHttpClient(props.apiBaseUrl, props.devUserEmail || 'dev@tnsu.kz');
|
||||
}
|
||||
const aadClient = await props.context.aadHttpClientFactory.getClient(props.aadResourceId);
|
||||
return new AadApiHttpClient(aadClient, props.apiBaseUrl);
|
||||
}
|
||||
|
||||
const ApprovalAdmin: React.FC<IApprovalAdminProps> = props => {
|
||||
const [api, setApi] = React.useState<ApprovalRouteApi | undefined>();
|
||||
const [error, setError] = React.useState<string | undefined>();
|
||||
|
||||
React.useEffect(() => {
|
||||
ensureFontsLoaded();
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
let cancelled = false;
|
||||
setApi(undefined);
|
||||
setError(undefined);
|
||||
|
||||
createHttpClient(props)
|
||||
.then(client => { if (!cancelled) setApi(new ApprovalRouteApi(client)); })
|
||||
.catch((e: Error) => { if (!cancelled) setError(e.message); });
|
||||
|
||||
return () => { cancelled = true; };
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.useDevAuth, props.apiBaseUrl, props.devUserEmail, props.aadResourceId]);
|
||||
|
||||
return (
|
||||
<section className={styles.approvalAdmin}>
|
||||
{error && (
|
||||
<div className={styles.stateBox}>
|
||||
Не удалось подключиться к API: {error}
|
||||
<br />
|
||||
Проверьте свойства веб-части (Api Base Url, режим авторизации) в панели настроек.
|
||||
</div>
|
||||
)}
|
||||
{!error && !api && <div className={styles.stateBox}>Подключение к API...</div>}
|
||||
{api && <AdminApp api={api} currentUserEmail={props.context.pageContext.user.email} />}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApprovalAdmin;
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||
|
||||
export interface IApprovalAdminProps {
|
||||
description: string;
|
||||
isDarkTheme: boolean;
|
||||
environmentMessage: string;
|
||||
hasTeamsContext: boolean;
|
||||
userDisplayName: string;
|
||||
context: WebPartContext;
|
||||
apiBaseUrl: string;
|
||||
useDevAuth: boolean;
|
||||
devUserEmail: string;
|
||||
aadResourceId: string;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.shell {
|
||||
background: linear-gradient(180deg, #F6F8FA 0%, #EEF2F6 100%);
|
||||
border-radius: $r-lg;
|
||||
border: 1px solid $gray-200;
|
||||
overflow: hidden;
|
||||
box-shadow: $sh-1;
|
||||
color: $gray-900;
|
||||
font-family: $font-sans;
|
||||
font-size: $fs-body;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 28px 30px 36px;
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.centerState {
|
||||
padding: 60px 30px;
|
||||
text-align: center;
|
||||
color: $gray-400;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import * as React from 'react';
|
||||
import styles from './AdminApp.module.scss';
|
||||
import { TopNav } from './TopNav';
|
||||
import { ScreenKey } from './types';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { TemplateRoute } from '../../models';
|
||||
import { DashboardScreen } from '../screens/DashboardScreen';
|
||||
import { RequestTypesScreen } from '../screens/RequestTypesScreen';
|
||||
import { RoutesScreen } from '../screens/RoutesScreen';
|
||||
import { RouteStepsScreen } from '../screens/RouteStepsScreen';
|
||||
import { ResolveScreen } from '../screens/ResolveScreen';
|
||||
|
||||
export interface IAdminAppProps {
|
||||
api: ApprovalRouteApi;
|
||||
currentUserEmail?: string;
|
||||
}
|
||||
|
||||
export const AdminApp: React.FC<IAdminAppProps> = ({ api, currentUserEmail }) => {
|
||||
const [screen, setScreen] = React.useState<ScreenKey>('dashboard');
|
||||
const [selectedRoute, setSelectedRoute] = React.useState<TemplateRoute | undefined>();
|
||||
const [selectedRequestTypeName, setSelectedRequestTypeName] = React.useState('');
|
||||
|
||||
const navigate = (key: ScreenKey): void => {
|
||||
setScreen(key);
|
||||
};
|
||||
|
||||
const openSteps = (route: TemplateRoute): void => {
|
||||
setSelectedRoute(route);
|
||||
api.requestTypes.get(route.requestTypeId)
|
||||
.then(rt => setSelectedRequestTypeName(rt.name))
|
||||
.catch(() => setSelectedRequestTypeName(`#${route.requestTypeId}`));
|
||||
setScreen('routeSteps');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.shell}>
|
||||
<TopNav active={screen} onSelect={navigate} />
|
||||
<div className={styles.content}>
|
||||
{screen === 'dashboard' && <DashboardScreen api={api} onNavigate={navigate} />}
|
||||
{screen === 'requestTypes' && <RequestTypesScreen api={api} />}
|
||||
{screen === 'routes' && <RoutesScreen api={api} onOpenSteps={openSteps} />}
|
||||
{screen === 'routeSteps' && selectedRoute && (
|
||||
<RouteStepsScreen
|
||||
api={api}
|
||||
route={selectedRoute}
|
||||
requestTypeName={selectedRequestTypeName}
|
||||
onBack={() => setScreen('routes')}
|
||||
/>
|
||||
)}
|
||||
{screen === 'resolve' && <ResolveScreen api={api} currentUserEmail={currentUserEmail} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,71 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.topnav {
|
||||
background: $grad-header;
|
||||
padding: 0 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 54px;
|
||||
box-shadow: 0 1px 0 rgba(212,160,30,.35);
|
||||
border-radius: $r-md $r-md 0 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-right: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
background: $grad-gold-v;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $navy-950;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
font-family: $font-serif;
|
||||
}
|
||||
|
||||
.brandText {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
letter-spacing: .4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brandText em {
|
||||
font-style: normal;
|
||||
color: $gold-400;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
background: 0;
|
||||
color: rgba(255,255,255,.5);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: .18s;
|
||||
height: 54px;
|
||||
border-bottom: 2px solid transparent;
|
||||
letter-spacing: .2px;
|
||||
|
||||
&:hover { color: rgba(255,255,255,.85); }
|
||||
&.on { color: $gold-300; border-bottom-color: $gold-400; }
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import * as React from 'react';
|
||||
import styles from './TopNav.module.scss';
|
||||
import { ScreenKey } from './types';
|
||||
|
||||
interface ITab {
|
||||
key: ScreenKey;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const TABS: ITab[] = [
|
||||
{ key: 'dashboard', label: 'Дашборд' },
|
||||
{ key: 'requestTypes', label: 'Типы заявок' },
|
||||
{ key: 'routes', label: 'Маршруты' },
|
||||
{ key: 'resolve', label: 'Проверка маршрута' }
|
||||
];
|
||||
|
||||
export interface ITopNavProps {
|
||||
active: ScreenKey;
|
||||
onSelect: (key: ScreenKey) => void;
|
||||
}
|
||||
|
||||
export const TopNav: React.FC<ITopNavProps> = ({ active, onSelect }) => (
|
||||
<nav className={styles.topnav}>
|
||||
<div className={styles.brand}>
|
||||
<div className={styles.mark}>T</div>
|
||||
<div className={styles.brandText}>TNSU <em>Approval Route</em></div>
|
||||
</div>
|
||||
<div className={styles.tabs}>
|
||||
{TABS.map(tab => (
|
||||
<button
|
||||
key={tab.key}
|
||||
className={`${styles.tab} ${(active === tab.key || (active === 'routeSteps' && tab.key === 'routes')) ? styles.on : ''}`}
|
||||
onClick={() => onSelect(tab.key)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
export type ScreenKey = 'dashboard' | 'requestTypes' | 'routes' | 'routeSteps' | 'resolve';
|
||||
@@ -0,0 +1,53 @@
|
||||
import * as React from 'react';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { ScreenKey } from '../app/types';
|
||||
import { CardGrid, NavCard, StatCard, StatRow } from '../ui';
|
||||
|
||||
export interface IDashboardScreenProps {
|
||||
api: ApprovalRouteApi;
|
||||
onNavigate: (key: ScreenKey) => void;
|
||||
}
|
||||
|
||||
export const DashboardScreen: React.FC<IDashboardScreenProps> = ({ api, onNavigate }) => {
|
||||
const [requestTypesCount, setRequestTypesCount] = React.useState<number | undefined>();
|
||||
const [routesCount, setRoutesCount] = React.useState<number | undefined>();
|
||||
|
||||
React.useEffect(() => {
|
||||
api.requestTypes.list().then(items => setRequestTypesCount(items.length)).catch(() => setRequestTypesCount(undefined));
|
||||
api.templateRoutes.list().then(items => setRoutesCount(items.length)).catch(() => setRoutesCount(undefined));
|
||||
}, [api]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<StatRow>
|
||||
<StatCard label="Типов заявок" value={requestTypesCount ?? '—'} />
|
||||
<StatCard label="Маршрутов согласования" value={routesCount ?? '—'} />
|
||||
</StatRow>
|
||||
|
||||
<div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 1.6, color: 'var(--gray-400)', fontWeight: 600, marginBottom: 12 }}>
|
||||
Разделы
|
||||
</div>
|
||||
<hr style={{ height: 1, background: 'linear-gradient(90deg, var(--gold-400), transparent 70%)', border: 0, margin: '6px 0 22px' }} />
|
||||
<CardGrid>
|
||||
<NavCard
|
||||
icon="clipboard"
|
||||
title="Типы заявок"
|
||||
description="Справочник типов заявок и их страниц"
|
||||
onClick={() => onNavigate('requestTypes')}
|
||||
/>
|
||||
<NavCard
|
||||
icon="route"
|
||||
title="Маршруты согласования"
|
||||
description="Маршруты, шаги и исполнители"
|
||||
onClick={() => onNavigate('routes')}
|
||||
/>
|
||||
<NavCard
|
||||
icon="search"
|
||||
title="Проверка маршрута"
|
||||
description="Как разрешится маршрут для конкретного пользователя"
|
||||
onClick={() => onNavigate('resolve')}
|
||||
/>
|
||||
</CardGrid>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,189 @@
|
||||
import * as React from 'react';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { ApiClientError } from '../../services/httpClient';
|
||||
import { RequestType } from '../../models';
|
||||
import {
|
||||
ActionsCell,
|
||||
Alert,
|
||||
Breadcrumbs,
|
||||
Button,
|
||||
DataTable,
|
||||
Field,
|
||||
FormGrid,
|
||||
IconButton,
|
||||
Modal,
|
||||
ConfirmDialog,
|
||||
PageHeader,
|
||||
PrimaryCell,
|
||||
TextInput
|
||||
} from '../ui';
|
||||
|
||||
export interface IRequestTypesScreenProps {
|
||||
api: ApprovalRouteApi;
|
||||
}
|
||||
|
||||
interface IFormState {
|
||||
name: string;
|
||||
pageUrl: string;
|
||||
}
|
||||
|
||||
const EMPTY_FORM: IFormState = { name: '', pageUrl: '' };
|
||||
|
||||
export const RequestTypesScreen: React.FC<IRequestTypesScreenProps> = ({ api }) => {
|
||||
const [items, setItems] = React.useState<RequestType[]>([]);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [loadError, setLoadError] = React.useState<string | undefined>();
|
||||
|
||||
const [editing, setEditing] = React.useState<RequestType | undefined>();
|
||||
const [showForm, setShowForm] = React.useState(false);
|
||||
const [form, setForm] = React.useState<IFormState>(EMPTY_FORM);
|
||||
const [formError, setFormError] = React.useState<string | undefined>();
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
|
||||
const [deleting, setDeleting] = React.useState<RequestType | undefined>();
|
||||
const [deleteError, setDeleteError] = React.useState<string | undefined>();
|
||||
const [deleteBusy, setDeleteBusy] = React.useState(false);
|
||||
|
||||
const load = React.useCallback(() => {
|
||||
setLoading(true);
|
||||
setLoadError(undefined);
|
||||
api.requestTypes
|
||||
.list()
|
||||
.then(setItems)
|
||||
.catch((e: ApiClientError) => setLoadError(e.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [api]);
|
||||
|
||||
React.useEffect(() => { load(); }, [load]);
|
||||
|
||||
const openCreate = (): void => {
|
||||
setEditing(undefined);
|
||||
setForm(EMPTY_FORM);
|
||||
setFormError(undefined);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const openEdit = (item: RequestType): void => {
|
||||
setEditing(item);
|
||||
setForm({ name: item.name, pageUrl: item.pageUrl });
|
||||
setFormError(undefined);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const submit = (): void => {
|
||||
if (!form.name.trim() || !form.pageUrl.trim()) {
|
||||
setFormError('Заполните имя и Url страницы.');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setFormError(undefined);
|
||||
const request = editing
|
||||
? api.requestTypes.update(editing.id, { name: form.name.trim(), pageUrl: form.pageUrl.trim() })
|
||||
: api.requestTypes.create({ name: form.name.trim(), pageUrl: form.pageUrl.trim() });
|
||||
|
||||
request
|
||||
.then(() => {
|
||||
setShowForm(false);
|
||||
load();
|
||||
})
|
||||
.catch((e: ApiClientError) => setFormError(e.message))
|
||||
.finally(() => setSaving(false));
|
||||
};
|
||||
|
||||
const confirmDelete = (): void => {
|
||||
if (!deleting) return;
|
||||
setDeleteBusy(true);
|
||||
setDeleteError(undefined);
|
||||
api.requestTypes
|
||||
.remove(deleting.id)
|
||||
.then(() => {
|
||||
setDeleting(undefined);
|
||||
load();
|
||||
})
|
||||
.catch((e: ApiClientError) => setDeleteError(e.message))
|
||||
.finally(() => setDeleteBusy(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs items={[{ label: 'Главная' }, { label: 'Типы заявок' }]} />
|
||||
<PageHeader
|
||||
icon="clipboard"
|
||||
subtitle="Справочник"
|
||||
title="Типы заявок"
|
||||
actions={
|
||||
<Button variant="accent" icon="plus" onClick={openCreate}>Добавить тип</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{loadError && <Alert kind="err">{loadError}</Alert>}
|
||||
{deleteError && <Alert kind="err">{deleteError}</Alert>}
|
||||
|
||||
<DataTable
|
||||
columns={[
|
||||
{ key: 'name', header: 'Название', render: r => <PrimaryCell>{r.name}</PrimaryCell> },
|
||||
{ key: 'url', header: 'Url страницы', render: r => r.pageUrl },
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
width: '100px',
|
||||
align: 'right',
|
||||
render: r => (
|
||||
<ActionsCell>
|
||||
<IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />
|
||||
<IconButton icon="trash" label="Удалить" danger onClick={() => { setDeleteError(undefined); setDeleting(r); }} />
|
||||
</ActionsCell>
|
||||
)
|
||||
}
|
||||
]}
|
||||
rows={items}
|
||||
keyOf={r => r.id}
|
||||
emptyMessage={loading ? 'Загрузка...' : 'Типов заявок пока нет.'}
|
||||
/>
|
||||
|
||||
{showForm && (
|
||||
<Modal
|
||||
title={editing ? 'Редактировать тип заявки' : 'Новый тип заявки'}
|
||||
onClose={() => setShowForm(false)}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="secondary" onClick={() => setShowForm(false)} disabled={saving}>Отмена</Button>
|
||||
<Button variant="accent" icon="check" onClick={submit} disabled={saving}>
|
||||
{saving ? 'Сохранение...' : 'Сохранить'}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{formError && <Alert kind="err">{formError}</Alert>}
|
||||
<FormGrid>
|
||||
<Field label="Название" required full>
|
||||
<TextInput
|
||||
value={form.name}
|
||||
onChange={e => setForm({ ...form, name: e.target.value })}
|
||||
placeholder="Например, Заявка на командировку"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Url страницы" required full hint="Страница формы заявки на портале.">
|
||||
<TextInput
|
||||
value={form.pageUrl}
|
||||
onChange={e => setForm({ ...form, pageUrl: e.target.value })}
|
||||
placeholder="/pages/business-trip"
|
||||
/>
|
||||
</Field>
|
||||
</FormGrid>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{deleting && (
|
||||
<ConfirmDialog
|
||||
title="Удалить тип заявки?"
|
||||
text={`Тип «${deleting.name}» будет удалён безвозвратно. Связанные маршруты могут перестать разрешаться.`}
|
||||
confirmLabel="Удалить"
|
||||
busy={deleteBusy}
|
||||
onCancel={() => setDeleting(undefined)}
|
||||
onConfirm={confirmDelete}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,131 @@
|
||||
import * as React from 'react';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { ApiClientError } from '../../services/httpClient';
|
||||
import {
|
||||
RequestType,
|
||||
ResolveTemplateRouteResult,
|
||||
routeStepStatusLabels,
|
||||
RouteStepStatus,
|
||||
routeTypeLabels
|
||||
} from '../../models';
|
||||
import {
|
||||
Alert,
|
||||
Breadcrumbs,
|
||||
Button,
|
||||
DataTable,
|
||||
Field,
|
||||
FormGrid,
|
||||
PageHeader,
|
||||
PrimaryCell,
|
||||
Select,
|
||||
TextInput
|
||||
} from '../ui';
|
||||
|
||||
export interface IResolveScreenProps {
|
||||
api: ApprovalRouteApi;
|
||||
currentUserEmail?: string;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS = [RouteStepStatus.Approval, RouteStepStatus.Execution]
|
||||
.map(v => ({ value: v, label: routeStepStatusLabels[v] }));
|
||||
|
||||
export const ResolveScreen: React.FC<IResolveScreenProps> = ({ api, currentUserEmail }) => {
|
||||
const [requestTypes, setRequestTypes] = React.useState<RequestType[]>([]);
|
||||
const [requestTypeId, setRequestTypeId] = React.useState('');
|
||||
const [userEmail, setUserEmail] = React.useState('');
|
||||
const [projectId, setProjectId] = React.useState('');
|
||||
const [status, setStatus] = React.useState<RouteStepStatus>(RouteStepStatus.Approval);
|
||||
|
||||
const [busy, setBusy] = React.useState(false);
|
||||
const [error, setError] = React.useState<string | undefined>();
|
||||
const [result, setResult] = React.useState<ResolveTemplateRouteResult | undefined>();
|
||||
|
||||
React.useEffect(() => {
|
||||
api.requestTypes.list().then(setRequestTypes).catch(() => { /* показывается при попытке проверки */ });
|
||||
}, [api]);
|
||||
|
||||
const run = (): void => {
|
||||
if (!requestTypeId) {
|
||||
setError('Выберите тип заявки.');
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
setError(undefined);
|
||||
setResult(undefined);
|
||||
api.templateRoutes
|
||||
.resolve({
|
||||
requestTypeId: Number(requestTypeId),
|
||||
userEmail: userEmail.trim() || undefined,
|
||||
projectId: projectId.trim() || undefined,
|
||||
status
|
||||
})
|
||||
.then(setResult)
|
||||
.catch((e: ApiClientError) => setError(e.message))
|
||||
.finally(() => setBusy(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs items={[{ label: 'Главная' }, { label: 'Проверка маршрута' }]} />
|
||||
<PageHeader
|
||||
icon="search"
|
||||
subtitle="Диагностика"
|
||||
title="Проверка разрешения маршрута"
|
||||
/>
|
||||
|
||||
<div style={{ background: '#fff', borderRadius: 14, padding: 26, boxShadow: 'var(--sh-1)', border: '1px solid var(--gray-200)', marginBottom: 24 }}>
|
||||
<FormGrid>
|
||||
<Field label="Тип заявки" required full>
|
||||
<Select
|
||||
options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
|
||||
placeholder="Выберите тип заявки"
|
||||
value={requestTypeId}
|
||||
onChange={e => setRequestTypeId(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Email инициатора" hint={currentUserEmail ? `Пусто = текущий пользователь (${currentUserEmail}).` : 'Пусто = текущий пользователь из токена.'}>
|
||||
<TextInput value={userEmail} onChange={e => setUserEmail(e.target.value)} placeholder="user@tnsu.kz" />
|
||||
</Field>
|
||||
<Field label="Id проекта (Guid)" hint="Заполните, если маршрут зависит от проекта.">
|
||||
<TextInput value={projectId} onChange={e => setProjectId(e.target.value)} placeholder="Необязательно" />
|
||||
</Field>
|
||||
<Field label="Статус" required>
|
||||
<Select options={STATUS_OPTIONS} value={status} onChange={e => setStatus(e.target.value as RouteStepStatus)} />
|
||||
</Field>
|
||||
</FormGrid>
|
||||
<div style={{ marginTop: 18 }}>
|
||||
<Button variant="accent" icon="search" onClick={run} disabled={busy}>
|
||||
{busy ? 'Проверка...' : 'Проверить'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <Alert kind="err">{error}</Alert>}
|
||||
|
||||
{result && (
|
||||
<>
|
||||
<Alert kind="ok">
|
||||
Маршрут #{result.routeId} · {routeTypeLabels[result.routeType]}
|
||||
{result.requiresControl ? ' · требуется контроль исполнения' : ''}
|
||||
</Alert>
|
||||
<DataTable
|
||||
columns={[
|
||||
{ key: 'order', header: '№', width: '50px', render: r => r.orderNo },
|
||||
{ key: 'executor', header: 'Исполнитель', render: r => <PrimaryCell>{r.executorEmail ?? '—'}</PrimaryCell> },
|
||||
{ key: 'position', header: 'Должность', render: r => r.position ?? '—' },
|
||||
{
|
||||
key: 'reassign',
|
||||
header: 'Переназначение',
|
||||
align: 'center',
|
||||
render: r => (r.allowReassignToOtherApprovers ? 'Разрешено' : 'Нет')
|
||||
}
|
||||
]}
|
||||
rows={result.steps}
|
||||
keyOf={r => r.id}
|
||||
emptyMessage="Маршрут разрешился без шагов для этого статуса."
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,372 @@
|
||||
import * as React from 'react';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { ApiClientError } from '../../services/httpClient';
|
||||
import {
|
||||
HeadType,
|
||||
headTypeLabels,
|
||||
ProjectRole,
|
||||
projectRoleLabels,
|
||||
RouteStepStatus,
|
||||
routeStepStatusLabels,
|
||||
routeTypeLabels,
|
||||
StepExecutorKind,
|
||||
TemplateRoute,
|
||||
TemplateRouteStep,
|
||||
detectExecutorKind
|
||||
} from '../../models';
|
||||
import {
|
||||
ActionsCell,
|
||||
Alert,
|
||||
Badge,
|
||||
Breadcrumbs,
|
||||
Button,
|
||||
Checkbox,
|
||||
ConfirmDialog,
|
||||
DataTable,
|
||||
Field,
|
||||
FormGrid,
|
||||
IconButton,
|
||||
Modal,
|
||||
PageHeader,
|
||||
PrimaryCell,
|
||||
RadioGroup,
|
||||
Select,
|
||||
TextInput
|
||||
} from '../ui';
|
||||
|
||||
export interface IRouteStepsScreenProps {
|
||||
api: ApprovalRouteApi;
|
||||
route: TemplateRoute;
|
||||
requestTypeName: string;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
interface IFormState {
|
||||
orderNo: string;
|
||||
status: RouteStepStatus;
|
||||
kind: StepExecutorKind;
|
||||
executorEmail: string;
|
||||
position: string;
|
||||
projectRole: ProjectRole;
|
||||
headType: HeadType;
|
||||
allowReassignToOtherApprovers: boolean;
|
||||
}
|
||||
|
||||
function emptyForm(nextOrderNo: number): IFormState {
|
||||
return {
|
||||
orderNo: String(nextOrderNo),
|
||||
status: RouteStepStatus.Approval,
|
||||
kind: 'email',
|
||||
executorEmail: '',
|
||||
position: '',
|
||||
projectRole: ProjectRole.ProjectManager,
|
||||
headType: HeadType.Chief,
|
||||
allowReassignToOtherApprovers: false
|
||||
};
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS = [RouteStepStatus.Approval, RouteStepStatus.Execution]
|
||||
.map(v => ({ value: v, label: routeStepStatusLabels[v] }));
|
||||
|
||||
const PROJECT_ROLE_OPTIONS = Object.values(ProjectRole)
|
||||
.filter(v => v !== ProjectRole.None)
|
||||
.map(v => ({ value: v, label: projectRoleLabels[v] }));
|
||||
|
||||
const HEAD_TYPE_OPTIONS = Object.values(HeadType)
|
||||
.filter(v => v !== HeadType.None)
|
||||
.map(v => ({ value: v, label: headTypeLabels[v] }));
|
||||
|
||||
export const RouteStepsScreen: React.FC<IRouteStepsScreenProps> = ({ api, route, requestTypeName, onBack }) => {
|
||||
const [items, setItems] = React.useState<TemplateRouteStep[]>([]);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [loadError, setLoadError] = React.useState<string | undefined>();
|
||||
const [warning, setWarning] = React.useState<string | undefined>();
|
||||
|
||||
const [editing, setEditing] = React.useState<TemplateRouteStep | undefined>();
|
||||
const [showForm, setShowForm] = React.useState(false);
|
||||
const [form, setForm] = React.useState<IFormState>(emptyForm(1));
|
||||
const [formError, setFormError] = React.useState<string | undefined>();
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
|
||||
const [deleting, setDeleting] = React.useState<TemplateRouteStep | undefined>();
|
||||
const [deleteError, setDeleteError] = React.useState<string | undefined>();
|
||||
const [deleteBusy, setDeleteBusy] = React.useState(false);
|
||||
|
||||
const load = React.useCallback(() => {
|
||||
setLoading(true);
|
||||
setLoadError(undefined);
|
||||
api.templateRouteSteps
|
||||
.list(route.id)
|
||||
.then(setItems)
|
||||
.catch((e: ApiClientError) => setLoadError(e.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [api, route.id]);
|
||||
|
||||
React.useEffect(() => { load(); }, [load]);
|
||||
|
||||
const openCreate = (): void => {
|
||||
setEditing(undefined);
|
||||
const nextOrder = items.length > 0 ? Math.max(...items.map(s => s.orderNo)) + 1 : 1;
|
||||
setForm(emptyForm(nextOrder));
|
||||
setFormError(undefined);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const openEdit = (item: TemplateRouteStep): void => {
|
||||
setEditing(item);
|
||||
setForm({
|
||||
orderNo: String(item.orderNo),
|
||||
status: item.status,
|
||||
kind: detectExecutorKind(item),
|
||||
executorEmail: item.executorEmail ?? '',
|
||||
position: item.position ?? '',
|
||||
projectRole: item.projectRole && item.projectRole !== ProjectRole.None ? item.projectRole : ProjectRole.ProjectManager,
|
||||
headType: item.headType && item.headType !== HeadType.None ? item.headType : HeadType.Chief,
|
||||
allowReassignToOtherApprovers: item.allowReassignToOtherApprovers
|
||||
});
|
||||
setFormError(undefined);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const submit = (): void => {
|
||||
const orderNo = Number(form.orderNo);
|
||||
if (!orderNo || orderNo < 1) {
|
||||
setFormError('Порядковый номер шага обязателен.');
|
||||
return;
|
||||
}
|
||||
if (form.kind === 'email' && !form.executorEmail.trim()) {
|
||||
setFormError('Укажите email исполнителя.');
|
||||
return;
|
||||
}
|
||||
if (form.kind === 'position' && !form.position.trim()) {
|
||||
setFormError('Укажите должность.');
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
orderNo,
|
||||
status: form.status,
|
||||
allowReassignToOtherApprovers: form.allowReassignToOtherApprovers,
|
||||
executorEmail: form.kind === 'email' ? form.executorEmail.trim() : null,
|
||||
position: form.kind === 'position' ? form.position.trim() : null,
|
||||
projectRole: form.kind === 'projectRole' ? form.projectRole : null,
|
||||
headType: form.kind === 'headType' ? form.headType : null
|
||||
};
|
||||
|
||||
setSaving(true);
|
||||
setFormError(undefined);
|
||||
const request = editing
|
||||
? api.templateRouteSteps.update(route.id, editing.id, payload)
|
||||
: api.templateRouteSteps.create(route.id, payload);
|
||||
|
||||
request
|
||||
.then(step => {
|
||||
setShowForm(false);
|
||||
setWarning(step.warning ?? undefined);
|
||||
load();
|
||||
})
|
||||
.catch((e: ApiClientError) => setFormError(e.message))
|
||||
.finally(() => setSaving(false));
|
||||
};
|
||||
|
||||
const confirmDelete = (): void => {
|
||||
if (!deleting) return;
|
||||
setDeleteBusy(true);
|
||||
setDeleteError(undefined);
|
||||
api.templateRouteSteps
|
||||
.remove(route.id, deleting.id)
|
||||
.then(() => {
|
||||
setDeleting(undefined);
|
||||
load();
|
||||
})
|
||||
.catch((e: ApiClientError) => setDeleteError(e.message))
|
||||
.finally(() => setDeleteBusy(false));
|
||||
};
|
||||
|
||||
const sorted = [...items].sort((a, b) => a.orderNo - b.orderNo);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Главная' },
|
||||
{ label: 'Маршруты согласования', onClick: onBack },
|
||||
{ label: `Шаги маршрута #${route.id}` }
|
||||
]}
|
||||
/>
|
||||
<PageHeader
|
||||
icon="flag-check"
|
||||
subtitle={`${requestTypeName} · ${routeTypeLabels[route.routeType]}`}
|
||||
title={`Маршрут #${route.id}`}
|
||||
actions={
|
||||
<>
|
||||
<Button variant="ghost" icon="arrow-left" onClick={onBack}>К маршрутам</Button>
|
||||
<Button variant="accent" icon="plus" onClick={openCreate}>Добавить шаг</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{warning && <Alert kind="warn">{warning}</Alert>}
|
||||
{loadError && <Alert kind="err">{loadError}</Alert>}
|
||||
{deleteError && <Alert kind="err">{deleteError}</Alert>}
|
||||
|
||||
<DataTable
|
||||
columns={[
|
||||
{ key: 'order', header: '№', width: '50px', render: r => r.orderNo },
|
||||
{
|
||||
key: 'executor',
|
||||
header: 'Исполнитель',
|
||||
render: r => <PrimaryCell>{describeExecutor(r)}</PrimaryCell>
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
header: 'Статус',
|
||||
render: r => (
|
||||
<Badge variant={r.status === RouteStepStatus.Approval ? 'gold' : 'blue'}>
|
||||
{routeStepStatusLabels[r.status]}
|
||||
</Badge>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'reassign',
|
||||
header: 'Переназначение',
|
||||
align: 'center',
|
||||
render: r => (r.allowReassignToOtherApprovers ? <Badge variant="ok">Разрешено</Badge> : <Badge variant="neutral">Нет</Badge>)
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
width: '100px',
|
||||
align: 'right',
|
||||
render: r => (
|
||||
<ActionsCell>
|
||||
<IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />
|
||||
<IconButton icon="trash" label="Удалить" danger onClick={() => { setDeleteError(undefined); setDeleting(r); }} />
|
||||
</ActionsCell>
|
||||
)
|
||||
}
|
||||
]}
|
||||
rows={sorted}
|
||||
keyOf={r => r.id}
|
||||
emptyMessage={loading ? 'Загрузка...' : 'Шагов пока нет — добавьте первый.'}
|
||||
/>
|
||||
|
||||
{showForm && (
|
||||
<Modal
|
||||
title={editing ? `Шаг #${editing.orderNo}` : 'Новый шаг маршрута'}
|
||||
onClose={() => setShowForm(false)}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="secondary" onClick={() => setShowForm(false)} disabled={saving}>Отмена</Button>
|
||||
<Button variant="accent" icon="check" onClick={submit} disabled={saving}>
|
||||
{saving ? 'Сохранение...' : 'Сохранить'}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{formError && <Alert kind="err">{formError}</Alert>}
|
||||
<FormGrid>
|
||||
<Field label="Порядковый номер" required>
|
||||
<TextInput
|
||||
type="number"
|
||||
min={1}
|
||||
value={form.orderNo}
|
||||
onChange={e => setForm({ ...form, orderNo: e.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Статус шага" required>
|
||||
<Select
|
||||
options={STATUS_OPTIONS}
|
||||
value={form.status}
|
||||
onChange={e => setForm({ ...form, status: e.target.value as RouteStepStatus })}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field label="Кто исполнитель" required full hint="Должно быть заполнено ровно одно из полей.">
|
||||
<RadioGroup
|
||||
name="executorKind"
|
||||
value={form.kind}
|
||||
onChange={kind => setForm({ ...form, kind })}
|
||||
options={[
|
||||
{ value: 'email', label: 'Конкретный сотрудник (email)' },
|
||||
{ value: 'position', label: 'По должности в компании инициатора' },
|
||||
{
|
||||
value: 'projectRole',
|
||||
label: 'По роли в проекте',
|
||||
disabled: !route.byProject,
|
||||
disabledHint: 'Недоступно: маршрут не учитывает проект (по проекту = нет).'
|
||||
},
|
||||
{ value: 'headType', label: 'По типу руководителя' }
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{form.kind === 'email' && (
|
||||
<Field label="Email исполнителя" required full>
|
||||
<TextInput
|
||||
value={form.executorEmail}
|
||||
onChange={e => setForm({ ...form, executorEmail: e.target.value })}
|
||||
placeholder="user@tnsu.kz"
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
{form.kind === 'position' && (
|
||||
<Field label="Должность" required full hint="Ищется в справочнике api.tnsu.kz по компании инициатора.">
|
||||
<TextInput
|
||||
value={form.position}
|
||||
onChange={e => setForm({ ...form, position: e.target.value })}
|
||||
placeholder="Главный инженер"
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
{form.kind === 'projectRole' && (
|
||||
<Field label="Роль в проекте" required full>
|
||||
<Select
|
||||
options={PROJECT_ROLE_OPTIONS}
|
||||
value={form.projectRole}
|
||||
onChange={e => setForm({ ...form, projectRole: e.target.value as ProjectRole })}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
{form.kind === 'headType' && (
|
||||
<Field label="Тип руководителя" required full>
|
||||
<Select
|
||||
options={HEAD_TYPE_OPTIONS}
|
||||
value={form.headType}
|
||||
onChange={e => setForm({ ...form, headType: e.target.value as HeadType })}
|
||||
/>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Field label="Переназначение" full>
|
||||
<Checkbox
|
||||
label="Разрешить переназначать другим согласующим"
|
||||
checked={form.allowReassignToOtherApprovers}
|
||||
onChange={v => setForm({ ...form, allowReassignToOtherApprovers: v })}
|
||||
/>
|
||||
</Field>
|
||||
</FormGrid>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{deleting && (
|
||||
<ConfirmDialog
|
||||
title="Удалить шаг?"
|
||||
text={`Шаг #${deleting.orderNo} будет удалён безвозвратно.`}
|
||||
confirmLabel="Удалить"
|
||||
busy={deleteBusy}
|
||||
onCancel={() => setDeleting(undefined)}
|
||||
onConfirm={confirmDelete}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function describeExecutor(step: TemplateRouteStep): string {
|
||||
if (step.executorEmail) return step.executorEmail;
|
||||
if (step.position) return step.position;
|
||||
if (step.projectRole && step.projectRole !== ProjectRole.None) return `Роль: ${projectRoleLabels[step.projectRole]}`;
|
||||
if (step.headType && step.headType !== HeadType.None) return `Руководитель: ${headTypeLabels[step.headType]}`;
|
||||
return '—';
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
import * as React from 'react';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { ApiClientError } from '../../services/httpClient';
|
||||
import { RequestType, routeTypeLabels, RouteType, TemplateRoute } from '../../models';
|
||||
import {
|
||||
ActionsCell,
|
||||
Alert,
|
||||
Badge,
|
||||
Breadcrumbs,
|
||||
Button,
|
||||
Checkbox,
|
||||
ConfirmDialog,
|
||||
DataTable,
|
||||
Field,
|
||||
FormGrid,
|
||||
IconButton,
|
||||
Modal,
|
||||
PageHeader,
|
||||
PrimaryCell,
|
||||
Select,
|
||||
TextInput
|
||||
} from '../ui';
|
||||
|
||||
export interface IRoutesScreenProps {
|
||||
api: ApprovalRouteApi;
|
||||
onOpenSteps: (route: TemplateRoute) => void;
|
||||
}
|
||||
|
||||
interface IFormState {
|
||||
requestTypeId: string;
|
||||
routeType: RouteType;
|
||||
companyId: string;
|
||||
departmentId: string;
|
||||
byProject: boolean;
|
||||
requiresControl: boolean;
|
||||
}
|
||||
|
||||
const EMPTY_FORM: IFormState = {
|
||||
requestTypeId: '',
|
||||
routeType: RouteType.Sequential,
|
||||
companyId: '',
|
||||
departmentId: '',
|
||||
byProject: false,
|
||||
requiresControl: false
|
||||
};
|
||||
|
||||
const ROUTE_TYPE_OPTIONS = Object.values(RouteType)
|
||||
.filter(v => v !== RouteType.None)
|
||||
.map(v => ({ value: v, label: routeTypeLabels[v] }));
|
||||
|
||||
export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, onOpenSteps }) => {
|
||||
const [requestTypes, setRequestTypes] = React.useState<RequestType[]>([]);
|
||||
const [items, setItems] = React.useState<TemplateRoute[]>([]);
|
||||
const [filterRequestTypeId, setFilterRequestTypeId] = React.useState<string>('');
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [loadError, setLoadError] = React.useState<string | undefined>();
|
||||
|
||||
const [editing, setEditing] = React.useState<TemplateRoute | undefined>();
|
||||
const [showForm, setShowForm] = React.useState(false);
|
||||
const [form, setForm] = React.useState<IFormState>(EMPTY_FORM);
|
||||
const [formError, setFormError] = React.useState<string | undefined>();
|
||||
const [saving, setSaving] = React.useState(false);
|
||||
|
||||
const [deleting, setDeleting] = React.useState<TemplateRoute | undefined>();
|
||||
const [deleteError, setDeleteError] = React.useState<string | undefined>();
|
||||
const [deleteBusy, setDeleteBusy] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
api.requestTypes.list().then(setRequestTypes).catch(() => { /* показывается в общей ошибке ниже */ });
|
||||
}, [api]);
|
||||
|
||||
const load = React.useCallback(() => {
|
||||
setLoading(true);
|
||||
setLoadError(undefined);
|
||||
const requestTypeId = filterRequestTypeId ? Number(filterRequestTypeId) : undefined;
|
||||
api.templateRoutes
|
||||
.list(requestTypeId)
|
||||
.then(setItems)
|
||||
.catch((e: ApiClientError) => setLoadError(e.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [api, filterRequestTypeId]);
|
||||
|
||||
React.useEffect(() => { load(); }, [load]);
|
||||
|
||||
const requestTypeName = (id: number): string => requestTypes.find(rt => rt.id === id)?.name ?? `#${id}`;
|
||||
|
||||
const openCreate = (): void => {
|
||||
setEditing(undefined);
|
||||
setForm({ ...EMPTY_FORM, requestTypeId: filterRequestTypeId });
|
||||
setFormError(undefined);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const openEdit = (item: TemplateRoute): void => {
|
||||
setEditing(item);
|
||||
setForm({
|
||||
requestTypeId: String(item.requestTypeId),
|
||||
routeType: item.routeType,
|
||||
companyId: item.companyId,
|
||||
departmentId: item.departmentId ?? '',
|
||||
byProject: item.byProject,
|
||||
requiresControl: item.requiresControl
|
||||
});
|
||||
setFormError(undefined);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const submit = (): void => {
|
||||
if (!editing && !form.requestTypeId) {
|
||||
setFormError('Выберите тип заявки.');
|
||||
return;
|
||||
}
|
||||
if (!form.companyId.trim()) {
|
||||
setFormError('Компания обязательна (Guid из справочника api.tnsu.kz).');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setFormError(undefined);
|
||||
|
||||
const departmentId = form.departmentId.trim() ? form.departmentId.trim() : null;
|
||||
const request = editing
|
||||
? api.templateRoutes.update(editing.id, {
|
||||
routeType: form.routeType,
|
||||
companyId: form.companyId.trim(),
|
||||
departmentId,
|
||||
byProject: form.byProject,
|
||||
requiresControl: form.requiresControl
|
||||
})
|
||||
: api.templateRoutes.create({
|
||||
routeType: form.routeType,
|
||||
requestTypeId: Number(form.requestTypeId),
|
||||
companyId: form.companyId.trim(),
|
||||
departmentId,
|
||||
byProject: form.byProject,
|
||||
requiresControl: form.requiresControl
|
||||
});
|
||||
|
||||
request
|
||||
.then(() => {
|
||||
setShowForm(false);
|
||||
load();
|
||||
})
|
||||
.catch((e: ApiClientError) => setFormError(e.message))
|
||||
.finally(() => setSaving(false));
|
||||
};
|
||||
|
||||
const confirmDelete = (): void => {
|
||||
if (!deleting) return;
|
||||
setDeleteBusy(true);
|
||||
setDeleteError(undefined);
|
||||
api.templateRoutes
|
||||
.remove(deleting.id)
|
||||
.then(() => {
|
||||
setDeleting(undefined);
|
||||
load();
|
||||
})
|
||||
.catch((e: ApiClientError) => setDeleteError(e.message))
|
||||
.finally(() => setDeleteBusy(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Breadcrumbs items={[{ label: 'Главная' }, { label: 'Маршруты согласования' }]} />
|
||||
<PageHeader
|
||||
icon="route"
|
||||
subtitle="Настройка согласований"
|
||||
title="Маршруты согласования"
|
||||
actions={<Button variant="accent" icon="plus" onClick={openCreate}>Добавить маршрут</Button>}
|
||||
/>
|
||||
|
||||
<div style={{ marginBottom: 18, maxWidth: 320 }}>
|
||||
<Field label="Фильтр по типу заявки">
|
||||
<Select
|
||||
options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
|
||||
placeholder="Все типы заявок"
|
||||
value={filterRequestTypeId}
|
||||
onChange={e => setFilterRequestTypeId(e.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{loadError && <Alert kind="err">{loadError}</Alert>}
|
||||
{deleteError && <Alert kind="err">{deleteError}</Alert>}
|
||||
|
||||
<DataTable
|
||||
columns={[
|
||||
{
|
||||
key: 'requestType',
|
||||
header: 'Тип заявки',
|
||||
render: r => <PrimaryCell>{requestTypeName(r.requestTypeId)}</PrimaryCell>
|
||||
},
|
||||
{
|
||||
key: 'routeType',
|
||||
header: 'Тип маршрута',
|
||||
render: r => <Badge variant={r.routeType === RouteType.Parallel ? 'blue' : 'gold'}>{routeTypeLabels[r.routeType]}</Badge>
|
||||
},
|
||||
{ key: 'company', header: 'Компания', render: r => <code>{shortGuid(r.companyId)}</code> },
|
||||
{ key: 'department', header: 'Отдел', render: r => (r.departmentId ? <code>{shortGuid(r.departmentId)}</code> : '—') },
|
||||
{
|
||||
key: 'byProject',
|
||||
header: 'По проекту',
|
||||
align: 'center',
|
||||
render: r => (r.byProject ? <Badge variant="ok">Да</Badge> : <Badge variant="neutral">Нет</Badge>)
|
||||
},
|
||||
{
|
||||
key: 'control',
|
||||
header: 'Контроль',
|
||||
align: 'center',
|
||||
render: r => (r.requiresControl ? <Badge variant="gold">Требуется</Badge> : <Badge variant="neutral">Нет</Badge>)
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
width: '160px',
|
||||
align: 'right',
|
||||
render: r => (
|
||||
<ActionsCell>
|
||||
<Button size="sm" variant="secondary" icon="clipboard" onClick={() => onOpenSteps(r)}>Шаги</Button>
|
||||
<IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />
|
||||
<IconButton icon="trash" label="Удалить" danger onClick={() => { setDeleteError(undefined); setDeleting(r); }} />
|
||||
</ActionsCell>
|
||||
)
|
||||
}
|
||||
]}
|
||||
rows={items}
|
||||
keyOf={r => r.id}
|
||||
emptyMessage={loading ? 'Загрузка...' : 'Маршрутов пока нет.'}
|
||||
/>
|
||||
|
||||
{showForm && (
|
||||
<Modal
|
||||
title={editing ? `Маршрут #${editing.id}` : 'Новый маршрут'}
|
||||
onClose={() => setShowForm(false)}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="secondary" onClick={() => setShowForm(false)} disabled={saving}>Отмена</Button>
|
||||
<Button variant="accent" icon="check" onClick={submit} disabled={saving}>
|
||||
{saving ? 'Сохранение...' : 'Сохранить'}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{formError && <Alert kind="err">{formError}</Alert>}
|
||||
<FormGrid>
|
||||
<Field label="Тип заявки" required full>
|
||||
<Select
|
||||
options={requestTypes.map(rt => ({ value: String(rt.id), label: rt.name }))}
|
||||
placeholder="Выберите тип заявки"
|
||||
value={form.requestTypeId}
|
||||
disabled={!!editing}
|
||||
onChange={e => setForm({ ...form, requestTypeId: e.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Тип маршрута" required>
|
||||
<Select
|
||||
options={ROUTE_TYPE_OPTIONS}
|
||||
value={form.routeType}
|
||||
onChange={e => setForm({ ...form, routeType: e.target.value as RouteType })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Компания (Guid)" required hint="Из справочника api.tnsu.kz.">
|
||||
<TextInput
|
||||
value={form.companyId}
|
||||
onChange={e => setForm({ ...form, companyId: e.target.value })}
|
||||
placeholder="00000000-0000-0000-0000-000000000000"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Отдел (Guid)" hint="Необязательно — маршрут «по умолчанию» для компании.">
|
||||
<TextInput
|
||||
value={form.departmentId}
|
||||
onChange={e => setForm({ ...form, departmentId: e.target.value })}
|
||||
placeholder="Оставьте пустым для маршрута по умолчанию"
|
||||
/>
|
||||
</Field>
|
||||
<Field label="По проекту">
|
||||
<Checkbox
|
||||
label="Маршрут учитывает конкретный проект"
|
||||
checked={form.byProject}
|
||||
onChange={v => setForm({ ...form, byProject: v })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Контроль">
|
||||
<Checkbox
|
||||
label="Требуется отдельный контроль исполнения"
|
||||
checked={form.requiresControl}
|
||||
onChange={v => setForm({ ...form, requiresControl: v })}
|
||||
/>
|
||||
</Field>
|
||||
</FormGrid>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{deleting && (
|
||||
<ConfirmDialog
|
||||
title="Удалить маршрут?"
|
||||
text={`Маршрут #${deleting.id} и все его шаги будут удалены безвозвратно.`}
|
||||
confirmLabel="Удалить"
|
||||
busy={deleteBusy}
|
||||
onCancel={() => setDeleting(undefined)}
|
||||
onConfirm={confirmDelete}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function shortGuid(guid: string): string {
|
||||
return guid.length > 8 ? `${guid.slice(0, 8)}…` : guid;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: $r-md;
|
||||
font-size: 12.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
border: 1px solid;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.warn { background: $gold-50; color: $amber-700; border-color: $gold-300; }
|
||||
.ok { background: $green-50; color: $green-600; border-color: #BBF7D0; }
|
||||
.err { background: $red-50; color: $red-500; border-color: #FECACA; }
|
||||
@@ -0,0 +1,19 @@
|
||||
import * as React from 'react';
|
||||
import styles from './Alert.module.scss';
|
||||
import { Icon } from './Icon';
|
||||
|
||||
export type AlertKind = 'warn' | 'ok' | 'err';
|
||||
|
||||
export interface IAlertProps {
|
||||
kind: AlertKind;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const ICONS = { warn: 'warning', ok: 'check', err: 'close' } as const;
|
||||
|
||||
export const Alert: React.FC<IAlertProps> = ({ kind, children }) => (
|
||||
<div className={`${styles.alert} ${styles[kind]}`}>
|
||||
<Icon name={ICONS[kind]} size="sm" />
|
||||
<span>{children}</span>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,41 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 11px;
|
||||
border-radius: $r-full;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: .2px;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.ok { background: $green-50; color: $green-600; }
|
||||
.gold { background: $gold-100; color: $amber-700; }
|
||||
.neutral { background: $gray-100; color: $gray-500; }
|
||||
.blue { background: $blue-50; color: $blue-600; }
|
||||
.red { background: $red-50; color: $red-500; }
|
||||
|
||||
.count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
background: $navy-900;
|
||||
color: $gold-300;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 0 6px;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import styles from './Badge.module.scss';
|
||||
|
||||
export type BadgeVariant = 'ok' | 'gold' | 'neutral' | 'blue' | 'red';
|
||||
|
||||
export interface IBadgeProps {
|
||||
variant?: BadgeVariant;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Badge: React.FC<IBadgeProps> = ({ variant = 'neutral', children }) => (
|
||||
<span className={`${styles.badge} ${styles[variant]}`}>{children}</span>
|
||||
);
|
||||
|
||||
export const CountBadge: React.FC<{ count: number }> = ({ count }) => (
|
||||
<span className={styles.count}>{count}</span>
|
||||
);
|
||||
@@ -0,0 +1,81 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 10px 20px;
|
||||
border-radius: $r-sm;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: $font-sans;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: .18s;
|
||||
white-space: nowrap;
|
||||
letter-spacing: .15px;
|
||||
text-decoration: none;
|
||||
|
||||
&:disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: $navy-800;
|
||||
color: #fff;
|
||||
border-color: $navy-800;
|
||||
&:hover:not(:disabled) { background: $navy-700; box-shadow: $sh-2; }
|
||||
}
|
||||
|
||||
.accent {
|
||||
@include btn-accent;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: #fff;
|
||||
color: $navy-800;
|
||||
border-color: $gray-300;
|
||||
&:hover:not(:disabled) { border-color: $gold-500; color: $navy-900; }
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: transparent;
|
||||
color: $navy-700;
|
||||
border-color: transparent;
|
||||
&:hover:not(:disabled) { background: $navy-100; }
|
||||
}
|
||||
|
||||
.danger {
|
||||
background: #fff;
|
||||
color: $red-500;
|
||||
border-color: $gray-300;
|
||||
&:hover:not(:disabled) { border-color: $red-500; background: $red-50; }
|
||||
}
|
||||
|
||||
.sm {
|
||||
padding: 7px 14px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: $r-sm;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
color: $gray-400;
|
||||
transition: .18s;
|
||||
|
||||
&:hover:not(:disabled) { color: $navy-800; background: $navy-50; border-color: $gray-200; }
|
||||
&.danger:hover:not(:disabled) { color: $red-500; background: $red-50; }
|
||||
&:disabled { opacity: .4; cursor: not-allowed; }
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import * as React from 'react';
|
||||
import styles from './Button.module.scss';
|
||||
import { Icon, IconName } from './Icon';
|
||||
|
||||
export type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'ghost' | 'danger';
|
||||
|
||||
export interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: ButtonVariant;
|
||||
size?: 'md' | 'sm';
|
||||
icon?: IconName;
|
||||
}
|
||||
|
||||
export const Button: React.FC<IButtonProps> = ({
|
||||
variant = 'secondary',
|
||||
size = 'md',
|
||||
icon,
|
||||
className,
|
||||
children,
|
||||
...rest
|
||||
}) => {
|
||||
const classes = [styles.btn, styles[variant], size === 'sm' ? styles.sm : '', className]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<button type="button" className={classes} {...rest}>
|
||||
{icon && <Icon name={icon} size="sm" />}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export interface IIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
icon: IconName;
|
||||
danger?: boolean;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const IconButton: React.FC<IIconButtonProps> = ({ icon, danger, label, className, ...rest }) => {
|
||||
const classes = [styles.iconButton, danger ? styles.danger : '', className].filter(Boolean).join(' ');
|
||||
return (
|
||||
<button type="button" className={classes} aria-label={label} title={label} {...rest}>
|
||||
<Icon name={icon} size="sm" />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,94 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.navCard {
|
||||
background: #fff;
|
||||
border-radius: $r-md;
|
||||
padding: 22px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
box-shadow: $sh-1;
|
||||
cursor: pointer;
|
||||
@include card-hover-gold;
|
||||
border: 1px solid $gray-200;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0; bottom: 0;
|
||||
width: 3px;
|
||||
background: $grad-gold-v;
|
||||
opacity: 0;
|
||||
transition: .22s;
|
||||
}
|
||||
&:hover::before { opacity: 1; }
|
||||
}
|
||||
|
||||
.navIcon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: $r-md;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: $navy-50;
|
||||
color: $navy-700;
|
||||
border: 1px solid $navy-100;
|
||||
transition: .22s;
|
||||
|
||||
.navCard:hover & { background: $gold-50; color: $gold-600; border-color: $gold-300; }
|
||||
}
|
||||
|
||||
.navTitle { font-size: 14.5px; font-weight: 600; color: $navy-900; letter-spacing: .1px; }
|
||||
.navDesc { font-size: 12px; color: $gray-400; margin-top: 2px; }
|
||||
|
||||
.navArrow {
|
||||
color: $gray-300;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
transition: .22s;
|
||||
.navCard:hover & { color: $gold-500; transform: translateX(3px); }
|
||||
}
|
||||
|
||||
.statRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
background: #fff;
|
||||
border-radius: $r-md;
|
||||
padding: 18px 20px;
|
||||
box-shadow: $sh-1;
|
||||
border: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
color: $gray-400;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-family: $font-serif;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: $navy-900;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import * as React from 'react';
|
||||
import styles from './Card.module.scss';
|
||||
import { Icon, IconName } from './Icon';
|
||||
|
||||
export const CardGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<div className={styles.grid}>{children}</div>
|
||||
);
|
||||
|
||||
export interface INavCardProps {
|
||||
icon: IconName;
|
||||
title: string;
|
||||
description: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export const NavCard: React.FC<INavCardProps> = ({ icon, title, description, onClick }) => (
|
||||
<a className={styles.navCard} onClick={e => { e.preventDefault(); onClick(); }} href="#">
|
||||
<div className={styles.navIcon}><Icon name={icon} /></div>
|
||||
<div>
|
||||
<div className={styles.navTitle}>{title}</div>
|
||||
<div className={styles.navDesc}>{description}</div>
|
||||
</div>
|
||||
<div className={styles.navArrow}><Icon name="chevron-right" size="sm" /></div>
|
||||
</a>
|
||||
);
|
||||
|
||||
export const StatRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<div className={styles.statRow}>{children}</div>
|
||||
);
|
||||
|
||||
export const StatCard: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
|
||||
<div className={styles.statCard}>
|
||||
<div className={styles.statLabel}>{label}</div>
|
||||
<div className={styles.statValue}>{value}</div>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,61 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.wrap {
|
||||
background: #fff;
|
||||
border-radius: $r-lg;
|
||||
box-shadow: $sh-1;
|
||||
overflow: hidden;
|
||||
border: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
text-align: left;
|
||||
padding: 13px 18px;
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
color: $gray-400;
|
||||
font-weight: 600;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table tbody td {
|
||||
padding: 15px 18px;
|
||||
border-bottom: 1px solid $gray-100;
|
||||
color: $gray-700;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child td { border-bottom: 0; }
|
||||
.table tbody tr { transition: .12s; }
|
||||
.table tbody tr:hover { background: $gold-50; }
|
||||
|
||||
.primaryCell {
|
||||
font-weight: 500;
|
||||
color: $navy-900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.actionsCell {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 48px 20px;
|
||||
text-align: center;
|
||||
color: $gray-400;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import * as React from 'react';
|
||||
import styles from './DataTable.module.scss';
|
||||
|
||||
export interface IColumn<T> {
|
||||
key: string;
|
||||
header: string;
|
||||
render: (row: T) => React.ReactNode;
|
||||
align?: 'left' | 'right' | 'center';
|
||||
width?: string;
|
||||
}
|
||||
|
||||
export interface IDataTableProps<T> {
|
||||
columns: IColumn<T>[];
|
||||
rows: T[];
|
||||
keyOf: (row: T) => string | number;
|
||||
emptyMessage: string;
|
||||
}
|
||||
|
||||
export function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableProps<T>): React.ReactElement {
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
{columns.map(col => (
|
||||
<th key={col.key} style={{ width: col.width, textAlign: col.align ?? 'left' }}>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map(row => (
|
||||
<tr key={keyOf(row)}>
|
||||
{columns.map(col => (
|
||||
<td key={col.key} style={{ textAlign: col.align ?? 'left' }}>
|
||||
{col.render(row)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{rows.length === 0 && <div className={styles.empty}>{emptyMessage}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const PrimaryCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<span className={styles.primaryCell}>{children}</span>
|
||||
);
|
||||
|
||||
export const ActionsCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<span className={styles.actionsCell}>{children}</span>
|
||||
);
|
||||
@@ -0,0 +1,101 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px 22px;
|
||||
}
|
||||
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.full { grid-column: 1 / -1; }
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: $gray-700;
|
||||
letter-spacing: .2px;
|
||||
}
|
||||
|
||||
.req { color: $gold-600; }
|
||||
|
||||
.input,
|
||||
.select,
|
||||
.textarea {
|
||||
padding: 11px 13px;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: $r-sm;
|
||||
font-size: 13.5px;
|
||||
font-family: $font-sans;
|
||||
color: $gray-900;
|
||||
transition: .18s;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
|
||||
@include input-focus-gold;
|
||||
|
||||
&::placeholder { color: $gray-400; }
|
||||
&:disabled { background: $gray-50; color: $gray-400; cursor: not-allowed; }
|
||||
}
|
||||
|
||||
.textarea { resize: vertical; min-height: 80px; }
|
||||
|
||||
.select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.errorText {
|
||||
font-size: 11.5px;
|
||||
color: $red-500;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 11.5px;
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
.checkboxRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-size: 13px;
|
||||
color: $gray-700;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
accent-color: $gold-500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.radioRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-size: 13px;
|
||||
color: $gray-700;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&.disabled { opacity: .45; cursor: not-allowed; }
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: $gold-500;
|
||||
cursor: pointer;
|
||||
&:disabled { cursor: not-allowed; }
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import * as React from 'react';
|
||||
import styles from './FormField.module.scss';
|
||||
|
||||
export const FormGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||||
<div className={styles.grid}>{children}</div>
|
||||
);
|
||||
|
||||
export interface IFieldProps {
|
||||
label: string;
|
||||
required?: boolean;
|
||||
full?: boolean;
|
||||
error?: string;
|
||||
hint?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Field: React.FC<IFieldProps> = ({ label, required, full, error, hint, children }) => (
|
||||
<div className={`${styles.field} ${full ? styles.full : ''}`}>
|
||||
<span className={styles.label}>
|
||||
{label} {required && <span className={styles.req}>*</span>}
|
||||
</span>
|
||||
{children}
|
||||
{error && <span className={styles.errorText}>{error}</span>}
|
||||
{!error && hint && <span className={styles.hint}>{hint}</span>}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const TextInput: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = props => (
|
||||
<input {...props} className={styles.input} />
|
||||
);
|
||||
|
||||
export const Textarea: React.FC<React.TextareaHTMLAttributes<HTMLTextAreaElement>> = props => (
|
||||
<textarea {...props} className={styles.textarea} />
|
||||
);
|
||||
|
||||
export interface ISelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface ISelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
|
||||
options: ISelectOption[];
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export const Select: React.FC<ISelectProps> = ({ options, placeholder, ...rest }) => (
|
||||
<select {...rest} className={styles.select}>
|
||||
{placeholder && <option value="">{placeholder}</option>}
|
||||
{options.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
|
||||
export interface ICheckboxProps {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export const Checkbox: React.FC<ICheckboxProps> = ({ label, checked, onChange, disabled }) => (
|
||||
<label className={styles.checkboxRow}>
|
||||
<input
|
||||
type="checkbox"
|
||||
className={styles.checkbox}
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={e => onChange(e.target.checked)}
|
||||
/>
|
||||
{label}
|
||||
</label>
|
||||
);
|
||||
|
||||
export interface IRadioOption<T extends string> {
|
||||
value: T;
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
disabledHint?: string;
|
||||
}
|
||||
|
||||
export interface IRadioGroupProps<T extends string> {
|
||||
name: string;
|
||||
value: T;
|
||||
options: IRadioOption<T>[];
|
||||
onChange: (value: T) => void;
|
||||
}
|
||||
|
||||
export function RadioGroup<T extends string>({ name, value, options, onChange }: IRadioGroupProps<T>): React.ReactElement {
|
||||
return (
|
||||
<div className={styles.radioGroup}>
|
||||
{options.map(opt => (
|
||||
<label
|
||||
key={opt.value}
|
||||
className={`${styles.radioRow} ${opt.disabled ? styles.disabled : ''}`}
|
||||
title={opt.disabled ? opt.disabledHint : undefined}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
className={styles.radio}
|
||||
name={name}
|
||||
checked={value === opt.value}
|
||||
disabled={opt.disabled}
|
||||
onChange={() => onChange(opt.value)}
|
||||
/>
|
||||
{opt.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import * as React from 'react';
|
||||
|
||||
// Единый набор иконок в стиле референса (stroke, round caps, viewBox 24x24).
|
||||
export type IconName =
|
||||
| 'route'
|
||||
| 'clipboard'
|
||||
| 'flag-check'
|
||||
| 'people'
|
||||
| 'warning'
|
||||
| 'check'
|
||||
| 'close'
|
||||
| 'plus'
|
||||
| 'edit'
|
||||
| 'trash'
|
||||
| 'more'
|
||||
| 'chevron-right'
|
||||
| 'chevron-down'
|
||||
| 'chevron-left'
|
||||
| 'arrow-left'
|
||||
| 'search'
|
||||
| 'sort'
|
||||
| 'mail'
|
||||
| 'briefcase'
|
||||
| 'flag'
|
||||
| 'crown'
|
||||
| 'refresh';
|
||||
|
||||
let spriteInjected = false;
|
||||
|
||||
const SPRITE_SVG = `
|
||||
<symbol id="i-route" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="M9 6h7a3 3 0 0 1 3 3v0a3 3 0 0 1-3 3H8a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h7"/></symbol>
|
||||
<symbol id="i-clipboard" viewBox="0 0 24 24"><path d="M9 3h6v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z"/><rect x="5" y="5" width="14" height="16" rx="2"/><path d="M9 12h6M9 16h4"/></symbol>
|
||||
<symbol id="i-flag-check" viewBox="0 0 24 24"><path d="M4 3v18"/><path d="M4 4h13l-2 4 2 4H4"/></symbol>
|
||||
<symbol id="i-people" viewBox="0 0 24 24"><circle cx="9" cy="7" r="3"/><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/><circle cx="17" cy="8" r="2.5"/><path d="M17 13.5a3.5 3.5 0 0 1 3.5 3.5v1"/></symbol>
|
||||
<symbol id="i-warning" viewBox="0 0 24 24"><path d="M12 2 1 21h22z" stroke-linejoin="round"/><path d="M12 9v5M12 17h.01"/></symbol>
|
||||
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12l5 5L20 7"/></symbol>
|
||||
<symbol id="i-close" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></symbol>
|
||||
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
||||
<symbol id="i-edit" viewBox="0 0 24 24"><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></symbol>
|
||||
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M4 7h16M10 11v6M14 11v6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12"/><path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1.5" fill="currentColor" stroke="none"/></symbol>
|
||||
<symbol id="i-chevron-right" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></symbol>
|
||||
<symbol id="i-chevron-down" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-chevron-left" viewBox="0 0 24 24"><path d="m15 6-6 6 6 6"/></symbol>
|
||||
<symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M19 12H5m0 0 5-5m-5 5 5 5"/></symbol>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></symbol>
|
||||
<symbol id="i-sort" viewBox="0 0 24 24"><path d="M7 3v18M7 3l-4 4m4-4 4 4M17 21V3m0 18-4-4m4 4 4-4"/></symbol>
|
||||
<symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 6 8 7 8-7"/></symbol>
|
||||
<symbol id="i-briefcase" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 12h18"/></symbol>
|
||||
<symbol id="i-flag" viewBox="0 0 24 24"><path d="M5 3v18"/><path d="M5 4h13l-3 4 3 4H5"/></symbol>
|
||||
<symbol id="i-crown" viewBox="0 0 24 24"><path d="m3 8 4 3 5-6 5 6 4-3-2 11H5z"/></symbol>
|
||||
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 3v6h-6"/></symbol>
|
||||
`;
|
||||
|
||||
function ensureSpriteInjected(): void {
|
||||
if (spriteInjected || typeof document === 'undefined') return;
|
||||
const holder = document.createElement('div');
|
||||
holder.style.display = 'none';
|
||||
holder.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg">${SPRITE_SVG}</svg>`;
|
||||
document.body.appendChild(holder);
|
||||
spriteInjected = true;
|
||||
}
|
||||
|
||||
export interface IIconProps {
|
||||
name: IconName;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const SIZE_PX: Record<'sm' | 'md' | 'lg', number> = { sm: 16, md: 20, lg: 24 };
|
||||
|
||||
export const Icon: React.FC<IIconProps> = ({ name, size = 'md', className, style }) => {
|
||||
React.useEffect(() => {
|
||||
ensureSpriteInjected();
|
||||
}, []);
|
||||
|
||||
const px = SIZE_PX[size];
|
||||
return (
|
||||
<svg
|
||||
width={px}
|
||||
height={px}
|
||||
className={className}
|
||||
style={{ flexShrink: 0, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round', ...style }}
|
||||
>
|
||||
<use href={`#i-${name}`} />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,60 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(10,27,48,.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 300;
|
||||
backdrop-filter: blur(6px);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #fff;
|
||||
border-radius: $r-lg;
|
||||
box-shadow: $sh-modal;
|
||||
width: 480px;
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - 40px);
|
||||
overflow-y: auto;
|
||||
border-top: 3px solid $gold-500;
|
||||
}
|
||||
|
||||
.narrow { width: 420px; text-align: center; padding: 30px; }
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 22px 26px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: $font-serif;
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
color: $navy-900;
|
||||
}
|
||||
|
||||
.body { padding: 18px 26px 26px; }
|
||||
|
||||
.narrowBody { padding: 0; }
|
||||
|
||||
.text {
|
||||
font-size: 13px;
|
||||
color: $gray-500;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 16px 26px 22px;
|
||||
}
|
||||
|
||||
.narrowFooter { justify-content: center; padding: 0; margin-top: 24px; }
|
||||
@@ -0,0 +1,45 @@
|
||||
import * as React from 'react';
|
||||
import styles from './Modal.module.scss';
|
||||
import { Button, IconButton } from './Button';
|
||||
|
||||
export interface IModalProps {
|
||||
title: string;
|
||||
onClose: () => void;
|
||||
footer?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Modal: React.FC<IModalProps> = ({ title, onClose, footer, children }) => (
|
||||
<div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
|
||||
<div className={styles.box}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<IconButton icon="close" label="Закрыть" onClick={onClose} />
|
||||
</div>
|
||||
<div className={styles.body}>{children}</div>
|
||||
{footer && <div className={styles.footer}>{footer}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export interface IConfirmDialogProps {
|
||||
title: string;
|
||||
text: string;
|
||||
confirmLabel: string;
|
||||
onConfirm: () => void;
|
||||
onCancel: () => void;
|
||||
busy?: boolean;
|
||||
}
|
||||
|
||||
export const ConfirmDialog: React.FC<IConfirmDialogProps> = ({ title, text, confirmLabel, onConfirm, onCancel, busy }) => (
|
||||
<div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel(); }}>
|
||||
<div className={`${styles.box} ${styles.narrow}`}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
<p className={styles.text}>{text}</p>
|
||||
<div className={styles.narrowFooter}>
|
||||
<Button variant="secondary" onClick={onCancel} disabled={busy}>Отмена</Button>
|
||||
<Button variant="danger" icon="trash" onClick={onConfirm} disabled={busy}>{confirmLabel}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,88 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.bread {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 12px;
|
||||
color: $gray-400;
|
||||
margin-bottom: 14px;
|
||||
letter-spacing: .2px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.breadLink {
|
||||
color: $navy-700;
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
&:hover { color: $gold-600; }
|
||||
}
|
||||
|
||||
.sep { color: $gold-400; font-size: 10px; }
|
||||
|
||||
.ph {
|
||||
@include page-header;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: $sh-2;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
top: -60px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(212,160,30,.14), transparent 65%);
|
||||
}
|
||||
}
|
||||
|
||||
.phLeft { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
|
||||
|
||||
.phIcon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: $r-md;
|
||||
background: rgba(212,160,30,.14);
|
||||
border: 1px solid rgba(212,160,30,.3);
|
||||
color: $gold-300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.phSub {
|
||||
font-size: 10.5px;
|
||||
color: rgba(255,255,255,.55);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.phTitle {
|
||||
font-family: $font-serif;
|
||||
font-size: $fs-page-title;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-top: 3px;
|
||||
letter-spacing: .2px;
|
||||
}
|
||||
|
||||
.phRight {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import * as React from 'react';
|
||||
import styles from './PageChrome.module.scss';
|
||||
import { Icon, IconName } from './Icon';
|
||||
|
||||
export interface IBreadcrumbItem {
|
||||
label: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export const Breadcrumbs: React.FC<{ items: IBreadcrumbItem[] }> = ({ items }) => (
|
||||
<div className={styles.bread}>
|
||||
{items.map((item, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && <span className={styles.sep}>◆</span>}
|
||||
{item.onClick ? (
|
||||
<button className={styles.breadLink} onClick={item.onClick}>{item.label}</button>
|
||||
) : (
|
||||
<span>{item.label}</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export interface IPageHeaderProps {
|
||||
icon: IconName;
|
||||
subtitle: string;
|
||||
title: string;
|
||||
actions?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const PageHeader: React.FC<IPageHeaderProps> = ({ icon, subtitle, title, actions }) => (
|
||||
<div className={styles.ph}>
|
||||
<div className={styles.phLeft}>
|
||||
<div className={styles.phIcon}><Icon name={icon} /></div>
|
||||
<div>
|
||||
<div className={styles.phSub}>{subtitle}</div>
|
||||
<div className={styles.phTitle}>{title}</div>
|
||||
</div>
|
||||
</div>
|
||||
{actions && <div className={styles.phRight}>{actions}</div>}
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,9 @@
|
||||
export * from './Icon';
|
||||
export * from './Button';
|
||||
export * from './Badge';
|
||||
export * from './Alert';
|
||||
export * from './PageChrome';
|
||||
export * from './Card';
|
||||
export * from './DataTable';
|
||||
export * from './Modal';
|
||||
export * from './FormField';
|
||||
@@ -0,0 +1,192 @@
|
||||
// Зеркало DTO и enum'ов backend (Tnsu.ApprovalRoute.Api / Application / Domain).
|
||||
// Имена и форма типов должны 1:1 соответствовать C#-стороне — см.
|
||||
// backend/src/Tnsu.ApprovalRoute.Domain/Enums/*.cs и
|
||||
// backend/src/Tnsu.ApprovalRoute.Application/**/*.cs
|
||||
|
||||
export enum RouteType {
|
||||
None = 'None',
|
||||
Parallel = 'Parallel',
|
||||
Sequential = 'Sequential'
|
||||
}
|
||||
|
||||
export enum RouteStepStatus {
|
||||
None = 'None',
|
||||
Approval = 'Approval',
|
||||
Execution = 'Execution'
|
||||
}
|
||||
|
||||
export enum ProjectRole {
|
||||
None = 'None',
|
||||
ProjectManager = 'ProjectManager',
|
||||
Planner = 'Planner',
|
||||
ManagerHSE = 'ManagerHSE',
|
||||
Security = 'Security'
|
||||
}
|
||||
|
||||
export enum HeadType {
|
||||
None = 'None',
|
||||
Chief = 'Chief',
|
||||
DirectionHead = 'DirectionHead',
|
||||
DirectorTansu = 'DirectorTansu'
|
||||
}
|
||||
|
||||
export const routeTypeLabels: Record<RouteType, string> = {
|
||||
[RouteType.None]: 'Не задан',
|
||||
[RouteType.Parallel]: 'Параллельный',
|
||||
[RouteType.Sequential]: 'Последовательный'
|
||||
};
|
||||
|
||||
export const routeStepStatusLabels: Record<RouteStepStatus, string> = {
|
||||
[RouteStepStatus.None]: 'Не задан',
|
||||
[RouteStepStatus.Approval]: 'Согласование',
|
||||
[RouteStepStatus.Execution]: 'Исполнение'
|
||||
};
|
||||
|
||||
export const projectRoleLabels: Record<ProjectRole, string> = {
|
||||
[ProjectRole.None]: '—',
|
||||
[ProjectRole.ProjectManager]: 'Руководитель проекта',
|
||||
[ProjectRole.Planner]: 'Планировщик',
|
||||
[ProjectRole.ManagerHSE]: 'Менеджер HSE',
|
||||
[ProjectRole.Security]: 'Безопасность'
|
||||
};
|
||||
|
||||
export const headTypeLabels: Record<HeadType, string> = {
|
||||
[HeadType.None]: '—',
|
||||
[HeadType.Chief]: 'Непосредственный руководитель',
|
||||
[HeadType.DirectionHead]: 'Руководитель направления',
|
||||
[HeadType.DirectorTansu]: 'Директор Tansu'
|
||||
};
|
||||
|
||||
// ---- Request Types (api/request-types) ----
|
||||
|
||||
export interface RequestType {
|
||||
id: number;
|
||||
name: string;
|
||||
pageUrl: string;
|
||||
}
|
||||
|
||||
export interface CreateRequestTypeInput {
|
||||
name: string;
|
||||
pageUrl: string;
|
||||
}
|
||||
|
||||
export type UpdateRequestTypeInput = CreateRequestTypeInput;
|
||||
|
||||
export interface PatchRequestTypeInput {
|
||||
name?: string;
|
||||
pageUrl?: string;
|
||||
}
|
||||
|
||||
// ---- Template Routes (api/template-routes) ----
|
||||
|
||||
export interface TemplateRoute {
|
||||
id: number;
|
||||
routeType: RouteType;
|
||||
requestTypeId: number;
|
||||
departmentId: string | null;
|
||||
companyId: string;
|
||||
byProject: boolean;
|
||||
requiresControl: boolean;
|
||||
}
|
||||
|
||||
export interface CreateTemplateRouteInput {
|
||||
routeType: RouteType;
|
||||
requestTypeId: number;
|
||||
departmentId: string | null;
|
||||
companyId: string;
|
||||
byProject: boolean;
|
||||
requiresControl: boolean;
|
||||
}
|
||||
|
||||
export interface UpdateTemplateRouteInput {
|
||||
routeType: RouteType;
|
||||
departmentId: string | null;
|
||||
companyId: string;
|
||||
byProject: boolean;
|
||||
requiresControl: boolean;
|
||||
}
|
||||
|
||||
export interface PatchTemplateRouteInput {
|
||||
routeType?: RouteType;
|
||||
departmentId?: string | null;
|
||||
companyId?: string;
|
||||
byProject?: boolean;
|
||||
requiresControl?: boolean;
|
||||
}
|
||||
|
||||
// ---- Template Route Steps (api/template-routes/{routeId}/steps) ----
|
||||
|
||||
export interface TemplateRouteStep {
|
||||
id: number;
|
||||
orderNo: number;
|
||||
executorEmail: string | null;
|
||||
position: string | null;
|
||||
projectRole: ProjectRole | null;
|
||||
headType: HeadType | null;
|
||||
status: RouteStepStatus;
|
||||
routeId: number;
|
||||
allowReassignToOtherApprovers: boolean;
|
||||
warning?: string | null;
|
||||
}
|
||||
|
||||
export interface CreateTemplateRouteStepInput {
|
||||
orderNo: number;
|
||||
executorEmail: string | null;
|
||||
position: string | null;
|
||||
projectRole: ProjectRole | null;
|
||||
headType: HeadType | null;
|
||||
status: RouteStepStatus;
|
||||
allowReassignToOtherApprovers: boolean;
|
||||
}
|
||||
|
||||
export type UpdateTemplateRouteStepInput = CreateTemplateRouteStepInput;
|
||||
|
||||
export interface PatchTemplateRouteStepInput {
|
||||
orderNo?: number;
|
||||
executorEmail?: string | null;
|
||||
position?: string | null;
|
||||
projectRole?: ProjectRole | null;
|
||||
headType?: HeadType | null;
|
||||
status?: RouteStepStatus;
|
||||
allowReassignToOtherApprovers?: boolean;
|
||||
}
|
||||
|
||||
// ---- Resolve (api/template-routes/resolve) ----
|
||||
|
||||
export interface ResolveTemplateRouteQuery {
|
||||
requestTypeId: number;
|
||||
userEmail?: string;
|
||||
projectId?: string;
|
||||
status: RouteStepStatus;
|
||||
}
|
||||
|
||||
export interface ResolvedRouteStep {
|
||||
id: number;
|
||||
orderNo: number;
|
||||
executorEmail: string | null;
|
||||
position: string | null;
|
||||
allowReassignToOtherApprovers: boolean;
|
||||
}
|
||||
|
||||
export interface ResolveTemplateRouteResult {
|
||||
routeId: number;
|
||||
routeType: RouteType;
|
||||
requiresControl: boolean;
|
||||
steps: ResolvedRouteStep[];
|
||||
}
|
||||
|
||||
// Ровно одно из этих полей должно быть заполнено на шаге маршрута
|
||||
// (см. TemplateRouteStepFields.CountFilled на бэкенде).
|
||||
export type StepExecutorKind = 'email' | 'position' | 'projectRole' | 'headType';
|
||||
|
||||
export function detectExecutorKind(step: {
|
||||
executorEmail?: string | null;
|
||||
position?: string | null;
|
||||
projectRole?: ProjectRole | null;
|
||||
headType?: HeadType | null;
|
||||
}): StepExecutorKind {
|
||||
if (step.executorEmail) return 'email';
|
||||
if (step.position) return 'position';
|
||||
if (step.projectRole && step.projectRole !== ProjectRole.None) return 'projectRole';
|
||||
return 'headType';
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import { IHttpClient } from './httpClient';
|
||||
import {
|
||||
CreateRequestTypeInput,
|
||||
CreateTemplateRouteInput,
|
||||
CreateTemplateRouteStepInput,
|
||||
PatchRequestTypeInput,
|
||||
PatchTemplateRouteInput,
|
||||
PatchTemplateRouteStepInput,
|
||||
RequestType,
|
||||
ResolveTemplateRouteQuery,
|
||||
ResolveTemplateRouteResult,
|
||||
TemplateRoute,
|
||||
TemplateRouteStep,
|
||||
UpdateRequestTypeInput,
|
||||
UpdateTemplateRouteInput,
|
||||
UpdateTemplateRouteStepInput
|
||||
} from '../models';
|
||||
|
||||
// Тонкий 1:1 фасад над контроллерами бэкенда:
|
||||
// backend/src/Tnsu.ApprovalRoute.Api/Controllers/{RequestTypes,TemplateRoutes,TemplateRouteSteps}Controller.cs
|
||||
|
||||
export class ApprovalRouteApi {
|
||||
constructor(private readonly http: IHttpClient) {}
|
||||
|
||||
public readonly requestTypes = {
|
||||
list: (): Promise<RequestType[]> =>
|
||||
this.http.get<RequestType[]>('/api/request-types'),
|
||||
|
||||
get: (id: number): Promise<RequestType> =>
|
||||
this.http.get<RequestType>(`/api/request-types/${id}`),
|
||||
|
||||
create: (body: CreateRequestTypeInput): Promise<RequestType> =>
|
||||
this.http.post<RequestType>('/api/request-types', body),
|
||||
|
||||
update: (id: number, body: UpdateRequestTypeInput): Promise<RequestType> =>
|
||||
this.http.put<RequestType>(`/api/request-types/${id}`, body),
|
||||
|
||||
patch: (id: number, body: PatchRequestTypeInput): Promise<RequestType> =>
|
||||
this.http.patch<RequestType>(`/api/request-types/${id}`, body),
|
||||
|
||||
remove: (id: number): Promise<void> =>
|
||||
this.http.delete(`/api/request-types/${id}`)
|
||||
};
|
||||
|
||||
public readonly templateRoutes = {
|
||||
list: (requestTypeId?: number): Promise<TemplateRoute[]> =>
|
||||
this.http.get<TemplateRoute[]>('/api/template-routes', { requestTypeId }),
|
||||
|
||||
get: (id: number): Promise<TemplateRoute> =>
|
||||
this.http.get<TemplateRoute>(`/api/template-routes/${id}`),
|
||||
|
||||
create: (body: CreateTemplateRouteInput): Promise<TemplateRoute> =>
|
||||
this.http.post<TemplateRoute>('/api/template-routes', body),
|
||||
|
||||
update: (id: number, body: UpdateTemplateRouteInput): Promise<TemplateRoute> =>
|
||||
this.http.put<TemplateRoute>(`/api/template-routes/${id}`, body),
|
||||
|
||||
patch: (id: number, body: PatchTemplateRouteInput): Promise<TemplateRoute> =>
|
||||
this.http.patch<TemplateRoute>(`/api/template-routes/${id}`, body),
|
||||
|
||||
remove: (id: number): Promise<void> =>
|
||||
this.http.delete(`/api/template-routes/${id}`),
|
||||
|
||||
resolve: (query: ResolveTemplateRouteQuery): Promise<ResolveTemplateRouteResult> =>
|
||||
this.http.get<ResolveTemplateRouteResult>('/api/template-routes/resolve', { ...query })
|
||||
};
|
||||
|
||||
public readonly templateRouteSteps = {
|
||||
list: (routeId: number): Promise<TemplateRouteStep[]> =>
|
||||
this.http.get<TemplateRouteStep[]>(`/api/template-routes/${routeId}/steps`),
|
||||
|
||||
get: (routeId: number, id: number): Promise<TemplateRouteStep> =>
|
||||
this.http.get<TemplateRouteStep>(`/api/template-routes/${routeId}/steps/${id}`),
|
||||
|
||||
create: (routeId: number, body: CreateTemplateRouteStepInput): Promise<TemplateRouteStep> =>
|
||||
this.http.post<TemplateRouteStep>(`/api/template-routes/${routeId}/steps`, body),
|
||||
|
||||
update: (routeId: number, id: number, body: UpdateTemplateRouteStepInput): Promise<TemplateRouteStep> =>
|
||||
this.http.put<TemplateRouteStep>(`/api/template-routes/${routeId}/steps/${id}`, body),
|
||||
|
||||
patch: (routeId: number, id: number, body: PatchTemplateRouteStepInput): Promise<TemplateRouteStep> =>
|
||||
this.http.patch<TemplateRouteStep>(`/api/template-routes/${routeId}/steps/${id}`, body),
|
||||
|
||||
remove: (routeId: number, id: number): Promise<void> =>
|
||||
this.http.delete(`/api/template-routes/${routeId}/steps/${id}`)
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';
|
||||
|
||||
// Ответ бэкенда всегда в конверте { data: T } на успехе (Api/Common/ApiResponse.cs)
|
||||
// и { messages: string[] } на ошибке (ApiError). 204 No Content возвращается без тела.
|
||||
interface IApiEnvelope<T> {
|
||||
data?: T;
|
||||
messages?: string[];
|
||||
}
|
||||
|
||||
export class ApiClientError extends Error {
|
||||
public readonly status: number;
|
||||
public readonly messages: string[];
|
||||
|
||||
constructor(status: number, messages: string[]) {
|
||||
super(messages.join('; ') || `HTTP ${status}`);
|
||||
this.status = status;
|
||||
this.messages = messages;
|
||||
}
|
||||
}
|
||||
|
||||
export type QueryParams = Record<string, string | number | boolean | undefined | null>;
|
||||
|
||||
export interface IHttpClient {
|
||||
get<T>(path: string, query?: QueryParams): Promise<T>;
|
||||
post<T>(path: string, body?: unknown): Promise<T>;
|
||||
put<T>(path: string, body?: unknown): Promise<T>;
|
||||
patch<T>(path: string, body?: unknown): Promise<T>;
|
||||
delete(path: string): Promise<void>;
|
||||
}
|
||||
|
||||
function buildUrl(baseUrl: string, path: string, query?: QueryParams): string {
|
||||
const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
|
||||
const url = new URL(path.replace(/^\//, ''), normalizedBase);
|
||||
if (query) {
|
||||
Object.keys(query).forEach(key => {
|
||||
const value = query[key];
|
||||
if (value !== undefined && value !== null && value !== '') {
|
||||
url.searchParams.set(key, String(value));
|
||||
}
|
||||
});
|
||||
}
|
||||
return url.toString();
|
||||
}
|
||||
|
||||
interface IMinimalResponse {
|
||||
ok: boolean;
|
||||
status: number;
|
||||
text(): Promise<string>;
|
||||
}
|
||||
|
||||
async function parseResponse<T>(response: IMinimalResponse): Promise<T> {
|
||||
if (response.status === 204) {
|
||||
return undefined as T;
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
let json: IApiEnvelope<T> | undefined;
|
||||
try {
|
||||
json = text ? JSON.parse(text) : undefined;
|
||||
} catch {
|
||||
// Ответ пришёл не в конверте ApiResponse/ApiError (например, "сырая" страница
|
||||
// необработанного исключения ASP.NET Core или ошибка от прокси перед API).
|
||||
if (!response.ok) {
|
||||
throw new ApiClientError(response.status, [text || `HTTP ${response.status}`]);
|
||||
}
|
||||
throw new ApiClientError(response.status, ['Сервер вернул не-JSON ответ.']);
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const messages = json?.messages ?? [`HTTP ${response.status}`];
|
||||
throw new ApiClientError(response.status, messages);
|
||||
}
|
||||
|
||||
return (json?.data as T) ?? (undefined as T);
|
||||
}
|
||||
|
||||
/**
|
||||
* Прод/staging: вызовы через AAD-защищённое SPFx-подключение (AadHttpClient).
|
||||
* Требует webApiPermissionRequests в package-solution.json и админского
|
||||
* согласия в SharePoint admin center → Advanced → API access.
|
||||
*/
|
||||
export class AadApiHttpClient implements IHttpClient {
|
||||
constructor(private readonly client: AadHttpClient, private readonly baseUrl: string) {}
|
||||
|
||||
public get<T>(path: string, query?: QueryParams): Promise<T> {
|
||||
const url = buildUrl(this.baseUrl, path, query);
|
||||
return this.client
|
||||
.get(url, AadHttpClient.configurations.v1)
|
||||
.then((r: HttpClientResponse) => parseResponse<T>(r));
|
||||
}
|
||||
|
||||
public post<T>(path: string, body?: unknown): Promise<T> {
|
||||
return this.send<T>('POST', path, body);
|
||||
}
|
||||
|
||||
public put<T>(path: string, body?: unknown): Promise<T> {
|
||||
return this.send<T>('PUT', path, body);
|
||||
}
|
||||
|
||||
public patch<T>(path: string, body?: unknown): Promise<T> {
|
||||
return this.send<T>('PATCH', path, body);
|
||||
}
|
||||
|
||||
public async delete(path: string): Promise<void> {
|
||||
await this.send<void>('DELETE', path);
|
||||
}
|
||||
|
||||
private send<T>(method: string, path: string, body?: unknown): Promise<T> {
|
||||
const url = buildUrl(this.baseUrl, path);
|
||||
return this.client
|
||||
.fetch(url, AadHttpClient.configurations.v1, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: body !== undefined ? JSON.stringify(body) : undefined
|
||||
})
|
||||
.then((r: HttpClientResponse) => parseResponse<T>(r));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Локальная отладка: обычный fetch с заголовком X-Dev-User-Email.
|
||||
* Работает только если бэкенд поднят с пустыми Entra:TenantId/Entra:Audience
|
||||
* (см. backend/.../Auth/AuthSetup.cs — тогда включается DevAuthHandler).
|
||||
*/
|
||||
export class DevApiHttpClient implements IHttpClient {
|
||||
constructor(private readonly baseUrl: string, private readonly devUserEmail: string) {}
|
||||
|
||||
public get<T>(path: string, query?: QueryParams): Promise<T> {
|
||||
return this.send<T>('GET', path, undefined, query);
|
||||
}
|
||||
|
||||
public post<T>(path: string, body?: unknown): Promise<T> {
|
||||
return this.send<T>('POST', path, body);
|
||||
}
|
||||
|
||||
public put<T>(path: string, body?: unknown): Promise<T> {
|
||||
return this.send<T>('PUT', path, body);
|
||||
}
|
||||
|
||||
public patch<T>(path: string, body?: unknown): Promise<T> {
|
||||
return this.send<T>('PATCH', path, body);
|
||||
}
|
||||
|
||||
public async delete(path: string): Promise<void> {
|
||||
await this.send<void>('DELETE', path);
|
||||
}
|
||||
|
||||
private async send<T>(method: string, path: string, body?: unknown, query?: QueryParams): Promise<T> {
|
||||
const url = buildUrl(this.baseUrl, path, query);
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Dev-User-Email': this.devUserEmail
|
||||
},
|
||||
body: body !== undefined ? JSON.stringify(body) : undefined
|
||||
});
|
||||
return parseResponse<T>(response);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user