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 {Channel} from '@common/channels/channel';
export const ChannelsDatatableColumns: ColumnConfig<Channel>[] = [
{
key: 'name',
allowsSorting: true,
width: 'flex-3',
visibleInMode: 'all',
header: () => <Trans message="Name" />,
body: channel => {
// link will not work without specific genre name in channel url
if (
channel.config.restriction &&
channel.config.restrictionModelId === 'urlParam'
) {
return channel.name;
}
return (
<a
className="hover:underline focus-visible:underline outline-none"
href={`channel/${channel.slug}`}
target="_blank"
rel="noreferrer"
>
{channel.name}
</a>
);
},
},
{
key: 'content_type',
allowsSorting: false,
header: () => <Trans message="Content type" />,
body: channel => (
<span className="capitalize">
{channel.config.contentModel ? (
<Trans message={channel.config.contentModel} />
) : undefined}
</span>
),
},
{
key: 'layout',
allowsSorting: false,
header: () => <Trans message="Layout" />,
body: channel => (
<span className="capitalize">
{channel.config.layout ? (
<Trans message={channel.config.layout} />
) : undefined}
</span>
),
},
{
key: 'auto_update',
allowsSorting: false,
header: () => <Trans message="Auto update" />,
body: channel => (
<span className="capitalize">{channel.config.autoUpdateMethod}</span>
),
},
{
key: 'updated_at',
allowsSorting: true,
maxWidth: 'max-w-100',
header: () => <Trans message="Last updated" />,
body: channel =>
channel.updated_at ? <FormattedDate date={channel.updated_at} /> : '',
},
{
key: 'actions',
header: () => <Trans message="Actions" />,
hideHeader: true,
visibleInMode: 'all',
align: 'end',
width: 'w-42 flex-shrink-0',
body: channel => (
<Link to={`${channel.id}/edit`} className="text-muted">
<IconButton size="md">
<EditIcon />
</IconButton>
</Link>
),
},
];