Фронтенд для сервиса #5
@@ -25,7 +25,8 @@
|
||||
"apiBaseUrl": "http://localhost:5080",
|
||||
"useDevAuth": true,
|
||||
"devUserEmail": "dev@tnsu.kz",
|
||||
"aadResourceId": "api://9232d9e2-9807-4753-808f-07250e5474b0"
|
||||
"aadResourceId": "api://9232d9e2-9807-4753-808f-07250e5474b0",
|
||||
"portalBaseUrl": "https://api.tnsu.kz"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@ export interface IApprovalAdminWebPartProps {
|
||||
useDevAuth: boolean;
|
||||
devUserEmail: string;
|
||||
aadResourceId: string;
|
||||
portalBaseUrl: string;
|
||||
}
|
||||
|
||||
export default class ApprovalAdminWebPart extends BaseClientSideWebPart<IApprovalAdminWebPartProps> {
|
||||
@@ -26,7 +27,8 @@ export default class ApprovalAdminWebPart extends BaseClientSideWebPart<IApprova
|
||||
apiBaseUrl: this.properties.apiBaseUrl,
|
||||
useDevAuth: this.properties.useDevAuth,
|
||||
devUserEmail: this.properties.devUserEmail,
|
||||
aadResourceId: this.properties.aadResourceId
|
||||
aadResourceId: this.properties.aadResourceId,
|
||||
portalBaseUrl: this.properties.portalBaseUrl
|
||||
});
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
@@ -37,6 +39,7 @@ export default class ApprovalAdminWebPart extends BaseClientSideWebPart<IApprova
|
||||
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';
|
||||
this.properties.portalBaseUrl = this.properties.portalBaseUrl || 'https://api.tnsu.kz';
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
@@ -74,7 +77,11 @@ export default class ApprovalAdminWebPart extends BaseClientSideWebPart<IApprova
|
||||
}),
|
||||
PropertyPaneTextField('aadResourceId', {
|
||||
label: 'AAD Resource Id (App ID URI)',
|
||||
description: 'Используется только при выключенном Dev-режиме. Должен совпадать с webApiPermissionRequests в package-solution.json.'
|
||||
description: 'Должен совпадать с webApiPermissionRequests в package-solution.json. Этим же токеном берутся справочники api.tnsu.kz.'
|
||||
}),
|
||||
PropertyPaneTextField('portalBaseUrl', {
|
||||
label: 'Портал справочников (api.tnsu.kz)',
|
||||
description: 'Откуда берутся списки компаний и отделов. Ходим напрямую, тем же AAD-токеном.'
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import type { IApprovalAdminProps } from './IApprovalAdminProps';
|
||||
import { AdminApp } from './app/AdminApp';
|
||||
import { ApprovalRouteApi } from '../services/api';
|
||||
import { AadApiHttpClient, DevApiHttpClient, IHttpClient } from '../services/httpClient';
|
||||
import { PortalDictionaryClient } from '../services/portalDictionary';
|
||||
|
||||
const FONTS_LINK_ID = 'tnsu-approval-admin-fonts';
|
||||
|
||||
@@ -26,6 +27,7 @@ async function createHttpClient(props: IApprovalAdminProps): Promise<IHttpClient
|
||||
|
||||
const ApprovalAdmin: React.FC<IApprovalAdminProps> = props => {
|
||||
const [api, setApi] = React.useState<ApprovalRouteApi | undefined>();
|
||||
const [dictionary, setDictionary] = React.useState<PortalDictionaryClient | undefined>();
|
||||
const [error, setError] = React.useState<string | undefined>();
|
||||
|
||||
React.useEffect(() => {
|
||||
@@ -45,6 +47,24 @@ const ApprovalAdmin: React.FC<IApprovalAdminProps> = props => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.useDevAuth, props.apiBaseUrl, props.devUserEmail, props.aadResourceId]);
|
||||
|
||||
// Справочники всегда идут через AAD, независимо от Dev-режима нашего API:
|
||||
// api.tnsu.kz принимает только настоящий токен, заголовок X-Dev-User-Email
|
||||
// ему ничего не говорит.
|
||||
React.useEffect(() => {
|
||||
let cancelled = false;
|
||||
setDictionary(undefined);
|
||||
|
||||
props.context.aadHttpClientFactory
|
||||
.getClient(props.aadResourceId)
|
||||
.then(client => {
|
||||
if (!cancelled) setDictionary(new PortalDictionaryClient(client, props.portalBaseUrl));
|
||||
})
|
||||
.catch(() => { /* экран маршрутов покажет ошибку загрузки справочника */ });
|
||||
|
||||
return () => { cancelled = true; };
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.aadResourceId, props.portalBaseUrl]);
|
||||
|
||||
return (
|
||||
<section className={styles.approvalAdmin}>
|
||||
{error && (
|
||||
@@ -55,7 +75,13 @@ const ApprovalAdmin: React.FC<IApprovalAdminProps> = props => {
|
||||
</div>
|
||||
)}
|
||||
{!error && !api && <div className={styles.stateBox}>Подключение к API...</div>}
|
||||
{api && <AdminApp api={api} currentUserEmail={props.context.pageContext.user.email} />}
|
||||
{api && (
|
||||
<AdminApp
|
||||
api={api}
|
||||
dictionary={dictionary}
|
||||
currentUserEmail={props.context.pageContext.user.email}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,4 +6,5 @@ export interface IApprovalAdminProps {
|
||||
useDevAuth: boolean;
|
||||
devUserEmail: string;
|
||||
aadResourceId: string;
|
||||
portalBaseUrl: string;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import styles from './AdminApp.module.scss';
|
||||
import { TopNav } from './TopNav';
|
||||
import { ScreenKey } from './types';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { PortalDictionaryClient } from '../../services/portalDictionary';
|
||||
import { TemplateRoute } from '../../models';
|
||||
import { DashboardScreen } from '../screens/DashboardScreen';
|
||||
import { RequestTypesScreen } from '../screens/RequestTypesScreen';
|
||||
@@ -12,10 +13,12 @@ import { ResolveScreen } from '../screens/ResolveScreen';
|
||||
|
||||
export interface IAdminAppProps {
|
||||
api: ApprovalRouteApi;
|
||||
/** Undefined, пока SPFx выдаёт AAD-клиент для api.tnsu.kz. */
|
||||
dictionary?: PortalDictionaryClient;
|
||||
currentUserEmail?: string;
|
||||
}
|
||||
|
||||
export const AdminApp: React.FC<IAdminAppProps> = ({ api, currentUserEmail }) => {
|
||||
export const AdminApp: React.FC<IAdminAppProps> = ({ api, dictionary, currentUserEmail }) => {
|
||||
const [screen, setScreen] = React.useState<ScreenKey>('dashboard');
|
||||
const [selectedRoute, setSelectedRoute] = React.useState<TemplateRoute | undefined>();
|
||||
const [selectedRequestTypeName, setSelectedRequestTypeName] = React.useState('');
|
||||
@@ -38,7 +41,7 @@ export const AdminApp: React.FC<IAdminAppProps> = ({ api, currentUserEmail }) =>
|
||||
<div className={styles.content}>
|
||||
{screen === 'dashboard' && <DashboardScreen api={api} onNavigate={navigate} />}
|
||||
{screen === 'requestTypes' && <RequestTypesScreen api={api} />}
|
||||
{screen === 'routes' && <RoutesScreen api={api} onOpenSteps={openSteps} />}
|
||||
{screen === 'routes' && <RoutesScreen api={api} dictionary={dictionary} onOpenSteps={openSteps} />}
|
||||
{screen === 'routeSteps' && selectedRoute && (
|
||||
<RouteStepsScreen
|
||||
api={api}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import { ApprovalRouteApi } from '../../services/api';
|
||||
import { ApiClientError } from '../../services/httpClient';
|
||||
import { RequestType, routeTypeLabels, RouteType, TemplateRoute } from '../../models';
|
||||
import { PortalDictionaryClient } from '../../services/portalDictionary';
|
||||
import { Company, Department, RequestType, routeTypeLabels, RouteType, TemplateRoute } from '../../models';
|
||||
import {
|
||||
ActionsCell,
|
||||
Alert,
|
||||
@@ -17,12 +18,13 @@ import {
|
||||
Modal,
|
||||
PageHeader,
|
||||
PrimaryCell,
|
||||
Select,
|
||||
TextInput
|
||||
SearchableSelect,
|
||||
Select
|
||||
} from '../ui';
|
||||
|
||||
export interface IRoutesScreenProps {
|
||||
api: ApprovalRouteApi;
|
||||
dictionary?: PortalDictionaryClient;
|
||||
onOpenSteps: (route: TemplateRoute) => void;
|
||||
}
|
||||
|
||||
@@ -48,8 +50,12 @@ 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 }) => {
|
||||
export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, dictionary, onOpenSteps }) => {
|
||||
const [requestTypes, setRequestTypes] = React.useState<RequestType[]>([]);
|
||||
const [companies, setCompanies] = React.useState<Company[]>([]);
|
||||
const [departments, setDepartments] = React.useState<Department[]>([]);
|
||||
const [dictLoading, setDictLoading] = React.useState(true);
|
||||
const [dictError, setDictError] = React.useState<string | undefined>();
|
||||
const [items, setItems] = React.useState<TemplateRoute[]>([]);
|
||||
const [filterRequestTypeId, setFilterRequestTypeId] = React.useState<string>('');
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
@@ -69,6 +75,22 @@ export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, onOpenSteps })
|
||||
api.requestTypes.list().then(setRequestTypes).catch(() => { /* показывается в общей ошибке ниже */ });
|
||||
}, [api]);
|
||||
|
||||
// Справочники 1С грузим один раз на экран: они статичны, а отделов ~700 —
|
||||
// поиск делаем на клиенте, без запроса на каждый символ.
|
||||
React.useEffect(() => {
|
||||
if (!dictionary) return;
|
||||
|
||||
setDictLoading(true);
|
||||
setDictError(undefined);
|
||||
Promise.all([dictionary.companies(), dictionary.departments()])
|
||||
.then(([loadedCompanies, loadedDepartments]) => {
|
||||
setCompanies(loadedCompanies);
|
||||
setDepartments(loadedDepartments);
|
||||
})
|
||||
.catch((e: ApiClientError) => setDictError(e.message))
|
||||
.finally(() => setDictLoading(false));
|
||||
}, [dictionary]);
|
||||
|
||||
const load = React.useCallback(() => {
|
||||
setLoading(true);
|
||||
setLoadError(undefined);
|
||||
@@ -84,6 +106,19 @@ export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, onOpenSteps })
|
||||
|
||||
const requestTypeName = (id: number): string => requestTypes.find(rt => rt.id === id)?.name ?? `#${id}`;
|
||||
|
||||
// Пока справочник не загрузился (или маршрут ссылается на удалённую запись),
|
||||
// показываем усечённый Guid — чтобы строка таблицы не выглядела пустой.
|
||||
const companyName = (id: string): string => companies.find(c => c.id === id)?.name ?? shortGuid(id);
|
||||
|
||||
const departmentName = (id: string): string => departments.find(d => d.id === id)?.name ?? shortGuid(id);
|
||||
|
||||
// Отдел принадлежит компании, поэтому список сужаем под выбранную:
|
||||
// иначе пользователь листает ~700 позиций из всех юрлиц сразу.
|
||||
const departmentsForSelectedCompany = React.useMemo(
|
||||
() => (form.companyId ? departments.filter(d => d.companyId === form.companyId) : []),
|
||||
[departments, form.companyId]
|
||||
);
|
||||
|
||||
const openCreate = (): void => {
|
||||
setEditing(undefined);
|
||||
setForm({ ...EMPTY_FORM, requestTypeId: filterRequestTypeId });
|
||||
@@ -180,6 +215,7 @@ export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, onOpenSteps })
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
{dictError && <Alert kind="warn">Справочник компаний и отделов недоступен: {dictError}</Alert>}
|
||||
{loadError && <Alert kind="err">{loadError}</Alert>}
|
||||
{deleteError && <Alert kind="err">{deleteError}</Alert>}
|
||||
|
||||
@@ -195,8 +231,8 @@ export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, onOpenSteps })
|
||||
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: 'company', header: 'Компания', render: r => companyName(r.companyId) },
|
||||
{ key: 'department', header: 'Отдел', render: r => (r.departmentId ? departmentName(r.departmentId) : '—') },
|
||||
{
|
||||
key: 'byProject',
|
||||
header: 'По проекту',
|
||||
@@ -260,18 +296,39 @@ export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, onOpenSteps })
|
||||
onChange={e => setForm({ ...form, routeType: e.target.value as RouteType })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Компания (Guid)" required full hint="Из справочника api.tnsu.kz.">
|
||||
<TextInput
|
||||
<Field label="Компания" required full hint="Справочник 1С (api.tnsu.kz).">
|
||||
<SearchableSelect
|
||||
options={companies.map(c => ({ value: c.id, label: c.name }))}
|
||||
value={form.companyId}
|
||||
onChange={e => setForm({ ...form, companyId: e.target.value })}
|
||||
placeholder="00000000-0000-0000-0000-000000000000"
|
||||
loading={dictLoading}
|
||||
placeholder="Выберите компанию"
|
||||
searchPlaceholder="Поиск по названию компании..."
|
||||
onChange={companyId =>
|
||||
// Смена компании обнуляет отдел: прежний принадлежал другой
|
||||
// компании, и бэкенд не нашёл бы такой маршрут при resolve.
|
||||
setForm({ ...form, companyId, departmentId: '' })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Отдел (Guid)" full hint="Необязательно — маршрут «по умолчанию» для компании.">
|
||||
<TextInput
|
||||
<Field
|
||||
label="Отдел"
|
||||
full
|
||||
hint={
|
||||
form.companyId
|
||||
? 'Необязательно — пусто означает маршрут «по умолчанию» для всей компании.'
|
||||
: 'Сначала выберите компанию.'
|
||||
}
|
||||
>
|
||||
<SearchableSelect
|
||||
options={departmentsForSelectedCompany.map(d => ({ value: d.id, label: d.name }))}
|
||||
value={form.departmentId}
|
||||
onChange={e => setForm({ ...form, departmentId: e.target.value })}
|
||||
placeholder="Оставьте пустым для маршрута по умолчанию"
|
||||
loading={dictLoading}
|
||||
disabled={!form.companyId}
|
||||
allowClear
|
||||
clearLabel="Без отдела (маршрут по умолчанию)"
|
||||
placeholder="Без отдела (маршрут по умолчанию)"
|
||||
searchPlaceholder="Поиск по названию отдела..."
|
||||
onChange={departmentId => setForm({ ...form, departmentId })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="По проекту">
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.root {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 11px 13px;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: $r-sm;
|
||||
background: #fff;
|
||||
font-family: $font-sans;
|
||||
font-size: 13.5px;
|
||||
color: $gray-900;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: .18s;
|
||||
|
||||
@include input-focus-gold;
|
||||
|
||||
&:disabled { background: $gray-50; color: $gray-400; cursor: not-allowed; }
|
||||
&.open { border-color: $gold-500; box-shadow: 0 0 0 3px rgba(212,160,30,.12); }
|
||||
}
|
||||
|
||||
.value {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.placeholder { color: $gray-400; }
|
||||
|
||||
.chevron { color: $gray-400; flex-shrink: 0; }
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border-radius: $r-md;
|
||||
box-shadow: $sh-modal;
|
||||
border: 1px solid $gray-200;
|
||||
padding: 6px;
|
||||
z-index: 400;
|
||||
max-height: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding: 9px 12px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: $font-sans;
|
||||
font-size: 13.5px;
|
||||
outline: 0;
|
||||
margin-bottom: 6px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&::placeholder { color: $gray-400; }
|
||||
}
|
||||
|
||||
.list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 9px 12px;
|
||||
border-radius: $r-sm;
|
||||
cursor: pointer;
|
||||
font-size: 13.5px;
|
||||
color: $gray-700;
|
||||
transition: .1s;
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-family: $font-sans;
|
||||
|
||||
&:hover, &.active { background: $gold-50; color: $navy-900; }
|
||||
&.selected { font-weight: 600; color: $navy-900; }
|
||||
}
|
||||
|
||||
.itemSub {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: $gray-400;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 16px 12px;
|
||||
text-align: center;
|
||||
color: $gray-400;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.clear {
|
||||
margin-top: 6px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid $gray-100;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import * as React from 'react';
|
||||
import styles from './SearchableSelect.module.scss';
|
||||
import { Icon } from './Icon';
|
||||
|
||||
export interface ISearchableOption {
|
||||
value: string;
|
||||
label: string;
|
||||
/** Второстепенная строка под названием — например, компания у отдела. */
|
||||
sublabel?: string;
|
||||
}
|
||||
|
||||
export interface ISearchableSelectProps {
|
||||
options: ISearchableOption[];
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
searchPlaceholder?: string;
|
||||
disabled?: boolean;
|
||||
loading?: boolean;
|
||||
/** Показывать пункт «очистить» — для необязательных полей. */
|
||||
allowClear?: boolean;
|
||||
clearLabel?: string;
|
||||
}
|
||||
|
||||
export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Выберите значение',
|
||||
searchPlaceholder = 'Поиск...',
|
||||
disabled,
|
||||
loading,
|
||||
allowClear,
|
||||
clearLabel = 'Не выбрано'
|
||||
}) => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [query, setQuery] = React.useState('');
|
||||
const rootRef = React.useRef<HTMLDivElement>(null);
|
||||
const searchRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
const selected = options.filter(o => o.value === value)[0];
|
||||
|
||||
// Поиск на клиенте: справочник целиком уже загружен, отделов ~700 —
|
||||
// фильтровать в памяти дешевле, чем ходить на сервер на каждый символ.
|
||||
const filtered = React.useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return options;
|
||||
return options.filter(o =>
|
||||
o.label.toLowerCase().indexOf(q) !== -1 ||
|
||||
(o.sublabel ? o.sublabel.toLowerCase().indexOf(q) !== -1 : false)
|
||||
);
|
||||
}, [options, query]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
const onDocumentMouseDown = (e: MouseEvent): void => {
|
||||
if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
const onKeyDown = (e: KeyboardEvent): void => {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', onDocumentMouseDown);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', onDocumentMouseDown);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (open && searchRef.current) searchRef.current.focus();
|
||||
}, [open]);
|
||||
|
||||
const toggle = (): void => {
|
||||
if (disabled) return;
|
||||
setQuery('');
|
||||
setOpen(!open);
|
||||
};
|
||||
|
||||
const pick = (next: string): void => {
|
||||
onChange(next);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.root} ref={rootRef}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.trigger} ${open ? styles.open : ''}`}
|
||||
onClick={toggle}
|
||||
disabled={disabled || loading}
|
||||
>
|
||||
<span className={`${styles.value} ${selected ? '' : styles.placeholder}`}>
|
||||
{loading ? 'Загрузка справочника...' : (selected ? selected.label : placeholder)}
|
||||
</span>
|
||||
<Icon name="chevron-down" size="sm" className={styles.chevron} />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className={styles.menu}>
|
||||
<input
|
||||
ref={searchRef}
|
||||
className={styles.search}
|
||||
placeholder={searchPlaceholder}
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
/>
|
||||
<div className={styles.list}>
|
||||
{filtered.length === 0 && <div className={styles.empty}>Ничего не найдено</div>}
|
||||
{filtered.map(opt => (
|
||||
<button
|
||||
type="button"
|
||||
key={opt.value}
|
||||
className={`${styles.item} ${opt.value === value ? styles.selected : ''}`}
|
||||
onClick={() => pick(opt.value)}
|
||||
>
|
||||
{opt.label}
|
||||
{opt.sublabel && <span className={styles.itemSub}>{opt.sublabel}</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{allowClear && value && (
|
||||
<div className={styles.clear}>
|
||||
<button type="button" className={styles.item} onClick={() => pick('')}>
|
||||
{clearLabel}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -7,3 +7,4 @@ export * from './Card';
|
||||
export * from './DataTable';
|
||||
export * from './Modal';
|
||||
export * from './FormField';
|
||||
export * from './SearchableSelect';
|
||||
|
||||
@@ -57,6 +57,21 @@ export const headTypeLabels: Record<HeadType, string> = {
|
||||
[HeadType.DirectorTansu]: 'Директор Tansu'
|
||||
};
|
||||
|
||||
// ---- Справочники api.tnsu.kz, проксируемые нашим бэкендом ----
|
||||
// (api/dictionary/companies, api/dictionary/departments)
|
||||
|
||||
export interface Company {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Department {
|
||||
id: string;
|
||||
name: string;
|
||||
companyId: string;
|
||||
company: string;
|
||||
}
|
||||
|
||||
// ---- Request Types (api/request-types) ----
|
||||
|
||||
export interface RequestType {
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';
|
||||
import { Company, Department } from '../models';
|
||||
import { ApiClientError } from './httpClient';
|
||||
|
||||
// Справочники берём напрямую из api.tnsu.kz — тем же AAD-токеном, что и наш API:
|
||||
// в appsettings.json бэкенда Entra:Audience и TnsuPortal:ClientId — один и тот же
|
||||
// GUID, то есть обе службы живут на одной регистрации Entra. Прокси не нужен.
|
||||
//
|
||||
// Два отличия от нашего API, из-за которых здесь отдельный клиент:
|
||||
// 1) портал отдаёт «голый» массив, без конверта { data: ... };
|
||||
// 2) ключи в PascalCase (Id/Name/CompanyId/Company).
|
||||
|
||||
interface IPortalCompany {
|
||||
Id: string;
|
||||
Name: string;
|
||||
}
|
||||
|
||||
interface IPortalDepartment {
|
||||
Id: string;
|
||||
Name: string;
|
||||
CompanyId: string;
|
||||
Company: string;
|
||||
}
|
||||
|
||||
async function getJson<T>(client: AadHttpClient, baseUrl: string, path: string): Promise<T> {
|
||||
const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
|
||||
const url = new URL(path.replace(/^\//, ''), normalizedBase).toString();
|
||||
|
||||
const response: HttpClientResponse = await client.get(url, AadHttpClient.configurations.v1);
|
||||
const text = await response.text();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new ApiClientError(response.status, [
|
||||
`Справочник api.tnsu.kz вернул HTTP ${response.status}${text ? `: ${text}` : ''}`
|
||||
]);
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(text) as T;
|
||||
} catch {
|
||||
throw new ApiClientError(response.status, ['Справочник api.tnsu.kz вернул не-JSON ответ.']);
|
||||
}
|
||||
}
|
||||
|
||||
export class PortalDictionaryClient {
|
||||
constructor(private readonly client: AadHttpClient, private readonly baseUrl: string) {}
|
||||
|
||||
public async companies(): Promise<Company[]> {
|
||||
const raw = await getJson<IPortalCompany[]>(this.client, this.baseUrl, '/Dictionary/Companies');
|
||||
return (raw ?? []).map(x => ({ id: x.Id, name: x.Name }));
|
||||
}
|
||||
|
||||
public async departments(): Promise<Department[]> {
|
||||
const raw = await getJson<IPortalDepartment[]>(this.client, this.baseUrl, '/Dictionary/Departments');
|
||||
return (raw ?? []).map(x => ({
|
||||
id: x.Id,
|
||||
name: x.Name,
|
||||
companyId: x.CompanyId,
|
||||
company: x.Company
|
||||
}));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user