bug: kanban new row

This commit is contained in:
ascarbek 2023-03-15 11:18:14 +06:00
parent a66d457f10
commit d92c0bffd6
4 changed files with 31 additions and 6 deletions

View File

@ -22,7 +22,7 @@ export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fi
return () => {
// dispose is causing an error
// void cellController.dispose();
void cellController.dispose();
};
}, []);

View File

@ -20,7 +20,7 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
setController(c);
// dispose is causing an error
// return () => void c.dispose();
return () => void c.dispose();
}, [viewId]);
const loadFields = async (fieldInfos: readonly FieldInfo[]) => {
@ -49,11 +49,15 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
void (async () => {
controller.subscribe({
onRowsChanged: (rowInfos) => {
console.log('rows changed: ', rowInfos);
setRows(rowInfos);
},
onFieldsChanged: (fieldInfos) => {
void loadFields(fieldInfos);
},
onGroupByField: (g) => {
console.log('on group by field: ', g);
},
});
await controller.open();
@ -63,5 +67,20 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
})();
}, [controller]);
return { loadFields, controller, rows, groups };
const onNewRowClick = async (index: number) => {
if (!groups) return;
if (!controller?.groups) return;
const group = groups[index];
await group.createRow();
const newGroups = controller.groups.value;
newGroups.forEach((g) => {
console.log(g.name, g.rows);
});
setGroups([...controller.groups.value]);
};
return { loadFields, controller, rows, groups, onNewRowClick };
};

View File

@ -7,7 +7,7 @@ import { ViewLayoutTypePB } from '@/services/backend';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
export const Board = ({ viewId }: { viewId: string }) => {
const { controller, rows, groups } = useDatabase(viewId, ViewLayoutTypePB.Board);
const { controller, rows, groups, onNewRowClick } = useDatabase(viewId, ViewLayoutTypePB.Board);
return (
<>
@ -39,6 +39,7 @@ export const Board = ({ viewId }: { viewId: string }) => {
rows={group.rows}
title={group.name}
allRows={rows}
onNewRowClick={() => onNewRowClick(index)}
/>
</div>
)}

View File

@ -12,12 +12,14 @@ export const BoardBlock = ({
title,
rows,
allRows,
onNewRowClick,
}: {
viewId: string;
controller: DatabaseController;
title: string;
rows: RowPB[];
allRows: readonly RowInfo[];
onNewRowClick: () => void;
}) => {
return (
<div className={'flex h-full w-[250px] flex-col rounded-lg bg-surface-1'}>
@ -39,7 +41,7 @@ export const BoardBlock = ({
{rows.map((row_pb, index) => {
const row = allRows.find((r) => r.row.id === row_pb.id);
return row ? (
<Draggable draggableId={row_pb.id} index={index}>
<Draggable draggableId={row_pb.id} index={index} key={index}>
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
@ -52,7 +54,10 @@ export const BoardBlock = ({
})}
</div>
<div className={'p-2'}>
<button className={'flex w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-surface-2'}>
<button
onClick={onNewRowClick}
className={'flex w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-surface-2'}
>
<span className={'h-5 w-5'}>
<AddSvg></AddSvg>
</span>