52 lines
1.3 KiB
TypeScript
52 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={
|
|
'grid min-h-[520px] flex-1 auto-cols-[minmax(300px,340px)] grid-flow-col gap-x-4 overflow-x-auto overflow-y-hidden pb-4'
|
|
}
|
|
>
|
|
<DndProvider backend={HTML5Backend}>
|
|
{columns.map((column) => (
|
|
<div key={column.id}>
|
|
<KanbanColumn
|
|
entityName={entityName}
|
|
columnFieldName={columnFieldName}
|
|
showFieldName={showFieldName}
|
|
column={column}
|
|
filtersQuery={filtersQuery}
|
|
deleteThunk={deleteThunk}
|
|
updateThunk={updateThunk}
|
|
/>
|
|
</div>
|
|
))}
|
|
</DndProvider>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KanbanBoard;
|