Enhance collection and group suggestions to manage existing items visibility
Updated the CollectionSuggestions and GroupSuggestions components to include a toggle for displaying already created suggestions. Introduced new state management for handling visibility of existing items, along with localization updates for relevant UI strings in both English and Russian. This improves user experience by allowing admins to see both new and existing suggestions clearly.
This commit is contained in:
@@ -13,12 +13,16 @@ import { createCollectionFromSuggestion, suggestCollections } from './api'
|
||||
/**
|
||||
* Что стоит собрать во франшизу. Состав виден целиком до создания — по названиям иногда
|
||||
* промахивается, и проверить глазами должно быть проще, чем разбирать потом.
|
||||
*
|
||||
* Уже созданное по умолчанию скрыто: строка без кнопки — шум. Счётчик скрытого остаётся видимым,
|
||||
* чтобы предложение не выглядело пропавшим бесследно.
|
||||
*/
|
||||
export function CollectionSuggestions() {
|
||||
const { t } = useTranslation()
|
||||
const queryClient = useQueryClient()
|
||||
const onError = useApiError()
|
||||
const [collapsed, setCollapsed] = useState(false)
|
||||
const [showExisting, setShowExisting] = useState(false)
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: qk.collections.suggestions,
|
||||
@@ -38,6 +42,10 @@ export function CollectionSuggestions() {
|
||||
|
||||
if (isLoading || !data || data.length === 0) return null
|
||||
|
||||
const fresh = data.filter((s) => !s.alreadyExists)
|
||||
const existing = data.length - fresh.length
|
||||
const visible = showExisting ? data : fresh
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
@@ -48,14 +56,23 @@ export function CollectionSuggestions() {
|
||||
{collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
<Wand2 className="h-4 w-4" />
|
||||
{t('admin.collections.suggestions.title')}
|
||||
<Badge variant="muted">{data.filter((s) => !s.alreadyExists).length}</Badge>
|
||||
<Badge variant="muted">{fresh.length}</Badge>
|
||||
</button>
|
||||
|
||||
{!collapsed && (
|
||||
<>
|
||||
<p className="text-xs text-muted-foreground">{t('admin.collections.suggestions.hint')}</p>
|
||||
<ul className="crt-panel divide-y divide-border rounded-md text-sm">
|
||||
{data.map((suggestion) => (
|
||||
{visible.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('admin.collections.suggestions.allCreated')}
|
||||
</p>
|
||||
)}
|
||||
<ul
|
||||
className={`crt-panel divide-y divide-border rounded-md text-sm ${
|
||||
visible.length === 0 ? 'hidden' : ''
|
||||
}`}
|
||||
>
|
||||
{visible.map((suggestion) => (
|
||||
<li key={suggestion.key} className="flex flex-col gap-1 px-4 py-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="min-w-0 flex-1 truncate font-medium">{suggestion.name}</span>
|
||||
@@ -88,6 +105,17 @@ export function CollectionSuggestions() {
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{existing > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="self-start text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
|
||||
onClick={() => setShowExisting((v) => !v)}
|
||||
>
|
||||
{showExisting
|
||||
? t('admin.collections.suggestions.hideExisting')
|
||||
: t('admin.collections.suggestions.showExisting', { count: existing })}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user