mirror of
https://github.com/docmost/docmost.git
synced 2026-08-28 09:17:06 +08:00
feat(ee): bases (#2295)
* feat(ee): bases Table and kanban UI, formula engine package, and the base-embed editor extension. * - default status - type fix - error helper * fix: base trash list handling * feat: base nodeview menu * feat: translation * fix number precision * feat(base): add focused-cell atom and cell coordinate types * feat(base): add cell focus-ring style * feat(base): add pure next-cell navigation helper * feat(base): keyboard navigation controller and grid wiring * update offerings * feat(base): cell focus ring, click-to-focus, and gridcell ARIA * feat(base): row ARIA index and selected state * feat(base): seed editor value on type-to-edit for free-text cells * feat(base): make column headers keyboard-focusable as tab stops * fix(base): remove focus outline on grid container * fix(base): show cell focus ring only while the grid is focused * feat(base): keyboard-navigate the row-number column for selection * fix(base): sync header/body horizontal scroll on header focus; expand row via Space, drop expander from tab order * fix(base): tab from long-text editor moves to next cell instead of leaving the table * fix(base): close view popovers on Escape regardless of focus; drop redundant property switch tab stop * fix(base): show cell focus ring only while the grid body itself is focused * fix(base): render view-tab rename as an inline pill so the tab band height stays put * fix(base): refer to the feature as 'base' rather than 'database' * fix: change permissions object shape * license file * fix tsconfig * fix base cache * fix: preserve sidebar title/icon on partial page updates * fix: skip duplicate row fetch when opening new kanban card * fix refetch * fix focus * fix spacing * fix(base): select grid cell on mousedown to avoid stale focus ring flash The focus ring is gated on the grid having DOM focus (.bodyGrid:focus .cellFocused), but the focusedCell atom is never cleared when the grid blurs. Clicking outside hides the ring via the :focus gate while the atom still points at the old cell. Selection was committed on click (mouseup), while the grid receives focus on mousedown. Clicking a new cell re-focused the grid before the atom updated, briefly painting the ring on the previously selected cell. Commit selection on mousedown so the atom updates in the same event that grants focus, before the browser paints. * fix: activate New row button via keyboard (Enter/Space) The New row control is a role=button div with no keydown handler, so Enter/Space never triggered it. It also lives inside the grid element, whose native keydown listener caught the Enter and ran cell navigation against the previously focused cell. Add Enter/Space activation to the button, and make the grid keyboard handler ignore keydowns that originate from a focusable child rather than the grid element itself, so in-grid controls handle their own keys. * fix(base): keep add-property popover within viewport on mobile Opened from the row detail modal, the create-property popover anchors to the bottom Add property button and flips upward on small screens, clipping its top (name field, formula editor) off-screen with no way to scroll to it. Bound the dropdown to the available height with the floating-ui size middleware and give it an internal scroll container. Disable react-remove-scroll isolation on the modal so the body-portaled popover can scroll on touch while the modal scroll lock stays active. * fix(base): enable grid cell editing on touch devices Cells could only enter edit mode via double-click or a physical keyboard, so touch devices had no way to edit a cell. Treat a touch/pen tap as the edit gesture, distinguishing a tap from a scroll by movement and branching per pointer type so mouse double-click stays unchanged. Also reveal the row expand button on hover-less devices so the row detail view stays reachable. * feat(editor): add base and kanban inserts to the toolbar * feat(base): insert row below via Shift+Enter on the primary cell * fix(base): place caret at end instead of selecting all when editing cells * fix(base): prevent popover inputs from losing focus on mobile in row detail modal * fix grid cells on mobile * sync * fix: read-only export * feat(base): add prefixed nanoid id schemas and generators * feat(base): enforce strict property/choice id validation * feat(base): make property id varchar with per-base composite pk * feat(base): pass property id as text to cell extractors * feat(base): scope property lookups per base and generate property ids in repo * feat(base): generate status template choice ids as nanoid * feat(base): generate choice ids as nanoid on the client * chore(base): seed choice ids with nanoid * fix(base): mint kanban choice ids as nanoid * sync * sync * sync
This commit is contained in:
Philip Okugbe
@@ -0,0 +1,213 @@
|
||||
import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import clsx from "clsx";
|
||||
import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||
import { extractClosestEdge, type Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
|
||||
import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
|
||||
import { reorder } from "@atlaskit/pragmatic-drag-and-drop/reorder";
|
||||
import { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
|
||||
import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
|
||||
import { IBase, IBaseRow, IBaseView, FilterGroup, KANBAN_CARD_DRAG_TYPE, KANBAN_COLUMN_DRAG_TYPE } from "@/ee/base/types/base.types";
|
||||
import { useKanbanColumns } from "@/ee/base/hooks/use-kanban-columns";
|
||||
import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
|
||||
import { useKanbanMoveCardMutation } from "@/ee/base/queries/base-row-query";
|
||||
import { buildColumnFilter } from "@/ee/base/services/kanban-column-filter";
|
||||
import { resolveCardDrop } from "@/ee/base/hooks/use-kanban-card-drop";
|
||||
import { useKanbanBoardAutoScroll } from "@/ee/base/hooks/use-kanban-autoscroll";
|
||||
import { useRowDetailModal } from "@/ee/base/hooks/use-row-detail-modal";
|
||||
import { KanbanColumn } from "@/ee/base/components/kanban/kanban-column";
|
||||
import { KanbanEmptyState } from "@/ee/base/components/kanban/kanban-empty-state";
|
||||
import classes from "@/ee/base/styles/kanban.module.css";
|
||||
|
||||
type BaseKanbanProps = {
|
||||
base: IBase;
|
||||
view: IBaseView;
|
||||
pageId: string;
|
||||
embedded?: boolean;
|
||||
editable: boolean;
|
||||
viewFilter: FilterGroup | undefined;
|
||||
};
|
||||
|
||||
export function BaseKanban({ base, view, pageId, embedded, editable, viewFilter }: BaseKanbanProps) {
|
||||
const { t } = useTranslation();
|
||||
const { groupByPropertyId, columns, hasValidGroupBy } = useKanbanColumns(base, view);
|
||||
const updateView = useUpdateViewMutation();
|
||||
const moveCard = useKanbanMoveCardMutation();
|
||||
const { openRow } = useRowDetailModal(pageId);
|
||||
|
||||
const openRowRef = useRef(openRow);
|
||||
useLayoutEffect(() => { openRowRef.current = openRow; });
|
||||
const handleOpenRow = useCallback((id: string) => openRowRef.current(id), []);
|
||||
|
||||
const boardRef = useRef<HTMLDivElement>(null);
|
||||
useKanbanBoardAutoScroll(boardRef, pageId);
|
||||
|
||||
const cardRefs = useRef<Map<string, { columnKey: string; el: HTMLDivElement }>>(new Map());
|
||||
|
||||
const registerCardRef = useCallback((rowId: string, columnKey: string, el: HTMLDivElement | null) => {
|
||||
if (el) {
|
||||
cardRefs.current.set(rowId, { columnKey, el });
|
||||
} else {
|
||||
cardRefs.current.delete(rowId);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const columnRows = useRef<Map<string, IBaseRow[]>>(new Map());
|
||||
|
||||
const registerColumnRows = useCallback((key: string, rows: IBaseRow[]) => {
|
||||
columnRows.current.set(key, rows);
|
||||
}, []);
|
||||
|
||||
const hideColumn = useCallback(
|
||||
(key: string) => {
|
||||
const next = Array.from(new Set([...(view.config?.hiddenChoiceIds ?? []), key]));
|
||||
updateView.mutate({ viewId: view.id, pageId, config: { hiddenChoiceIds: next } });
|
||||
},
|
||||
[updateView, view.id, view.config?.hiddenChoiceIds, pageId],
|
||||
);
|
||||
|
||||
const onCardDropRef = useRef<(args: {
|
||||
draggedRowId: string;
|
||||
sourceColumnKey: string;
|
||||
targetColumnKey: string;
|
||||
targetRowId: string | null;
|
||||
edge: Edge | null;
|
||||
}) => void>(() => {});
|
||||
useLayoutEffect(() => {
|
||||
onCardDropRef.current = ({ draggedRowId, sourceColumnKey, targetColumnKey, targetRowId, edge }) => {
|
||||
if (!groupByPropertyId) return;
|
||||
const targetColumnRows = columnRows.current.get(targetColumnKey) ?? [];
|
||||
const result = resolveCardDrop({
|
||||
draggedRowId,
|
||||
targetRowId,
|
||||
edge: edge === "left" || edge === "right" ? null : edge,
|
||||
targetColumnKey,
|
||||
sourceColumnKey,
|
||||
targetColumnRows,
|
||||
});
|
||||
if (!result) return;
|
||||
const sourceFilter = buildColumnFilter(viewFilter, groupByPropertyId, sourceColumnKey);
|
||||
const destFilter = buildColumnFilter(viewFilter, groupByPropertyId, targetColumnKey);
|
||||
moveCard.mutate({
|
||||
pageId,
|
||||
rowId: draggedRowId,
|
||||
sourceColumnFilter: sourceFilter,
|
||||
destColumnFilter: destFilter,
|
||||
columnChanged: result.columnChanged,
|
||||
groupByPropertyId,
|
||||
destChoiceValue: result.destChoiceValue,
|
||||
position: result.position,
|
||||
});
|
||||
const el = cardRefs.current.get(draggedRowId)?.el;
|
||||
if (el) triggerPostMoveFlash(el);
|
||||
const targetColumnName = columns.find((c) => c.key === targetColumnKey)?.name ?? "";
|
||||
liveRegion.announce(t("Moved card to {{column}}", { column: targetColumnName }));
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
return monitorForElements({
|
||||
canMonitor: ({ source }) =>
|
||||
source.data?.type === KANBAN_CARD_DRAG_TYPE && source.data?.pageId === pageId,
|
||||
onDrop: ({ location, source }) => {
|
||||
const target = location.current.dropTargets[0];
|
||||
if (!target) return;
|
||||
const draggedRowId = source.data.rowId as string;
|
||||
const sourceColumnKey = source.data.columnKey as string;
|
||||
const targetColumnKey = target.data.columnKey as string;
|
||||
const isColumnBody = target.data.isColumnBody === true;
|
||||
const targetRowId = isColumnBody ? null : (target.data.rowId as string);
|
||||
const edge = isColumnBody ? null : extractClosestEdge(target.data);
|
||||
onCardDropRef.current({ draggedRowId, sourceColumnKey, targetColumnKey, targetRowId, edge });
|
||||
},
|
||||
});
|
||||
}, [pageId]);
|
||||
|
||||
const onColumnDropRef = useRef<(args: {
|
||||
sourceColumnKey: string;
|
||||
targetColumnKey: string;
|
||||
edge: Edge | null;
|
||||
}) => void>(() => {});
|
||||
useLayoutEffect(() => {
|
||||
onColumnDropRef.current = ({ sourceColumnKey, targetColumnKey, edge }) => {
|
||||
const fullOrder: string[] = view.config?.choiceOrder?.length
|
||||
? view.config.choiceOrder
|
||||
: columns.map((c) => c.key);
|
||||
|
||||
const startIndex = fullOrder.indexOf(sourceColumnKey);
|
||||
const indexOfTarget = fullOrder.indexOf(targetColumnKey);
|
||||
|
||||
if (startIndex === -1 || indexOfTarget === -1) {
|
||||
const visibleKeys = columns.map((c) => c.key);
|
||||
const visStart = visibleKeys.indexOf(sourceColumnKey);
|
||||
const visTarget = visibleKeys.indexOf(targetColumnKey);
|
||||
if (visStart === -1 || visTarget === -1) return;
|
||||
const finishIndex = getReorderDestinationIndex({
|
||||
startIndex: visStart,
|
||||
indexOfTarget: visTarget,
|
||||
closestEdgeOfTarget: edge,
|
||||
axis: "horizontal",
|
||||
});
|
||||
if (finishIndex === visStart) return;
|
||||
const reorderedVisible = reorder({ list: visibleKeys, startIndex: visStart, finishIndex });
|
||||
updateView.mutate({ viewId: view.id, pageId, config: { choiceOrder: [...reorderedVisible, ...(view.config?.hiddenChoiceIds ?? [])] } });
|
||||
} else {
|
||||
const finishIndex = getReorderDestinationIndex({
|
||||
startIndex,
|
||||
indexOfTarget,
|
||||
closestEdgeOfTarget: edge,
|
||||
axis: "horizontal",
|
||||
});
|
||||
if (finishIndex === startIndex) return;
|
||||
const newChoiceOrder = reorder({ list: fullOrder, startIndex, finishIndex });
|
||||
updateView.mutate({ viewId: view.id, pageId, config: { choiceOrder: newChoiceOrder } });
|
||||
}
|
||||
|
||||
const targetColumnName = columns.find((c) => c.key === targetColumnKey)?.name ?? "";
|
||||
liveRegion.announce(t("Moved column to {{column}}", { column: targetColumnName }));
|
||||
};
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
return monitorForElements({
|
||||
canMonitor: ({ source }) =>
|
||||
source.data?.type === KANBAN_COLUMN_DRAG_TYPE && source.data?.pageId === pageId,
|
||||
onDrop: ({ location, source }) => {
|
||||
const target = location.current.dropTargets[0];
|
||||
if (!target) return;
|
||||
const sourceColumnKey = source.data.columnKey as string;
|
||||
const targetColumnKey = target.data.columnKey as string;
|
||||
const edge = extractClosestEdge(target.data);
|
||||
onColumnDropRef.current({ sourceColumnKey, targetColumnKey, edge });
|
||||
},
|
||||
});
|
||||
}, [pageId]);
|
||||
|
||||
if (!hasValidGroupBy) {
|
||||
return <KanbanEmptyState base={base} view={view} pageId={pageId} editable={editable} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={boardRef}
|
||||
className={clsx(classes.board, embedded ? classes.boardEmbed : classes.boardFullPage)}
|
||||
>
|
||||
{columns.map((column) => (
|
||||
<KanbanColumn
|
||||
key={column.key}
|
||||
base={base}
|
||||
view={view}
|
||||
pageId={pageId}
|
||||
column={column}
|
||||
viewFilter={viewFilter}
|
||||
groupByPropertyId={groupByPropertyId!}
|
||||
canEdit={editable}
|
||||
onOpenRow={handleOpenRow}
|
||||
onHide={hideColumn}
|
||||
registerCardRef={registerCardRef}
|
||||
registerColumnRows={registerColumnRows}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,339 @@
|
||||
import { Text, Badge, Tooltip, Group } from "@mantine/core";
|
||||
import { IconCheck, IconFileDescription } from "@tabler/icons-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { sanitizeUrl } from "@docmost/editor-ext";
|
||||
import {
|
||||
IBaseProperty,
|
||||
SelectTypeOptions,
|
||||
NumberTypeOptions,
|
||||
DateTypeOptions,
|
||||
isFormulaErrorCell,
|
||||
} from "@/ee/base/types/base.types";
|
||||
import { choiceColor } from "@/ee/base/components/cells/choice-color";
|
||||
import { ChoiceBadge } from "@/ee/base/components/cells/choice-badge";
|
||||
import { BadgeOverflowList } from "@/ee/base/components/cells/badge-overflow";
|
||||
import { PersonReadList } from "@/ee/base/components/cells/person-read-list";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar";
|
||||
import { useReferenceStore, useResolvePage } from "@/ee/base/reference/reference-store";
|
||||
import {
|
||||
formatNumber,
|
||||
formatDateDisplay,
|
||||
formatTimestamp,
|
||||
formatLongTextPreview,
|
||||
} from "@/ee/base/formatters/cell-formatters";
|
||||
import { buildPageUrl, getPageTitle } from "@/features/page/page.utils";
|
||||
import { FileValue } from "@/ee/base/components/cells/cell-file";
|
||||
import cellClasses from "@/ee/base/styles/cells.module.css";
|
||||
|
||||
type CardFieldProps = {
|
||||
property: IBaseProperty;
|
||||
value: unknown;
|
||||
pageId: string;
|
||||
};
|
||||
|
||||
export function CardField({ property, value, pageId }: CardFieldProps) {
|
||||
if (value === null || value === undefined || value === "") return null;
|
||||
if (Array.isArray(value) && value.length === 0) return null;
|
||||
|
||||
switch (property.type) {
|
||||
case "text":
|
||||
return <TextField value={value} />;
|
||||
case "longText":
|
||||
return <LongTextField value={value} />;
|
||||
case "number":
|
||||
return <NumberField value={value} property={property} />;
|
||||
case "select":
|
||||
case "status":
|
||||
return <SelectField value={value} property={property} />;
|
||||
case "multiSelect":
|
||||
return <MultiSelectField value={value} property={property} />;
|
||||
case "date":
|
||||
return <DateField value={value} property={property} />;
|
||||
case "createdAt":
|
||||
case "lastEditedAt":
|
||||
return <TimestampField value={value} />;
|
||||
case "person":
|
||||
return <PersonField value={value} pageId={pageId} />;
|
||||
case "lastEditedBy":
|
||||
return <LastEditedByField value={value} pageId={pageId} />;
|
||||
case "file":
|
||||
return <FileField value={value} />;
|
||||
case "page":
|
||||
return <PageField value={value} basePageId={pageId} propertyPageId={property.pageId} />;
|
||||
case "checkbox":
|
||||
return <CheckboxField value={value} />;
|
||||
case "url":
|
||||
return <UrlField value={value} />;
|
||||
case "email":
|
||||
return <EmailField value={value} />;
|
||||
case "formula":
|
||||
return <FormulaField value={value} property={property} />;
|
||||
default:
|
||||
return (
|
||||
<Text size="xs" lineClamp={1}>
|
||||
{String(value)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function TextField({ value }: { value: unknown }) {
|
||||
const text = typeof value === "string" ? value : String(value);
|
||||
if (!text) return null;
|
||||
return (
|
||||
<Text size="sm" lineClamp={2}>
|
||||
{text}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
function LongTextField({ value }: { value: unknown }) {
|
||||
const preview = formatLongTextPreview(typeof value === "string" ? value : undefined);
|
||||
if (!preview) return null;
|
||||
return (
|
||||
<Text size="xs" c="dimmed" lineClamp={2}>
|
||||
{preview}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
function NumberField({ value, property }: { value: unknown; property: IBaseProperty }) {
|
||||
const num = typeof value === "number" ? value : null;
|
||||
if (num === null) return null;
|
||||
const formatted = formatNumber(num, property.typeOptions as NumberTypeOptions | undefined);
|
||||
if (!formatted) return null;
|
||||
return <Text size="sm">{formatted}</Text>;
|
||||
}
|
||||
|
||||
function SelectField({ value, property }: { value: unknown; property: IBaseProperty }) {
|
||||
const choices = (property.typeOptions as SelectTypeOptions | undefined)?.choices ?? [];
|
||||
const selectedId = typeof value === "string" ? value : null;
|
||||
const choice = choices.find((c) => c.id === selectedId);
|
||||
if (!choice) return null;
|
||||
return (
|
||||
<ChoiceBadge
|
||||
name={choice.name}
|
||||
style={{ ...choiceColor(choice.color), alignSelf: "flex-start" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function MultiSelectField({ value, property }: { value: unknown; property: IBaseProperty }) {
|
||||
const choices = (property.typeOptions as SelectTypeOptions | undefined)?.choices ?? [];
|
||||
const selectedIds = Array.isArray(value) ? (value as string[]) : [];
|
||||
const selectedChoices = choices.filter((c) => selectedIds.includes(c.id));
|
||||
if (selectedChoices.length === 0) return null;
|
||||
const chips = selectedChoices.map((choice) => (
|
||||
<span key={choice.id} className={cellClasses.badge} style={choiceColor(choice.color)}>
|
||||
{choice.name}
|
||||
</span>
|
||||
));
|
||||
return (
|
||||
<BadgeOverflowList
|
||||
chips={chips}
|
||||
measureKey={selectedChoices.map((c) => `${c.id}:${c.name}`).join("|")}
|
||||
tooltipLabel={selectedChoices.map((c) => c.name).join(", ")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DateField({ value, property }: { value: unknown; property: IBaseProperty }) {
|
||||
const dateStr = typeof value === "string" ? value : null;
|
||||
const formatted = formatDateDisplay(dateStr, property.typeOptions as DateTypeOptions | undefined);
|
||||
if (!formatted) return null;
|
||||
return (
|
||||
<Text size="xs" c="dimmed">
|
||||
{formatted}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
function TimestampField({ value }: { value: unknown }) {
|
||||
const formatted = formatTimestamp(typeof value === "string" ? value : null);
|
||||
if (!formatted) return null;
|
||||
return (
|
||||
<Text size="xs" c="dimmed">
|
||||
{formatted}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
function PersonField({ value, pageId }: { value: unknown; pageId: string }) {
|
||||
const store = useReferenceStore(pageId);
|
||||
const personIds = Array.isArray(value)
|
||||
? (value as string[])
|
||||
: typeof value === "string"
|
||||
? [value]
|
||||
: [];
|
||||
if (personIds.length === 0) return null;
|
||||
return <PersonReadList personIds={personIds} users={store.users} />;
|
||||
}
|
||||
|
||||
function LastEditedByField({ value, pageId }: { value: unknown; pageId: string }) {
|
||||
const userId = typeof value === "string" ? value : null;
|
||||
const store = useReferenceStore(pageId);
|
||||
if (!userId) return null;
|
||||
const user = store.users[userId] ?? null;
|
||||
const name = user?.name ?? userId.substring(0, 8);
|
||||
return (
|
||||
<Group gap={6} wrap="nowrap" style={{ overflow: "hidden" }}>
|
||||
<CustomAvatar avatarUrl={user?.avatarUrl ?? ""} name={name} size={20} radius="xl" />
|
||||
<Tooltip label={name} withinPortal openDelay={400} disabled={!name}>
|
||||
<Text size="xs" truncate>
|
||||
{name}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
function FileField({ value }: { value: unknown }) {
|
||||
const files = Array.isArray(value)
|
||||
? (value as FileValue[]).filter((f) => f && typeof f === "object" && "id" in f && "fileName" in f)
|
||||
: [];
|
||||
if (files.length === 0) return null;
|
||||
const maxVisible = 2;
|
||||
const visible = files.slice(0, maxVisible);
|
||||
const overflow = files.length - maxVisible;
|
||||
return (
|
||||
<div className={cellClasses.fileGroup}>
|
||||
{visible.map((file) => (
|
||||
<span key={file.id} className={cellClasses.fileBadge}>
|
||||
{file.fileName}
|
||||
</span>
|
||||
))}
|
||||
{overflow > 0 && <span className={cellClasses.overflowCount}>+{overflow}</span>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PageField({
|
||||
value,
|
||||
basePageId,
|
||||
propertyPageId,
|
||||
}: {
|
||||
value: unknown;
|
||||
basePageId: string;
|
||||
propertyPageId: string;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const pageId = typeof value === "string" && value.length > 0 ? value : null;
|
||||
const resolvedPage = useResolvePage(propertyPageId, pageId);
|
||||
|
||||
if (!pageId) return null;
|
||||
if (resolvedPage === undefined) return null;
|
||||
|
||||
if (resolvedPage === null) {
|
||||
return (
|
||||
<span className={cellClasses.pageMissing}>
|
||||
<IconFileDescription size={14} />
|
||||
<span>Page not found</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const title = getPageTitle(resolvedPage.title, undefined, t);
|
||||
const spaceSlug = resolvedPage.space?.slug ?? "";
|
||||
const url = buildPageUrl(spaceSlug, resolvedPage.slugId, title);
|
||||
|
||||
return (
|
||||
<Tooltip label={title} withinPortal openDelay={400} disabled={!title}>
|
||||
<Link
|
||||
to={url}
|
||||
className={cellClasses.pagePill}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onDoubleClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{resolvedPage.icon ? (
|
||||
<span className={cellClasses.pagePillIcon}>{resolvedPage.icon}</span>
|
||||
) : (
|
||||
<IconFileDescription size={14} className={cellClasses.pagePillIconFallback} />
|
||||
)}
|
||||
<span className={cellClasses.pagePillText}>{title}</span>
|
||||
</Link>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
function CheckboxField({ value }: { value: unknown }) {
|
||||
if (value !== true) return null;
|
||||
return <IconCheck size={14} />;
|
||||
}
|
||||
|
||||
function UrlField({ value }: { value: unknown }) {
|
||||
const displayValue = typeof value === "string" ? value : "";
|
||||
if (!displayValue) return null;
|
||||
const safeHref = sanitizeUrl(displayValue);
|
||||
if (!safeHref) {
|
||||
return (
|
||||
<Text size="xs" lineClamp={1}>
|
||||
{displayValue}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Tooltip label={displayValue} multiline withinPortal openDelay={400} maw={420}>
|
||||
<a
|
||||
className={cellClasses.urlLink}
|
||||
href={safeHref}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ fontSize: "var(--mantine-font-size-xs)" }}
|
||||
>
|
||||
{displayValue}
|
||||
</a>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
function EmailField({ value }: { value: unknown }) {
|
||||
const displayValue = typeof value === "string" ? value : "";
|
||||
if (!displayValue) return null;
|
||||
return (
|
||||
<Tooltip label={displayValue} multiline withinPortal openDelay={400} maw={420}>
|
||||
<a
|
||||
className={cellClasses.emailLink}
|
||||
href={`mailto:${displayValue}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{ fontSize: "var(--mantine-font-size-xs)" }}
|
||||
>
|
||||
{displayValue}
|
||||
</a>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
function FormulaField({ value, property }: { value: unknown; property: IBaseProperty }) {
|
||||
if (isFormulaErrorCell(value)) {
|
||||
return (
|
||||
<Tooltip label={`${value.__err}: ${value.msg}`} withinPortal>
|
||||
<Badge color="red" variant="light" size="sm">
|
||||
#ERROR
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
const opts = (property.typeOptions ?? {}) as { resultType?: string };
|
||||
const resultType = opts.resultType ?? "null";
|
||||
|
||||
if (resultType === "number") {
|
||||
return <NumberField value={value} property={property} />;
|
||||
}
|
||||
if (resultType === "boolean") {
|
||||
return <CheckboxField value={value} />;
|
||||
}
|
||||
if (resultType === "date") {
|
||||
return <DateField value={value} property={property} />;
|
||||
}
|
||||
|
||||
const text = typeof value === "string" ? value : value != null ? String(value) : null;
|
||||
if (!text) return null;
|
||||
return (
|
||||
<Text size="sm" lineClamp={2}>
|
||||
{text}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import classes from "@/ee/base/styles/kanban.module.css";
|
||||
|
||||
type KanbanAddCardButtonProps = {
|
||||
onAddCard: () => void;
|
||||
};
|
||||
|
||||
export function KanbanAddCardButton({ onAddCard }: KanbanAddCardButtonProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div
|
||||
className={classes.addCard}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onAddCard}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onAddCard();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconPlus size={16} />
|
||||
{t("New row")}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { Popover, Switch, Stack, Text, Group, UnstyledButton, ScrollArea } from "@mantine/core";
|
||||
import { IconGripVertical, type IconLetterT } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IBase, IBaseProperty, IBaseView } from "@/ee/base/types/base.types";
|
||||
import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
|
||||
import { propertyTypes } from "@/ee/base/property-types/property-type.registry";
|
||||
import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
|
||||
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
||||
import {
|
||||
draggable,
|
||||
dropTargetForElements,
|
||||
} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||
import {
|
||||
attachClosestEdge,
|
||||
extractClosestEdge,
|
||||
type Edge,
|
||||
} from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
|
||||
import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
|
||||
import { reorder } from "@atlaskit/pragmatic-drag-and-drop/reorder";
|
||||
import cellClasses from "@/ee/base/styles/cells.module.css";
|
||||
import propClasses from "@/ee/base/styles/property.module.css";
|
||||
|
||||
const DRAG_TYPE = "base-card-property";
|
||||
|
||||
type KanbanCardPropertiesProps = {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
base: IBase;
|
||||
view: IBaseView;
|
||||
pageId: string;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function KanbanCardProperties({
|
||||
opened,
|
||||
onClose,
|
||||
base,
|
||||
view,
|
||||
pageId,
|
||||
children,
|
||||
}: KanbanCardPropertiesProps) {
|
||||
const { t } = useTranslation();
|
||||
const updateView = useUpdateViewMutation();
|
||||
|
||||
const nonPrimaryProperties = base.properties.filter((p) => !p.isPrimary);
|
||||
const visibleIds = view.config?.visiblePropertyIds ?? [];
|
||||
|
||||
const savedOrder = view.config?.propertyOrder ?? [];
|
||||
const orderedProperties = [
|
||||
...savedOrder
|
||||
.map((id) => nonPrimaryProperties.find((p) => p.id === id))
|
||||
.filter((p): p is IBaseProperty => p !== undefined),
|
||||
...nonPrimaryProperties.filter((p) => !savedOrder.includes(p.id)),
|
||||
];
|
||||
|
||||
const primaryProperty = base.properties.find((p) => p.isPrimary);
|
||||
const PrimaryIcon = primaryProperty
|
||||
? propertyTypes.find((pt) => pt.type === primaryProperty.type)?.icon
|
||||
: undefined;
|
||||
|
||||
const handleToggle = useCallback(
|
||||
(propertyId: string, checked: boolean) => {
|
||||
const next = checked
|
||||
? [...visibleIds, propertyId]
|
||||
: visibleIds.filter((id) => id !== propertyId);
|
||||
updateView.mutate({ viewId: view.id, pageId, config: { visiblePropertyIds: next } });
|
||||
},
|
||||
[updateView, view.id, visibleIds, pageId],
|
||||
);
|
||||
|
||||
const handleReorder = useCallback(
|
||||
(activeId: string, targetId: string, edge: Edge) => {
|
||||
const startIndex = orderedProperties.findIndex((p) => p.id === activeId);
|
||||
const indexOfTarget = orderedProperties.findIndex((p) => p.id === targetId);
|
||||
if (startIndex === -1 || indexOfTarget === -1) return;
|
||||
const finishIndex = getReorderDestinationIndex({
|
||||
startIndex,
|
||||
indexOfTarget,
|
||||
closestEdgeOfTarget: edge,
|
||||
axis: "vertical",
|
||||
});
|
||||
if (finishIndex === startIndex) return;
|
||||
const reordered = reorder({ list: orderedProperties, startIndex, finishIndex });
|
||||
updateView.mutate({
|
||||
viewId: view.id,
|
||||
pageId,
|
||||
config: { propertyOrder: reordered.map((p) => p.id) },
|
||||
});
|
||||
},
|
||||
[orderedProperties, updateView, view.id, pageId],
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={opened}
|
||||
onChange={(o) => {
|
||||
if (!o) onClose();
|
||||
}}
|
||||
onClose={onClose}
|
||||
position="bottom-end"
|
||||
shadow="md"
|
||||
width={260}
|
||||
trapFocus
|
||||
closeOnEscape
|
||||
closeOnClickOutside
|
||||
withinPortal
|
||||
>
|
||||
<Popover.Target>{children}</Popover.Target>
|
||||
<Popover.Dropdown p="xs">
|
||||
<Stack gap={4}>
|
||||
<Group justify="space-between" px={4} py={2}>
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("Card properties")}
|
||||
</Text>
|
||||
</Group>
|
||||
<ScrollArea.Autosize mah="min(60vh, 420px)" scrollbarSize={6} offsetScrollbars>
|
||||
<Stack gap={0}>
|
||||
{primaryProperty && (
|
||||
<div className={cellClasses.menuItem} style={{ paddingLeft: 4, cursor: "default" }}>
|
||||
<div className={propClasses.dragHandle} style={{ visibility: "hidden" }}>
|
||||
<IconGripVertical size={14} />
|
||||
</div>
|
||||
<Group gap={8} wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
|
||||
{PrimaryIcon && <PrimaryIcon size={14} style={{ flexShrink: 0 }} />}
|
||||
<Text size="sm" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{primaryProperty.name}
|
||||
</Text>
|
||||
</Group>
|
||||
<Switch
|
||||
size="xs"
|
||||
checked
|
||||
disabled
|
||||
onChange={() => {}}
|
||||
styles={{ track: { cursor: "default" } }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{orderedProperties.map((p) => {
|
||||
const isVisible = visibleIds.includes(p.id);
|
||||
const typeConfig = propertyTypes.find((pt) => pt.type === p.type);
|
||||
const TypeIcon = typeConfig?.icon;
|
||||
return (
|
||||
<SortablePropertyRow
|
||||
key={p.id}
|
||||
property={p}
|
||||
isVisible={isVisible}
|
||||
TypeIcon={TypeIcon}
|
||||
onToggle={handleToggle}
|
||||
onReorder={handleReorder}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</ScrollArea.Autosize>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
type SortablePropertyRowProps = {
|
||||
property: IBaseProperty;
|
||||
isVisible: boolean;
|
||||
TypeIcon: typeof IconLetterT | undefined;
|
||||
onToggle: (propertyId: string, checked: boolean) => void;
|
||||
onReorder: (activeId: string, targetId: string, edge: Edge) => void;
|
||||
};
|
||||
|
||||
function SortablePropertyRow({
|
||||
property,
|
||||
isVisible,
|
||||
TypeIcon,
|
||||
onToggle,
|
||||
onReorder,
|
||||
}: SortablePropertyRowProps) {
|
||||
const rowRef = useRef<HTMLDivElement>(null);
|
||||
const handleRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
|
||||
|
||||
const onReorderRef = useRef(onReorder);
|
||||
useLayoutEffect(() => {
|
||||
onReorderRef.current = onReorder;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const row = rowRef.current;
|
||||
const handle = handleRef.current;
|
||||
if (!row || !handle) return;
|
||||
return combine(
|
||||
draggable({
|
||||
element: row,
|
||||
dragHandle: handle,
|
||||
getInitialData: () => ({ type: DRAG_TYPE, propertyId: property.id }),
|
||||
onDragStart: () => setIsDragging(true),
|
||||
onDrop: () => setIsDragging(false),
|
||||
}),
|
||||
dropTargetForElements({
|
||||
element: row,
|
||||
canDrop: ({ source }) =>
|
||||
source.data.type === DRAG_TYPE && source.data.propertyId !== property.id,
|
||||
getData: ({ input, element }) =>
|
||||
attachClosestEdge(
|
||||
{ propertyId: property.id },
|
||||
{ input, element, allowedEdges: ["top", "bottom"] },
|
||||
),
|
||||
onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
|
||||
onDragLeave: () => setClosestEdge(null),
|
||||
onDrop: ({ source, self }) => {
|
||||
setClosestEdge(null);
|
||||
const edge = extractClosestEdge(self.data);
|
||||
if (!edge) return;
|
||||
onReorderRef.current(source.data.propertyId as string, property.id, edge);
|
||||
},
|
||||
}),
|
||||
);
|
||||
}, [property.id]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rowRef}
|
||||
style={{ position: "relative", opacity: isDragging ? 0.4 : 1 }}
|
||||
>
|
||||
<UnstyledButton
|
||||
className={cellClasses.menuItem}
|
||||
onClick={() => onToggle(property.id, !isVisible)}
|
||||
style={{ paddingLeft: 4 }}
|
||||
>
|
||||
<div ref={handleRef} className={propClasses.dragHandle} onClick={(e) => e.stopPropagation()}>
|
||||
<IconGripVertical size={14} style={{ opacity: 0.4 }} />
|
||||
</div>
|
||||
<Group gap={8} wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
|
||||
{TypeIcon && <TypeIcon size={14} style={{ flexShrink: 0 }} />}
|
||||
<Text size="sm" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{property.name}
|
||||
</Text>
|
||||
</Group>
|
||||
<Switch
|
||||
size="xs"
|
||||
checked={isVisible}
|
||||
onChange={() => {}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
styles={{ track: { cursor: "pointer" } }}
|
||||
/>
|
||||
</UnstyledButton>
|
||||
{closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { forwardRef, useCallback, useRef } from "react";
|
||||
import clsx from "clsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IBase, IBaseRow, IBaseView } from "@/ee/base/types/base.types";
|
||||
import { CardField } from "@/ee/base/components/kanban/card-field/card-field";
|
||||
import { useKanbanCardDnd } from "@/ee/base/hooks/use-kanban-card-dnd";
|
||||
import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
|
||||
import classes from "@/ee/base/styles/kanban.module.css";
|
||||
|
||||
type KanbanCardProps = {
|
||||
base: IBase;
|
||||
view: IBaseView;
|
||||
row: IBaseRow;
|
||||
columnKey: string;
|
||||
onOpen: (rowId: string) => void;
|
||||
};
|
||||
|
||||
export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(
|
||||
function KanbanCard({ base, view, row, columnKey, onOpen }, ref) {
|
||||
const { t } = useTranslation();
|
||||
const primary = base.properties.find((p) => p.isPrimary);
|
||||
const title = primary ? (row.cells[primary.id] as string | undefined) : undefined;
|
||||
|
||||
const visibleIds = view.config?.visiblePropertyIds ?? [];
|
||||
const propertyOrder = view.config?.propertyOrder;
|
||||
|
||||
const cardProps = base.properties.filter(
|
||||
(p) => visibleIds.includes(p.id) && !p.isPrimary,
|
||||
);
|
||||
|
||||
if (propertyOrder) {
|
||||
cardProps.sort(
|
||||
(a, b) => propertyOrder.indexOf(a.id) - propertyOrder.indexOf(b.id),
|
||||
);
|
||||
}
|
||||
|
||||
const cardRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const setCardEl = useCallback(
|
||||
(node: HTMLDivElement | null) => {
|
||||
cardRef.current = node;
|
||||
if (typeof ref === "function") ref(node);
|
||||
else if (ref) ref.current = node;
|
||||
},
|
||||
[ref],
|
||||
);
|
||||
|
||||
const { closestEdge, isDragging } = useKanbanCardDnd({
|
||||
cardRef,
|
||||
rowId: row.id,
|
||||
columnKey,
|
||||
pageId: base.id,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setCardEl}
|
||||
className={clsx(classes.card, isDragging && classes.cardDragging)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => onOpen(row.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onOpen(row.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{closestEdge === "top" && <BaseDropEdgeIndicator edge="top" />}
|
||||
<div className={clsx(classes.cardTitle, !title && classes.cardUntitled)}>
|
||||
{title || t("Untitled")}
|
||||
</div>
|
||||
{cardProps.map((property) => (
|
||||
<CardField
|
||||
key={property.id}
|
||||
property={property}
|
||||
value={row.cells[property.id]}
|
||||
pageId={base.id}
|
||||
/>
|
||||
))}
|
||||
{closestEdge === "bottom" && <BaseDropEdgeIndicator edge="bottom" />}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,76 @@
|
||||
import { useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ActionIcon, Menu, Text } from "@mantine/core";
|
||||
import { IconDots, IconPlus, IconGripVertical } from "@tabler/icons-react";
|
||||
import clsx from "clsx";
|
||||
import { KanbanColumn } from "@/ee/base/types/base.types";
|
||||
import { choiceColor } from "@/ee/base/components/cells/choice-color";
|
||||
import { useKanbanColumnDnd } from "@/ee/base/hooks/use-kanban-column-dnd";
|
||||
import { BaseDropEdgeIndicator } from "@/ee/base/components/grid/base-drop-edge-indicator";
|
||||
import classes from "@/ee/base/styles/kanban.module.css";
|
||||
|
||||
type KanbanColumnHeaderProps = {
|
||||
column: KanbanColumn;
|
||||
pageId: string;
|
||||
count?: string;
|
||||
canEdit: boolean;
|
||||
onHide: () => void;
|
||||
onAddCard: () => void;
|
||||
};
|
||||
|
||||
export function KanbanColumnHeader({ column, pageId, count, canEdit, onHide, onAddCard }: KanbanColumnHeaderProps) {
|
||||
const { t } = useTranslation();
|
||||
const dotColor = column.color
|
||||
? choiceColor(column.color).color as string
|
||||
: "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3))";
|
||||
|
||||
const headerRef = useRef<HTMLDivElement>(null);
|
||||
const handleRef = useRef<HTMLDivElement>(null);
|
||||
const { closestEdge, isDragging } = useKanbanColumnDnd({
|
||||
headerRef,
|
||||
handleRef,
|
||||
columnKey: column.key,
|
||||
pageId,
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={headerRef} className={clsx(classes.columnHeader, isDragging && classes.columnHeaderDragging)}>
|
||||
{canEdit && (
|
||||
<div ref={handleRef} className={classes.columnDragHandle} aria-hidden>
|
||||
<IconGripVertical size={14} />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
flexShrink: 0,
|
||||
background: dotColor,
|
||||
}}
|
||||
/>
|
||||
<Text fw={600} size="sm" flex={1} truncate>
|
||||
{column.isNoValue ? t("No value") : column.name}
|
||||
</Text>
|
||||
{count !== undefined && <Text className={classes.count}>{count}</Text>}
|
||||
{canEdit && (
|
||||
<>
|
||||
<Menu position="bottom-end" withinPortal>
|
||||
<Menu.Target>
|
||||
<ActionIcon variant="subtle" size="sm" color="gray" aria-label={t("Column options")}>
|
||||
<IconDots size={14} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item onClick={onHide}>{t("Hide group")}</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
<ActionIcon variant="subtle" size="sm" color="gray" aria-label={t("Add card")} onClick={onAddCard}>
|
||||
<IconPlus size={14} />
|
||||
</ActionIcon>
|
||||
</>
|
||||
)}
|
||||
{closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import { useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
|
||||
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||
import { type IBase, type IBaseRow, type IBaseView, type FilterGroup, type KanbanColumn as KanbanColumnType, KANBAN_CARD_DRAG_TYPE } from "@/ee/base/types/base.types";
|
||||
import { buildColumnFilter } from "@/ee/base/services/kanban-column-filter";
|
||||
import { formatKanbanCount } from "@/ee/base/services/format-kanban-count";
|
||||
import { useKanbanColumnAutoScroll } from "@/ee/base/hooks/use-kanban-autoscroll";
|
||||
import { useBaseRowsQuery } from "@/ee/base/queries/base-row-query";
|
||||
import { useKanbanCreateCardMutation } from "@/ee/base/queries/base-row-query";
|
||||
import { KanbanColumnHeader } from "@/ee/base/components/kanban/kanban-column-header";
|
||||
import { KanbanAddCardButton } from "@/ee/base/components/kanban/kanban-add-card-button";
|
||||
import { KanbanCard } from "@/ee/base/components/kanban/kanban-card";
|
||||
import classes from "@/ee/base/styles/kanban.module.css";
|
||||
|
||||
type KanbanColumnProps = {
|
||||
base: IBase;
|
||||
view: IBaseView;
|
||||
pageId: string;
|
||||
column: KanbanColumnType;
|
||||
viewFilter: FilterGroup | undefined;
|
||||
groupByPropertyId: string;
|
||||
canEdit: boolean;
|
||||
onOpenRow: (rowId: string) => void;
|
||||
onHide: (columnKey: string) => void;
|
||||
registerCardRef: (rowId: string, columnKey: string, el: HTMLDivElement | null) => void;
|
||||
registerColumnRows: (columnKey: string, rows: IBaseRow[]) => void;
|
||||
};
|
||||
|
||||
export function KanbanColumn({
|
||||
base,
|
||||
view,
|
||||
pageId,
|
||||
column,
|
||||
viewFilter,
|
||||
groupByPropertyId,
|
||||
canEdit,
|
||||
onOpenRow,
|
||||
onHide,
|
||||
registerCardRef,
|
||||
registerColumnRows,
|
||||
}: KanbanColumnProps) {
|
||||
const filter = useMemo(
|
||||
() => buildColumnFilter(viewFilter, groupByPropertyId, column.key),
|
||||
[viewFilter, groupByPropertyId, column.key],
|
||||
);
|
||||
|
||||
const rowsQuery = useBaseRowsQuery(pageId, filter, undefined);
|
||||
const createCard = useKanbanCreateCardMutation();
|
||||
|
||||
const rows = useMemo(() => {
|
||||
const pages = rowsQuery.data?.pages ?? [];
|
||||
const seen = new Set<string>();
|
||||
const flat: IBaseRow[] = [];
|
||||
for (const page of pages) {
|
||||
for (const row of page.items) {
|
||||
if (!seen.has(row.id)) {
|
||||
seen.add(row.id);
|
||||
flat.push(row);
|
||||
}
|
||||
}
|
||||
}
|
||||
return flat.slice().sort((a, b) =>
|
||||
a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
|
||||
);
|
||||
}, [rowsQuery.data]);
|
||||
|
||||
const count = rowsQuery.isSuccess
|
||||
? formatKanbanCount(rows.length, rowsQuery.hasNextPage ?? false)
|
||||
: undefined;
|
||||
|
||||
useEffect(() => {
|
||||
registerColumnRows(column.key, rows);
|
||||
}, [column.key, rows, registerColumnRows]);
|
||||
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
useKanbanColumnAutoScroll(listRef, pageId);
|
||||
|
||||
const pendingScrollRef = useRef<"top" | "bottom" | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const placement = pendingScrollRef.current;
|
||||
if (!placement) return;
|
||||
pendingScrollRef.current = null;
|
||||
const el = listRef.current;
|
||||
if (!el) return;
|
||||
el.scrollTop = placement === "top" ? 0 : el.scrollHeight;
|
||||
}, [rows]);
|
||||
|
||||
useEffect(() => {
|
||||
const listEl = listRef.current;
|
||||
if (!listEl) return;
|
||||
return dropTargetForElements({
|
||||
element: listEl,
|
||||
canDrop: ({ source }) =>
|
||||
source.data.type === KANBAN_CARD_DRAG_TYPE && source.data.pageId === pageId,
|
||||
getData: () => ({ columnKey: column.key, isColumnBody: true }),
|
||||
});
|
||||
}, [column.key, pageId]);
|
||||
|
||||
const onScroll = useCallback(() => {
|
||||
const el = listRef.current;
|
||||
if (!el) return;
|
||||
const { scrollHeight, scrollTop, clientHeight } = el;
|
||||
if (
|
||||
scrollHeight - scrollTop - clientHeight < 200 &&
|
||||
rowsQuery.hasNextPage &&
|
||||
!rowsQuery.isFetchingNextPage
|
||||
) {
|
||||
rowsQuery.fetchNextPage();
|
||||
}
|
||||
}, [rowsQuery.hasNextPage, rowsQuery.isFetchingNextPage, rowsQuery.fetchNextPage]);
|
||||
|
||||
const addCard = useCallback(
|
||||
(placement: "top" | "bottom") => {
|
||||
let position: string | undefined;
|
||||
try {
|
||||
position =
|
||||
placement === "top"
|
||||
? generateJitteredKeyBetween(null, rows[0]?.position ?? null)
|
||||
: generateJitteredKeyBetween(rows[rows.length - 1]?.position ?? null, null);
|
||||
} catch {
|
||||
position = undefined;
|
||||
}
|
||||
createCard.mutate(
|
||||
{ pageId, destColumnFilter: filter, groupByPropertyId, columnKey: column.key, position },
|
||||
{
|
||||
onSuccess: (newRow) => {
|
||||
pendingScrollRef.current = placement;
|
||||
onOpenRow(newRow.id);
|
||||
},
|
||||
},
|
||||
);
|
||||
},
|
||||
[createCard, pageId, filter, groupByPropertyId, column.key, onOpenRow, rows],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={classes.column} data-column-key={column.key}>
|
||||
<KanbanColumnHeader
|
||||
column={column}
|
||||
pageId={pageId}
|
||||
count={count}
|
||||
canEdit={canEdit}
|
||||
onHide={() => onHide(column.key)}
|
||||
onAddCard={() => addCard("top")}
|
||||
/>
|
||||
<div className={classes.cardList} ref={listRef} onScroll={onScroll}>
|
||||
{rows.map((row) => (
|
||||
<KanbanCard
|
||||
key={row.id}
|
||||
base={base}
|
||||
view={view}
|
||||
row={row}
|
||||
columnKey={column.key}
|
||||
onOpen={onOpenRow}
|
||||
ref={(el) => registerCardRef(row.id, column.key, el)}
|
||||
/>
|
||||
))}
|
||||
{canEdit && <KanbanAddCardButton onAddCard={() => addCard("bottom")} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useCallback } from "react";
|
||||
import { Stack, Text, Select, Button } from "@mantine/core";
|
||||
import { generateBaseChoiceId } from "@/ee/base/utils/generate-base-id";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IBase, IBaseView } from "@/ee/base/types/base.types";
|
||||
import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
|
||||
import { useCreatePropertyMutation } from "@/ee/base/queries/base-property-query";
|
||||
|
||||
type KanbanEmptyStateProps = {
|
||||
base: IBase;
|
||||
view: IBaseView;
|
||||
pageId: string;
|
||||
editable: boolean;
|
||||
};
|
||||
|
||||
export function KanbanEmptyState({ base, view, pageId, editable }: KanbanEmptyStateProps) {
|
||||
const { t } = useTranslation();
|
||||
const updateView = useUpdateViewMutation();
|
||||
const createProperty = useCreatePropertyMutation();
|
||||
|
||||
const groupableProperties = base.properties.filter(
|
||||
(p) => p.type === "select" || p.type === "status",
|
||||
);
|
||||
|
||||
const selectData = groupableProperties.map((p) => ({
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
}));
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(value: string | null) => {
|
||||
if (!value) return;
|
||||
updateView.mutate({ viewId: view.id, pageId, config: { groupByPropertyId: value } });
|
||||
},
|
||||
[updateView, view.id, pageId],
|
||||
);
|
||||
|
||||
const handleCreateStatus = useCallback(() => {
|
||||
const todoId = generateBaseChoiceId();
|
||||
const inProgressId = generateBaseChoiceId();
|
||||
const completeId = generateBaseChoiceId();
|
||||
createProperty.mutate(
|
||||
{
|
||||
pageId,
|
||||
name: t("Status"),
|
||||
type: "status",
|
||||
typeOptions: {
|
||||
choices: [
|
||||
{ id: todoId, name: t("Not started"), color: "gray", category: "todo" },
|
||||
{ id: inProgressId, name: t("In progress"), color: "blue", category: "inProgress" },
|
||||
{ id: completeId, name: t("Done"), color: "green", category: "complete" },
|
||||
],
|
||||
choiceOrder: [todoId, inProgressId, completeId],
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess: (newProperty) => {
|
||||
updateView.mutate({
|
||||
viewId: view.id,
|
||||
pageId,
|
||||
config: { groupByPropertyId: newProperty.id },
|
||||
});
|
||||
},
|
||||
},
|
||||
);
|
||||
}, [createProperty, updateView, view.id, pageId, t]);
|
||||
|
||||
if (!editable) {
|
||||
return (
|
||||
<Stack align="center" gap="md" style={{ flex: 1, paddingTop: "15vh" }}>
|
||||
<Text fw={500}>{t("This board has no grouping property yet.")}</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack align="center" gap="md" style={{ flex: 1, paddingTop: "15vh" }}>
|
||||
<Text fw={500}>{t("Group this board by a select or status property.")}</Text>
|
||||
{groupableProperties.length > 0 ? (
|
||||
<Select
|
||||
placeholder={t("Choose a property")}
|
||||
data={selectData}
|
||||
value={view.config?.groupByPropertyId ?? null}
|
||||
onChange={handleSelect}
|
||||
w={240}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
variant="light"
|
||||
size="sm"
|
||||
onClick={handleCreateStatus}
|
||||
loading={createProperty.isPending}
|
||||
>
|
||||
{t("Create a status property")}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import { Popover, Select, Stack, Text, Switch, Group, UnstyledButton } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IBase, IBaseView } from "@/ee/base/types/base.types";
|
||||
import { useUpdateViewMutation } from "@/ee/base/queries/base-view-query";
|
||||
import { useKanbanColumns } from "@/ee/base/hooks/use-kanban-columns";
|
||||
import { choiceColor } from "@/ee/base/components/cells/choice-color";
|
||||
import cellClasses from "@/ee/base/styles/cells.module.css";
|
||||
|
||||
type KanbanGroupByPickerProps = {
|
||||
base: IBase;
|
||||
view: IBaseView;
|
||||
pageId: string;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function KanbanGroupByPicker({ base, view, pageId, children }: KanbanGroupByPickerProps) {
|
||||
const { t } = useTranslation();
|
||||
const updateView = useUpdateViewMutation();
|
||||
const { allGroups, hasValidGroupBy } = useKanbanColumns(base, view);
|
||||
|
||||
const data = base.properties
|
||||
.filter((p) => p.type === "select" || p.type === "status")
|
||||
.map((p) => ({ value: p.id, label: p.name }));
|
||||
|
||||
const handleChange = (value: string | null) => {
|
||||
updateView.mutate({
|
||||
viewId: view.id,
|
||||
pageId,
|
||||
config: { groupByPropertyId: value ?? null },
|
||||
});
|
||||
};
|
||||
|
||||
const toggleGroup = (key: string, currentlyHidden: boolean) => {
|
||||
const current = view.config?.hiddenChoiceIds ?? [];
|
||||
const next = currentlyHidden
|
||||
? current.filter((k) => k !== key)
|
||||
: [...current, key];
|
||||
updateView.mutate({ viewId: view.id, pageId, config: { hiddenChoiceIds: next } });
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover
|
||||
position="bottom-end"
|
||||
shadow="md"
|
||||
width={300}
|
||||
withinPortal
|
||||
trapFocus
|
||||
closeOnEscape
|
||||
closeOnClickOutside
|
||||
>
|
||||
<Popover.Target>{children}</Popover.Target>
|
||||
<Popover.Dropdown p="xs">
|
||||
<Stack gap={8}>
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("Group by")}
|
||||
</Text>
|
||||
<Select
|
||||
size="xs"
|
||||
placeholder={t("Select a property")}
|
||||
data={data}
|
||||
value={view.config?.groupByPropertyId ?? null}
|
||||
onChange={handleChange}
|
||||
clearable
|
||||
/>
|
||||
{hasValidGroupBy && allGroups.length > 0 && (
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("Groups")}
|
||||
</Text>
|
||||
<Stack gap={0}>
|
||||
{allGroups.map((g) => {
|
||||
const dotColor = g.color
|
||||
? (choiceColor(g.color).color as string)
|
||||
: "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3))";
|
||||
return (
|
||||
<UnstyledButton
|
||||
key={g.key}
|
||||
className={cellClasses.menuItem}
|
||||
onClick={() => toggleGroup(g.key, g.hidden)}
|
||||
>
|
||||
<Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
|
||||
<span
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
flexShrink: 0,
|
||||
background: dotColor,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
size="sm"
|
||||
style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
|
||||
>
|
||||
{g.isNoValue ? t("No value") : g.name}
|
||||
</Text>
|
||||
</Group>
|
||||
<Switch
|
||||
size="xs"
|
||||
checked={!g.hidden}
|
||||
onChange={() => {}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
styles={{ track: { cursor: "pointer" } }}
|
||||
/>
|
||||
</UnstyledButton>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user