Фронтенд для сервиса (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5
2026-07-30 06:11:24 +00:00
parent 5476c1bab5
commit da158cfd84
114 changed files with 26045 additions and 2 deletions
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import styles from './ApprovalAdmin.module.scss';
+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';
+import { texts } from '../texts';
+
+const FONTS_LINK_ID = 'tnsu-approval-admin-fonts';
+
+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 [dictionary, setDictionary] = React.useState<PortalDictionaryClient | 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]);
+
+  // Справочники всегда идут через 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 && (
+        <div className={styles.stateBox}>
+          {texts.app.connectFailed(error)}
+          <br />
+          {texts.app.connectHint}
+        </div>
+      )}
+      {!error && !api && <div className={styles.stateBox}>{texts.app.connecting}</div>}
+      {api && (
+        <AdminApp
+          api={api}
+          dictionary={dictionary}
+          currentUserEmail={props.context.pageContext.user.email}
+        />
+      )}
+    </section>
+  );
+};
+
+export default ApprovalAdmin;