88 lines
2.8 KiB
TypeScript
Executable File
88 lines
2.8 KiB
TypeScript
Executable File
import {ColumnConfig} from '@common/datatable/column-config';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {FormattedDate} from '@common/i18n/formatted-date';
|
|
import {Link} from 'react-router-dom';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {EditIcon} from '@common/icons/material/Edit';
|
|
import React from 'react';
|
|
import {FormattedNumber} from '@common/i18n/formatted-number';
|
|
import {Tooltip} from '@common/ui/tooltip/tooltip';
|
|
import {PersonPoster} from '@app/people/person-poster/person-poster';
|
|
import {Person} from '@app/titles/models/person';
|
|
import {PersonLink} from '@app/people/person-link';
|
|
import {KnownForCompact} from '@app/people/known-for-compact';
|
|
|
|
export const PeopleDatatableColumns: ColumnConfig<Person>[] = [
|
|
{
|
|
key: 'name',
|
|
allowsSorting: true,
|
|
width: 'flex-3',
|
|
visibleInMode: 'all',
|
|
header: () => <Trans message="Person" />,
|
|
body: person => (
|
|
<div className="flex items-center gap-12">
|
|
<PersonPoster person={person} srcSize="sm" size="w-32" rounded />
|
|
<div className="overflow-hidden min-w-0">
|
|
<div className="overflow-hidden overflow-ellipsis">
|
|
<PersonLink person={person} target="_blank" />
|
|
</div>
|
|
<div className="text-muted text-xs overflow-hidden overflow-ellipsis">
|
|
<KnownForCompact
|
|
person={person}
|
|
linkTarget="_blank"
|
|
linkColor="inherit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'birth_date',
|
|
allowsSorting: true,
|
|
header: () => <Trans message="Birth date" />,
|
|
body: person => <FormattedDate date={person.birth_date} />,
|
|
},
|
|
{
|
|
key: 'views',
|
|
allowsSorting: true,
|
|
header: () => <Trans message="Page views" />,
|
|
body: person =>
|
|
person.views ? <FormattedNumber value={person.views} /> : null,
|
|
width: 'w-124 flex-shrink-0',
|
|
},
|
|
{
|
|
key: 'popularity',
|
|
allowsSorting: true,
|
|
header: () => <Trans message="Popularity" />,
|
|
body: person =>
|
|
person.popularity ? <FormattedNumber value={person.popularity} /> : null,
|
|
width: 'w-124 flex-shrink-0',
|
|
},
|
|
{
|
|
key: 'updated_at',
|
|
allowsSorting: true,
|
|
width: 'w-124 flex-shrink-0',
|
|
header: () => <Trans message="Last updated" />,
|
|
body: person =>
|
|
person.updated_at ? <FormattedDate date={person.updated_at} /> : '',
|
|
},
|
|
{
|
|
key: 'actions',
|
|
header: () => <Trans message="Actions" />,
|
|
hideHeader: true,
|
|
visibleInMode: 'all',
|
|
align: 'end',
|
|
width: 'w-42 flex-shrink-0',
|
|
body: video => (
|
|
<Link to={`${video.id}/edit/primary-facts`} className="text-muted">
|
|
<Tooltip label={<Trans message="Edit" />}>
|
|
<IconButton size="md">
|
|
<EditIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Link>
|
|
),
|
|
},
|
|
];
|