feat(admin-ui): поиск справочников + счётчик активных записей

Backend:
- DictionaryRecordRepository.countActiveGroupedByDictionary — один GROUP BY
  по всем справочникам с фильтром по scope, без N+1.
- DictionaryResponse.recordCount (nullable) + factory from(d, count).
- DictionaryDefinitionController передаёт счётчики в list/get,
  фильтрованные по currentScopes() пользователя.

Frontend:
- SearchInput над сеткой карточек, client-side filter по
  name/displayName/description (case-insensitive, useDeferredValue).
- Badge "N записей" (i18n plural ru/en) в углу карточки.
- "Показано N из M" рядом с поиском.
- EmptyState когда поиск пустой.
This commit is contained in:
Zimin A.N.
2026-05-06 08:46:45 +03:00
parent b57bc9ef82
commit 171d049fc5
6 changed files with 141 additions and 31 deletions
+1
View File
@@ -35,6 +35,7 @@ export type DictionaryDefinition = {
bundle: string
supportedLocales: string[]
defaultLocale: string
recordCount?: number
createdAt: string
updatedAt: string
}
+12
View File
@@ -61,6 +61,13 @@ i18n
'outbox.dlq.empty': 'DLQ пуста — все события публикуются успешно',
'header.scope': 'Доступный scope',
'dict.list.subtitle': 'Каталоги НСИ ЦУОД ОДХ',
'dict.list.search.placeholder': 'Поиск по названию, коду или описанию',
'dict.list.search.empty': 'Ничего не найдено',
'dict.list.found': 'Показано {{shown}} из {{total}}',
'dict.list.recordCount_one': '{{count}} запись',
'dict.list.recordCount_few': '{{count}} записи',
'dict.list.recordCount_many': '{{count}} записей',
'dict.list.recordCount_other': '{{count}} записей',
'dict.empty': 'В этом справочнике пока нет записей',
'dict.col.businessKey': 'Бизнес-ключ',
'dict.col.scope': 'Scope',
@@ -227,6 +234,11 @@ i18n
'outbox.dlq.empty': 'DLQ empty — all events publish successfully',
'header.scope': 'Allowed scope',
'dict.list.subtitle': 'Reference data catalogues',
'dict.list.search.placeholder': 'Search by name, code or description',
'dict.list.search.empty': 'Nothing found',
'dict.list.found': 'Showing {{shown}} of {{total}}',
'dict.list.recordCount_one': '{{count}} record',
'dict.list.recordCount_other': '{{count}} records',
'dict.empty': 'No records in this dictionary yet',
'dict.col.businessKey': 'Business key',
'dict.col.scope': 'Scope',
@@ -1,20 +1,45 @@
import { useState } from 'react'
import { useDeferredValue, useMemo, useState } from 'react'
import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { Alert, Badge, Button, EmptyState, LoadingBlock, PageHeader } from '@nstart/ui'
import {
Alert,
Badge,
Button,
EmptyState,
LoadingBlock,
PageHeader,
SearchInput,
} from '@nstart/ui'
import { PlusIcon } from '@phosphor-icons/react'
import { useDictionaries } from '@/api/queries'
import type { DictionaryDefinition } from '@/api/client'
import { DictionaryEditorDialog } from '@/components/schema/DictionaryEditorDialog'
export const Route = createFileRoute('/dictionaries/')({
component: DictionariesPage,
})
const matchesQuery = (d: DictionaryDefinition, q: string): boolean => {
if (!q) return true
const haystack = [d.name, d.displayName ?? '', d.description ?? '']
.join(' ')
.toLowerCase()
return haystack.includes(q)
}
function DictionariesPage() {
const { t } = useTranslation()
const navigate = useNavigate()
const { data, isLoading, error } = useDictionaries()
const [createOpen, setCreateOpen] = useState(false)
const [query, setQuery] = useState('')
const deferredQuery = useDeferredValue(query)
const filtered = useMemo(() => {
if (!data) return []
const q = deferredQuery.trim().toLowerCase()
return data.filter((d) => matchesQuery(d, q))
}, [data, deferredQuery])
const createButton = (
<Button
@@ -69,34 +94,59 @@ function DictionariesPage() {
actions={createButton}
/>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{data.map((d) => (
<Link
key={d.id}
to="/dictionaries/$name"
params={{ name: d.name }}
className="block bg-white border border-regolith rounded-lg p-4 transition shadow-card hover:shadow-hover hover:border-ultramarain/40"
>
<div className="flex items-start justify-between mb-2 gap-2">
<h2 className="font-primary text-base text-ultramarain">
{d.displayName ?? d.name}
</h2>
<Badge variant="info">{d.scope}</Badge>
</div>
{d.description && (
<p className="text-sm text-carbon line-clamp-2 mb-3">{d.description}</p>
)}
<div className="flex gap-2 text-2xs uppercase tracking-label text-carbon/60">
<span>v{d.schemaVersion}</span>
<span>·</span>
<span>{d.bundle}</span>
<span>·</span>
<span>{d.supportedLocales.join(', ')}</span>
</div>
</Link>
))}
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="flex-1 max-w-md">
<SearchInput
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder={t('dict.list.search.placeholder')}
aria-label={t('dict.list.search.placeholder')}
/>
</div>
<span className="text-sm text-carbon/70">
{t('dict.list.found', { shown: filtered.length, total: data.length })}
</span>
</div>
{filtered.length === 0 ? (
<EmptyState title={t('dict.list.search.empty')} />
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{filtered.map((d) => (
<Link
key={d.id}
to="/dictionaries/$name"
params={{ name: d.name }}
className="block bg-white border border-regolith rounded-lg p-4 transition shadow-card hover:shadow-hover hover:border-ultramarain/40"
>
<div className="flex items-start justify-between mb-2 gap-2">
<h2 className="font-primary text-base text-ultramarain">
{d.displayName ?? d.name}
</h2>
<Badge variant="info">{d.scope}</Badge>
</div>
{d.description && (
<p className="text-sm text-carbon line-clamp-2 mb-3">{d.description}</p>
)}
<div className="flex items-center justify-between gap-2 text-2xs uppercase tracking-label text-carbon/60">
<div className="flex gap-2 min-w-0">
<span className="truncate">v{d.schemaVersion}</span>
<span>·</span>
<span className="truncate">{d.bundle}</span>
<span>·</span>
<span className="truncate">{d.supportedLocales.join(', ')}</span>
</div>
{typeof d.recordCount === 'number' && (
<Badge variant="neutral">
{t('dict.list.recordCount', { count: d.recordCount })}
</Badge>
)}
</div>
</Link>
))}
</div>
)}
<DictionaryEditorDialog
open={createOpen}
mode={{ kind: 'create' }}