-
+
{t('app.title')}
-
-
-
+
+ i18n.changeLanguage(id)}
+ />
diff --git a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
index 765313d..edcac0b 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
@@ -2,10 +2,28 @@ import { useState } from 'react'
import { createFileRoute, Link } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import axios from 'axios'
+import {
+ Alert,
+ Badge,
+ Button,
+ EmptyState,
+ IconButton,
+ LoadingBlock,
+ Modal,
+ PageHeader,
+ Panel,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeaderCell,
+ TableRow,
+ TextInput,
+} from '@nstart/ui'
+import { PlusIcon, PencilSimpleIcon, XCircleIcon } from '@phosphor-icons/react'
import { useDictionaryDetail, useRecords } from '@/api/queries'
import { useCreateRecord, useUpdateRecord, useCloseRecord } from '@/api/mutations'
import type { CreateRecordRequest, FlattenedRecord } from '@/api/client'
-import { Modal } from '@/components/ui/Modal'
import { SchemaDrivenForm } from '@/components/form/SchemaDrivenForm'
export const Route = createFileRoute('/dictionaries/$name')({
@@ -60,95 +78,106 @@ function DictionaryDetail() {
edit.kind === 'create' ? createMut : edit.kind === 'edit' ? updateMut : null
const serverError = serverErrorMessage(activeMutation?.error)
+ const totalRecords = recordsResult.data?.length ?? 0
+
return (
-
-
-
- ← {t('nav.dictionaries')}
-
-
+
+
+ ← {t('nav.dictionaries')}
+
+ }
+ title={detailQuery.data?.displayName ?? name}
+ description={
+ detailQuery.data?.description
+ ? `${detailQuery.data.description} · ${totalRecords} ${t('dict.list.records')}`
+ : `${totalRecords} ${t('dict.list.records')}`
+ }
+ actions={
+ }
+ disabled={!detailQuery.data}
+ onClick={() => setEdit({ kind: 'create' })}
+ >
+ {t('dict.action.create')}
+
+ }
+ />
-
-
-
- {detailQuery.data?.displayName ?? name}
-
- {detailQuery.data?.description && (
-
{detailQuery.data.description}
- )}
-
- {recordsResult.data?.length ?? 0} {t('dict.list.records')}
-
-
-
-
{t('loading')}
}
- {recordsResult.error && {t('error.failed')}
}
+ {recordsResult.error && (
+
+ {String(recordsResult.error)}
+
+ )}
{recordsResult.data && recordsResult.data.length === 0 && (
- {t('dict.empty')}
+
)}
{recordsResult.data && recordsResult.data.length > 0 && (
-
-
-
-
- | {t('dict.col.businessKey')} |
- name / code |
- {t('dict.col.scope')} |
- {t('dict.col.locale')} |
- {t('dict.col.validFrom')} |
- {t('dict.col.actions')} |
-
-
-
+
+
+
+
+ {t('dict.col.businessKey')}
+ name / code
+ {t('dict.col.scope')}
+ {t('dict.col.locale')}
+ {t('dict.col.validFrom')}
+ {t('dict.col.actions')}
+
+
+
{recordsResult.data.map((r) => (
-
- | {r.businessKey} |
-
+
+
+ {r.businessKey}
+
+
{String(r.data.name ?? r.data.code ?? '—')}
- |
-
- {r.dataScope}
- |
- {r._meta?.locale ?? '—'} |
-
- {new Date(r.validFrom).toLocaleDateString()}
- |
-
-
-
- |
-
+
+
+ {r.dataScope}
+
+
+ {r._meta?.locale ?? '—'}
+
+
+
+ {new Date(r.validFrom).toLocaleDateString()}
+
+
+
+
+
setEdit({ kind: 'edit', record: r })}
+ >
+
+
+
setEdit({ kind: 'close-confirm', record: r })}
+ >
+
+
+
-
+
+
+
)}
setEdit({ kind: 'closed' })}
title={
edit.kind === 'create'
@@ -157,6 +186,7 @@ function DictionaryDetail() {
? `${t('dict.action.edit')}: ${edit.record.businessKey}`
: ''
}
+ maxWidth="max-w-2xl"
>
{detailQuery.data && (edit.kind === 'create' || edit.kind === 'edit') && (
setEdit({ kind: 'closed' })}
+ isOpen={edit.kind === 'close-confirm'}
+ onClose={() => {
+ setEdit({ kind: 'closed' })
+ setCloseReason('')
+ }}
title={t('dict.confirmClose.title')}
- widthClass="max-w-md"
+ maxWidth="max-w-md"
>
{edit.kind === 'close-confirm' && (
-
+
{t('dict.confirmClose.body', { key: edit.record.businessKey })}
-
-
- setCloseReason(e.target.value)}
- className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
- placeholder={t('dict.confirmClose.reasonPlaceholder')}
- />
-
+
setCloseReason(e.target.value)}
+ />
{serverErrorMessage(closeMut.error) && (
-
- {serverErrorMessage(closeMut.error)}
-
+ {serverErrorMessage(closeMut.error)}
)}
-
-
{t('loading')}
- if (error) return {t('error.failed')}: {String(error)}
+ if (isLoading) {
+ return
+ }
+
+ if (error) {
+ return (
+
+ {String(error)}
+
+ )
+ }
+
+ if (!data || data.length === 0) {
+ return
+ }
return (
-
- {(data ?? []).map((d) => (
-
-
-
{d.displayName ?? d.name}
-
- {d.scope}
-
-
-
{d.description}
-
- v{d.schemaVersion}
- ·
- {d.bundle}
- ·
- {d.supportedLocales.join(', ')}
-
-
- ))}
+
+
+
+
+ {data.map((d) => (
+
+
+
+ {d.displayName ?? d.name}
+
+ {d.scope}
+
+ {d.description && (
+
{d.description}
+ )}
+
+ v{d.schemaVersion}
+ ·
+ {d.bundle}
+ ·
+ {d.supportedLocales.join(', ')}
+
+
+ ))}
+
)
}
diff --git a/ordinis-admin-ui/src/styles.css b/ordinis-admin-ui/src/styles.css
index 1aaf448..26685ea 100644
--- a/ordinis-admin-ui/src/styles.css
+++ b/ordinis-admin-ui/src/styles.css
@@ -1,26 +1,12 @@
-@import 'tailwindcss';
+@import "tailwindcss";
+@import "@nstart/ui/styles/fonts.css";
+@import "@nstart/ui/styles/theme.css";
-@theme {
- --color-brand-50: oklch(0.97 0.02 250);
- --color-brand-100: oklch(0.93 0.04 250);
- --color-brand-200: oklch(0.86 0.07 250);
- --color-brand-300: oklch(0.77 0.10 250);
- --color-brand-400: oklch(0.66 0.13 250);
- --color-brand-500: oklch(0.55 0.16 250);
- --color-brand-600: oklch(0.48 0.17 250);
- --color-brand-700: oklch(0.42 0.18 250);
- --color-brand-800: oklch(0.34 0.16 250);
- --color-brand-900: oklch(0.26 0.13 250);
- --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-}
+/* Без @source Tailwind v4 не сгенерирует CSS для классов внутри dist/@nstart/ui */
+@source "../node_modules/@nstart/ui/dist";
html,
body,
#root {
height: 100%;
}
-
-body {
- font-family: var(--font-sans);
- -webkit-font-smoothing: antialiased;
-}