каркас вроде есть

2026-07-29 12:30:40 +05:00
parent ad04d9bda4
commit 04f04133f2
114 changed files with 8347 additions and 5143 deletions
@@ -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&#39;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;