import React, {Fragment} from 'react';
import {DataTablePage} from '../../datatable/page/data-table-page';
import {IconButton} from '../../ui/buttons/icon-button';
import {FormattedDate} from '../../i18n/formatted-date';
import {ColumnConfig} from '../../datatable/column-config';
import {Trans} from '../../i18n/trans';
import {DeleteSelectedItemsAction} from '../../datatable/page/delete-selected-items-action';
import {DataTableEmptyStateMessage} from '../../datatable/page/data-table-emty-state-message';
import {DialogTrigger} from '../../ui/overlays/dialog/dialog-trigger';
import {FileEntry} from '../../uploads/file-entry';
import {NameWithAvatar} from '../../datatable/column-templates/name-with-avatar';
import {User} from '../../auth/user';
import {CheckIcon} from '../../icons/material/Check';
import {CloseIcon} from '../../icons/material/Close';
import {FormattedBytes} from '../../uploads/formatted-bytes';
import {VisibilityIcon} from '../../icons/material/Visibility';
import uploadSvg from './upload.svg';
import {FilePreviewDialog} from '../../uploads/preview/file-preview-dialog';
import {FILE_ENTRY_INDEX_FILTERS} from './file-entry-index-filters';
import {FileTypeIcon} from '../../uploads/file-type-icon/file-type-icon';
const columnConfig: ColumnConfig<FileEntry>[] = [
{
key: 'name',
allowsSorting: true,
visibleInMode: 'all',
width: 'flex-3 min-w-200',
header: () => <Trans message="Name" />,
body: entry => (
<Fragment>
<div className="overflow-x-hidden overflow-ellipsis">{entry.name}</div>
<div className="text-muted text-xs overflow-x-hidden overflow-ellipsis">
{entry.file_name}
</div>
</Fragment>
),
},
{
key: 'owner_id',
allowsSorting: true,
width: 'flex-3 min-w-200',
header: () => <Trans message="Uploader" />,
body: entry => {
const user = entry.users?.[0] as User;
if (!user) return null;
return (
<NameWithAvatar
image={user.avatar}
label={user.display_name}
description={user.email}
/>
);
},
},
{
key: 'type',
width: 'w-100 flex-shrink-0',
allowsSorting: true,
header: () => <Trans message="Type" />,
body: entry => (
<div className="flex items-center gap-12">
<FileTypeIcon type={entry.type} className="w-24 h-24 overflow-hidden" />
<div className="capitalize">{entry.type}</div>
</div>
),
},
{
key: 'public',
allowsSorting: true,
width: 'w-60 flex-shrink-0',
header: () => <Trans message="Public" />,
body: entry =>
entry.public ? (
<CheckIcon className="icon-md text-positive" />
) : (
<CloseIcon className="icon-md text-danger" />
),
},
{
key: 'file_size',
allowsSorting: true,
maxWidth: 'max-w-100',
header: () => <Trans message="File size" />,
body: entry => <FormattedBytes bytes={entry.file_size} />,
},
{
key: 'updated_at',
allowsSorting: true,
width: 'w-100',
header: () => <Trans message="Last updated" />,
body: entry => <FormattedDate date={entry.updated_at} />,
},
{
key: 'actions',
header: () => <Trans message="Actions" />,
hideHeader: true,
align: 'end',
width: 'w-42 flex-shrink-0',
visibleInMode: 'all',
body: entry => {
return (
<DialogTrigger type="modal">
<IconButton size="md" className="text-muted">
<VisibilityIcon />
</IconButton>
<FilePreviewDialog entries={[entry]} />
</DialogTrigger>
);
},
},
];
export function FileEntryIndexPage() {
return (
<DataTablePage
endpoint="file-entries"
title={<Trans message="Uploaded files and folders" />}
columns={columnConfig}
filters={FILE_ENTRY_INDEX_FILTERS}
selectedActions={<DeleteSelectedItemsAction />}
emptyStateMessage={
<DataTableEmptyStateMessage
image={uploadSvg}
title={<Trans message="Nothing has been uploaded yet" />}
filteringTitle={<Trans message="No matching files or folders" />}
/>
}
/>
);
}