fix(ui): показывать подтверждённые каталоги пользователей

2026-10-01 09:34:51 +07:00
1 parent 0a332ce341
commit 2d5fb3598f
@@ -1,6 +1,6 @@
 "use client"

-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { PageHeader } from "@/components/page-header"
 import { DataPageCard } from "@/components/data-page-card"
 import { UsersDataGrid } from "@/components/data-grids/users-data-grid"
@@ -29,7 +29,9 @@ import {
  type AppUserForm,
  type UserServerOption,
 } from "@/lib/users"
-import { listServers } from "@/shared/api/servers"
+import { serverListSchema } from "@mmapp/contracts/servers"
+import { requestJson } from "@/shared/api/http-client"
+import { can } from "@/lib/auth"
 import {
  createAppUser,
  createUserBinding,
@@ -60,49 +62,78 @@ function toServerOptionsFromMock(): UserServerOption[] {
 }

 export default function UsersPage() {
+  const { mode, backendUrl, prefsHydrated } = useDataSource()
+  if (!prefsHydrated) return <p role="status">Загрузка настроек пользователей…</p>
+  return <UsersContent key={JSON.stringify([mode, backendUrl])} />
+}
+
+function UsersContent() {
  const { mode, backendUrl } = useDataSource()
  const isLive = mode === "live"
+  const canRead = can("mm:users:read")
+  const canWrite = can("mm:users:write")
+  const canReadServers = can("mm:servers:read")

-  const [users, setUsers] = useState<AppUser[]>(INIT_USERS)
-  const [serverOptions, setServerOptions] = useState<UserServerOption[]>(toServerOptionsFromMock)
-  const [loading, setLoading] = useState(false)
+  const [users, setUsers] = useState<AppUser[]>(() => isLive ? [] : INIT_USERS)
+  const [serverOptions, setServerOptions] = useState<UserServerOption[]>(() => isLive ? [] : toServerOptionsFromMock())
+  const [loading, setLoading] = useState(isLive && canRead)
+  const [usersReadAt, setUsersReadAt] = useState<number | null>(null)
+  const [serversReadAt, setServersReadAt] = useState<number | null>(null)
+  const [usersError, setUsersError] = useState<string | null>(null)
+  const [serversError, setServersError] = useState<string | null>(null)
+  const loadController = useRef<AbortController | null>(null)
+  const loadRevision = useRef(0)
  const [saving, setSaving] = useState(false)
  const [sheetOpen, setSheetOpen] = useState(false)
  const [editUser, setEditUser] = useState<AppUser | null>(null)
  const [deleteTarget, setDeleteTarget] = useState<AppUser | null>(null)

  const loadLive = useCallback(async () => {
+    if (!isLive || !canRead) return false
+    loadController.current?.abort()
+    const controller = new AbortController()
+    loadController.current = controller
+    const revision = ++loadRevision.current
+    const current = () => !controller.signal.aborted && revision === loadRevision.current
    setLoading(true)
-    try {
-      const [list, srvs] = await Promise.all([
-        listAppUsers(backendUrl),
-        listServers(backendUrl),
-      ])
-      setUsers(list)
-      setServerOptions(srvs.map((s) => ({
-        id: String(s.id),
-        name: s.name || s.host,
-        host: s.host,
-        site: s.site,
-        country: s.country,
-        status: s.status,
-      })))
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Не удалось загрузить пользователей")
-    } finally {
-      setLoading(false)
-    }
-  }, [backendUrl])
+    const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(30_000)])
+    const [list, srvs] = await Promise.allSettled([
+      listAppUsers(backendUrl, { signal }).then(rows => {
+        if (current()) { setUsers(rows); setUsersReadAt(Date.now()); setUsersError(null) }
+        return rows
+      }).catch(error => {
+        if (current()) setUsersError(error instanceof Error ? error.message : "Не удалось прочитать пользователей.")
+        throw error
+      }),
+      canReadServers ? requestJson<unknown>(backendUrl, "/api/servers", { signal }).then(raw => {
+        const rows = serverListSchema.parse(raw)
+        if (new Set(rows.map(row => row.id)).size !== rows.length || rows.some(row => row.id <= 0)) throw new Error("Некорректный каталог серверов.")
+        if (current()) {
+          setServerOptions(rows.map(s => ({
+            id: String(s.id), name: s.name || s.host, host: s.host, site: s.site, country: s.country, status: s.status,
+          })))
+          setServersReadAt(Date.now()); setServersError(null)
+        }
+        return rows
+      }).catch(error => {
+        if (current()) setServersError(error instanceof Error ? error.message : "Не удалось прочитать серверы.")
+        throw error
+      }) : Promise.resolve(null),
+    ])
+    if (!current()) return false
+    setLoading(false)
+    return list.status === "fulfilled" && srvs.status === "fulfilled"
+  }, [isLive, canRead, canReadServers, backendUrl])

  useEffect(() => {
-    if (!isLive) {
-      setUsers(INIT_USERS)
-      setServerOptions(toServerOptionsFromMock())
-      return
-    }
-    void loadLive()
-  }, [isLive, loadLive])
+    let cancelled = false
+    if (isLive && canRead) queueMicrotask(() => { if (!cancelled) void loadLive() })
+    return () => { cancelled = true; loadController.current?.abort() }
+  }, [isLive, canRead, loadLive])

