mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 23:29:02 +02:00
refactor(react/collections/table): split card/column
This commit is contained in:
Elian Doran
parent
60ef816f0c
commit
cb84e4c7b6
88
apps/client/src/widgets/collections/board/card.tsx
Normal file
88
apps/client/src/widgets/collections/board/card.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import { useCallback, useContext, useEffect, useRef } from "preact/hooks";
|
||||
import FBranch from "../../../entities/fbranch";
|
||||
import FNote from "../../../entities/fnote";
|
||||
import BoardApi from "./api";
|
||||
import { BoardViewContext } from ".";
|
||||
import { ContextMenuEvent } from "../../../menus/context_menu";
|
||||
import { openNoteContextMenu } from "./context_menu";
|
||||
import FormTextBox from "../../react/FormTextBox";
|
||||
|
||||
export default function Card({
|
||||
api,
|
||||
note,
|
||||
branch,
|
||||
column,
|
||||
index,
|
||||
setDraggedCard,
|
||||
isDragging
|
||||
}: {
|
||||
api: BoardApi,
|
||||
note: FNote,
|
||||
branch: FBranch,
|
||||
column: string,
|
||||
index: number,
|
||||
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
|
||||
isDragging: boolean
|
||||
}) {
|
||||
const { branchIdToEdit } = useContext(BoardViewContext);
|
||||
const isEditing = branch.branchId === branchIdToEdit;
|
||||
const colorClass = note.getColorClass() || '';
|
||||
const editorRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleDragStart = useCallback((e: DragEvent) => {
|
||||
e.dataTransfer!.effectAllowed = 'move';
|
||||
e.dataTransfer!.setData('text/plain', note.noteId);
|
||||
setDraggedCard({ noteId: note.noteId, branchId: branch.branchId, fromColumn: column, index });
|
||||
}, [note.noteId, branch.branchId, column, index, setDraggedCard]);
|
||||
|
||||
const handleDragEnd = useCallback(() => {
|
||||
setDraggedCard(null);
|
||||
}, [setDraggedCard]);
|
||||
|
||||
const handleContextMenu = useCallback((e: ContextMenuEvent) => {
|
||||
openNoteContextMenu(api, e, note.noteId, branch.branchId, column);
|
||||
}, [ api, note, branch, column ]);
|
||||
|
||||
useEffect(() => {
|
||||
editorRef.current?.focus();
|
||||
}, [ isEditing ]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`board-note ${colorClass} ${isDragging ? 'dragging' : ''} ${isEditing ? "editing" : ""}`}
|
||||
draggable="true"
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
<span class={`icon ${note.getIcon()}`} />
|
||||
{!isEditing ? (
|
||||
<>{note.title}</>
|
||||
) : (
|
||||
<FormTextBox
|
||||
inputRef={editorRef}
|
||||
currentValue={note.title}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
const newTitle = e.currentTarget.value;
|
||||
if (newTitle !== note.title) {
|
||||
api.renameCard(note.noteId, newTitle);
|
||||
}
|
||||
api.dismissEditingTitle();
|
||||
}
|
||||
|
||||
if (e.key === "Escape") {
|
||||
api.dismissEditingTitle();
|
||||
}
|
||||
}}
|
||||
onBlur={(newTitle) => {
|
||||
if (newTitle !== note.title) {
|
||||
api.renameCard(note.noteId, newTitle);
|
||||
}
|
||||
api.dismissEditingTitle();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
234
apps/client/src/widgets/collections/board/column.tsx
Normal file
234
apps/client/src/widgets/collections/board/column.tsx
Normal file
@ -0,0 +1,234 @@
|
||||
import { useCallback, useContext, useEffect, useRef } from "preact/hooks";
|
||||
import FBranch from "../../../entities/fbranch";
|
||||
import FNote from "../../../entities/fnote";
|
||||
import { BoardViewContext } from ".";
|
||||
import branches from "../../../services/branches";
|
||||
import { openColumnContextMenu } from "./context_menu";
|
||||
import { ContextMenuEvent } from "../../../menus/context_menu";
|
||||
import FormTextBox from "../../react/FormTextBox";
|
||||
import Icon from "../../react/Icon";
|
||||
import { t } from "../../../services/i18n";
|
||||
import BoardApi from "./api";
|
||||
import Card from "./card";
|
||||
|
||||
export default function Column({
|
||||
column,
|
||||
columnIndex,
|
||||
columnItems,
|
||||
statusAttribute,
|
||||
draggedCard,
|
||||
setDraggedCard,
|
||||
dropTarget,
|
||||
setDropTarget,
|
||||
dropPosition,
|
||||
setDropPosition,
|
||||
onCardDrop,
|
||||
draggedColumn,
|
||||
setDraggedColumn,
|
||||
isDraggingColumn,
|
||||
api
|
||||
}: {
|
||||
column: string,
|
||||
columnIndex: number,
|
||||
columnItems?: { note: FNote, branch: FBranch }[],
|
||||
statusAttribute: string,
|
||||
draggedCard: { noteId: string, branchId: string, fromColumn: string, index: number } | null,
|
||||
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
|
||||
dropTarget: string | null,
|
||||
setDropTarget: (target: string | null) => void,
|
||||
dropPosition: { column: string, index: number } | null,
|
||||
setDropPosition: (position: { column: string, index: number } | null) => void,
|
||||
onCardDrop: () => void,
|
||||
draggedColumn: { column: string, index: number } | null,
|
||||
setDraggedColumn: (column: { column: string, index: number } | null) => void,
|
||||
isDraggingColumn: boolean,
|
||||
api: BoardApi
|
||||
}) {
|
||||
const context = useContext(BoardViewContext);
|
||||
const isEditing = (context.columnNameToEdit === column);
|
||||
const editorRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleColumnDragStart = useCallback((e: DragEvent) => {
|
||||
e.dataTransfer!.effectAllowed = 'move';
|
||||
e.dataTransfer!.setData('text/plain', column);
|
||||
setDraggedColumn({ column, index: columnIndex });
|
||||
e.stopPropagation(); // Prevent card drag from interfering
|
||||
}, [column, columnIndex, setDraggedColumn]);
|
||||
|
||||
const handleColumnDragEnd = useCallback(() => {
|
||||
setDraggedColumn(null);
|
||||
}, [setDraggedColumn]);
|
||||
|
||||
const handleDragOver = useCallback((e: DragEvent) => {
|
||||
if (draggedColumn) return; // Don't handle card drops when dragging columns
|
||||
e.preventDefault();
|
||||
setDropTarget(column);
|
||||
|
||||
// Calculate drop position based on mouse position
|
||||
const cards = Array.from(e.currentTarget.querySelectorAll('.board-note'));
|
||||
const mouseY = e.clientY;
|
||||
|
||||
let newIndex = cards.length;
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const card = cards[i] as HTMLElement;
|
||||
const rect = card.getBoundingClientRect();
|
||||
const cardMiddle = rect.top + rect.height / 2;
|
||||
|
||||
if (mouseY < cardMiddle) {
|
||||
newIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setDropPosition({ column, index: newIndex });
|
||||
}, [column, setDropTarget, setDropPosition]);
|
||||
|
||||
const handleDragLeave = useCallback((e: DragEvent) => {
|
||||
const relatedTarget = e.relatedTarget as HTMLElement;
|
||||
const currentTarget = e.currentTarget as HTMLElement;
|
||||
|
||||
if (!currentTarget.contains(relatedTarget)) {
|
||||
setDropTarget(null);
|
||||
setDropPosition(null);
|
||||
}
|
||||
}, [setDropTarget, setDropPosition]);
|
||||
|
||||
const handleDrop = useCallback(async (e: DragEvent) => {
|
||||
if (draggedColumn) return; // Don't handle card drops when dragging columns
|
||||
e.preventDefault();
|
||||
setDropTarget(null);
|
||||
setDropPosition(null);
|
||||
|
||||
if (draggedCard && dropPosition) {
|
||||
const targetIndex = dropPosition.index;
|
||||
const targetItems = columnItems || [];
|
||||
|
||||
if (draggedCard.fromColumn !== column) {
|
||||
// Moving to a different column
|
||||
await api.changeColumn(draggedCard.noteId, column);
|
||||
|
||||
// If there are items in the target column, reorder
|
||||
if (targetItems.length > 0 && targetIndex < targetItems.length) {
|
||||
const targetBranch = targetItems[targetIndex].branch;
|
||||
await branches.moveBeforeBranch([ draggedCard.branchId ], targetBranch.branchId);
|
||||
}
|
||||
} else if (draggedCard.index !== targetIndex) {
|
||||
// Reordering within the same column
|
||||
let targetBranchId: string | null = null;
|
||||
|
||||
if (targetIndex < targetItems.length) {
|
||||
// Moving before an existing item
|
||||
const adjustedIndex = draggedCard.index < targetIndex ? targetIndex : targetIndex;
|
||||
if (adjustedIndex < targetItems.length) {
|
||||
targetBranchId = targetItems[adjustedIndex].branch.branchId;
|
||||
await branches.moveBeforeBranch([ draggedCard.branchId ], targetBranchId);
|
||||
}
|
||||
} else if (targetIndex > 0) {
|
||||
// Moving to the end - place after the last item
|
||||
const lastItem = targetItems[targetItems.length - 1];
|
||||
await branches.moveAfterBranch([ draggedCard.branchId ], lastItem.branch.branchId);
|
||||
}
|
||||
}
|
||||
|
||||
onCardDrop();
|
||||
}
|
||||
setDraggedCard(null);
|
||||
}, [draggedCard, draggedColumn, dropPosition, columnItems, column, statusAttribute, setDraggedCard, setDropTarget, setDropPosition, onCardDrop]);
|
||||
|
||||
const handleEdit = useCallback(() => {
|
||||
context.setColumnNameToEdit?.(column);
|
||||
}, [column]);
|
||||
|
||||
const handleContextMenu = useCallback((e: ContextMenuEvent) => {
|
||||
openColumnContextMenu(api, e, column);
|
||||
}, [ api, column ]);
|
||||
|
||||
useEffect(() => {
|
||||
editorRef.current?.focus();
|
||||
}, [ isEditing ]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`board-column ${dropTarget === column && draggedCard?.fromColumn !== column ? 'drag-over' : ''} ${isDraggingColumn ? 'column-dragging' : ''}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
<h3
|
||||
className={`${isEditing ? "editing" : ""}`}
|
||||
draggable="true"
|
||||
onDragStart={handleColumnDragStart}
|
||||
onDragEnd={handleColumnDragEnd}
|
||||
>
|
||||
{!isEditing ? (
|
||||
<>
|
||||
<span>{column}</span>
|
||||
<span
|
||||
className="edit-icon icon bx bx-edit-alt"
|
||||
title="Click to edit column title"
|
||||
onClick={handleEdit}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FormTextBox
|
||||
inputRef={editorRef}
|
||||
currentValue={column}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
const newTitle = e.currentTarget.value;
|
||||
if (newTitle !== column) {
|
||||
api.renameColumn(column, newTitle);
|
||||
}
|
||||
context.setColumnNameToEdit?.(undefined);
|
||||
}
|
||||
|
||||
if (e.key === "Escape") {
|
||||
context.setColumnNameToEdit?.(undefined);
|
||||
}
|
||||
}}
|
||||
onBlur={(newTitle) => {
|
||||
if (newTitle !== column) {
|
||||
api.renameColumn(column, newTitle);
|
||||
}
|
||||
context.setColumnNameToEdit?.(undefined);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</h3>
|
||||
|
||||
{(columnItems ?? []).map(({ note, branch }, index) => {
|
||||
const showIndicatorBefore = dropPosition?.column === column &&
|
||||
dropPosition.index === index &&
|
||||
draggedCard?.noteId !== note.noteId;
|
||||
|
||||
return (
|
||||
<>
|
||||
{showIndicatorBefore && (
|
||||
<div className="board-drop-placeholder show" />
|
||||
)}
|
||||
<Card
|
||||
api={api}
|
||||
note={note}
|
||||
branch={branch}
|
||||
column={column}
|
||||
index={index}
|
||||
setDraggedCard={setDraggedCard}
|
||||
isDragging={draggedCard?.noteId === note.noteId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
{dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && (
|
||||
<div className="board-drop-placeholder show" />
|
||||
)}
|
||||
|
||||
<div className="board-new-item" onClick={() => api.createNewItem(column)}>
|
||||
<Icon icon="bx bx-plus" />{" "}
|
||||
{t("board_view.new-item")}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,19 +1,15 @@
|
||||
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
|
||||
import { ViewModeProps } from "../interface";
|
||||
import "./index.css";
|
||||
import { ColumnMap, getBoardData } from "./data";
|
||||
import { useNoteLabelWithDefault, useTriliumEvent } from "../../react/hooks";
|
||||
import FNote from "../../../entities/fnote";
|
||||
import FBranch from "../../../entities/fbranch";
|
||||
import Icon from "../../react/Icon";
|
||||
import { t } from "../../../services/i18n";
|
||||
import Api from "./api";
|
||||
import FormTextBox from "../../react/FormTextBox";
|
||||
import branchService from "../../../services/branches";
|
||||
import { openColumnContextMenu, openNoteContextMenu } from "./context_menu";
|
||||
import { ContextMenuEvent } from "../../../menus/context_menu";
|
||||
import { createContext } from "preact";
|
||||
import { onWheelHorizontalScroll } from "../../widget_utils";
|
||||
import Column from "./column";
|
||||
|
||||
export interface BoardViewData {
|
||||
columns?: BoardColumnData[];
|
||||
@ -29,7 +25,7 @@ interface BoardViewContextData {
|
||||
setColumnNameToEdit?: (column: string | undefined) => void;
|
||||
}
|
||||
|
||||
const BoardViewContext = createContext<BoardViewContextData>({});
|
||||
export const BoardViewContext = createContext<BoardViewContextData>({});
|
||||
|
||||
export default function BoardView({ note: parentNote, noteIds, viewConfig, saveConfig }: ViewModeProps<BoardViewData>) {
|
||||
const [ statusAttribute ] = useNoteLabelWithDefault(parentNote, "board:groupBy", "status");
|
||||
@ -186,308 +182,6 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
|
||||
)
|
||||
}
|
||||
|
||||
function Column({
|
||||
column,
|
||||
columnIndex,
|
||||
columnItems,
|
||||
statusAttribute,
|
||||
draggedCard,
|
||||
setDraggedCard,
|
||||
dropTarget,
|
||||
setDropTarget,
|
||||
dropPosition,
|
||||
setDropPosition,
|
||||
onCardDrop,
|
||||
draggedColumn,
|
||||
setDraggedColumn,
|
||||
isDraggingColumn,
|
||||
api
|
||||
}: {
|
||||
column: string,
|
||||
columnIndex: number,
|
||||
columnItems?: { note: FNote, branch: FBranch }[],
|
||||
statusAttribute: string,
|
||||
draggedCard: { noteId: string, branchId: string, fromColumn: string, index: number } | null,
|
||||
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
|
||||
dropTarget: string | null,
|
||||
setDropTarget: (target: string | null) => void,
|
||||
dropPosition: { column: string, index: number } | null,
|
||||
setDropPosition: (position: { column: string, index: number } | null) => void,
|
||||
onCardDrop: () => void,
|
||||
draggedColumn: { column: string, index: number } | null,
|
||||
setDraggedColumn: (column: { column: string, index: number } | null) => void,
|
||||
isDraggingColumn: boolean,
|
||||
api: Api
|
||||
}) {
|
||||
const context = useContext(BoardViewContext);
|
||||
const isEditing = (context.columnNameToEdit === column);
|
||||
const editorRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleColumnDragStart = useCallback((e: DragEvent) => {
|
||||
e.dataTransfer!.effectAllowed = 'move';
|
||||
e.dataTransfer!.setData('text/plain', column);
|
||||
setDraggedColumn({ column, index: columnIndex });
|
||||
e.stopPropagation(); // Prevent card drag from interfering
|
||||
}, [column, columnIndex, setDraggedColumn]);
|
||||
|
||||
const handleColumnDragEnd = useCallback(() => {
|
||||
setDraggedColumn(null);
|
||||
}, [setDraggedColumn]);
|
||||
|
||||
const handleDragOver = useCallback((e: DragEvent) => {
|
||||
if (draggedColumn) return; // Don't handle card drops when dragging columns
|
||||
e.preventDefault();
|
||||
setDropTarget(column);
|
||||
|
||||
// Calculate drop position based on mouse position
|
||||
const cards = Array.from(e.currentTarget.querySelectorAll('.board-note'));
|
||||
const mouseY = e.clientY;
|
||||
|
||||
let newIndex = cards.length;
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const card = cards[i] as HTMLElement;
|
||||
const rect = card.getBoundingClientRect();
|
||||
const cardMiddle = rect.top + rect.height / 2;
|
||||
|
||||
if (mouseY < cardMiddle) {
|
||||
newIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
setDropPosition({ column, index: newIndex });
|
||||
}, [column, setDropTarget, setDropPosition]);
|
||||
|
||||
const handleDragLeave = useCallback((e: DragEvent) => {
|
||||
const relatedTarget = e.relatedTarget as HTMLElement;
|
||||
const currentTarget = e.currentTarget as HTMLElement;
|
||||
|
||||
if (!currentTarget.contains(relatedTarget)) {
|
||||
setDropTarget(null);
|
||||
setDropPosition(null);
|
||||
}
|
||||
}, [setDropTarget, setDropPosition]);
|
||||
|
||||
const handleDrop = useCallback(async (e: DragEvent) => {
|
||||
if (draggedColumn) return; // Don't handle card drops when dragging columns
|
||||
e.preventDefault();
|
||||
setDropTarget(null);
|
||||
setDropPosition(null);
|
||||
|
||||
if (draggedCard && dropPosition) {
|
||||
const targetIndex = dropPosition.index;
|
||||
const targetItems = columnItems || [];
|
||||
|
||||
if (draggedCard.fromColumn !== column) {
|
||||
// Moving to a different column
|
||||
await api.changeColumn(draggedCard.noteId, column);
|
||||
|
||||
// If there are items in the target column, reorder
|
||||
if (targetItems.length > 0 && targetIndex < targetItems.length) {
|
||||
const targetBranch = targetItems[targetIndex].branch;
|
||||
await branchService.moveBeforeBranch([ draggedCard.branchId ], targetBranch.branchId);
|
||||
}
|
||||
} else if (draggedCard.index !== targetIndex) {
|
||||
// Reordering within the same column
|
||||
let targetBranchId: string | null = null;
|
||||
|
||||
if (targetIndex < targetItems.length) {
|
||||
// Moving before an existing item
|
||||
const adjustedIndex = draggedCard.index < targetIndex ? targetIndex : targetIndex;
|
||||
if (adjustedIndex < targetItems.length) {
|
||||
targetBranchId = targetItems[adjustedIndex].branch.branchId;
|
||||
await branchService.moveBeforeBranch([ draggedCard.branchId ], targetBranchId);
|
||||
}
|
||||
} else if (targetIndex > 0) {
|
||||
// Moving to the end - place after the last item
|
||||
const lastItem = targetItems[targetItems.length - 1];
|
||||
await branchService.moveAfterBranch([ draggedCard.branchId ], lastItem.branch.branchId);
|
||||
}
|
||||
}
|
||||
|
||||
onCardDrop();
|
||||
}
|
||||
setDraggedCard(null);
|
||||
}, [draggedCard, draggedColumn, dropPosition, columnItems, column, statusAttribute, setDraggedCard, setDropTarget, setDropPosition, onCardDrop]);
|
||||
|
||||
const handleEdit = useCallback(() => {
|
||||
context.setColumnNameToEdit?.(column);
|
||||
}, [column]);
|
||||
|
||||
const handleContextMenu = useCallback((e: ContextMenuEvent) => {
|
||||
openColumnContextMenu(api, e, column);
|
||||
}, [ api, column ]);
|
||||
|
||||
useEffect(() => {
|
||||
editorRef.current?.focus();
|
||||
}, [ isEditing ]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`board-column ${dropTarget === column && draggedCard?.fromColumn !== column ? 'drag-over' : ''} ${isDraggingColumn ? 'column-dragging' : ''}`}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
<h3
|
||||
className={`${isEditing ? "editing" : ""}`}
|
||||
draggable="true"
|
||||
onDragStart={handleColumnDragStart}
|
||||
onDragEnd={handleColumnDragEnd}
|
||||
>
|
||||
{!isEditing ? (
|
||||
<>
|
||||
<span>{column}</span>
|
||||
<span
|
||||
className="edit-icon icon bx bx-edit-alt"
|
||||
title="Click to edit column title"
|
||||
onClick={handleEdit}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FormTextBox
|
||||
inputRef={editorRef}
|
||||
currentValue={column}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
const newTitle = e.currentTarget.value;
|
||||
if (newTitle !== column) {
|
||||
api.renameColumn(column, newTitle);
|
||||
}
|
||||
context.setColumnNameToEdit?.(undefined);
|
||||
}
|
||||
|
||||
if (e.key === "Escape") {
|
||||
context.setColumnNameToEdit?.(undefined);
|
||||
}
|
||||
}}
|
||||
onBlur={(newTitle) => {
|
||||
if (newTitle !== column) {
|
||||
api.renameColumn(column, newTitle);
|
||||
}
|
||||
context.setColumnNameToEdit?.(undefined);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</h3>
|
||||
|
||||
{(columnItems ?? []).map(({ note, branch }, index) => {
|
||||
const showIndicatorBefore = dropPosition?.column === column &&
|
||||
dropPosition.index === index &&
|
||||
draggedCard?.noteId !== note.noteId;
|
||||
|
||||
return (
|
||||
<>
|
||||
{showIndicatorBefore && (
|
||||
<div className="board-drop-placeholder show" />
|
||||
)}
|
||||
<Card
|
||||
api={api}
|
||||
note={note}
|
||||
branch={branch}
|
||||
column={column}
|
||||
index={index}
|
||||
setDraggedCard={setDraggedCard}
|
||||
isDragging={draggedCard?.noteId === note.noteId}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
{dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && (
|
||||
<div className="board-drop-placeholder show" />
|
||||
)}
|
||||
|
||||
<div className="board-new-item" onClick={() => api.createNewItem(column)}>
|
||||
<Icon icon="bx bx-plus" />{" "}
|
||||
{t("board_view.new-item")}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Card({
|
||||
api,
|
||||
note,
|
||||
branch,
|
||||
column,
|
||||
index,
|
||||
setDraggedCard,
|
||||
isDragging
|
||||
}: {
|
||||
api: Api,
|
||||
note: FNote,
|
||||
branch: FBranch,
|
||||
column: string,
|
||||
index: number,
|
||||
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
|
||||
isDragging: boolean
|
||||
}) {
|
||||
const { branchIdToEdit } = useContext(BoardViewContext);
|
||||
const isEditing = branch.branchId === branchIdToEdit;
|
||||
const colorClass = note.getColorClass() || '';
|
||||
const editorRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleDragStart = useCallback((e: DragEvent) => {
|
||||
e.dataTransfer!.effectAllowed = 'move';
|
||||
e.dataTransfer!.setData('text/plain', note.noteId);
|
||||
setDraggedCard({ noteId: note.noteId, branchId: branch.branchId, fromColumn: column, index });
|
||||
}, [note.noteId, branch.branchId, column, index, setDraggedCard]);
|
||||
|
||||
const handleDragEnd = useCallback(() => {
|
||||
setDraggedCard(null);
|
||||
}, [setDraggedCard]);
|
||||
|
||||
const handleContextMenu = useCallback((e: ContextMenuEvent) => {
|
||||
openNoteContextMenu(api, e, note.noteId, branch.branchId, column);
|
||||
}, [ api, note, branch, column ]);
|
||||
|
||||
useEffect(() => {
|
||||
editorRef.current?.focus();
|
||||
}, [ isEditing ]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`board-note ${colorClass} ${isDragging ? 'dragging' : ''} ${isEditing ? "editing" : ""}`}
|
||||
draggable="true"
|
||||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
<span class={`icon ${note.getIcon()}`} />
|
||||
{!isEditing ? (
|
||||
<>{note.title}</>
|
||||
) : (
|
||||
<FormTextBox
|
||||
inputRef={editorRef}
|
||||
value={note.title}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
const newTitle = e.currentTarget.value;
|
||||
if (newTitle !== note.title) {
|
||||
api.renameCard(note.noteId, newTitle);
|
||||
}
|
||||
api.dismissEditingTitle();
|
||||
}
|
||||
|
||||
if (e.key === "Escape") {
|
||||
api.dismissEditingTitle();
|
||||
}
|
||||
}}
|
||||
onBlur={(newTitle) => {
|
||||
if (newTitle !== note.title) {
|
||||
api.renameCard(note.noteId, newTitle);
|
||||
}
|
||||
api.dismissEditingTitle();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AddNewColumn({ viewConfig, saveConfig }: { viewConfig?: BoardViewData, saveConfig: (data: BoardViewData) => void }) {
|
||||
const [ isCreatingNewColumn, setIsCreatingNewColumn ] = useState(false);
|
||||
const columnNameRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user