65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import Link from 'next/link';
|
|
import moment from 'moment';
|
|
import ListActionsPopover from '../ListActionsPopover';
|
|
import { DragSourceMonitor, useDrag } from 'react-dnd';
|
|
|
|
type Props = {
|
|
item: any;
|
|
column: { id: string; label: string };
|
|
entityName: string;
|
|
showFieldName: string;
|
|
setItemIdToDelete: (id: string) => void;
|
|
};
|
|
|
|
const KanbanCard = ({
|
|
item,
|
|
entityName,
|
|
showFieldName,
|
|
setItemIdToDelete,
|
|
column,
|
|
}: Props) => {
|
|
const [{ isDragging }, drag] = useDrag(
|
|
() => ({
|
|
type: 'box',
|
|
item: { item, column },
|
|
collect: (monitor: DragSourceMonitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
}),
|
|
}),
|
|
[item],
|
|
);
|
|
|
|
return (
|
|
<div
|
|
ref={drag}
|
|
className={`bg-gray-50 dark:bg-dark-800 rounded-md space-y-2 p-4 relative ${
|
|
isDragging ? 'cursor-grabbing' : 'cursor-grab'
|
|
}`}
|
|
>
|
|
<div className={'flex items-center justify-between'}>
|
|
<Link
|
|
href={`/${entityName}/${entityName}-view/?id=${item.id}`}
|
|
className={'text-base font-semibold'}
|
|
>
|
|
{item[showFieldName] ?? 'No data'}
|
|
</Link>
|
|
</div>
|
|
<div className={'flex items-center justify-between'}>
|
|
<p>{moment(item.createdAt).format('MMM DD hh:mm a')}</p>
|
|
<ListActionsPopover
|
|
itemId={item.id}
|
|
pathEdit={`/${entityName}/${entityName}-edit/?id=${item.id}`}
|
|
pathView={`/${entityName}/${entityName}-view/?id=${item.id}`}
|
|
onDelete={(id) => setItemIdToDelete(id)}
|
|
hasUpdatePermission={true}
|
|
className={'w-2 h-2 text-white'}
|
|
iconClassName={'w-5'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KanbanCard;
|