51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import KanbanColumn from './KanbanColumn';
|
|
import { AsyncThunk } from '@reduxjs/toolkit';
|
|
import { DndProvider } from 'react-dnd';
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
|
|
type Props = {
|
|
columns: Array<{ id: string; label: string }>;
|
|
filtersQuery: string;
|
|
entityName: string;
|
|
columnFieldName: string;
|
|
showFieldName: string;
|
|
deleteThunk: AsyncThunk<any, any, any>;
|
|
updateThunk: AsyncThunk<any, any, any>;
|
|
};
|
|
|
|
const KanbanBoard = ({
|
|
columns,
|
|
entityName,
|
|
columnFieldName,
|
|
filtersQuery,
|
|
showFieldName,
|
|
deleteThunk,
|
|
updateThunk,
|
|
}: Props) => {
|
|
return (
|
|
<div
|
|
className={
|
|
'pb-2 flex-grow min-h-[400px] flex-1 grid grid-rows-1 auto-cols-min grid-flow-col gap-x-3 overflow-y-hidden overflow-x-auto'
|
|
}
|
|
>
|
|
<DndProvider backend={HTML5Backend}>
|
|
{columns.map((column) => (
|
|
<KanbanColumn
|
|
key={column.id}
|
|
entityName={entityName}
|
|
columnFieldName={columnFieldName}
|
|
showFieldName={showFieldName}
|
|
column={column}
|
|
filtersQuery={filtersQuery}
|
|
deleteThunk={deleteThunk}
|
|
updateThunk={updateThunk}
|
|
/>
|
|
))}
|
|
</DndProvider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KanbanBoard;
|