Фронтенд для сервиса (#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,164 @@
+import * as React from 'react';
+import { RouteStepFormModal } from './RouteStepFormModal';
+import { ApprovalRouteApi } from '../../services/api';
+import { PortalDictionaryClient } from '../../services/portalDictionary';
+import { RouteStepStatus, TemplateRoute, TemplateRouteStep } from '../../models';
+import { routeStepStatusLabels, routeTypeLabels, texts } from '../../texts';
+import { describeStepExecutor } from '../../utils/stepExecutor';
+import { useRouteSteps } from '../../hooks/useRouteSteps';
+import { useDeleteTarget } from '../../hooks/useDeleteTarget';
+import { usePortalEmployees } from '../../hooks/usePortalEmployees';
+import {
+  ActionsCell,
+  Alert,
+  Badge,
+  Breadcrumbs,
+  Button,
+  CellNote,
+  ConfirmDialog,
+  DataTable,
+  IconButton,
+  PageHeader,
+  PrimaryCell
+} from '../ui';
+
+export interface IRouteStepsScreenProps {
+  api: ApprovalRouteApi;
+  route: TemplateRoute;
+  requestTypeName: string;
+  /** Undefined, пока SPFx выдаёт AAD-клиент для api.tnsu.kz. */
+  dictionary?: PortalDictionaryClient;
+  onBack: () => void;
+}
+
+export const RouteStepsScreen: React.FC<IRouteStepsScreenProps> = ({ api, route, requestTypeName, dictionary, onBack }) => {
+  const steps = useRouteSteps(api, route.id);
+  const employees = usePortalEmployees(dictionary);
+  const [savedWarning, setSavedWarning] = React.useState<string | undefined>();
+
+  const [editing, setEditing] = React.useState<TemplateRouteStep | undefined>();
+  const [showForm, setShowForm] = React.useState(false);
+
+  const deleteTarget = useDeleteTarget<TemplateRouteStep>(
+    item => api.templateRouteSteps.remove(route.id, item.id),
+    steps.reload
+  );
+
+  const openCreate = (): void => {
+    setEditing(undefined);
+    setShowForm(true);
+  };
+
+  const openEdit = (item: TemplateRouteStep): void => {
+    setEditing(item);
+    setShowForm(true);
+  };
+
+  const handleSaved = (savedStep: TemplateRouteStep): void => {
+    setSavedWarning(savedStep.warning ?? undefined);
+    steps.reload();
+  };
+
+  const nextOrderNo = steps.items.length > 0 ? Math.max(...steps.items.map(s => s.orderNo)) + 1 : 1;
+
+  return (
+    <div>
+      <Breadcrumbs
+        items={[
+          { label: texts.common.home },
+          { label: texts.routes.breadcrumb, onClick: onBack },
+          { label: texts.routeSteps.breadcrumb(route.id) }
+        ]}
+      />
+      <PageHeader
+        icon="flag-check"
+        subtitle={texts.routeSteps.subtitle(requestTypeName, routeTypeLabels[route.routeType])}
+        title={texts.routeSteps.title(route.id)}
+        actions={
+          <>
+            <Button variant="ghost" icon="arrow-left" onClick={onBack}>{texts.routeSteps.back}</Button>
+            <Button variant="accent" icon="plus" onClick={openCreate}>{texts.routeSteps.add}</Button>
+          </>
+        }
+      />
+
+      {savedWarning && <Alert kind="warn">{savedWarning}</Alert>}
+      {steps.error && <Alert kind="err">{steps.error}</Alert>}
+      {deleteTarget.error && <Alert kind="err">{deleteTarget.error}</Alert>}
+
+      <DataTable
+        columns={[
+          { key: 'order', header: texts.routeSteps.columnOrderNo, width: '50px', render: r => r.orderNo },
+          {
+            key: 'executor',
+            header: texts.routeSteps.columnExecutor,
+            render: r => {
+              const executor = describeStepExecutor(r, employees.items);
+              return (
+                <div>
+                  <PrimaryCell>{executor.primary}</PrimaryCell>
+                  {executor.secondary && <CellNote>{executor.secondary}</CellNote>}
+                </div>
+              );
+            }
+          },
+          {
+            key: 'status',
+            header: texts.routeSteps.columnStatus,
+            render: r => (
+              <Badge variant={r.status === RouteStepStatus.Approval ? 'gold' : 'blue'}>
+                {routeStepStatusLabels[r.status]}
+              </Badge>
+            )
+          },
+          {
+            key: 'reassign',
+            header: texts.routeSteps.columnReassign,
+            align: 'center',
+            render: r => (r.allowReassignToOtherApprovers ? <Badge variant="ok">{texts.routeSteps.reassignAllowed}</Badge> : <Badge variant="neutral">{texts.common.no}</Badge>)
+          },
+          {
+            key: 'actions',
+            header: '',
+            width: '100px',
+            align: 'right',
+            sticky: true,
+            render: r => (
+              <ActionsCell>
+                <IconButton icon="edit" label={texts.common.edit} onClick={() => openEdit(r)} />
+                <IconButton icon="trash" label={texts.common.remove} danger onClick={() => deleteTarget.ask(r)} />
+              </ActionsCell>
+            )
+          }
+        ]}
+        rows={steps.items}
+        keyOf={r => r.id}
+        emptyMessage={steps.isLoading ? texts.common.loading : texts.routeSteps.emptyList}
+      />
+
+      {showForm && (
+        <RouteStepFormModal
+          api={api}
+          route={route}
+          editing={editing}
+          nextOrderNo={nextOrderNo}
+          employees={employees.items}
+          employeesLoading={employees.isLoading}
+          onSaved={handleSaved}
+          onClose={() => setShowForm(false)}
+        />
+      )}
+
+      {deleteTarget.target && (
+        <ConfirmDialog
+          title={texts.routeSteps.deleteTitle}
+          text={texts.routeSteps.deleteText(deleteTarget.target.orderNo)}
+          confirmLabel={texts.common.remove}
+          busy={deleteTarget.isBusy}
+          onCancel={deleteTarget.cancel}
+          onConfirm={deleteTarget.confirm}
+        />
+      )}
+    </div>
+  );
+};