Enhance GroupDetail component to display show types on badges
ci / build-backend (push) Successful in 2m4s
ci / build-frontend (push) Successful in 42s
ci / tests (push) Successful in 2m23s
ci / sonar (push) Successful in 5m33s

Updated the GroupDetail component to include a new function, elementLabelKey, which determines the appropriate label for badges based on the element kind and show kind. This change improves the clarity of displayed information by showing specific show types (e.g., "Film", "Series") instead of generic labels. Adjusted badge rendering to utilize the new function, enhancing the user interface for better understanding of group elements.
This commit is contained in:
Leonid Pershin
2026-07-29 23:35:45 +03:00
parent 6f74e66f0c
commit 35cb4b09dc
@@ -9,6 +9,7 @@ import type {
GroupElementKind,
GroupFilter,
GroupMode,
ShowKind,
} from '@/shared/api/types'
import { useApiError } from '@/shared/lib/use-api-error'
import { Badge } from '@/shared/ui/badge'
@@ -30,6 +31,17 @@ import {
import { DurationLabel } from './DurationLabel'
import { GroupFilterPanel } from './GroupFilterPanel'
/**
* Что писать на бейдже позиции. Вид элемента («шоу») сам по себе бесполезен: в группе рекламы
* все строки — шоу, и подпись ничего не говорит. Показываем тип шоу, когда он известен: «Ролик»,
* «Сериал», «Полнометражка», — и «Коллекция» для франшизы.
*/
function elementLabelKey(elementKind: GroupElementKind, showKind: ShowKind | null) {
return elementKind === 'Collection' || showKind === null
? `admin.groups.elementKinds.${elementKind}`
: `admin.shows.kinds.${showKind}`
}
const EMPTY_FILTER: GroupFilter = {}
export function GroupDetail({ groupId }: Readonly<{ groupId: string }>) {
@@ -305,7 +317,7 @@ export function GroupDetail({ groupId }: Readonly<{ groupId: string }>) {
<span className="text-muted-foreground">{candidate.year}</span>
)}
<Badge variant="muted">
{t(`admin.groups.elementKinds.${candidate.elementKind}`)}
{t(elementLabelKey(candidate.elementKind, candidate.showKind))}
</Badge>
{candidate.alreadyInGroup && (
<Badge variant="muted">{t('admin.groups.alreadyIn')}</Badge>
@@ -360,7 +372,7 @@ export function GroupDetail({ groupId }: Readonly<{ groupId: string }>) {
</Badge>
)}
<Badge variant="muted">
{t(`admin.groups.elementKinds.${item.elementKind}`)}
{t(elementLabelKey(item.elementKind, item.showKind))}
</Badge>
<span className="text-muted-foreground">
{t('admin.groups.units')}: {item.unitCount}