118 lines
3.7 KiB
TypeScript
Executable File
118 lines
3.7 KiB
TypeScript
Executable File
import {ColumnConfig} from '@common/datatable/column-config';
|
|
import {NewsArticle} from '@app/titles/models/news-article';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {FormattedDate} from '@common/i18n/formatted-date';
|
|
import {Link} from 'react-router-dom';
|
|
import {Tooltip} from '@common/ui/tooltip/tooltip';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {EditIcon} from '@common/icons/material/Edit';
|
|
import {useContext} from 'react';
|
|
import {TableContext} from '@common/ui/tables/table-context';
|
|
import clsx from 'clsx';
|
|
import {useDeleteNewsArticle} from '@app/admin/news/requests/use-delete-news-article';
|
|
import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
|
|
import {DeleteIcon} from '@common/icons/material/Delete';
|
|
import {ConfirmationDialog} from '@common/ui/overlays/dialog/confirmation-dialog';
|
|
import {useDialogContext} from '@common/ui/overlays/dialog/dialog-context';
|
|
import {NewsArticleLink} from '@app/news/news-article-link';
|
|
import {NewsArticleImage} from '@app/news/news-article-image';
|
|
|
|
export const newsDatatableColumns: ColumnConfig<NewsArticle>[] = [
|
|
{
|
|
key: 'name',
|
|
width: 'flex-3 min-w-200',
|
|
visibleInMode: 'all',
|
|
header: () => <Trans message="Title" />,
|
|
body: article => <ArticleColumn article={article} />,
|
|
},
|
|
{
|
|
key: 'updatedAt',
|
|
allowsSorting: true,
|
|
width: 'w-96',
|
|
header: () => <Trans message="Last updated" />,
|
|
body: article => (
|
|
<time>
|
|
<FormattedDate date={article.updated_at} />
|
|
</time>
|
|
),
|
|
},
|
|
{
|
|
key: 'actions',
|
|
header: () => <Trans message="Actions" />,
|
|
width: 'w-84 flex-shrink-0',
|
|
hideHeader: true,
|
|
align: 'end',
|
|
visibleInMode: 'all',
|
|
body: article => (
|
|
<div className="text-muted">
|
|
<Link to={`${article.id}/edit`}>
|
|
<Tooltip label={<Trans message="Edit article" />}>
|
|
<IconButton size="md">
|
|
<EditIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Link>
|
|
<DialogTrigger type="modal">
|
|
<Tooltip label={<Trans message="Delete article" />}>
|
|
<IconButton>
|
|
<DeleteIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<DeleteArticleDialog article={article} />
|
|
</DialogTrigger>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
interface ArticleColumnProps {
|
|
article: NewsArticle;
|
|
}
|
|
function ArticleColumn({article}: ArticleColumnProps) {
|
|
const {isCollapsedMode} = useContext(TableContext);
|
|
return (
|
|
<div className="flex gap-14">
|
|
<NewsArticleImage article={article} size="w-52 h-52" lazy={false} />
|
|
<div className="min-w-0">
|
|
<div
|
|
className={clsx(
|
|
isCollapsedMode
|
|
? 'whitespace-normal'
|
|
: 'font-medium whitespace-nowrap overflow-hidden overflow-ellipsis',
|
|
)}
|
|
>
|
|
<NewsArticleLink article={article} target="_blank" />
|
|
</div>
|
|
{!isCollapsedMode && (
|
|
<p className="text-muted mt-4 text-xs max-w-680 whitespace-normal">
|
|
{article.body}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface DeleteArticleDialogProps {
|
|
article: NewsArticle;
|
|
}
|
|
export function DeleteArticleDialog({article}: DeleteArticleDialogProps) {
|
|
const deleteArticle = useDeleteNewsArticle();
|
|
const {close} = useDialogContext();
|
|
return (
|
|
<ConfirmationDialog
|
|
isDanger
|
|
isLoading={deleteArticle.isPending}
|
|
title={<Trans message="Delete article" />}
|
|
body={<Trans message="Are you sure you want to delete this article?" />}
|
|
confirm={<Trans message="Delete" />}
|
|
onConfirm={() => {
|
|
deleteArticle.mutate(
|
|
{articleId: article.id},
|
|
{onSuccess: () => close()},
|
|
);
|
|
}}
|
|
/>
|
|
);
|
|
}
|