+  const usersKnown = !isLive || usersReadAt !== null
+  const serversKnown = !isLive || serversReadAt !== null
+  const writeReady = canWrite && (!isLive || (usersKnown && serversKnown && !loading && !usersError && !serversError))
  const boundCount = users.reduce((n, u) => n + u.bindings.length, 0)
  const activeCount = users.filter((u) => u.active).length

@@ -129,6 +160,7 @@ export default function UsersPage() {
  }

  const handleSave = async (form: AppUserForm) => {
+    if (!writeReady || saving) return
    if (!isLive) {
      if (!editUser) {
        const id = `u${Date.now()}`
@@ -188,7 +220,7 @@ export default function UsersPage() {
  }

  const handleDelete = async () => {
-    if (!deleteTarget) return
+    if (!deleteTarget || !writeReady) return
    if (!isLive) {
      setUsers((prev) => prev.filter((u) => u.id !== deleteTarget.id))
      setDeleteTarget(null)
@@ -210,13 +242,24 @@ export default function UsersPage() {
      <PageHeader
        crumbs={[{ label: "Управление" }, { label: "Пользователи" }]}
        actions={
-          <Button size="sm" onClick={() => { setEditUser(null); setSheetOpen(true) }}>
-            <PlusIcon className="size-4" />Пригласить
+          <>
+          {isLive && <Button type="button" size="sm" variant="outline" disabled={!canRead || loading || saving || sheetOpen} onClick={() => void loadLive()}>Обновить пользователей</Button>}
+          <Button type="button" size="sm" disabled={!writeReady} onClick={() => { setEditUser(null); setSheetOpen(true) }}>
+            <PlusIcon className="size-4" />Добавить пользователя
          </Button>
+          </>
        }
      />

      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-5">
+        {!isLive && <p role="status" className="text-sm text-muted-foreground">Демо: изменения сохраняются только в текущем экране.</p>}
+        {!canRead && <p role="status">Для чтения пользователей требуется mm:users:read.</p>}
+        {!canWrite && <p role="status">Для изменения пользователей требуется mm:users:write.</p>}
+        {isLive && !canReadServers && <p role="status">Каталог серверов недоступен: требуется mm:servers:read. Изменения приостановлены.</p>}
+        {usersError && <div role="alert" aria-label="Пользователи" className="rounded-lg border border-destructive/30 p-3 text-sm"><p>{usersKnown ? "Не удалось обновить пользователей. Последний список сохранён." : "Пользователи пока неизвестны."}</p><p>{usersError}</p></div>}
+        {serversError && <div role="alert" aria-label="Серверы пользователей" className="rounded-lg border border-destructive/30 p-3 text-sm"><p>{serversKnown ? "Не удалось обновить серверы. Последний каталог сохранён." : "Каталог серверов пока неизвестен."} Изменения приостановлены.</p><p>{serversError}</p></div>}
+        {isLive && usersReadAt !== null && <p role="status" className="text-xs text-muted-foreground">Пользователи получены: {new Date(usersReadAt).toLocaleTimeString("ru-RU")}{loading ? " · обновляются" : ""}</p>}
+        {isLive && loading && !usersKnown && <p role="status">Загрузка пользователей…</p>}
        {/* Preview: https://reui.io/preview/base/stats-12 · https://reui.io/docs/components/base/icon-tile */}
        <KpiStatGrid
          aria-label="Сводка пользователей"
@@ -224,21 +267,21 @@ export default function UsersPage() {
            {
              id: "all",
              label: "Пользователи",
-              value: users.length,
+              value: usersKnown ? users.length : "—",
              icon: <UsersIcon className="size-4" />,
              iconClassName: "text-muted-foreground",
            },
            {
              id: "active",
              label: "Активные",
-              value: activeCount,
+              value: usersKnown ? activeCount : "—",
              icon: <UserCheckIcon className="size-4" />,
              iconClassName: "text-success",
            },
            {
              id: "ifaces",
-              label: "Привязанные ifaces",
-              value: boundCount,
+              label: "Привязанные интерфейсы",
+              value: usersKnown ? boundCount : "—",
              icon: <CableIcon className="size-4" />,
              iconClassName: "text-info",
            },
@@ -246,16 +289,17 @@ export default function UsersPage() {
        />

        {/* Preview: https://reui.io/preview/base/data-grid-filtering-2 · https://reui.io/docs/components/base/data-grid · https://reui.io/docs/components/base/frame */}
-        <DataPageCard>
+        {canRead && (usersKnown || loading) && <DataPageCard>
          <UsersDataGrid
            users={users}
-            serversCount={serverOptions.length}
+            serversCount={serversKnown ? serverOptions.length : null}
            allSectionsCount={ALL_SECTIONS.length}
-            isLoading={loading}
+            isLoading={loading && !usersKnown}
+            actionsDisabled={!writeReady || saving}
            onEdit={(u) => { setEditUser(u); setSheetOpen(true) }}
            onDelete={setDeleteTarget}
          />
-        </DataPageCard>
+        </DataPageCard>}
      </div>

      <UserSheet