114 lines
3.0 KiB
TypeScript
Executable File
114 lines
3.0 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 {NameWithAvatar} from '@common/datatable/column-templates/name-with-avatar';
|
|
import {CheckIcon} from '@common/icons/material/Check';
|
|
import {CloseIcon} from '@common/icons/material/Close';
|
|
import {Channel} from '@common/channels/channel';
|
|
import {FormattedNumber} from '@common/i18n/formatted-number';
|
|
|
|
export const ListsDatatableColumns: ColumnConfig<Channel>[] = [
|
|
{
|
|
key: 'name',
|
|
allowsSorting: true,
|
|
width: 'flex-3',
|
|
visibleInMode: 'all',
|
|
header: () => <Trans message="Name" />,
|
|
body: list => {
|
|
return (
|
|
<a
|
|
className="outline-none hover:underline focus-visible:underline"
|
|
href={`lists/${list.id}`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{list.name}
|
|
</a>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
key: 'user_id',
|
|
allowsSorting: true,
|
|
width: 'flex-2 min-w-140',
|
|
header: () => <Trans message="Owner" />,
|
|
body: list =>
|
|
list.user && (
|
|
<NameWithAvatar
|
|
image={list.user.avatar}
|
|
label={list.user.display_name}
|
|
description={list.user.email}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
key: 'items_count',
|
|
width: 'w-96',
|
|
header: () => <Trans message="Items" />,
|
|
body: list =>
|
|
list.items_count && <FormattedNumber value={list.items_count} />,
|
|
},
|
|
{
|
|
key: 'public',
|
|
header: () => <Trans message="Public" />,
|
|
width: 'w-96',
|
|
body: list =>
|
|
list.public ? (
|
|
<CheckIcon className="text-positive" />
|
|
) : (
|
|
<CloseIcon className="text-danger" />
|
|
),
|
|
},
|
|
{
|
|
key: 'content_type',
|
|
allowsSorting: false,
|
|
header: () => <Trans message="Content type" />,
|
|
body: list => (
|
|
<span className="capitalize">
|
|
{list.config.contentModel ? (
|
|
<Trans message={list.config.contentModel} />
|
|
) : undefined}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'layout',
|
|
allowsSorting: false,
|
|
header: () => <Trans message="Layout" />,
|
|
body: list => (
|
|
<span className="capitalize">
|
|
{list.config.layout ? (
|
|
<Trans message={list.config.layout} />
|
|
) : undefined}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'updated_at',
|
|
allowsSorting: true,
|
|
maxWidth: 'max-w-100',
|
|
header: () => <Trans message="Last updated" />,
|
|
body: list =>
|
|
list.updated_at ? <FormattedDate date={list.updated_at} /> : '',
|
|
},
|
|
{
|
|
key: 'actions',
|
|
header: () => <Trans message="Actions" />,
|
|
hideHeader: true,
|
|
visibleInMode: 'all',
|
|
align: 'end',
|
|
width: 'w-42 flex-shrink-0',
|
|
body: list => (
|
|
<Link to={`${list.id}/edit`} className="text-muted">
|
|
<IconButton size="md">
|
|
<EditIcon />
|
|
</IconButton>
|
|
</Link>
|
|
),
|
|
},
|
|
];
|