110 lines
3.3 KiB
TypeScript
Executable File
110 lines
3.3 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, {Fragment} from 'react';
|
|
import {FormattedNumber} from '@common/i18n/formatted-number';
|
|
import {TitlePoster} from '@app/titles/title-poster/title-poster';
|
|
import {Title} from '@app/titles/models/title';
|
|
import {TitleRating} from '@app/reviews/title-rating';
|
|
import {Tooltip} from '@common/ui/tooltip/tooltip';
|
|
import {TitleLink} from '@app/titles/title-link';
|
|
import {BarChartIcon} from '@common/icons/material/BarChart';
|
|
|
|
export const TitlesDatatableColumns: ColumnConfig<Title>[] = [
|
|
{
|
|
key: 'name',
|
|
allowsSorting: true,
|
|
width: 'flex-3',
|
|
visibleInMode: 'all',
|
|
header: () => <Trans message="Title" />,
|
|
body: title => (
|
|
<div className="flex items-center gap-12">
|
|
<TitlePoster
|
|
title={title}
|
|
srcSize="sm"
|
|
size="w-32"
|
|
aspect="aspect-square"
|
|
/>
|
|
<div className="overflow-hidden min-w-0">
|
|
<div className="overflow-hidden overflow-ellipsis">
|
|
<TitleLink title={title} target="_blank" />
|
|
</div>
|
|
<div className="text-muted text-xs overflow-hidden overflow-ellipsis">
|
|
{title.is_series ? (
|
|
<Trans message="Series" />
|
|
) : (
|
|
<Trans message="Movie" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'release_date',
|
|
allowsSorting: true,
|
|
header: () => <Trans message="Release date" />,
|
|
body: title => <FormattedDate date={title.release_date} />,
|
|
},
|
|
{
|
|
key: 'rating',
|
|
allowsSorting: true,
|
|
header: () => <Trans message="Rating" />,
|
|
body: title => <TitleRating score={title.rating} />,
|
|
width: 'w-124 flex-shrink-0',
|
|
},
|
|
{
|
|
key: 'views',
|
|
allowsSorting: true,
|
|
header: () => <Trans message="Page views" />,
|
|
body: title => <FormattedNumber value={title.views} />,
|
|
width: 'w-124 flex-shrink-0',
|
|
},
|
|
{
|
|
key: 'popularity',
|
|
allowsSorting: true,
|
|
header: () => <Trans message="Popularity" />,
|
|
body: title =>
|
|
title.popularity ? <FormattedNumber value={title.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: title =>
|
|
title.updated_at ? <FormattedDate date={title.updated_at} /> : '',
|
|
},
|
|
{
|
|
key: 'actions',
|
|
header: () => <Trans message="Actions" />,
|
|
hideHeader: true,
|
|
visibleInMode: 'all',
|
|
align: 'end',
|
|
width: 'w-84 flex-shrink-0',
|
|
body: title => (
|
|
<Fragment>
|
|
<IconButton
|
|
size="md"
|
|
className="text-muted"
|
|
elementType={Link}
|
|
to={`${title.id}/insights`}
|
|
>
|
|
<BarChartIcon />
|
|
</IconButton>
|
|
<Link to={`${title.id}/edit/primary-facts`} className="text-muted">
|
|
<Tooltip label={<Trans message="Edit" />}>
|
|
<IconButton size="md">
|
|
<EditIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Link>
|
|
</Fragment>
|
|
),
|
|
},
|
|
];
|