130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
import { useState, useMemo, useCallback, ReactNode } from 'react';
|
|
import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@heroui/react';
|
|
import dayjs from 'dayjs';
|
|
import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
|
|
import { ProjectType, ProjectsMessages } from '@/types/project';
|
|
import PublicityChip from '@/components/PublicityChip';
|
|
import { LocaleCodeType } from '@/types/locale';
|
|
|
|
type Props = {
|
|
projects: ProjectType[];
|
|
messages: ProjectsMessages;
|
|
locale: LocaleCodeType;
|
|
};
|
|
|
|
export default function ProjectsTable({ projects, messages, locale }: Props) {
|
|
const headerColumns = [
|
|
{ name: messages.id, uid: 'id', sortable: true },
|
|
{ name: messages.publicity, uid: 'isPublic', sortable: true },
|
|
{ name: messages.name, uid: 'name', sortable: true },
|
|
{ name: messages.lastUpdate, uid: 'updatedAt', sortable: true },
|
|
];
|
|
|
|
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
|
|
column: 'id',
|
|
direction: 'ascending',
|
|
});
|
|
|
|
const sortedItems = useMemo(() => {
|
|
return [...projects].sort((a: ProjectType, b: ProjectType) => {
|
|
const first = a[sortDescriptor.column as keyof ProjectType] as number;
|
|
const second = b[sortDescriptor.column as keyof ProjectType] as number;
|
|
const cmp = first < second ? -1 : first > second ? 1 : 0;
|
|
|
|
return sortDescriptor.direction === 'descending' ? -cmp : cmp;
|
|
});
|
|
}, [sortDescriptor, projects]);
|
|
|
|
const truncateText = (text: string, maxLength: number) => {
|
|
return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
|
|
};
|
|
|
|
const renderCell = useCallback(
|
|
(project: ProjectType, columnKey: string): ReactNode => {
|
|
const cellValue = project[columnKey as keyof ProjectType];
|
|
|
|
switch (columnKey) {
|
|
case 'id':
|
|
return <span>{cellValue as number}</span>;
|
|
case 'isPublic':
|
|
return (
|
|
<PublicityChip
|
|
isPublic={cellValue as boolean}
|
|
publicText={messages.public}
|
|
privateText={messages.private}
|
|
/>
|
|
);
|
|
case 'name': {
|
|
const maxLength = 30;
|
|
const truncatedDetail = truncateText(project.detail, maxLength);
|
|
return (
|
|
<div>
|
|
<Link href={`/projects/${project.id}/home`} locale={locale} className={NextUiLinkClasses}>
|
|
{cellValue as string}
|
|
</Link>
|
|
<div className="text-xs text-default-500">
|
|
<div>{truncatedDetail}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
case 'updatedAt':
|
|
return <span>{dayjs(cellValue as number).format('YYYY/MM/DD HH:mm')}</span>;
|
|
default:
|
|
return cellValue as string;
|
|
}
|
|
},
|
|
[locale, messages.private, messages.public]
|
|
);
|
|
|
|
const classNames = useMemo(
|
|
() => ({
|
|
wrapper: ['max-w-3xl'],
|
|
th: ['bg-transparent', 'text-default-500', 'border-b', 'border-divider'],
|
|
td: [
|
|
// changing the rows border radius
|
|
// first
|
|
'group-data-[first=true]:first:before:rounded-none',
|
|
'group-data-[first=true]:last:before:rounded-none',
|
|
// middle
|
|
'group-data-[middle=true]:before:rounded-none',
|
|
// last
|
|
'group-data-[last=true]:first:before:rounded-none',
|
|
'group-data-[last=true]:last:before:rounded-none',
|
|
],
|
|
}),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
isCompact
|
|
aria-label="Projects table"
|
|
classNames={classNames}
|
|
sortDescriptor={sortDescriptor}
|
|
onSortChange={setSortDescriptor}
|
|
>
|
|
<TableHeader columns={headerColumns}>
|
|
{(column) => (
|
|
<TableColumn
|
|
key={column.uid}
|
|
align={column.uid === 'actions' ? 'center' : 'start'}
|
|
allowsSorting={column.sortable}
|
|
>
|
|
{column.name}
|
|
</TableColumn>
|
|
)}
|
|
</TableHeader>
|
|
<TableBody emptyContent={messages.noProjectsFound} items={sortedItems}>
|
|
{(item) => (
|
|
<TableRow key={item.id}>
|
|
{(columnKey) => <TableCell>{renderCell(item, columnKey as string)}</TableCell>}
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</>
|
|
);
|
|
}
|