Merge branch 'fix/v1.2.1-version-display-search' into 'main'
fix(admin-ui): version display + global search submit See merge request 2-6/2-6-4/terravault/ordinis!39
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "ordinis-admin-ui",
|
"name": "ordinis-admin-ui",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.1.0",
|
"version": "1.2.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { AuthBadge } from '@/auth/AuthBadge'
|
|||||||
import { ThemeSwitch } from '@/components/layout/ThemeSwitch'
|
import { ThemeSwitch } from '@/components/layout/ThemeSwitch'
|
||||||
import { VersionBadge } from '@/components/version/VersionBadge'
|
import { VersionBadge } from '@/components/version/VersionBadge'
|
||||||
import { SearchInput } from '@/ui/components/search-input'
|
import { SearchInput } from '@/ui/components/search-input'
|
||||||
import { useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* TopBar — sticky header (h=56) per handoff design.
|
* TopBar — sticky header (h=56) per handoff design.
|
||||||
@@ -13,9 +13,8 @@ import { useState } from 'react'
|
|||||||
* Structure:
|
* Structure:
|
||||||
* - Left: dynamic breadcrumb based on current route
|
* - Left: dynamic breadcrumb based on current route
|
||||||
* - Center: global SearchInput → submits → navigates to /search?q=
|
* - Center: global SearchInput → submits → navigates to /search?q=
|
||||||
|
* + ⌘K / Ctrl+K shortcut focuses input from anywhere
|
||||||
* - Right: VersionBadge · ThemeSwitch · LanguageSwitch · Docs · AuthBadge
|
* - Right: VersionBadge · ThemeSwitch · LanguageSwitch · Docs · AuthBadge
|
||||||
*
|
|
||||||
* Mobile (lg:): на узких экранах sidebar скрывается, breadcrumb sustaiable.
|
|
||||||
*/
|
*/
|
||||||
const LANG_OPTIONS = [
|
const LANG_OPTIONS = [
|
||||||
{ id: 'ru-RU', label: 'RU' },
|
{ id: 'ru-RU', label: 'RU' },
|
||||||
@@ -26,15 +25,36 @@ export function TopBar() {
|
|||||||
const { t, i18n } = useTranslation()
|
const { t, i18n } = useTranslation()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [searchValue, setSearchValue] = useState('')
|
const [searchValue, setSearchValue] = useState('')
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
const breadcrumb = useBreadcrumb()
|
const breadcrumb = useBreadcrumb()
|
||||||
|
|
||||||
|
// ⌘K / Ctrl+K shortcut — focus search input from anywhere. Skip когда
|
||||||
|
// активен другой input/textarea (юзер печатает в record edit form).
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = (e: KeyboardEvent) => {
|
||||||
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
|
||||||
|
const target = e.target as HTMLElement
|
||||||
|
if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {
|
||||||
|
// Уже в input — пусть default browser shortcut работает.
|
||||||
|
if (target === inputRef.current) return
|
||||||
|
}
|
||||||
|
e.preventDefault()
|
||||||
|
inputRef.current?.focus()
|
||||||
|
inputRef.current?.select()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('keydown', handler)
|
||||||
|
return () => window.removeEventListener('keydown', handler)
|
||||||
|
}, [])
|
||||||
|
|
||||||
const handleSearchSubmit = (e: React.FormEvent) => {
|
const handleSearchSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
const q = searchValue.trim()
|
const q = searchValue.trim()
|
||||||
if (q.length >= 3) {
|
if (q.length === 0) return
|
||||||
navigate({ to: '/search', search: { q } })
|
// Navigate даже если q < 3 — search route сам покажет "min 3 chars" hint.
|
||||||
}
|
// Раньше блокировал в TopBar → юзер думал «поиск не работает».
|
||||||
|
void navigate({ to: '/search', search: { q } })
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -66,6 +86,7 @@ export function TopBar() {
|
|||||||
{/* Search — center, max-width per handoff */}
|
{/* Search — center, max-width per handoff */}
|
||||||
<form onSubmit={handleSearchSubmit} className="hidden md:block ml-auto w-full max-w-[280px]">
|
<form onSubmit={handleSearchSubmit} className="hidden md:block ml-auto w-full max-w-[280px]">
|
||||||
<SearchInput
|
<SearchInput
|
||||||
|
ref={inputRef}
|
||||||
placeholder={t('topbar.search.placeholder')}
|
placeholder={t('topbar.search.placeholder')}
|
||||||
value={searchValue}
|
value={searchValue}
|
||||||
onChange={(e) => setSearchValue(e.target.value)}
|
onChange={(e) => setSearchValue(e.target.value)}
|
||||||
@@ -99,8 +120,6 @@ export function TopBar() {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Breadcrumb из current route — простой mapping для типичных страниц.
|
* Breadcrumb из current route — простой mapping для типичных страниц.
|
||||||
* Сложные breadcrumbs (dict name, record bk) — фактически TopBar shows
|
|
||||||
* generic, а более детальный crumb рендерит сам route через PageHeader.
|
|
||||||
*/
|
*/
|
||||||
function useBreadcrumb(): { label: string; to?: string }[] {
|
function useBreadcrumb(): { label: string; to?: string }[] {
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
@@ -131,7 +150,6 @@ function useBreadcrumb(): { label: string; to?: string }[] {
|
|||||||
]
|
]
|
||||||
|
|
||||||
if (segments.length >= 2) {
|
if (segments.length >= 2) {
|
||||||
// Второй сегмент — id / name. Не маппим, оставляем raw.
|
|
||||||
crumbs.push({ label: decodeURIComponent(segments[1]) })
|
crumbs.push({ label: decodeURIComponent(segments[1]) })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -38,9 +38,11 @@ export function VersionBadge() {
|
|||||||
className="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse"
|
className="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<span>v{clientVersion}</span>
|
{/* Prefer server tag (v1.2.0 etc.) над package.json clientVersion (0.1.0).
|
||||||
|
serverTag только при tag build'е — на branch builds показываем clientVersion. */}
|
||||||
|
<span>{serverTag && serverTag !== 'none' ? serverTag : `v${clientVersion}`}</span>
|
||||||
<span className="text-mute/70">·</span>
|
<span className="text-mute/70">·</span>
|
||||||
<span>{clientCommit.substring(0, 7)}</span>
|
<span>{(serverCommit || clientCommit).substring(0, 7)}</span>
|
||||||
</span>
|
</span>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user