mirror of
https://github.com/docmost/docmost.git
synced 2026-06-10 10:13:01 +08:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Philipinho
|
a8c0033ebb |
File diff suppressed because it is too large
Load Diff
@@ -1,309 +0,0 @@
|
||||
# Base `page` Property Type — Design Spec
|
||||
|
||||
**Date:** 2026-04-20
|
||||
**Status:** Draft
|
||||
**Feature area:** `apps/server/src/core/base`, `apps/client/src/features/base`, `apps/server/src/core/page`
|
||||
|
||||
## Goal
|
||||
|
||||
Add a new base property type `page` that lets a user search for and link **one existing page** per cell. Modeled on how the editor's `@` page-mention works — the picker searches existing pages workspace-wide (with current-space prioritized) and the cell renders a live pill with the page's icon and title. No page is auto-created from the picker; users can only link pages that already exist.
|
||||
|
||||
Why: today users who want a page-reference column would have to paste a URL into a `url` cell, which loses the icon + title and doesn't validate. We also want to avoid the Focalboard-style pattern of auto-creating a page-row per table row, which would bloat the pages tree.
|
||||
|
||||
## Non-goals (v1)
|
||||
|
||||
- **Multiple pages per cell.** Single page only. Forward-compatible: the schema widens trivially to `z.union([z.uuid(), z.array(z.uuid())])` + an `allowMultiple` type option later, with zero data migration (see "Future extension" below).
|
||||
- **Sorting by page title.** Would require a JOIN against `pages` in the row-list query; skip in v1. Filter suffices.
|
||||
- **Creating pages from within the picker.**
|
||||
- **Cross-workspace page linking.**
|
||||
- **Rich previews / hover cards** showing page excerpts — pill-only.
|
||||
- **Confluence-style section grouping** in the property type picker (e.g. the "Page and live doc" section in the screenshot). Flat list for v1; grouping is a separate polish task.
|
||||
|
||||
## UX overview
|
||||
|
||||
### Picker (edit mode)
|
||||
|
||||
- Popover modeled on [cell-person.tsx](../../../apps/client/src/features/base/components/cells/cell-person.tsx) but stripped for single-select. `width=300`, `position="bottom-start"`, `trapFocus`.
|
||||
- Top: search input, auto-focused. If a page is currently linked, a removable "tag" for it sits above the search (same shape as `personTag`).
|
||||
- Body: results list (max 25), fed by `searchSuggestions({ query, includePages: true, spaceId: base.spaceId, limit: 25 })` — reuses the existing suggestion endpoint, which prioritizes `spaceId` results.
|
||||
- Each row: `{icon or IconFileDescription} {title}` + muted space name on the right (so cross-space picks are visually distinct).
|
||||
- Empty-query state: if pulling recent-pages is easy to plug in, show recent pages; otherwise "Type to search…" hint.
|
||||
- Click or Enter on a highlighted row → `onCommit(pageId)`, popover closes.
|
||||
- Esc / click-outside → `onCancel`.
|
||||
- Clicking the "Remove" affordance on the current tag → `onCommit(null)`.
|
||||
- Keyboard: reuse `useListKeyboardNav`.
|
||||
|
||||
### View mode
|
||||
|
||||
- Empty cell → empty placeholder (same class as `cellClasses.emptyValue`).
|
||||
- Resolved page → pill `{icon or IconFileDescription} {title}`, anchor that navigates to `buildPageUrl(space.slug, slugId, title)` using the helper that [mention-view.tsx](../../../apps/client/src/features/editor/components/mention/mention-view.tsx) already uses.
|
||||
- Unresolved (deleted or viewer has no access) → greyed pill "Page not found", no link, `aria-disabled`.
|
||||
- Single click on the pill = navigate. Double-click on the cell = open picker (same rule grid-cell applies to other types).
|
||||
|
||||
### Sort / filter UI
|
||||
|
||||
- [view-sort-config.tsx](../../../apps/client/src/features/base/components/views/view-sort-config.tsx): exclude `page` properties from the sortable set.
|
||||
- [view-filter-config.tsx](../../../apps/client/src/features/base/components/views/view-filter-config.tsx): filter editor branch for `page` with operators `isEmpty`, `isNotEmpty`, `any`, `none`. The value picker reuses the same search dropdown from the cell picker.
|
||||
|
||||
## Data model
|
||||
|
||||
### Cell value
|
||||
|
||||
- **Stored shape:** `string` (page UUID) or `null`. Parallels `person` in single mode.
|
||||
- **Example:** `{ "01998b7e-...": "01998b80-..." }` — property UUID → page UUID.
|
||||
|
||||
### Property type options
|
||||
|
||||
- **v1:** empty `{}` (reuse `emptyTypeOptionsSchema`).
|
||||
- **Future:** `{ allowMultiple?: boolean }`.
|
||||
|
||||
### Schema additions
|
||||
|
||||
**Server — [base.schemas.ts](../../../apps/server/src/core/base/base.schemas.ts):**
|
||||
|
||||
```ts
|
||||
export const BasePropertyType = {
|
||||
// ...existing entries...
|
||||
PAGE: 'page',
|
||||
} as const;
|
||||
|
||||
// typeOptionsSchemaMap
|
||||
[BasePropertyType.PAGE]: emptyTypeOptionsSchema,
|
||||
|
||||
// cellValueSchemaMap
|
||||
[BasePropertyType.PAGE]: z.uuid(),
|
||||
```
|
||||
|
||||
**Client — [base.types.ts](../../../apps/client/src/features/base/types/base.types.ts):**
|
||||
|
||||
```ts
|
||||
export type BasePropertyType = ... | 'page';
|
||||
export type PageTypeOptions = Record<string, never>;
|
||||
```
|
||||
|
||||
### Property kind & engine
|
||||
|
||||
**[engine/kinds.ts](../../../apps/server/src/core/base/engine/kinds.ts):**
|
||||
|
||||
```ts
|
||||
export const PropertyKind = {
|
||||
// ...existing...
|
||||
PAGE: 'page',
|
||||
} as const;
|
||||
|
||||
// propertyKind()
|
||||
case BasePropertyType.PAGE:
|
||||
return PropertyKind.PAGE;
|
||||
```
|
||||
|
||||
**[engine/predicate.ts](../../../apps/server/src/core/base/engine/predicate.ts):** new `pageCondition()` handler — shape follows `selectCondition()` (single UUID stored as text):
|
||||
|
||||
- `isEmpty` / `isNotEmpty` → `textCell` is null or empty
|
||||
- `eq` / `neq` → text equality / inequality (null-safe for `neq`)
|
||||
- `any` → `textCell IN (...)`
|
||||
- `none` → `textCell NOT IN (...)` or null
|
||||
|
||||
Wired into the `switch (kind)` in `buildCondition`:
|
||||
```ts
|
||||
case PropertyKind.PAGE:
|
||||
return pageCondition(eb, cond);
|
||||
```
|
||||
|
||||
**[engine/sort.ts](../../../apps/server/src/core/base/engine/sort.ts):** no new branch. `page` falls into the default text-sentinel path (sorts by raw UUID string, which is unhelpful but harmless — the sort UI won't expose this type in v1).
|
||||
|
||||
### Type conversion
|
||||
|
||||
**[base.schemas.ts `CellConversionContext`](../../../apps/server/src/core/base/base.schemas.ts:191):** add a new field:
|
||||
|
||||
```ts
|
||||
export type CellConversionContext = {
|
||||
fromTypeOptions?: unknown;
|
||||
userNames?: Map<string, string>;
|
||||
attachmentNames?: Map<string, string>;
|
||||
pageTitles?: Map<string, string>; // NEW
|
||||
};
|
||||
```
|
||||
|
||||
**[base-type-conversion.task.ts](../../../apps/server/src/core/base/tasks/base-type-conversion.task.ts):** when `fromType === 'page'`, batch-load titles via the same page repo path used by the new resolver endpoint (see below) and populate `ctx.pageTitles`.
|
||||
|
||||
**`attemptCellConversion` branches:**
|
||||
- `page → text`: resolve `ctx.pageTitles.get(uuid)` → title (or `""` if missing).
|
||||
- `page → *` (anything else): return `{converted: true, value: null}`.
|
||||
- `* → page`: return `{converted: true, value: null}` (free text or other IDs can't be coerced to a valid page UUID).
|
||||
|
||||
## Server: page resolver endpoint
|
||||
|
||||
New endpoint for cell hydration on the client. Reusing `/pages/info` is inappropriate — it returns full page content and is one-at-a-time.
|
||||
|
||||
### `POST /bases/pages/resolve`
|
||||
|
||||
**Request:**
|
||||
```ts
|
||||
{ pageIds: string[] } // 1 <= length <= 100, enforced server-side; 400 on violation
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```ts
|
||||
{
|
||||
items: Array<{
|
||||
id: string;
|
||||
slugId: string;
|
||||
title: string | null;
|
||||
icon: string | null;
|
||||
spaceId: string;
|
||||
space: { id: string; slug: string; name: string };
|
||||
}>;
|
||||
}
|
||||
```
|
||||
|
||||
### Behavior
|
||||
|
||||
1. Deduplicate input IDs.
|
||||
2. Select from `pages` where `id IN (...)` AND `deletedAt IS NULL` AND `workspaceId = current`.
|
||||
3. Filter the result set through `pagePermissionRepo.filterAccessiblePageIds({ pageIds, userId })` — same mechanism used by [search.service.ts:131-139](../../../apps/server/src/core/search/search.service.ts).
|
||||
4. Join `spaces` to include `space.slug` and `space.name` for navigation.
|
||||
5. Silently omit any ID the user can't see (deleted, restricted, cross-workspace). The client treats any requested ID missing from `items` as "Page not found".
|
||||
|
||||
### Code layout
|
||||
|
||||
- **Controller:** add method to [base.controller.ts](../../../apps/server/src/core/base/controllers/base.controller.ts) at path `@Post('pages/resolve')`. Guarded by the same `JwtAuthGuard` + workspace check the rest of `/bases/*` uses.
|
||||
- **Service:** new file `apps/server/src/core/base/services/base-page-resolver.service.ts` with `resolvePagesForBase(pageIds, workspaceId, userId)`. Keeps the coupling to `PageRepo` + `PagePermissionRepo` isolated to this one file.
|
||||
- **Module:** wire the new service into [base.module.ts](../../../apps/server/src/core/base/base.module.ts). `PageRepo` + `PagePermissionRepo` are already shared modules.
|
||||
|
||||
## Client: cell component & resolver
|
||||
|
||||
### Batch resolver hook
|
||||
|
||||
New file `apps/client/src/features/base/queries/base-page-resolver-query.ts`:
|
||||
|
||||
```ts
|
||||
export function useResolvedPages(pageIds: string[]): Map<string, ResolvedPage | null>
|
||||
```
|
||||
|
||||
- Deduplicate + sort IDs to form a stable React Query key.
|
||||
- Fetch `POST /bases/pages/resolve` with `{ pageIds }`.
|
||||
- Return a `Map` keyed by every requested ID — `null` for any ID absent from the server response.
|
||||
- `staleTime: 30_000`, `gcTime: 5 * 60_000`.
|
||||
- Realtime invalidation: listen for existing page-level websocket events (rename, delete) and invalidate the query when a touched ID intersects our key. Exact event names to be surveyed during plan writing.
|
||||
|
||||
### Cell component
|
||||
|
||||
New file `apps/client/src/features/base/components/cells/cell-page.tsx`:
|
||||
|
||||
```ts
|
||||
type CellPageProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
```
|
||||
|
||||
**Behavior:**
|
||||
- Parse value: accept `string` only (ignore arrays — they'd be from a future multi mode that we drop until upgraded).
|
||||
- `useResolvedPages([value])` — yes even for single lookups; the hook dedupes internally so multiple cells sharing the same page ID hit one request.
|
||||
- View mode: resolved → pill with icon+title, anchor to `buildPageUrl`. Unresolved → greyed "Page not found".
|
||||
- Edit mode: popover picker (see UX overview). Search via existing `searchSuggestions`.
|
||||
|
||||
Wire into [grid-cell.tsx](../../../apps/client/src/features/base/components/grid/grid-cell.tsx):
|
||||
|
||||
```ts
|
||||
const cellComponents = {
|
||||
// ...existing...
|
||||
page: CellPage,
|
||||
};
|
||||
```
|
||||
|
||||
### Property type picker
|
||||
|
||||
[property-type-picker.tsx](../../../apps/client/src/features/base/components/property/property-type-picker.tsx): append one entry (after `file`):
|
||||
|
||||
```ts
|
||||
{ type: "page", icon: IconFileDescription, labelKey: "Page" },
|
||||
```
|
||||
|
||||
### Filter editor
|
||||
|
||||
[view-filter-config.tsx](../../../apps/client/src/features/base/components/views/view-filter-config.tsx): new branch for `page`:
|
||||
- Operators: `isEmpty`, `isNotEmpty`, `any`, `none`.
|
||||
- Value picker for `any`/`none`: reuses the same `searchSuggestions`-backed search dropdown from the cell picker — user picks one or more pages as filter operands.
|
||||
|
||||
### Sort editor
|
||||
|
||||
[view-sort-config.tsx](../../../apps/client/src/features/base/components/views/view-sort-config.tsx): exclude `page` from the list of sortable property types.
|
||||
|
||||
## Testing
|
||||
|
||||
### Server — unit
|
||||
|
||||
- **Schema:** `validateCellValue('page', uuid)` passes; with garbage string / number → fails; with `null` → passes (null = empty).
|
||||
- **Conversion:**
|
||||
- `attemptCellConversion('page', 'text', uuid, { pageTitles: Map<uuid,title> })` → resolved title.
|
||||
- Same call with empty `pageTitles` → `""`.
|
||||
- `page → number/date/select/…` → `{converted: true, value: null}`.
|
||||
- `text → page` with any string input → `{converted: true, value: null}`.
|
||||
- **Predicate:** for each operator (`isEmpty`, `isNotEmpty`, `eq`, `neq`, `any`, `none`), `pageCondition()` returns the expected Kysely expression shape.
|
||||
|
||||
### Server — integration
|
||||
|
||||
- **Resolver endpoint `POST /bases/pages/resolve`:**
|
||||
- valid IDs in an accessible space → present in `items`
|
||||
- deleted pages (trash) → absent
|
||||
- pages in a space the user isn't a member of → absent
|
||||
- pages in another workspace → absent
|
||||
- empty array → 400
|
||||
- array length > 100 → 400
|
||||
- **Row CRUD:** create a property of type `page`, write a cell with a UUID, read back → round-trip shape is `string`.
|
||||
- **View filter:** create a view config with `{ op: 'any', propertyId, value: [uuidA, uuidB] }`, hit row-list, verify only matching rows returned.
|
||||
|
||||
### Client — unit (Vitest + React Testing Library)
|
||||
|
||||
- `cell-page.test.tsx`:
|
||||
- view mode with resolved page → renders pill with icon + title and an `<a>` to the computed URL
|
||||
- view mode with unresolved page (null in resolver map) → renders greyed "Page not found", no `<a>`
|
||||
- double-click opens picker
|
||||
- Enter on highlighted result commits `pageId`
|
||||
- Esc cancels
|
||||
- Remove tag button commits `null`
|
||||
- `base-page-resolver-query.test.ts`:
|
||||
- dedupes IDs
|
||||
- stable query key across re-renders with same set
|
||||
- missing IDs render as `null` in the returned map
|
||||
|
||||
### Manual QA checklist
|
||||
|
||||
- Link a page in the same space.
|
||||
- Link a page in another space → pill shows, picker shows muted space-name hint.
|
||||
- Remove link → cell empties.
|
||||
- Delete linked page (via trash) → cell flips to "Page not found" on next resolver refetch.
|
||||
- Viewer loses space access → same "Page not found" fallback.
|
||||
- Rename linked page → within ≤30s (staleTime) the pill reflects the new title; realtime event should also trigger refetch.
|
||||
- Filter: `isEmpty`, `isNotEmpty`, `any` (multi-select), `none`.
|
||||
- Conversion `page → text` populates cells with page titles.
|
||||
- Conversion `text → page` wipes cells.
|
||||
|
||||
## Rollout
|
||||
|
||||
- **No DB migration.** All changes are code-only: new enum value, new cell-value validator entry, new engine kind branch, new endpoint.
|
||||
- **No feature flag.** The type appears in the picker as soon as the build ships. Backwards-compatible since `'page'` is a new type identifier.
|
||||
- Existing bases continue to work unchanged.
|
||||
|
||||
## Risks & open questions
|
||||
|
||||
- **30s staleTime.** Renames take up to 30s to propagate without realtime invalidation. The realtime hook should shrink this to near-zero in practice; verify in QA. If it feels slow, drop `staleTime` to `0` and rely solely on realtime + refetch-on-window-focus.
|
||||
- **"Page not found" label.** i18n-friendly; run through the translation pipeline. Consider whether to differentiate deleted vs. restricted — current answer: no, one label covers both and matches Confluence's behavior.
|
||||
- **Cross-space name exposure.** The picker surfaces the space name of pages the user can access cross-space. This is already exposed via the existing page-mention flow, so no new exposure, but flag in review.
|
||||
|
||||
## Future extension (multiple pages per cell)
|
||||
|
||||
When `allowMultiple` lands:
|
||||
|
||||
1. Widen cell-value schema: `z.uuid()` → `z.union([z.uuid(), z.array(z.uuid())])`. Existing single-UUID cells continue to validate.
|
||||
2. Add `allowMultiple` boolean to `pageTypeOptionsSchema` (default `false` for existing properties).
|
||||
3. In [predicate.ts](../../../apps/server/src/core/base/engine/predicate.ts), branch `pageCondition` on `allowMultiple`: `true` → reuse `arrayOfIdsCondition`; `false` → keep the current text-based path.
|
||||
4. Client cell normalizes on read (`Array.isArray(value) ? value : typeof value === 'string' ? [value] : []`), mirrors [cell-person.tsx:33](../../../apps/client/src/features/base/components/cells/cell-person.tsx).
|
||||
5. No data writes required for existing cells.
|
||||
|
||||
This spec leaves room for that change without locking the storage shape.
|
||||
@@ -1,479 +0,0 @@
|
||||
# Base View Draft (Local-First Filter & Sort) — Design Spec
|
||||
|
||||
**Date:** 2026-04-20
|
||||
**Status:** Draft
|
||||
**Feature area:** `apps/client/src/features/base` (client-only)
|
||||
|
||||
## Goal
|
||||
|
||||
Make filter and sort changes on a base view **local-first**: they apply instantly for the editing user, are scoped to their own browser/profile, and never touch the server baseline until the user explicitly clicks "Save for everyone". A banner at the top of the table surfaces the draft state and lets the user either promote the draft to the shared baseline or discard it.
|
||||
|
||||
This removes the current Notion-unlike behavior where every filter/sort tweak is auto-persisted and immediately inflicted on every teammate viewing the same view.
|
||||
|
||||
## Non-goals (v1)
|
||||
|
||||
- **Column layout in draft mode.** Column visibility, order, and widths continue to flow through the existing debounced `persistViewConfig` path in [use-base-table.ts:371-396](../../../apps/client/src/features/base/hooks/use-base-table.ts). No draft behavior for them. (Listed as a future extension.)
|
||||
- **Server-side per-user drafts.** localStorage only. A user clearing their browser storage, switching devices, or using a different browser profile loses drafts — by design.
|
||||
- **"Save as new view".** The screenshot hints at a dropdown caret next to the Save button for a "save as new view" split-action. Not in v1.
|
||||
- **Kanban / calendar.** Only the `table` view type exists today; spec scopes to it but the hook is type-agnostic and will apply trivially when other view types land.
|
||||
- **Automatic garbage collection of stale drafts.** Drafts persist indefinitely until the user resets or saves. No TTL, no eager cleanup when baseline values match the draft.
|
||||
- **Conflict UI.** If another user writes a new baseline while I have local drafts, my draft silently wins on my client. No "baseline changed" warning.
|
||||
|
||||
## UX overview
|
||||
|
||||
### Draft banner
|
||||
|
||||
Placement: **between** the page title and [BaseToolbar](../../../apps/client/src/features/base/components/base-toolbar.tsx), inside [base-table.tsx](../../../apps/client/src/features/base/components/base-table.tsx) above the `<BaseToolbar />` node (around [base-table.tsx:192](../../../apps/client/src/features/base/components/base-table.tsx)). The banner is part of the table's own layout, not a workspace-level chrome element, because it's tied to a specific view.
|
||||
|
||||
Render condition: `isDirty === true` (see "Dirty check").
|
||||
|
||||
Layout (match the reference screenshot):
|
||||
|
||||
- Mantine `<Paper withBorder radius="sm" px="md" py="xs">` with a soft background (`bg="yellow.0"` or `bg="orange.0"` depending on theme palette — pick whichever tolerates dark mode) and a small info icon on the left.
|
||||
- Left region: short message — `t("Filter and sort changes are visible only to you.")`.
|
||||
- Right region (a `<Group gap="sm">`):
|
||||
- `<Button variant="subtle" color="gray" size="xs">{t("Reset")}</Button>` — underline-on-hover "text link" feel; wipes the draft.
|
||||
- `<Button variant="filled" size="xs">{t("Save for everyone")}</Button>` — primary accent (project's default theme color — orange in the screenshot maps to Mantine's configured `primaryColor`, so `color` is omitted and the theme default is used).
|
||||
- The "Save for everyone" button is **omitted entirely** for users without edit permission (see "Permission gating"). "Reset" always shows.
|
||||
- The banner never animates in/out on every keystroke — it only appears/disappears when `isDirty` flips. Add a Mantine `<Transition mounted={isDirty} transition="slide-down" duration={120}>` wrap if the flip is jarring; otherwise mount unconditionally with a `{isDirty && ...}` guard.
|
||||
|
||||
### Filter/sort editors in draft mode
|
||||
|
||||
No UI affordance changes inside the filter or sort popovers themselves. They keep the same open-on-click, add/remove/edit flow. The only behavioral change is that their `onChange` callback writes to the draft store rather than firing `updateView` — completely transparent to the editor components.
|
||||
|
||||
### Reset behavior
|
||||
|
||||
Click Reset → the draft hook removes its localStorage entry → the table re-renders reading filter/sorts from `activeView.config` (the server baseline). Any currently-open filter/sort popover closes on outside click as usual; if it's open when the user clicks Reset, the next render shows the baseline values. No notification — the banner disappearing is sufficient feedback.
|
||||
|
||||
### Save for everyone
|
||||
|
||||
Click Save → call the existing `useUpdateViewMutation` from [base-view-query.ts:43-112](../../../apps/client/src/features/base/queries/base-view-query.ts) with `{ viewId, baseId, config: { ...serverBaseline, filter: draft.filter, sorts: draft.sorts } }`. On success, clear the localStorage key and show a Mantine notification `t("View updated for everyone")`. On error, keep the draft; the mutation already wires the error toast.
|
||||
|
||||
### Permission gating
|
||||
|
||||
A user can edit this base iff their space membership grants `SpaceCaslAction.Edit, SpaceCaslSubject.Base` — the same check the server enforces in [base-view.controller.ts:68](../../../apps/server/src/core/base/controllers/base-view.controller.ts). Viewers still get local drafts (the entire point is that local changes don't require edit permission), but their "Save for everyone" button is hidden.
|
||||
|
||||
**Client caveat:** [permissions.type.ts](../../../apps/client/src/features/space/permissions/permissions.type.ts) currently only exports `Settings`, `Member`, and `Page` subjects. The server enum has `Base` but the client enum doesn't. The spec adds `Base = "base"` to `SpaceCaslSubject` and widens the `SpaceAbility` union — that's a one-line change plus import fix.
|
||||
|
||||
## Data model
|
||||
|
||||
### localStorage key
|
||||
|
||||
```
|
||||
docmost:base-view-draft:v1:{userId}:{baseId}:{viewId}
|
||||
```
|
||||
|
||||
- Namespace prefix `docmost:base-view-draft:` keeps us from colliding with other consumers.
|
||||
- `v1` is the schema version so a future breaking change can shed old entries by skipping.
|
||||
- `{userId}` scopes drafts so a shared-device login-swap doesn't leak drafts across accounts. `userId` comes from the existing `useCurrentUser()` hook (returns `{ data: ICurrentUser }` — read `user?.user.id`), the same helper used by other authenticated client code.
|
||||
- `{baseId}` and `{viewId}` together uniquely identify which table state the draft applies to.
|
||||
|
||||
### Value shape
|
||||
|
||||
```ts
|
||||
// apps/client/src/features/base/types/base.types.ts (additive)
|
||||
export type BaseViewDraft = {
|
||||
filter?: FilterGroup;
|
||||
sorts?: ViewSortConfig[];
|
||||
updatedAt: string; // ISO timestamp, written on each put — used only for diagnostics
|
||||
};
|
||||
```
|
||||
|
||||
Both `filter` and `sorts` are optional, independently. An absent field means "inherit baseline for that axis". That matters because a user who's only dirtied sorts but not filters should see the baseline filter unchanged if the baseline's filter later shifts.
|
||||
|
||||
Serialized as JSON by Jotai's `atomWithStorage` (which JSON-stringifies on write and parses on read). No schema validation on read — if the parse fails or the shape looks wrong, Jotai yields `null` and the hook falls back to baseline.
|
||||
|
||||
## Client architecture
|
||||
|
||||
### Storage atom family
|
||||
|
||||
**File:** `apps/client/src/features/base/atoms/view-draft-atom.ts`
|
||||
|
||||
Follow the existing Jotai storage pattern in [home-tab-atom.ts](../../../apps/client/src/features/home/atoms/home-tab-atom.ts) and [auth-tokens-atom.ts](../../../apps/client/src/features/auth/atoms/auth-tokens-atom.ts) — `atomWithStorage` is the codebase convention for localStorage-backed state. Since our key is dynamic per (user, base, view), pair it with `atomFamily` from `jotai/utils`:
|
||||
|
||||
```ts
|
||||
import { atomFamily, atomWithStorage } from "jotai/utils";
|
||||
import { BaseViewDraft } from "@/features/base/types/base.types";
|
||||
|
||||
export type ViewDraftKey = {
|
||||
userId: string;
|
||||
baseId: string;
|
||||
viewId: string;
|
||||
};
|
||||
|
||||
const keyFor = (k: ViewDraftKey) =>
|
||||
`docmost:base-view-draft:v1:${k.userId}:${k.baseId}:${k.viewId}`;
|
||||
|
||||
export const viewDraftAtomFamily = atomFamily(
|
||||
(k: ViewDraftKey) =>
|
||||
atomWithStorage<BaseViewDraft | null>(keyFor(k), null),
|
||||
(a, b) =>
|
||||
a.userId === b.userId && a.baseId === b.baseId && a.viewId === b.viewId,
|
||||
);
|
||||
```
|
||||
|
||||
`atomWithStorage` handles JSON serialization, cross-tab sync via the `storage` event, and SSR-safe lazy reads out of the box — no hand-rolled `localStorage.getItem/setItem` or `window.addEventListener("storage", ...)` needed. The comparator passed as `atomFamily`'s second argument ensures the same (user, base, view) triple always resolves to the same atom instance, so React Query-style object identity issues don't cause atoms to be recreated per render.
|
||||
|
||||
### Hook: `useViewDraft`
|
||||
|
||||
**File:** `apps/client/src/features/base/hooks/use-view-draft.ts`
|
||||
|
||||
Thin wrapper that binds the atom family to the rendering layer, adds the passthrough-when-undefined guard, and derives `effectiveFilter` / `effectiveSorts` / `isDirty` / `buildPromotedConfig` from the atom's value:
|
||||
|
||||
```ts
|
||||
export type ViewDraftState = {
|
||||
draft: BaseViewDraft | null;
|
||||
effectiveFilter: FilterGroup | undefined;
|
||||
effectiveSorts: ViewSortConfig[] | undefined;
|
||||
isDirty: boolean;
|
||||
setFilter: (filter: FilterGroup | undefined) => void;
|
||||
setSorts: (sorts: ViewSortConfig[] | undefined) => void;
|
||||
reset: () => void;
|
||||
buildPromotedConfig: (baseline: ViewConfig) => ViewConfig;
|
||||
};
|
||||
|
||||
export function useViewDraft(args: {
|
||||
userId: string | undefined;
|
||||
baseId: string | undefined;
|
||||
viewId: string | undefined;
|
||||
baselineFilter: FilterGroup | undefined;
|
||||
baselineSorts: ViewSortConfig[] | undefined;
|
||||
}): ViewDraftState;
|
||||
```
|
||||
|
||||
**Behavior:**
|
||||
|
||||
1. If any of `userId / baseId / viewId` is undefined → return a passthrough state (`draft=null`, `isDirty=false`, setters no-op, `effective*` fall through to baseline). Guards the initial-load window where auth / activeView hasn't resolved yet.
|
||||
2. Otherwise, `useAtom(viewDraftAtomFamily({ userId, baseId, viewId }))` gives `[draft, setDraft]`. Jotai reads from localStorage on first access and writes on every set.
|
||||
3. `setFilter(next)` and `setSorts(next)` compute `merged = { ...(draft ?? {}), [axis]: next, updatedAt: new Date().toISOString() }`. If the result has both `filter` and `sorts` back to `undefined` (the user cleared all local divergence), call `setDraft(RESET)` instead of writing an empty object. (`RESET` is `jotai/utils`' sentinel — it removes the key from localStorage.) This keeps "orphan" drafts from lingering.
|
||||
4. `reset()` is `setDraft(RESET)`.
|
||||
5. `isDirty` is `draft !== null && (!shallowEqualFilter(draft.filter, baselineFilter) || !shallowEqualSorts(draft.sorts, baselineSorts))`. Note the per-axis `??` fallback doesn't appear here because `null/undefined` is the "no local divergence" signal for that axis; only a defined-and-different value counts as dirty.
|
||||
6. `buildPromotedConfig(baseline)` returns `{ ...baseline, filter: draft?.filter ?? baseline.filter, sorts: draft?.sorts ?? baseline.sorts }`. Preserves all non-draft config fields (widths, order, visibility) and only overwrites the two axes that may have diverged.
|
||||
|
||||
**Return composition:**
|
||||
|
||||
- `effectiveFilter = draft?.filter ?? baselineFilter`
|
||||
- `effectiveSorts = draft?.sorts ?? baselineSorts`
|
||||
|
||||
**Cross-tab sync is free.** `atomWithStorage` subscribes to the `storage` event internally — a filter change in tab A triggers a re-render in tab B with no extra code. No manual listener required.
|
||||
|
||||
### Integration into `useBaseTable` and `base-table.tsx`
|
||||
|
||||
`useBaseTable` at [use-base-table.ts:224](../../../apps/client/src/features/base/hooks/use-base-table.ts) currently derives the table's initial sort from `activeView.config.sorts`. In the new world the table's sort/filter state must come from the **effective** values (draft-or-baseline), not the raw `activeView.config`.
|
||||
|
||||
Two cut options were considered:
|
||||
|
||||
**Option A (chosen): drive from effective values via props.** `useBaseTable` takes an additional `effectiveConfig?: ViewConfig` parameter (or, cleaner, the caller passes a shallow-merged `activeView` whose `config` is `{ ...activeView.config, filter: effective.filter, sorts: effective.sorts }`). `buildSortingState` and the row query already read from `activeView.config`, so the cleanest shape is to mutate the config the hook receives, not to introduce a new parameter.
|
||||
|
||||
**Option B (rejected): thread draft deep into `useBaseTable`.** Adds the concept of drafts to a hook that only cares about the rendered state. Muddies responsibilities.
|
||||
|
||||
Going with A. In [base-table.tsx](../../../apps/client/src/features/base/components/base-table.tsx):
|
||||
|
||||
```ts
|
||||
// NEW: wire the draft hook
|
||||
const { data: user } = useCurrentUser();
|
||||
const { draft, effectiveFilter, effectiveSorts, isDirty, setFilter, setSorts, reset, buildPromotedConfig } =
|
||||
useViewDraft({
|
||||
userId: user?.user.id,
|
||||
baseId,
|
||||
viewId: activeView?.id,
|
||||
baselineFilter: activeView?.config?.filter,
|
||||
baselineSorts: activeView?.config?.sorts,
|
||||
});
|
||||
|
||||
// Swap the raw `activeView` for a view with effective config so the table and row query see drafts.
|
||||
const effectiveView = useMemo(
|
||||
() =>
|
||||
activeView
|
||||
? { ...activeView, config: { ...activeView.config, filter: effectiveFilter, sorts: effectiveSorts } }
|
||||
: undefined,
|
||||
[activeView, effectiveFilter, effectiveSorts],
|
||||
);
|
||||
|
||||
// Row query reads effective filter/sorts.
|
||||
const { data: rowsData, ... } = useBaseRowsQuery(
|
||||
base ? baseId : undefined,
|
||||
effectiveFilter,
|
||||
effectiveSorts,
|
||||
);
|
||||
|
||||
// Table is seeded from effectiveView for rendering, but the auto-persist
|
||||
// write-path uses the real `activeView.config` as the baseline so draft
|
||||
// filter/sort values can never leak into a column-layout save.
|
||||
// See "Filter & sort write-path changes" below for the exact mechanism.
|
||||
const { table, persistViewConfig } = useBaseTable(base, rows, effectiveView, {
|
||||
baselineConfig: activeView?.config,
|
||||
});
|
||||
```
|
||||
|
||||
The server-roundtrip `persistViewConfig` keeps being called for column layout changes. It reads from `baselineConfig` — never from the effective/draft state — so a pending layout write cannot bake draft filter/sort values into the server baseline. See the next subsection for the exact implementation.
|
||||
|
||||
### Filter & sort write-path changes
|
||||
|
||||
Today, filter/sort editors feed `BaseToolbar`'s handlers:
|
||||
|
||||
- [base-toolbar.tsx:135-148](../../../apps/client/src/features/base/components/base-toolbar.tsx) `handleSortsChange` → builds config via `buildViewConfigFromTable(table, activeView.config, { sorts: newSorts })` → `updateViewMutation.mutate(...)`.
|
||||
- [base-toolbar.tsx:150-169](../../../apps/client/src/features/base/components/base-toolbar.tsx) `handleFiltersChange` → same pattern with `{ filter }`.
|
||||
|
||||
Both write directly to the server. That's the exact site to branch.
|
||||
|
||||
**New `base-toolbar.tsx`:** accept two new callbacks from `base-table.tsx`:
|
||||
|
||||
```ts
|
||||
onDraftSortsChange: (sorts: ViewSortConfig[]) => void;
|
||||
onDraftFiltersChange: (filter: FilterGroup | undefined) => void;
|
||||
```
|
||||
|
||||
The toolbar drops its internal `updateViewMutation.mutate` calls for sort/filter (retains them for view tabs / view type flip if any exists elsewhere). `handleSortsChange` becomes:
|
||||
|
||||
```ts
|
||||
const handleSortsChange = useCallback(
|
||||
(newSorts: ViewSortConfig[]) => {
|
||||
onDraftSortsChange(newSorts); // writes to useViewDraft via base-table
|
||||
},
|
||||
[onDraftSortsChange],
|
||||
);
|
||||
```
|
||||
|
||||
Same for filters — the FilterCondition[]→FilterGroup wrapping logic at [base-toolbar.tsx:152-157](../../../apps/client/src/features/base/components/base-toolbar.tsx) stays; only the final dispatch target changes.
|
||||
|
||||
**`base-table.tsx`** wires those callbacks to the draft hook:
|
||||
|
||||
```ts
|
||||
const handleDraftSortsChange = useCallback(
|
||||
(sorts: ViewSortConfig[]) => setSorts(sorts.length ? sorts : undefined),
|
||||
[setSorts],
|
||||
);
|
||||
const handleDraftFiltersChange = useCallback(
|
||||
(filter: FilterGroup | undefined) => setFilter(filter),
|
||||
[setFilter],
|
||||
);
|
||||
```
|
||||
|
||||
The "normalize empty to undefined" rule is how we let the draft go clean after the user deletes every filter — the draft hook's "remove key if both axes are undefined" rule then kicks in.
|
||||
|
||||
**Toolbar badge counts:** [base-toolbar.tsx:118-128](../../../apps/client/src/features/base/components/base-toolbar.tsx) currently derives `sorts` and `conditions` from `activeView.config`. Switch these to read from the **effective** config (`effectiveView.config`) so the toolbar badges reflect the draft's count, not the baseline. The toolbar already accepts `activeView` — pass it `effectiveView` instead, since everything the toolbar reads from `activeView` (name, sorts, filter) should be in the effective form.
|
||||
|
||||
**The `buildViewConfigFromTable` call site in `handleColumnReorder` / `handleResizeEnd` / field-visibility:** these continue reading from `activeView.config` (the real baseline) and going through `updateViewMutation`. They do **not** read from the draft. This is deliberate — column layout stays auto-persisted.
|
||||
|
||||
However: `buildViewConfigFromTable` currently spreads its `base` argument and emits `sorts` from the live table state. For the debounced `persistViewConfig` call at [use-base-table.ts:382](../../../apps/client/src/features/base/hooks/use-base-table.ts), the `base` arg is the effective config (because we pass `effectiveView` into `useBaseTable`), but the emitted `sorts` comes from the table's live state — which was seeded from effective. That means if the user drafts a sort and then reorders a column, the debounced persist would write `{ ...effectiveConfig, sorts: draftSorts }` back to the server. **Bug.**
|
||||
|
||||
Fix: when building the config for the auto-persist path in `persistViewConfig`, override the emitted `sorts` and `filter` with the **baseline** values, not the effective ones. Concretely, change [use-base-table.ts:382](../../../apps/client/src/features/base/hooks/use-base-table.ts) to
|
||||
|
||||
```ts
|
||||
const config = buildViewConfigFromTable(table, activeView.config, {
|
||||
sorts: activeView.config?.sorts,
|
||||
filter: activeView.config?.filter,
|
||||
});
|
||||
```
|
||||
|
||||
where `activeView` in that callsite is the **real** activeView (not the effective one). So `useBaseTable` needs both: the effective view for seeding and rendering, and the real baseline for the persist path.
|
||||
|
||||
Simplest refactor: give `useBaseTable` an optional `baselineConfig?: ViewConfig` argument. If omitted (existing callers), behave as today. If provided, `persistViewConfig` uses `baselineConfig` for sort/filter overrides. `base-table.tsx` passes `activeView.config` as the baseline and the effective-wrapped view as the active.
|
||||
|
||||
This keeps `useBaseTable`'s own responsibilities tidy and makes the "drafts don't leak into the layout write-path" rule explicit.
|
||||
|
||||
**Note on `useBaseTable`'s re-seed effect:** A draft edit changes `effectiveView.config.filter/sorts`, which propagates through the `derivedColumnOrder` / `derivedColumnVisibility` memos and re-fires the sync effect at [use-base-table.ts:280](../../../apps/client/src/features/base/hooks/use-base-table.ts). This is harmless because (a) `activeView.id` is unchanged, so the full re-seed branch doesn't trigger, and (b) the `hasPendingEdit` branch preserves live column state when no layout mutation is pending, and adopts derived values otherwise — those derived values are still driven by the same `properties`, so they're content-equal. No action required, but worth naming so the implementer doesn't chase a non-issue.
|
||||
|
||||
## Banner component
|
||||
|
||||
**File:** `apps/client/src/features/base/components/base-view-draft-banner.tsx`
|
||||
|
||||
```ts
|
||||
type BaseViewDraftBannerProps = {
|
||||
isDirty: boolean;
|
||||
canSave: boolean;
|
||||
onReset: () => void;
|
||||
onSave: () => void;
|
||||
saving: boolean;
|
||||
};
|
||||
|
||||
export function BaseViewDraftBanner({ isDirty, canSave, onReset, onSave, saving }: BaseViewDraftBannerProps) {
|
||||
const { t } = useTranslation();
|
||||
if (!isDirty) return null;
|
||||
return (
|
||||
<Paper withBorder radius="sm" px="md" py="xs" /* soft bg per theme */>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<IconInfoCircle size={16} />
|
||||
<Text size="sm">{t("Filter and sort changes are visible only to you.")}</Text>
|
||||
</Group>
|
||||
<Group gap="sm" wrap="nowrap">
|
||||
<Button variant="subtle" color="gray" size="xs" onClick={onReset}>{t("Reset")}</Button>
|
||||
{canSave && (
|
||||
<Button size="xs" onClick={onSave} loading={saving}>{t("Save for everyone")}</Button>
|
||||
)}
|
||||
</Group>
|
||||
</Group>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Wiring in [base-table.tsx](../../../apps/client/src/features/base/components/base-table.tsx), inserted between the existing page chrome and `<BaseToolbar />`:
|
||||
|
||||
```ts
|
||||
const { data: space } = useSpaceQuery(base?.spaceId ?? "");
|
||||
const spaceAbility = useSpaceAbility(space?.membership?.permissions);
|
||||
const canSave = spaceAbility.can(SpaceCaslAction.Edit, SpaceCaslSubject.Base);
|
||||
const updateViewMutation = useUpdateViewMutation();
|
||||
const handleSaveDraft = useCallback(async () => {
|
||||
if (!activeView || !base) return;
|
||||
const config = buildPromotedConfig(activeView.config);
|
||||
await updateViewMutation.mutateAsync({ viewId: activeView.id, baseId: base.id, config });
|
||||
reset();
|
||||
notifications.show({ message: t("View updated for everyone") });
|
||||
}, [activeView, base, buildPromotedConfig, reset, updateViewMutation, t]);
|
||||
|
||||
return (
|
||||
<div style={{...}}>
|
||||
<BaseViewDraftBanner
|
||||
isDirty={isDirty}
|
||||
canSave={canSave}
|
||||
onReset={reset}
|
||||
onSave={handleSaveDraft}
|
||||
saving={updateViewMutation.isPending}
|
||||
/>
|
||||
<BaseToolbar ... />
|
||||
<GridContainer ... />
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
The `useSpaceQuery`/`useSpaceAbility` pair follows the same pattern as [use-history-restore.tsx:35-41](../../../apps/client/src/features/page-history/hooks/use-history-restore.tsx).
|
||||
|
||||
## Cross-tab sync
|
||||
|
||||
Inherited from `atomWithStorage`. Its internal subscription to the `storage` event re-notifies any Jotai-connected component on other tabs when the matching localStorage key changes, triggering a re-render with the new draft value. No hand-rolled listener in `useViewDraft`.
|
||||
|
||||
React Query's row cache is keyed by `(baseId, filter, sorts, search)` — when the updated draft flows through `effectiveFilter` / `effectiveSorts` on the other tab, the row query refetches as a fresh infinite query via the normal path.
|
||||
|
||||
Edge case: two tabs editing simultaneously — both writes land in localStorage, last-write-wins (same-user scope, acceptable).
|
||||
|
||||
## Save flow (pseudocode)
|
||||
|
||||
```ts
|
||||
async function onSaveForEveryone() {
|
||||
if (!activeView || !base) return;
|
||||
// 1. Compose the promoted config from the server baseline + draft values.
|
||||
// baseline is activeView.config (NOT effectiveView.config) because the
|
||||
// baseline might include layout fields (propertyWidths, propertyOrder,
|
||||
// hiddenPropertyIds, visiblePropertyIds) that we must preserve verbatim.
|
||||
const config: ViewConfig = {
|
||||
...activeView.config,
|
||||
filter: draft.filter ?? activeView.config.filter,
|
||||
sorts: draft.sorts ?? activeView.config.sorts,
|
||||
};
|
||||
// 2. Fire the existing mutation. `updateViewMutation` already:
|
||||
// - optimistically updates the ["bases", baseId] query cache
|
||||
// - rolls back on error
|
||||
// - writes the server response back on success
|
||||
await updateViewMutation.mutateAsync({ viewId: activeView.id, baseId: base.id, config });
|
||||
// 3. Clear the draft. Because the baseline has now caught up to what the
|
||||
// draft said, isDirty flips to false and the banner unmounts.
|
||||
reset();
|
||||
notifications.show({ message: t("View updated for everyone") });
|
||||
}
|
||||
```
|
||||
|
||||
Error handling: `useUpdateViewMutation` already shows a red toast and rolls back the optimistic cache update on failure. We do *not* call `reset()` in that case — the draft stays, the banner stays, the user can retry.
|
||||
|
||||
## Dirty check
|
||||
|
||||
`isDirty` lives inside `useViewDraft`. Returns `true` iff the draft file exists AND at least one of these is true:
|
||||
|
||||
- `draft.filter !== undefined` AND `!deepEqualFilter(draft.filter, baselineFilter)`
|
||||
- `draft.sorts !== undefined` AND `!deepEqualSorts(draft.sorts, baselineSorts)`
|
||||
|
||||
**Deep equality:** the codebase has no `lodash` or `fast-deep-equal` in [client package.json](../../../apps/client/package.json). Options:
|
||||
|
||||
1. **`JSON.stringify` both sides and compare strings.** Trivially correct for `FilterGroup` (a pure data tree) and `ViewSortConfig[]`. Key ordering inside objects is deterministic in V8+ for non-numeric keys, which is the case here. Pick this — it's 4 lines and good enough for this shape.
|
||||
2. Hand-written structural compare — overkill for two types with known finite shapes.
|
||||
|
||||
Go with option 1. Helpers live in `use-view-draft.ts`:
|
||||
|
||||
```ts
|
||||
function filterEq(a: FilterGroup | undefined, b: FilterGroup | undefined) {
|
||||
return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
|
||||
}
|
||||
function sortsEq(a: ViewSortConfig[] | undefined, b: ViewSortConfig[] | undefined) {
|
||||
return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
|
||||
}
|
||||
```
|
||||
|
||||
**Orphan suppression.** The agreed rule: when the draft's values equal the baseline, the banner hides. The dirty check above already does that — a draft with `filter: X` where baseline is also `X` yields `filterEq === true` for that axis, and if the sorts axis is also equal (or absent), `isDirty === false`. The key stays in localStorage (no eager GC), but the banner is invisible until the user next diverges or another tab updates the baseline.
|
||||
|
||||
## Testing
|
||||
|
||||
Per [CLAUDE.md](../../../CLAUDE.md), the client has no test infrastructure (no `vitest` in the workspace). This spec does not block on adding one. Testing is primarily manual QA + optional unit tests if Vitest is introduced alongside this feature.
|
||||
|
||||
### Unit tests (proposed, Vitest — gated on harness being added)
|
||||
|
||||
`use-view-draft.test.ts`:
|
||||
|
||||
- **Initialize with no stored value.** Hook returns `draft=null`, `isDirty=false`, effective values fall through to baseline.
|
||||
- **`setFilter` writes to localStorage and updates state.** After `setFilter(X)`, `localStorage.getItem(key)` parses back to `{ filter: X, updatedAt: ... }`, `draft.filter === X`, `isDirty === true`.
|
||||
- **`setSorts` writes independently.** `draft.filter` stays undefined even after `setSorts(...)`, and vice versa.
|
||||
- **`setFilter(undefined)` then `setSorts(undefined)` removes the key.** After both axes are cleared, `localStorage.getItem(key)` is null.
|
||||
- **`reset` clears both state and storage.**
|
||||
- **Draft values equal to baseline → `isDirty === false` without clearing storage.** Set baseline to `B`, set draft filter to `B`, assert `isDirty === false` and `localStorage.getItem(key)` is still non-null (no eager GC).
|
||||
- **Baseline change while draft exists.** Baseline shifts from `B1` to `B2`, draft filter is `X`. Effective filter stays `X`, `isDirty` stays `true`. Then baseline shifts again to `X` — `isDirty` flips to `false` without draft being cleared.
|
||||
- **Cross-tab propagation (integration-level, not strictly a unit test).** `atomWithStorage` handles the `storage` event internally; the only thing our hook contributes is the derivation of `effectiveFilter` / `effectiveSorts` / `isDirty` from the atom value. A single assertion that writing to the atom value in one `Provider` context reflects in another suffices.
|
||||
- **Malformed storage value.** Seed localStorage with garbage under the computed key → `atomWithStorage` yields `null`, hook reports `draft=null`, `isDirty=false`, table receives baseline.
|
||||
- **`userId` missing → passthrough.** All setters are no-ops, `isDirty=false`, effective = baseline.
|
||||
|
||||
### Manual QA checklist
|
||||
|
||||
**Single user, single tab.**
|
||||
- Apply a filter. Banner appears. Row list updates locally.
|
||||
- Click Reset. Banner disappears. Filter in the popover reverts to baseline. Row list reverts.
|
||||
- Apply a filter and a sort. Click Save for everyone. Banner disappears. Refresh the page — the filter/sort is now the new baseline (i.e. came back from the server).
|
||||
- Apply a filter, then manually delete it via the filter popover. Banner disappears. Subsequent refresh does not restore the deleted filter (baseline untouched).
|
||||
|
||||
**Single user, multiple tabs.**
|
||||
- Open base in tab A and tab B. In tab A, add a sort. Tab B re-renders with the same sort applied (verified by checking the sort popover badge and the row order). Tab B shows the banner.
|
||||
- In tab B, click Reset. Tab A's banner disappears and sort reverts.
|
||||
|
||||
**Multi-user baseline race.**
|
||||
- User X (editor) opens base. Applies a filter (draft). User Y (editor) in another session saves a brand-new baseline via their own Save flow. User X's client receives the websocket `base:schema:bumped` → `["bases", baseId]` invalidates → `activeView.config` updates. User X's `effectiveFilter` still shows X's draft filter (draft wins). Banner stays. No UI prompt. If X now clicks Reset, they see Y's new baseline.
|
||||
|
||||
**Permission gating.**
|
||||
- As a space Viewer (who has Read but not Edit on `Base`): open base, apply a filter. Banner appears but shows only "Reset" — no "Save for everyone" button.
|
||||
- Server check: attempting Save as a viewer would have been blocked by [base-view.controller.ts:68](../../../apps/server/src/core/base/controllers/base-view.controller.ts) anyway; the UI gate is belt-and-suspenders.
|
||||
|
||||
**Reset with popover open.**
|
||||
- Open the filter popover and add conditions. Without closing the popover, click Reset (the banner is visible behind the popover dropdown — it's positioned above). Popover closes on outside-click, baseline conditions show next open.
|
||||
|
||||
**Save clears draft + updates server.**
|
||||
- Save. Banner vanishes. localStorage key for `{user,base,view}` is absent. Re-open the base in an incognito/second-account browser — the filter/sort shows too (from the server).
|
||||
|
||||
**Browser storage cleared.**
|
||||
- In DevTools, wipe `localStorage`. Base re-renders with baseline. Banner gone. Expected.
|
||||
|
||||
## Rollout
|
||||
|
||||
- **No DB migration.** No server change.
|
||||
- **No feature flag.** Behavior change ships as-is.
|
||||
- **No data migration.** Existing users have no drafts; the system starts empty.
|
||||
- **Behavioral change vs. today.** Existing users' muscle memory is "touch a filter → auto-saves for everyone". After this ships, that becomes "touch a filter → only I see it until I hit Save for everyone". This is the entire point of the feature but will surprise power users on day one.
|
||||
- Mitigation: none in v1. A one-time popover/tooltip pointing at the banner ("New: filter and sort changes are now a draft until you save") is worth doing, but falls squarely in YAGNI territory for the first ship.
|
||||
- **Followup:** consider a dismissible one-time in-product hint the first time a user diverges from baseline after the deploy. Flag this as a follow-up task; do not ship with v1.
|
||||
|
||||
## Risks & open questions
|
||||
|
||||
- **localStorage quota.** `FilterGroup` + `ViewSortConfig[]` is tiny — a realistic draft is under 2KB. A worst-case malicious user with thousands of views could hit the 5–10MB per-origin cap, but practically negligible. No cleanup logic needed.
|
||||
- **Users losing drafts via browser data clear.** Expected. The banner is a live indicator, not a durable source of truth. Flagged in non-goals.
|
||||
- **Multi-device divergence.** Same user on laptop and phone: drafts don't sync. Expected and flagged.
|
||||
- **Dropdown caret ("Save as new view") in the screenshot.** Explicitly out of scope for v1. If we add it, the caret menu would include:
|
||||
1. "Save for everyone" (current behavior)
|
||||
2. "Save as new view" (creates a new `IBaseView` with draft values baked into `config`)
|
||||
- **Baseline layout fields overriding draft.** Save flow does `{ ...activeView.config, filter: X, sorts: Y }`. If another user changed column widths right before Save, those widths land in the Save's payload (we already read the latest optimistic cache). Acceptable — the alternative (send a sparse patch with only `{filter, sorts}`) would require a server-side partial-update endpoint we don't have.
|
||||
- **Invalid draft for stale schema.** If a property is deleted while a user's draft references it by id, the predicate/sort engine on the server silently drops unknown property ids. Client-side, the sort/filter popover shows the condition with a missing-property label (existing behavior — the toolbar already does `properties.find((p) => p.id === …)` and tolerates the `undefined` case). No special handling needed here; the draft just falls away when the user next edits and doesn't re-add the dead condition.
|
||||
- **`SpaceCaslSubject.Base` missing from client enum.** Single-line fix at [permissions.type.ts:12](../../../apps/client/src/features/space/permissions/permissions.type.ts). Flagged so reviewers notice.
|
||||
|
||||
## Future extension
|
||||
|
||||
1. **Draft column layout.** Extend the draft shape to carry `propertyWidths`, `propertyOrder`, `hiddenPropertyIds`, `visiblePropertyIds`. Column reorder / hide / resize call the draft hook instead of `persistViewConfig`. `useBaseTable` then seeds column state from effective values. Mechanically identical to filter/sort — the hook already takes arbitrary ViewConfig fragments. The only reason this isn't in v1 is to minimize behavioral change surface and keep the spec scope narrow.
|
||||
2. **Server-side per-user drafts.** For cross-device sync, add a `base_view_drafts` table keyed by `(userId, viewId)` storing the same shape. The client hook swaps localStorage for a paired mutation + query. The banner UX stays identical.
|
||||
3. **Split-button save.** Dropdown caret next to "Save for everyone" offering "Save as new view" — creates an `IBaseView` via `createView` with the effective config. Deepens the Notion parallel.
|
||||
4. **Draft conflict hint.** When baseline changes while I have drafts, show a subtle "Baseline has changed since your last edit" line inside the banner with a "Discard draft and load latest" affordance. Expected to be low value in practice — flag once real users report it.
|
||||
+1
-6
@@ -10,7 +10,7 @@ JWT_TOKEN_EXPIRES_IN=30d
|
||||
DATABASE_URL="postgresql://postgres:password@localhost:5432/docmost?schema=public"
|
||||
REDIS_URL=redis://127.0.0.1:6379
|
||||
|
||||
# options: local | s3 | azure
|
||||
# options: local | s3
|
||||
STORAGE_DRIVER=local
|
||||
|
||||
# S3 driver config
|
||||
@@ -21,11 +21,6 @@ AWS_S3_BUCKET=
|
||||
AWS_S3_ENDPOINT=
|
||||
AWS_S3_FORCE_PATH_STYLE=
|
||||
|
||||
# Azure Blob Storage driver config
|
||||
AZURE_STORAGE_ACCOUNT_NAME=
|
||||
AZURE_STORAGE_ACCOUNT_KEY=
|
||||
AZURE_STORAGE_CONTAINER=
|
||||
|
||||
# default: 50mb
|
||||
FILE_UPLOAD_SIZE_LIMIT=
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "client",
|
||||
"private": true,
|
||||
"version": "0.90.0",
|
||||
"version": "0.80.1",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
@@ -18,7 +18,6 @@
|
||||
"@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
|
||||
"@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
|
||||
"@casl/react": "5.0.1",
|
||||
"@docmost/base-formula": "workspace:*",
|
||||
"@docmost/editor-ext": "workspace:*",
|
||||
"@excalidraw/excalidraw": "0.18.0-3a5ef40",
|
||||
"@mantine/core": "8.3.18",
|
||||
@@ -33,7 +32,6 @@
|
||||
"@slidoapp/emoji-mart-react": "1.1.5",
|
||||
"@tabler/icons-react": "3.40.0",
|
||||
"@tanstack/react-query": "5.90.17",
|
||||
"@tanstack/react-table": "8.21.3",
|
||||
"@tanstack/react-virtual": "3.13.24",
|
||||
"alfaaz": "1.1.0",
|
||||
"axios": "1.16.0",
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Exportieren",
|
||||
"Failed to create page": "Erstellung der Seite fehlgeschlagen",
|
||||
"Failed to delete page": "Löschen der Seite fehlgeschlagen",
|
||||
"Failed to restore page": "Seite konnte nicht wiederhergestellt werden",
|
||||
"Failed to fetch recent pages": "Fehler beim Abrufen der letzten Seiten",
|
||||
"Failed to import pages": "Import der Seiten fehlgeschlagen",
|
||||
"Failed to load page. An error occurred.": "Seite konnte nicht geladen werden. Es ist ein Fehler aufgetreten.",
|
||||
@@ -112,7 +111,7 @@
|
||||
"Member": "Mitglied",
|
||||
"members": "Mitglieder",
|
||||
"Members": "Mitglieder",
|
||||
"My preferences": "Meine Einstellungen",
|
||||
"My preferences": "Meine Voreinstellungen",
|
||||
"My Profile": "Mein Profil",
|
||||
"My profile": "Mein Profil",
|
||||
"Name": "Name",
|
||||
@@ -140,7 +139,7 @@
|
||||
"People": "Personen",
|
||||
"Pending": "Ausstehend",
|
||||
"Please confirm your action": "Bitte bestätigen Sie Ihre Aktion",
|
||||
"Preferences": "Einstellungen",
|
||||
"Preferences": "Vorlieben",
|
||||
"Print PDF": "PDF drucken",
|
||||
"Profile": "Profil",
|
||||
"Recently updated": "Kürzlich aktualisiert",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "Links ausrichten",
|
||||
"Align right": "Rechts ausrichten",
|
||||
"Align center": "Zentrieren",
|
||||
"Alt text": "Alternativtext",
|
||||
"Describe this for accessibility.": "Beschreiben Sie dies für die Barrierefreiheit.",
|
||||
"Add a description": "Beschreibung hinzufügen",
|
||||
"Justify": "Blocksatz",
|
||||
"Merge cells": "Zellen zusammenführen",
|
||||
"Split cell": "Zelle teilen",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "Zeile oben hinzufügen",
|
||||
"Add row below": "Zeile unten hinzufügen",
|
||||
"Delete table": "Tabelle löschen",
|
||||
"Add column left": "Spalte links hinzufügen",
|
||||
"Add column right": "Spalte rechts hinzufügen",
|
||||
"Clear cell": "Zelle leeren",
|
||||
"Clear cells": "Zellen leeren",
|
||||
"Toggle header cell": "Kopfzelle umschalten",
|
||||
"Toggle header column": "Kopfspalte umschalten",
|
||||
"Toggle header row": "Kopfzeile umschalten",
|
||||
"Move column left": "Spalte nach links verschieben",
|
||||
"Move column right": "Spalte nach rechts verschieben",
|
||||
"Move row down": "Zeile nach unten verschieben",
|
||||
"Move row up": "Zeile nach oben verschieben",
|
||||
"Sort A → Z": "A → Z sortieren",
|
||||
"Sort Z → A": "Z → A sortieren",
|
||||
"Info": "Info",
|
||||
"Note": "Hinweis",
|
||||
"Success": "Erfolg",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "Erstellen Sie ein Blockzitat.",
|
||||
"Insert code snippet.": "Code-Snippet einfügen.",
|
||||
"Insert horizontal rule divider": "Horizontale Trennlinie einfügen",
|
||||
"Page break": "Seitenumbruch",
|
||||
"Insert a page break for printing.": "Einen Seitenumbruch zum Drucken einfügen.",
|
||||
"Upload any image from your device.": "Laden Sie ein beliebiges Bild von Ihrem Gerät hoch.",
|
||||
"Upload any video from your device.": "Laden Sie ein beliebiges Video von Ihrem Gerät hoch.",
|
||||
"Upload any audio from your device.": "Laden Sie beliebige Audiodateien von Ihrem Gerät hoch.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "\"Schreiben...\"",
|
||||
"Column count": "Spaltenanzahl",
|
||||
"{{count}} Columns": "{{count}} Spalten",
|
||||
"{{count}} command available_one": "1 Befehl verfügbar",
|
||||
"{{count}} command available_other": "{{count}} Befehle verfügbar",
|
||||
"{{count}} result available_one": "1 Ergebnis verfügbar",
|
||||
"{{count}} result available_other": "{{count}} Ergebnisse verfügbar",
|
||||
"Equal columns": "Gleich breite Spalten",
|
||||
"Left sidebar": "Linke Seitenleiste",
|
||||
"Right sidebar": "Rechte Seitenleiste",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} ist verfügbar",
|
||||
"Default page edit mode": "Standard-Bearbeitungsmodus für Seiten",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "Wählen Sie Ihren bevorzugten Seitenbearbeitungsmodus. Vermeiden Sie versehentliche Bearbeitungen.",
|
||||
"Choose {{format}} file": "{{format}}-Datei auswählen",
|
||||
"Reading": "Lesen",
|
||||
"Delete member": "Mitglied löschen",
|
||||
"Member deleted successfully": "Mitglied erfolgreich gelöscht",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "In den Papierkorb verschieben",
|
||||
"Move this page to trash?": "Diese Seite in den Papierkorb verschieben?",
|
||||
"Restore page": "Seite wiederherstellen",
|
||||
"Permanently delete": "Endgültig löschen",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> hat diese Seite {{time}} in den Papierkorb verschoben.",
|
||||
"Page moved to trash": "Seite in den Papierkorb verschoben",
|
||||
"Page restored successfully": "Seite erfolgreich wiederhergestellt",
|
||||
"Deleted by": "Gelöscht von",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "Bild überschreitet das Limit von 10 MB.",
|
||||
"Image removed successfully": "Bild erfolgreich entfernt",
|
||||
"API key": "API-Schlüssel",
|
||||
"API key created successfully": "API-Schlüssel erfolgreich erstellt",
|
||||
"API keys": "API-Schlüssel",
|
||||
"API management": "API-Verwaltung",
|
||||
"Are you sure you want to revoke this API key": "Sind Sie sicher, dass Sie diesen API-Schlüssel widerrufen möchten?",
|
||||
"Create API Key": "API-Schlüssel erstellen",
|
||||
"Custom expiration date": "Benutzerdefiniertes Ablaufdatum",
|
||||
"Enter a descriptive token name": "Geben Sie einen beschreibenden Token-Namen ein",
|
||||
"Expiration": "Ablauf",
|
||||
"Expired": "Abgelaufen",
|
||||
"Expires": "Läuft ab",
|
||||
"I've saved my API key": "Ich habe meinen API-Schlüssel gespeichert",
|
||||
"Last use": "Zuletzt verwendet",
|
||||
"No API keys found": "Keine API-Schlüssel gefunden",
|
||||
"No expiration": "Kein Ablauf",
|
||||
"Revoke API key": "API-Schlüssel widerrufen",
|
||||
"Revoked successfully": "Erfolgreich widerrufen",
|
||||
"Select expiration date": "Ablaufdatum wählen",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "Diese Aktion kann nicht rückgängig gemacht werden. Alle Anwendungen, die diesen API-Schlüssel verwenden, werden nicht mehr funktionieren.",
|
||||
"Update": "Aktualisieren",
|
||||
"Update {{credential}}": "{{credential}} aktualisieren",
|
||||
"Update API key": "API-Schlüssel aktualisieren",
|
||||
"Manage API keys for all users in the workspace": "Verwalten Sie API-Schlüssel für alle Benutzer im Arbeitsbereich",
|
||||
"Restrict API key creation to admins": "API-Schlüsselerstellung auf Administratoren beschränken",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "Nur Administratoren und Eigentümer können neue API-Schlüssel erstellen. Bestehende Mitgliederschlüssel funktionieren weiterhin.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "KI-Chat",
|
||||
"Analyze for insights": "Für Erkenntnisse analysieren",
|
||||
"Ask anything...": "Fragen Sie irgendetwas...",
|
||||
"Assistant said:": "Assistent sagte:",
|
||||
"Chat history": "Chatverlauf",
|
||||
"Chat name": "Chatname",
|
||||
"Chat transcript": "Chatprotokoll",
|
||||
"Close": "Schließen",
|
||||
"Copy assistant response": "Antwort des Assistenten kopieren",
|
||||
"Docmost AI": "Docmost KI",
|
||||
"Failed to load chat. An error occurred.": "Chat konnte nicht geladen werden. Ein Fehler ist aufgetreten.",
|
||||
"Failed to render this message.": "Diese Nachricht konnte nicht dargestellt werden.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "Keine Chats gefunden",
|
||||
"No conversations yet": "Noch keine Unterhaltungen",
|
||||
"Open full page": "Ganze Seite öffnen",
|
||||
"Scroll to bottom": "Nach unten scrollen",
|
||||
"You said:": "Sie sagten:",
|
||||
"Previous 7 days": "Letzte 7 Tage",
|
||||
"Previous 30 days": "Letzte 30 Tage",
|
||||
"Search chats...": "Chats durchsuchen...",
|
||||
"Search chats": "Chats durchsuchen",
|
||||
"Ask anything... Use @ to mention pages": "Frag etwas ... Verwende @, um Seiten zu erwähnen",
|
||||
"Ask anything or search your workspace": "Fragen Sie etwas oder durchsuchen Sie Ihren Workspace",
|
||||
"Welcome to {{name}}": "Willkommen bei {{name}}",
|
||||
"Add files": "Dateien hinzufügen",
|
||||
"Mention a page": "Eine Seite einfügen",
|
||||
"Start a new chat to see it here.": "Starten Sie einen neuen Chat, damit er hier angezeigt wird.",
|
||||
"Summarize this page": "Diese Seite zusammenfassen",
|
||||
"Toggle AI Chat": "KI-Chat umschalten",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "Versuchen Sie einen anderen Suchbegriff.",
|
||||
"Try again": "Erneut versuchen",
|
||||
"Untitled chat": "Chat ohne Titel",
|
||||
"What can I help you with?": "Womit kann ich Ihnen helfen?",
|
||||
"Are you sure you want to revoke this {{credential}}": "Sind Sie sicher, dass Sie diese(n) {{credential}} widerrufen möchten?",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "Stellen Sie Benutzer und Gruppen automatisch über SCIM von Ihrem Identitätsanbieter bereit.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "Konfigurieren Sie Ihren Identitätsanbieter mit dieser URL, um Benutzer und Gruppen bereitzustellen.",
|
||||
"Create {{credential}}": "{{credential}} erstellen",
|
||||
"{{credential}} created": "{{credential}} erstellt",
|
||||
"{{credential}} created successfully": "{{credential}} erfolgreich erstellt",
|
||||
"Created by": "Erstellt von",
|
||||
"Custom": "Benutzerdefiniert",
|
||||
"Enable SCIM": "SCIM aktivieren",
|
||||
"Enter a descriptive name": "Geben Sie einen beschreibenden Namen ein",
|
||||
"I've saved my {{credential}}": "Ich habe meine(n) {{credential}} gespeichert",
|
||||
"Important": "Wichtig",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "Stellen Sie sicher, dass Sie Ihre(n) {{credential}} jetzt kopieren. Sie können sie/ihn später nicht erneut anzeigen!",
|
||||
"Never": "Nie",
|
||||
"Revoke {{credential}}": "{{credential}} widerrufen",
|
||||
"SCIM endpoint URL": "SCIM-Endpunkt-URL",
|
||||
"SCIM provisioning": "SCIM-Bereitstellung",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "SCIM hat Vorrang vor der SSO-Gruppensynchronisierung, solange es aktiviert ist.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "Sie haben die maximale Anzahl von {{max}} SCIM-Token erreicht. Löschen Sie ein vorhandenes Token, um ein neues zu erstellen.",
|
||||
"SCIM token": "SCIM-Token",
|
||||
"SCIM tokens": "SCIM-Token",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "Diese Aktion kann nicht rückgängig gemacht werden. Ihr Identitätsanbieter wird die Synchronisierung sofort beenden.",
|
||||
"Toggle SCIM provisioning": "SCIM-Bereitstellung umschalten",
|
||||
"Token": "Token",
|
||||
"Page menu": "Seitenmenü",
|
||||
"Expand": "Erweitern",
|
||||
"Collapse": "Reduzieren",
|
||||
"Comment menu": "Kommentarmenü",
|
||||
"Group menu": "Gruppenmenü",
|
||||
"Show hidden breadcrumbs": "Ausgeblendete Breadcrumbs anzeigen",
|
||||
"Breadcrumbs": "Navigationspfade",
|
||||
"Page actions": "Seitenaktionen",
|
||||
"Pick emoji": "Emoji auswählen",
|
||||
"Template menu": "Vorlagenmenü",
|
||||
"Use": "Verwenden",
|
||||
"Use template": "Vorlage verwenden",
|
||||
"Preview template: {{title}}": "Vorlage anzeigen: {{title}}",
|
||||
"Use a template": "Eine Vorlage verwenden",
|
||||
"Search templates...": "Vorlagen suchen...",
|
||||
"Search spaces...": "Bereiche suchen...",
|
||||
"No templates found": "Keine Vorlagen gefunden",
|
||||
"No spaces found": "Keine Bereiche gefunden",
|
||||
"Browse all templates": "Alle Vorlagen durchsuchen",
|
||||
"This space": "Dieser Bereich",
|
||||
"All templates": "Alle Vorlagen",
|
||||
"Global": "Global",
|
||||
"New template": "Neue Vorlage",
|
||||
"Edit template": "Vorlage bearbeiten",
|
||||
"Are you sure you want to delete this template?": "Sind Sie sicher, dass Sie diese Vorlage löschen möchten?",
|
||||
"Template scope updated": "Vorlagenbereich aktualisiert",
|
||||
"Choose which space this template belongs to": "Wählen Sie den Bereich aus, zu dem diese Vorlage gehört",
|
||||
"Scope": "Bereich",
|
||||
"Select scope": "Bereich auswählen",
|
||||
"Title": "Titel",
|
||||
"Saving...": "Wird gespeichert...",
|
||||
"Saved": "Gespeichert",
|
||||
"Save failed. Retry": "Speichern fehlgeschlagen. Erneut versuchen",
|
||||
"By {{name}}": "Von {{name}}",
|
||||
"Updated {{time}}": "Aktualisiert {{time}}",
|
||||
"Choose destination": "Ziel auswählen",
|
||||
"Search pages and spaces...": "Seiten und Bereiche suchen...",
|
||||
"No results found": "Keine Ergebnisse gefunden",
|
||||
"You don't have permission to create pages here": "Sie haben hier keine Berechtigung, Seiten zu erstellen",
|
||||
"Chat menu": "Chatmenü",
|
||||
"API key menu": "API-Schlüssel-Menü",
|
||||
"Jump to comment selection": "Zur Kommentarauswahl springen",
|
||||
"Slash commands": "Slash-Befehle",
|
||||
"Mention suggestions": "Erwähnungsvorschläge",
|
||||
"Link suggestions": "Linkvorschläge",
|
||||
"Diagram editor": "Diagrammeditor",
|
||||
"Add comment": "Kommentar hinzufügen",
|
||||
"Find and replace": "Suchen und ersetzen",
|
||||
"Main navigation": "Hauptnavigation",
|
||||
"Space navigation": "Bereichsnavigation",
|
||||
"Settings navigation": "Einstellungsnavigation",
|
||||
"AI navigation": "KI-Navigation",
|
||||
"Breadcrumb": "Navigationspfad",
|
||||
"Synced block": "Synchronisierter Block",
|
||||
"Create a block that stays in sync across pages.": "Erstellt einen Block der über mehrere Seiten synchronisiert wird",
|
||||
"Editing original": "Original bearbeiten",
|
||||
"Copy synced block": "Synchronisierten Block kopieren",
|
||||
"Unsync": "Synchronisierung aufheben",
|
||||
"Delete synced block": "Synchronisierten Block löschen",
|
||||
"Synced to {{count}} other page_one": "Mit {{count}} anderer Seite synchronisiert",
|
||||
"Synced to {{count}} other page_other": "Mit {{count}} anderen Seiten synchronisiert",
|
||||
"ORIGINAL": "ORIGINAL",
|
||||
"THIS PAGE": "DIESE SEITE",
|
||||
"No pages": "Keine Seiten",
|
||||
"The original synced block no longer exists": "Der originale synchronisierte Block existiert nicht mehr",
|
||||
"You don't have access to this synced block": "Sie haben keinen Zugriff auf diesen synchronisierten Block",
|
||||
"Failed to load this synced block": "Dieser synchronisierte Block konnte nicht geladen werden",
|
||||
"Fixed editor toolbar": "Fixierte Editor-Symbolleiste",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Anzeige einer Formatierungs-Symbolleiste über dem Editor für schnellen Zugriff auf Aktionen.",
|
||||
"Toggle fixed editor toolbar": "Fixierte Editor-Symbolleiste ein/aus",
|
||||
"Normal text": "Normaler Text",
|
||||
"More inline formatting": "Weitere Formatierung",
|
||||
"Subscript": "Tiefgestellt",
|
||||
"Superscript": "Hochgestellt",
|
||||
"Inline code": "Inline-Code",
|
||||
"Insert media": "Medien einfügen",
|
||||
"Mention": "Erwähnung",
|
||||
"Emoji": "Emoji",
|
||||
"Columns": "Spalten",
|
||||
"More inserts": "Weiteren Inhalt einfügen",
|
||||
"Embeds": "Einbettungen",
|
||||
"Diagrams": "Diagramme",
|
||||
"Advanced": "Erweitert",
|
||||
"Utility": "Dienstprogramme",
|
||||
"Decrease indent": "Einzug verkleinern",
|
||||
"Increase indent": "Einzug vergrößern",
|
||||
"Clear formatting": "Formatierung zurücksetzen",
|
||||
"Code block": "Codeblock",
|
||||
"Experimental": "Experimentell",
|
||||
"Strikethrough": "Durchgestrichen",
|
||||
"Undo": "Rückgängig",
|
||||
"Redo": "Wiederholen",
|
||||
"Backlinks": "Rückverweise",
|
||||
"Last updated by": "Zuletzt aktualisiert von",
|
||||
"Last updated": "Zuletzt aktualisiert",
|
||||
"Stats": "Statistiken",
|
||||
"Word count": "Wörter",
|
||||
"Characters": "Zeichen",
|
||||
"Incoming links": "Eingehende Links",
|
||||
"Outgoing links": "Ausgehende Links",
|
||||
"Incoming links ({{count}})": "Eingehende Links ({{count}})",
|
||||
"Outgoing links ({{count}})": "Ausgehende Links ({{count}})",
|
||||
"No pages link here yet.": "Aktuell verlinken keine Seiten hierher.",
|
||||
"This page doesn't link to other pages yet.": "Diese Seite verlinkt noch nicht auf andere Seiten.",
|
||||
"Verified until {{date}}": "Verifiziert bis zum {{date}}",
|
||||
"Labels": "Beschriftungen",
|
||||
"Add label": "Beschriftung hinzufügen",
|
||||
"No labels yet": "Noch keine Beschriftungen",
|
||||
"Already added": "Bereits hinzugefügt",
|
||||
"Invalid label name": "Ungültiger Beschriftungsname",
|
||||
"No matches": "Keine Treffer",
|
||||
"Search or create…": "Suchen oder erstellen…",
|
||||
"Remove label {{name}}": "Beschriftung {{name}} entfernen",
|
||||
"Failed to add label": "Beschriftung konnte nicht hinzugefügt werden",
|
||||
"Failed to remove label": "Beschriftung konnte nicht entfernt werden",
|
||||
"No pages with this label": "Keine Seiten mit dieser Beschriftung",
|
||||
"Pages tagged with this label will appear here.": "Hier werden Seiten angezeigt, die mit dieser Beschriftung versehen sind.",
|
||||
"No pages match your search.": "Es konnten keine Seiten gefunden werden, die mit Ihrer Suche übereinstimmen.",
|
||||
"Updated {{date}}": "Aktualisiert am {{date}}",
|
||||
"Cell actions": "Zellaktionen",
|
||||
"Column actions": "Spaltenaktionen",
|
||||
"Row actions": "Zeilenaktionen",
|
||||
"Filter": "Filter",
|
||||
"Page title": "Seitentitel",
|
||||
"Page content": "Seiteninhalt",
|
||||
"Member actions": "Mitgliederaktionen",
|
||||
"Toggle password visibility": "Passwortsichtbarkeit umschalten",
|
||||
"Send comment": "Kommentar senden",
|
||||
"Token actions": "Token-Aktionen",
|
||||
"Template settings": "Vorlageneinstellungen",
|
||||
"Edit diagram": "Diagramm bearbeiten",
|
||||
"Edit embed": "Einbettung bearbeiten",
|
||||
"Edit drawing": "Zeichnung bearbeiten",
|
||||
"Delete equation": "Gleichung löschen",
|
||||
"Invite actions": "Einladungsaktionen",
|
||||
"Get started": "Erste Schritte",
|
||||
"* indicates required fields": "* kennzeichnet Pflichtfelder",
|
||||
"List of spaces in this workspace": "Liste der Bereiche in diesem Workspace",
|
||||
"Active sessions": "Aktive Sitzungen",
|
||||
"Add {{name}} to favorites": "{{name}} zu Favoriten hinzufügen",
|
||||
"Remove {{name}} from favorites": "{{name}} aus Favoriten entfernen",
|
||||
"Added to favorites": "Zu Favoriten hinzugefügt",
|
||||
"Removed from favorites": "Aus Favoriten entfernt",
|
||||
"Added {{name}} to favorites": "{{name}} zu Favoriten hinzugefügt",
|
||||
"Removed {{name}} from favorites": "{{name}} aus Favoriten entfernt",
|
||||
"Page menu for {{name}}": "Seitenmenü für {{name}}",
|
||||
"Create subpage of {{name}}": "Unterseite von {{name}} erstellen",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "Womit kann ich Ihnen helfen?"
|
||||
}
|
||||
|
||||
@@ -277,9 +277,6 @@
|
||||
"Align left": "Align left",
|
||||
"Align right": "Align right",
|
||||
"Align center": "Align center",
|
||||
"Alt text": "Alt text",
|
||||
"Describe this for accessibility.": "Describe this for accessibility.",
|
||||
"Add a description": "Add a description",
|
||||
"Justify": "Justify",
|
||||
"Merge cells": "Merge cells",
|
||||
"Split cell": "Split cell",
|
||||
@@ -1084,23 +1081,5 @@
|
||||
"Added {{name}} to favorites": "Added {{name}} to favorites",
|
||||
"Removed {{name}} from favorites": "Removed {{name}} from favorites",
|
||||
"Page menu for {{name}}": "Page menu for {{name}}",
|
||||
"Create subpage of {{name}}": "Create subpage of {{name}}",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"Create subpage of {{name}}": "Create subpage of {{name}}"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Exportar",
|
||||
"Failed to create page": "No se pudo crear la página",
|
||||
"Failed to delete page": "No se pudo eliminar la página",
|
||||
"Failed to restore page": "No se pudo restaurar la página",
|
||||
"Failed to fetch recent pages": "Error al obtener las páginas recientes",
|
||||
"Failed to import pages": "No se pudieron importar las páginas",
|
||||
"Failed to load page. An error occurred.": "Error al cargar la página. Se produjo un error.",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "Alinear a la izquierda",
|
||||
"Align right": "Alinear a la derecha",
|
||||
"Align center": "Alinear al centro",
|
||||
"Alt text": "Texto alternativo",
|
||||
"Describe this for accessibility.": "Describe esto para la accesibilidad.",
|
||||
"Add a description": "Agregar una descripción",
|
||||
"Justify": "Justificar",
|
||||
"Merge cells": "Combinar celdas",
|
||||
"Split cell": "Dividir celda",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "Agregar fila arriba",
|
||||
"Add row below": "Agregar fila debajo",
|
||||
"Delete table": "Eliminar tabla",
|
||||
"Add column left": "Agregar columna a la izquierda",
|
||||
"Add column right": "Agregar columna a la derecha",
|
||||
"Clear cell": "Borrar celda",
|
||||
"Clear cells": "Borrar celdas",
|
||||
"Toggle header cell": "Alternar celda de encabezado",
|
||||
"Toggle header column": "Alternar columna de encabezado",
|
||||
"Toggle header row": "Alternar fila de encabezado",
|
||||
"Move column left": "Mover columna a la izquierda",
|
||||
"Move column right": "Mover columna a la derecha",
|
||||
"Move row down": "Mover fila hacia abajo",
|
||||
"Move row up": "Mover fila hacia arriba",
|
||||
"Sort A → Z": "Ordenar de A → Z",
|
||||
"Sort Z → A": "Ordenar de Z → A",
|
||||
"Info": "Información",
|
||||
"Note": "Nota",
|
||||
"Success": "Satisfactorio",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "Crear una cita en bloque.",
|
||||
"Insert code snippet.": "Insertar fragmento de código.",
|
||||
"Insert horizontal rule divider": "Insertar regla horizontal",
|
||||
"Page break": "Salto de página",
|
||||
"Insert a page break for printing.": "Inserta un salto de página para imprimir.",
|
||||
"Upload any image from your device.": "Sube cualquier imagen desde tu dispositivo.",
|
||||
"Upload any video from your device.": "Sube cualquier video desde tu dispositivo.",
|
||||
"Upload any audio from your device.": "Sube cualquier audio desde tu dispositivo.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "Escribe...",
|
||||
"Column count": "Número de columnas",
|
||||
"{{count}} Columns": "{count, plural, one {# columna} other {# columnas}}",
|
||||
"{{count}} command available_one": "1 comando disponible",
|
||||
"{{count}} command available_other": "{{count}} comandos disponibles",
|
||||
"{{count}} result available_one": "1 resultado disponible",
|
||||
"{{count}} result available_other": "{{count}} resultados disponibles",
|
||||
"Equal columns": "Columnas iguales",
|
||||
"Left sidebar": "Barra lateral izquierda",
|
||||
"Right sidebar": "Barra lateral derecha",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} está disponible",
|
||||
"Default page edit mode": "Modo de edición predeterminado de la página",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "Elige tu modo de edición de página preferido. Evita ediciones accidentales.",
|
||||
"Choose {{format}} file": "Elegir archivo {{format}}",
|
||||
"Reading": "Lectura",
|
||||
"Delete member": "Eliminar miembro",
|
||||
"Member deleted successfully": "Miembro eliminado correctamente",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "Mover a la papelera",
|
||||
"Move this page to trash?": "¿Mover esta página a la papelera?",
|
||||
"Restore page": "Restaurar página",
|
||||
"Permanently delete": "Eliminar permanentemente",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> movió esta página a la Papelera {{time}}.",
|
||||
"Page moved to trash": "Página movida a la papelera",
|
||||
"Page restored successfully": "Página restaurada correctamente",
|
||||
"Deleted by": "Eliminado por",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "La imagen excede del límite de 10 MB",
|
||||
"Image removed successfully": "Imagen eliminada correctamente",
|
||||
"API key": "Clave API",
|
||||
"API key created successfully": "Clave API creada correctamente",
|
||||
"API keys": "Claves API",
|
||||
"API management": "Gestión de API",
|
||||
"Are you sure you want to revoke this API key": "¿Está seguro de que desea revocar esta clave API? ",
|
||||
"Create API Key": "Crear clave API",
|
||||
"Custom expiration date": "Fecha de vencimiento personalizada",
|
||||
"Enter a descriptive token name": "Introduce un nombre descriptivo del token",
|
||||
"Expiration": "Vencimiento",
|
||||
"Expired": "Vencido",
|
||||
"Expires": "Vence",
|
||||
"I've saved my API key": "He guardado mi clave API",
|
||||
"Last use": "Último uso",
|
||||
"No API keys found": "No se han encontrado claves API",
|
||||
"No expiration": "Sin vencimiento",
|
||||
"Revoke API key": "Revocar clave API",
|
||||
"Revoked successfully": "Revocada correctamente",
|
||||
"Select expiration date": "Seleccionar fecha de vencimiento",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "Esta acción no se puede deshacer. Las aplicaciones que utilicen esta clave API dejarán de funcionar.",
|
||||
"Update": "Actualizar",
|
||||
"Update {{credential}}": "Actualizar {{credential}}",
|
||||
"Update API key": "Actualizar clave API",
|
||||
"Manage API keys for all users in the workspace": "Gestionar claves API para todos los usuarios en el espacio de trabajo",
|
||||
"Restrict API key creation to admins": "Restringir la creación de claves API a administradores",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "Solo los administradores y propietarios pueden crear nuevas claves API. Las claves de miembros existentes seguirán funcionando.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "Chat de IA",
|
||||
"Analyze for insights": "Analizar para obtener información",
|
||||
"Ask anything...": "Pregunta lo que quieras...",
|
||||
"Assistant said:": "El asistente dijo:",
|
||||
"Chat history": "Historial de chat",
|
||||
"Chat name": "Nombre del chat",
|
||||
"Chat transcript": "Transcripción del chat",
|
||||
"Close": "Cerrar",
|
||||
"Copy assistant response": "Copiar respuesta del asistente",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "No se pudo cargar el chat. Se produjo un error.",
|
||||
"Failed to render this message.": "No se pudo mostrar este mensaje.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "No se encontraron chats",
|
||||
"No conversations yet": "Aún no hay conversaciones",
|
||||
"Open full page": "Abrir página completa",
|
||||
"Scroll to bottom": "Desplazarse hasta abajo",
|
||||
"You said:": "Dijiste:",
|
||||
"Previous 7 days": "Últimos 7 días",
|
||||
"Previous 30 days": "Últimos 30 días",
|
||||
"Search chats...": "Buscar chats...",
|
||||
"Search chats": "Buscar chats",
|
||||
"Ask anything... Use @ to mention pages": "Pregunta lo que sea... Usa @ para mencionar páginas",
|
||||
"Ask anything or search your workspace": "Pregunta cualquier cosa o busca en tu espacio de trabajo",
|
||||
"Welcome to {{name}}": "Te damos la bienvenida a {{name}}",
|
||||
"Add files": "Agregar archivos",
|
||||
"Mention a page": "Mencionar una página",
|
||||
"Start a new chat to see it here.": "Inicia un nuevo chat para verlo aquí.",
|
||||
"Summarize this page": "Resumir esta página",
|
||||
"Toggle AI Chat": "Alternar chat de IA",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "Prueba con otro término de búsqueda.",
|
||||
"Try again": "Intentar de nuevo",
|
||||
"Untitled chat": "Chat sin título",
|
||||
"What can I help you with?": "¿En qué puedo ayudarte?",
|
||||
"Are you sure you want to revoke this {{credential}}": "¿Está seguro de que desea revocar esta {{credential}}?",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "Aprovisione automáticamente usuarios y grupos desde su proveedor de identidad mediante SCIM.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "Configure su proveedor de identidad con esta URL para aprovisionar usuarios y grupos.",
|
||||
"Create {{credential}}": "Crear {{credential}}",
|
||||
"{{credential}} created": "{{credential}} creada",
|
||||
"{{credential}} created successfully": "{{credential}} creada con éxito",
|
||||
"Created by": "Creado por",
|
||||
"Custom": "Personalizado",
|
||||
"Enable SCIM": "Habilitar SCIM",
|
||||
"Enter a descriptive name": "Introduzca un nombre descriptivo",
|
||||
"I've saved my {{credential}}": "He guardado mi {{credential}}",
|
||||
"Important": "Importante",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "Asegúrese de copiar su {{credential}} ahora. ¡No podrá volver a verla!",
|
||||
"Never": "Nunca",
|
||||
"Revoke {{credential}}": "Revocar {{credential}}",
|
||||
"SCIM endpoint URL": "URL del endpoint de SCIM",
|
||||
"SCIM provisioning": "Aprovisionamiento SCIM",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "SCIM tiene prioridad sobre la sincronización de grupos de SSO mientras esté habilitado.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "Ha alcanzado el máximo de {{max}} tokens SCIM. Elimine un token existente para crear uno nuevo.",
|
||||
"SCIM token": "Token SCIM",
|
||||
"SCIM tokens": "Tokens SCIM",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "Esta acción no se puede deshacer. Su proveedor de identidad dejará de sincronizarse inmediatamente.",
|
||||
"Toggle SCIM provisioning": "Activar o desactivar el aprovisionamiento SCIM",
|
||||
"Token": "Token",
|
||||
"Page menu": "Menú de la página",
|
||||
"Expand": "Expandir",
|
||||
"Collapse": "Contraer",
|
||||
"Comment menu": "Menú de comentarios",
|
||||
"Group menu": "Menú del grupo",
|
||||
"Show hidden breadcrumbs": "Mostrar rutas de navegación ocultas",
|
||||
"Breadcrumbs": "Rutas de navegación",
|
||||
"Page actions": "Acciones de la página",
|
||||
"Pick emoji": "Elegir emoji",
|
||||
"Template menu": "Menú de plantillas",
|
||||
"Use": "Usar",
|
||||
"Use template": "Usar plantilla",
|
||||
"Preview template: {{title}}": "Vista previa de la plantilla: {{title}}",
|
||||
"Use a template": "Usar una plantilla",
|
||||
"Search templates...": "Buscar plantillas...",
|
||||
"Search spaces...": "Buscar espacios...",
|
||||
"No templates found": "No se encontraron plantillas",
|
||||
"No spaces found": "No se encontraron espacios",
|
||||
"Browse all templates": "Ver todas las plantillas",
|
||||
"This space": "Este espacio",
|
||||
"All templates": "Todas las plantillas",
|
||||
"Global": "Global",
|
||||
"New template": "Nueva plantilla",
|
||||
"Edit template": "Editar plantilla",
|
||||
"Are you sure you want to delete this template?": "¿Seguro que quieres eliminar esta plantilla?",
|
||||
"Template scope updated": "Alcance de la plantilla actualizado",
|
||||
"Choose which space this template belongs to": "Elige a qué espacio pertenece esta plantilla",
|
||||
"Scope": "Alcance",
|
||||
"Select scope": "Seleccionar alcance",
|
||||
"Title": "Título",
|
||||
"Saving...": "Guardando...",
|
||||
"Saved": "Guardado",
|
||||
"Save failed. Retry": "Error al guardar. Reintentar",
|
||||
"By {{name}}": "Por {{name}}",
|
||||
"Updated {{time}}": "Actualizado {{time}}",
|
||||
"Choose destination": "Elegir destino",
|
||||
"Search pages and spaces...": "Buscar páginas y espacios...",
|
||||
"No results found": "No se encontraron resultados",
|
||||
"You don't have permission to create pages here": "No tienes permiso para crear páginas aquí",
|
||||
"Chat menu": "Menú del chat",
|
||||
"API key menu": "Menú de la clave API",
|
||||
"Jump to comment selection": "Ir a la selección de comentarios",
|
||||
"Slash commands": "Comandos de barra",
|
||||
"Mention suggestions": "Sugerencias de menciones",
|
||||
"Link suggestions": "Sugerencias de enlaces",
|
||||
"Diagram editor": "Editor de diagramas",
|
||||
"Add comment": "Agregar comentario",
|
||||
"Find and replace": "Buscar y reemplazar",
|
||||
"Main navigation": "Navegación principal",
|
||||
"Space navigation": "Navegación del espacio",
|
||||
"Settings navigation": "Navegación de configuración",
|
||||
"AI navigation": "Navegación de IA",
|
||||
"Breadcrumb": "Ruta de navegación",
|
||||
"Synced block": "Bloque sincronizado",
|
||||
"Create a block that stays in sync across pages.": "Crea un bloque que se mantenga sincronizado entre páginas.",
|
||||
"Editing original": "Editando original",
|
||||
"Copy synced block": "Copiar bloque sincronizado",
|
||||
"Unsync": "Desincronizar",
|
||||
"Delete synced block": "Eliminar bloque sincronizado",
|
||||
"Synced to {{count}} other page_one": "Sincronizado con {{count}} página más",
|
||||
"Synced to {{count}} other page_other": "Sincronizado con {{count}} páginas más",
|
||||
"ORIGINAL": "ORIGINAL",
|
||||
"THIS PAGE": "ESTA PÁGINA",
|
||||
"No pages": "No hay páginas",
|
||||
"The original synced block no longer exists": "El bloque sincronizado original ya no existe",
|
||||
"You don't have access to this synced block": "No tienes acceso a este bloque sincronizado",
|
||||
"Failed to load this synced block": "No se pudo cargar este bloque sincronizado",
|
||||
"Fixed editor toolbar": "Barra de herramientas fija del editor",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Muestra una barra de herramientas de formato sobre el editor con acceso rápido a acciones comunes.",
|
||||
"Toggle fixed editor toolbar": "Alternar barra de herramientas fija del editor",
|
||||
"Normal text": "Texto normal",
|
||||
"More inline formatting": "Más formato en línea",
|
||||
"Subscript": "Subíndice",
|
||||
"Superscript": "Superíndice",
|
||||
"Inline code": "Código en línea",
|
||||
"Insert media": "Insertar contenido multimedia",
|
||||
"Mention": "Mención",
|
||||
"Emoji": "Emojis",
|
||||
"Columns": "Columnas",
|
||||
"More inserts": "Más inserciones",
|
||||
"Embeds": "Integraciones",
|
||||
"Diagrams": "Diagramas",
|
||||
"Advanced": "Avanzado",
|
||||
"Utility": "Utilidad",
|
||||
"Decrease indent": "Disminuir sangría",
|
||||
"Increase indent": "Aumentar sangría",
|
||||
"Clear formatting": "Borrar formato",
|
||||
"Code block": "Bloque de código",
|
||||
"Experimental": "Experimental",
|
||||
"Strikethrough": "Tachado",
|
||||
"Undo": "Deshacer",
|
||||
"Redo": "Rehacer",
|
||||
"Backlinks": "Enlaces entrantes",
|
||||
"Last updated by": "Última actualización por",
|
||||
"Last updated": "Última actualización",
|
||||
"Stats": "Estadísticas",
|
||||
"Word count": "Recuento de palabras",
|
||||
"Characters": "Caracteres",
|
||||
"Incoming links": "Enlaces entrantes",
|
||||
"Outgoing links": "Enlaces salientes",
|
||||
"Incoming links ({{count}})": "Enlaces entrantes ({{count}})",
|
||||
"Outgoing links ({{count}})": "Enlaces salientes ({{count}})",
|
||||
"No pages link here yet.": "Todavía no hay páginas que enlacen aquí.",
|
||||
"This page doesn't link to other pages yet.": "Esta página todavía no enlaza a otras páginas.",
|
||||
"Verified until {{date}}": "Verificado hasta {{date}}",
|
||||
"Labels": "Etiquetas",
|
||||
"Add label": "Agregar etiqueta",
|
||||
"No labels yet": "Todavía no hay etiquetas",
|
||||
"Already added": "Ya agregado",
|
||||
"Invalid label name": "Nombre de etiqueta no válido",
|
||||
"No matches": "Sin coincidencias",
|
||||
"Search or create…": "Buscar o crear…",
|
||||
"Remove label {{name}}": "Eliminar etiqueta {{name}}",
|
||||
"Failed to add label": "No se pudo agregar la etiqueta",
|
||||
"Failed to remove label": "No se pudo eliminar la etiqueta",
|
||||
"No pages with this label": "No hay páginas con esta etiqueta",
|
||||
"Pages tagged with this label will appear here.": "Las páginas etiquetadas con esta etiqueta aparecerán aquí.",
|
||||
"No pages match your search.": "Ninguna página coincide con tu búsqueda.",
|
||||
"Updated {{date}}": "Actualizado el {{date}}",
|
||||
"Cell actions": "Acciones de celda",
|
||||
"Column actions": "Acciones de columna",
|
||||
"Row actions": "Acciones de fila",
|
||||
"Filter": "Filtrar",
|
||||
"Page title": "Título de la página",
|
||||
"Page content": "Contenido de la página",
|
||||
"Member actions": "Acciones de miembro",
|
||||
"Toggle password visibility": "Alternar visibilidad de la contraseña",
|
||||
"Send comment": "Enviar comentario",
|
||||
"Token actions": "Acciones de token",
|
||||
"Template settings": "Configuración de la plantilla",
|
||||
"Edit diagram": "Editar diagrama",
|
||||
"Edit embed": "Editar contenido integrado",
|
||||
"Edit drawing": "Editar dibujo",
|
||||
"Delete equation": "Eliminar ecuación",
|
||||
"Invite actions": "Acciones de invitación",
|
||||
"Get started": "Comenzar",
|
||||
"* indicates required fields": "* indica los campos obligatorios",
|
||||
"List of spaces in this workspace": "Lista de espacios en este espacio de trabajo",
|
||||
"Active sessions": "Sesiones activas",
|
||||
"Add {{name}} to favorites": "Agregar {{name}} a favoritos",
|
||||
"Remove {{name}} from favorites": "Quitar {{name}} de favoritos",
|
||||
"Added to favorites": "Agregado a favoritos",
|
||||
"Removed from favorites": "Quitado de favoritos",
|
||||
"Added {{name}} to favorites": "Se agregó {{name}} a favoritos",
|
||||
"Removed {{name}} from favorites": "Se quitó {{name}} de favoritos",
|
||||
"Page menu for {{name}}": "Menú de página para {{name}}",
|
||||
"Create subpage of {{name}}": "Crear subpágina de {{name}}",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "¿En qué puedo ayudarte?"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Exporter",
|
||||
"Failed to create page": "Échec de la création de la page",
|
||||
"Failed to delete page": "Échec de la suppression de la page",
|
||||
"Failed to restore page": "Échec de la restauration de la page",
|
||||
"Failed to fetch recent pages": "Échec de la récupération des pages récentes",
|
||||
"Failed to import pages": "Échec de l'importation des pages",
|
||||
"Failed to load page. An error occurred.": "Échec du chargement de la page. Une erreur s'est produite.",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "Aligner à gauche",
|
||||
"Align right": "Aligner à droite",
|
||||
"Align center": "Aligner au centre",
|
||||
"Alt text": "Texte alternatif",
|
||||
"Describe this for accessibility.": "Décrivez ceci pour l’accessibilité.",
|
||||
"Add a description": "Ajouter une description",
|
||||
"Justify": "Justifier",
|
||||
"Merge cells": "Fusionner les cellules",
|
||||
"Split cell": "Diviser la cellule",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "Ajouter une ligne au-dessus",
|
||||
"Add row below": "Ajouter une ligne en dessous",
|
||||
"Delete table": "Supprimer le tableau",
|
||||
"Add column left": "Ajouter une colonne à gauche",
|
||||
"Add column right": "Ajouter une colonne à droite",
|
||||
"Clear cell": "Effacer la cellule",
|
||||
"Clear cells": "Effacer les cellules",
|
||||
"Toggle header cell": "Activer/désactiver la cellule d’en-tête",
|
||||
"Toggle header column": "Activer/désactiver la colonne d’en-tête",
|
||||
"Toggle header row": "Activer/désactiver la ligne d’en-tête",
|
||||
"Move column left": "Déplacer la colonne vers la gauche",
|
||||
"Move column right": "Déplacer la colonne vers la droite",
|
||||
"Move row down": "Déplacer la ligne vers le bas",
|
||||
"Move row up": "Déplacer la ligne vers le haut",
|
||||
"Sort A → Z": "Trier de A à Z",
|
||||
"Sort Z → A": "Trier de Z à A",
|
||||
"Info": "Info",
|
||||
"Note": "Remarque",
|
||||
"Success": "Succès",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "Créez un bloc de citation.",
|
||||
"Insert code snippet.": "Insérez un extrait de code.",
|
||||
"Insert horizontal rule divider": "Insérer un séparateur de règle horizontale",
|
||||
"Page break": "Saut de page",
|
||||
"Insert a page break for printing.": "Insérer un saut de page pour l’impression.",
|
||||
"Upload any image from your device.": "Téléchargez n'importe quelle image depuis votre appareil.",
|
||||
"Upload any video from your device.": "Téléchargez n'importe quelle vidéo depuis votre appareil.",
|
||||
"Upload any audio from your device.": "Téléchargez n'importe quel fichier audio depuis votre appareil.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "Écrire...",
|
||||
"Column count": "Nombre de colonnes",
|
||||
"{{count}} Columns": "{count, plural, one {# colonne} other {# colonnes}}",
|
||||
"{{count}} command available_one": "1 commande disponible",
|
||||
"{{count}} command available_other": "{{count}} commandes disponibles",
|
||||
"{{count}} result available_one": "1 résultat disponible",
|
||||
"{{count}} result available_other": "{{count}} résultats disponibles",
|
||||
"Equal columns": "Colonnes égales",
|
||||
"Left sidebar": "Barre latérale gauche",
|
||||
"Right sidebar": "Barre latérale droite",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} est disponible",
|
||||
"Default page edit mode": "Mode d’édition par défaut de la page",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "Choisissez votre mode d'édition de page préféré. Évitez les modifications accidentelles.",
|
||||
"Choose {{format}} file": "Choisir un fichier {{format}}",
|
||||
"Reading": "Lecture",
|
||||
"Delete member": "Supprimer le membre",
|
||||
"Member deleted successfully": "Membre supprimé avec succès",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "Déplacer vers la corbeille",
|
||||
"Move this page to trash?": "Déplacer cette page vers la corbeille ?",
|
||||
"Restore page": "Restaurer la page",
|
||||
"Permanently delete": "Supprimer définitivement",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> a déplacé cette page vers la corbeille {{time}}.",
|
||||
"Page moved to trash": "Page déplacée vers la corbeille",
|
||||
"Page restored successfully": "Page restaurée avec succès",
|
||||
"Deleted by": "Supprimé par",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "L'image dépasse la limite de 10 Mo.",
|
||||
"Image removed successfully": "Image supprimée avec succès",
|
||||
"API key": "Clé API",
|
||||
"API key created successfully": "Clé API créée avec succès",
|
||||
"API keys": "Clés API",
|
||||
"API management": "Gestion des API",
|
||||
"Are you sure you want to revoke this API key": "Êtes-vous sûr de vouloir révoquer cette clé API",
|
||||
"Create API Key": "Créer une clé API",
|
||||
"Custom expiration date": "Date d'expiration personnalisée",
|
||||
"Enter a descriptive token name": "Entrez un nom descriptif pour le jeton",
|
||||
"Expiration": "Expiration",
|
||||
"Expired": "Expiré(e)",
|
||||
"Expires": "Expire",
|
||||
"I've saved my API key": "J'ai enregistré ma clé API",
|
||||
"Last use": "Dernière utilisation",
|
||||
"No API keys found": "Aucune clé API trouvée",
|
||||
"No expiration": "Pas d'expiration",
|
||||
"Revoke API key": "Révoquer la clé API",
|
||||
"Revoked successfully": "Révoqué(e) avec succès",
|
||||
"Select expiration date": "Sélectionnez la date d'expiration",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "Cette action ne peut pas être annulée. Toutes les applications utilisant cette clé API cesseront de fonctionner.",
|
||||
"Update": "Mettre à jour",
|
||||
"Update {{credential}}": "Mettre à jour {{credential}}",
|
||||
"Update API key": "Mettre à jour la clé API",
|
||||
"Manage API keys for all users in the workspace": "Gérer les clés API pour tous les utilisateurs dans l'espace de travail",
|
||||
"Restrict API key creation to admins": "Restreindre la création de clés API aux administrateurs",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "Seuls les administrateurs et les propriétaires peuvent créer de nouvelles clés API. Les clés des membres existants continueront de fonctionner.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "Chat IA",
|
||||
"Analyze for insights": "Analyser pour obtenir des informations",
|
||||
"Ask anything...": "Posez n’importe quelle question...",
|
||||
"Assistant said:": "L’assistant a dit :",
|
||||
"Chat history": "Historique des discussions",
|
||||
"Chat name": "Nom de la discussion",
|
||||
"Chat transcript": "Transcription du chat",
|
||||
"Close": "Fermer",
|
||||
"Copy assistant response": "Copier la réponse de l’assistant",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "Échec du chargement de la discussion. Une erreur s’est produite.",
|
||||
"Failed to render this message.": "Échec de l’affichage de ce message.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "Aucune discussion trouvée",
|
||||
"No conversations yet": "Aucune conversation pour le moment",
|
||||
"Open full page": "Ouvrir la page complète",
|
||||
"Scroll to bottom": "Faire défiler jusqu’en bas",
|
||||
"You said:": "Vous avez dit :",
|
||||
"Previous 7 days": "7 derniers jours",
|
||||
"Previous 30 days": "30 derniers jours",
|
||||
"Search chats...": "Rechercher des discussions...",
|
||||
"Search chats": "Rechercher des discussions",
|
||||
"Ask anything... Use @ to mention pages": "Demandez n’importe quoi… Utilisez @ pour mentionner des pages",
|
||||
"Ask anything or search your workspace": "Posez n’importe quelle question ou recherchez dans votre espace de travail",
|
||||
"Welcome to {{name}}": "Bienvenue sur {{name}}",
|
||||
"Add files": "Ajouter des fichiers",
|
||||
"Mention a page": "Mentionner une page",
|
||||
"Start a new chat to see it here.": "Commencez une nouvelle discussion pour la voir ici.",
|
||||
"Summarize this page": "Résumer cette page",
|
||||
"Toggle AI Chat": "Basculer le chat IA",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "Essayez un autre terme de recherche.",
|
||||
"Try again": "Réessayer",
|
||||
"Untitled chat": "Discussion sans titre",
|
||||
"What can I help you with?": "Que puis-je faire pour vous aider ?",
|
||||
"Are you sure you want to revoke this {{credential}}": "Êtes-vous sûr de vouloir révoquer ce/cette {{credential}}",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "Provisionnez automatiquement les utilisateurs et les groupes depuis votre fournisseur d’identité via SCIM.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "Configurez votre fournisseur d’identité avec cette URL pour provisionner les utilisateurs et les groupes.",
|
||||
"Create {{credential}}": "Créer {{credential}}",
|
||||
"{{credential}} created": "{{credential}} créé",
|
||||
"{{credential}} created successfully": "{{credential}} créé avec succès",
|
||||
"Created by": "Créé par",
|
||||
"Custom": "Personnalisé",
|
||||
"Enable SCIM": "Activer SCIM",
|
||||
"Enter a descriptive name": "Saisissez un nom descriptif",
|
||||
"I've saved my {{credential}}": "J’ai enregistré mon/ma {{credential}}",
|
||||
"Important": "Important",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "Assurez-vous de copier votre {{credential}} maintenant. Vous ne pourrez plus le/la voir ensuite !",
|
||||
"Never": "Jamais",
|
||||
"Revoke {{credential}}": "Révoquer {{credential}}",
|
||||
"SCIM endpoint URL": "URL du point de terminaison SCIM",
|
||||
"SCIM provisioning": "Provisionnement SCIM",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "SCIM a priorité sur la synchronisation des groupes SSO lorsqu’il est activé.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "Vous avez atteint le maximum de {{max}} jetons SCIM. Supprimez un jeton existant pour en créer un nouveau.",
|
||||
"SCIM token": "Jeton SCIM",
|
||||
"SCIM tokens": "Jetons SCIM",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "Cette action est irréversible. Votre fournisseur d’identité cessera immédiatement la synchronisation.",
|
||||
"Toggle SCIM provisioning": "Activer/désactiver le provisionnement SCIM",
|
||||
"Token": "Jeton",
|
||||
"Page menu": "Menu de la page",
|
||||
"Expand": "Développer",
|
||||
"Collapse": "Réduire",
|
||||
"Comment menu": "Menu du commentaire",
|
||||
"Group menu": "Menu du groupe",
|
||||
"Show hidden breadcrumbs": "Afficher les fils d’Ariane masqués",
|
||||
"Breadcrumbs": "Fils d’Ariane",
|
||||
"Page actions": "Actions de la page",
|
||||
"Pick emoji": "Choisir un emoji",
|
||||
"Template menu": "Menu du modèle",
|
||||
"Use": "Utiliser",
|
||||
"Use template": "Utiliser le modèle",
|
||||
"Preview template: {{title}}": "Aperçu du modèle : {{title}}",
|
||||
"Use a template": "Utiliser un modèle",
|
||||
"Search templates...": "Rechercher des modèles...",
|
||||
"Search spaces...": "Rechercher des espaces...",
|
||||
"No templates found": "Aucun modèle trouvé",
|
||||
"No spaces found": "Aucun espace trouvé",
|
||||
"Browse all templates": "Parcourir tous les modèles",
|
||||
"This space": "Cet espace",
|
||||
"All templates": "Tous les modèles",
|
||||
"Global": "Global",
|
||||
"New template": "Nouveau modèle",
|
||||
"Edit template": "Modifier le modèle",
|
||||
"Are you sure you want to delete this template?": "Êtes-vous sûr de vouloir supprimer ce modèle ?",
|
||||
"Template scope updated": "Portée du modèle mise à jour",
|
||||
"Choose which space this template belongs to": "Choisissez à quel espace appartient ce modèle",
|
||||
"Scope": "Portée",
|
||||
"Select scope": "Sélectionner la portée",
|
||||
"Title": "Titre",
|
||||
"Saving...": "Enregistrement...",
|
||||
"Saved": "Enregistré",
|
||||
"Save failed. Retry": "Échec de l’enregistrement. Réessayer",
|
||||
"By {{name}}": "Par {{name}}",
|
||||
"Updated {{time}}": "Mis à jour {{time}}",
|
||||
"Choose destination": "Choisir la destination",
|
||||
"Search pages and spaces...": "Rechercher des pages et des espaces...",
|
||||
"No results found": "Aucun résultat trouvé",
|
||||
"You don't have permission to create pages here": "Vous n’avez pas l’autorisation de créer des pages ici",
|
||||
"Chat menu": "Menu du chat",
|
||||
"API key menu": "Menu de la clé API",
|
||||
"Jump to comment selection": "Aller à la sélection de commentaires",
|
||||
"Slash commands": "Commandes slash",
|
||||
"Mention suggestions": "Suggestions de mention",
|
||||
"Link suggestions": "Suggestions de liens",
|
||||
"Diagram editor": "Éditeur de diagrammes",
|
||||
"Add comment": "Ajouter un commentaire",
|
||||
"Find and replace": "Rechercher et remplacer",
|
||||
"Main navigation": "Navigation principale",
|
||||
"Space navigation": "Navigation de l’espace",
|
||||
"Settings navigation": "Navigation des paramètres",
|
||||
"AI navigation": "Navigation IA",
|
||||
"Breadcrumb": "Fil d’Ariane",
|
||||
"Synced block": "Bloc synchronisé",
|
||||
"Create a block that stays in sync across pages.": "Créez un bloc qui reste synchronisé entre les pages.",
|
||||
"Editing original": "Modification de l’original",
|
||||
"Copy synced block": "Copier le bloc synchronisé",
|
||||
"Unsync": "Désynchroniser",
|
||||
"Delete synced block": "Supprimer le bloc synchronisé",
|
||||
"Synced to {{count}} other page_one": "Synchronisée avec {{count}} autre page",
|
||||
"Synced to {{count}} other page_other": "Synchronisée avec {{count}} autres pages",
|
||||
"ORIGINAL": "ORIGINAL",
|
||||
"THIS PAGE": "CETTE PAGE",
|
||||
"No pages": "Aucune page",
|
||||
"The original synced block no longer exists": "Le bloc synchronisé d’origine n’existe plus",
|
||||
"You don't have access to this synced block": "Vous n’avez pas accès à ce bloc synchronisé",
|
||||
"Failed to load this synced block": "Échec du chargement de ce bloc synchronisé",
|
||||
"Fixed editor toolbar": "Barre d’outils de l’éditeur fixe",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Afficher une barre d’outils de mise en forme au-dessus de l’éditeur avec un accès rapide aux actions courantes.",
|
||||
"Toggle fixed editor toolbar": "Activer/désactiver la barre d’outils de l’éditeur fixe",
|
||||
"Normal text": "Texte normal",
|
||||
"More inline formatting": "Plus de mise en forme en ligne",
|
||||
"Subscript": "Indice",
|
||||
"Superscript": "Exposant",
|
||||
"Inline code": "Code en ligne",
|
||||
"Insert media": "Insérer un média",
|
||||
"Mention": "Mention",
|
||||
"Emoji": "Emoji",
|
||||
"Columns": "Colonnes",
|
||||
"More inserts": "Plus d’insertions",
|
||||
"Embeds": "Intégrations",
|
||||
"Diagrams": "Diagrammes",
|
||||
"Advanced": "Avancé",
|
||||
"Utility": "Utilitaire",
|
||||
"Decrease indent": "Réduire le retrait",
|
||||
"Increase indent": "Augmenter le retrait",
|
||||
"Clear formatting": "Effacer la mise en forme",
|
||||
"Code block": "Bloc de code",
|
||||
"Experimental": "Expérimental",
|
||||
"Strikethrough": "Barré",
|
||||
"Undo": "Annuler",
|
||||
"Redo": "Rétablir",
|
||||
"Backlinks": "Liens retour",
|
||||
"Last updated by": "Dernière mise à jour par",
|
||||
"Last updated": "Dernière mise à jour",
|
||||
"Stats": "Statistiques",
|
||||
"Word count": "Nombre de mots",
|
||||
"Characters": "Caractères",
|
||||
"Incoming links": "Liens entrants",
|
||||
"Outgoing links": "Liens sortants",
|
||||
"Incoming links ({{count}})": "Liens entrants ({{count}})",
|
||||
"Outgoing links ({{count}})": "Liens sortants ({{count}})",
|
||||
"No pages link here yet.": "Aucune page ne pointe encore ici.",
|
||||
"This page doesn't link to other pages yet.": "Cette page ne renvoie pas encore vers d’autres pages.",
|
||||
"Verified until {{date}}": "Vérifié jusqu’au {{date}}",
|
||||
"Labels": "Étiquettes",
|
||||
"Add label": "Ajouter une étiquette",
|
||||
"No labels yet": "Aucune étiquette pour l’instant",
|
||||
"Already added": "Déjà ajouté",
|
||||
"Invalid label name": "Nom d’étiquette invalide",
|
||||
"No matches": "Aucune correspondance",
|
||||
"Search or create…": "Rechercher ou créer…",
|
||||
"Remove label {{name}}": "Supprimer l’étiquette {{name}}",
|
||||
"Failed to add label": "Échec de l’ajout de l’étiquette",
|
||||
"Failed to remove label": "Échec de la suppression de l’étiquette",
|
||||
"No pages with this label": "Aucune page avec cette étiquette",
|
||||
"Pages tagged with this label will appear here.": "Les pages portant cette étiquette apparaîtront ici.",
|
||||
"No pages match your search.": "Aucune page ne correspond à votre recherche.",
|
||||
"Updated {{date}}": "Mis à jour le {{date}}",
|
||||
"Cell actions": "Actions de cellule",
|
||||
"Column actions": "Actions de colonne",
|
||||
"Row actions": "Actions de ligne",
|
||||
"Filter": "Filtrer",
|
||||
"Page title": "Titre de la page",
|
||||
"Page content": "Contenu de la page",
|
||||
"Member actions": "Actions des membres",
|
||||
"Toggle password visibility": "Afficher/masquer le mot de passe",
|
||||
"Send comment": "Envoyer le commentaire",
|
||||
"Token actions": "Actions du jeton",
|
||||
"Template settings": "Paramètres du modèle",
|
||||
"Edit diagram": "Modifier le diagramme",
|
||||
"Edit embed": "Modifier l’intégration",
|
||||
"Edit drawing": "Modifier le dessin",
|
||||
"Delete equation": "Supprimer l’équation",
|
||||
"Invite actions": "Actions d’invitation",
|
||||
"Get started": "Commencer",
|
||||
"* indicates required fields": "* indique les champs obligatoires",
|
||||
"List of spaces in this workspace": "Liste des espaces de cet espace de travail",
|
||||
"Active sessions": "Sessions actives",
|
||||
"Add {{name}} to favorites": "Ajouter {{name}} aux favoris",
|
||||
"Remove {{name}} from favorites": "Retirer {{name}} des favoris",
|
||||
"Added to favorites": "Ajouté aux favoris",
|
||||
"Removed from favorites": "Retiré des favoris",
|
||||
"Added {{name}} to favorites": "{{name}} a été ajouté aux favoris",
|
||||
"Removed {{name}} from favorites": "{{name}} a été retiré des favoris",
|
||||
"Page menu for {{name}}": "Menu de la page pour {{name}}",
|
||||
"Create subpage of {{name}}": "Créer une sous-page de {{name}}",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "Que puis-je faire pour vous aider ?"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Esporta",
|
||||
"Failed to create page": "Impossibile creare la pagina",
|
||||
"Failed to delete page": "Impossibile eliminare la pagina",
|
||||
"Failed to restore page": "Impossibile ripristinare la pagina",
|
||||
"Failed to fetch recent pages": "Impossibile recuperare le pagine recenti",
|
||||
"Failed to import pages": "Impossibile importare le pagine",
|
||||
"Failed to load page. An error occurred.": "Il caricamento della pagina è fallito. Si è verificato un errore.",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "Allinea a sinistra",
|
||||
"Align right": "Allinea a destra",
|
||||
"Align center": "Allinea al centro",
|
||||
"Alt text": "Testo alternativo",
|
||||
"Describe this for accessibility.": "Descrivi questo contenuto per l'accessibilità.",
|
||||
"Add a description": "Aggiungi una descrizione",
|
||||
"Justify": "Giustifica",
|
||||
"Merge cells": "Unisci celle",
|
||||
"Split cell": "Dividi cella",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "Aggiungi riga sopra",
|
||||
"Add row below": "Aggiungi riga sotto",
|
||||
"Delete table": "Elimina tabella",
|
||||
"Add column left": "Aggiungi colonna a sinistra",
|
||||
"Add column right": "Aggiungi colonna a destra",
|
||||
"Clear cell": "Cancella cella",
|
||||
"Clear cells": "Cancella celle",
|
||||
"Toggle header cell": "Attiva/disattiva cella di intestazione",
|
||||
"Toggle header column": "Attiva/disattiva colonna di intestazione",
|
||||
"Toggle header row": "Attiva/disattiva riga di intestazione",
|
||||
"Move column left": "Sposta colonna a sinistra",
|
||||
"Move column right": "Sposta colonna a destra",
|
||||
"Move row down": "Sposta riga in basso",
|
||||
"Move row up": "Sposta riga in alto",
|
||||
"Sort A → Z": "Ordina A → Z",
|
||||
"Sort Z → A": "Ordina Z → A",
|
||||
"Info": "Informazioni",
|
||||
"Note": "Nota",
|
||||
"Success": "Successo",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "Crea blocco citazione.",
|
||||
"Insert code snippet.": "Inserisci frammento di codice.",
|
||||
"Insert horizontal rule divider": "Inserisci divisore di regola orizzontale",
|
||||
"Page break": "Interruzione di pagina",
|
||||
"Insert a page break for printing.": "Inserisci un'interruzione di pagina per la stampa.",
|
||||
"Upload any image from your device.": "Carica un'immagine dal tuo dispositivo.",
|
||||
"Upload any video from your device.": "Carica qualsiasi video dal tuo dispositivo.",
|
||||
"Upload any audio from your device.": "Carica qualsiasi audio dal tuo dispositivo.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "Scrivi...",
|
||||
"Column count": "Numero di colonne",
|
||||
"{{count}} Columns": "{{count}} colonne",
|
||||
"{{count}} command available_one": "1 comando disponibile",
|
||||
"{{count}} command available_other": "{{count}} comandi disponibili",
|
||||
"{{count}} result available_one": "1 risultato disponibile",
|
||||
"{{count}} result available_other": "{{count}} risultati disponibili",
|
||||
"Equal columns": "Colonne uguali",
|
||||
"Left sidebar": "Barra laterale sinistra",
|
||||
"Right sidebar": "Barra laterale destra",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} è disponibile",
|
||||
"Default page edit mode": "Modalità di modifica predefinita della pagina",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "Scegli la tua modalità di modifica della pagina preferita. Evita modifiche accidentali.",
|
||||
"Choose {{format}} file": "Scegli file {{format}}",
|
||||
"Reading": "Lettura",
|
||||
"Delete member": "Elimina membro",
|
||||
"Member deleted successfully": "Membro eliminato con successo",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "Sposta nel cestino",
|
||||
"Move this page to trash?": "Spostare questa pagina nel cestino?",
|
||||
"Restore page": "Ripristina pagina",
|
||||
"Permanently delete": "Elimina definitivamente",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> ha spostato questa pagina nel Cestino {{time}}.",
|
||||
"Page moved to trash": "Pagina spostata nel cestino",
|
||||
"Page restored successfully": "Pagina ripristinata con successo",
|
||||
"Deleted by": "Eliminato da",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "L'immagine supera il limite di 10MB.",
|
||||
"Image removed successfully": "Immagine rimossa con successo",
|
||||
"API key": "Chiave API",
|
||||
"API key created successfully": "Chiave API creata con successo",
|
||||
"API keys": "Chiavi API",
|
||||
"API management": "Gestione API",
|
||||
"Are you sure you want to revoke this API key": "Sei sicuro di voler revocare questa chiave API",
|
||||
"Create API Key": "Crea Chiave API",
|
||||
"Custom expiration date": "Data di scadenza personalizzata",
|
||||
"Enter a descriptive token name": "Inserisci un nome descrittivo del token",
|
||||
"Expiration": "Scadenza",
|
||||
"Expired": "Scaduto",
|
||||
"Expires": "Scade",
|
||||
"I've saved my API key": "Ho salvato la mia chiave API",
|
||||
"Last use": "Ultimo utilizzo",
|
||||
"No API keys found": "Nessuna chiave API trovata",
|
||||
"No expiration": "Nessuna scadenza",
|
||||
"Revoke API key": "Revoca chiave API",
|
||||
"Revoked successfully": "Revocata con successo",
|
||||
"Select expiration date": "Seleziona la data di scadenza",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "Questa azione non può essere annullata. Qualsiasi applicazione che utilizza questa chiave API smetterà di funzionare.",
|
||||
"Update": "Aggiorna",
|
||||
"Update {{credential}}": "Aggiorna {{credential}}",
|
||||
"Update API key": "Aggiorna chiave API",
|
||||
"Manage API keys for all users in the workspace": "Gestisci le chiavi API per tutti gli utenti nell'area di lavoro",
|
||||
"Restrict API key creation to admins": "Limita la creazione delle chiavi API agli amministratori",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "Solo gli amministratori e i proprietari possono creare nuove chiavi API. Le chiavi dei membri esistenti continueranno a funzionare.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "Chat IA",
|
||||
"Analyze for insights": "Analizza per ottenere approfondimenti",
|
||||
"Ask anything...": "Chiedi qualsiasi cosa...",
|
||||
"Assistant said:": "L'assistente ha detto:",
|
||||
"Chat history": "Cronologia chat",
|
||||
"Chat name": "Nome chat",
|
||||
"Chat transcript": "Trascrizione della chat",
|
||||
"Close": "Chiudi",
|
||||
"Copy assistant response": "Copia risposta dell'assistente",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "Caricamento della chat non riuscito. Si è verificato un errore.",
|
||||
"Failed to render this message.": "Impossibile visualizzare questo messaggio.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "Nessuna chat trovata",
|
||||
"No conversations yet": "Nessuna conversazione al momento",
|
||||
"Open full page": "Apri pagina completa",
|
||||
"Scroll to bottom": "Scorri in basso",
|
||||
"You said:": "Hai detto:",
|
||||
"Previous 7 days": "Ultimi 7 giorni",
|
||||
"Previous 30 days": "Ultimi 30 giorni",
|
||||
"Search chats...": "Cerca nelle chat...",
|
||||
"Search chats": "Cerca nelle chat",
|
||||
"Ask anything... Use @ to mention pages": "Chiedi qualsiasi cosa... Usa @ per menzionare le pagine",
|
||||
"Ask anything or search your workspace": "Chiedi qualsiasi cosa o cerca nel tuo spazio di lavoro",
|
||||
"Welcome to {{name}}": "Benvenuto in {{name}}",
|
||||
"Add files": "Aggiungi file",
|
||||
"Mention a page": "Menziona una pagina",
|
||||
"Start a new chat to see it here.": "Avvia una nuova chat per vederla qui.",
|
||||
"Summarize this page": "Riassumi questa pagina",
|
||||
"Toggle AI Chat": "Attiva/disattiva Chat IA",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "Prova un termine di ricerca diverso.",
|
||||
"Try again": "Riprova",
|
||||
"Untitled chat": "Chat senza titolo",
|
||||
"What can I help you with?": "Con cosa posso aiutarti?",
|
||||
"Are you sure you want to revoke this {{credential}}": "Sei sicuro di voler revocare questa {{credential}}",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "Esegui automaticamente il provisioning di utenti e gruppi dal tuo provider di identità tramite SCIM.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "Configura il tuo provider di identità con questo URL per eseguire il provisioning di utenti e gruppi.",
|
||||
"Create {{credential}}": "Crea {{credential}}",
|
||||
"{{credential}} created": "{{credential}} creata",
|
||||
"{{credential}} created successfully": "{{credential}} creata con successo",
|
||||
"Created by": "Creata da",
|
||||
"Custom": "Personalizzato",
|
||||
"Enable SCIM": "Abilita SCIM",
|
||||
"Enter a descriptive name": "Inserisci un nome descrittivo",
|
||||
"I've saved my {{credential}}": "Ho salvato la mia {{credential}}",
|
||||
"Important": "Importante",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "Assicurati di copiare subito la tua {{credential}}. Non potrai più visualizzarla!",
|
||||
"Never": "Mai",
|
||||
"Revoke {{credential}}": "Revoca {{credential}}",
|
||||
"SCIM endpoint URL": "URL dell'endpoint SCIM",
|
||||
"SCIM provisioning": "Provisioning SCIM",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "SCIM ha la precedenza sulla sincronizzazione dei gruppi SSO quando è abilitato.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "Hai raggiunto il numero massimo di {{max}} token SCIM. Elimina un token esistente per crearne uno nuovo.",
|
||||
"SCIM token": "Token SCIM",
|
||||
"SCIM tokens": "Token SCIM",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "Questa azione non può essere annullata. Il tuo provider di identità smetterà di sincronizzarsi immediatamente.",
|
||||
"Toggle SCIM provisioning": "Attiva/disattiva il provisioning SCIM",
|
||||
"Token": "Token",
|
||||
"Page menu": "Menu della pagina",
|
||||
"Expand": "Espandi",
|
||||
"Collapse": "Comprimi",
|
||||
"Comment menu": "Menu dei commenti",
|
||||
"Group menu": "Menu del gruppo",
|
||||
"Show hidden breadcrumbs": "Mostra breadcrumb nascosti",
|
||||
"Breadcrumbs": "Breadcrumb",
|
||||
"Page actions": "Azioni della pagina",
|
||||
"Pick emoji": "Scegli emoji",
|
||||
"Template menu": "Menu del modello",
|
||||
"Use": "Usa",
|
||||
"Use template": "Usa modello",
|
||||
"Preview template: {{title}}": "Anteprima modello: {{title}}",
|
||||
"Use a template": "Usa un modello",
|
||||
"Search templates...": "Cerca modelli...",
|
||||
"Search spaces...": "Cerca spazi...",
|
||||
"No templates found": "Nessun modello trovato",
|
||||
"No spaces found": "Nessuno spazio trovato",
|
||||
"Browse all templates": "Sfoglia tutti i modelli",
|
||||
"This space": "Questo spazio",
|
||||
"All templates": "Tutti i modelli",
|
||||
"Global": "Globale",
|
||||
"New template": "Nuovo modello",
|
||||
"Edit template": "Modifica modello",
|
||||
"Are you sure you want to delete this template?": "Sei sicuro di voler eliminare questo modello?",
|
||||
"Template scope updated": "Ambito del modello aggiornato",
|
||||
"Choose which space this template belongs to": "Scegli a quale spazio appartiene questo modello",
|
||||
"Scope": "Ambito",
|
||||
"Select scope": "Seleziona ambito",
|
||||
"Title": "Titolo",
|
||||
"Saving...": "Salvataggio...",
|
||||
"Saved": "Salvato",
|
||||
"Save failed. Retry": "Salvataggio non riuscito. Riprova",
|
||||
"By {{name}}": "Di {{name}}",
|
||||
"Updated {{time}}": "Aggiornato {{time}}",
|
||||
"Choose destination": "Scegli destinazione",
|
||||
"Search pages and spaces...": "Cerca pagine e spazi...",
|
||||
"No results found": "Nessun risultato trovato",
|
||||
"You don't have permission to create pages here": "Non hai l'autorizzazione per creare pagine qui",
|
||||
"Chat menu": "Menu della chat",
|
||||
"API key menu": "Menu della chiave API",
|
||||
"Jump to comment selection": "Vai alla selezione dei commenti",
|
||||
"Slash commands": "Comandi slash",
|
||||
"Mention suggestions": "Suggerimenti di menzione",
|
||||
"Link suggestions": "Suggerimenti di link",
|
||||
"Diagram editor": "Editor di diagrammi",
|
||||
"Add comment": "Aggiungi commento",
|
||||
"Find and replace": "Trova e sostituisci",
|
||||
"Main navigation": "Navigazione principale",
|
||||
"Space navigation": "Navigazione dello spazio",
|
||||
"Settings navigation": "Navigazione delle impostazioni",
|
||||
"AI navigation": "Navigazione AI",
|
||||
"Breadcrumb": "Percorso di navigazione",
|
||||
"Synced block": "Blocco sincronizzato",
|
||||
"Create a block that stays in sync across pages.": "Crea un blocco che rimanga sincronizzato tra le pagine.",
|
||||
"Editing original": "Modifica originale",
|
||||
"Copy synced block": "Copia blocco sincronizzato",
|
||||
"Unsync": "Annulla sincronizzazione",
|
||||
"Delete synced block": "Elimina blocco sincronizzato",
|
||||
"Synced to {{count}} other page_one": "Sincronizzato con {{count}} altra pagina",
|
||||
"Synced to {{count}} other page_other": "Sincronizzato con {{count}} altre pagine",
|
||||
"ORIGINAL": "ORIGINALE",
|
||||
"THIS PAGE": "QUESTA PAGINA",
|
||||
"No pages": "Nessuna pagina",
|
||||
"The original synced block no longer exists": "Il blocco sincronizzato originale non esiste più",
|
||||
"You don't have access to this synced block": "Non hai accesso a questo blocco sincronizzato",
|
||||
"Failed to load this synced block": "Impossibile caricare questo blocco sincronizzato",
|
||||
"Fixed editor toolbar": "Barra degli strumenti dell'editor fissa",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Mostra una barra degli strumenti di formattazione sopra l'editor con accesso rapido alle azioni comuni.",
|
||||
"Toggle fixed editor toolbar": "Attiva/disattiva barra degli strumenti dell'editor fissa",
|
||||
"Normal text": "Testo normale",
|
||||
"More inline formatting": "Altra formattazione in linea",
|
||||
"Subscript": "Pedice",
|
||||
"Superscript": "Apice",
|
||||
"Inline code": "Codice in linea",
|
||||
"Insert media": "Inserisci contenuti multimediali",
|
||||
"Mention": "Menzione",
|
||||
"Emoji": "Emoji",
|
||||
"Columns": "Colonne",
|
||||
"More inserts": "Altri inserimenti",
|
||||
"Embeds": "Incorporamenti",
|
||||
"Diagrams": "Diagrammi",
|
||||
"Advanced": "Avanzate",
|
||||
"Utility": "Utilità",
|
||||
"Decrease indent": "Riduci rientro",
|
||||
"Increase indent": "Aumenta rientro",
|
||||
"Clear formatting": "Cancella formattazione",
|
||||
"Code block": "Blocco di codice",
|
||||
"Experimental": "Sperimentale",
|
||||
"Strikethrough": "Barrato",
|
||||
"Undo": "Annulla",
|
||||
"Redo": "Ripeti",
|
||||
"Backlinks": "Backlink",
|
||||
"Last updated by": "Ultimo aggiornamento di",
|
||||
"Last updated": "Ultimo aggiornamento",
|
||||
"Stats": "Statistiche",
|
||||
"Word count": "Conteggio parole",
|
||||
"Characters": "Caratteri",
|
||||
"Incoming links": "Link in entrata",
|
||||
"Outgoing links": "Link in uscita",
|
||||
"Incoming links ({{count}})": "Link in entrata ({{count}})",
|
||||
"Outgoing links ({{count}})": "Link in uscita ({{count}})",
|
||||
"No pages link here yet.": "Nessuna pagina rimanda ancora qui.",
|
||||
"This page doesn't link to other pages yet.": "Questa pagina non rimanda ancora ad altre pagine.",
|
||||
"Verified until {{date}}": "Verificato fino al {{date}}",
|
||||
"Labels": "Etichette",
|
||||
"Add label": "Aggiungi etichetta",
|
||||
"No labels yet": "Nessuna etichetta per ora",
|
||||
"Already added": "Già aggiunto",
|
||||
"Invalid label name": "Nome etichetta non valido",
|
||||
"No matches": "Nessuna corrispondenza",
|
||||
"Search or create…": "Cerca o crea…",
|
||||
"Remove label {{name}}": "Rimuovi etichetta {{name}}",
|
||||
"Failed to add label": "Impossibile aggiungere l'etichetta",
|
||||
"Failed to remove label": "Impossibile rimuovere l'etichetta",
|
||||
"No pages with this label": "Nessuna pagina con questa etichetta",
|
||||
"Pages tagged with this label will appear here.": "Le pagine contrassegnate con questa etichetta appariranno qui.",
|
||||
"No pages match your search.": "Nessuna pagina corrisponde alla tua ricerca.",
|
||||
"Updated {{date}}": "Aggiornato il {{date}}",
|
||||
"Cell actions": "Azioni cella",
|
||||
"Column actions": "Azioni colonna",
|
||||
"Row actions": "Azioni riga",
|
||||
"Filter": "Filtro",
|
||||
"Page title": "Titolo pagina",
|
||||
"Page content": "Contenuto della pagina",
|
||||
"Member actions": "Azioni membro",
|
||||
"Toggle password visibility": "Attiva/disattiva visibilità password",
|
||||
"Send comment": "Invia commento",
|
||||
"Token actions": "Azioni token",
|
||||
"Template settings": "Impostazioni modello",
|
||||
"Edit diagram": "Modifica diagramma",
|
||||
"Edit embed": "Modifica incorporamento",
|
||||
"Edit drawing": "Modifica disegno",
|
||||
"Delete equation": "Elimina equazione",
|
||||
"Invite actions": "Azioni invito",
|
||||
"Get started": "Inizia",
|
||||
"* indicates required fields": "* indica i campi obbligatori",
|
||||
"List of spaces in this workspace": "Elenco degli spazi in questo spazio di lavoro",
|
||||
"Active sessions": "Sessioni attive",
|
||||
"Add {{name}} to favorites": "Aggiungi {{name}} ai preferiti",
|
||||
"Remove {{name}} from favorites": "Rimuovi {{name}} dai preferiti",
|
||||
"Added to favorites": "Aggiunto ai preferiti",
|
||||
"Removed from favorites": "Rimosso dai preferiti",
|
||||
"Added {{name}} to favorites": "{{name}} aggiunto ai preferiti",
|
||||
"Removed {{name}} from favorites": "{{name}} rimosso dai preferiti",
|
||||
"Page menu for {{name}}": "Menu della pagina per {{name}}",
|
||||
"Create subpage of {{name}}": "Crea sottopagina di {{name}}",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "Con cosa posso aiutarti?"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "エクスポート",
|
||||
"Failed to create page": "ページの作成に失敗しました",
|
||||
"Failed to delete page": "ページの削除に失敗しました",
|
||||
"Failed to restore page": "ページの復元に失敗しました",
|
||||
"Failed to fetch recent pages": "最近のページを取得できませんでした",
|
||||
"Failed to import pages": "ページのインポートに失敗しました",
|
||||
"Failed to load page. An error occurred.": "ページの読み込みに失敗しました。エラーが発生しました。",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "左揃え",
|
||||
"Align right": "右揃え",
|
||||
"Align center": "中央揃え",
|
||||
"Alt text": "代替テキスト",
|
||||
"Describe this for accessibility.": "アクセシビリティのために説明を追加してください。",
|
||||
"Add a description": "説明を追加",
|
||||
"Justify": "両端揃え",
|
||||
"Merge cells": "セルを結合",
|
||||
"Split cell": "セルを分割",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "上に行を追加",
|
||||
"Add row below": "下に行を追加",
|
||||
"Delete table": "テーブルを削除",
|
||||
"Add column left": "左に列を追加",
|
||||
"Add column right": "右に列を追加",
|
||||
"Clear cell": "セルをクリア",
|
||||
"Clear cells": "セルをクリア",
|
||||
"Toggle header cell": "ヘッダーセルを切り替え",
|
||||
"Toggle header column": "ヘッダー列を切り替え",
|
||||
"Toggle header row": "ヘッダー行を切り替え",
|
||||
"Move column left": "列を左に移動",
|
||||
"Move column right": "列を右に移動",
|
||||
"Move row down": "行を下に移動",
|
||||
"Move row up": "行を上に移動",
|
||||
"Sort A → Z": "A → Z で並べ替え",
|
||||
"Sort Z → A": "Z → A で並べ替え",
|
||||
"Info": "情報",
|
||||
"Note": "ノート",
|
||||
"Success": "成功",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "引用ブロックを作成します",
|
||||
"Insert code snippet.": "コードスニペットを挿入します",
|
||||
"Insert horizontal rule divider": "区切り線を挿入します",
|
||||
"Page break": "改ページ",
|
||||
"Insert a page break for printing.": "印刷用に改ページを挿入します。",
|
||||
"Upload any image from your device.": "デバイスから画像をアップロードします",
|
||||
"Upload any video from your device.": "デバイスから動画をアップロードします",
|
||||
"Upload any audio from your device.": "デバイスから音声ファイルをアップロードします。",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "ここに入力...",
|
||||
"Column count": "列数",
|
||||
"{{count}} Columns": "{{count}}列",
|
||||
"{{count}} command available_one": "利用可能なコマンドが1件あります",
|
||||
"{{count}} command available_other": "利用可能なコマンドが{{count}}件あります",
|
||||
"{{count}} result available_one": "結果が1件あります",
|
||||
"{{count}} result available_other": "結果が{{count}}件あります",
|
||||
"Equal columns": "均等な列",
|
||||
"Left sidebar": "左サイドバー",
|
||||
"Right sidebar": "右サイドバー",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} が利用可能です",
|
||||
"Default page edit mode": "デフォルトのページ編集モード",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "お好みのページ編集モードを選択してください（誤編集を防止します）",
|
||||
"Choose {{format}} file": "{{format}} ファイルを選択",
|
||||
"Reading": "閲覧",
|
||||
"Delete member": "メンバーを削除",
|
||||
"Member deleted successfully": "メンバーが正常に削除されました",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "ゴミ箱に移動",
|
||||
"Move this page to trash?": "このページをごみ箱に移動しますか?",
|
||||
"Restore page": "ページを復元",
|
||||
"Permanently delete": "完全に削除",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> が {{time}} にこのページをゴミ箱に移動しました。",
|
||||
"Page moved to trash": "ページをゴミ箱に移動しました",
|
||||
"Page restored successfully": "ページが正常に復元されました",
|
||||
"Deleted by": "削除者",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "画像が10MBの制限を超えています",
|
||||
"Image removed successfully": "画像を削除しました",
|
||||
"API key": "APIキー",
|
||||
"API key created successfully": "APIキーを作成しました",
|
||||
"API keys": "APIキー",
|
||||
"API management": "API管理",
|
||||
"Are you sure you want to revoke this API key": "このAPIキーを無効にしてもよろしいですか",
|
||||
"Create API Key": "APIキーを作成",
|
||||
"Custom expiration date": "カスタム有効期限",
|
||||
"Enter a descriptive token name": "説明的なトークン名を入力してください",
|
||||
"Expiration": "有効期限",
|
||||
"Expired": "期限切れ",
|
||||
"Expires": "期限が切れます",
|
||||
"I've saved my API key": "APIキーを保存しました",
|
||||
"Last use": "最終使用",
|
||||
"No API keys found": "APIキーが見つかりません",
|
||||
"No expiration": "期限なし",
|
||||
"Revoke API key": "APIキーを無効にする",
|
||||
"Revoked successfully": "無効にしました",
|
||||
"Select expiration date": "有効期限を選択してください",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "この操作は取り消せません。このAPIキーを使用しているアプリケーションは動作しなくなります",
|
||||
"Update": "更新",
|
||||
"Update {{credential}}": "{{credential}}を更新",
|
||||
"Update API key": "APIキーを更新",
|
||||
"Manage API keys for all users in the workspace": "ワークスペース内のすべてのユーザーのAPIキーを管理",
|
||||
"Restrict API key creation to admins": "APIキーの作成を管理者のみに制限する",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "新しいAPIキーを作成できるのは管理者とオーナーのみです。既存のメンバーキーは引き続き有効です。",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "AI チャット",
|
||||
"Analyze for insights": "分析してインサイトを得る",
|
||||
"Ask anything...": "何でも聞いてください...",
|
||||
"Assistant said:": "アシスタントの回答：",
|
||||
"Chat history": "チャット履歴",
|
||||
"Chat name": "チャット名",
|
||||
"Chat transcript": "チャットの記録",
|
||||
"Close": "閉じる",
|
||||
"Copy assistant response": "アシスタントの回答をコピー",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "チャットの読み込みに失敗しました。エラーが発生しました。",
|
||||
"Failed to render this message.": "このメッセージの表示に失敗しました。",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "チャットが見つかりません",
|
||||
"No conversations yet": "会話はまだありません",
|
||||
"Open full page": "全ページで開く",
|
||||
"Scroll to bottom": "一番下までスクロール",
|
||||
"You said:": "あなたの発言：",
|
||||
"Previous 7 days": "過去 7 日間",
|
||||
"Previous 30 days": "過去 30 日間",
|
||||
"Search chats...": "チャットを検索...",
|
||||
"Search chats": "チャットを検索",
|
||||
"Ask anything... Use @ to mention pages": "何でも質問してください… @ を使ってページにメンションできます",
|
||||
"Ask anything or search your workspace": "何でも質問するか、ワークスペースを検索",
|
||||
"Welcome to {{name}}": "{{name}} へようこそ",
|
||||
"Add files": "ファイルを追加",
|
||||
"Mention a page": "ページにメンション",
|
||||
"Start a new chat to see it here.": "ここに表示するには新しいチャットを開始してください。",
|
||||
"Summarize this page": "このページを要約",
|
||||
"Toggle AI Chat": "AI チャットを切り替え",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "別の検索語を試してください。",
|
||||
"Try again": "再試行",
|
||||
"Untitled chat": "無題のチャット",
|
||||
"What can I help you with?": "何をお手伝いしましょうか？",
|
||||
"Are you sure you want to revoke this {{credential}}": "この{{credential}}を無効にしてもよろしいですか",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "SCIM を介して、ID プロバイダーからユーザーとグループを自動的にプロビジョニングします。",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "この URL を使用して ID プロバイダーを設定し、ユーザーとグループをプロビジョニングします。",
|
||||
"Create {{credential}}": "{{credential}}を作成",
|
||||
"{{credential}} created": "{{credential}}を作成しました",
|
||||
"{{credential}} created successfully": "{{credential}}を正常に作成しました",
|
||||
"Created by": "作成者",
|
||||
"Custom": "カスタム",
|
||||
"Enable SCIM": "SCIM を有効にする",
|
||||
"Enter a descriptive name": "説明的な名前を入力してください",
|
||||
"I've saved my {{credential}}": "{{credential}}を保存しました",
|
||||
"Important": "重要",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "今すぐ {{credential}} をコピーしてください。後でもう一度表示することはできません！",
|
||||
"Never": "なし",
|
||||
"Revoke {{credential}}": "{{credential}}を無効にする",
|
||||
"SCIM endpoint URL": "SCIM エンドポイント URL",
|
||||
"SCIM provisioning": "SCIM プロビジョニング",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "有効になっている間は、SCIM が SSO グループ同期より優先されます。",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "SCIM トークンの上限 {{max}} に達しました。新しいトークンを作成するには、既存のトークンを削除してください。",
|
||||
"SCIM token": "SCIM トークン",
|
||||
"SCIM tokens": "SCIM トークン",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "この操作は元に戻せません。ID プロバイダーは直ちに同期を停止します。",
|
||||
"Toggle SCIM provisioning": "SCIM プロビジョニングを切り替える",
|
||||
"Token": "トークン",
|
||||
"Page menu": "ページメニュー",
|
||||
"Expand": "展開",
|
||||
"Collapse": "折りたたむ",
|
||||
"Comment menu": "コメントメニュー",
|
||||
"Group menu": "グループメニュー",
|
||||
"Show hidden breadcrumbs": "非表示のパンくずリストを表示",
|
||||
"Breadcrumbs": "パンくずリスト",
|
||||
"Page actions": "ページアクション",
|
||||
"Pick emoji": "絵文字を選択",
|
||||
"Template menu": "テンプレートメニュー",
|
||||
"Use": "使用",
|
||||
"Use template": "テンプレートを使用",
|
||||
"Preview template: {{title}}": "テンプレートをプレビュー: {{title}}",
|
||||
"Use a template": "テンプレートを使用",
|
||||
"Search templates...": "テンプレートを検索…",
|
||||
"Search spaces...": "スペースを検索…",
|
||||
"No templates found": "テンプレートが見つかりません",
|
||||
"No spaces found": "スペースが見つかりません",
|
||||
"Browse all templates": "すべてのテンプレートを表示",
|
||||
"This space": "このスペース",
|
||||
"All templates": "すべてのテンプレート",
|
||||
"Global": "グローバル",
|
||||
"New template": "新しいテンプレート",
|
||||
"Edit template": "テンプレートを編集",
|
||||
"Are you sure you want to delete this template?": "このテンプレートを削除してもよろしいですか？",
|
||||
"Template scope updated": "テンプレートのスコープを更新しました",
|
||||
"Choose which space this template belongs to": "このテンプレートを所属させるスペースを選択",
|
||||
"Scope": "スコープ",
|
||||
"Select scope": "スコープを選択",
|
||||
"Title": "タイトル",
|
||||
"Saving...": "保存中…",
|
||||
"Saved": "保存しました",
|
||||
"Save failed. Retry": "保存に失敗しました。再試行",
|
||||
"By {{name}}": "{{name}} 作成",
|
||||
"Updated {{time}}": "{{time}} に更新",
|
||||
"Choose destination": "保存先を選択",
|
||||
"Search pages and spaces...": "ページとスペースを検索…",
|
||||
"No results found": "結果が見つかりません",
|
||||
"You don't have permission to create pages here": "ここにページを作成する権限がありません",
|
||||
"Chat menu": "チャットメニュー",
|
||||
"API key menu": "API キーメニュー",
|
||||
"Jump to comment selection": "コメント選択に移動",
|
||||
"Slash commands": "スラッシュコマンド",
|
||||
"Mention suggestions": "メンション候補",
|
||||
"Link suggestions": "リンク候補",
|
||||
"Diagram editor": "ダイアグラムエディター",
|
||||
"Add comment": "コメントを追加",
|
||||
"Find and replace": "検索と置換",
|
||||
"Main navigation": "メインナビゲーション",
|
||||
"Space navigation": "スペースナビゲーション",
|
||||
"Settings navigation": "設定ナビゲーション",
|
||||
"AI navigation": "AI ナビゲーション",
|
||||
"Breadcrumb": "パンくずリスト",
|
||||
"Synced block": "同期ブロック",
|
||||
"Create a block that stays in sync across pages.": "ページ間で同期されたままになるブロックを作成します。",
|
||||
"Editing original": "オリジナルを編集中",
|
||||
"Copy synced block": "同期ブロックをコピー",
|
||||
"Unsync": "同期解除",
|
||||
"Delete synced block": "同期ブロックを削除",
|
||||
"Synced to {{count}} other page_one": "他の{{count}}ページに同期済みです",
|
||||
"Synced to {{count}} other page_other": "他の{{count}}ページに同期済みです",
|
||||
"ORIGINAL": "オリジナル",
|
||||
"THIS PAGE": "このページ",
|
||||
"No pages": "ページがありません",
|
||||
"The original synced block no longer exists": "元の同期ブロックは存在しなくなりました",
|
||||
"You don't have access to this synced block": "この同期ブロックにアクセスできません",
|
||||
"Failed to load this synced block": "この同期ブロックの読み込みに失敗しました",
|
||||
"Fixed editor toolbar": "固定エディターツールバー",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "一般的な操作にすばやくアクセスできる書式設定ツールバーをエディターの上に表示します。",
|
||||
"Toggle fixed editor toolbar": "固定エディターツールバーを切り替え",
|
||||
"Normal text": "通常のテキスト",
|
||||
"More inline formatting": "その他のインライン書式",
|
||||
"Subscript": "下付き",
|
||||
"Superscript": "上付き",
|
||||
"Inline code": "インラインコード",
|
||||
"Insert media": "メディアを挿入",
|
||||
"Mention": "メンション",
|
||||
"Emoji": "絵文字",
|
||||
"Columns": "列",
|
||||
"More inserts": "その他の挿入",
|
||||
"Embeds": "埋め込み",
|
||||
"Diagrams": "ダイアグラム",
|
||||
"Advanced": "詳細",
|
||||
"Utility": "ユーティリティ",
|
||||
"Decrease indent": "インデントを減らす",
|
||||
"Increase indent": "インデントを増やす",
|
||||
"Clear formatting": "書式をクリア",
|
||||
"Code block": "コードブロック",
|
||||
"Experimental": "実験的",
|
||||
"Strikethrough": "取り消し線",
|
||||
"Undo": "元に戻す",
|
||||
"Redo": "やり直す",
|
||||
"Backlinks": "バックリンク",
|
||||
"Last updated by": "最終更新者",
|
||||
"Last updated": "最終更新",
|
||||
"Stats": "統計",
|
||||
"Word count": "単語数",
|
||||
"Characters": "文字数",
|
||||
"Incoming links": "被リンク",
|
||||
"Outgoing links": "発リンク",
|
||||
"Incoming links ({{count}})": "被リンク ({{count}})",
|
||||
"Outgoing links ({{count}})": "発リンク ({{count}})",
|
||||
"No pages link here yet.": "まだこのページにリンクしているページはありません。",
|
||||
"This page doesn't link to other pages yet.": "このページはまだ他のページにリンクしていません。",
|
||||
"Verified until {{date}}": "{{date}} まで検証済み",
|
||||
"Labels": "ラベル",
|
||||
"Add label": "ラベルを追加",
|
||||
"No labels yet": "まだラベルはありません",
|
||||
"Already added": "追加済み",
|
||||
"Invalid label name": "無効なラベル名",
|
||||
"No matches": "一致するものがありません",
|
||||
"Search or create…": "検索または作成…",
|
||||
"Remove label {{name}}": "ラベル {{name}} を削除",
|
||||
"Failed to add label": "ラベルの追加に失敗しました",
|
||||
"Failed to remove label": "ラベルの削除に失敗しました",
|
||||
"No pages with this label": "このラベルが付いたページはありません",
|
||||
"Pages tagged with this label will appear here.": "このラベルが付いたページがここに表示されます。",
|
||||
"No pages match your search.": "検索に一致するページはありません。",
|
||||
"Updated {{date}}": "{{date}} に更新",
|
||||
"Cell actions": "セルの操作",
|
||||
"Column actions": "列の操作",
|
||||
"Row actions": "行の操作",
|
||||
"Filter": "フィルター",
|
||||
"Page title": "ページタイトル",
|
||||
"Page content": "ページ内容",
|
||||
"Member actions": "メンバーの操作",
|
||||
"Toggle password visibility": "パスワードの表示を切り替え",
|
||||
"Send comment": "コメントを送信",
|
||||
"Token actions": "トークンの操作",
|
||||
"Template settings": "テンプレート設定",
|
||||
"Edit diagram": "ダイアグラムを編集",
|
||||
"Edit embed": "埋め込みを編集",
|
||||
"Edit drawing": "図を編集",
|
||||
"Delete equation": "数式を削除",
|
||||
"Invite actions": "招待の操作",
|
||||
"Get started": "始める",
|
||||
"* indicates required fields": "* は必須項目を示します",
|
||||
"List of spaces in this workspace": "このワークスペース内のスペース一覧",
|
||||
"Active sessions": "アクティブなセッション",
|
||||
"Add {{name}} to favorites": "{{name}} をお気に入りに追加",
|
||||
"Remove {{name}} from favorites": "{{name}} をお気に入りから削除",
|
||||
"Added to favorites": "お気に入りに追加しました",
|
||||
"Removed from favorites": "お気に入りから削除しました",
|
||||
"Added {{name}} to favorites": "{{name}} をお気に入りに追加しました",
|
||||
"Removed {{name}} from favorites": "{{name}} をお気に入りから削除しました",
|
||||
"Page menu for {{name}}": "{{name}} のページメニュー",
|
||||
"Create subpage of {{name}}": "{{name}} のサブページを作成",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "何をお手伝いしましょうか？"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "내보내기",
|
||||
"Failed to create page": "페이지 생성 실패",
|
||||
"Failed to delete page": "페이지 삭제 실패",
|
||||
"Failed to restore page": "페이지를 복원하지 못했습니다",
|
||||
"Failed to fetch recent pages": "최근 페이지 불러오기 실패",
|
||||
"Failed to import pages": "페이지 가져오기 실패",
|
||||
"Failed to load page. An error occurred.": "페이지 불러오기 실패. 오류가 발생했습니다.",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "왼쪽 정렬",
|
||||
"Align right": "오른쪽 정렬",
|
||||
"Align center": "가운데 정렬",
|
||||
"Alt text": "대체 텍스트",
|
||||
"Describe this for accessibility.": "접근성을 위해 이를 설명하세요.",
|
||||
"Add a description": "설명 추가",
|
||||
"Justify": "양쪽 정렬",
|
||||
"Merge cells": "셀 병합",
|
||||
"Split cell": "셀 분할",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "위에 행 추가",
|
||||
"Add row below": "아래에 행 추가",
|
||||
"Delete table": "테이블 삭제",
|
||||
"Add column left": "왼쪽에 열 추가",
|
||||
"Add column right": "오른쪽에 열 추가",
|
||||
"Clear cell": "셀 지우기",
|
||||
"Clear cells": "셀 지우기",
|
||||
"Toggle header cell": "헤더 셀 전환",
|
||||
"Toggle header column": "헤더 열 전환",
|
||||
"Toggle header row": "헤더 행 전환",
|
||||
"Move column left": "열 왼쪽으로 이동",
|
||||
"Move column right": "열 오른쪽으로 이동",
|
||||
"Move row down": "행 아래로 이동",
|
||||
"Move row up": "행 위로 이동",
|
||||
"Sort A → Z": "A → Z 정렬",
|
||||
"Sort Z → A": "Z → A 정렬",
|
||||
"Info": "정보",
|
||||
"Note": "참고",
|
||||
"Success": "완료",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "인용구 만들기.",
|
||||
"Insert code snippet.": "코드 블록 삽입.",
|
||||
"Insert horizontal rule divider": "가로 구분선 삽입",
|
||||
"Page break": "페이지 나누기",
|
||||
"Insert a page break for printing.": "인쇄용 페이지 나누기를 삽입합니다.",
|
||||
"Upload any image from your device.": "기기에서 이미지를 업로드하세요.",
|
||||
"Upload any video from your device.": "기기에서 비디오를 업로드하세요.",
|
||||
"Upload any audio from your device.": "기기에서 오디오를 업로드하세요.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "작성...",
|
||||
"Column count": "열 개수",
|
||||
"{{count}} Columns": "{{count}}열",
|
||||
"{{count}} command available_one": "사용 가능한 명령 1개",
|
||||
"{{count}} command available_other": "사용 가능한 명령 {{count}}개",
|
||||
"{{count}} result available_one": "사용 가능한 결과 1개",
|
||||
"{{count}} result available_other": "사용 가능한 결과 {{count}}개",
|
||||
"Equal columns": "열 너비 균등",
|
||||
"Left sidebar": "왼쪽 사이드바",
|
||||
"Right sidebar": "오른쪽 사이드바",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} 버전을 사용할 수 있습니다",
|
||||
"Default page edit mode": "기본 페이지 편집 모드",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "선호하는 페이지 편집 모드를 선택하세요. 실수로 인한 편집을 방지하세요.",
|
||||
"Choose {{format}} file": "{{format}} 파일 선택",
|
||||
"Reading": "읽기",
|
||||
"Delete member": "멤버 삭제",
|
||||
"Member deleted successfully": "멤버가 성공적으로 삭제되었습니다",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "휴지통으로 이동",
|
||||
"Move this page to trash?": "이 페이지를 휴지통으로 이동하시겠습니까?",
|
||||
"Restore page": "페이지 복원",
|
||||
"Permanently delete": "영구 삭제",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b>님이 {{time}}에 이 페이지를 휴지통으로 이동했습니다.",
|
||||
"Page moved to trash": "페이지가 휴지통으로 이동되었습니다",
|
||||
"Page restored successfully": "페이지가 성공적으로 복원되었습니다",
|
||||
"Deleted by": "삭제한 사람",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "이미지가 10MB 용량 제한을 초과합니다.",
|
||||
"Image removed successfully": "이미지가 성공적으로 제거되었습니다",
|
||||
"API key": "API 키",
|
||||
"API key created successfully": "API 키 생성 완료",
|
||||
"API keys": "API 키",
|
||||
"API management": "API 관리",
|
||||
"Are you sure you want to revoke this API key": "이 API 키를 취소하시겠습니까?",
|
||||
"Create API Key": "API 키 생성",
|
||||
"Custom expiration date": "사용자 정의 만료일",
|
||||
"Enter a descriptive token name": "토큰 이름을 입력하세요",
|
||||
"Expiration": "만료",
|
||||
"Expired": "만료됨",
|
||||
"Expires": "만료일",
|
||||
"I've saved my API key": "API 키를 저장했습니다",
|
||||
"Last use": "최근 사용",
|
||||
"No API keys found": "API 키를 찾을 수 없습니다",
|
||||
"No expiration": "유효기간 없음",
|
||||
"Revoke API key": "API 키 취소",
|
||||
"Revoked successfully": "성공적으로 취소되었습니다",
|
||||
"Select expiration date": "만료일 선택",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "이 작업은 되돌릴 수 없습니다. 이 API 키를 사용하는 모든 응용 프로그램이 작동을 멈출 것입니다.",
|
||||
"Update": "업데이트",
|
||||
"Update {{credential}}": "{{credential}} 업데이트",
|
||||
"Update API key": "API 키 갱신",
|
||||
"Manage API keys for all users in the workspace": "워크스페이스 내 모든 사용자의 API 키 관리",
|
||||
"Restrict API key creation to admins": "API 키 생성 권한을 관리자에게만 제한합니다",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "새로운 API 키는 관리자와 소유자만 생성할 수 있습니다. 기존 멤버 키는 계속 사용할 수 있습니다.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "AI 채팅",
|
||||
"Analyze for insights": "인사이트 분석",
|
||||
"Ask anything...": "무엇이든 물어보세요...",
|
||||
"Assistant said:": "어시스턴트의 답변:",
|
||||
"Chat history": "채팅 기록",
|
||||
"Chat name": "채팅 이름",
|
||||
"Chat transcript": "채팅 기록",
|
||||
"Close": "닫기",
|
||||
"Copy assistant response": "어시스턴트 응답 복사",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "채팅을 불러오지 못했습니다. 오류가 발생했습니다.",
|
||||
"Failed to render this message.": "이 메시지를 렌더링하지 못했습니다.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "채팅을 찾을 수 없습니다",
|
||||
"No conversations yet": "아직 대화가 없습니다",
|
||||
"Open full page": "전체 페이지 열기",
|
||||
"Scroll to bottom": "맨 아래로 스크롤",
|
||||
"You said:": "내가 한 말:",
|
||||
"Previous 7 days": "지난 7일",
|
||||
"Previous 30 days": "지난 30일",
|
||||
"Search chats...": "채팅 검색...",
|
||||
"Search chats": "채팅 검색",
|
||||
"Ask anything... Use @ to mention pages": "무엇이든 물어보세요... 페이지를 언급하려면 @를 사용하세요",
|
||||
"Ask anything or search your workspace": "무엇이든 물어보거나 워크스페이스를 검색하세요",
|
||||
"Welcome to {{name}}": "{{name}}에 오신 것을 환영합니다",
|
||||
"Add files": "파일 추가",
|
||||
"Mention a page": "페이지 멘션",
|
||||
"Start a new chat to see it here.": "여기에 표시하려면 새 채팅을 시작하세요.",
|
||||
"Summarize this page": "이 페이지 요약",
|
||||
"Toggle AI Chat": "AI 채팅 전환",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "다른 검색어를 사용해 보세요.",
|
||||
"Try again": "다시 시도",
|
||||
"Untitled chat": "제목 없는 채팅",
|
||||
"What can I help you with?": "무엇을 도와드릴까요?",
|
||||
"Are you sure you want to revoke this {{credential}}": "이 {{credential}}을 취소하시겠습니까?",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "SCIM을 통해 ID 공급자에서 사용자와 그룹을 자동으로 프로비저닝합니다.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "사용자와 그룹을 프로비저닝할 수 있도록 이 URL로 ID 공급자를 구성하세요.",
|
||||
"Create {{credential}}": "{{credential}} 만들기",
|
||||
"{{credential}} created": "{{credential}} 생성됨",
|
||||
"{{credential}} created successfully": "{{credential}} 생성 완료",
|
||||
"Created by": "생성한 사람",
|
||||
"Custom": "사용자 지정",
|
||||
"Enable SCIM": "SCIM 활성화",
|
||||
"Enter a descriptive name": "설명적인 이름을 입력하세요",
|
||||
"I've saved my {{credential}}": "내 {{credential}}를 저장했습니다",
|
||||
"Important": "중요",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "지금 {{credential}}를 복사해 두세요. 다시는 볼 수 없습니다!",
|
||||
"Never": "안 함",
|
||||
"Revoke {{credential}}": "{{credential}} 취소",
|
||||
"SCIM endpoint URL": "SCIM 엔드포인트 URL",
|
||||
"SCIM provisioning": "SCIM 프로비저닝",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "SCIM이 활성화되어 있는 동안에는 SSO 그룹 동기화보다 SCIM이 우선 적용됩니다.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "SCIM 토큰은 최대 {{max}}개까지 만들 수 있습니다. 새 토큰을 만들려면 기존 토큰을 삭제하세요.",
|
||||
"SCIM token": "SCIM 토큰",
|
||||
"SCIM tokens": "SCIM 토큰",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "이 작업은 되돌릴 수 없습니다. ID 공급자가 즉시 동기화를 중지합니다.",
|
||||
"Toggle SCIM provisioning": "SCIM 프로비저닝 전환",
|
||||
"Token": "토큰",
|
||||
"Page menu": "페이지 메뉴",
|
||||
"Expand": "펼치기",
|
||||
"Collapse": "접기",
|
||||
"Comment menu": "댓글 메뉴",
|
||||
"Group menu": "그룹 메뉴",
|
||||
"Show hidden breadcrumbs": "숨겨진 이동 경로 표시",
|
||||
"Breadcrumbs": "이동 경로",
|
||||
"Page actions": "페이지 작업",
|
||||
"Pick emoji": "이모지 선택",
|
||||
"Template menu": "템플릿 메뉴",
|
||||
"Use": "사용",
|
||||
"Use template": "템플릿 사용",
|
||||
"Preview template: {{title}}": "템플릿 미리보기: {{title}}",
|
||||
"Use a template": "템플릿 사용",
|
||||
"Search templates...": "템플릿 검색...",
|
||||
"Search spaces...": "스페이스 검색...",
|
||||
"No templates found": "템플릿을 찾을 수 없습니다",
|
||||
"No spaces found": "스페이스를 찾을 수 없습니다",
|
||||
"Browse all templates": "모든 템플릿 보기",
|
||||
"This space": "이 스페이스",
|
||||
"All templates": "모든 템플릿",
|
||||
"Global": "전역",
|
||||
"New template": "새 템플릿",
|
||||
"Edit template": "템플릿 편집",
|
||||
"Are you sure you want to delete this template?": "이 템플릿을 삭제하시겠습니까?",
|
||||
"Template scope updated": "템플릿 범위가 업데이트되었습니다",
|
||||
"Choose which space this template belongs to": "이 템플릿이 속할 스페이스를 선택하세요",
|
||||
"Scope": "범위",
|
||||
"Select scope": "범위 선택",
|
||||
"Title": "제목",
|
||||
"Saving...": "저장 중...",
|
||||
"Saved": "저장됨",
|
||||
"Save failed. Retry": "저장에 실패했습니다. 다시 시도하세요",
|
||||
"By {{name}}": "작성자 {{name}}",
|
||||
"Updated {{time}}": "{{time}}에 업데이트됨",
|
||||
"Choose destination": "대상 선택",
|
||||
"Search pages and spaces...": "페이지와 스페이스 검색...",
|
||||
"No results found": "결과를 찾을 수 없습니다",
|
||||
"You don't have permission to create pages here": "여기에서 페이지를 만들 권한이 없습니다",
|
||||
"Chat menu": "채팅 메뉴",
|
||||
"API key menu": "API 키 메뉴",
|
||||
"Jump to comment selection": "댓글 선택으로 이동",
|
||||
"Slash commands": "슬래시 명령어",
|
||||
"Mention suggestions": "멘션 추천",
|
||||
"Link suggestions": "링크 추천",
|
||||
"Diagram editor": "다이어그램 편집기",
|
||||
"Add comment": "댓글 추가",
|
||||
"Find and replace": "찾기 및 바꾸기",
|
||||
"Main navigation": "기본 탐색",
|
||||
"Space navigation": "스페이스 탐색",
|
||||
"Settings navigation": "설정 탐색",
|
||||
"AI navigation": "AI 탐색",
|
||||
"Breadcrumb": "이동 경로",
|
||||
"Synced block": "동기화된 블록",
|
||||
"Create a block that stays in sync across pages.": "페이지 간에 동기화된 상태로 유지되는 블록을 만드세요.",
|
||||
"Editing original": "원본 편집 중",
|
||||
"Copy synced block": "동기화된 블록 복사",
|
||||
"Unsync": "동기화 해제",
|
||||
"Delete synced block": "동기화된 블록 삭제",
|
||||
"Synced to {{count}} other page_one": "다른 페이지 {{count}}개에 동기화됨",
|
||||
"Synced to {{count}} other page_other": "다른 페이지 {{count}}개에 동기화됨",
|
||||
"ORIGINAL": "원본",
|
||||
"THIS PAGE": "이 페이지",
|
||||
"No pages": "페이지 없음",
|
||||
"The original synced block no longer exists": "원본 동기화 블록이 더 이상 존재하지 않습니다",
|
||||
"You don't have access to this synced block": "이 동기화된 블록에 접근할 수 없습니다",
|
||||
"Failed to load this synced block": "이 동기화된 블록을 불러오지 못했습니다",
|
||||
"Fixed editor toolbar": "고정된 편집기 도구 모음",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "일반적인 작업에 빠르게 접근할 수 있도록 편집기 위에 서식 도구 모음을 표시합니다.",
|
||||
"Toggle fixed editor toolbar": "고정된 편집기 도구 모음 전환",
|
||||
"Normal text": "일반 텍스트",
|
||||
"More inline formatting": "추가 인라인 서식",
|
||||
"Subscript": "아래 첨자",
|
||||
"Superscript": "위 첨자",
|
||||
"Inline code": "인라인 코드",
|
||||
"Insert media": "미디어 삽입",
|
||||
"Mention": "멘션",
|
||||
"Emoji": "이모지",
|
||||
"Columns": "열",
|
||||
"More inserts": "더 많은 삽입",
|
||||
"Embeds": "임베드",
|
||||
"Diagrams": "다이어그램",
|
||||
"Advanced": "고급",
|
||||
"Utility": "유틸리티",
|
||||
"Decrease indent": "들여쓰기 줄이기",
|
||||
"Increase indent": "들여쓰기 늘리기",
|
||||
"Clear formatting": "서식 지우기",
|
||||
"Code block": "코드 블록",
|
||||
"Experimental": "실험 기능",
|
||||
"Strikethrough": "취소선",
|
||||
"Undo": "실행 취소",
|
||||
"Redo": "다시 실행",
|
||||
"Backlinks": "백링크",
|
||||
"Last updated by": "마지막 업데이트한 사람",
|
||||
"Last updated": "마지막 업데이트",
|
||||
"Stats": "통계",
|
||||
"Word count": "단어 수",
|
||||
"Characters": "문자 수",
|
||||
"Incoming links": "들어오는 링크",
|
||||
"Outgoing links": "나가는 링크",
|
||||
"Incoming links ({{count}})": "들어오는 링크 ({{count}})",
|
||||
"Outgoing links ({{count}})": "나가는 링크 ({{count}})",
|
||||
"No pages link here yet.": "아직 여기에 링크된 페이지가 없습니다.",
|
||||
"This page doesn't link to other pages yet.": "이 페이지는 아직 다른 페이지에 링크되어 있지 않습니다.",
|
||||
"Verified until {{date}}": "{{date}}까지 검증됨",
|
||||
"Labels": "라벨",
|
||||
"Add label": "라벨 추가",
|
||||
"No labels yet": "아직 라벨이 없습니다",
|
||||
"Already added": "이미 추가됨",
|
||||
"Invalid label name": "유효하지 않은 라벨 이름",
|
||||
"No matches": "일치하는 항목 없음",
|
||||
"Search or create…": "검색하거나 만들기…",
|
||||
"Remove label {{name}}": "라벨 {{name}} 제거",
|
||||
"Failed to add label": "라벨 추가 실패",
|
||||
"Failed to remove label": "라벨 제거 실패",
|
||||
"No pages with this label": "이 라벨이 지정된 페이지가 없습니다",
|
||||
"Pages tagged with this label will appear here.": "이 라벨이 지정된 페이지가 여기에 표시됩니다.",
|
||||
"No pages match your search.": "검색과 일치하는 페이지가 없습니다.",
|
||||
"Updated {{date}}": "{{date}}에 업데이트됨",
|
||||
"Cell actions": "셀 작업",
|
||||
"Column actions": "열 작업",
|
||||
"Row actions": "행 작업",
|
||||
"Filter": "필터",
|
||||
"Page title": "페이지 제목",
|
||||
"Page content": "페이지 내용",
|
||||
"Member actions": "멤버 작업",
|
||||
"Toggle password visibility": "비밀번호 표시 전환",
|
||||
"Send comment": "댓글 보내기",
|
||||
"Token actions": "토큰 작업",
|
||||
"Template settings": "템플릿 설정",
|
||||
"Edit diagram": "다이어그램 편집",
|
||||
"Edit embed": "임베드 편집",
|
||||
"Edit drawing": "드로잉 편집",
|
||||
"Delete equation": "수식 삭제",
|
||||
"Invite actions": "초대 작업",
|
||||
"Get started": "시작하기",
|
||||
"* indicates required fields": "* 는 필수 입력 항목을 나타냅니다",
|
||||
"List of spaces in this workspace": "이 워크스페이스의 스페이스 목록",
|
||||
"Active sessions": "활성 세션",
|
||||
"Add {{name}} to favorites": "{{name}} 즐겨찾기에 추가",
|
||||
"Remove {{name}} from favorites": "{{name}} 즐겨찾기에서 제거",
|
||||
"Added to favorites": "즐겨찾기에 추가됨",
|
||||
"Removed from favorites": "즐겨찾기에서 제거됨",
|
||||
"Added {{name}} to favorites": "{{name}} 즐겨찾기에 추가됨",
|
||||
"Removed {{name}} from favorites": "{{name}} 즐겨찾기에서 제거됨",
|
||||
"Page menu for {{name}}": "{{name}}의 페이지 메뉴",
|
||||
"Create subpage of {{name}}": "{{name}}의 하위 페이지 만들기",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "무엇을 도와드릴까요?"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Exporteer",
|
||||
"Failed to create page": "Pagina aanmaken mislukt",
|
||||
"Failed to delete page": "Verwijderen van pagina mislukt",
|
||||
"Failed to restore page": "Pagina herstellen mislukt",
|
||||
"Failed to fetch recent pages": "Kan recente pagina's niet ophalen",
|
||||
"Failed to import pages": "Pagina's importeren mislukt",
|
||||
"Failed to load page. An error occurred.": "Laden van pagina mislukt. Er is een fout opgetreden.",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "Links uitlijnen",
|
||||
"Align right": "Rechts uitlijnen",
|
||||
"Align center": "Centreren",
|
||||
"Alt text": "Alternatieve tekst",
|
||||
"Describe this for accessibility.": "Beschrijf dit voor toegankelijkheid.",
|
||||
"Add a description": "Een beschrijving toevoegen",
|
||||
"Justify": "Uitvullen",
|
||||
"Merge cells": "Cellen samenvoegen",
|
||||
"Split cell": "Cel splitsen",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "Rij hierboven toevoegen",
|
||||
"Add row below": "Rij hieronder toevoegen",
|
||||
"Delete table": "Verwijder tabel",
|
||||
"Add column left": "Kolom links toevoegen",
|
||||
"Add column right": "Kolom rechts toevoegen",
|
||||
"Clear cell": "Cel wissen",
|
||||
"Clear cells": "Cellen wissen",
|
||||
"Toggle header cell": "Kopcel in-/uitschakelen",
|
||||
"Toggle header column": "Kopkolom in-/uitschakelen",
|
||||
"Toggle header row": "Koprij in-/uitschakelen",
|
||||
"Move column left": "Kolom naar links verplaatsen",
|
||||
"Move column right": "Kolom naar rechts verplaatsen",
|
||||
"Move row down": "Rij omlaag verplaatsen",
|
||||
"Move row up": "Rij omhoog verplaatsen",
|
||||
"Sort A → Z": "Sorteren A → Z",
|
||||
"Sort Z → A": "Sorteren Z → A",
|
||||
"Info": "Info",
|
||||
"Note": "Opmerking",
|
||||
"Success": "Geslaagd",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "Maak een block quote.",
|
||||
"Insert code snippet.": "Codefragment invoegen.",
|
||||
"Insert horizontal rule divider": "Horizontale lijn invoegen",
|
||||
"Page break": "Pagina-einde",
|
||||
"Insert a page break for printing.": "Voeg een pagina-einde in voor het afdrukken.",
|
||||
"Upload any image from your device.": "Upload een afbeelding vanaf uw apparaat.",
|
||||
"Upload any video from your device.": "Upload een video vanaf uw apparaat.",
|
||||
"Upload any audio from your device.": "Upload een audio vanaf uw apparaat.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "Typ...",
|
||||
"Column count": "Aantal kolommen",
|
||||
"{{count}} Columns": "{{count}} kolommen",
|
||||
"{{count}} command available_one": "1 opdracht beschikbaar",
|
||||
"{{count}} command available_other": "{{count}} opdrachten beschikbaar",
|
||||
"{{count}} result available_one": "1 resultaat beschikbaar",
|
||||
"{{count}} result available_other": "{{count}} resultaten beschikbaar",
|
||||
"Equal columns": "Gelijke kolommen",
|
||||
"Left sidebar": "Linker zijbalk",
|
||||
"Right sidebar": "Rechter zijbalk",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} is beschikbaar",
|
||||
"Default page edit mode": "Standaard bewerkingsmodus voor pagina",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "Kies uw voorkeurs bewerkmodus voor pagina's. Vermijd per ongeluk bewerken.",
|
||||
"Choose {{format}} file": "Kies {{format}}-bestand",
|
||||
"Reading": "Lezen",
|
||||
"Delete member": "Lid verwijderen",
|
||||
"Member deleted successfully": "Lid succesvol verwijderd",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "Verplaatsen naar prullenbak",
|
||||
"Move this page to trash?": "Deze pagina naar de prullenbak verplaatsen?",
|
||||
"Restore page": "Pagina herstellen",
|
||||
"Permanently delete": "Permanent verwijderen",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> heeft deze pagina {{time}} naar de prullenbak verplaatst.",
|
||||
"Page moved to trash": "Pagina verplaatst naar prullenbak",
|
||||
"Page restored successfully": "Pagina succesvol hersteld",
|
||||
"Deleted by": "Verwijderd door",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "Afbeelding overschrijdt de limiet van 10MB.",
|
||||
"Image removed successfully": "Afbeelding succesvol verwijderd",
|
||||
"API key": "API-sleutel",
|
||||
"API key created successfully": "API-sleutel succesvol aangemaakt",
|
||||
"API keys": "API-sleutels",
|
||||
"API management": "API-beheer",
|
||||
"Are you sure you want to revoke this API key": "Weet u zeker dat u deze API-sleutel wilt intrekken",
|
||||
"Create API Key": "API-sleutel aanmaken",
|
||||
"Custom expiration date": "Aangepaste vervaldatum",
|
||||
"Enter a descriptive token name": "Voer een beschrijvende tokennaam in",
|
||||
"Expiration": "Vervaldatum",
|
||||
"Expired": "Verlopen",
|
||||
"Expires": "Verloopt",
|
||||
"I've saved my API key": "Ik heb mijn API-sleutel opgeslagen",
|
||||
"Last use": "Laatst gebruikt",
|
||||
"No API keys found": "Geen API-sleutels gevonden",
|
||||
"No expiration": "Geen vervaldatum",
|
||||
"Revoke API key": "API-sleutel intrekken",
|
||||
"Revoked successfully": "Succesvol ingetrokken",
|
||||
"Select expiration date": "Selecteer vervaldatum",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "Deze actie kan niet ongedaan worden gemaakt. Alle toepassingen die deze API-sleutel gebruiken, zullen niet meer werken.",
|
||||
"Update": "Bijwerken",
|
||||
"Update {{credential}}": "{{credential}} bijwerken",
|
||||
"Update API key": "API-sleutel bijwerken",
|
||||
"Manage API keys for all users in the workspace": "Beheer API-sleutels voor alle gebruikers in de werkruimte",
|
||||
"Restrict API key creation to admins": "Beperk het aanmaken van API-sleutels tot beheerders.",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "Alleen beheerders en eigenaren kunnen nieuwe API-sleutels aanmaken. Bestaande leden-sleutels blijven werken.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "AI-chat",
|
||||
"Analyze for insights": "Analyseren voor inzichten",
|
||||
"Ask anything...": "Vraag iets...",
|
||||
"Assistant said:": "Assistent zei:",
|
||||
"Chat history": "Chatgeschiedenis",
|
||||
"Chat name": "Chatnaam",
|
||||
"Chat transcript": "Chattranscript",
|
||||
"Close": "Sluiten",
|
||||
"Copy assistant response": "Reactie van assistent kopiëren",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "Chat laden mislukt. Er is een fout opgetreden.",
|
||||
"Failed to render this message.": "Dit bericht kon niet worden weergegeven.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "Geen chats gevonden",
|
||||
"No conversations yet": "Nog geen gesprekken",
|
||||
"Open full page": "Volledige pagina openen",
|
||||
"Scroll to bottom": "Naar beneden scrollen",
|
||||
"You said:": "Jij zei:",
|
||||
"Previous 7 days": "Afgelopen 7 dagen",
|
||||
"Previous 30 days": "Afgelopen 30 dagen",
|
||||
"Search chats...": "Chats zoeken...",
|
||||
"Search chats": "Chats zoeken",
|
||||
"Ask anything... Use @ to mention pages": "Vraag iets... Gebruik @ om pagina's te vermelden",
|
||||
"Ask anything or search your workspace": "Vraag iets of doorzoek je werkruimte",
|
||||
"Welcome to {{name}}": "Welkom bij {{name}}",
|
||||
"Add files": "Bestanden toevoegen",
|
||||
"Mention a page": "Een pagina vermelden",
|
||||
"Start a new chat to see it here.": "Start een nieuwe chat om die hier te zien.",
|
||||
"Summarize this page": "Vat deze pagina samen",
|
||||
"Toggle AI Chat": "AI-chat in-/uitschakelen",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "Probeer een andere zoekterm.",
|
||||
"Try again": "Probeer opnieuw",
|
||||
"Untitled chat": "Chat zonder titel",
|
||||
"What can I help you with?": "Waar kan ik je mee helpen?",
|
||||
"Are you sure you want to revoke this {{credential}}": "Weet u zeker dat u deze {{credential}} wilt intrekken",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "Voorzie gebruikers en groepen automatisch vanuit uw identiteitsprovider via SCIM.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "Configureer uw identiteitsprovider met deze URL om gebruikers en groepen te provisioneren.",
|
||||
"Create {{credential}}": "{{credential}} maken",
|
||||
"{{credential}} created": "{{credential}} aangemaakt",
|
||||
"{{credential}} created successfully": "{{credential}} succesvol aangemaakt",
|
||||
"Created by": "Aangemaakt door",
|
||||
"Custom": "Aangepast",
|
||||
"Enable SCIM": "SCIM inschakelen",
|
||||
"Enter a descriptive name": "Voer een beschrijvende naam in",
|
||||
"I've saved my {{credential}}": "Ik heb mijn {{credential}} opgeslagen",
|
||||
"Important": "Belangrijk",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "Zorg ervoor dat u uw {{credential}} nu kopieert. U kunt deze niet meer bekijken!",
|
||||
"Never": "Nooit",
|
||||
"Revoke {{credential}}": "{{credential}} intrekken",
|
||||
"SCIM endpoint URL": "SCIM-eindpunt-URL",
|
||||
"SCIM provisioning": "SCIM-provisioning",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "SCIM heeft voorrang op SSO-groepssynchronisatie zolang het is ingeschakeld.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "U heeft het maximum van {{max}} SCIM-tokens bereikt. Verwijder een bestaand token om een nieuw token aan te maken.",
|
||||
"SCIM token": "SCIM-token",
|
||||
"SCIM tokens": "SCIM-tokens",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "Deze actie kan niet ongedaan worden gemaakt. Uw identiteitsprovider stopt onmiddellijk met synchroniseren.",
|
||||
"Toggle SCIM provisioning": "SCIM-provisioning in-/uitschakelen",
|
||||
"Token": "Token",
|
||||
"Page menu": "Paginamenu",
|
||||
"Expand": "Uitvouwen",
|
||||
"Collapse": "Samenvouwen",
|
||||
"Comment menu": "Reactiemenu",
|
||||
"Group menu": "Groepsmenu",
|
||||
"Show hidden breadcrumbs": "Verborgen broodkruimels weergeven",
|
||||
"Breadcrumbs": "Broodkruimels",
|
||||
"Page actions": "Pagina-acties",
|
||||
"Pick emoji": "Emoji kiezen",
|
||||
"Template menu": "Sjabloonmenu",
|
||||
"Use": "Gebruiken",
|
||||
"Use template": "Sjabloon gebruiken",
|
||||
"Preview template: {{title}}": "Voorbeeld van sjabloon: {{title}}",
|
||||
"Use a template": "Een sjabloon gebruiken",
|
||||
"Search templates...": "Sjablonen zoeken...",
|
||||
"Search spaces...": "Werkruimtes zoeken...",
|
||||
"No templates found": "Geen sjablonen gevonden",
|
||||
"No spaces found": "Geen werkruimtes gevonden",
|
||||
"Browse all templates": "Alle sjablonen bekijken",
|
||||
"This space": "Deze werkruimte",
|
||||
"All templates": "Alle sjablonen",
|
||||
"Global": "Globaal",
|
||||
"New template": "Nieuw sjabloon",
|
||||
"Edit template": "Sjabloon bewerken",
|
||||
"Are you sure you want to delete this template?": "Weet je zeker dat je dit sjabloon wilt verwijderen?",
|
||||
"Template scope updated": "Bereik van sjabloon bijgewerkt",
|
||||
"Choose which space this template belongs to": "Kies bij welke werkruimte dit sjabloon hoort",
|
||||
"Scope": "Bereik",
|
||||
"Select scope": "Bereik selecteren",
|
||||
"Title": "Titel",
|
||||
"Saving...": "Opslaan...",
|
||||
"Saved": "Opgeslagen",
|
||||
"Save failed. Retry": "Opslaan mislukt. Opnieuw proberen",
|
||||
"By {{name}}": "Door {{name}}",
|
||||
"Updated {{time}}": "Bijgewerkt {{time}}",
|
||||
"Choose destination": "Bestemming kiezen",
|
||||
"Search pages and spaces...": "Pagina's en werkruimtes zoeken...",
|
||||
"No results found": "Geen resultaten gevonden",
|
||||
"You don't have permission to create pages here": "Je hebt geen toestemming om hier pagina's te maken",
|
||||
"Chat menu": "Chatmenu",
|
||||
"API key menu": "API-sleutelmenu",
|
||||
"Jump to comment selection": "Naar reactieselectie springen",
|
||||
"Slash commands": "Slash-opdrachten",
|
||||
"Mention suggestions": "Vermeldingssuggesties",
|
||||
"Link suggestions": "Linksuggesties",
|
||||
"Diagram editor": "Diagrameditor",
|
||||
"Add comment": "Reactie toevoegen",
|
||||
"Find and replace": "Zoeken en vervangen",
|
||||
"Main navigation": "Hoofdnavigatie",
|
||||
"Space navigation": "Ruimtenavigatie",
|
||||
"Settings navigation": "Instellingennavigatie",
|
||||
"AI navigation": "AI-navigatie",
|
||||
"Breadcrumb": "Broodkruimel",
|
||||
"Synced block": "Gesynchroniseerd blok",
|
||||
"Create a block that stays in sync across pages.": "Maak een blok dat gesynchroniseerd blijft op meerdere pagina's.",
|
||||
"Editing original": "Origineel bewerken",
|
||||
"Copy synced block": "Gesynchroniseerd blok kopiëren",
|
||||
"Unsync": "Synchronisatie opheffen",
|
||||
"Delete synced block": "Gesynchroniseerd blok verwijderen",
|
||||
"Synced to {{count}} other page_one": "Gesynchroniseerd met {{count}} andere pagina",
|
||||
"Synced to {{count}} other page_other": "Gesynchroniseerd met {{count}} andere pagina's",
|
||||
"ORIGINAL": "ORIGINEEL",
|
||||
"THIS PAGE": "DEZE PAGINA",
|
||||
"No pages": "Geen pagina's",
|
||||
"The original synced block no longer exists": "Het oorspronkelijke gesynchroniseerde blok bestaat niet meer",
|
||||
"You don't have access to this synced block": "Je hebt geen toegang tot dit gesynchroniseerde blok",
|
||||
"Failed to load this synced block": "Dit gesynchroniseerde blok kon niet worden geladen",
|
||||
"Fixed editor toolbar": "Vaste editorwerkbalk",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Toon een opmaakwerkbalk boven de editor met snelle toegang tot veelgebruikte acties.",
|
||||
"Toggle fixed editor toolbar": "Vaste editorwerkbalk in-/uitschakelen",
|
||||
"Normal text": "Normale tekst",
|
||||
"More inline formatting": "Meer inline-opmaak",
|
||||
"Subscript": "Subscript",
|
||||
"Superscript": "Superscript",
|
||||
"Inline code": "Inline-code",
|
||||
"Insert media": "Media invoegen",
|
||||
"Mention": "Vermelding",
|
||||
"Emoji": "Emoji",
|
||||
"Columns": "Kolommen",
|
||||
"More inserts": "Meer invoegingen",
|
||||
"Embeds": "Insluitingen",
|
||||
"Diagrams": "Diagrammen",
|
||||
"Advanced": "Geavanceerd",
|
||||
"Utility": "Hulpprogramma's",
|
||||
"Decrease indent": "Inspringing verkleinen",
|
||||
"Increase indent": "Inspringing vergroten",
|
||||
"Clear formatting": "Opmaak wissen",
|
||||
"Code block": "Codeblok",
|
||||
"Experimental": "Experimenteel",
|
||||
"Strikethrough": "Doorhalen",
|
||||
"Undo": "Ongedaan maken",
|
||||
"Redo": "Opnieuw",
|
||||
"Backlinks": "Terugkoppelingen",
|
||||
"Last updated by": "Laatst bijgewerkt door",
|
||||
"Last updated": "Laatst bijgewerkt",
|
||||
"Stats": "Statistieken",
|
||||
"Word count": "Aantal woorden",
|
||||
"Characters": "Tekens",
|
||||
"Incoming links": "Inkomende links",
|
||||
"Outgoing links": "Uitgaande links",
|
||||
"Incoming links ({{count}})": "Inkomende links ({{count}})",
|
||||
"Outgoing links ({{count}})": "Uitgaande links ({{count}})",
|
||||
"No pages link here yet.": "Er linken nog geen pagina's hiernaartoe.",
|
||||
"This page doesn't link to other pages yet.": "Deze pagina linkt nog niet naar andere pagina's.",
|
||||
"Verified until {{date}}": "Geverifieerd tot {{date}}",
|
||||
"Labels": "Labels",
|
||||
"Add label": "Label toevoegen",
|
||||
"No labels yet": "Nog geen labels",
|
||||
"Already added": "Al toegevoegd",
|
||||
"Invalid label name": "Ongeldige labelnaam",
|
||||
"No matches": "Geen overeenkomsten",
|
||||
"Search or create…": "Zoeken of maken…",
|
||||
"Remove label {{name}}": "Label {{name}} verwijderen",
|
||||
"Failed to add label": "Label toevoegen mislukt",
|
||||
"Failed to remove label": "Label verwijderen mislukt",
|
||||
"No pages with this label": "Geen pagina's met dit label",
|
||||
"Pages tagged with this label will appear here.": "Pagina's met dit label worden hier weergegeven.",
|
||||
"No pages match your search.": "Geen pagina's komen overeen met je zoekopdracht.",
|
||||
"Updated {{date}}": "Bijgewerkt op {{date}}",
|
||||
"Cell actions": "Celacties",
|
||||
"Column actions": "Kolomacties",
|
||||
"Row actions": "Rijacties",
|
||||
"Filter": "Filter",
|
||||
"Page title": "Paginatitel",
|
||||
"Page content": "Pagina-inhoud",
|
||||
"Member actions": "Lidacties",
|
||||
"Toggle password visibility": "Wachtwoordzichtbaarheid in-/uitschakelen",
|
||||
"Send comment": "Reactie verzenden",
|
||||
"Token actions": "Tokenacties",
|
||||
"Template settings": "Sjablooninstellingen",
|
||||
"Edit diagram": "Diagram bewerken",
|
||||
"Edit embed": "Insluiting bewerken",
|
||||
"Edit drawing": "Tekening bewerken",
|
||||
"Delete equation": "Vergelijking verwijderen",
|
||||
"Invite actions": "Uitnodigingsacties",
|
||||
"Get started": "Aan de slag",
|
||||
"* indicates required fields": "* geeft verplichte velden aan",
|
||||
"List of spaces in this workspace": "Lijst met werkruimtes in deze workspace",
|
||||
"Active sessions": "Actieve sessies",
|
||||
"Add {{name}} to favorites": "{{name}} aan favorieten toevoegen",
|
||||
"Remove {{name}} from favorites": "{{name}} uit favorieten verwijderen",
|
||||
"Added to favorites": "Toegevoegd aan favorieten",
|
||||
"Removed from favorites": "Verwijderd uit favorieten",
|
||||
"Added {{name}} to favorites": "{{name}} toegevoegd aan favorieten",
|
||||
"Removed {{name}} from favorites": "{{name}} verwijderd uit favorieten",
|
||||
"Page menu for {{name}}": "Paginamenu voor {{name}}",
|
||||
"Create subpage of {{name}}": "Subpagina van {{name}} maken",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "Waar kan ik je mee helpen?"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Exportar",
|
||||
"Failed to create page": "Falha ao criar página",
|
||||
"Failed to delete page": "Falha ao excluir página",
|
||||
"Failed to restore page": "Falha ao restaurar página",
|
||||
"Failed to fetch recent pages": "Falha ao buscar páginas recentes",
|
||||
"Failed to import pages": "Falha ao importar páginas",
|
||||
"Failed to load page. An error occurred.": "Falha ao carregar página. Ocorreu um erro.",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "Alinhar à esquerda",
|
||||
"Align right": "Alinhar à direita",
|
||||
"Align center": "Alinhar ao centro",
|
||||
"Alt text": "Texto alternativo",
|
||||
"Describe this for accessibility.": "Descreva isto para acessibilidade.",
|
||||
"Add a description": "Adicionar uma descrição",
|
||||
"Justify": "Justificar",
|
||||
"Merge cells": "Mesclar células",
|
||||
"Split cell": "Dividir célula",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "Adicionar linha acima",
|
||||
"Add row below": "Adicionar linha abaixo",
|
||||
"Delete table": "Excluir tabela",
|
||||
"Add column left": "Adicionar coluna à esquerda",
|
||||
"Add column right": "Adicionar coluna à direita",
|
||||
"Clear cell": "Limpar célula",
|
||||
"Clear cells": "Limpar células",
|
||||
"Toggle header cell": "Alternar célula de cabeçalho",
|
||||
"Toggle header column": "Alternar coluna de cabeçalho",
|
||||
"Toggle header row": "Alternar linha de cabeçalho",
|
||||
"Move column left": "Mover coluna para a esquerda",
|
||||
"Move column right": "Mover coluna para a direita",
|
||||
"Move row down": "Mover linha para baixo",
|
||||
"Move row up": "Mover linha para cima",
|
||||
"Sort A → Z": "Ordenar A → Z",
|
||||
"Sort Z → A": "Ordenar Z → A",
|
||||
"Info": "Informação",
|
||||
"Note": "Observação",
|
||||
"Success": "Sucesso",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "Crie uma citação em bloco.",
|
||||
"Insert code snippet.": "Insira um trecho de código.",
|
||||
"Insert horizontal rule divider": "Insira um divisor horizontal",
|
||||
"Page break": "Quebra de página",
|
||||
"Insert a page break for printing.": "Insira uma quebra de página para impressão.",
|
||||
"Upload any image from your device.": "Envie qualquer imagem do seu dispositivo.",
|
||||
"Upload any video from your device.": "Envie qualquer vídeo do seu dispositivo.",
|
||||
"Upload any audio from your device.": "Envie qualquer áudio do seu dispositivo.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "Escreva...",
|
||||
"Column count": "Número de colunas",
|
||||
"{{count}} Columns": "{{count}} colunas",
|
||||
"{{count}} command available_one": "1 comando disponível",
|
||||
"{{count}} command available_other": "{{count}} comandos disponíveis",
|
||||
"{{count}} result available_one": "1 resultado disponível",
|
||||
"{{count}} result available_other": "{{count}} resultados disponíveis",
|
||||
"Equal columns": "Colunas iguais",
|
||||
"Left sidebar": "Barra lateral esquerda",
|
||||
"Right sidebar": "Barra lateral direita",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} está disponível",
|
||||
"Default page edit mode": "Modo padrão de edição da página",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "Escolha o modo de edição de página preferido. Evite edições acidentais.",
|
||||
"Choose {{format}} file": "Escolher arquivo {{format}}",
|
||||
"Reading": "Leitura",
|
||||
"Delete member": "Excluir membro",
|
||||
"Member deleted successfully": "Membro excluído com sucesso",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "Mover para a lixeira",
|
||||
"Move this page to trash?": "Mover esta página para a lixeira?",
|
||||
"Restore page": "Restaurar página",
|
||||
"Permanently delete": "Excluir permanentemente",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> moveu esta página para a Lixeira {{time}}.",
|
||||
"Page moved to trash": "Página movida para a lixeira",
|
||||
"Page restored successfully": "Página restaurada com sucesso",
|
||||
"Deleted by": "Excluído por",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "A imagem excede o limite de 10MB.",
|
||||
"Image removed successfully": "Imagem removida com sucesso",
|
||||
"API key": "Chave API",
|
||||
"API key created successfully": "Chave API criada com sucesso",
|
||||
"API keys": "Chaves API",
|
||||
"API management": "Gestão de API",
|
||||
"Are you sure you want to revoke this API key": "Tem certeza de que deseja revogar esta chave API",
|
||||
"Create API Key": "Criar Chave API",
|
||||
"Custom expiration date": "Data de expiração personalizada",
|
||||
"Enter a descriptive token name": "Insira um nome descritivo para o token",
|
||||
"Expiration": "Expiração",
|
||||
"Expired": "Expirado",
|
||||
"Expires": "Expira",
|
||||
"I've saved my API key": "Salvei minha chave API",
|
||||
"Last use": "Último uso",
|
||||
"No API keys found": "Nenhuma chave API encontrada",
|
||||
"No expiration": "Sem expiração",
|
||||
"Revoke API key": "Revogar chave API",
|
||||
"Revoked successfully": "Revogada com sucesso",
|
||||
"Select expiration date": "Selecionar data de expiração",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "Esta ação não pode ser desfeita. Qualquer aplicação usando esta chave API deixará de funcionar.",
|
||||
"Update": "Atualizar",
|
||||
"Update {{credential}}": "Atualizar {{credential}}",
|
||||
"Update API key": "Atualizar chave API",
|
||||
"Manage API keys for all users in the workspace": "Gerenciar chaves API para todos os usuários no espaço de trabalho",
|
||||
"Restrict API key creation to admins": "Restringir a criação de chave de API aos administradores",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "Somente administradores e proprietários podem criar novas chaves de API. As chaves de membros já existentes continuarão funcionando.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "Chat com IA",
|
||||
"Analyze for insights": "Analisar para obter insights",
|
||||
"Ask anything...": "Pergunte qualquer coisa...",
|
||||
"Assistant said:": "O assistente disse:",
|
||||
"Chat history": "Histórico de chats",
|
||||
"Chat name": "Nome do chat",
|
||||
"Chat transcript": "Transcrição do chat",
|
||||
"Close": "Fechar",
|
||||
"Copy assistant response": "Copiar resposta do assistente",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "Falha ao carregar o chat. Ocorreu um erro.",
|
||||
"Failed to render this message.": "Falha ao renderizar esta mensagem.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "Nenhum chat encontrado",
|
||||
"No conversations yet": "Ainda não há conversas",
|
||||
"Open full page": "Abrir página inteira",
|
||||
"Scroll to bottom": "Rolar até o fim",
|
||||
"You said:": "Você disse:",
|
||||
"Previous 7 days": "Últimos 7 dias",
|
||||
"Previous 30 days": "Últimos 30 dias",
|
||||
"Search chats...": "Pesquisar chats...",
|
||||
"Search chats": "Pesquisar chats",
|
||||
"Ask anything... Use @ to mention pages": "Pergunte qualquer coisa... Use @ para mencionar páginas",
|
||||
"Ask anything or search your workspace": "Pergunte qualquer coisa ou pesquise no seu workspace",
|
||||
"Welcome to {{name}}": "Boas-vindas a {{name}}",
|
||||
"Add files": "Adicionar arquivos",
|
||||
"Mention a page": "Mencionar uma página",
|
||||
"Start a new chat to see it here.": "Inicie um novo chat para vê-lo aqui.",
|
||||
"Summarize this page": "Resumir esta página",
|
||||
"Toggle AI Chat": "Alternar chat com IA",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "Tente um termo de pesquisa diferente.",
|
||||
"Try again": "Tentar novamente",
|
||||
"Untitled chat": "Chat sem título",
|
||||
"What can I help you with?": "Com o que posso ajudar você?",
|
||||
"Are you sure you want to revoke this {{credential}}": "Tem certeza de que deseja revogar esta {{credential}}",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "Provisione automaticamente usuários e grupos do seu provedor de identidade via SCIM.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "Configure seu provedor de identidade com esta URL para provisionar usuários e grupos.",
|
||||
"Create {{credential}}": "Criar {{credential}}",
|
||||
"{{credential}} created": "{{credential}} criada",
|
||||
"{{credential}} created successfully": "{{credential}} criada com sucesso",
|
||||
"Created by": "Criado por",
|
||||
"Custom": "Personalizado",
|
||||
"Enable SCIM": "Ativar SCIM",
|
||||
"Enter a descriptive name": "Insira um nome descritivo",
|
||||
"I've saved my {{credential}}": "Salvei minha {{credential}}",
|
||||
"Important": "Importante",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "Copie sua {{credential}} agora. Você não poderá vê-la novamente!",
|
||||
"Never": "Nunca",
|
||||
"Revoke {{credential}}": "Revogar {{credential}}",
|
||||
"SCIM endpoint URL": "URL do endpoint SCIM",
|
||||
"SCIM provisioning": "Provisionamento SCIM",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "O SCIM tem precedência sobre a sincronização de grupos por SSO enquanto estiver ativado.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "Você atingiu o máximo de {{max}} tokens SCIM. Exclua um token existente para criar um novo.",
|
||||
"SCIM token": "Token SCIM",
|
||||
"SCIM tokens": "Tokens SCIM",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "Esta ação não pode ser desfeita. Seu provedor de identidade deixará de sincronizar imediatamente.",
|
||||
"Toggle SCIM provisioning": "Alternar provisionamento SCIM",
|
||||
"Token": "Token",
|
||||
"Page menu": "Menu da página",
|
||||
"Expand": "Expandir",
|
||||
"Collapse": "Recolher",
|
||||
"Comment menu": "Menu de comentários",
|
||||
"Group menu": "Menu do grupo",
|
||||
"Show hidden breadcrumbs": "Mostrar breadcrumbs ocultos",
|
||||
"Breadcrumbs": "Trilhas de navegação",
|
||||
"Page actions": "Ações da página",
|
||||
"Pick emoji": "Escolher emoji",
|
||||
"Template menu": "Menu do modelo",
|
||||
"Use": "Usar",
|
||||
"Use template": "Usar modelo",
|
||||
"Preview template: {{title}}": "Visualizar modelo: {{title}}",
|
||||
"Use a template": "Usar um modelo",
|
||||
"Search templates...": "Pesquisar modelos...",
|
||||
"Search spaces...": "Pesquisar espaços...",
|
||||
"No templates found": "Nenhum modelo encontrado",
|
||||
"No spaces found": "Nenhum espaço encontrado",
|
||||
"Browse all templates": "Ver todos os modelos",
|
||||
"This space": "Este espaço",
|
||||
"All templates": "Todos os modelos",
|
||||
"Global": "Global",
|
||||
"New template": "Novo modelo",
|
||||
"Edit template": "Editar modelo",
|
||||
"Are you sure you want to delete this template?": "Tem certeza de que deseja excluir este modelo?",
|
||||
"Template scope updated": "Escopo do modelo atualizado",
|
||||
"Choose which space this template belongs to": "Escolha a qual espaço este modelo pertence",
|
||||
"Scope": "Escopo",
|
||||
"Select scope": "Selecionar escopo",
|
||||
"Title": "Título",
|
||||
"Saving...": "Salvando...",
|
||||
"Saved": "Salvo",
|
||||
"Save failed. Retry": "Falha ao salvar. Tentar novamente",
|
||||
"By {{name}}": "Por {{name}}",
|
||||
"Updated {{time}}": "Atualizado {{time}}",
|
||||
"Choose destination": "Escolher destino",
|
||||
"Search pages and spaces...": "Pesquisar páginas e espaços...",
|
||||
"No results found": "Nenhum resultado encontrado",
|
||||
"You don't have permission to create pages here": "Você não tem permissão para criar páginas aqui",
|
||||
"Chat menu": "Menu do chat",
|
||||
"API key menu": "Menu da chave de API",
|
||||
"Jump to comment selection": "Ir para a seleção de comentários",
|
||||
"Slash commands": "Comandos de barra",
|
||||
"Mention suggestions": "Sugestões de menção",
|
||||
"Link suggestions": "Sugestões de links",
|
||||
"Diagram editor": "Editor de diagramas",
|
||||
"Add comment": "Adicionar comentário",
|
||||
"Find and replace": "Localizar e substituir",
|
||||
"Main navigation": "Navegação principal",
|
||||
"Space navigation": "Navegação do espaço",
|
||||
"Settings navigation": "Navegação de configurações",
|
||||
"AI navigation": "Navegação de IA",
|
||||
"Breadcrumb": "Trilha de navegação",
|
||||
"Synced block": "Bloco sincronizado",
|
||||
"Create a block that stays in sync across pages.": "Crie um bloco que permaneça sincronizado entre páginas.",
|
||||
"Editing original": "Editando original",
|
||||
"Copy synced block": "Copiar bloco sincronizado",
|
||||
"Unsync": "Desfazer sincronização",
|
||||
"Delete synced block": "Excluir bloco sincronizado",
|
||||
"Synced to {{count}} other page_one": "Sincronizado com {{count}} outra página",
|
||||
"Synced to {{count}} other page_other": "Sincronizado com {{count}} outras páginas",
|
||||
"ORIGINAL": "ORIGINAL",
|
||||
"THIS PAGE": "ESTA PÁGINA",
|
||||
"No pages": "Nenhuma página",
|
||||
"The original synced block no longer exists": "O bloco sincronizado original não existe mais",
|
||||
"You don't have access to this synced block": "Você não tem acesso a este bloco sincronizado",
|
||||
"Failed to load this synced block": "Falha ao carregar este bloco sincronizado",
|
||||
"Fixed editor toolbar": "Barra de ferramentas fixa do editor",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Mostre uma barra de ferramentas de formatação acima do editor com acesso rápido a ações comuns.",
|
||||
"Toggle fixed editor toolbar": "Alternar barra de ferramentas fixa do editor",
|
||||
"Normal text": "Texto normal",
|
||||
"More inline formatting": "Mais formatação em linha",
|
||||
"Subscript": "Subscrito",
|
||||
"Superscript": "Sobrescrito",
|
||||
"Inline code": "Código em linha",
|
||||
"Insert media": "Inserir mídia",
|
||||
"Mention": "Menção",
|
||||
"Emoji": "Emoji",
|
||||
"Columns": "Colunas",
|
||||
"More inserts": "Mais inserções",
|
||||
"Embeds": "Incorporações",
|
||||
"Diagrams": "Diagramas",
|
||||
"Advanced": "Avançado",
|
||||
"Utility": "Utilitário",
|
||||
"Decrease indent": "Diminuir recuo",
|
||||
"Increase indent": "Aumentar recuo",
|
||||
"Clear formatting": "Limpar formatação",
|
||||
"Code block": "Bloco de código",
|
||||
"Experimental": "Experimental",
|
||||
"Strikethrough": "Tachado",
|
||||
"Undo": "Desfazer",
|
||||
"Redo": "Refazer",
|
||||
"Backlinks": "Links de retorno",
|
||||
"Last updated by": "Última atualização por",
|
||||
"Last updated": "Última atualização",
|
||||
"Stats": "Estatísticas",
|
||||
"Word count": "Contagem de palavras",
|
||||
"Characters": "Caracteres",
|
||||
"Incoming links": "Links recebidos",
|
||||
"Outgoing links": "Links de saída",
|
||||
"Incoming links ({{count}})": "Links recebidos ({{count}})",
|
||||
"Outgoing links ({{count}})": "Links de saída ({{count}})",
|
||||
"No pages link here yet.": "Nenhuma página tem link para cá ainda.",
|
||||
"This page doesn't link to other pages yet.": "Esta página ainda não tem links para outras páginas.",
|
||||
"Verified until {{date}}": "Verificado até {{date}}",
|
||||
"Labels": "Rótulos",
|
||||
"Add label": "Adicionar rótulo",
|
||||
"No labels yet": "Ainda não há rótulos",
|
||||
"Already added": "Já adicionado",
|
||||
"Invalid label name": "Nome de rótulo inválido",
|
||||
"No matches": "Sem correspondências",
|
||||
"Search or create…": "Pesquisar ou criar…",
|
||||
"Remove label {{name}}": "Remover rótulo {{name}}",
|
||||
"Failed to add label": "Falha ao adicionar rótulo",
|
||||
"Failed to remove label": "Falha ao remover rótulo",
|
||||
"No pages with this label": "Nenhuma página com este rótulo",
|
||||
"Pages tagged with this label will appear here.": "As páginas marcadas com este rótulo aparecerão aqui.",
|
||||
"No pages match your search.": "Nenhuma página corresponde à sua pesquisa.",
|
||||
"Updated {{date}}": "Atualizado em {{date}}",
|
||||
"Cell actions": "Ações da célula",
|
||||
"Column actions": "Ações da coluna",
|
||||
"Row actions": "Ações da linha",
|
||||
"Filter": "Filtrar",
|
||||
"Page title": "Título da página",
|
||||
"Page content": "Conteúdo da página",
|
||||
"Member actions": "Ações do membro",
|
||||
"Toggle password visibility": "Alternar visibilidade da senha",
|
||||
"Send comment": "Enviar comentário",
|
||||
"Token actions": "Ações do token",
|
||||
"Template settings": "Configurações do modelo",
|
||||
"Edit diagram": "Editar diagrama",
|
||||
"Edit embed": "Editar incorporação",
|
||||
"Edit drawing": "Editar desenho",
|
||||
"Delete equation": "Excluir equação",
|
||||
"Invite actions": "Ações do convite",
|
||||
"Get started": "Começar",
|
||||
"* indicates required fields": "* indica campos obrigatórios",
|
||||
"List of spaces in this workspace": "Lista de espaços neste workspace",
|
||||
"Active sessions": "Sessões ativas",
|
||||
"Add {{name}} to favorites": "Adicionar {{name}} aos favoritos",
|
||||
"Remove {{name}} from favorites": "Remover {{name}} dos favoritos",
|
||||
"Added to favorites": "Adicionado aos favoritos",
|
||||
"Removed from favorites": "Removido dos favoritos",
|
||||
"Added {{name}} to favorites": "{{name}} adicionado aos favoritos",
|
||||
"Removed {{name}} from favorites": "{{name}} removido dos favoritos",
|
||||
"Page menu for {{name}}": "Menu da página de {{name}}",
|
||||
"Create subpage of {{name}}": "Criar subpágina de {{name}}",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "Com o que posso ajudar você?"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Экспорт",
|
||||
"Failed to create page": "Не удалось создать страницу",
|
||||
"Failed to delete page": "Не удалось удалить страницу",
|
||||
"Failed to restore page": "Не удалось восстановить страницу",
|
||||
"Failed to fetch recent pages": "Не удалось получить недавние страницы",
|
||||
"Failed to import pages": "Не удалось импортировать страницы",
|
||||
"Failed to load page. An error occurred.": "Не удалось загрузить страницу. Произошла ошибка.",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "По левому краю",
|
||||
"Align right": "По правому краю",
|
||||
"Align center": "По центру",
|
||||
"Alt text": "Альтернативный текст",
|
||||
"Describe this for accessibility.": "Опишите это для специальных возможностей.",
|
||||
"Add a description": "Добавить описание",
|
||||
"Justify": "По ширине",
|
||||
"Merge cells": "Объединить ячейки",
|
||||
"Split cell": "Разделить ячейку",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "Добавить строку выше",
|
||||
"Add row below": "Добавить строку ниже",
|
||||
"Delete table": "Удалить таблицу",
|
||||
"Add column left": "Добавить столбец слева",
|
||||
"Add column right": "Добавить столбец справа",
|
||||
"Clear cell": "Очистить ячейку",
|
||||
"Clear cells": "Очистить ячейки",
|
||||
"Toggle header cell": "Переключить ячейку заголовка",
|
||||
"Toggle header column": "Переключить столбец заголовка",
|
||||
"Toggle header row": "Переключить строку заголовка",
|
||||
"Move column left": "Переместить столбец влево",
|
||||
"Move column right": "Переместить столбец вправо",
|
||||
"Move row down": "Переместить строку вниз",
|
||||
"Move row up": "Переместить строку вверх",
|
||||
"Sort A → Z": "Сортировать A → Я",
|
||||
"Sort Z → A": "Сортировать Я → A",
|
||||
"Info": "Информация",
|
||||
"Note": "Примечание",
|
||||
"Success": "Успешно",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "Создать блок цитирования.",
|
||||
"Insert code snippet.": "Вставить фрагмент кода.",
|
||||
"Insert horizontal rule divider": "Вставить горизонтальный разделитель",
|
||||
"Page break": "Разрыв страницы",
|
||||
"Insert a page break for printing.": "Вставить разрыв страницы для печати.",
|
||||
"Upload any image from your device.": "Загрузить любое изображение с вашего устройства.",
|
||||
"Upload any video from your device.": "Загрузить любое видео с вашего устройства.",
|
||||
"Upload any audio from your device.": "Загрузите любой аудиофайл с вашего устройства.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "Напишите...",
|
||||
"Column count": "Количество столбцов",
|
||||
"{{count}} Columns": "{count, plural, one{# столбец} few{# столбца} many{# столбцов} other{# столбца}}",
|
||||
"{{count}} command available_one": "Доступна 1 команда",
|
||||
"{{count}} command available_other": "Доступно {{count}} команд",
|
||||
"{{count}} result available_one": "Доступен 1 результат",
|
||||
"{{count}} result available_other": "Доступно {{count}} результатов",
|
||||
"Equal columns": "Равные столбцы",
|
||||
"Left sidebar": "Левая боковая панель",
|
||||
"Right sidebar": "Правая боковая панель",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "Доступна версия {{latestVersion}}",
|
||||
"Default page edit mode": "Режим редактирования страницы по умолчанию",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "Выберите предпочитаемый режим редактирования страницы. Избегайте случайных изменений.",
|
||||
"Choose {{format}} file": "Выберите файл {{format}}",
|
||||
"Reading": "Чтение",
|
||||
"Delete member": "Удалить участника",
|
||||
"Member deleted successfully": "Участник успешно удалён",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "Переместить в корзину",
|
||||
"Move this page to trash?": "Переместить эту страницу в корзину?",
|
||||
"Restore page": "Восстановить страницу",
|
||||
"Permanently delete": "Удалить навсегда",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> переместил(а) эту страницу в корзину {{time}}.",
|
||||
"Page moved to trash": "Страница перемещена в корзину",
|
||||
"Page restored successfully": "Страница успешно восстановлена",
|
||||
"Deleted by": "Удалено пользователем",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "Изображение превышает предел 10MB.",
|
||||
"Image removed successfully": "Изображение успешно удалено",
|
||||
"API key": "API ключ",
|
||||
"API key created successfully": "API ключ успешно создан",
|
||||
"API keys": "API ключи",
|
||||
"API management": "Управление API",
|
||||
"Are you sure you want to revoke this API key": "Вы уверены, что хотите отозвать этот API ключ",
|
||||
"Create API Key": "Создать API ключ",
|
||||
"Custom expiration date": "Пользовательская дата срока действия",
|
||||
"Enter a descriptive token name": "Введите понятное имя токена",
|
||||
"Expiration": "Срок действия",
|
||||
"Expired": "Истек",
|
||||
"Expires": "Истекает",
|
||||
"I've saved my API key": "Я сохранил мой API ключ",
|
||||
"Last use": "Последнее использование",
|
||||
"No API keys found": "API ключи не найдены",
|
||||
"No expiration": "Не истекает",
|
||||
"Revoke API key": "Отозвать API ключ",
|
||||
"Revoked successfully": "Отозван успешно",
|
||||
"Select expiration date": "Выберете срок действия",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "Это действие необратимо. Любые приложения, использующие этот API ключ, перестанут работать.",
|
||||
"Update": "Обновить",
|
||||
"Update {{credential}}": "Обновить {{credential}}",
|
||||
"Update API key": "Обновить API ключ",
|
||||
"Manage API keys for all users in the workspace": "Управлять API ключами для всех пользователей в рабочей области",
|
||||
"Restrict API key creation to admins": "Ограничить создание API-ключей только администраторами.",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "Только администраторы и владельцы могут создавать новые API-ключи. Существующие ключи участников продолжат работать.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "Чат с ИИ",
|
||||
"Analyze for insights": "Проанализировать и получить выводы",
|
||||
"Ask anything...": "Спросите что угодно...",
|
||||
"Assistant said:": "Ассистент ответил:",
|
||||
"Chat history": "История чатов",
|
||||
"Chat name": "Название чата",
|
||||
"Chat transcript": "Расшифровка чата",
|
||||
"Close": "Закрыть",
|
||||
"Copy assistant response": "Скопировать ответ ассистента",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "Не удалось загрузить чат. Произошла ошибка.",
|
||||
"Failed to render this message.": "Не удалось отобразить это сообщение.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "Чаты не найдены",
|
||||
"No conversations yet": "Пока нет разговоров",
|
||||
"Open full page": "Открыть полную страницу",
|
||||
"Scroll to bottom": "Прокрутить вниз",
|
||||
"You said:": "Вы сказали:",
|
||||
"Previous 7 days": "Предыдущие 7 дней",
|
||||
"Previous 30 days": "Предыдущие 30 дней",
|
||||
"Search chats...": "Поиск чатов...",
|
||||
"Search chats": "Поиск чатов",
|
||||
"Ask anything... Use @ to mention pages": "Спросите что угодно... Используйте @, чтобы упомянуть страницы",
|
||||
"Ask anything or search your workspace": "Спросите что угодно или выполните поиск по рабочему пространству",
|
||||
"Welcome to {{name}}": "Добро пожаловать в {{name}}",
|
||||
"Add files": "Добавить файлы",
|
||||
"Mention a page": "Упомянуть страницу",
|
||||
"Start a new chat to see it here.": "Начните новый чат, чтобы увидеть его здесь.",
|
||||
"Summarize this page": "Суммировать эту страницу",
|
||||
"Toggle AI Chat": "Переключить чат с ИИ",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "Попробуйте другой поисковый запрос.",
|
||||
"Try again": "Попробовать снова",
|
||||
"Untitled chat": "Чат без названия",
|
||||
"What can I help you with?": "Чем я могу вам помочь?",
|
||||
"Are you sure you want to revoke this {{credential}}": "Вы уверены, что хотите отозвать этот {{credential}}",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "Автоматически предоставляйте доступ пользователям и группам из вашего провайдера удостоверений через SCIM.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "Настройте ваш провайдер удостоверений с этим URL для предоставления доступа пользователям и группам.",
|
||||
"Create {{credential}}": "Создать {{credential}}",
|
||||
"{{credential}} created": "{{credential}} создан",
|
||||
"{{credential}} created successfully": "{{credential}} успешно создан",
|
||||
"Created by": "Создан",
|
||||
"Custom": "Пользовательский",
|
||||
"Enable SCIM": "Включить SCIM",
|
||||
"Enter a descriptive name": "Введите понятное имя",
|
||||
"I've saved my {{credential}}": "Я сохранил свой {{credential}}",
|
||||
"Important": "Важно",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "Обязательно скопируйте ваш {{credential}} сейчас. Позже вы не сможете увидеть его снова!",
|
||||
"Never": "Никогда",
|
||||
"Revoke {{credential}}": "Отозвать {{credential}}",
|
||||
"SCIM endpoint URL": "URL конечной точки SCIM",
|
||||
"SCIM provisioning": "SCIM-подготовка учетных записей",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "Пока SCIM включен, он имеет приоритет над синхронизацией групп через SSO.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "Вы достигли максимального количества токенов SCIM: {{max}}. Удалите существующий токен, чтобы создать новый.",
|
||||
"SCIM token": "Токен SCIM",
|
||||
"SCIM tokens": "Токены SCIM",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "Это действие нельзя отменить. Ваш провайдер удостоверений немедленно прекратит синхронизацию.",
|
||||
"Toggle SCIM provisioning": "Переключить подготовку учетных записей SCIM",
|
||||
"Token": "Токен",
|
||||
"Page menu": "Меню страницы",
|
||||
"Expand": "Развернуть",
|
||||
"Collapse": "Свернуть",
|
||||
"Comment menu": "Меню комментария",
|
||||
"Group menu": "Меню группы",
|
||||
"Show hidden breadcrumbs": "Показать скрытые хлебные крошки",
|
||||
"Breadcrumbs": "Хлебные крошки",
|
||||
"Page actions": "Действия со страницей",
|
||||
"Pick emoji": "Выбрать эмодзи",
|
||||
"Template menu": "Меню шаблона",
|
||||
"Use": "Использовать",
|
||||
"Use template": "Использовать шаблон",
|
||||
"Preview template: {{title}}": "Предпросмотр шаблона: {{title}}",
|
||||
"Use a template": "Использовать шаблон",
|
||||
"Search templates...": "Поиск шаблонов...",
|
||||
"Search spaces...": "Поиск пространств...",
|
||||
"No templates found": "Шаблоны не найдены",
|
||||
"No spaces found": "Пространства не найдены",
|
||||
"Browse all templates": "Просмотреть все шаблоны",
|
||||
"This space": "Это пространство",
|
||||
"All templates": "Все шаблоны",
|
||||
"Global": "Глобально",
|
||||
"New template": "Новый шаблон",
|
||||
"Edit template": "Редактировать шаблон",
|
||||
"Are you sure you want to delete this template?": "Вы уверены, что хотите удалить этот шаблон?",
|
||||
"Template scope updated": "Область действия шаблона обновлена",
|
||||
"Choose which space this template belongs to": "Выберите, к какому пространству относится этот шаблон",
|
||||
"Scope": "Область действия",
|
||||
"Select scope": "Выберите область действия",
|
||||
"Title": "Заголовок",
|
||||
"Saving...": "Сохранение...",
|
||||
"Saved": "Сохранено",
|
||||
"Save failed. Retry": "Не удалось сохранить. Повторите попытку",
|
||||
"By {{name}}": "От {{name}}",
|
||||
"Updated {{time}}": "Обновлено {{time}}",
|
||||
"Choose destination": "Выберите место назначения",
|
||||
"Search pages and spaces...": "Поиск страниц и пространств...",
|
||||
"No results found": "Результаты не найдены",
|
||||
"You don't have permission to create pages here": "У вас нет прав на создание страниц здесь",
|
||||
"Chat menu": "Меню чата",
|
||||
"API key menu": "Меню API-ключа",
|
||||
"Jump to comment selection": "Перейти к выбору комментария",
|
||||
"Slash commands": "Команды со слешем",
|
||||
"Mention suggestions": "Подсказки упоминаний",
|
||||
"Link suggestions": "Подсказки ссылок",
|
||||
"Diagram editor": "Редактор диаграмм",
|
||||
"Add comment": "Добавить комментарий",
|
||||
"Find and replace": "Найти и заменить",
|
||||
"Main navigation": "Основная навигация",
|
||||
"Space navigation": "Навигация по пространству",
|
||||
"Settings navigation": "Навигация по настройкам",
|
||||
"AI navigation": "Навигация ИИ",
|
||||
"Breadcrumb": "Хлебная крошка",
|
||||
"Synced block": "Синхронизированный блок",
|
||||
"Create a block that stays in sync across pages.": "Создайте блок, который будет синхронизироваться между страницами.",
|
||||
"Editing original": "Редактирование оригинала",
|
||||
"Copy synced block": "Скопировать синхронизированный блок",
|
||||
"Unsync": "Не синхронизировать",
|
||||
"Delete synced block": "Удалить синхронизированный блок",
|
||||
"Synced to {{count}} other page_one": "Синхронизировано с {{count}} с другой страницей",
|
||||
"Synced to {{count}} other page_other": "Синхронизировано с {{count}} с другими страницами",
|
||||
"ORIGINAL": "ОРИГИНАЛ",
|
||||
"THIS PAGE": "ЭТА СТРАНИЦА",
|
||||
"No pages": "Нет страниц",
|
||||
"The original synced block no longer exists": "Исходный синхронизированный блок больше не существует",
|
||||
"You don't have access to this synced block": "У вас нет доступа к этому синхронизированному блоку",
|
||||
"Failed to load this synced block": "Не удалось загрузить этот синхронизированный блок",
|
||||
"Fixed editor toolbar": "Закреплённая панель инструментов редактора",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Показывать панель форматирования над редактором для быстрого доступа к часто используемым действиям.",
|
||||
"Toggle fixed editor toolbar": "Переключить закреплённую панель инструментов редактора",
|
||||
"Normal text": "Обычный текст",
|
||||
"More inline formatting": "Больше вариантов встроенного форматирования",
|
||||
"Subscript": "Подстрочный",
|
||||
"Superscript": "Надстрочный",
|
||||
"Inline code": "Встроенный код",
|
||||
"Insert media": "Вставить медиа",
|
||||
"Mention": "Упоминание",
|
||||
"Emoji": "Эмодзи",
|
||||
"Columns": "Столбцы",
|
||||
"More inserts": "Больше вариантов вставки",
|
||||
"Embeds": "Встраивания",
|
||||
"Diagrams": "Диаграммы",
|
||||
"Advanced": "Дополнительно",
|
||||
"Utility": "Служебное",
|
||||
"Decrease indent": "Уменьшить отступ",
|
||||
"Increase indent": "Увеличить отступ",
|
||||
"Clear formatting": "Очистить форматирование",
|
||||
"Code block": "Блок кода",
|
||||
"Experimental": "Экспериментальное",
|
||||
"Strikethrough": "Зачеркивание",
|
||||
"Undo": "Отменить",
|
||||
"Redo": "Повторить",
|
||||
"Backlinks": "Обратные ссылки",
|
||||
"Last updated by": "Последний изменивший",
|
||||
"Last updated": "Последнее обновление",
|
||||
"Stats": "Статистика",
|
||||
"Word count": "Количество слов",
|
||||
"Characters": "Символы",
|
||||
"Incoming links": "Входящие ссылки",
|
||||
"Outgoing links": "Исходящие ссылки",
|
||||
"Incoming links ({{count}})": "Входящие ссылки ({{count}})",
|
||||
"Outgoing links ({{count}})": "Исходящие ссылки ({{count}})",
|
||||
"No pages link here yet.": "На эту страницу пока что нет ссылок.",
|
||||
"This page doesn't link to other pages yet.": "Эта страница пока не содержит ссылок на другие страницы.",
|
||||
"Verified until {{date}}": "Подтверждено до: {{date}}",
|
||||
"Labels": "Метки",
|
||||
"Add label": "Добавить метку",
|
||||
"No labels yet": "Меток пока нет",
|
||||
"Already added": "Уже добавлено",
|
||||
"Invalid label name": "Недопустимое имя метки",
|
||||
"No matches": "Совпадений нет",
|
||||
"Search or create…": "Найти или создать…",
|
||||
"Remove label {{name}}": "Удалить метку {{name}}",
|
||||
"Failed to add label": "Не удалось добавить метку",
|
||||
"Failed to remove label": "Не удалось удалить метку",
|
||||
"No pages with this label": "Нет страниц с этой меткой",
|
||||
"Pages tagged with this label will appear here.": "Здесь будут отображаться страницы с этой меткой.",
|
||||
"No pages match your search.": "Нет страниц, соответствующих вашему запросу.",
|
||||
"Updated {{date}}": "Обновлено {{date}}",
|
||||
"Cell actions": "Действия с ячейкой",
|
||||
"Column actions": "Действия со столбцом",
|
||||
"Row actions": "Действия со строкой",
|
||||
"Filter": "Фильтр",
|
||||
"Page title": "Заголовок страницы",
|
||||
"Page content": "Содержимое страницы",
|
||||
"Member actions": "Действия с участником",
|
||||
"Toggle password visibility": "Переключить видимость пароля",
|
||||
"Send comment": "Отправить комментарий",
|
||||
"Token actions": "Действия с токеном",
|
||||
"Template settings": "Настройки шаблона",
|
||||
"Edit diagram": "Редактировать диаграмму",
|
||||
"Edit embed": "Редактировать встраивание",
|
||||
"Edit drawing": "Редактировать рисунок",
|
||||
"Delete equation": "Удалить уравнение",
|
||||
"Invite actions": "Действия с приглашением",
|
||||
"Get started": "Начать",
|
||||
"* indicates required fields": "* обозначает обязательные поля",
|
||||
"List of spaces in this workspace": "Список пространств в этом рабочем пространстве",
|
||||
"Active sessions": "Активные сеансы",
|
||||
"Add {{name}} to favorites": "Добавить {{name}} в избранное",
|
||||
"Remove {{name}} from favorites": "Удалить {{name}} из избранного",
|
||||
"Added to favorites": "Добавлено в избранное",
|
||||
"Removed from favorites": "Удалено из избранного",
|
||||
"Added {{name}} to favorites": "{{name}} добавлено в избранное",
|
||||
"Removed {{name}} from favorites": "{{name}} удалено из избранного",
|
||||
"Page menu for {{name}}": "Меню страницы для {{name}}",
|
||||
"Create subpage of {{name}}": "Создать подстраницу для {{name}}",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "Чем я могу вам помочь?"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "Експорт",
|
||||
"Failed to create page": "Не вдалося створити сторінку",
|
||||
"Failed to delete page": "Не вдалося видалити сторінку",
|
||||
"Failed to restore page": "Не вдалося відновити сторінку",
|
||||
"Failed to fetch recent pages": "Не вдалося отримати нещодавні сторінки",
|
||||
"Failed to import pages": "Не вдалося імпортувати сторінки",
|
||||
"Failed to load page. An error occurred.": "Не вдалося завантажити сторінку. Сталася помилка.",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "По лівому краю",
|
||||
"Align right": "По правому краю",
|
||||
"Align center": "По центру",
|
||||
"Alt text": "Альтернативний текст",
|
||||
"Describe this for accessibility.": "Опишіть це для доступності.",
|
||||
"Add a description": "Додати опис",
|
||||
"Justify": "По ширині",
|
||||
"Merge cells": "Об'єднати комірки",
|
||||
"Split cell": "Розділити комірку",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "Додати рядок вище",
|
||||
"Add row below": "Додати рядок нижче",
|
||||
"Delete table": "Видалити таблицю",
|
||||
"Add column left": "Додати стовпець ліворуч",
|
||||
"Add column right": "Додати стовпець праворуч",
|
||||
"Clear cell": "Очистити комірку",
|
||||
"Clear cells": "Очистити комірки",
|
||||
"Toggle header cell": "Перемкнути комірку заголовка",
|
||||
"Toggle header column": "Перемкнути стовпець заголовка",
|
||||
"Toggle header row": "Перемкнути рядок заголовка",
|
||||
"Move column left": "Перемістити стовпець ліворуч",
|
||||
"Move column right": "Перемістити стовпець праворуч",
|
||||
"Move row down": "Перемістити рядок вниз",
|
||||
"Move row up": "Перемістити рядок вгору",
|
||||
"Sort A → Z": "Сортувати A → Z",
|
||||
"Sort Z → A": "Сортувати Z → A",
|
||||
"Info": "Інформація",
|
||||
"Note": "Примітка",
|
||||
"Success": "Успішно",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "Створити блок цитування.",
|
||||
"Insert code snippet.": "Вставити фрагмент коду.",
|
||||
"Insert horizontal rule divider": "Вставити горизонтальний роздільник",
|
||||
"Page break": "Розрив сторінки",
|
||||
"Insert a page break for printing.": "Вставте розрив сторінки для друку.",
|
||||
"Upload any image from your device.": "Завантажити будь-яке зображення з вашого пристрою.",
|
||||
"Upload any video from your device.": "Завантажити будь-яке відео з вашого пристрою.",
|
||||
"Upload any audio from your device.": "Завантажте будь-який аудіофайл зі свого пристрою.",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "Напишіть...",
|
||||
"Column count": "Кількість колонок",
|
||||
"{{count}} Columns": "{count, plural, one{# колонка} few{# колонки} many{# колонок} other{# колонки}}",
|
||||
"{{count}} command available_one": "Доступна 1 команда",
|
||||
"{{count}} command available_other": "Доступно {{count}} команд",
|
||||
"{{count}} result available_one": "Доступний 1 результат",
|
||||
"{{count}} result available_other": "Доступно {{count}} результатів",
|
||||
"Equal columns": "Рівні колонки",
|
||||
"Left sidebar": "Ліва бічна панель",
|
||||
"Right sidebar": "Права бічна панель",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "Доступна версія {{latestVersion}}",
|
||||
"Default page edit mode": "Режим редагування сторінки за замовчуванням",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "Виберіть бажаний режим редагування сторінки. Уникайте випадкових редагувань.",
|
||||
"Choose {{format}} file": "Виберіть файл {{format}}",
|
||||
"Reading": "Читання",
|
||||
"Delete member": "Видалити учасника",
|
||||
"Member deleted successfully": "Учасника успішно видалено",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "Перемістити в кошик",
|
||||
"Move this page to trash?": "Перемістити цю сторінку до кошика?",
|
||||
"Restore page": "Відновити сторінку",
|
||||
"Permanently delete": "Видалити назавжди",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> перемістив цю сторінку до кошика {{time}}.",
|
||||
"Page moved to trash": "Сторінку переміщено в кошик",
|
||||
"Page restored successfully": "Сторінку успішно відновлено",
|
||||
"Deleted by": "Видалив",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "Зображення має займати менше, ніж 10 МБ.",
|
||||
"Image removed successfully": "Зображення видалено",
|
||||
"API key": "Ключ API",
|
||||
"API key created successfully": "Ключ API успішно створено",
|
||||
"API keys": "Ключі API",
|
||||
"API management": "Управління API",
|
||||
"Are you sure you want to revoke this API key": "Ви впевнені, що хочете відкликати цей ключ API",
|
||||
"Create API Key": "Створити ключ API",
|
||||
"Custom expiration date": "Користувацька дата закінчення",
|
||||
"Enter a descriptive token name": "Введіть описову назву токена",
|
||||
"Expiration": "Термін дії",
|
||||
"Expired": "Закінчився",
|
||||
"Expires": "Закінчується",
|
||||
"I've saved my API key": "Я зберіг свій ключ API",
|
||||
"Last use": "Останнє використання",
|
||||
"No API keys found": "Ключі API не знайдено",
|
||||
"No expiration": "Без терміну дії",
|
||||
"Revoke API key": "Відкликати ключ API",
|
||||
"Revoked successfully": "Успішно відкликано",
|
||||
"Select expiration date": "Виберіть дату закінчення",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "Цю дію не можна скасувати. Будь-які додатки, що використовують цей ключ API, перестануть працювати.",
|
||||
"Update": "Оновити",
|
||||
"Update {{credential}}": "Оновити {{credential}}",
|
||||
"Update API key": "Оновити ключ API",
|
||||
"Manage API keys for all users in the workspace": "Керувати ключами API для всіх користувачів у робочій області",
|
||||
"Restrict API key creation to admins": "Обмежити створення API-ключів лише для адміністраторів",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "Тільки адміністратори та власники можуть створювати нові API-ключі. Існуючі ключі учасників і надалі працюватимуть.",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "AI-чат",
|
||||
"Analyze for insights": "Проаналізувати для отримання висновків",
|
||||
"Ask anything...": "Запитайте що завгодно...",
|
||||
"Assistant said:": "Помічник сказав:",
|
||||
"Chat history": "Історія чатів",
|
||||
"Chat name": "Назва чату",
|
||||
"Chat transcript": "Стенограма чату",
|
||||
"Close": "Закрити",
|
||||
"Copy assistant response": "Копіювати відповідь помічника",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "Не вдалося завантажити чат. Сталася помилка.",
|
||||
"Failed to render this message.": "Не вдалося відобразити це повідомлення.",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "Чатів не знайдено",
|
||||
"No conversations yet": "Розмов поки немає",
|
||||
"Open full page": "Відкрити повну сторінку",
|
||||
"Scroll to bottom": "Прокрутити вниз",
|
||||
"You said:": "Ви сказали:",
|
||||
"Previous 7 days": "Попередні 7 днів",
|
||||
"Previous 30 days": "Попередні 30 днів",
|
||||
"Search chats...": "Шукати чати...",
|
||||
"Search chats": "Шукати чати",
|
||||
"Ask anything... Use @ to mention pages": "Запитайте будь-що... Використовуйте @, щоб згадувати сторінки",
|
||||
"Ask anything or search your workspace": "Запитайте будь-що або шукайте у своєму робочому просторі",
|
||||
"Welcome to {{name}}": "Ласкаво просимо до {{name}}",
|
||||
"Add files": "Додати файли",
|
||||
"Mention a page": "Згадати сторінку",
|
||||
"Start a new chat to see it here.": "Почніть новий чат, щоб побачити його тут.",
|
||||
"Summarize this page": "Підсумувати цю сторінку",
|
||||
"Toggle AI Chat": "Перемкнути AI-чат",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "Спробуйте інший пошуковий запит.",
|
||||
"Try again": "Спробувати ще раз",
|
||||
"Untitled chat": "Чат без назви",
|
||||
"What can I help you with?": "Чим я можу вам допомогти?",
|
||||
"Are you sure you want to revoke this {{credential}}": "Ви впевнені, що хочете відкликати цей {{credential}}",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "Автоматично надавайте користувачів і групи від вашого постачальника ідентифікації через SCIM.",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "Налаштуйте свого постачальника ідентифікації за допомогою цієї URL-адреси для надання користувачів і груп.",
|
||||
"Create {{credential}}": "Створити {{credential}}",
|
||||
"{{credential}} created": "{{credential}} створено",
|
||||
"{{credential}} created successfully": "{{credential}} успішно створено",
|
||||
"Created by": "Створено",
|
||||
"Custom": "Користувацький",
|
||||
"Enable SCIM": "Увімкнути SCIM",
|
||||
"Enter a descriptive name": "Введіть описову назву",
|
||||
"I've saved my {{credential}}": "Я зберіг(ла) свій {{credential}}",
|
||||
"Important": "Важливо",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "Обов’язково скопіюйте свій {{credential}} зараз. Ви більше не зможете побачити його знову!",
|
||||
"Never": "Ніколи",
|
||||
"Revoke {{credential}}": "Відкликати {{credential}}",
|
||||
"SCIM endpoint URL": "URL-адреса кінцевої точки SCIM",
|
||||
"SCIM provisioning": "Надання SCIM",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "SCIM має пріоритет над синхронізацією груп SSO, коли його ввімкнено.",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "Ви досягли максимальної кількості токенів SCIM: {{max}}. Видаліть наявний токен, щоб створити новий.",
|
||||
"SCIM token": "Токен SCIM",
|
||||
"SCIM tokens": "Токени SCIM",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "Цю дію не можна скасувати. Ваш постачальник ідентифікації негайно припинить синхронізацію.",
|
||||
"Toggle SCIM provisioning": "Перемкнути надання SCIM",
|
||||
"Token": "Токен",
|
||||
"Page menu": "Меню сторінки",
|
||||
"Expand": "Розгорнути",
|
||||
"Collapse": "Згорнути",
|
||||
"Comment menu": "Меню коментаря",
|
||||
"Group menu": "Меню групи",
|
||||
"Show hidden breadcrumbs": "Показати приховані \"хлібні крихти\"",
|
||||
"Breadcrumbs": "\"Хлібні крихти\"",
|
||||
"Page actions": "Дії сторінки",
|
||||
"Pick emoji": "Вибрати емодзі",
|
||||
"Template menu": "Меню шаблону",
|
||||
"Use": "Використати",
|
||||
"Use template": "Використати шаблон",
|
||||
"Preview template: {{title}}": "Попередній перегляд шаблону: {{title}}",
|
||||
"Use a template": "Використати шаблон",
|
||||
"Search templates...": "Шукати шаблони...",
|
||||
"Search spaces...": "Шукати простори...",
|
||||
"No templates found": "Шаблони не знайдено",
|
||||
"No spaces found": "Простори не знайдено",
|
||||
"Browse all templates": "Переглянути всі шаблони",
|
||||
"This space": "Цей простір",
|
||||
"All templates": "Усі шаблони",
|
||||
"Global": "Глобальний",
|
||||
"New template": "Новий шаблон",
|
||||
"Edit template": "Редагувати шаблон",
|
||||
"Are you sure you want to delete this template?": "Ви впевнені, що хочете видалити цей шаблон?",
|
||||
"Template scope updated": "Область дії шаблону оновлено",
|
||||
"Choose which space this template belongs to": "Виберіть, до якого простору належить цей шаблон",
|
||||
"Scope": "Область дії",
|
||||
"Select scope": "Вибрати область дії",
|
||||
"Title": "Назва",
|
||||
"Saving...": "Збереження...",
|
||||
"Saved": "Збережено",
|
||||
"Save failed. Retry": "Не вдалося зберегти. Повторіть спробу",
|
||||
"By {{name}}": "Від {{name}}",
|
||||
"Updated {{time}}": "Оновлено {{time}}",
|
||||
"Choose destination": "Вибрати місце призначення",
|
||||
"Search pages and spaces...": "Шукати сторінки та простори...",
|
||||
"No results found": "Результати не знайдено",
|
||||
"You don't have permission to create pages here": "У вас немає дозволу на створення сторінок тут",
|
||||
"Chat menu": "Меню чату",
|
||||
"API key menu": "Меню ключа API",
|
||||
"Jump to comment selection": "Перейти до вибору коментаря",
|
||||
"Slash commands": "Слеш-команди",
|
||||
"Mention suggestions": "Підказки згадок",
|
||||
"Link suggestions": "Підказки посилань",
|
||||
"Diagram editor": "Редактор діаграм",
|
||||
"Add comment": "Додати коментар",
|
||||
"Find and replace": "Знайти й замінити",
|
||||
"Main navigation": "Основна навігація",
|
||||
"Space navigation": "Навігація простору",
|
||||
"Settings navigation": "Навігація налаштувань",
|
||||
"AI navigation": "Навігація AI",
|
||||
"Breadcrumb": "Хлібна крихта",
|
||||
"Synced block": "Синхронізований блок",
|
||||
"Create a block that stays in sync across pages.": "Створіть блок, який синхронізується між сторінками.",
|
||||
"Editing original": "Редагування оригіналу",
|
||||
"Copy synced block": "Скопіювати синхронізований блок",
|
||||
"Unsync": "Скасувати синхронізацію",
|
||||
"Delete synced block": "Видалити синхронізований блок",
|
||||
"Synced to {{count}} other page_one": "Синхронізовано з {{count}} іншою сторінкою",
|
||||
"Synced to {{count}} other page_other": "Синхронізовано з {{count}} іншими сторінками",
|
||||
"ORIGINAL": "ОРИГІНАЛ",
|
||||
"THIS PAGE": "ЦЯ СТОРІНКА",
|
||||
"No pages": "Немає сторінок",
|
||||
"The original synced block no longer exists": "Оригінальний синхронізований блок більше не існує",
|
||||
"You don't have access to this synced block": "У вас немає доступу до цього синхронізованого блоку",
|
||||
"Failed to load this synced block": "Не вдалося завантажити цей синхронізований блок",
|
||||
"Fixed editor toolbar": "Закріплена панель інструментів редактора",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "Показувати панель форматування над редактором для швидкого доступу до поширених дій.",
|
||||
"Toggle fixed editor toolbar": "Перемкнути закріплену панель інструментів редактора",
|
||||
"Normal text": "Звичайний текст",
|
||||
"More inline formatting": "Більше вбудованого форматування",
|
||||
"Subscript": "Нижній індекс",
|
||||
"Superscript": "Верхній індекс",
|
||||
"Inline code": "Вбудований код",
|
||||
"Insert media": "Вставити медіа",
|
||||
"Mention": "Згадка",
|
||||
"Emoji": "Емодзі",
|
||||
"Columns": "Стовпці",
|
||||
"More inserts": "Більше вставок",
|
||||
"Embeds": "Вбудовування",
|
||||
"Diagrams": "Діаграми",
|
||||
"Advanced": "Додатково",
|
||||
"Utility": "Службові",
|
||||
"Decrease indent": "Зменшити відступ",
|
||||
"Increase indent": "Збільшити відступ",
|
||||
"Clear formatting": "Очистити форматування",
|
||||
"Code block": "Блок коду",
|
||||
"Experimental": "Експериментальне",
|
||||
"Strikethrough": "Закреслення",
|
||||
"Undo": "Скасувати",
|
||||
"Redo": "Повторити",
|
||||
"Backlinks": "Зворотні посилання",
|
||||
"Last updated by": "Востаннє оновив",
|
||||
"Last updated": "Останнє оновлення",
|
||||
"Stats": "Статистика",
|
||||
"Word count": "Кількість слів",
|
||||
"Characters": "Символи",
|
||||
"Incoming links": "Вхідні посилання",
|
||||
"Outgoing links": "Вихідні посилання",
|
||||
"Incoming links ({{count}})": "Вхідні посилання ({{count}})",
|
||||
"Outgoing links ({{count}})": "Вихідні посилання ({{count}})",
|
||||
"No pages link here yet.": "Поки що жодна сторінка не посилається сюди.",
|
||||
"This page doesn't link to other pages yet.": "Ця сторінка ще не містить посилань на інші сторінки.",
|
||||
"Verified until {{date}}": "Перевірено до {{date}}",
|
||||
"Labels": "Мітки",
|
||||
"Add label": "Додати мітку",
|
||||
"No labels yet": "Міток поки немає",
|
||||
"Already added": "Уже додано",
|
||||
"Invalid label name": "Некоректна назва мітки",
|
||||
"No matches": "Немає збігів",
|
||||
"Search or create…": "Шукати або створити…",
|
||||
"Remove label {{name}}": "Видалити мітку {{name}}",
|
||||
"Failed to add label": "Не вдалося додати мітку",
|
||||
"Failed to remove label": "Не вдалося видалити мітку",
|
||||
"No pages with this label": "Немає сторінок із цією міткою",
|
||||
"Pages tagged with this label will appear here.": "Тут з’являться сторінки, позначені цією міткою.",
|
||||
"No pages match your search.": "Немає сторінок, що відповідають вашому запиту.",
|
||||
"Updated {{date}}": "Оновлено {{date}}",
|
||||
"Cell actions": "Дії з коміркою",
|
||||
"Column actions": "Дії зі стовпцем",
|
||||
"Row actions": "Дії з рядком",
|
||||
"Filter": "Фільтр",
|
||||
"Page title": "Назва сторінки",
|
||||
"Page content": "Вміст сторінки",
|
||||
"Member actions": "Дії з учасником",
|
||||
"Toggle password visibility": "Перемкнути видимість пароля",
|
||||
"Send comment": "Надіслати коментар",
|
||||
"Token actions": "Дії з токеном",
|
||||
"Template settings": "Налаштування шаблону",
|
||||
"Edit diagram": "Редагувати діаграму",
|
||||
"Edit embed": "Редагувати вбудований елемент",
|
||||
"Edit drawing": "Редагувати рисунок",
|
||||
"Delete equation": "Видалити рівняння",
|
||||
"Invite actions": "Дії із запрошенням",
|
||||
"Get started": "Почати",
|
||||
"* indicates required fields": "* позначає обов’язкові поля",
|
||||
"List of spaces in this workspace": "Список просторів у цьому робочому просторі",
|
||||
"Active sessions": "Активні сеанси",
|
||||
"Add {{name}} to favorites": "Додати {{name}} до обраного",
|
||||
"Remove {{name}} from favorites": "Видалити {{name}} з обраного",
|
||||
"Added to favorites": "Додано до обраного",
|
||||
"Removed from favorites": "Видалено з обраного",
|
||||
"Added {{name}} to favorites": "{{name}} додано до обраного",
|
||||
"Removed {{name}} from favorites": "{{name}} видалено з обраного",
|
||||
"Page menu for {{name}}": "Меню сторінки для {{name}}",
|
||||
"Create subpage of {{name}}": "Створити підсторінку для {{name}}",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "Чим я можу вам допомогти?"
|
||||
}
|
||||
|
||||
@@ -71,7 +71,6 @@
|
||||
"Export": "导出",
|
||||
"Failed to create page": "创建页面失败",
|
||||
"Failed to delete page": "删除页面失败",
|
||||
"Failed to restore page": "恢复页面失败",
|
||||
"Failed to fetch recent pages": "获取最近页面失败",
|
||||
"Failed to import pages": "导入页面失败",
|
||||
"Failed to load page. An error occurred.": "页面加载失败。发生了一个错误。",
|
||||
@@ -277,9 +276,6 @@
|
||||
"Align left": "靠左对齐",
|
||||
"Align right": "靠右对齐",
|
||||
"Align center": "居中对齐",
|
||||
"Alt text": "替代文本",
|
||||
"Describe this for accessibility.": "为无障碍访问添加描述。",
|
||||
"Add a description": "添加描述",
|
||||
"Justify": "两端对齐",
|
||||
"Merge cells": "合并单元格",
|
||||
"Split cell": "分割单元格",
|
||||
@@ -290,19 +286,6 @@
|
||||
"Add row above": "在上方添加行",
|
||||
"Add row below": "在下方插入行",
|
||||
"Delete table": "删除表格",
|
||||
"Add column left": "在左侧添加列",
|
||||
"Add column right": "在右侧添加列",
|
||||
"Clear cell": "清空单元格",
|
||||
"Clear cells": "清空单元格",
|
||||
"Toggle header cell": "切换标题单元格",
|
||||
"Toggle header column": "切换标题列",
|
||||
"Toggle header row": "切换标题行",
|
||||
"Move column left": "左移列",
|
||||
"Move column right": "右移列",
|
||||
"Move row down": "下移行",
|
||||
"Move row up": "上移行",
|
||||
"Sort A → Z": "按 A → Z 排序",
|
||||
"Sort Z → A": "按 Z → A 排序",
|
||||
"Info": "信息",
|
||||
"Note": "注意",
|
||||
"Success": "成功",
|
||||
@@ -365,8 +348,6 @@
|
||||
"Create block quote.": "创建引用块",
|
||||
"Insert code snippet.": "插入代码片段",
|
||||
"Insert horizontal rule divider": "插入水平分割线",
|
||||
"Page break": "分页符",
|
||||
"Insert a page break for printing.": "插入一个用于打印的分页符。",
|
||||
"Upload any image from your device.": "从设备上传任何图像",
|
||||
"Upload any video from your device.": "从设备上传任何视频",
|
||||
"Upload any audio from your device.": "从您的设备上传任意音频文件。",
|
||||
@@ -411,10 +392,6 @@
|
||||
"Write...": "写点内容...",
|
||||
"Column count": "列数",
|
||||
"{{count}} Columns": "{{count}} 列",
|
||||
"{{count}} command available_one": "有 1 个可用命令",
|
||||
"{{count}} command available_other": "有 {{count}} 个可用命令",
|
||||
"{{count}} result available_one": "有 1 个可用结果",
|
||||
"{{count}} result available_other": "有 {{count}} 个可用结果",
|
||||
"Equal columns": "等宽列",
|
||||
"Left sidebar": "左侧边栏",
|
||||
"Right sidebar": "右侧边栏",
|
||||
@@ -439,7 +416,6 @@
|
||||
"{{latestVersion}} is available": "{{latestVersion}} 可用",
|
||||
"Default page edit mode": "默认页面编辑模式",
|
||||
"Choose your preferred page edit mode. Avoid accidental edits.": "选择您偏好的页面编辑模式。避免意外编辑。",
|
||||
"Choose {{format}} file": "选择 {{format}} 文件",
|
||||
"Reading": "阅读",
|
||||
"Delete member": "删除成员",
|
||||
"Member deleted successfully": "成员删除成功",
|
||||
@@ -589,8 +565,6 @@
|
||||
"Move to trash": "移至回收站",
|
||||
"Move this page to trash?": "将此页面移至垃圾箱？",
|
||||
"Restore page": "恢复页面",
|
||||
"Permanently delete": "永久删除",
|
||||
"<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> 于 {{time}} 将此页面移至回收站。",
|
||||
"Page moved to trash": "页面已移至回收站",
|
||||
"Page restored successfully": "页面恢复成功",
|
||||
"Deleted by": "删除者",
|
||||
@@ -634,21 +608,25 @@
|
||||
"Image exceeds 10MB limit.": "图片超过10MB限制。",
|
||||
"Image removed successfully": "图片删除成功",
|
||||
"API key": "API密钥",
|
||||
"API key created successfully": "API密钥创建成功",
|
||||
"API keys": "API密钥",
|
||||
"API management": "API管理",
|
||||
"Are you sure you want to revoke this API key": "确定要撤销此API密钥吗",
|
||||
"Create API Key": "创建API密钥",
|
||||
"Custom expiration date": "自定义到期日期",
|
||||
"Enter a descriptive token name": "输入描述性令牌名称",
|
||||
"Expiration": "到期",
|
||||
"Expired": "已过期",
|
||||
"Expires": "到期",
|
||||
"I've saved my API key": "我已保存我的API密钥",
|
||||
"Last use": "上次使用",
|
||||
"No API keys found": "找不到API密钥",
|
||||
"No expiration": "无到期",
|
||||
"Revoke API key": "撤销API密钥",
|
||||
"Revoked successfully": "撤销成功",
|
||||
"Select expiration date": "选择到期日期",
|
||||
"This action cannot be undone. Any applications using this API key will stop working.": "此操作无法撤销。使用此API密钥的任何应用程序将停止工作。",
|
||||
"Update": "更新",
|
||||
"Update {{credential}}": "更新{{credential}}",
|
||||
"Update API key": "更新API密钥",
|
||||
"Manage API keys for all users in the workspace": "管理工作空间中所有用户的API密钥",
|
||||
"Restrict API key creation to admins": "仅限管理员创建 API 密钥。",
|
||||
"Only admins and owners can create new API keys. Existing member keys will continue to work.": "只有管理员和所有者可以创建新的 API 密钥。现有成员密钥将继续有效。",
|
||||
@@ -880,12 +858,9 @@
|
||||
"AI Chat": "AI 聊天",
|
||||
"Analyze for insights": "分析并获取洞察",
|
||||
"Ask anything...": "随便问点什么...",
|
||||
"Assistant said:": "助手说：",
|
||||
"Chat history": "聊天记录",
|
||||
"Chat name": "聊天名称",
|
||||
"Chat transcript": "聊天记录",
|
||||
"Close": "关闭",
|
||||
"Copy assistant response": "复制助手回复",
|
||||
"Docmost AI": "Docmost AI",
|
||||
"Failed to load chat. An error occurred.": "加载聊天失败。发生错误。",
|
||||
"Failed to render this message.": "渲染此消息失败。",
|
||||
@@ -895,17 +870,9 @@
|
||||
"No chats found": "未找到聊天",
|
||||
"No conversations yet": "暂无对话",
|
||||
"Open full page": "打开完整页面",
|
||||
"Scroll to bottom": "滚动到底部",
|
||||
"You said:": "你说：",
|
||||
"Previous 7 days": "前 7 天",
|
||||
"Previous 30 days": "前 30 天",
|
||||
"Search chats...": "搜索聊天...",
|
||||
"Search chats": "搜索聊天",
|
||||
"Ask anything... Use @ to mention pages": "询问任何内容……使用 @ 提及页面",
|
||||
"Ask anything or search your workspace": "询问任何问题或搜索你的工作区",
|
||||
"Welcome to {{name}}": "欢迎使用 {{name}}",
|
||||
"Add files": "添加文件",
|
||||
"Mention a page": "提及页面",
|
||||
"Start a new chat to see it here.": "开始新的聊天后会显示在这里。",
|
||||
"Summarize this page": "总结此页面",
|
||||
"Toggle AI Chat": "切换 AI 聊天",
|
||||
@@ -913,194 +880,5 @@
|
||||
"Try a different search term.": "请尝试其他搜索词。",
|
||||
"Try again": "重试",
|
||||
"Untitled chat": "未命名聊天",
|
||||
"What can I help you with?": "我能帮您做什么？",
|
||||
"Are you sure you want to revoke this {{credential}}": "确定要撤销此{{credential}}吗",
|
||||
"Automatically provision users and groups from your identity provider via SCIM.": "通过 SCIM 从您的身份提供商自动预配用户和群组。",
|
||||
"Configure your identity provider with this URL to provision users and groups.": "使用此 URL 配置您的身份提供商以预配用户和群组。",
|
||||
"Create {{credential}}": "创建{{credential}}",
|
||||
"{{credential}} created": "已创建{{credential}}",
|
||||
"{{credential}} created successfully": "已成功创建{{credential}}",
|
||||
"Created by": "创建者",
|
||||
"Custom": "自定义",
|
||||
"Enable SCIM": "启用 SCIM",
|
||||
"Enter a descriptive name": "输入描述性名称",
|
||||
"I've saved my {{credential}}": "我已保存我的{{credential}}",
|
||||
"Important": "重要",
|
||||
"Make sure to copy your {{credential}} now. You won't be able to see it again!": "请务必立即复制您的{{credential}}。之后您将无法再次查看！",
|
||||
"Never": "从不",
|
||||
"Revoke {{credential}}": "撤销{{credential}}",
|
||||
"SCIM endpoint URL": "SCIM 端点 URL",
|
||||
"SCIM provisioning": "SCIM 预配",
|
||||
"SCIM takes precedence over SSO group sync while enabled.": "启用后，SCIM 的优先级高于 SSO 群组同步。",
|
||||
"You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "您已达到 {{max}} 个 SCIM 令牌的上限。请删除一个现有令牌以创建新令牌。",
|
||||
"SCIM token": "SCIM 令牌",
|
||||
"SCIM tokens": "SCIM 令牌",
|
||||
"This action cannot be undone. Your identity provider will stop syncing immediately.": "此操作无法撤销。您的身份提供商将立即停止同步。",
|
||||
"Toggle SCIM provisioning": "切换 SCIM 预配",
|
||||
"Token": "令牌",
|
||||
"Page menu": "页面菜单",
|
||||
"Expand": "展开",
|
||||
"Collapse": "折叠",
|
||||
"Comment menu": "评论菜单",
|
||||
"Group menu": "群组菜单",
|
||||
"Show hidden breadcrumbs": "显示隐藏的面包屑",
|
||||
"Breadcrumbs": "面包屑",
|
||||
"Page actions": "页面操作",
|
||||
"Pick emoji": "选择表情符号",
|
||||
"Template menu": "模板菜单",
|
||||
"Use": "使用",
|
||||
"Use template": "使用模板",
|
||||
"Preview template: {{title}}": "预览模板：{{title}}",
|
||||
"Use a template": "使用模板",
|
||||
"Search templates...": "搜索模板……",
|
||||
"Search spaces...": "搜索空间……",
|
||||
"No templates found": "未找到模板",
|
||||
"No spaces found": "未找到空间",
|
||||
"Browse all templates": "浏览所有模板",
|
||||
"This space": "此空间",
|
||||
"All templates": "所有模板",
|
||||
"Global": "全局",
|
||||
"New template": "新建模板",
|
||||
"Edit template": "编辑模板",
|
||||
"Are you sure you want to delete this template?": "你确定要删除此模板吗？",
|
||||
"Template scope updated": "模板范围已更新",
|
||||
"Choose which space this template belongs to": "选择此模板所属的空间",
|
||||
"Scope": "范围",
|
||||
"Select scope": "选择范围",
|
||||
"Title": "标题",
|
||||
"Saving...": "正在保存……",
|
||||
"Saved": "已保存",
|
||||
"Save failed. Retry": "保存失败。重试",
|
||||
"By {{name}}": "作者：{{name}}",
|
||||
"Updated {{time}}": "更新于 {{time}}",
|
||||
"Choose destination": "选择目标位置",
|
||||
"Search pages and spaces...": "搜索页面和空间……",
|
||||
"No results found": "未找到结果",
|
||||
"You don't have permission to create pages here": "你无权在此处创建页面",
|
||||
"Chat menu": "聊天菜单",
|
||||
"API key menu": "API 密钥菜单",
|
||||
"Jump to comment selection": "跳转到评论选择",
|
||||
"Slash commands": "斜杠命令",
|
||||
"Mention suggestions": "提及建议",
|
||||
"Link suggestions": "链接建议",
|
||||
"Diagram editor": "图表编辑器",
|
||||
"Add comment": "添加评论",
|
||||
"Find and replace": "查找和替换",
|
||||
"Main navigation": "主导航",
|
||||
"Space navigation": "空间导航",
|
||||
"Settings navigation": "设置导航",
|
||||
"AI navigation": "AI 导航",
|
||||
"Breadcrumb": "面包屑",
|
||||
"Synced block": "同步块",
|
||||
"Create a block that stays in sync across pages.": "创建一个可在多个页面间保持同步的块。",
|
||||
"Editing original": "正在编辑原始内容",
|
||||
"Copy synced block": "复制同步块",
|
||||
"Unsync": "取消同步",
|
||||
"Delete synced block": "删除同步块",
|
||||
"Synced to {{count}} other page_one": "已与另外 {{count}} 个页面同步",
|
||||
"Synced to {{count}} other page_other": "已与另外 {{count}} 个页面同步",
|
||||
"ORIGINAL": "原始内容",
|
||||
"THIS PAGE": "此页面",
|
||||
"No pages": "没有页面",
|
||||
"The original synced block no longer exists": "原始同步块已不存在",
|
||||
"You don't have access to this synced block": "你无权访问此同步块",
|
||||
"Failed to load this synced block": "加载此同步块失败",
|
||||
"Fixed editor toolbar": "固定编辑器工具栏",
|
||||
"Show a formatting toolbar above the editor with quick access to common actions.": "在编辑器上方显示格式工具栏，便于快速访问常用操作。",
|
||||
"Toggle fixed editor toolbar": "切换固定编辑器工具栏",
|
||||
"Normal text": "普通文本",
|
||||
"More inline formatting": "更多内联格式",
|
||||
"Subscript": "下标",
|
||||
"Superscript": "上标",
|
||||
"Inline code": "行内代码",
|
||||
"Insert media": "插入媒体",
|
||||
"Mention": "提及",
|
||||
"Emoji": "表情符号",
|
||||
"Columns": "分栏",
|
||||
"More inserts": "更多插入项",
|
||||
"Embeds": "嵌入内容",
|
||||
"Diagrams": "图表",
|
||||
"Advanced": "高级",
|
||||
"Utility": "实用工具",
|
||||
"Decrease indent": "减少缩进",
|
||||
"Increase indent": "增加缩进",
|
||||
"Clear formatting": "清除格式",
|
||||
"Code block": "代码块",
|
||||
"Experimental": "实验性",
|
||||
"Strikethrough": "删除线",
|
||||
"Undo": "撤销",
|
||||
"Redo": "重做",
|
||||
"Backlinks": "反向链接",
|
||||
"Last updated by": "最后更新者",
|
||||
"Last updated": "最后更新",
|
||||
"Stats": "统计",
|
||||
"Word count": "字数",
|
||||
"Characters": "字符数",
|
||||
"Incoming links": "传入链接",
|
||||
"Outgoing links": "传出链接",
|
||||
"Incoming links ({{count}})": "传入链接（{{count}}）",
|
||||
"Outgoing links ({{count}})": "传出链接（{{count}}）",
|
||||
"No pages link here yet.": "还没有页面链接到这里。",
|
||||
"This page doesn't link to other pages yet.": "此页面尚未链接到其他页面。",
|
||||
"Verified until {{date}}": "验证有效期至 {{date}}",
|
||||
"Labels": "标签",
|
||||
"Add label": "添加标签",
|
||||
"No labels yet": "还没有标签",
|
||||
"Already added": "已添加",
|
||||
"Invalid label name": "标签名称无效",
|
||||
"No matches": "无匹配结果",
|
||||
"Search or create…": "搜索或创建…",
|
||||
"Remove label {{name}}": "移除标签 {{name}}",
|
||||
"Failed to add label": "添加标签失败",
|
||||
"Failed to remove label": "移除标签失败",
|
||||
"No pages with this label": "没有带有此标签的页面",
|
||||
"Pages tagged with this label will appear here.": "带有此标签的页面将显示在这里。",
|
||||
"No pages match your search.": "没有页面匹配你的搜索。",
|
||||
"Updated {{date}}": "更新于 {{date}}",
|
||||
"Cell actions": "单元格操作",
|
||||
"Column actions": "列操作",
|
||||
"Row actions": "行操作",
|
||||
"Filter": "筛选",
|
||||
"Page title": "页面标题",
|
||||
"Page content": "页面内容",
|
||||
"Member actions": "成员操作",
|
||||
"Toggle password visibility": "切换密码可见性",
|
||||
"Send comment": "发送评论",
|
||||
"Token actions": "令牌操作",
|
||||
"Template settings": "模板设置",
|
||||
"Edit diagram": "编辑图表",
|
||||
"Edit embed": "编辑嵌入内容",
|
||||
"Edit drawing": "编辑绘图",
|
||||
"Delete equation": "删除公式",
|
||||
"Invite actions": "邀请操作",
|
||||
"Get started": "开始使用",
|
||||
"* indicates required fields": "* 表示必填字段",
|
||||
"List of spaces in this workspace": "此工作区中的空间列表",
|
||||
"Active sessions": "活动会话",
|
||||
"Add {{name}} to favorites": "将 {{name}} 添加到收藏",
|
||||
"Remove {{name}} from favorites": "将 {{name}} 从收藏中移除",
|
||||
"Added to favorites": "已添加到收藏",
|
||||
"Removed from favorites": "已从收藏中移除",
|
||||
"Added {{name}} to favorites": "已将 {{name}} 添加到收藏",
|
||||
"Removed {{name}} from favorites": "已将 {{name}} 从收藏中移除",
|
||||
"Page menu for {{name}}": "{{name}} 的页面菜单",
|
||||
"Create subpage of {{name}}": "创建 {{name}} 的子页面",
|
||||
"Apply": "Apply",
|
||||
"Cells that aren't already a page reference will be cleared.": "Cells that aren't already a page reference will be cleared.",
|
||||
"Cells that aren't a valid URL will be cleared.": "Cells that aren't a valid URL will be cleared.",
|
||||
"Cells that aren't a valid email address will be cleared.": "Cells that aren't a valid email address will be cleared.",
|
||||
"Cells that can't be parsed as a date will be cleared.": "Cells that can't be parsed as a date will be cleared.",
|
||||
"Cells that can't be parsed as a number will be cleared.": "Cells that can't be parsed as a number will be cleared.",
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).": "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
"Cells will be reinterpreted under the new type.": "Cells will be reinterpreted under the new type.",
|
||||
"Cells will be replaced with a comma-separated list of file names.": "Cells will be replaced with a comma-separated list of file names.",
|
||||
"Cells will be replaced with a comma-separated list of option names.": "Cells will be replaced with a comma-separated list of option names.",
|
||||
"Cells will be replaced with the option name.": "Cells will be replaced with the option name.",
|
||||
"Cells will be replaced with the page title.": "Cells will be replaced with the page title.",
|
||||
"Cells will be replaced with the person's name.": "Cells will be replaced with the person's name.",
|
||||
"Change type": "Change type",
|
||||
"Change type to {{label}}?": "Change type to {{label}}?",
|
||||
"Converting…": "Converting…",
|
||||
"Existing values become single-item lists. No data is lost.": "Existing values become single-item lists. No data is lost.",
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.": "Only the first selected item per row will be kept; the rest will be discarded."
|
||||
"What can I help you with?": "我能帮您做什么？"
|
||||
}
|
||||
|
||||
@@ -38,7 +38,6 @@ import SpaceTrash from "@/pages/space/space-trash.tsx";
|
||||
import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
|
||||
import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
|
||||
import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
|
||||
import BasePage from "@/pages/base/base-page.tsx";
|
||||
import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
|
||||
import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
|
||||
import TemplateList from "@/ee/template/pages/template-list";
|
||||
@@ -107,8 +106,6 @@ export default function App() {
|
||||
element={<Page />}
|
||||
/>
|
||||
|
||||
<Route path={"/base/:pageId"} element={<BasePage />} />
|
||||
|
||||
<Route path={"/settings"}>
|
||||
<Route path={"account/profile"} element={<AccountSettings />} />
|
||||
<Route
|
||||
|
||||
@@ -17,26 +17,14 @@ import ChatToolGroup from "./chat-tool-group";
|
||||
import classes from "../styles/chat-message.module.css";
|
||||
import CopyTextButton from "@/components/common/copy.tsx";
|
||||
|
||||
const PAGE_PATH_RE = /\/s\/[^/?#]+\/p\/[^/?#]+/;
|
||||
|
||||
const chatSanitizer = DOMPurify();
|
||||
chatSanitizer.addHook("afterSanitizeAttributes", (node) => {
|
||||
if (node.tagName !== "A") return;
|
||||
const href = node.getAttribute("href") || "";
|
||||
|
||||
// Recover the canonical /s/{slug}/p/{slugId} path if the model wrapped it
|
||||
// in a fabricated host (https://s/..., https://yoursite.com/s/..., //s/...).
|
||||
const m = href.match(PAGE_PATH_RE);
|
||||
if (m) {
|
||||
node.setAttribute("href", m[0]);
|
||||
node.removeAttribute("target");
|
||||
node.removeAttribute("rel");
|
||||
return;
|
||||
}
|
||||
|
||||
if (href.startsWith("http://") || href.startsWith("https://")) {
|
||||
node.setAttribute("target", "_blank");
|
||||
node.setAttribute("rel", "noopener noreferrer");
|
||||
if (node.tagName === "A") {
|
||||
const href = node.getAttribute("href") || "";
|
||||
if (href.startsWith("http://") || href.startsWith("https://")) {
|
||||
node.setAttribute("target", "_blank");
|
||||
node.setAttribute("rel", "noopener noreferrer");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -5,10 +5,9 @@ const enterpriseFeatures = [
|
||||
"AI Integration (Chat, Search & Assistant)",
|
||||
"MCP Support",
|
||||
"SSO (SAML, OIDC, LDAP)",
|
||||
"SCIM Provisioning",
|
||||
"Multi-factor Authentication (2FA)",
|
||||
"Page-level Permissions",
|
||||
"Page Verification & Approval Workflow",
|
||||
"Page verification & approval workflow",
|
||||
"Audit Logs",
|
||||
"Enterprise Controls",
|
||||
"API Keys",
|
||||
@@ -16,8 +15,7 @@ const enterpriseFeatures = [
|
||||
"Full-text Search in Attachments (PDF, DOCX)",
|
||||
"Resolve Comments",
|
||||
"Confluence Import",
|
||||
"PDF & DOCX Import",
|
||||
"Templates",
|
||||
"DOCX Import",
|
||||
];
|
||||
|
||||
export default function OssDetails() {
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import { atom } from "jotai";
|
||||
import { atomFamily } from "jotai/utils";
|
||||
import { EditingCell } from "@/features/base/types/base.types";
|
||||
|
||||
// Atoms are scoped per-base via `pageId` so that two BaseTable instances
|
||||
// rendered on the same page (e.g. multiple base embeds inside one
|
||||
// document) don't share UI state. A global atom would otherwise cause
|
||||
// each instance's `useEffect` writers to clobber the other's value
|
||||
// every render — pinning React into a "Maximum update depth exceeded"
|
||||
// loop.
|
||||
|
||||
export const activeViewIdAtomFamily = atomFamily((_pageId: string) =>
|
||||
atom<string | null>(null),
|
||||
);
|
||||
|
||||
export const editingCellAtomFamily = atomFamily((_pageId: string) =>
|
||||
atom<EditingCell>(null),
|
||||
);
|
||||
|
||||
export const activePropertyMenuAtomFamily = atomFamily((_pageId: string) =>
|
||||
atom<string | null>(null),
|
||||
);
|
||||
|
||||
export const propertyMenuDirtyAtomFamily = atomFamily((_pageId: string) =>
|
||||
atom<boolean>(false),
|
||||
);
|
||||
|
||||
export const propertyMenuCloseRequestAtomFamily = atomFamily((_pageId: string) =>
|
||||
atom<number>(0),
|
||||
);
|
||||
|
||||
export const selectedRowIdsAtomFamily = atomFamily((_pageId: string) =>
|
||||
atom<Set<string>>(new Set<string>()),
|
||||
);
|
||||
|
||||
export const lastToggledRowIndexAtomFamily = atomFamily((_pageId: string) =>
|
||||
atom<number | null>(null),
|
||||
);
|
||||
@@ -1,3 +0,0 @@
|
||||
import { atom } from "jotai";
|
||||
|
||||
export const formulaRecomputeAtom = atom<Record<string, string[]>>({});
|
||||
@@ -1,22 +0,0 @@
|
||||
import { atomFamily, atomWithStorage } from "jotai/utils";
|
||||
import { BaseViewDraft } from "@/features/base/types/base.types";
|
||||
|
||||
export type ViewDraftKey = {
|
||||
userId: string;
|
||||
pageId: string;
|
||||
viewId: string;
|
||||
};
|
||||
|
||||
export const viewDraftStorageKey = (k: ViewDraftKey) =>
|
||||
`docmost:base-view-draft:v1:${k.userId}:${k.pageId}:${k.viewId}`;
|
||||
|
||||
// `atomWithStorage` handles JSON serialization, cross-tab sync via the
|
||||
// `storage` event, and lazy first-read out of the box. `atomFamily`'s
|
||||
// comparator ensures the same triple resolves to the same atom instance
|
||||
// across renders, so identity-equality cache hits in Jotai still work.
|
||||
export const viewDraftAtomFamily = atomFamily(
|
||||
(k: ViewDraftKey) =>
|
||||
atomWithStorage<BaseViewDraft | null>(viewDraftStorageKey(k), null),
|
||||
(a, b) =>
|
||||
a.userId === b.userId && a.pageId === b.pageId && a.viewId === b.viewId,
|
||||
);
|
||||
@@ -1,97 +0,0 @@
|
||||
import { Skeleton } from "@mantine/core";
|
||||
import gridClasses from "@/features/base/styles/grid.module.css";
|
||||
import classes from "@/features/base/styles/base-table-skeleton.module.css";
|
||||
|
||||
const ROW_NUMBER_WIDTH = 64;
|
||||
const COLUMN_WIDTH = 180;
|
||||
const DEFAULT_COLUMN_COUNT = 6;
|
||||
const DEFAULT_ROW_COUNT = 10;
|
||||
|
||||
// Deterministic per-cell widths so the skeleton doesn't flicker between
|
||||
// renders. Values are rough normal distribution around 55-85 % of cell.
|
||||
const CELL_WIDTH_RATIOS = [0.78, 0.62, 0.84, 0.55, 0.71, 0.66];
|
||||
const HEADER_WIDTH_RATIOS = [0.42, 0.58, 0.5, 0.64, 0.46, 0.54];
|
||||
|
||||
type BaseTableSkeletonProps = {
|
||||
// Override the rendered shape to match what the eventual content
|
||||
// will be — the inline-embed placeholder passes rows=1, columns=3
|
||||
// (matching the seeded Title + Text 1 + Text 2 with one default
|
||||
// row) so the swap from skeleton to real table doesn't visibly
|
||||
// collapse a large fake table down to a small empty one.
|
||||
rows?: number;
|
||||
columns?: number;
|
||||
};
|
||||
|
||||
export function BaseTableSkeleton({
|
||||
rows = DEFAULT_ROW_COUNT,
|
||||
columns = DEFAULT_COLUMN_COUNT,
|
||||
}: BaseTableSkeletonProps = {}) {
|
||||
const gridTemplateColumns = [
|
||||
`${ROW_NUMBER_WIDTH}px`,
|
||||
...Array.from({ length: columns }, () => `${COLUMN_WIDTH}px`),
|
||||
].join(" ");
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
|
||||
<div className={classes.toolbar}>
|
||||
<div className={classes.toolbarTabs}>
|
||||
<Skeleton height={22} width={44} radius="sm" />
|
||||
<Skeleton height={22} width={64} radius="sm" />
|
||||
<Skeleton height={22} width={48} radius="sm" />
|
||||
</div>
|
||||
<div className={classes.toolbarActions}>
|
||||
<Skeleton height={22} width={22} circle />
|
||||
<Skeleton height={22} width={22} circle />
|
||||
<Skeleton height={22} width={22} circle />
|
||||
<Skeleton height={22} width={22} circle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={classes.gridWrapper}>
|
||||
<div className={classes.grid} style={{ gridTemplateColumns }}>
|
||||
<div className={gridClasses.headerCell}>
|
||||
<div className={classes.headerCellInner}>
|
||||
<Skeleton height={14} width={14} circle />
|
||||
</div>
|
||||
</div>
|
||||
{Array.from({ length: columns }).map((_, colIndex) => (
|
||||
<div key={`h-${colIndex}`} className={gridClasses.headerCell}>
|
||||
<div className={classes.headerCellInner}>
|
||||
<Skeleton height={14} width={14} circle />
|
||||
<Skeleton
|
||||
height={10}
|
||||
width={`${HEADER_WIDTH_RATIOS[colIndex % HEADER_WIDTH_RATIOS.length] * 100}%`}
|
||||
radius="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{Array.from({ length: rows }).map((_, rowIndex) => (
|
||||
<div key={`row-${rowIndex}`} style={{ display: "contents" }}>
|
||||
<div className={gridClasses.cell}>
|
||||
<div className={classes.cellInner}>
|
||||
<Skeleton height={10} width={18} radius="sm" />
|
||||
</div>
|
||||
</div>
|
||||
{Array.from({ length: columns }).map((_, colIndex) => (
|
||||
<div
|
||||
key={`cell-${rowIndex}-${colIndex}`}
|
||||
className={gridClasses.cell}
|
||||
>
|
||||
<div className={classes.cellInner}>
|
||||
<Skeleton
|
||||
height={10}
|
||||
width={`${CELL_WIDTH_RATIOS[(rowIndex + colIndex) % CELL_WIDTH_RATIOS.length] * 100}%`}
|
||||
radius="sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import { GridContainer } from "@/features/base/components/grid/grid-container";
|
||||
import { Table } from "@tanstack/react-table";
|
||||
import {
|
||||
IBase,
|
||||
IBaseRow,
|
||||
IBaseView,
|
||||
} from "@/features/base/types/base.types";
|
||||
|
||||
type BaseTableProps = {
|
||||
base: IBase;
|
||||
rows: IBaseRow[];
|
||||
effectiveView: IBaseView | undefined;
|
||||
table: Table<IBaseRow>;
|
||||
pageId: string;
|
||||
embedded?: boolean;
|
||||
hasNextPage: boolean;
|
||||
isFetchingNextPage: boolean;
|
||||
onFetchNextPage: () => void;
|
||||
onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
|
||||
onAddRow: () => void;
|
||||
onColumnReorder: (columnId: string, finishIndex: number) => void;
|
||||
onResizeEnd: () => void;
|
||||
onRowReorder: (
|
||||
rowId: string,
|
||||
targetRowId: string,
|
||||
dropPosition: "above" | "below",
|
||||
) => void;
|
||||
persistViewConfig: () => void;
|
||||
scrollportEl: HTMLDivElement | null;
|
||||
stickyBandPrelude?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function BaseTable({
|
||||
base,
|
||||
rows: _rows,
|
||||
table,
|
||||
pageId,
|
||||
embedded,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
onFetchNextPage,
|
||||
onCellUpdate,
|
||||
onAddRow,
|
||||
onColumnReorder,
|
||||
onResizeEnd,
|
||||
onRowReorder,
|
||||
scrollportEl,
|
||||
stickyBandPrelude,
|
||||
}: BaseTableProps) {
|
||||
return (
|
||||
<GridContainer
|
||||
table={table}
|
||||
properties={base.properties}
|
||||
onCellUpdate={onCellUpdate}
|
||||
onAddRow={onAddRow}
|
||||
pageId={pageId}
|
||||
onColumnReorder={onColumnReorder}
|
||||
onResizeEnd={onResizeEnd}
|
||||
onRowReorder={onRowReorder}
|
||||
hasNextPage={hasNextPage}
|
||||
isFetchingNextPage={isFetchingNextPage}
|
||||
onFetchNextPage={onFetchNextPage}
|
||||
scrollElement={embedded ? window : scrollportEl}
|
||||
stickyBandPrelude={stickyBandPrelude ?? null}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,328 +0,0 @@
|
||||
import { useEffect, useRef, useState, useCallback, useMemo } from "react";
|
||||
import { ActionIcon, Tooltip, Badge } from "@mantine/core";
|
||||
import { Table } from "@tanstack/react-table";
|
||||
import {
|
||||
IconSortAscending,
|
||||
IconFilter,
|
||||
IconEye,
|
||||
IconDownload,
|
||||
} from "@tabler/icons-react";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import {
|
||||
IBase,
|
||||
IBaseRow,
|
||||
IBaseView,
|
||||
ViewSortConfig,
|
||||
FilterCondition,
|
||||
FilterGroup,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { exportBaseToCsv } from "@/features/base/services/base-service";
|
||||
import { ViewTabs } from "@/features/base/components/views/view-tabs";
|
||||
import { ViewSortConfigPopover } from "@/features/base/components/views/view-sort-config";
|
||||
import { ViewFilterConfigPopover } from "@/features/base/components/views/view-filter-config";
|
||||
import { ViewFieldVisibility } from "@/features/base/components/views/view-field-visibility";
|
||||
import { KanbanGroupByPicker } from "@/features/base/components/views/kanban/kanban-group-by-picker";
|
||||
import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type BaseToolbarProps = {
|
||||
base: IBase;
|
||||
// Effective view — baseline merged with any local draft. Badge counts
|
||||
// and sort/filter popover seed data read from this. The real baseline
|
||||
// only enters via `onDraftSortsChange` / `onDraftFiltersChange`
|
||||
// callbacks defined by the parent.
|
||||
activeView: IBaseView | undefined;
|
||||
views: IBaseView[];
|
||||
table: Table<IBaseRow>;
|
||||
onViewChange: (viewId: string) => void;
|
||||
onAddView?: () => void;
|
||||
onPersistViewConfig: () => void;
|
||||
onDraftSortsChange: (sorts: ViewSortConfig[] | undefined) => void;
|
||||
onDraftFiltersChange: (filter: FilterGroup | undefined) => void;
|
||||
};
|
||||
|
||||
export function BaseToolbar({
|
||||
base,
|
||||
activeView,
|
||||
views,
|
||||
table,
|
||||
onViewChange,
|
||||
onAddView,
|
||||
onPersistViewConfig,
|
||||
onDraftSortsChange,
|
||||
onDraftFiltersChange,
|
||||
}: BaseToolbarProps) {
|
||||
const { t } = useTranslation();
|
||||
const [sortOpened, setSortOpened] = useState(false);
|
||||
const [filterOpened, setFilterOpened] = useState(false);
|
||||
const [fieldsOpened, setFieldsOpened] = useState(false);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
const toolbarRightRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Mantine `<Popover>`'s built-in dismiss handlers don't fire reliably
|
||||
// for the toolbar popovers (same issue that drove the property menu to
|
||||
// use custom listeners in `grid-container.tsx`). Close any open toolbar
|
||||
// popover on outside mousedown AND on ESC.
|
||||
useEffect(() => {
|
||||
if (!sortOpened && !filterOpened && !fieldsOpened) return;
|
||||
const closeAll = () => {
|
||||
setSortOpened(false);
|
||||
setFilterOpened(false);
|
||||
setFieldsOpened(false);
|
||||
};
|
||||
const mouseHandler = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement | null;
|
||||
if (!target) return;
|
||||
if (toolbarRightRef.current?.contains(target)) return;
|
||||
// Ignore clicks that land inside any Mantine popover dropdown
|
||||
// (role=dialog), any Select/Combobox dropdown (role=listbox, the
|
||||
// container; option elements have role=option), or anything
|
||||
// rendered into Mantine's shared portal node. Without these, a
|
||||
// nested Select inside the popover would close the parent.
|
||||
if (target.closest('[role="dialog"]')) return;
|
||||
if (target.closest('[role="listbox"]')) return;
|
||||
if (target.closest('[role="option"]')) return;
|
||||
if (target.closest("[data-mantine-shared-portal-node]")) return;
|
||||
closeAll();
|
||||
};
|
||||
const keyHandler = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") closeAll();
|
||||
};
|
||||
const id = setTimeout(() => {
|
||||
document.addEventListener("mousedown", mouseHandler);
|
||||
}, 0);
|
||||
document.addEventListener("keydown", keyHandler);
|
||||
return () => {
|
||||
clearTimeout(id);
|
||||
document.removeEventListener("mousedown", mouseHandler);
|
||||
document.removeEventListener("keydown", keyHandler);
|
||||
};
|
||||
}, [sortOpened, filterOpened, fieldsOpened]);
|
||||
|
||||
const handleExport = useCallback(async () => {
|
||||
if (exporting) return;
|
||||
setExporting(true);
|
||||
try {
|
||||
await exportBaseToCsv(base.id);
|
||||
} catch (err) {
|
||||
notifications.show({
|
||||
color: "red",
|
||||
message: t("Failed to export CSV"),
|
||||
});
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
}, [base.id, exporting, t]);
|
||||
|
||||
const openToolbar = useCallback((panel: "sort" | "filter" | "fields") => {
|
||||
setSortOpened(panel === "sort" ? (v) => !v : false);
|
||||
setFilterOpened(panel === "filter" ? (v) => !v : false);
|
||||
setFieldsOpened(panel === "fields" ? (v) => !v : false);
|
||||
}, []);
|
||||
|
||||
const sorts = activeView?.config?.sorts ?? [];
|
||||
// Stored view config uses the engine's filter tree. The popover edits
|
||||
// an AND-only flat list; we unwrap the top-level group's children when
|
||||
// reading and rewrap on save.
|
||||
const conditions = useMemo<FilterCondition[]>(() => {
|
||||
const filter = activeView?.config?.filter;
|
||||
if (!filter || filter.op !== "and") return [];
|
||||
return filter.children.filter(
|
||||
(c): c is FilterCondition => !("children" in c),
|
||||
);
|
||||
}, [activeView?.config?.filter]);
|
||||
|
||||
const hiddenFieldCount = useMemo(() => {
|
||||
const cols = table.getAllLeafColumns().filter((col) => col.id !== "__row_number");
|
||||
return cols.filter((col) => col.getCanHide() && !col.getIsVisible()).length;
|
||||
}, [table, table.getState().columnVisibility]);
|
||||
|
||||
const updateViewMutation = useUpdateViewMutation();
|
||||
const isKanban = activeView?.type === "kanban";
|
||||
|
||||
const handleGroupByChange = useCallback(
|
||||
(propertyId: string) => {
|
||||
if (!activeView) return;
|
||||
updateViewMutation.mutate({
|
||||
viewId: activeView.id,
|
||||
pageId: base.id,
|
||||
config: { ...activeView.config, groupByPropertyId: propertyId },
|
||||
});
|
||||
},
|
||||
[activeView, base.id, updateViewMutation],
|
||||
);
|
||||
|
||||
const handleSortsChange = useCallback(
|
||||
(newSorts: ViewSortConfig[]) => {
|
||||
// Normalize empty to undefined so the draft hook can drop the `sorts`
|
||||
// axis (and remove its localStorage entry when both axes go clean).
|
||||
onDraftSortsChange(newSorts.length > 0 ? newSorts : undefined);
|
||||
},
|
||||
[onDraftSortsChange],
|
||||
);
|
||||
|
||||
const handleFiltersChange = useCallback(
|
||||
(newConditions: FilterCondition[]) => {
|
||||
// Wrap the AND-flat popover output into the engine's FilterGroup shape.
|
||||
// Pass `undefined` to drop the filter axis from the draft entirely.
|
||||
const filter: FilterGroup | undefined =
|
||||
newConditions.length > 0
|
||||
? { op: "and", children: newConditions }
|
||||
: undefined;
|
||||
onDraftFiltersChange(filter);
|
||||
},
|
||||
[onDraftFiltersChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={classes.toolbar}>
|
||||
<ViewTabs
|
||||
views={views}
|
||||
activeViewId={activeView?.id}
|
||||
pageId={base.id}
|
||||
onViewChange={onViewChange}
|
||||
onAddView={onAddView}
|
||||
/>
|
||||
|
||||
{isKanban && (
|
||||
<KanbanGroupByPicker
|
||||
properties={base.properties}
|
||||
value={activeView?.config?.groupByPropertyId ?? null}
|
||||
onChange={handleGroupByChange}
|
||||
size="xs"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={classes.toolbarRight} ref={toolbarRightRef}>
|
||||
<Tooltip label={t("Export CSV")}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
color="gray"
|
||||
loading={exporting}
|
||||
onClick={handleExport}
|
||||
>
|
||||
<IconDownload size={16} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
|
||||
<ViewFilterConfigPopover
|
||||
opened={filterOpened}
|
||||
onClose={() => setFilterOpened(false)}
|
||||
conditions={conditions}
|
||||
properties={base.properties}
|
||||
onChange={handleFiltersChange}
|
||||
>
|
||||
<Tooltip label={t("Filter")}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
color={conditions.length > 0 ? "blue" : "gray"}
|
||||
onClick={() => openToolbar("filter")}
|
||||
>
|
||||
<IconFilter size={16} />
|
||||
{conditions.length > 0 && (
|
||||
<Badge
|
||||
size="xs"
|
||||
circle
|
||||
color="blue"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -2,
|
||||
right: -2,
|
||||
padding: 0,
|
||||
width: 14,
|
||||
height: 14,
|
||||
minWidth: 14,
|
||||
fontSize: 9,
|
||||
}}
|
||||
>
|
||||
{conditions.length}
|
||||
</Badge>
|
||||
)}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</ViewFilterConfigPopover>
|
||||
|
||||
<ViewSortConfigPopover
|
||||
opened={sortOpened}
|
||||
onClose={() => setSortOpened(false)}
|
||||
sorts={sorts}
|
||||
properties={base.properties}
|
||||
onChange={handleSortsChange}
|
||||
>
|
||||
<Tooltip label={t("Sort")}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
color={sorts.length > 0 ? "blue" : "gray"}
|
||||
onClick={() => openToolbar("sort")}
|
||||
>
|
||||
<IconSortAscending size={16} />
|
||||
{sorts.length > 0 && (
|
||||
<Badge
|
||||
size="xs"
|
||||
circle
|
||||
color="blue"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -2,
|
||||
right: -2,
|
||||
padding: 0,
|
||||
width: 14,
|
||||
height: 14,
|
||||
minWidth: 14,
|
||||
fontSize: 9,
|
||||
}}
|
||||
>
|
||||
{sorts.length}
|
||||
</Badge>
|
||||
)}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</ViewSortConfigPopover>
|
||||
|
||||
{!isKanban && (
|
||||
<ViewFieldVisibility
|
||||
opened={fieldsOpened}
|
||||
onClose={() => setFieldsOpened(false)}
|
||||
table={table}
|
||||
properties={base.properties}
|
||||
onPersist={onPersistViewConfig}
|
||||
>
|
||||
<Tooltip label={t("Hide fields")}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
color={hiddenFieldCount > 0 ? "blue" : "gray"}
|
||||
onClick={() => openToolbar("fields")}
|
||||
>
|
||||
<IconEye size={16} />
|
||||
{hiddenFieldCount > 0 && (
|
||||
<Badge
|
||||
size="xs"
|
||||
circle
|
||||
color="blue"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -2,
|
||||
right: -2,
|
||||
padding: 0,
|
||||
width: 14,
|
||||
height: 14,
|
||||
minWidth: 14,
|
||||
fontSize: 9,
|
||||
}}
|
||||
>
|
||||
{hiddenFieldCount}
|
||||
</Badge>
|
||||
)}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</ViewFieldVisibility>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import { Group, Button, Tooltip } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type BaseViewDraftBannerProps = {
|
||||
isDirty: boolean;
|
||||
canSave: boolean;
|
||||
onReset: () => void;
|
||||
onSave: () => void;
|
||||
saving: boolean;
|
||||
};
|
||||
|
||||
export function BaseViewDraftBanner({
|
||||
isDirty,
|
||||
canSave,
|
||||
onReset,
|
||||
onSave,
|
||||
saving,
|
||||
}: BaseViewDraftBannerProps) {
|
||||
const { t } = useTranslation();
|
||||
if (!isDirty) return null;
|
||||
return (
|
||||
<Group justify="flex-end" gap="xs" px="md" py={6} wrap="nowrap">
|
||||
<Button variant="subtle" color="gray" size="xs" onClick={onReset}>
|
||||
{t("Reset")}
|
||||
</Button>
|
||||
{canSave && (
|
||||
<Tooltip
|
||||
label={t("Filter and sort changes are visible only to you")}
|
||||
position="bottom"
|
||||
withArrow
|
||||
>
|
||||
<Button
|
||||
variant="light"
|
||||
color="orange"
|
||||
size="xs"
|
||||
onClick={onSave}
|
||||
loading={saving}
|
||||
>
|
||||
{t("Save for everyone")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -1,474 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Text, Stack } from "@mantine/core";
|
||||
import { useAtom } from "jotai";
|
||||
import { IconDatabase } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { reorder } from "@atlaskit/pragmatic-drag-and-drop/reorder";
|
||||
import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
|
||||
import { useBaseQuery } from "@/features/base/queries/base-query";
|
||||
import { useBaseSocket } from "@/features/base/hooks/use-base-socket";
|
||||
import {
|
||||
FilterGroup,
|
||||
ViewSortConfig,
|
||||
} from "@/features/base/types/base.types";
|
||||
import {
|
||||
useBaseRowsQuery,
|
||||
useBaseRowsCountQuery,
|
||||
flattenRows,
|
||||
useCreateRowMutation,
|
||||
useUpdateRowMutation,
|
||||
useReorderRowMutation,
|
||||
} from "@/features/base/queries/base-row-query";
|
||||
import {
|
||||
useCreateViewMutation,
|
||||
useUpdateViewMutation,
|
||||
} from "@/features/base/queries/base-view-query";
|
||||
import { activeViewIdAtomFamily } from "@/features/base/atoms/base-atoms";
|
||||
import { useBaseTable } from "@/features/base/hooks/use-base-table";
|
||||
import { useRowSelection } from "@/features/base/hooks/use-row-selection";
|
||||
import useCurrentUser from "@/features/user/hooks/use-current-user";
|
||||
import { useViewDraft } from "@/features/base/hooks/use-view-draft";
|
||||
import { useSpaceQuery } from "@/features/space/queries/space-query";
|
||||
import { useSpaceAbility } from "@/features/space/permissions/use-space-ability";
|
||||
import {
|
||||
SpaceCaslAction,
|
||||
SpaceCaslSubject,
|
||||
} from "@/features/space/permissions/permissions.type";
|
||||
import { BaseToolbar } from "@/features/base/components/base-toolbar";
|
||||
import { BaseViewDraftBanner } from "@/features/base/components/base-view-draft-banner";
|
||||
import { BaseTableSkeleton } from "@/features/base/components/base-table-skeleton";
|
||||
import { ViewRenderer } from "@/features/base/components/views/view-renderer";
|
||||
import { useRowDetailModal } from "@/features/base/hooks/use-row-detail-modal";
|
||||
import { RowDetailModal } from "@/features/base/components/row-detail-modal/row-detail-modal";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type BaseViewProps = {
|
||||
pageId: string;
|
||||
embedded?: boolean;
|
||||
};
|
||||
|
||||
export function BaseView({ pageId, embedded }: BaseViewProps) {
|
||||
const { t } = useTranslation();
|
||||
// Subscribe to the base's realtime room so other clients' edits,
|
||||
// schema changes, and async-job completions reconcile into our cache.
|
||||
useBaseSocket(pageId);
|
||||
const { data: base, isLoading: baseLoading, error: baseError } =
|
||||
useBaseQuery(pageId);
|
||||
|
||||
const [activeViewId, setActiveViewId] = useAtom(
|
||||
activeViewIdAtomFamily(pageId),
|
||||
) as unknown as [string | null, (val: string | null) => void];
|
||||
|
||||
const views = base?.views ?? [];
|
||||
const activeView = useMemo(() => {
|
||||
if (!views.length) return undefined;
|
||||
return views.find((v) => v.id === activeViewId) ?? views[0];
|
||||
}, [views, activeViewId]);
|
||||
|
||||
const { data: currentUser } = useCurrentUser();
|
||||
const {
|
||||
effectiveFilter,
|
||||
effectiveSorts,
|
||||
isDirty,
|
||||
setFilter: setDraftFilter,
|
||||
setSorts: setDraftSorts,
|
||||
reset: resetDraft,
|
||||
buildPromotedConfig,
|
||||
} = useViewDraft({
|
||||
userId: currentUser?.user.id,
|
||||
pageId,
|
||||
viewId: activeView?.id,
|
||||
baselineFilter: activeView?.config?.filter,
|
||||
baselineSorts: activeView?.config?.sorts,
|
||||
});
|
||||
|
||||
// Render view: baseline merged with any local draft. Passed to
|
||||
// `useBaseTable` (for table state seeding) and to the toolbar (for badge
|
||||
// counts). The real `activeView` is still used as the auto-persist
|
||||
// baseline so drafts can't leak into column-layout writes.
|
||||
const effectiveView = useMemo(
|
||||
() =>
|
||||
activeView
|
||||
? {
|
||||
...activeView,
|
||||
config: {
|
||||
...activeView.config,
|
||||
filter: effectiveFilter,
|
||||
sorts: effectiveSorts,
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
[activeView, effectiveFilter, effectiveSorts],
|
||||
);
|
||||
|
||||
// Effective values drive the row query and the client-side position
|
||||
// sort guard below. The old `activeView.config` reads are no longer the
|
||||
// source of truth once drafts are involved.
|
||||
const activeFilter = effectiveFilter;
|
||||
const activeSorts = effectiveSorts;
|
||||
|
||||
// `useSpaceQuery` is guarded by `enabled: !!spaceId` internally, so
|
||||
// passing `""` when `base` hasn't loaded yet is safe. See
|
||||
// use-history-restore.tsx for the same pattern.
|
||||
const { data: space } = useSpaceQuery(base?.spaceId ?? "");
|
||||
const spaceAbility = useSpaceAbility(space?.membership?.permissions);
|
||||
// Bases are pages — gate save on the same Page subject the rest of
|
||||
// the app uses; the dedicated Base subject was redundant.
|
||||
const canSave = spaceAbility.can(
|
||||
SpaceCaslAction.Edit,
|
||||
SpaceCaslSubject.Page,
|
||||
);
|
||||
|
||||
// Hold the rows query until `base` has loaded. Otherwise the query
|
||||
// fires once with `activeFilter` / `activeSorts` still undefined
|
||||
// (a "bland" list request), then fires a second time as soon as the
|
||||
// active view's config resolves — doubling network traffic on every
|
||||
// base open for any view that has sort or filter.
|
||||
const {
|
||||
data: rowsData,
|
||||
isLoading: rowsLoading,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useBaseRowsQuery(base ? pageId : undefined, activeFilter, activeSorts);
|
||||
|
||||
// Fire the count request alongside the rows query. Not rendered yet —
|
||||
// this mounts the query so its cache is warm for when the toolbar
|
||||
// consumes it. Gate on `currentUser` too so `useViewDraft` has had a
|
||||
// chance to hydrate the persisted draft from localStorage; otherwise
|
||||
// the first post-refresh count would race ahead of the user's saved
|
||||
// filter and fire with baseline-only (or nothing).
|
||||
const canFetchCount = !!base && !!currentUser;
|
||||
useBaseRowsCountQuery(canFetchCount ? pageId : undefined, activeFilter);
|
||||
|
||||
const updateRowMutation = useUpdateRowMutation();
|
||||
const createRowMutation = useCreateRowMutation();
|
||||
const reorderRowMutation = useReorderRowMutation();
|
||||
const createViewMutation = useCreateViewMutation();
|
||||
const updateViewMutation = useUpdateViewMutation();
|
||||
|
||||
useEffect(() => {
|
||||
if (activeView && activeViewId !== activeView.id) {
|
||||
setActiveViewId(activeView.id);
|
||||
}
|
||||
}, [activeView, activeViewId, setActiveViewId]);
|
||||
|
||||
const { clear: clearSelection } = useRowSelection(pageId);
|
||||
useEffect(() => {
|
||||
clearSelection();
|
||||
}, [pageId, activeView?.id, clearSelection]);
|
||||
|
||||
// Track the scrollport element in state (not a ref) so the virtualizer's
|
||||
// `_willUpdate` re-runs when the div attaches on first mount. Reading
|
||||
// `scrollportRef.current` during render would always be null on the
|
||||
// render that mounts the div, and no subsequent render is guaranteed —
|
||||
// particularly after a filter change, where the scrollport remounts via
|
||||
// the `rowsLoading` skeleton path. The virtualizer would then sit on
|
||||
// `scrollElement=null`, render zero items, and only recover when
|
||||
// something else forced a re-render (e.g. switching views).
|
||||
const [scrollportEl, setScrollportEl] = useState<HTMLDivElement | null>(null);
|
||||
|
||||
const rows = useMemo(() => {
|
||||
const flat = flattenRows(rowsData);
|
||||
// When a sort is active, the server returns rows in the requested
|
||||
// sort order via keyset pagination. Re-sorting by `position` on the
|
||||
// client would override that with fractional-index order — visibly
|
||||
// breaking the sort as more pages load. Only apply the position
|
||||
// sort when no view sort is active (where it keeps
|
||||
// optimistically-created and ws-pushed rows in place without a
|
||||
// refetch).
|
||||
if (activeSorts && activeSorts.length > 0) {
|
||||
return flat;
|
||||
}
|
||||
return flat.sort((a, b) =>
|
||||
a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
|
||||
);
|
||||
}, [rowsData, activeSorts]);
|
||||
|
||||
const { table, persistViewConfig } = useBaseTable(base, rows, effectiveView, {
|
||||
baselineConfig: activeView?.config,
|
||||
});
|
||||
|
||||
const isKanban = effectiveView?.type === "kanban";
|
||||
|
||||
const handleCellUpdate = useCallback(
|
||||
(rowId: string, propertyId: string, value: unknown) => {
|
||||
updateRowMutation.mutate({
|
||||
rowId,
|
||||
pageId,
|
||||
cells: { [propertyId]: value },
|
||||
});
|
||||
},
|
||||
[pageId, updateRowMutation],
|
||||
);
|
||||
|
||||
const handleAddRow = useCallback(() => {
|
||||
createRowMutation.mutate({ pageId });
|
||||
}, [pageId, createRowMutation]);
|
||||
|
||||
const handleViewChange = useCallback(
|
||||
(viewId: string) => {
|
||||
setActiveViewId(viewId);
|
||||
},
|
||||
[setActiveViewId],
|
||||
);
|
||||
|
||||
const handleAddView = useCallback(() => {
|
||||
createViewMutation.mutate({
|
||||
pageId,
|
||||
name: t("New view"),
|
||||
type: "table",
|
||||
});
|
||||
}, [pageId, createViewMutation, t]);
|
||||
|
||||
const handleColumnReorder = useCallback(
|
||||
(columnId: string, finishIndex: number) => {
|
||||
const order = table.getState().columnOrder;
|
||||
const startIndex = order.indexOf(columnId);
|
||||
if (startIndex === -1 || startIndex === finishIndex) return;
|
||||
table.setColumnOrder(reorder({ list: order, startIndex, finishIndex }));
|
||||
persistViewConfig();
|
||||
},
|
||||
[table, persistViewConfig],
|
||||
);
|
||||
|
||||
const handleResizeEnd = useCallback(() => {
|
||||
persistViewConfig();
|
||||
}, [persistViewConfig]);
|
||||
|
||||
const handleDraftSortsChange = useCallback(
|
||||
(sorts: ViewSortConfig[] | undefined) => {
|
||||
setDraftSorts(sorts && sorts.length > 0 ? sorts : undefined);
|
||||
},
|
||||
[setDraftSorts],
|
||||
);
|
||||
|
||||
const handleDraftFiltersChange = useCallback(
|
||||
(filter: FilterGroup | undefined) => {
|
||||
setDraftFilter(filter);
|
||||
},
|
||||
[setDraftFilter],
|
||||
);
|
||||
|
||||
const handleSaveDraft = useCallback(async () => {
|
||||
if (!activeView || !base) return;
|
||||
// `buildPromotedConfig` preserves all non-draft baseline fields
|
||||
// (widths/order/visibility) and only overwrites filter/sorts when the
|
||||
// draft has divergent values.
|
||||
const config = buildPromotedConfig(activeView.config);
|
||||
try {
|
||||
await updateViewMutation.mutateAsync({
|
||||
viewId: activeView.id,
|
||||
pageId: base.id,
|
||||
config,
|
||||
});
|
||||
resetDraft();
|
||||
notifications.show({ message: t("View updated for everyone") });
|
||||
} catch {
|
||||
// `useUpdateViewMutation` already shows a red toast on error and
|
||||
// rolls back the optimistic cache; keep the draft so the user can
|
||||
// retry without re-typing.
|
||||
}
|
||||
}, [
|
||||
activeView,
|
||||
base,
|
||||
buildPromotedConfig,
|
||||
resetDraft,
|
||||
t,
|
||||
updateViewMutation,
|
||||
]);
|
||||
|
||||
const { openRowId, openRow, closeRow } = useRowDetailModal();
|
||||
const handleCardClick = useCallback(
|
||||
(rowId: string) => openRow(rowId),
|
||||
[openRow],
|
||||
);
|
||||
|
||||
const handleRowReorder = useCallback(
|
||||
(rowId: string, targetRowId: string, dropPosition: "above" | "below") => {
|
||||
const remainingRows = rows.filter((r) => r.id !== rowId);
|
||||
const targetIndex = remainingRows.findIndex((r) => r.id === targetRowId);
|
||||
if (targetIndex === -1) return;
|
||||
|
||||
let lowerPos: string | null = null;
|
||||
let upperPos: string | null = null;
|
||||
if (dropPosition === "above") {
|
||||
lowerPos =
|
||||
targetIndex > 0 ? remainingRows[targetIndex - 1]?.position : null;
|
||||
upperPos = remainingRows[targetIndex]?.position ?? null;
|
||||
} else {
|
||||
lowerPos = remainingRows[targetIndex]?.position ?? null;
|
||||
upperPos =
|
||||
targetIndex < remainingRows.length - 1
|
||||
? remainingRows[targetIndex + 1]?.position
|
||||
: null;
|
||||
}
|
||||
|
||||
try {
|
||||
let newPosition: string;
|
||||
if (lowerPos && upperPos && lowerPos === upperPos) {
|
||||
newPosition = generateJitteredKeyBetween(lowerPos, null);
|
||||
} else {
|
||||
newPosition = generateJitteredKeyBetween(lowerPos, upperPos);
|
||||
}
|
||||
reorderRowMutation.mutate({ rowId, pageId, position: newPosition });
|
||||
} catch {
|
||||
// Position computation failed — skip silently.
|
||||
}
|
||||
},
|
||||
[rows, pageId, reorderRowMutation],
|
||||
);
|
||||
|
||||
if (baseLoading || rowsLoading) {
|
||||
return <BaseTableSkeleton />;
|
||||
}
|
||||
if (baseError) {
|
||||
return (
|
||||
<Stack align="center" gap="sm" p="xl">
|
||||
<IconDatabase size={40} color="var(--mantine-color-gray-5)" />
|
||||
<Text c="dimmed">{t("Failed to load base")}</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
if (!base) return null;
|
||||
|
||||
const banner = (
|
||||
<BaseViewDraftBanner
|
||||
isDirty={isDirty}
|
||||
canSave={canSave}
|
||||
onReset={resetDraft}
|
||||
onSave={handleSaveDraft}
|
||||
saving={updateViewMutation.isPending}
|
||||
/>
|
||||
);
|
||||
|
||||
const toolbar = (
|
||||
<BaseToolbar
|
||||
base={base}
|
||||
activeView={effectiveView}
|
||||
views={views}
|
||||
table={table}
|
||||
onViewChange={handleViewChange}
|
||||
onAddView={handleAddView}
|
||||
onPersistViewConfig={persistViewConfig}
|
||||
onDraftSortsChange={handleDraftSortsChange}
|
||||
onDraftFiltersChange={handleDraftFiltersChange}
|
||||
/>
|
||||
);
|
||||
|
||||
if (embedded) {
|
||||
// Inline: banner + toolbar live inside the StickyBand (passed via
|
||||
// stickyBandPrelude). The page is the vertical scroll container.
|
||||
return (
|
||||
<>
|
||||
<ViewRenderer
|
||||
base={base}
|
||||
rows={rows}
|
||||
effectiveView={effectiveView}
|
||||
table={table}
|
||||
pageId={pageId}
|
||||
embedded={embedded}
|
||||
hasNextPage={!!hasNextPage}
|
||||
isFetchingNextPage={isFetchingNextPage}
|
||||
onFetchNextPage={fetchNextPage}
|
||||
onCellUpdate={handleCellUpdate}
|
||||
onAddRow={handleAddRow}
|
||||
onColumnReorder={handleColumnReorder}
|
||||
onResizeEnd={handleResizeEnd}
|
||||
onRowReorder={handleRowReorder}
|
||||
onCardClick={handleCardClick}
|
||||
persistViewConfig={persistViewConfig}
|
||||
scrollportEl={scrollportEl}
|
||||
stickyBandPrelude={
|
||||
<>
|
||||
{banner}
|
||||
{toolbar}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<RowDetailModal
|
||||
base={base}
|
||||
rows={rows}
|
||||
openRowId={openRowId}
|
||||
canEdit={canSave}
|
||||
onClose={closeRow}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Standalone: banner + toolbar sit above the .tableScrollport, which
|
||||
// is the vertical scroll container. StickyBand inside contains only
|
||||
// the column-header row.
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", height: "100%" }}
|
||||
>
|
||||
{banner}
|
||||
{toolbar}
|
||||
{isKanban ? (
|
||||
<div
|
||||
ref={setScrollportEl}
|
||||
style={{
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<ViewRenderer
|
||||
base={base}
|
||||
rows={rows}
|
||||
effectiveView={effectiveView}
|
||||
table={table}
|
||||
pageId={pageId}
|
||||
embedded={embedded}
|
||||
hasNextPage={!!hasNextPage}
|
||||
isFetchingNextPage={isFetchingNextPage}
|
||||
onFetchNextPage={fetchNextPage}
|
||||
onCellUpdate={handleCellUpdate}
|
||||
onAddRow={handleAddRow}
|
||||
onColumnReorder={handleColumnReorder}
|
||||
onResizeEnd={handleResizeEnd}
|
||||
onRowReorder={handleRowReorder}
|
||||
onCardClick={handleCardClick}
|
||||
persistViewConfig={persistViewConfig}
|
||||
scrollportEl={scrollportEl}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className={classes.tableScrollport} ref={setScrollportEl}>
|
||||
<ViewRenderer
|
||||
base={base}
|
||||
rows={rows}
|
||||
effectiveView={effectiveView}
|
||||
table={table}
|
||||
pageId={pageId}
|
||||
embedded={embedded}
|
||||
hasNextPage={!!hasNextPage}
|
||||
isFetchingNextPage={isFetchingNextPage}
|
||||
onFetchNextPage={fetchNextPage}
|
||||
onCellUpdate={handleCellUpdate}
|
||||
onAddRow={handleAddRow}
|
||||
onColumnReorder={handleColumnReorder}
|
||||
onResizeEnd={handleResizeEnd}
|
||||
onRowReorder={handleRowReorder}
|
||||
onCardClick={handleCardClick}
|
||||
persistViewConfig={persistViewConfig}
|
||||
scrollportEl={scrollportEl}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<RowDetailModal
|
||||
base={base}
|
||||
rows={rows}
|
||||
openRowId={openRowId}
|
||||
canEdit={canSave}
|
||||
onClose={closeRow}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import { Checkbox } from "@mantine/core";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellCheckboxProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellCheckbox({
|
||||
value,
|
||||
onCommit,
|
||||
}: CellCheckboxProps) {
|
||||
const checked = value === true;
|
||||
|
||||
const handleChange = useCallback(() => {
|
||||
onCommit(!checked);
|
||||
}, [checked, onCommit]);
|
||||
|
||||
return (
|
||||
<div className={cellClasses.checkboxCell} onClick={handleChange}>
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
onChange={() => {}}
|
||||
size="xs"
|
||||
tabIndex={-1}
|
||||
styles={{ input: { cursor: "pointer", pointerEvents: "none" } }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellCreatedAtProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
function formatTimestamp(val: unknown): string {
|
||||
if (typeof val !== "string" || !val) return "";
|
||||
const date = new Date(val);
|
||||
if (isNaN(date.getTime())) return "";
|
||||
return date.toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
export function CellCreatedAt({ value }: CellCreatedAtProps) {
|
||||
const formatted = formatTimestamp(value);
|
||||
|
||||
if (!formatted) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return <span className={cellClasses.dateValue}>{formatted}</span>;
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import { Popover } from "@mantine/core";
|
||||
import { DatePicker } from "@mantine/dates";
|
||||
import {
|
||||
IBaseProperty,
|
||||
DateTypeOptions,
|
||||
} from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellDateProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
function formatDateDisplay(
|
||||
dateStr: string | null | undefined,
|
||||
options: DateTypeOptions | undefined,
|
||||
): string {
|
||||
if (!dateStr) return "";
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
if (isNaN(date.getTime())) return "";
|
||||
|
||||
const months = [
|
||||
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
||||
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
|
||||
];
|
||||
const month = months[date.getMonth()];
|
||||
const day = date.getDate();
|
||||
const year = date.getFullYear();
|
||||
|
||||
let result = `${month} ${day}, ${year}`;
|
||||
|
||||
if (options?.includeTime) {
|
||||
if (options.timeFormat === "24h") {
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
result += ` ${hours}:${minutes}`;
|
||||
} else {
|
||||
let hours = date.getHours();
|
||||
const ampm = hours >= 12 ? "PM" : "AM";
|
||||
hours = hours % 12 || 12;
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
result += ` ${hours}:${minutes} ${ampm}`;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function toISODateString(dateStr: string | null): string | null {
|
||||
if (!dateStr) return null;
|
||||
try {
|
||||
const date = new Date(dateStr);
|
||||
if (isNaN(date.getTime())) return null;
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function CellDate({
|
||||
value,
|
||||
property,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellDateProps) {
|
||||
const typeOptions = property.typeOptions as DateTypeOptions | undefined;
|
||||
const dateStr = typeof value === "string" ? value : null;
|
||||
const pickerValue = toISODateString(dateStr);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(selected: string | null) => {
|
||||
if (selected) {
|
||||
const date = new Date(selected);
|
||||
onCommit(date.toISOString());
|
||||
} else {
|
||||
onCommit(null);
|
||||
}
|
||||
},
|
||||
[onCommit],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
},
|
||||
[onCancel],
|
||||
);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<Popover
|
||||
opened
|
||||
onClose={onCancel}
|
||||
position="bottom-start"
|
||||
width="auto"
|
||||
trapFocus
|
||||
>
|
||||
<Popover.Target>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
<span className={cellClasses.dateValue}>
|
||||
{formatDateDisplay(dateStr, typeOptions)}
|
||||
</span>
|
||||
</div>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p="xs" onKeyDown={handleKeyDown}>
|
||||
<DatePicker
|
||||
value={pickerValue}
|
||||
onChange={handleChange}
|
||||
size="sm"
|
||||
/>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
if (!dateStr) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={cellClasses.dateValue}>
|
||||
{formatDateDisplay(dateStr, typeOptions)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellEmailProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellEmail({
|
||||
value,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellEmailProps) {
|
||||
const displayValue = typeof value === "string" ? value : "";
|
||||
const [draft, setDraft] = useState(displayValue);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const committedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
committedRef.current = false;
|
||||
setDraft(displayValue);
|
||||
requestAnimationFrame(() => {
|
||||
inputRef.current?.focus();
|
||||
inputRef.current?.select();
|
||||
});
|
||||
}
|
||||
}, [isEditing, displayValue]);
|
||||
|
||||
const commitOnce = useCallback(
|
||||
(val: unknown) => {
|
||||
if (committedRef.current) return;
|
||||
committedRef.current = true;
|
||||
onCommit(val);
|
||||
},
|
||||
[onCommit],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
commitOnce(draft || null);
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
},
|
||||
[draft, commitOnce, onCancel],
|
||||
);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
commitOnce(draft || null);
|
||||
}, [draft, commitOnce]);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="email"
|
||||
className={cellClasses.cellInput}
|
||||
value={draft}
|
||||
placeholder="email@example.com"
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!displayValue) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
className={cellClasses.emailLink}
|
||||
href={`mailto:${displayValue}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{displayValue}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,256 +0,0 @@
|
||||
import { useState, useRef, useCallback } from "react";
|
||||
import { Popover, ActionIcon, Text, UnstyledButton } from "@mantine/core";
|
||||
import {
|
||||
IconPaperclip,
|
||||
IconUpload,
|
||||
IconFile,
|
||||
IconX,
|
||||
} from "@tabler/icons-react";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
import { uploadFile } from "@/features/page/services/page-service";
|
||||
import { getFileUrl } from "@/lib/config";
|
||||
|
||||
export type FileValue = {
|
||||
id: string;
|
||||
fileName: string;
|
||||
mimeType?: string;
|
||||
fileSize?: number;
|
||||
// `/api/files/{id}/{fileName}` — same shape the editor's attachment
|
||||
// node view uses. `getFileUrl` strips the `/api/` prefix and
|
||||
// prepends the backend host to produce a fetchable URL. Stored on
|
||||
// upload so the original filename round-trips even if the cell
|
||||
// value is moved to a row where the file's storage path no longer
|
||||
// resolves from the cell's pageId.
|
||||
url?: string;
|
||||
};
|
||||
|
||||
function buildFileUrl(file: Pick<FileValue, "id" | "fileName" | "url">): string {
|
||||
return file.url ?? `/api/files/${file.id}/${encodeURIComponent(file.fileName)}`;
|
||||
}
|
||||
|
||||
type CellFileProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
function formatFileSize(bytes?: number): string {
|
||||
if (!bytes) return "";
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function parseFiles(value: unknown): FileValue[] {
|
||||
if (!Array.isArray(value)) return [];
|
||||
return value.filter(
|
||||
(f): f is FileValue =>
|
||||
f && typeof f === "object" && "id" in f && "fileName" in f,
|
||||
);
|
||||
}
|
||||
|
||||
export function CellFile({
|
||||
value,
|
||||
property,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellFileProps) {
|
||||
const files = parseFiles(value);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleRemove = useCallback(
|
||||
(fileId: string) => {
|
||||
const updated = files.filter((f) => f.id !== fileId);
|
||||
onCommit(updated.length > 0 ? updated : null);
|
||||
},
|
||||
[files, onCommit],
|
||||
);
|
||||
|
||||
const handleUpload = useCallback(
|
||||
async (fileList: FileList | null) => {
|
||||
if (!fileList || fileList.length === 0) return;
|
||||
setUploading(true);
|
||||
|
||||
const newFiles: FileValue[] = [...files];
|
||||
|
||||
// Reuse the page-attachment upload pipeline. A base IS a page
|
||||
// (isBase=true) — the server's /files/upload endpoint accepts the
|
||||
// base's pageId, runs the standard pageAccessService.validateCanEdit
|
||||
// check (which lines up with Base edit at the space-role level per
|
||||
// the casl rules), and stores the attachment via the same flow as
|
||||
// any other page attachment.
|
||||
for (const file of Array.from(fileList)) {
|
||||
try {
|
||||
const attachment = await uploadFile(file, property.pageId);
|
||||
newFiles.push({
|
||||
id: attachment.id,
|
||||
fileName: attachment.fileName,
|
||||
mimeType: attachment.mimeType,
|
||||
fileSize: attachment.fileSize,
|
||||
url: `/api/files/${attachment.id}/${encodeURIComponent(attachment.fileName)}`,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("File upload failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
setUploading(false);
|
||||
onCommit(newFiles.length > 0 ? newFiles : null);
|
||||
},
|
||||
[files, property.pageId, onCommit],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
},
|
||||
[onCancel],
|
||||
);
|
||||
|
||||
const MAX_VISIBLE = 2;
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<Popover
|
||||
opened
|
||||
onClose={onCancel}
|
||||
position="bottom-start"
|
||||
width={280}
|
||||
trapFocus
|
||||
>
|
||||
<Popover.Target>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
<FileList files={files} maxVisible={MAX_VISIBLE} />
|
||||
</div>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={8} onKeyDown={handleKeyDown}>
|
||||
{files.length === 0 && !uploading && (
|
||||
<Text size="xs" c="dimmed" mb={8}>
|
||||
No files attached
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{files.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
padding: "4px 0",
|
||||
borderBottom:
|
||||
"1px solid var(--mantine-color-default-border)",
|
||||
}}
|
||||
>
|
||||
<IconFile
|
||||
size={14}
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
color: "var(--mantine-color-gray-6)",
|
||||
}}
|
||||
/>
|
||||
<a
|
||||
href={getFileUrl(buildFileUrl(file))}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
}}
|
||||
>
|
||||
<Text size="xs" truncate="end" fw={500}>
|
||||
{file.fileName}
|
||||
</Text>
|
||||
{file.fileSize != null && (
|
||||
<Text size="xs" c="dimmed">
|
||||
{formatFileSize(file.fileSize)}
|
||||
</Text>
|
||||
)}
|
||||
</a>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="xs"
|
||||
onClick={() => handleRemove(file.id)}
|
||||
>
|
||||
<IconX size={12} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
style={{ display: "none" }}
|
||||
onChange={(e) => {
|
||||
handleUpload(e.target.files);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
|
||||
<UnstyledButton
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploading}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
padding: "6px 0",
|
||||
marginTop: 4,
|
||||
fontSize: "var(--mantine-font-size-xs)",
|
||||
color: uploading
|
||||
? "var(--mantine-color-gray-5)"
|
||||
: "var(--mantine-color-blue-6)",
|
||||
}}
|
||||
>
|
||||
<IconUpload size={14} />
|
||||
{uploading ? "Uploading..." : "Add file"}
|
||||
</UnstyledButton>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
if (files.length === 0) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return <FileList files={files} maxVisible={MAX_VISIBLE} />;
|
||||
}
|
||||
|
||||
function FileList({
|
||||
files,
|
||||
maxVisible,
|
||||
}: {
|
||||
files: FileValue[];
|
||||
maxVisible: number;
|
||||
}) {
|
||||
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}>
|
||||
<IconPaperclip size={12} />
|
||||
{file.fileName}
|
||||
</span>
|
||||
))}
|
||||
{overflow > 0 && (
|
||||
<span className={cellClasses.overflowCount}>+{overflow}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import { Badge, Tooltip } from "@mantine/core";
|
||||
import {
|
||||
IBaseProperty,
|
||||
isFormulaErrorCell,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { CellText } from "./cell-text";
|
||||
import { CellNumber } from "./cell-number";
|
||||
import { CellCheckbox } from "./cell-checkbox";
|
||||
import { CellDate } from "./cell-date";
|
||||
|
||||
type Props = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellFormula(props: Props) {
|
||||
const { value, property } = props;
|
||||
if (isFormulaErrorCell(value)) {
|
||||
return (
|
||||
<Tooltip label={`${value.__err}: ${value.msg}`}>
|
||||
<Badge color="red" variant="light" size="sm">
|
||||
#ERROR
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
const opts = (property.typeOptions ?? {}) as { resultType?: string };
|
||||
const resultType = opts.resultType ?? "null";
|
||||
const readOnlyProps = { ...props, isEditing: false };
|
||||
if (resultType === "number") return <CellNumber {...readOnlyProps} />;
|
||||
if (resultType === "boolean") return <CellCheckbox {...readOnlyProps} />;
|
||||
if (resultType === "date") return <CellDate {...readOnlyProps} />;
|
||||
return <CellText {...readOnlyProps} />;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellLastEditedAtProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
function formatTimestamp(val: unknown): string {
|
||||
if (typeof val !== "string" || !val) return "";
|
||||
const date = new Date(val);
|
||||
if (isNaN(date.getTime())) return "";
|
||||
return date.toLocaleDateString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
export function CellLastEditedAt({ value }: CellLastEditedAtProps) {
|
||||
const formatted = formatTimestamp(value);
|
||||
|
||||
if (!formatted) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return <span className={cellClasses.dateValue}>{formatted}</span>;
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import { Group } from "@mantine/core";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellLastEditedByProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellLastEditedBy({ value }: CellLastEditedByProps) {
|
||||
const userId = typeof value === "string" ? value : null;
|
||||
|
||||
const { data: membersData } = useWorkspaceMembersQuery({ limit: 100 });
|
||||
|
||||
const user = useMemo(() => {
|
||||
if (!userId || !membersData?.items) return null;
|
||||
return membersData.items.find((u) => u.id === userId) ?? null;
|
||||
}, [userId, membersData?.items]);
|
||||
|
||||
if (!userId) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Group gap={6} wrap="nowrap" style={{ overflow: "hidden" }}>
|
||||
<CustomAvatar
|
||||
avatarUrl={user?.avatarUrl ?? ""}
|
||||
name={user?.name ?? ""}
|
||||
size={20}
|
||||
radius="xl"
|
||||
/>
|
||||
{user?.name && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: "var(--mantine-font-size-sm)",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{user.name}
|
||||
</span>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
@@ -1,260 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
||||
import { Popover, TextInput } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
IBaseProperty,
|
||||
SelectTypeOptions,
|
||||
Choice,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { choiceColor } from "@/features/base/components/cells/choice-color";
|
||||
import { useUpdatePropertyMutation } from "@/features/base/queries/base-property-query";
|
||||
import { v7 as uuid7 } from "uuid";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
|
||||
|
||||
const CHOICE_COLORS = [
|
||||
"gray", "red", "pink", "grape", "violet", "indigo",
|
||||
"blue", "cyan", "teal", "green", "lime", "yellow", "orange",
|
||||
];
|
||||
|
||||
type NavItem =
|
||||
| { kind: "choice"; choice: Choice }
|
||||
| { kind: "add" };
|
||||
|
||||
type CellMultiSelectProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellMultiSelect({
|
||||
value,
|
||||
property,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellMultiSelectProps) {
|
||||
const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
|
||||
const choices = typeOptions?.choices ?? [];
|
||||
const selectedIds = Array.isArray(value) ? (value as string[]) : [];
|
||||
const selectedSet = new Set(selectedIds);
|
||||
|
||||
const selectedChoices = choices.filter((c) => selectedSet.has(c.id));
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
setSearch("");
|
||||
requestAnimationFrame(() => searchRef.current?.focus());
|
||||
}
|
||||
}, [isEditing]);
|
||||
|
||||
const filteredChoices = search
|
||||
? choices.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
|
||||
: choices;
|
||||
|
||||
const handleToggle = useCallback(
|
||||
(choice: Choice) => {
|
||||
const newIds = selectedSet.has(choice.id)
|
||||
? selectedIds.filter((id) => id !== choice.id)
|
||||
: [...selectedIds, choice.id];
|
||||
onCommit(newIds);
|
||||
},
|
||||
[selectedIds, selectedSet, onCommit],
|
||||
);
|
||||
|
||||
const updatePropertyMutation = useUpdatePropertyMutation();
|
||||
|
||||
const trimmedSearch = search.trim();
|
||||
const hasExactMatch = useMemo(
|
||||
() =>
|
||||
trimmedSearch.length > 0 &&
|
||||
choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
|
||||
[choices, trimmedSearch],
|
||||
);
|
||||
const showAddOption = trimmedSearch.length > 0 && !hasExactMatch;
|
||||
|
||||
const addOptionColor = useMemo(
|
||||
() => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
|
||||
[choices.length],
|
||||
);
|
||||
|
||||
const navItems = useMemo<NavItem[]>(
|
||||
() => [
|
||||
...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
|
||||
...(showAddOption ? [{ kind: "add" as const }] : []),
|
||||
],
|
||||
[filteredChoices, showAddOption],
|
||||
);
|
||||
|
||||
const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
|
||||
useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
|
||||
|
||||
const handleAddOption = useCallback(() => {
|
||||
if (!trimmedSearch) return;
|
||||
const newChoice: Choice = {
|
||||
id: uuid7(),
|
||||
name: trimmedSearch,
|
||||
color: addOptionColor,
|
||||
};
|
||||
const newChoices = [...choices, newChoice];
|
||||
updatePropertyMutation.mutate({
|
||||
propertyId: property.id,
|
||||
pageId: property.pageId,
|
||||
typeOptions: {
|
||||
...typeOptions,
|
||||
choices: newChoices,
|
||||
choiceOrder: newChoices.map((c) => c.id),
|
||||
},
|
||||
});
|
||||
onCommit([...selectedIds, newChoice.id]);
|
||||
setSearch("");
|
||||
}, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, selectedIds, onCommit]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
if (handleNavKey(e)) return;
|
||||
if (e.key === "Enter") {
|
||||
if (activeIndex >= 0 && activeIndex < navItems.length) {
|
||||
e.preventDefault();
|
||||
const item = navItems[activeIndex];
|
||||
if (item.kind === "choice") handleToggle(item.choice);
|
||||
else handleAddOption();
|
||||
return;
|
||||
}
|
||||
if (showAddOption) {
|
||||
e.preventDefault();
|
||||
handleAddOption();
|
||||
}
|
||||
}
|
||||
},
|
||||
[onCancel, handleNavKey, activeIndex, navItems, handleToggle, handleAddOption, showAddOption],
|
||||
);
|
||||
|
||||
const MAX_VISIBLE = 3;
|
||||
|
||||
if (isEditing) {
|
||||
const addOptionIdx = filteredChoices.length;
|
||||
return (
|
||||
<Popover
|
||||
opened
|
||||
onClose={onCancel}
|
||||
position="bottom-start"
|
||||
width={220}
|
||||
trapFocus
|
||||
>
|
||||
<Popover.Target>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
<BadgeList choices={selectedChoices} maxVisible={MAX_VISIBLE} />
|
||||
</div>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={4}>
|
||||
<TextInput
|
||||
ref={searchRef}
|
||||
size="xs"
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
mb={4}
|
||||
/>
|
||||
<div className={cellClasses.selectDropdown}>
|
||||
{filteredChoices.map((choice, idx) => {
|
||||
const isSelected = selectedSet.has(choice.id);
|
||||
return (
|
||||
<div
|
||||
key={choice.id}
|
||||
ref={setOptionRef(idx)}
|
||||
className={clsx(
|
||||
cellClasses.selectOption,
|
||||
isSelected && cellClasses.selectOptionActive,
|
||||
idx === activeIndex && cellClasses.selectOptionKeyboardActive,
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(idx)}
|
||||
onMouseDown={(e) => {
|
||||
// Keep focus on the search input so click doesn't blur + close popover.
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={() => handleToggle(choice)}
|
||||
>
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(choice.color)}
|
||||
>
|
||||
{choice.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{showAddOption && (
|
||||
<div
|
||||
ref={setOptionRef(addOptionIdx)}
|
||||
className={clsx(
|
||||
cellClasses.addOptionRow,
|
||||
addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(addOptionIdx)}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={handleAddOption}
|
||||
>
|
||||
<span className={cellClasses.addOptionLabel}>Add option:</span>
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(addOptionColor)}
|
||||
>
|
||||
{trimmedSearch}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
if (selectedChoices.length === 0) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return <BadgeList choices={selectedChoices} maxVisible={MAX_VISIBLE} />;
|
||||
}
|
||||
|
||||
function BadgeList({
|
||||
choices,
|
||||
maxVisible,
|
||||
}: {
|
||||
choices: Choice[];
|
||||
maxVisible: number;
|
||||
}) {
|
||||
const visible = choices.slice(0, maxVisible);
|
||||
const overflow = choices.length - maxVisible;
|
||||
|
||||
return (
|
||||
<div className={cellClasses.badgeGroup}>
|
||||
{visible.map((choice) => (
|
||||
<span
|
||||
key={choice.id}
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(choice.color)}
|
||||
>
|
||||
{choice.name}
|
||||
</span>
|
||||
))}
|
||||
{overflow > 0 && (
|
||||
<span className={cellClasses.overflowCount}>+{overflow}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import {
|
||||
IBaseProperty,
|
||||
NumberTypeOptions,
|
||||
} from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellNumberProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
function formatNumber(
|
||||
val: number | null | undefined,
|
||||
options: NumberTypeOptions | undefined,
|
||||
): string {
|
||||
if (val == null) return "";
|
||||
const precision = options?.precision ?? 0;
|
||||
const format = options?.format ?? "plain";
|
||||
|
||||
switch (format) {
|
||||
case "currency":
|
||||
return `${options?.currencySymbol ?? "$"}${val.toFixed(precision)}`;
|
||||
case "percent":
|
||||
return `${val.toFixed(precision)}%`;
|
||||
case "progress":
|
||||
return `${Math.min(100, Math.max(0, val)).toFixed(0)}%`;
|
||||
default:
|
||||
return precision > 0 ? val.toFixed(precision) : String(val);
|
||||
}
|
||||
}
|
||||
|
||||
export function CellNumber({
|
||||
value,
|
||||
property,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellNumberProps) {
|
||||
const numValue = typeof value === "number" ? value : null;
|
||||
const typeOptions = property.typeOptions as NumberTypeOptions | undefined;
|
||||
const [draft, setDraft] = useState(numValue != null ? String(numValue) : "");
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const committedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
committedRef.current = false;
|
||||
setDraft(numValue != null ? String(numValue) : "");
|
||||
requestAnimationFrame(() => {
|
||||
inputRef.current?.focus();
|
||||
inputRef.current?.select();
|
||||
});
|
||||
}
|
||||
}, [isEditing, numValue]);
|
||||
|
||||
const parseDraft = useCallback(() => {
|
||||
const parsed = draft === "" ? null : Number(draft);
|
||||
return parsed != null && isNaN(parsed) ? null : parsed;
|
||||
}, [draft]);
|
||||
|
||||
const commitOnce = useCallback(
|
||||
(val: unknown) => {
|
||||
if (committedRef.current) return;
|
||||
committedRef.current = true;
|
||||
onCommit(val);
|
||||
},
|
||||
[onCommit],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
commitOnce(parseDraft());
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
},
|
||||
[parseDraft, commitOnce, onCancel],
|
||||
);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
commitOnce(parseDraft());
|
||||
}, [parseDraft, commitOnce]);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
className={cellClasses.cellInput}
|
||||
style={{ textAlign: "right" }}
|
||||
value={draft}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "" || v === "-" || /^-?\d*\.?\d*$/.test(v)) {
|
||||
setDraft(v);
|
||||
}
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (numValue == null) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={cellClasses.numberValue}>
|
||||
{formatNumber(numValue, typeOptions)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,268 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
||||
import { Popover, ActionIcon, Text } from "@mantine/core";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { IconX, IconFileDescription } from "@tabler/icons-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import clsx from "clsx";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import { useResolvedPages } from "@/features/base/queries/base-page-resolver-query";
|
||||
import { useBaseQuery } from "@/features/base/queries/base-query";
|
||||
import { searchSuggestions } from "@/features/search/services/search-service";
|
||||
import { buildPageUrl } from "@/features/page/page.utils";
|
||||
import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellPageProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
type PageSuggestion = {
|
||||
id: string;
|
||||
slugId: string;
|
||||
title: string | null;
|
||||
icon: string | null;
|
||||
spaceId: string;
|
||||
space?: { id: string; slug: string; name: string } | null;
|
||||
};
|
||||
|
||||
function parsePageId(value: unknown): string | null {
|
||||
if (typeof value === "string" && value.length > 0) return value;
|
||||
return null;
|
||||
}
|
||||
|
||||
export function CellPage({
|
||||
value,
|
||||
property,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellPageProps) {
|
||||
const pageId = parsePageId(value);
|
||||
const { data: base } = useBaseQuery(property.pageId);
|
||||
|
||||
const ids = useMemo(() => (pageId ? [pageId] : []), [pageId]);
|
||||
const { pages } = useResolvedPages(ids);
|
||||
const resolvedPage = pageId ? pages.get(pageId) : undefined;
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<PagePicker
|
||||
pageId={pageId}
|
||||
resolvedPage={resolvedPage ?? null}
|
||||
spaceId={base?.spaceId}
|
||||
onCommit={onCommit}
|
||||
onCancel={onCancel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!pageId) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
if (resolvedPage === undefined) {
|
||||
// Still resolving — render an empty pill-shaped placeholder to avoid
|
||||
// the "Page not found" flicker on initial load.
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
if (resolvedPage === null) {
|
||||
return (
|
||||
<span className={cellClasses.pageMissing}>
|
||||
<IconFileDescription size={14} />
|
||||
<span>Page not found</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <PagePill page={resolvedPage} />;
|
||||
}
|
||||
|
||||
type PillPage = {
|
||||
slugId: string;
|
||||
title: string | null;
|
||||
icon: string | null;
|
||||
space: { slug: string } | null;
|
||||
};
|
||||
|
||||
function PagePill({ page }: { page: PillPage }) {
|
||||
const title = page.title || "Untitled";
|
||||
const spaceSlug = page.space?.slug ?? "";
|
||||
const url = buildPageUrl(spaceSlug, page.slugId, title);
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={url}
|
||||
className={cellClasses.pagePill}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onDoubleClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{page.icon ? (
|
||||
<span className={cellClasses.pagePillIcon}>{page.icon}</span>
|
||||
) : (
|
||||
<IconFileDescription size={14} className={cellClasses.pagePillIconFallback} />
|
||||
)}
|
||||
<span className={cellClasses.pagePillText}>{title}</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
type PagePickerProps = {
|
||||
pageId: string | null;
|
||||
resolvedPage: { id: string; slugId: string; title: string | null; icon: string | null; space: { id: string; slug: string; name: string } | null } | null;
|
||||
spaceId?: string;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
function PagePicker({
|
||||
pageId,
|
||||
resolvedPage,
|
||||
spaceId,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: PagePickerProps) {
|
||||
const [search, setSearch] = useState("");
|
||||
const [debouncedSearch] = useDebouncedValue(search, 250);
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
requestAnimationFrame(() => searchRef.current?.focus());
|
||||
}, []);
|
||||
|
||||
const trimmed = debouncedSearch.trim();
|
||||
const { data: suggestions = [] } = useQuery({
|
||||
queryKey: ["bases", "pages", "search", trimmed, spaceId ?? ""],
|
||||
queryFn: async () => {
|
||||
const res = await searchSuggestions({
|
||||
query: trimmed,
|
||||
includePages: true,
|
||||
spaceId,
|
||||
limit: trimmed ? 25 : 5,
|
||||
});
|
||||
return (res.pages ?? []) as PageSuggestion[];
|
||||
},
|
||||
staleTime: 15_000,
|
||||
});
|
||||
|
||||
const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
|
||||
useListKeyboardNav(suggestions.length, [debouncedSearch]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(id: string) => {
|
||||
onCommit(id === pageId ? null : id);
|
||||
},
|
||||
[pageId, onCommit],
|
||||
);
|
||||
|
||||
const handleRemove = useCallback(() => {
|
||||
onCommit(null);
|
||||
}, [onCommit]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
if (handleNavKey(e)) return;
|
||||
if (e.key === "Enter") {
|
||||
if (activeIndex < 0 || activeIndex >= suggestions.length) return;
|
||||
e.preventDefault();
|
||||
handleSelect(suggestions[activeIndex].id);
|
||||
}
|
||||
},
|
||||
[onCancel, handleNavKey, activeIndex, suggestions, handleSelect],
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover opened onClose={onCancel} position="bottom-start" width={320} trapFocus>
|
||||
<Popover.Target>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
{resolvedPage ? <PagePill page={resolvedPage} /> : <span className={cellClasses.emptyValue} />}
|
||||
</div>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={0}>
|
||||
<div className={cellClasses.personTagArea}>
|
||||
{pageId && resolvedPage && (
|
||||
<span className={cellClasses.personTag}>
|
||||
{resolvedPage.icon ? (
|
||||
<span>{resolvedPage.icon}</span>
|
||||
) : (
|
||||
<IconFileDescription size={14} />
|
||||
)}
|
||||
<span className={cellClasses.personTagName}>
|
||||
{resolvedPage.title || "Untitled"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className={cellClasses.personTagRemove}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemove();
|
||||
}}
|
||||
>
|
||||
<IconX size={10} />
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
ref={searchRef}
|
||||
className={cellClasses.personTagInput}
|
||||
placeholder={pageId ? "" : "Search for a page..."}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={cellClasses.personDropdownDivider} />
|
||||
<div className={cellClasses.selectDropdown}>
|
||||
{suggestions.length === 0 && (
|
||||
<div className={cellClasses.personDropdownHint}>
|
||||
{trimmed ? "No pages found" : "No pages yet"}
|
||||
</div>
|
||||
)}
|
||||
{suggestions.map((page, idx) => {
|
||||
const isSelected = page.id === pageId;
|
||||
return (
|
||||
<div
|
||||
key={page.id}
|
||||
ref={setOptionRef(idx)}
|
||||
className={clsx(
|
||||
cellClasses.selectOption,
|
||||
isSelected && cellClasses.selectOptionActive,
|
||||
idx === activeIndex && cellClasses.selectOptionKeyboardActive,
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(idx)}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => handleSelect(page.id)}
|
||||
>
|
||||
{page.icon ? (
|
||||
<span>{page.icon}</span>
|
||||
) : (
|
||||
<IconFileDescription size={14} />
|
||||
)}
|
||||
<span className={cellClasses.personOptionName}>
|
||||
{page.title || "Untitled"}
|
||||
</span>
|
||||
{page.space?.name && (
|
||||
<Text size="xs" c="dimmed" ml="auto" truncate>
|
||||
{page.space.name}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,263 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
||||
import { Popover } from "@mantine/core";
|
||||
import { IconX } from "@tabler/icons-react";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
IBaseProperty,
|
||||
PersonTypeOptions,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
|
||||
|
||||
type CellPersonProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellPerson({
|
||||
value,
|
||||
property,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellPersonProps) {
|
||||
const allowMultiple =
|
||||
(property.typeOptions as PersonTypeOptions)?.allowMultiple !== false;
|
||||
|
||||
const personIds = Array.isArray(value)
|
||||
? (value as string[])
|
||||
: typeof value === "string"
|
||||
? [value]
|
||||
: [];
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
setSearch("");
|
||||
requestAnimationFrame(() => searchRef.current?.focus());
|
||||
}
|
||||
}, [isEditing]);
|
||||
|
||||
const { data: membersData } = useWorkspaceMembersQuery({ limit: 100 });
|
||||
const members = membersData?.items ?? [];
|
||||
const memberMap = useMemo(() => {
|
||||
const map = new Map<string, (typeof members)[0]>();
|
||||
for (const m of members) map.set(m.id, m);
|
||||
return map;
|
||||
}, [members]);
|
||||
|
||||
const filteredMembers = search
|
||||
? members.filter(
|
||||
(m) =>
|
||||
m.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(m.email && m.email.toLowerCase().includes(search.toLowerCase())),
|
||||
)
|
||||
: members;
|
||||
|
||||
const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
|
||||
useListKeyboardNav(filteredMembers.length, [search, isEditing]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(memberId: string) => {
|
||||
if (allowMultiple) {
|
||||
// Multi mode: toggle add/remove
|
||||
if (personIds.includes(memberId)) {
|
||||
const newIds = personIds.filter((id) => id !== memberId);
|
||||
onCommit(newIds.length > 0 ? newIds : null);
|
||||
} else {
|
||||
onCommit([...personIds, memberId]);
|
||||
}
|
||||
} else {
|
||||
// Single mode: replace or clear
|
||||
if (personIds.includes(memberId)) {
|
||||
onCommit(null);
|
||||
} else {
|
||||
onCommit(memberId);
|
||||
}
|
||||
}
|
||||
},
|
||||
[allowMultiple, personIds, onCommit],
|
||||
);
|
||||
|
||||
const handleRemove = useCallback(
|
||||
(memberId: string) => {
|
||||
if (allowMultiple) {
|
||||
const newIds = personIds.filter((id) => id !== memberId);
|
||||
onCommit(newIds.length > 0 ? newIds : null);
|
||||
} else {
|
||||
onCommit(null);
|
||||
}
|
||||
},
|
||||
[allowMultiple, personIds, onCommit],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
if (handleNavKey(e)) return;
|
||||
if (e.key === "Enter") {
|
||||
if (activeIndex < 0 || activeIndex >= filteredMembers.length) return;
|
||||
e.preventDefault();
|
||||
handleSelect(filteredMembers[activeIndex].id);
|
||||
return;
|
||||
}
|
||||
if (e.key === "Backspace" && search === "" && personIds.length > 0) {
|
||||
e.preventDefault();
|
||||
handleRemove(personIds[personIds.length - 1]);
|
||||
}
|
||||
},
|
||||
[onCancel, handleNavKey, activeIndex, filteredMembers, handleSelect, search, personIds, handleRemove],
|
||||
);
|
||||
|
||||
const selectedSet = new Set(personIds);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<Popover
|
||||
opened
|
||||
onClose={onCancel}
|
||||
position="bottom-start"
|
||||
width={300}
|
||||
trapFocus
|
||||
>
|
||||
<Popover.Target>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
<PersonReadList personIds={personIds} memberMap={memberMap} />
|
||||
</div>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={0}>
|
||||
{/* Tag input area */}
|
||||
<div className={cellClasses.personTagArea}>
|
||||
{personIds.map((id) => {
|
||||
const member = memberMap.get(id);
|
||||
const name = member?.name ?? id.substring(0, 8);
|
||||
return (
|
||||
<span key={id} className={cellClasses.personTag}>
|
||||
<CustomAvatar
|
||||
avatarUrl={member?.avatarUrl ?? ""}
|
||||
name={name}
|
||||
size={18}
|
||||
radius="xl"
|
||||
/>
|
||||
<span className={cellClasses.personTagName}>{name}</span>
|
||||
<button
|
||||
type="button"
|
||||
className={cellClasses.personTagRemove}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemove(id);
|
||||
}}
|
||||
>
|
||||
<IconX size={10} />
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
<input
|
||||
ref={searchRef}
|
||||
className={cellClasses.personTagInput}
|
||||
placeholder={personIds.length === 0 ? "Search for a person..." : ""}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dropdown */}
|
||||
<div className={cellClasses.personDropdownDivider} />
|
||||
{allowMultiple && (
|
||||
<div className={cellClasses.personDropdownHint}>
|
||||
Select as many as you like
|
||||
</div>
|
||||
)}
|
||||
<div className={cellClasses.selectDropdown}>
|
||||
{filteredMembers.map((member, idx) => {
|
||||
const isSelected = selectedSet.has(member.id);
|
||||
return (
|
||||
<div
|
||||
key={member.id}
|
||||
ref={setOptionRef(idx)}
|
||||
className={clsx(
|
||||
cellClasses.selectOption,
|
||||
isSelected && cellClasses.selectOptionActive,
|
||||
idx === activeIndex && cellClasses.selectOptionKeyboardActive,
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(idx)}
|
||||
onMouseDown={(e) => {
|
||||
// Keep focus on the search input so click doesn't blur + close popover.
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={() => handleSelect(member.id)}
|
||||
>
|
||||
<CustomAvatar
|
||||
avatarUrl={member.avatarUrl}
|
||||
name={member.name}
|
||||
size={24}
|
||||
radius="xl"
|
||||
/>
|
||||
<span className={cellClasses.personOptionName}>
|
||||
{member.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{filteredMembers.length === 0 && (
|
||||
<div className={cellClasses.personDropdownHint}>
|
||||
No members found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
if (personIds.length === 0) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return <PersonReadList personIds={personIds} memberMap={memberMap} />;
|
||||
}
|
||||
|
||||
function PersonReadList({
|
||||
personIds,
|
||||
memberMap,
|
||||
}: {
|
||||
personIds: string[];
|
||||
memberMap: Map<
|
||||
string,
|
||||
{ id: string; name: string; email?: string; avatarUrl?: string }
|
||||
>;
|
||||
}) {
|
||||
return (
|
||||
<div className={cellClasses.personGroup}>
|
||||
{personIds.map((id) => {
|
||||
const member = memberMap.get(id);
|
||||
const name = member?.name ?? id.substring(0, 8);
|
||||
return (
|
||||
<div key={id} className={cellClasses.personRow}>
|
||||
<CustomAvatar
|
||||
avatarUrl={member?.avatarUrl ?? ""}
|
||||
name={name}
|
||||
size={20}
|
||||
radius="xl"
|
||||
/>
|
||||
<span className={cellClasses.personName}>{name}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import { CellText } from "./cell-text";
|
||||
import { CellNumber } from "./cell-number";
|
||||
import { CellSelect } from "./cell-select";
|
||||
import { CellStatus } from "./cell-status";
|
||||
import { CellMultiSelect } from "./cell-multi-select";
|
||||
import { CellDate } from "./cell-date";
|
||||
import { CellCheckbox } from "./cell-checkbox";
|
||||
import { CellUrl } from "./cell-url";
|
||||
import { CellEmail } from "./cell-email";
|
||||
import { CellPerson } from "./cell-person";
|
||||
import { CellFile } from "./cell-file";
|
||||
import { CellPage } from "./cell-page";
|
||||
import { CellCreatedAt } from "./cell-created-at";
|
||||
import { CellLastEditedAt } from "./cell-last-edited-at";
|
||||
import { CellLastEditedBy } from "./cell-last-edited-by";
|
||||
import { CellFormula } from "./cell-formula";
|
||||
|
||||
export type CellComponentProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export const cellComponents: Record<
|
||||
string,
|
||||
React.ComponentType<CellComponentProps>
|
||||
> = {
|
||||
text: CellText,
|
||||
number: CellNumber,
|
||||
select: CellSelect,
|
||||
status: CellStatus,
|
||||
multiSelect: CellMultiSelect,
|
||||
date: CellDate,
|
||||
checkbox: CellCheckbox,
|
||||
url: CellUrl,
|
||||
email: CellEmail,
|
||||
person: CellPerson,
|
||||
file: CellFile,
|
||||
page: CellPage,
|
||||
createdAt: CellCreatedAt,
|
||||
lastEditedAt: CellLastEditedAt,
|
||||
lastEditedBy: CellLastEditedBy,
|
||||
formula: CellFormula,
|
||||
};
|
||||
|
||||
type CellRendererProps = CellComponentProps;
|
||||
|
||||
export function CellRenderer(props: CellRendererProps) {
|
||||
const Component = cellComponents[props.property.type];
|
||||
if (!Component) return null;
|
||||
return <Component {...props} />;
|
||||
}
|
||||
@@ -1,242 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
||||
import { Popover, TextInput } from "@mantine/core";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
IBaseProperty,
|
||||
SelectTypeOptions,
|
||||
Choice,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { choiceColor } from "@/features/base/components/cells/choice-color";
|
||||
import { useUpdatePropertyMutation } from "@/features/base/queries/base-property-query";
|
||||
import { v7 as uuid7 } from "uuid";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
|
||||
|
||||
const CHOICE_COLORS = [
|
||||
"gray", "red", "pink", "grape", "violet", "indigo",
|
||||
"blue", "cyan", "teal", "green", "lime", "yellow", "orange",
|
||||
];
|
||||
|
||||
type NavItem =
|
||||
| { kind: "choice"; choice: Choice }
|
||||
| { kind: "add" };
|
||||
|
||||
type CellSelectProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellSelect({
|
||||
value,
|
||||
property,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellSelectProps) {
|
||||
const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
|
||||
const choices = typeOptions?.choices ?? [];
|
||||
const selectedId = typeof value === "string" ? value : null;
|
||||
const selectedChoice = choices.find((c) => c.id === selectedId);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
setSearch("");
|
||||
requestAnimationFrame(() => searchRef.current?.focus());
|
||||
}
|
||||
}, [isEditing]);
|
||||
|
||||
const filteredChoices = search
|
||||
? choices.filter((c) =>
|
||||
c.name.toLowerCase().includes(search.toLowerCase()),
|
||||
)
|
||||
: choices;
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(choice: Choice) => {
|
||||
onCommit(choice.id === selectedId ? null : choice.id);
|
||||
},
|
||||
[selectedId, onCommit],
|
||||
);
|
||||
|
||||
const updatePropertyMutation = useUpdatePropertyMutation();
|
||||
|
||||
const trimmedSearch = search.trim();
|
||||
const hasExactMatch = useMemo(
|
||||
() =>
|
||||
trimmedSearch.length > 0 &&
|
||||
choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
|
||||
[choices, trimmedSearch],
|
||||
);
|
||||
const showAddOption = trimmedSearch.length > 0 && !hasExactMatch;
|
||||
|
||||
const addOptionColor = useMemo(
|
||||
() => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
|
||||
[choices.length],
|
||||
);
|
||||
|
||||
const navItems = useMemo<NavItem[]>(
|
||||
() => [
|
||||
...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
|
||||
...(showAddOption ? [{ kind: "add" as const }] : []),
|
||||
],
|
||||
[filteredChoices, showAddOption],
|
||||
);
|
||||
|
||||
const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
|
||||
useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
|
||||
|
||||
const handleAddOption = useCallback(() => {
|
||||
if (!trimmedSearch) return;
|
||||
const newChoice: Choice = {
|
||||
id: uuid7(),
|
||||
name: trimmedSearch,
|
||||
color: addOptionColor,
|
||||
};
|
||||
const newChoices = [...choices, newChoice];
|
||||
updatePropertyMutation.mutate({
|
||||
propertyId: property.id,
|
||||
pageId: property.pageId,
|
||||
typeOptions: {
|
||||
...typeOptions,
|
||||
choices: newChoices,
|
||||
choiceOrder: newChoices.map((c) => c.id),
|
||||
},
|
||||
});
|
||||
onCommit(newChoice.id);
|
||||
}, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, onCommit]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
if (handleNavKey(e)) return;
|
||||
if (e.key === "Enter") {
|
||||
if (activeIndex >= 0 && activeIndex < navItems.length) {
|
||||
e.preventDefault();
|
||||
const item = navItems[activeIndex];
|
||||
if (item.kind === "choice") handleSelect(item.choice);
|
||||
else handleAddOption();
|
||||
return;
|
||||
}
|
||||
if (showAddOption) {
|
||||
e.preventDefault();
|
||||
handleAddOption();
|
||||
}
|
||||
}
|
||||
},
|
||||
[onCancel, handleNavKey, activeIndex, navItems, handleSelect, handleAddOption, showAddOption],
|
||||
);
|
||||
|
||||
if (isEditing) {
|
||||
const addOptionIdx = filteredChoices.length;
|
||||
return (
|
||||
<Popover
|
||||
opened
|
||||
onClose={onCancel}
|
||||
position="bottom-start"
|
||||
width={220}
|
||||
trapFocus
|
||||
>
|
||||
<Popover.Target>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
{selectedChoice ? (
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(selectedChoice.color)}
|
||||
>
|
||||
{selectedChoice.name}
|
||||
</span>
|
||||
) : (
|
||||
<span className={cellClasses.emptyValue} />
|
||||
)}
|
||||
</div>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={4}>
|
||||
<TextInput
|
||||
ref={searchRef}
|
||||
size="xs"
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
mb={4}
|
||||
/>
|
||||
<div className={cellClasses.selectDropdown}>
|
||||
{filteredChoices.map((choice, idx) => {
|
||||
const isSelected = choice.id === selectedId;
|
||||
return (
|
||||
<div
|
||||
key={choice.id}
|
||||
ref={setOptionRef(idx)}
|
||||
className={clsx(
|
||||
cellClasses.selectOption,
|
||||
isSelected && cellClasses.selectOptionActive,
|
||||
idx === activeIndex && cellClasses.selectOptionKeyboardActive,
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(idx)}
|
||||
onMouseDown={(e) => {
|
||||
// Keep focus on the search input so click doesn't blur + close popover.
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={() => handleSelect(choice)}
|
||||
>
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(choice.color)}
|
||||
>
|
||||
{choice.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{showAddOption && (
|
||||
<div
|
||||
ref={setOptionRef(addOptionIdx)}
|
||||
className={clsx(
|
||||
cellClasses.addOptionRow,
|
||||
addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(addOptionIdx)}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={handleAddOption}
|
||||
>
|
||||
<span className={cellClasses.addOptionLabel}>Add option:</span>
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(addOptionColor)}
|
||||
>
|
||||
{trimmedSearch}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
if (!selectedChoice) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(selectedChoice.color)}
|
||||
>
|
||||
{selectedChoice.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,202 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback, useMemo } from "react";
|
||||
import { Popover, TextInput } from "@mantine/core";
|
||||
import {
|
||||
IBaseProperty,
|
||||
SelectTypeOptions,
|
||||
Choice,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { choiceColor } from "@/features/base/components/cells/choice-color";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
import clsx from "clsx";
|
||||
import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
|
||||
|
||||
type CellStatusProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
type CategoryGroup = {
|
||||
label: string;
|
||||
choices: Choice[];
|
||||
};
|
||||
|
||||
const categoryLabels: Record<string, string> = {
|
||||
todo: "To Do",
|
||||
inProgress: "In Progress",
|
||||
complete: "Complete",
|
||||
};
|
||||
|
||||
export function CellStatus({
|
||||
value,
|
||||
property,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellStatusProps) {
|
||||
const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
|
||||
const choices = typeOptions?.choices ?? [];
|
||||
const selectedId = typeof value === "string" ? value : null;
|
||||
const selectedChoice = choices.find((c) => c.id === selectedId);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
setSearch("");
|
||||
requestAnimationFrame(() => searchRef.current?.focus());
|
||||
}
|
||||
}, [isEditing]);
|
||||
|
||||
const groups = useMemo(() => {
|
||||
const filtered = search
|
||||
? choices.filter((c) =>
|
||||
c.name.toLowerCase().includes(search.toLowerCase()),
|
||||
)
|
||||
: choices;
|
||||
|
||||
const grouped: Record<string, Choice[]> = {};
|
||||
for (const choice of filtered) {
|
||||
const cat = choice.category ?? "todo";
|
||||
if (!grouped[cat]) grouped[cat] = [];
|
||||
grouped[cat].push(choice);
|
||||
}
|
||||
|
||||
const result: CategoryGroup[] = [];
|
||||
for (const key of ["todo", "inProgress", "complete"]) {
|
||||
if (grouped[key]?.length) {
|
||||
result.push({ label: categoryLabels[key] ?? key, choices: grouped[key] });
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}, [choices, search]);
|
||||
|
||||
const flatChoices = useMemo(
|
||||
() => groups.flatMap((g) => g.choices),
|
||||
[groups],
|
||||
);
|
||||
const choiceIdxMap = useMemo(() => {
|
||||
const m = new Map<string, number>();
|
||||
flatChoices.forEach((c, i) => m.set(c.id, i));
|
||||
return m;
|
||||
}, [flatChoices]);
|
||||
|
||||
const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
|
||||
useListKeyboardNav(flatChoices.length, [search, isEditing]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(choice: Choice) => {
|
||||
onCommit(choice.id === selectedId ? null : choice.id);
|
||||
},
|
||||
[selectedId, onCommit],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
return;
|
||||
}
|
||||
if (handleNavKey(e)) return;
|
||||
if (e.key === "Enter") {
|
||||
if (activeIndex < 0 || activeIndex >= flatChoices.length) return;
|
||||
e.preventDefault();
|
||||
handleSelect(flatChoices[activeIndex]);
|
||||
}
|
||||
},
|
||||
[onCancel, handleNavKey, activeIndex, flatChoices, handleSelect],
|
||||
);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<Popover
|
||||
opened
|
||||
onClose={onCancel}
|
||||
position="bottom-start"
|
||||
width={220}
|
||||
trapFocus
|
||||
>
|
||||
<Popover.Target>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
{selectedChoice ? (
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(selectedChoice.color)}
|
||||
>
|
||||
{selectedChoice.name}
|
||||
</span>
|
||||
) : (
|
||||
<span className={cellClasses.emptyValue} />
|
||||
)}
|
||||
</div>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={4}>
|
||||
<TextInput
|
||||
ref={searchRef}
|
||||
size="xs"
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
mb={4}
|
||||
/>
|
||||
<div className={cellClasses.selectDropdown}>
|
||||
{groups.map((group) => (
|
||||
<div key={group.label}>
|
||||
<div className={cellClasses.selectCategoryLabel}>
|
||||
{group.label}
|
||||
</div>
|
||||
{group.choices.map((choice) => {
|
||||
const idx = choiceIdxMap.get(choice.id) ?? -1;
|
||||
const isSelected = choice.id === selectedId;
|
||||
return (
|
||||
<div
|
||||
key={choice.id}
|
||||
ref={setOptionRef(idx)}
|
||||
className={clsx(
|
||||
cellClasses.selectOption,
|
||||
isSelected && cellClasses.selectOptionActive,
|
||||
idx === activeIndex && cellClasses.selectOptionKeyboardActive,
|
||||
)}
|
||||
onMouseEnter={() => setActiveIndex(idx)}
|
||||
onMouseDown={(e) => {
|
||||
// Keep focus on the search input so click doesn't blur + close popover.
|
||||
e.preventDefault();
|
||||
}}
|
||||
onClick={() => handleSelect(choice)}
|
||||
>
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(choice.color)}
|
||||
>
|
||||
{choice.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
if (!selectedChoice) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cellClasses.badge}
|
||||
style={choiceColor(selectedChoice.color)}
|
||||
>
|
||||
{selectedChoice.name}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
import gridClasses from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type CellTextProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellText({
|
||||
value,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellTextProps) {
|
||||
const displayValue = typeof value === "string" ? value : "";
|
||||
const [draft, setDraft] = useState(displayValue);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const committedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
committedRef.current = false;
|
||||
setDraft(displayValue);
|
||||
requestAnimationFrame(() => {
|
||||
inputRef.current?.focus();
|
||||
inputRef.current?.select();
|
||||
});
|
||||
}
|
||||
}, [isEditing, displayValue]);
|
||||
|
||||
const commitOnce = useCallback(
|
||||
(val: unknown) => {
|
||||
if (committedRef.current) return;
|
||||
committedRef.current = true;
|
||||
onCommit(val);
|
||||
},
|
||||
[onCommit],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
commitOnce(draft);
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
},
|
||||
[draft, commitOnce, onCancel],
|
||||
);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
commitOnce(draft);
|
||||
}, [draft, commitOnce]);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
className={cellClasses.cellInput}
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!displayValue) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return <span className={gridClasses.cellContent}>{displayValue}</span>;
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type CellUrlProps = {
|
||||
value: unknown;
|
||||
property: IBaseProperty;
|
||||
rowId: string;
|
||||
isEditing: boolean;
|
||||
onCommit: (value: unknown) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function CellUrl({
|
||||
value,
|
||||
isEditing,
|
||||
onCommit,
|
||||
onCancel,
|
||||
}: CellUrlProps) {
|
||||
const displayValue = typeof value === "string" ? value : "";
|
||||
const [draft, setDraft] = useState(displayValue);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const committedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditing) {
|
||||
committedRef.current = false;
|
||||
setDraft(displayValue);
|
||||
requestAnimationFrame(() => {
|
||||
inputRef.current?.focus();
|
||||
inputRef.current?.select();
|
||||
});
|
||||
}
|
||||
}, [isEditing, displayValue]);
|
||||
|
||||
const commitOnce = useCallback(
|
||||
(val: unknown) => {
|
||||
if (committedRef.current) return;
|
||||
committedRef.current = true;
|
||||
onCommit(val);
|
||||
},
|
||||
[onCommit],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
commitOnce(draft || null);
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
},
|
||||
[draft, commitOnce, onCancel],
|
||||
);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
commitOnce(draft || null);
|
||||
}, [draft, commitOnce]);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="url"
|
||||
className={cellClasses.cellInput}
|
||||
value={draft}
|
||||
placeholder="https://..."
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!displayValue) {
|
||||
return <span className={cellClasses.emptyValue} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
className={cellClasses.urlLink}
|
||||
href={displayValue}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{displayValue}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { CSSProperties } from "react";
|
||||
|
||||
const colorMap: Record<string, { bg: string; bgDark: string; text: string; textDark: string }> = {
|
||||
gray: { bg: "#f1f3f5", bgDark: "#373a40", text: "#495057", textDark: "#ced4da" },
|
||||
red: { bg: "#ffe3e3", bgDark: "#4a1a1a", text: "#c92a2a", textDark: "#ffa8a8" },
|
||||
pink: { bg: "#ffdeeb", bgDark: "#4a1a2e", text: "#a61e4d", textDark: "#faa2c1" },
|
||||
grape: { bg: "#f3d9fa", bgDark: "#3b1a4a", text: "#862e9c", textDark: "#e599f7" },
|
||||
violet: { bg: "#e5dbff", bgDark: "#2b1a4a", text: "#5f3dc4", textDark: "#b197fc" },
|
||||
indigo: { bg: "#dbe4ff", bgDark: "#1a2b4a", text: "#364fc7", textDark: "#91a7ff" },
|
||||
blue: { bg: "#d0ebff", bgDark: "#1a2e4a", text: "#1971c2", textDark: "#74c0fc" },
|
||||
cyan: { bg: "#c3fae8", bgDark: "#1a3a3a", text: "#0c8599", textDark: "#66d9e8" },
|
||||
teal: { bg: "#c3fae8", bgDark: "#1a3a2e", text: "#087f5b", textDark: "#63e6be" },
|
||||
green: { bg: "#d3f9d8", bgDark: "#1a3a1a", text: "#2b8a3e", textDark: "#69db7c" },
|
||||
lime: { bg: "#e9fac8", bgDark: "#2e3a1a", text: "#5c940d", textDark: "#a9e34b" },
|
||||
yellow: { bg: "#fff3bf", bgDark: "#3a351a", text: "#e67700", textDark: "#ffd43b" },
|
||||
orange: { bg: "#ffe8cc", bgDark: "#3a2a1a", text: "#d9480f", textDark: "#ffa94d" },
|
||||
};
|
||||
|
||||
export function choiceColor(color: string): CSSProperties {
|
||||
const c = colorMap[color] ?? colorMap.gray;
|
||||
return {
|
||||
backgroundColor: `light-dark(${c.bg}, ${c.bgDark})`,
|
||||
color: `light-dark(${c.text}, ${c.textDark})`,
|
||||
};
|
||||
}
|
||||
@@ -1,220 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Kbd,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconAlertTriangle,
|
||||
IconMathFunction,
|
||||
IconPointFilled,
|
||||
} from "@tabler/icons-react";
|
||||
import { registry } from "@docmost/base-formula/client";
|
||||
import { FormulaInput } from "./formula-input";
|
||||
import { PropertyChipRow } from "./property-chip-row";
|
||||
import { FunctionPalette } from "./function-palette";
|
||||
import { useFormulaParser } from "@/features/base/hooks/use-formula-parser";
|
||||
import type { IBaseProperty } from "@/features/base/types/base.types";
|
||||
|
||||
type Props = {
|
||||
properties: IBaseProperty[];
|
||||
editingPropertyId: string | null;
|
||||
initialSource?: string;
|
||||
name?: string;
|
||||
disabled?: boolean;
|
||||
onSave: (
|
||||
source: string,
|
||||
ast: unknown,
|
||||
resultType: string,
|
||||
dependencies: string[],
|
||||
) => void;
|
||||
onCancel: () => void;
|
||||
};
|
||||
|
||||
export function FormulaEditor({
|
||||
properties,
|
||||
editingPropertyId,
|
||||
initialSource = "",
|
||||
name,
|
||||
disabled = false,
|
||||
onSave,
|
||||
onCancel,
|
||||
}: Props) {
|
||||
const [source, setSource] = useState(initialSource);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const pendingCursorRef = useRef<number | null>(null);
|
||||
const parseState = useFormulaParser(
|
||||
source,
|
||||
properties,
|
||||
editingPropertyId,
|
||||
registry,
|
||||
);
|
||||
const canSave = parseState.state === "ok" && !disabled;
|
||||
|
||||
// After a palette insert mutates `source`, wait for React to flush the
|
||||
// new value into the textarea, then focus + restore the cursor. Using
|
||||
// useEffect (not RAF) guarantees the DOM update ran first.
|
||||
useEffect(() => {
|
||||
if (pendingCursorRef.current === null) return;
|
||||
const pos = pendingCursorRef.current;
|
||||
pendingCursorRef.current = null;
|
||||
const ta = textareaRef.current;
|
||||
if (!ta) return;
|
||||
ta.focus();
|
||||
ta.setSelectionRange(pos, pos);
|
||||
}, [source]);
|
||||
|
||||
const insertAtCursor = (snippet: string, cursorOffsetFromEnd = 0) => {
|
||||
const ta = textareaRef.current;
|
||||
const start = ta?.selectionStart ?? source.length;
|
||||
const end = ta?.selectionEnd ?? source.length;
|
||||
const before = source.slice(0, start);
|
||||
const after = source.slice(end);
|
||||
// Add a space separator when inserting after content that would
|
||||
// otherwise mash against the snippet (e.g. `2` + `prop("A")`).
|
||||
const prev = before.slice(-1);
|
||||
const needsSpace = prev !== "" && !/[\s(,]/.test(prev);
|
||||
const prefix = needsSpace ? " " : "";
|
||||
const next = before + prefix + snippet + after;
|
||||
pendingCursorRef.current =
|
||||
before.length + prefix.length + snippet.length - cursorOffsetFromEnd;
|
||||
setSource(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<Paper
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
p={0}
|
||||
style={{ overflow: "hidden" }}
|
||||
>
|
||||
<Stack gap={0}>
|
||||
<Group
|
||||
gap={10}
|
||||
px="md"
|
||||
py={12}
|
||||
style={{
|
||||
borderBottom: "1px solid var(--mantine-color-gray-2)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 5,
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
background: "var(--mantine-color-blue-0)",
|
||||
color: "var(--mantine-color-blue-6)",
|
||||
}}
|
||||
>
|
||||
<IconMathFunction size={14} />
|
||||
</div>
|
||||
<Text size="sm" fw={600}>
|
||||
Formula
|
||||
</Text>
|
||||
{name && (
|
||||
<Text size="sm" c="dimmed">
|
||||
· {name}
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<Stack gap={6} px={14} pt={10} pb={8}>
|
||||
<FormulaInput
|
||||
ref={textareaRef}
|
||||
value={source}
|
||||
onChange={setSource}
|
||||
hasError={parseState.state === "error"}
|
||||
/>
|
||||
<Group justify="space-between" gap={8} mih={16}>
|
||||
{parseState.state === "error" ? (
|
||||
<Group gap={6} c="red.7">
|
||||
<IconAlertTriangle size={12} />
|
||||
<Text size="xs">{parseState.message}</Text>
|
||||
</Group>
|
||||
) : parseState.state === "ok" ? (
|
||||
<Group gap={6} c="dimmed">
|
||||
<IconPointFilled size={10} color="var(--mantine-color-teal-6)" />
|
||||
<Text size="xs">
|
||||
Returns{" "}
|
||||
<Text span fw={600} c="gray.8">
|
||||
{parseState.resultType}
|
||||
</Text>
|
||||
</Text>
|
||||
</Group>
|
||||
) : (
|
||||
<Text size="xs" c="dimmed">
|
||||
Click a property or function below to insert.
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Stack gap={8} px={14} pt={10} pb={10}>
|
||||
<PropertyChipRow
|
||||
properties={properties.filter((p) => p.id !== editingPropertyId)}
|
||||
onInsert={(name) => insertAtCursor(`prop("${name}")`)}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Stack gap={6} px={14} pt={10} pb={10}>
|
||||
<Text size="xs" fw={600} c="gray.7">
|
||||
Functions
|
||||
</Text>
|
||||
<FunctionPalette
|
||||
registry={registry}
|
||||
onInsert={(name) => insertAtCursor(`${name}()`, 1)}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Group
|
||||
justify="space-between"
|
||||
px="md"
|
||||
py={10}
|
||||
style={{
|
||||
borderTop: "1px solid var(--mantine-color-gray-2)",
|
||||
background: "var(--mantine-color-gray-0)",
|
||||
}}
|
||||
>
|
||||
<Group gap={6}>
|
||||
<Kbd>⌘</Kbd>
|
||||
<Kbd>↵</Kbd>
|
||||
<Text size="xs" c="dimmed">
|
||||
to save
|
||||
</Text>
|
||||
</Group>
|
||||
<Group gap={8}>
|
||||
<Button variant="subtle" size="xs" onClick={onCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
disabled={!canSave}
|
||||
onClick={() => {
|
||||
if (parseState.state !== "ok") return;
|
||||
onSave(
|
||||
source,
|
||||
parseState.ast,
|
||||
parseState.resultType,
|
||||
parseState.dependencies,
|
||||
);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { forwardRef } from "react";
|
||||
import { Textarea } from "@mantine/core";
|
||||
|
||||
type Props = {
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
hasError?: boolean;
|
||||
};
|
||||
|
||||
export const FormulaInput = forwardRef<HTMLTextAreaElement, Props>(
|
||||
function FormulaInput({ value, onChange, hasError }, ref) {
|
||||
return (
|
||||
<Textarea
|
||||
ref={ref}
|
||||
autosize
|
||||
minRows={3}
|
||||
maxRows={8}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.currentTarget.value)}
|
||||
placeholder='prop("Price") * prop("Qty")'
|
||||
styles={{
|
||||
input: {
|
||||
fontFamily:
|
||||
"ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace",
|
||||
fontSize: 13,
|
||||
lineHeight: 1.65,
|
||||
backgroundColor: "var(--mantine-color-gray-0)",
|
||||
borderColor: hasError
|
||||
? "var(--mantine-color-red-6)"
|
||||
: "var(--mantine-color-blue-6)",
|
||||
borderWidth: 1.5,
|
||||
boxShadow: hasError
|
||||
? "0 0 0 3px var(--mantine-color-red-1)"
|
||||
: "0 0 0 3px var(--mantine-color-blue-1)",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -1,95 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Accordion,
|
||||
Group,
|
||||
Text,
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core";
|
||||
import type { FormulaFn } from "@docmost/base-formula/client";
|
||||
|
||||
const CATEGORIES = ["logic", "math", "string", "date", "coercion"] as const;
|
||||
|
||||
export function FunctionPalette({
|
||||
registry,
|
||||
onInsert,
|
||||
}: {
|
||||
registry: ReadonlyMap<string, FormulaFn>;
|
||||
onInsert: (name: string) => void;
|
||||
}) {
|
||||
const [open, setOpen] = useState<string | null>("logic");
|
||||
|
||||
const byCat = new Map<string, FormulaFn[]>();
|
||||
for (const fn of registry.values()) {
|
||||
if (!byCat.has(fn.category)) byCat.set(fn.category, []);
|
||||
byCat.get(fn.category)!.push(fn);
|
||||
}
|
||||
|
||||
return (
|
||||
<Accordion
|
||||
value={open}
|
||||
onChange={setOpen}
|
||||
variant="contained"
|
||||
radius="md"
|
||||
chevronSize={14}
|
||||
styles={{
|
||||
item: { borderColor: "var(--mantine-color-gray-2)" },
|
||||
control: { padding: "7px 12px", minHeight: 0 },
|
||||
label: {
|
||||
padding: 0,
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
textTransform: "capitalize",
|
||||
},
|
||||
content: { padding: "6px 10px 10px" },
|
||||
panel: { background: "var(--mantine-color-gray-0)" },
|
||||
}}
|
||||
>
|
||||
{CATEGORIES.map((cat) => {
|
||||
const fns = byCat.get(cat) ?? [];
|
||||
return (
|
||||
<Accordion.Item key={cat} value={cat}>
|
||||
<Accordion.Control>
|
||||
<Group gap={8}>
|
||||
<span>{cat}</span>
|
||||
<Text size="xs" c="dimmed" ff="monospace">
|
||||
{fns.length}
|
||||
</Text>
|
||||
</Group>
|
||||
</Accordion.Control>
|
||||
<Accordion.Panel>
|
||||
<Group gap={6}>
|
||||
{fns.map((fn) => (
|
||||
<Tooltip key={fn.name} label={fn.doc} withArrow>
|
||||
<UnstyledButton
|
||||
onClick={() => onInsert(fn.name)}
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
padding: "4px 10px",
|
||||
borderRadius: 5,
|
||||
fontFamily:
|
||||
"ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace",
|
||||
fontSize: 12.5,
|
||||
color: "var(--mantine-color-blue-7)",
|
||||
background: "var(--mantine-color-white)",
|
||||
border: "1px solid var(--mantine-color-gray-3)",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{fn.name}
|
||||
<span style={{ color: "var(--mantine-color-gray-5)" }}>
|
||||
()
|
||||
</span>
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
))}
|
||||
</Group>
|
||||
</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
);
|
||||
})}
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import { Group, TextInput, UnstyledButton, Text } from "@mantine/core";
|
||||
import { IconSearch } from "@tabler/icons-react";
|
||||
import type { IBaseProperty } from "@/features/base/types/base.types";
|
||||
|
||||
export function PropertyChipRow({
|
||||
properties,
|
||||
onInsert,
|
||||
}: {
|
||||
properties: IBaseProperty[];
|
||||
onInsert: (name: string) => void;
|
||||
}) {
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
const visible = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return properties;
|
||||
return properties.filter((p) => p.name.toLowerCase().includes(q));
|
||||
}, [properties, query]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Group justify="space-between" mb={8}>
|
||||
<Text size="xs" fw={600} c="gray.7">
|
||||
Properties
|
||||
</Text>
|
||||
<TextInput
|
||||
size="xs"
|
||||
placeholder="Search"
|
||||
leftSection={<IconSearch size={12} />}
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.currentTarget.value)}
|
||||
w={140}
|
||||
/>
|
||||
</Group>
|
||||
{visible.length === 0 ? (
|
||||
<Text size="xs" c="dimmed" py={6}>
|
||||
No matches.
|
||||
</Text>
|
||||
) : (
|
||||
<Group gap={6}>
|
||||
{visible.map((p) => (
|
||||
<UnstyledButton
|
||||
key={p.id}
|
||||
onClick={() => onInsert(p.name)}
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
padding: "3px 9px",
|
||||
borderRadius: 6,
|
||||
fontSize: 12.5,
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.4,
|
||||
background: "var(--mantine-color-blue-0)",
|
||||
border: "1px solid var(--mantine-color-blue-2)",
|
||||
color: "var(--mantine-color-blue-7)",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{p.name}
|
||||
</UnstyledButton>
|
||||
))}
|
||||
</Group>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { memo } from "react";
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type AddRowButtonProps = {
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export const AddRowButton = memo(function AddRowButton({
|
||||
onClick,
|
||||
}: AddRowButtonProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classes.addRowButton}
|
||||
onClick={onClick}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<IconPlus size={14} />
|
||||
<span>{t("New row")}</span>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,10 +0,0 @@
|
||||
import type { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type Props = {
|
||||
edge: Edge;
|
||||
};
|
||||
|
||||
export function BaseDropEdgeIndicator({ edge }: Props) {
|
||||
return <div className={classes.dropEdgeLine} data-edge={edge} aria-hidden />;
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { memo, useCallback } from "react";
|
||||
import { Cell } from "@tanstack/react-table";
|
||||
import { useAtom } from "jotai";
|
||||
import { IBaseRow, EditingCell } from "@/features/base/types/base.types";
|
||||
import { editingCellAtomFamily } from "@/features/base/atoms/base-atoms";
|
||||
import { isSystemPropertyType } from "@/features/base/hooks/use-base-table";
|
||||
import { cellComponents } from "@/features/base/components/cells/cell-renderer";
|
||||
import { RowNumberCell } from "./row-number-cell";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type RowDragProps = {
|
||||
draggable: boolean;
|
||||
onDragStart: (e: React.DragEvent) => void;
|
||||
};
|
||||
|
||||
type GridCellProps = {
|
||||
cell: Cell<IBaseRow, unknown>;
|
||||
rowIndex: number;
|
||||
onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
|
||||
rowDragProps?: RowDragProps;
|
||||
orderedRowIds?: string[];
|
||||
pageId: string;
|
||||
};
|
||||
|
||||
export const GridCell = memo(function GridCell({
|
||||
cell,
|
||||
rowIndex,
|
||||
onCellUpdate,
|
||||
rowDragProps,
|
||||
orderedRowIds,
|
||||
pageId,
|
||||
}: GridCellProps) {
|
||||
const property = cell.column.columnDef.meta?.property;
|
||||
const isRowNumber = cell.column.id === "__row_number";
|
||||
const isPinned = cell.column.getIsPinned();
|
||||
const pinOffset = isPinned ? cell.column.getStart("left") : undefined;
|
||||
|
||||
const [editingCell, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
|
||||
|
||||
const rowId = cell.row.id;
|
||||
const isEditing =
|
||||
editingCell?.rowId === rowId &&
|
||||
editingCell?.propertyId === property?.id;
|
||||
|
||||
const handleDoubleClick = useCallback(() => {
|
||||
if (!property || isRowNumber) return;
|
||||
if (property.type === "checkbox") return;
|
||||
if (isSystemPropertyType(property.type)) return;
|
||||
setEditingCell({ rowId, propertyId: property.id });
|
||||
}, [property, isRowNumber, rowId, setEditingCell]);
|
||||
|
||||
const handleCommit = useCallback(
|
||||
(value: unknown) => {
|
||||
if (!property) return;
|
||||
const currentValue = cell.getValue();
|
||||
const hasChanged = value !== currentValue
|
||||
&& !(value === "" && (currentValue === null || currentValue === undefined))
|
||||
&& !(value === null && (currentValue === null || currentValue === undefined));
|
||||
if (hasChanged) {
|
||||
onCellUpdate(rowId, property.id, value);
|
||||
}
|
||||
setEditingCell(null);
|
||||
},
|
||||
[property, rowId, cell, onCellUpdate, setEditingCell],
|
||||
);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
setEditingCell(null);
|
||||
}, [setEditingCell]);
|
||||
|
||||
if (isRowNumber) {
|
||||
return (
|
||||
<RowNumberCell
|
||||
rowId={rowId}
|
||||
rowIndex={rowIndex}
|
||||
orderedRowIds={orderedRowIds ?? []}
|
||||
isPinned={Boolean(isPinned)}
|
||||
pinOffset={pinOffset}
|
||||
rowDragProps={rowDragProps}
|
||||
pageId={pageId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!property) return null;
|
||||
|
||||
const CellComponent = cellComponents[property.type];
|
||||
if (!CellComponent) return null;
|
||||
|
||||
const value = cell.getValue();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${classes.cell} ${isPinned ? classes.cellPinned : ""} ${isEditing ? classes.cellEditing : ""} ${property.isPrimary ? classes.primaryCell : ""}`}
|
||||
style={
|
||||
isPinned
|
||||
? ({ "--pin-offset": `${pinOffset}px` } as React.CSSProperties)
|
||||
: undefined
|
||||
}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
>
|
||||
<CellComponent
|
||||
value={value}
|
||||
property={property}
|
||||
rowId={rowId}
|
||||
isEditing={isEditing}
|
||||
onCommit={handleCommit}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,377 +0,0 @@
|
||||
import { useRef, useMemo, useCallback, useEffect, useState, useLayoutEffect } from "react";
|
||||
import { Table } from "@tanstack/react-table";
|
||||
import {
|
||||
observeWindowOffset,
|
||||
observeWindowRect,
|
||||
useVirtualizer,
|
||||
windowScroll,
|
||||
} from "@tanstack/react-virtual";
|
||||
import { useAtom } from "jotai";
|
||||
import { IBaseRow, IBaseProperty, EditingCell } from "@/features/base/types/base.types";
|
||||
import { editingCellAtomFamily, activePropertyMenuAtomFamily, propertyMenuDirtyAtomFamily, propertyMenuCloseRequestAtomFamily } from "@/features/base/atoms/base-atoms";
|
||||
import { useColumnResize } from "@/features/base/hooks/use-column-resize";
|
||||
import { useGridKeyboardNav } from "@/features/base/hooks/use-grid-keyboard-nav";
|
||||
import { useRowDrag } from "@/features/base/hooks/use-row-drag";
|
||||
import { useRowSelection } from "@/features/base/hooks/use-row-selection";
|
||||
import { useDeleteSelectedRows } from "@/features/base/hooks/use-delete-selected-rows";
|
||||
import { useHorizontalScrollSync } from "@/features/base/hooks/use-horizontal-scroll-sync";
|
||||
import { GridHeader } from "./grid-header";
|
||||
import { GridRow } from "./grid-row";
|
||||
import { AddRowButton } from "./add-row-button";
|
||||
import { SelectionActionBar } from "./selection-action-bar";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
const ROW_HEIGHT = 36;
|
||||
const OVERSCAN = 10;
|
||||
|
||||
// Hoisted to module scope so we don't allocate a fresh options object
|
||||
// every GridContainer render — the function refs from virtual-core are
|
||||
// stable, only the wrapper object identity matters for downstream
|
||||
// memoization inside useVirtualizer.
|
||||
const WINDOW_SCROLL_OPTIONS = {
|
||||
observeElementRect: observeWindowRect as never,
|
||||
observeElementOffset: observeWindowOffset as never,
|
||||
scrollToFn: windowScroll as never,
|
||||
} as const;
|
||||
|
||||
type GridContainerProps = {
|
||||
table: Table<IBaseRow>;
|
||||
properties: IBaseProperty[];
|
||||
onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
|
||||
onAddRow?: () => void;
|
||||
pageId: string;
|
||||
onColumnReorder?: (columnId: string, finishIndex: number) => void;
|
||||
onResizeEnd?: () => void;
|
||||
onRowReorder?: (rowId: string, targetRowId: string, position: "above" | "below") => void;
|
||||
hasNextPage?: boolean;
|
||||
isFetchingNextPage?: boolean;
|
||||
onFetchNextPage?: () => void;
|
||||
/**
|
||||
* What the virtualizer measures and what the StickyBand sticks to.
|
||||
* Standalone passes a ref into the .tableScrollport wrapper; inline
|
||||
* passes `window` since the page itself is the scroll container.
|
||||
*/
|
||||
scrollElement: HTMLElement | Window | null;
|
||||
/**
|
||||
* Rendered above the column-header row inside the StickyBand. In
|
||||
* inline mode BaseTable injects banner + toolbar here so they stick
|
||||
* alongside the headers; in standalone this is null (banner +
|
||||
* toolbar render outside the scrollport).
|
||||
*/
|
||||
stickyBandPrelude?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function GridContainer({
|
||||
table,
|
||||
properties,
|
||||
onCellUpdate,
|
||||
onAddRow,
|
||||
pageId,
|
||||
onColumnReorder,
|
||||
onResizeEnd,
|
||||
onRowReorder,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
onFetchNextPage,
|
||||
scrollElement,
|
||||
stickyBandPrelude,
|
||||
}: GridContainerProps) {
|
||||
const headerRef = useRef<HTMLDivElement>(null);
|
||||
const bodyRef = useRef<HTMLDivElement>(null);
|
||||
useHorizontalScrollSync(bodyRef, headerRef);
|
||||
const lastTriggeredRowsLenRef = useRef(0);
|
||||
const rows = table.getRowModel().rows;
|
||||
|
||||
const [editingCell, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
|
||||
const [, setActivePropertyMenu] = useAtom(activePropertyMenuAtomFamily(pageId)) as unknown as [string | null, (val: string | null) => void];
|
||||
const [propertyMenuDirty] = useAtom(propertyMenuDirtyAtomFamily(pageId)) as unknown as [boolean];
|
||||
const [, setCloseRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number, (val: number) => void];
|
||||
const propertyMenuDirtyRef = useRef(propertyMenuDirty);
|
||||
propertyMenuDirtyRef.current = propertyMenuDirty;
|
||||
const closeRequestCounterRef = useRef(0);
|
||||
|
||||
const { selectionCount, clear: clearSelection } = useRowSelection(pageId);
|
||||
const { deleteSelected } = useDeleteSelectedRows(pageId);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseDown = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.closest(`.${classes.headerCell}`)) return;
|
||||
if (target.closest("[role=\"dialog\"]")) return;
|
||||
if (target.closest("[role=\"listbox\"]")) return;
|
||||
if (target.closest("[data-mantine-shared-portal-node]")) return;
|
||||
if (target.closest(`.${classes.cellEditing}`)) return;
|
||||
if (propertyMenuDirtyRef.current) {
|
||||
closeRequestCounterRef.current += 1;
|
||||
setCloseRequest(closeRequestCounterRef.current);
|
||||
} else {
|
||||
setActivePropertyMenu(null);
|
||||
}
|
||||
// Blur the focused element BEFORE clearing editingCell. Cell
|
||||
// editors (CellNumber, CellText, CellEmail, CellUrl) commit
|
||||
// their draft via onBlur — if we set editingCell to null first,
|
||||
// React unmounts the input before the native blur event reaches
|
||||
// its onBlur listener, so the user's edit is silently dropped
|
||||
// (and pressing Enter is the only way to save). Triggering blur
|
||||
// here lets the cell's onBlur run, commit, and clear editingCell
|
||||
// itself; the setEditingCell(null) below is a no-op safety net
|
||||
// for cases where the active element wasn't a cell editor.
|
||||
const active = document.activeElement as HTMLElement | null;
|
||||
if (active && active !== document.body && typeof active.blur === "function") {
|
||||
active.blur();
|
||||
}
|
||||
setEditingCell(null);
|
||||
};
|
||||
document.addEventListener("mousedown", handleMouseDown);
|
||||
return () => document.removeEventListener("mousedown", handleMouseDown);
|
||||
}, [setActivePropertyMenu, setEditingCell, setCloseRequest]);
|
||||
|
||||
useColumnResize(table, onResizeEnd ?? (() => {}));
|
||||
|
||||
useGridKeyboardNav({
|
||||
table,
|
||||
editingCell,
|
||||
setEditingCell,
|
||||
containerRef: bodyRef,
|
||||
});
|
||||
|
||||
// When the scroll container is the window (inline embed mode),
|
||||
// useVirtualizer's default Element-mode observers read scrollTop /
|
||||
// scrollLeft — properties Window doesn't have. Swap in the Window-
|
||||
// mode observers so the virtualizer reads scrollY / scrollX instead.
|
||||
// The Element-narrowed type signature is satisfied by an upcast on
|
||||
// getScrollElement: virtual-core's runtime accepts Window when the
|
||||
// observers do.
|
||||
const isWindowScroll =
|
||||
typeof window !== "undefined" && scrollElement === window;
|
||||
const windowScrollOptions = isWindowScroll ? WINDOW_SCROLL_OPTIONS : {};
|
||||
|
||||
// Window-mode virtualizer reads window.scrollY as offset, but rows
|
||||
// are positioned within .bodyGrid which sits at some non-zero Y in
|
||||
// the document (below banner/toolbar/upstream page content). Pass
|
||||
// scrollMargin = bodyGrid's document-relative top so the virtualizer
|
||||
// indexes correctly. Re-measure on resize via ResizeObserver — the
|
||||
// embed extension logic in BaseEmbedView already triggers layout
|
||||
// changes that we need to react to.
|
||||
const [scrollMargin, setScrollMargin] = useState(0);
|
||||
useLayoutEffect(() => {
|
||||
if (!isWindowScroll) return;
|
||||
const el = bodyRef.current;
|
||||
if (!el) return;
|
||||
const update = () => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
setScrollMargin(rect.top + window.scrollY);
|
||||
};
|
||||
update();
|
||||
const ro = new ResizeObserver(update);
|
||||
ro.observe(el);
|
||||
// Outer page reflows (sidebar collapse, viewport resize) move the
|
||||
// embed without resizing it — listen to window resize too.
|
||||
window.addEventListener("resize", update);
|
||||
return () => {
|
||||
ro.disconnect();
|
||||
window.removeEventListener("resize", update);
|
||||
};
|
||||
}, [isWindowScroll]);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: rows.length,
|
||||
getScrollElement: () => scrollElement as Element | null,
|
||||
estimateSize: () => ROW_HEIGHT,
|
||||
overscan: OVERSCAN,
|
||||
scrollMargin,
|
||||
...windowScrollOptions,
|
||||
// virtual-core bug: when the scroll element first attaches in
|
||||
// _willUpdate, it calls _scrollToOffset(getScrollOffset()). With
|
||||
// no initialOffset provided, getScrollOffset() returns undefined,
|
||||
// and windowScroll/elementScroll computes `undefined + 0 = NaN`
|
||||
// for the scroll target. Browsers coerce that to 0, so
|
||||
// scrollY/scrollTop snaps to 0 the moment a fresh BaseTable
|
||||
// mounts mid-page — manifests as "page jumps to top of editor"
|
||||
// when an inline-embed lands. Seed initialOffset to the current
|
||||
// scroll position so the first _scrollToOffset is a no-op.
|
||||
initialOffset: isWindowScroll
|
||||
? () => window.scrollY
|
||||
: () =>
|
||||
scrollElement instanceof HTMLElement ? scrollElement.scrollTop : 0,
|
||||
});
|
||||
|
||||
const virtualItems = virtualizer.getVirtualItems();
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasNextPage || isFetchingNextPage || !onFetchNextPage) return;
|
||||
const lastItem = virtualItems[virtualItems.length - 1];
|
||||
if (!lastItem) return;
|
||||
if (lastItem.index < rows.length - OVERSCAN * 2) return;
|
||||
if (rows.length <= lastTriggeredRowsLenRef.current) return;
|
||||
lastTriggeredRowsLenRef.current = rows.length;
|
||||
onFetchNextPage();
|
||||
}, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
|
||||
|
||||
useEffect(() => {
|
||||
// When the underlying row set shrinks (filter changed, sort toggled,
|
||||
// view switched) or resets to zero, we're on a fresh pagination
|
||||
// sequence — un-gate the trigger so the first page triggers a
|
||||
// potential next fetch correctly.
|
||||
if (rows.length === 0 || rows.length < lastTriggeredRowsLenRef.current) {
|
||||
lastTriggeredRowsLenRef.current = 0;
|
||||
}
|
||||
}, [rows.length]);
|
||||
|
||||
useEffect(() => {
|
||||
const el = bodyRef.current;
|
||||
if (!el || !pageId) return;
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (editingCell) return;
|
||||
const active = document.activeElement as HTMLElement | null;
|
||||
if (!active || !el.contains(active)) return;
|
||||
const tag = active.tagName;
|
||||
if (tag === "INPUT" || tag === "TEXTAREA" || active.isContentEditable) {
|
||||
return;
|
||||
}
|
||||
if (e.key === "Escape" && selectionCount > 0) {
|
||||
clearSelection();
|
||||
return;
|
||||
}
|
||||
if ((e.key === "Delete" || e.key === "Backspace") && selectionCount > 0) {
|
||||
e.preventDefault();
|
||||
void deleteSelected();
|
||||
}
|
||||
};
|
||||
el.addEventListener("keydown", handler);
|
||||
return () => el.removeEventListener("keydown", handler);
|
||||
}, [editingCell, selectionCount, clearSelection, deleteSelected, pageId]);
|
||||
|
||||
const gridTemplateColumns = useMemo(() => {
|
||||
const visibleColumns = table.getVisibleLeafColumns();
|
||||
const columnWidths = visibleColumns.map((col) => `${col.getSize()}px`);
|
||||
return columnWidths.join(" ") + (pageId ? " 40px" : "");
|
||||
}, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, pageId]);
|
||||
|
||||
const totalHeight = virtualizer.getTotalSize();
|
||||
|
||||
// virtual-core bakes `scrollMargin` into both `start`/`end` and
|
||||
// `getTotalSize()`. We render padding spacers inside .bodyGrid to
|
||||
// position rows in the grid flow, so paddingTop must be relative to
|
||||
// .bodyGrid's own top — subtract scrollMargin out of items[0].start
|
||||
// (which would otherwise push the first row down by the full embed
|
||||
// offset, leaving a giant blank gap above the data). totalHeight
|
||||
// already includes scrollMargin, so paddingBottom needs no
|
||||
// adjustment.
|
||||
const paddingTop =
|
||||
virtualItems.length > 0
|
||||
? Math.max(0, (virtualItems[0]?.start ?? 0) - scrollMargin)
|
||||
: 0;
|
||||
const paddingBottom =
|
||||
virtualItems.length > 0
|
||||
? totalHeight - (virtualItems[virtualItems.length - 1]?.end ?? 0)
|
||||
: 0;
|
||||
|
||||
const rowIds = useMemo(() => rows.map((r) => r.id), [rows]);
|
||||
|
||||
const handleRowReorder = useCallback(
|
||||
(rowId: string, targetRowId: string, position: "above" | "below") => {
|
||||
onRowReorder?.(rowId, targetRowId, position);
|
||||
},
|
||||
[onRowReorder],
|
||||
);
|
||||
|
||||
const {
|
||||
dragState: rowDragState,
|
||||
handleDragStart: handleRowDragStart,
|
||||
handleDragOver: handleRowDragOver,
|
||||
handleDragEnd: handleRowDragEnd,
|
||||
handleDragLeave: handleRowDragLeave,
|
||||
} = useRowDrag({ rowIds, onReorder: handleRowReorder });
|
||||
|
||||
const handleAddRow = useCallback(() => {
|
||||
onAddRow?.();
|
||||
}, [onAddRow]);
|
||||
|
||||
const handlePropertyCreated = useCallback(() => {
|
||||
// Wait for React to re-render with the new column, then scroll to it
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
bodyRef.current?.scrollTo({
|
||||
left: bodyRef.current.scrollWidth,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
const getColumnOrder = useCallback(
|
||||
() => table.getState().columnOrder,
|
||||
[table],
|
||||
);
|
||||
|
||||
return (
|
||||
<div role="grid">
|
||||
<div className={classes.stickyBand}>
|
||||
{stickyBandPrelude}
|
||||
<div
|
||||
className={classes.headerGrid}
|
||||
ref={headerRef}
|
||||
style={{ gridTemplateColumns }}
|
||||
role="row"
|
||||
>
|
||||
<GridHeader
|
||||
table={table}
|
||||
pageId={pageId}
|
||||
columnOrder={table.getState().columnOrder}
|
||||
columnVisibility={table.getState().columnVisibility}
|
||||
properties={properties}
|
||||
loadedRowIds={rowIds}
|
||||
onPropertyCreated={handlePropertyCreated}
|
||||
getColumnOrder={getColumnOrder}
|
||||
onColumnReorder={onColumnReorder}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classes.bodyGrid}
|
||||
ref={bodyRef}
|
||||
tabIndex={0}
|
||||
style={{ gridTemplateColumns }}
|
||||
role="rowgroup"
|
||||
>
|
||||
{paddingTop > 0 && (
|
||||
<div style={{ height: paddingTop, gridColumn: "1 / -1" }} />
|
||||
)}
|
||||
{virtualItems.map((virtualRow) => {
|
||||
const row = rows[virtualRow.index];
|
||||
if (!row) return null;
|
||||
return (
|
||||
<GridRow
|
||||
key={row.id}
|
||||
row={row}
|
||||
rowIndex={virtualRow.index}
|
||||
onCellUpdate={onCellUpdate}
|
||||
orderedRowIds={rowIds}
|
||||
columnVisibility={table.getState().columnVisibility}
|
||||
pageId={pageId}
|
||||
dragHandlers={
|
||||
onRowReorder
|
||||
? {
|
||||
onDragStart: handleRowDragStart,
|
||||
onDragOver: handleRowDragOver,
|
||||
onDragEnd: handleRowDragEnd,
|
||||
onDragLeave: handleRowDragLeave,
|
||||
isDragging: rowDragState.dragRowId === row.id,
|
||||
isDropTarget: rowDragState.dropTargetRowId === row.id,
|
||||
dropPosition: rowDragState.dropTargetRowId === row.id ? rowDragState.dropPosition : null,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{paddingBottom > 0 && (
|
||||
<div style={{ height: paddingBottom, gridColumn: "1 / -1" }} />
|
||||
)}
|
||||
<AddRowButton onClick={handleAddRow} />
|
||||
{pageId && <SelectionActionBar pageId={pageId} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,273 +0,0 @@
|
||||
import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||
import { Header, flexRender } from "@tanstack/react-table";
|
||||
import { Badge, Popover } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAtom } from "jotai";
|
||||
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 { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
|
||||
import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
|
||||
import { IBaseRow, IBaseProperty, EditingCell } from "@/features/base/types/base.types";
|
||||
import {
|
||||
activePropertyMenuAtomFamily,
|
||||
propertyMenuDirtyAtomFamily,
|
||||
propertyMenuCloseRequestAtomFamily,
|
||||
editingCellAtomFamily,
|
||||
} from "@/features/base/atoms/base-atoms";
|
||||
import {
|
||||
IconLetterT,
|
||||
IconHash,
|
||||
IconCircleDot,
|
||||
IconProgressCheck,
|
||||
IconTags,
|
||||
IconCalendar,
|
||||
IconUser,
|
||||
IconPaperclip,
|
||||
IconCheckbox,
|
||||
IconLink,
|
||||
IconMail,
|
||||
IconClockPlus,
|
||||
IconClockEdit,
|
||||
IconUserEdit,
|
||||
} from "@tabler/icons-react";
|
||||
import { PropertyMenuContent } from "@/features/base/components/property/property-menu";
|
||||
import { RowNumberHeaderCell } from "./row-number-header-cell";
|
||||
import { BaseDropEdgeIndicator } from "./base-drop-edge-indicator";
|
||||
import { useRowSelection } from "@/features/base/hooks/use-row-selection";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
const COLUMN_DRAG_TYPE = "base-column";
|
||||
|
||||
const typeIcons: Record<string, typeof IconLetterT> = {
|
||||
text: IconLetterT,
|
||||
number: IconHash,
|
||||
select: IconCircleDot,
|
||||
status: IconProgressCheck,
|
||||
multiSelect: IconTags,
|
||||
date: IconCalendar,
|
||||
person: IconUser,
|
||||
file: IconPaperclip,
|
||||
checkbox: IconCheckbox,
|
||||
url: IconLink,
|
||||
email: IconMail,
|
||||
createdAt: IconClockPlus,
|
||||
lastEditedAt: IconClockEdit,
|
||||
lastEditedBy: IconUserEdit,
|
||||
};
|
||||
|
||||
type GridHeaderCellProps = {
|
||||
header: Header<IBaseRow, unknown>;
|
||||
property: IBaseProperty | undefined;
|
||||
loadedRowIds: string[];
|
||||
pageId: string;
|
||||
getColumnOrder: () => string[];
|
||||
onColumnReorder?: (columnId: string, finishIndex: number) => void;
|
||||
};
|
||||
|
||||
export const GridHeaderCell = memo(function GridHeaderCell({
|
||||
header,
|
||||
property,
|
||||
loadedRowIds,
|
||||
pageId,
|
||||
getColumnOrder,
|
||||
onColumnReorder,
|
||||
}: GridHeaderCellProps) {
|
||||
const { t } = useTranslation();
|
||||
const isRowNumber = header.column.id === "__row_number";
|
||||
const isPinned = header.column.getIsPinned();
|
||||
const pinOffset = isPinned ? header.column.getStart("left") : undefined;
|
||||
const { selectionCount } = useRowSelection(pageId);
|
||||
const hasSelection = selectionCount > 0;
|
||||
|
||||
const [activePropertyMenu, setActivePropertyMenu] = useAtom(activePropertyMenuAtomFamily(pageId)) as unknown as [string | null, (val: string | null) => void];
|
||||
const menuOpened = activePropertyMenu === header.column.id;
|
||||
const cellRef = useRef<HTMLDivElement>(null);
|
||||
const [propertyMenuDirty, setPropertyMenuDirty] = useAtom(propertyMenuDirtyAtomFamily(pageId)) as unknown as [boolean, (val: boolean) => void];
|
||||
const [closeRequest, setCloseRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number, (val: number) => void];
|
||||
const [, setEditingCell] = useAtom(editingCellAtomFamily(pageId)) as unknown as [EditingCell, (val: EditingCell) => void];
|
||||
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
|
||||
|
||||
const handleDirtyChange = useCallback((dirty: boolean) => {
|
||||
setPropertyMenuDirty(dirty);
|
||||
}, [setPropertyMenuDirty]);
|
||||
|
||||
const isSortableDisabled = isRowNumber || !!isPinned;
|
||||
|
||||
// onColumnReorder ultimately depends on React Query result objects
|
||||
// (activeView, base) via persistViewConfig — their identity changes on
|
||||
// every cache invalidation (i.e. every WS-driven collab refresh). Holding
|
||||
// the callback in a ref keeps it out of the DnD effect's dep array, so
|
||||
// we don't tear down and re-register the pragmatic-dnd adapter on every
|
||||
// header cell each time another user edits the base.
|
||||
const onColumnReorderRef = useRef(onColumnReorder);
|
||||
useLayoutEffect(() => {
|
||||
onColumnReorderRef.current = onColumnReorder;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const el = cellRef.current;
|
||||
if (!el || isSortableDisabled) return;
|
||||
return combine(
|
||||
draggable({
|
||||
element: el,
|
||||
getInitialData: () => ({
|
||||
type: COLUMN_DRAG_TYPE,
|
||||
columnId: header.column.id,
|
||||
}),
|
||||
onDragStart: () => setIsDragging(true),
|
||||
onDrop: () => setIsDragging(false),
|
||||
}),
|
||||
dropTargetForElements({
|
||||
element: el,
|
||||
canDrop: ({ source }) =>
|
||||
source.data.type === COLUMN_DRAG_TYPE &&
|
||||
source.data.columnId !== header.column.id,
|
||||
getData: ({ input, element }) =>
|
||||
attachClosestEdge(
|
||||
{ columnId: header.column.id },
|
||||
{ input, element, allowedEdges: ["left", "right"] },
|
||||
),
|
||||
onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
|
||||
onDragLeave: () => setClosestEdge(null),
|
||||
onDrop: ({ source, self }) => {
|
||||
setClosestEdge(null);
|
||||
const edge = extractClosestEdge(self.data);
|
||||
if (!edge) return;
|
||||
const order = getColumnOrder();
|
||||
const startIndex = order.indexOf(source.data.columnId as string);
|
||||
const indexOfTarget = order.indexOf(header.column.id);
|
||||
if (startIndex === -1 || indexOfTarget === -1) return;
|
||||
const finishIndex = getReorderDestinationIndex({
|
||||
startIndex,
|
||||
indexOfTarget,
|
||||
closestEdgeOfTarget: edge,
|
||||
axis: "horizontal",
|
||||
});
|
||||
if (finishIndex === startIndex) return;
|
||||
onColumnReorderRef.current?.(source.data.columnId as string, finishIndex);
|
||||
triggerPostMoveFlash(el);
|
||||
liveRegion.announce(`Moved column to position ${finishIndex + 1}`);
|
||||
},
|
||||
}),
|
||||
);
|
||||
}, [header.column.id, isSortableDisabled, getColumnOrder]);
|
||||
|
||||
const handleHeaderClick = useCallback(() => {
|
||||
setEditingCell(null);
|
||||
if (!isRowNumber && property && !isDragging) {
|
||||
if (propertyMenuDirty && !menuOpened) return;
|
||||
setActivePropertyMenu(menuOpened ? null : header.column.id);
|
||||
}
|
||||
}, [isRowNumber, property, isDragging, header.column.id, menuOpened, propertyMenuDirty, setActivePropertyMenu, setEditingCell]);
|
||||
|
||||
const handleMenuClose = useCallback(() => {
|
||||
setActivePropertyMenu(null);
|
||||
}, [setActivePropertyMenu]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!menuOpened) return;
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key !== "Escape") return;
|
||||
if (propertyMenuDirty) {
|
||||
setCloseRequest(closeRequest + 1);
|
||||
} else {
|
||||
handleMenuClose();
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", handler);
|
||||
return () => document.removeEventListener("keydown", handler);
|
||||
}, [menuOpened, propertyMenuDirty, closeRequest, setCloseRequest, handleMenuClose]);
|
||||
|
||||
const TypeIcon = property ? typeIcons[property.type] : undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={cellRef}
|
||||
className={`${classes.headerCell} ${isPinned ? classes.headerCellPinned : ""} ${hasSelection ? classes.hasSelection : ""}`}
|
||||
style={{
|
||||
...(isPinned
|
||||
? ({ "--pin-offset": `${pinOffset}px` } as React.CSSProperties)
|
||||
: {}),
|
||||
...(isRowNumber ? {} : { cursor: "pointer" }),
|
||||
opacity: isDragging ? 0.4 : 1,
|
||||
}}
|
||||
onClick={handleHeaderClick}
|
||||
data-dragging={isDragging || undefined}
|
||||
>
|
||||
{isRowNumber ? (
|
||||
<RowNumberHeaderCell loadedRowIds={loadedRowIds} pageId={pageId} />
|
||||
) : (
|
||||
<div className={classes.headerCellContent}>
|
||||
{TypeIcon && (
|
||||
<TypeIcon size={14} className={classes.headerTypeIcon} />
|
||||
)}
|
||||
<span className={classes.headerCellName}>
|
||||
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||
</span>
|
||||
{property?.pendingType && (
|
||||
<Badge size="xs" color="gray" variant="light" ml={6}>
|
||||
{t("Converting…")}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{header.column.getCanResize() && (
|
||||
<div
|
||||
className={`${classes.resizeHandle} ${
|
||||
header.column.getIsResizing() ? classes.resizeHandleActive : ""
|
||||
}`}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation();
|
||||
header.getResizeHandler()(e);
|
||||
}}
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
header.getResizeHandler()(e);
|
||||
}}
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
)}
|
||||
{closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
|
||||
{property && !isRowNumber && (
|
||||
<Popover
|
||||
opened={menuOpened}
|
||||
onClose={handleMenuClose}
|
||||
position="bottom-start"
|
||||
shadow="md"
|
||||
width={260}
|
||||
withinPortal
|
||||
closeOnClickOutside={false}
|
||||
>
|
||||
<Popover.Target>
|
||||
<div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} />
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown
|
||||
p={0}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<PropertyMenuContent
|
||||
property={property}
|
||||
opened={menuOpened}
|
||||
onClose={handleMenuClose}
|
||||
onDirtyChange={handleDirtyChange}
|
||||
pageId={pageId}
|
||||
/>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,60 +0,0 @@
|
||||
import { memo, useMemo } from "react";
|
||||
import { Table, ColumnOrderState, VisibilityState } from "@tanstack/react-table";
|
||||
import { IBaseRow, IBaseProperty } from "@/features/base/types/base.types";
|
||||
import { GridHeaderCell } from "./grid-header-cell";
|
||||
import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type GridHeaderProps = {
|
||||
table: Table<IBaseRow>;
|
||||
pageId: string;
|
||||
columnOrder: ColumnOrderState;
|
||||
columnVisibility: VisibilityState;
|
||||
properties: IBaseProperty[];
|
||||
loadedRowIds: string[];
|
||||
onPropertyCreated?: () => void;
|
||||
getColumnOrder: () => string[];
|
||||
onColumnReorder?: (columnId: string, finishIndex: number) => void;
|
||||
};
|
||||
|
||||
export const GridHeader = memo(function GridHeader({
|
||||
table,
|
||||
pageId,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
columnOrder: _columnOrder,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
columnVisibility: _columnVisibility,
|
||||
properties,
|
||||
loadedRowIds,
|
||||
onPropertyCreated,
|
||||
getColumnOrder,
|
||||
onColumnReorder,
|
||||
}: GridHeaderProps) {
|
||||
const headerGroups = table.getHeaderGroups();
|
||||
const propertyById = useMemo(() => {
|
||||
const map = new Map<string, IBaseProperty>();
|
||||
for (const p of properties) map.set(p.id, p);
|
||||
return map;
|
||||
}, [properties]);
|
||||
|
||||
return (
|
||||
<div className={classes.headerRow} role="row">
|
||||
{headerGroups[0]?.headers.map((header) => (
|
||||
<GridHeaderCell
|
||||
key={header.id}
|
||||
header={header}
|
||||
property={propertyById.get(header.column.id)}
|
||||
loadedRowIds={loadedRowIds}
|
||||
pageId={pageId}
|
||||
getColumnOrder={getColumnOrder}
|
||||
onColumnReorder={onColumnReorder}
|
||||
/>
|
||||
))}
|
||||
<CreatePropertyPopover
|
||||
pageId={pageId}
|
||||
properties={properties}
|
||||
onPropertyCreated={onPropertyCreated}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,95 +0,0 @@
|
||||
import { memo, useCallback } from "react";
|
||||
import { Row, VisibilityState } from "@tanstack/react-table";
|
||||
import { IBaseRow } from "@/features/base/types/base.types";
|
||||
import { useRowSelection } from "@/features/base/hooks/use-row-selection";
|
||||
import { GridCell } from "./grid-cell";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type RowDragHandlers = {
|
||||
onDragStart: (rowId: string) => void;
|
||||
onDragOver: (rowId: string, e: React.DragEvent) => void;
|
||||
onDragEnd: () => void;
|
||||
onDragLeave: () => void;
|
||||
isDragging: boolean;
|
||||
isDropTarget: boolean;
|
||||
dropPosition: "above" | "below" | null;
|
||||
};
|
||||
|
||||
type GridRowProps = {
|
||||
row: Row<IBaseRow>;
|
||||
rowIndex: number;
|
||||
onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
|
||||
dragHandlers?: RowDragHandlers;
|
||||
orderedRowIds: string[];
|
||||
columnVisibility: VisibilityState;
|
||||
pageId: string;
|
||||
};
|
||||
|
||||
export const GridRow = memo(function GridRow({
|
||||
row,
|
||||
rowIndex,
|
||||
onCellUpdate,
|
||||
dragHandlers,
|
||||
orderedRowIds,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
columnVisibility: _columnVisibility,
|
||||
pageId,
|
||||
}: GridRowProps) {
|
||||
const isSelected = useRowSelection(pageId).isSelected(row.id);
|
||||
const handleDragStart = useCallback(
|
||||
(e: React.DragEvent) => {
|
||||
e.dataTransfer.effectAllowed = "move";
|
||||
e.dataTransfer.setData("text/plain", row.id);
|
||||
dragHandlers?.onDragStart(row.id);
|
||||
},
|
||||
[row.id, dragHandlers],
|
||||
);
|
||||
|
||||
const handleDragOver = useCallback(
|
||||
(e: React.DragEvent) => {
|
||||
dragHandlers?.onDragOver(row.id, e);
|
||||
},
|
||||
[row.id, dragHandlers],
|
||||
);
|
||||
|
||||
const dropIndicatorClass = dragHandlers?.isDropTarget
|
||||
? dragHandlers.dropPosition === "above"
|
||||
? classes.rowDropAbove
|
||||
: classes.rowDropBelow
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${classes.row} ${dragHandlers?.isDragging ? classes.rowDragging : ""} ${dropIndicatorClass} ${isSelected ? classes.rowSelected : ""}`}
|
||||
role="row"
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
dragHandlers?.onDragEnd();
|
||||
}}
|
||||
onDragLeave={dragHandlers?.onDragLeave}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => {
|
||||
const isRowNumber = cell.column.id === "__row_number";
|
||||
return (
|
||||
<GridCell
|
||||
key={cell.id}
|
||||
cell={cell}
|
||||
rowIndex={rowIndex}
|
||||
onCellUpdate={onCellUpdate}
|
||||
orderedRowIds={orderedRowIds}
|
||||
pageId={pageId}
|
||||
rowDragProps={
|
||||
isRowNumber && dragHandlers
|
||||
? {
|
||||
draggable: true,
|
||||
onDragStart: handleDragStart,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,76 +0,0 @@
|
||||
import { memo, useCallback } from "react";
|
||||
import { Checkbox } from "@mantine/core";
|
||||
import { IconGripVertical } from "@tabler/icons-react";
|
||||
import { useRowSelection } from "@/features/base/hooks/use-row-selection";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type RowDragProps = {
|
||||
draggable: boolean;
|
||||
onDragStart: (e: React.DragEvent) => void;
|
||||
};
|
||||
|
||||
type RowNumberCellProps = {
|
||||
rowId: string;
|
||||
rowIndex: number;
|
||||
orderedRowIds: string[];
|
||||
isPinned: boolean;
|
||||
pinOffset?: number;
|
||||
rowDragProps?: RowDragProps;
|
||||
pageId: string;
|
||||
};
|
||||
|
||||
export const RowNumberCell = memo(function RowNumberCell({
|
||||
rowId,
|
||||
rowIndex,
|
||||
orderedRowIds,
|
||||
isPinned,
|
||||
pinOffset,
|
||||
rowDragProps,
|
||||
pageId,
|
||||
}: RowNumberCellProps) {
|
||||
const { isSelected, toggle } = useRowSelection(pageId);
|
||||
const selected = isSelected(rowId);
|
||||
|
||||
const handleCheckboxChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const nativeEvent = e.nativeEvent as MouseEvent;
|
||||
toggle(rowId, {
|
||||
shiftKey: nativeEvent.shiftKey === true,
|
||||
rowIndex,
|
||||
orderedRowIds,
|
||||
});
|
||||
},
|
||||
[rowId, rowIndex, orderedRowIds, toggle],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${classes.cell} ${classes.rowNumberCell} ${isPinned ? classes.cellPinned : ""}`}
|
||||
style={
|
||||
isPinned
|
||||
? ({ "--pin-offset": `${pinOffset ?? 0}px` } as React.CSSProperties)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<div className={classes.rowNumberCellInner}>
|
||||
<span
|
||||
className={classes.rowNumberDragHandle}
|
||||
draggable={rowDragProps?.draggable}
|
||||
onDragStart={rowDragProps?.onDragStart}
|
||||
aria-label="Drag row"
|
||||
>
|
||||
<IconGripVertical size={12} />
|
||||
</span>
|
||||
<span className={classes.rowNumberCheckbox}>
|
||||
<Checkbox
|
||||
size="xs"
|
||||
checked={selected}
|
||||
onChange={handleCheckboxChange}
|
||||
aria-label="Select row"
|
||||
/>
|
||||
</span>
|
||||
<span className={classes.rowNumberIndex}>{rowIndex + 1}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,50 +0,0 @@
|
||||
import { memo, useMemo } from "react";
|
||||
import { Checkbox, Tooltip } from "@mantine/core";
|
||||
import { useRowSelection } from "@/features/base/hooks/use-row-selection";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type RowNumberHeaderCellProps = {
|
||||
loadedRowIds: string[];
|
||||
pageId: string;
|
||||
};
|
||||
|
||||
export const RowNumberHeaderCell = memo(function RowNumberHeaderCell({
|
||||
loadedRowIds,
|
||||
pageId,
|
||||
}: RowNumberHeaderCellProps) {
|
||||
const { selectedIds, toggleAll } = useRowSelection(pageId);
|
||||
|
||||
const { checked, indeterminate } = useMemo(() => {
|
||||
if (loadedRowIds.length === 0) {
|
||||
return { checked: false, indeterminate: false };
|
||||
}
|
||||
const selectedInLoaded = loadedRowIds.reduce(
|
||||
(acc, id) => (selectedIds.has(id) ? acc + 1 : acc),
|
||||
0,
|
||||
);
|
||||
return {
|
||||
checked: selectedInLoaded === loadedRowIds.length,
|
||||
indeterminate:
|
||||
selectedInLoaded > 0 && selectedInLoaded < loadedRowIds.length,
|
||||
};
|
||||
}, [loadedRowIds, selectedIds]);
|
||||
|
||||
if (loadedRowIds.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className={classes.rowNumberHeaderInner}>
|
||||
<span className={classes.rowNumberHeaderHash}>#</span>
|
||||
<span className={classes.rowNumberHeaderCheckbox}>
|
||||
<Tooltip label="Select all loaded rows" withinPortal>
|
||||
<Checkbox
|
||||
size="xs"
|
||||
checked={checked}
|
||||
indeterminate={indeterminate}
|
||||
onChange={() => toggleAll(loadedRowIds)}
|
||||
aria-label="Select all loaded rows"
|
||||
/>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -1,52 +0,0 @@
|
||||
import { memo } from "react";
|
||||
import { Transition } from "@mantine/core";
|
||||
import { IconTrash, IconX } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useRowSelection } from "@/features/base/hooks/use-row-selection";
|
||||
import { useDeleteSelectedRows } from "@/features/base/hooks/use-delete-selected-rows";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type SelectionActionBarProps = {
|
||||
pageId: string;
|
||||
};
|
||||
|
||||
export const SelectionActionBar = memo(function SelectionActionBar({
|
||||
pageId,
|
||||
}: SelectionActionBarProps) {
|
||||
const { t } = useTranslation();
|
||||
const { selectionCount, clear } = useRowSelection(pageId);
|
||||
const { deleteSelected, isPending } = useDeleteSelectedRows(pageId);
|
||||
|
||||
const isOpen = selectionCount > 0;
|
||||
|
||||
return (
|
||||
<Transition mounted={isOpen} transition="slide-up" duration={150}>
|
||||
{(styles) => (
|
||||
<div className={classes.selectionActionBarWrapper} style={styles}>
|
||||
<div className={classes.selectionActionBar} role="toolbar">
|
||||
<span className={classes.selectionActionBarCount}>
|
||||
{t("{{count}} selected", { count: selectionCount })}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className={classes.selectionActionBarDelete}
|
||||
disabled={isPending}
|
||||
onClick={() => void deleteSelected()}
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
{t("Delete")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={classes.selectionActionBarClose}
|
||||
onClick={clear}
|
||||
aria-label={t("Clear selection")}
|
||||
>
|
||||
<IconX size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Transition>
|
||||
);
|
||||
});
|
||||
-110
@@ -1,110 +0,0 @@
|
||||
import {
|
||||
conversionWarning,
|
||||
NON_USER_TARGET_TYPES,
|
||||
} from "../conversion-warning";
|
||||
|
||||
describe("conversionWarning", () => {
|
||||
it("returns the choice-name copy for select → text", () => {
|
||||
expect(conversionWarning("select", "text")).toBe(
|
||||
"Cells will be replaced with the option name.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns the same copy for status → text", () => {
|
||||
expect(conversionWarning("status", "text")).toBe(
|
||||
"Cells will be replaced with the option name.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns comma-list copy for multiSelect → text", () => {
|
||||
expect(conversionWarning("multiSelect", "text")).toBe(
|
||||
"Cells will be replaced with a comma-separated list of option names.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns person-name copy for person → text", () => {
|
||||
expect(conversionWarning("person", "text")).toBe(
|
||||
"Cells will be replaced with the person's name.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns file-name list copy for file → text", () => {
|
||||
expect(conversionWarning("file", "text")).toBe(
|
||||
"Cells will be replaced with a comma-separated list of file names.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns page-title copy for page → text", () => {
|
||||
expect(conversionWarning("page", "text")).toBe(
|
||||
"Cells will be replaced with the page title.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns first-item-kept copy for multiSelect → select", () => {
|
||||
expect(conversionWarning("multiSelect", "select")).toBe(
|
||||
"Only the first selected item per row will be kept; the rest will be discarded.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns single-item-list copy for select → multiSelect", () => {
|
||||
expect(conversionWarning("select", "multiSelect")).toBe(
|
||||
"Existing values become single-item lists. No data is lost.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns page-cleared copy when target is page from non-page", () => {
|
||||
expect(conversionWarning("text", "page")).toBe(
|
||||
"Cells that aren't already a page reference will be cleared.",
|
||||
);
|
||||
expect(conversionWarning("number", "page")).toBe(
|
||||
"Cells that aren't already a page reference will be cleared.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns number-parse-cleared copy when target is number from non-numeric", () => {
|
||||
expect(conversionWarning("select", "number")).toBe(
|
||||
"Cells that can't be parsed as a number will be cleared.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns date-parse-cleared copy when target is date", () => {
|
||||
expect(conversionWarning("text", "date")).toBe(
|
||||
"Cells that can't be parsed as a date will be cleared.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns checkbox-coercion copy when target is checkbox", () => {
|
||||
expect(conversionWarning("text", "checkbox")).toBe(
|
||||
"Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns url-cleared copy when target is url", () => {
|
||||
expect(conversionWarning("text", "url")).toBe(
|
||||
"Cells that aren't a valid URL will be cleared.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns email-cleared copy when target is email", () => {
|
||||
expect(conversionWarning("text", "email")).toBe(
|
||||
"Cells that aren't a valid email address will be cleared.",
|
||||
);
|
||||
});
|
||||
|
||||
it("returns the default safe copy for number → text", () => {
|
||||
expect(conversionWarning("number", "text")).toBe(
|
||||
"Cells will be reinterpreted under the new type.",
|
||||
);
|
||||
});
|
||||
|
||||
describe("NON_USER_TARGET_TYPES", () => {
|
||||
it("contains exactly the 4 non-user types", () => {
|
||||
expect(Array.from(NON_USER_TARGET_TYPES).sort()).toEqual([
|
||||
"createdAt",
|
||||
"formula",
|
||||
"lastEditedAt",
|
||||
"lastEditedBy",
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,592 +0,0 @@
|
||||
import { useState, useCallback, useMemo, useEffect, useRef, useLayoutEffect } from "react";
|
||||
import {
|
||||
TextInput,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Button,
|
||||
Popover,
|
||||
SimpleGrid,
|
||||
UnstyledButton,
|
||||
CloseButton,
|
||||
Divider,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconPlus,
|
||||
IconGripVertical,
|
||||
IconArrowsSort,
|
||||
} from "@tabler/icons-react";
|
||||
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 { triggerPostMoveFlash } from "@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash";
|
||||
import * as liveRegion from "@atlaskit/pragmatic-drag-and-drop-live-region";
|
||||
import { BaseDropEdgeIndicator } from "@/features/base/components/grid/base-drop-edge-indicator";
|
||||
import { Choice } from "@/features/base/types/base.types";
|
||||
import { choiceColor } from "@/features/base/components/cells/choice-color";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { v7 as uuid7 } from "uuid";
|
||||
|
||||
const CHOICE_COLORS = [
|
||||
"gray", "red", "pink", "grape", "violet", "indigo",
|
||||
"blue", "cyan", "teal", "green", "lime", "yellow", "orange",
|
||||
];
|
||||
|
||||
const STATUS_CATEGORIES = [
|
||||
{ value: "todo", label: "To Do" },
|
||||
{ value: "inProgress", label: "In Progress" },
|
||||
{ value: "complete", label: "Complete" },
|
||||
] as const;
|
||||
|
||||
type ChoiceEditorProps = {
|
||||
initialChoices: Choice[];
|
||||
onSave: (choices: Choice[]) => void;
|
||||
onClose: () => void;
|
||||
onDirtyChange?: (dirty: boolean) => void;
|
||||
showCategories?: boolean;
|
||||
hideButtons?: boolean;
|
||||
};
|
||||
|
||||
export function ChoiceEditor({
|
||||
initialChoices,
|
||||
onSave,
|
||||
onClose,
|
||||
onDirtyChange,
|
||||
showCategories = false,
|
||||
hideButtons = false,
|
||||
}: ChoiceEditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const [draft, setDraft] = useState<Choice[]>(initialChoices);
|
||||
const [focusChoiceId, setFocusChoiceId] = useState<string | null>(null);
|
||||
|
||||
// Sync from parent only when not in live mode (hideButtons = create flow)
|
||||
useEffect(() => {
|
||||
if (!hideButtons) {
|
||||
setDraft(initialChoices);
|
||||
}
|
||||
}, [initialChoices, hideButtons]);
|
||||
|
||||
// In live mode, propagate draft changes to parent immediately
|
||||
const onSaveRef = useRef(onSave);
|
||||
onSaveRef.current = onSave;
|
||||
|
||||
useEffect(() => {
|
||||
if (hideButtons) {
|
||||
onSaveRef.current(draft.filter((c) => c.name.trim()));
|
||||
}
|
||||
}, [hideButtons, draft]);
|
||||
|
||||
const isDirty = useMemo(() => {
|
||||
if (draft.length !== initialChoices.length) return true;
|
||||
return draft.some((d, i) => {
|
||||
const o = initialChoices[i];
|
||||
return d.id !== o.id || d.name !== o.name || d.color !== o.color || d.category !== o.category;
|
||||
});
|
||||
}, [draft, initialChoices]);
|
||||
|
||||
useEffect(() => {
|
||||
onDirtyChange?.(isDirty);
|
||||
}, [isDirty, onDirtyChange]);
|
||||
|
||||
const hasEmptyNames = draft.some((c) => !c.name.trim());
|
||||
|
||||
const handleRename = useCallback((choiceId: string, name: string) => {
|
||||
setDraft((prev) => prev.map((c) => (c.id === choiceId ? { ...c, name } : c)));
|
||||
}, []);
|
||||
|
||||
const handleColorChange = useCallback((choiceId: string, color: string) => {
|
||||
setDraft((prev) => prev.map((c) => (c.id === choiceId ? { ...c, color } : c)));
|
||||
}, []);
|
||||
|
||||
const handleRemove = useCallback((choiceId: string) => {
|
||||
setDraft((prev) => prev.filter((c) => c.id !== choiceId));
|
||||
}, []);
|
||||
|
||||
const handleAdd = useCallback((category?: "todo" | "inProgress" | "complete") => {
|
||||
const id = uuid7();
|
||||
setDraft((prev) => {
|
||||
const colorIndex = prev.length % CHOICE_COLORS.length;
|
||||
const newChoice: Choice = {
|
||||
id,
|
||||
name: "",
|
||||
color: CHOICE_COLORS[colorIndex],
|
||||
...(category ? { category } : {}),
|
||||
};
|
||||
return [...prev, newChoice];
|
||||
});
|
||||
setFocusChoiceId(id);
|
||||
}, []);
|
||||
|
||||
const handleAlphabetize = useCallback(() => {
|
||||
setDraft((prev) => [...prev].sort((a, b) => a.name.localeCompare(b.name)));
|
||||
}, []);
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
const cleaned = draft.filter((c) => c.name.trim());
|
||||
onSave(cleaned);
|
||||
onClose();
|
||||
}, [draft, onSave, onClose]);
|
||||
|
||||
const handleCancel = useCallback(() => {
|
||||
setDraft(initialChoices);
|
||||
onDirtyChange?.(false);
|
||||
onClose();
|
||||
}, [initialChoices, onDirtyChange, onClose]);
|
||||
|
||||
const handleReorder = useCallback(
|
||||
(activeId: string, targetId: string, edge: Edge) => {
|
||||
setDraft((prev) => {
|
||||
const startIndex = prev.findIndex((c) => c.id === activeId);
|
||||
const indexOfTarget = prev.findIndex((c) => c.id === targetId);
|
||||
if (startIndex === -1 || indexOfTarget === -1) return prev;
|
||||
const finishIndex = getReorderDestinationIndex({
|
||||
startIndex,
|
||||
indexOfTarget,
|
||||
closestEdgeOfTarget: edge,
|
||||
axis: "vertical",
|
||||
});
|
||||
if (finishIndex === startIndex) return prev;
|
||||
return reorder({ list: prev, startIndex, finishIndex });
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleCategoryReorder = useCallback(
|
||||
(category: string, activeId: string, targetId: string, edge: Edge) => {
|
||||
setDraft((prev) => {
|
||||
const catChoices = prev.filter((c) => (c.category ?? "todo") === category);
|
||||
const startIndex = catChoices.findIndex((c) => c.id === activeId);
|
||||
const indexOfTarget = catChoices.findIndex((c) => c.id === targetId);
|
||||
if (startIndex === -1 || indexOfTarget === -1) return prev;
|
||||
const finishIndex = getReorderDestinationIndex({
|
||||
startIndex,
|
||||
indexOfTarget,
|
||||
closestEdgeOfTarget: edge,
|
||||
axis: "vertical",
|
||||
});
|
||||
if (finishIndex === startIndex) return prev;
|
||||
const reordered = reorder({
|
||||
list: catChoices,
|
||||
startIndex,
|
||||
finishIndex,
|
||||
});
|
||||
const result: Choice[] = [];
|
||||
for (const cat of ["todo", "inProgress", "complete"]) {
|
||||
if (cat === category) {
|
||||
result.push(...reordered);
|
||||
} else {
|
||||
result.push(...prev.filter((c) => (c.category ?? "todo") === cat));
|
||||
}
|
||||
}
|
||||
return result;
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<Group justify="space-between">
|
||||
<Text size="xs" fw={600}>
|
||||
{t("Options")}
|
||||
</Text>
|
||||
<UnstyledButton onClick={handleAlphabetize} style={{ display: "flex", alignItems: "center", gap: 4 }}>
|
||||
<IconArrowsSort size={14} color="var(--mantine-color-dimmed)" />
|
||||
<Text size="xs" c="dimmed">{t("Alphabetize")}</Text>
|
||||
</UnstyledButton>
|
||||
</Group>
|
||||
|
||||
{showCategories ? (
|
||||
<StatusChoiceList
|
||||
draft={draft}
|
||||
focusChoiceId={focusChoiceId}
|
||||
onFocused={() => setFocusChoiceId(null)}
|
||||
onRename={handleRename}
|
||||
onColorChange={handleColorChange}
|
||||
onRemove={handleRemove}
|
||||
onAdd={handleAdd}
|
||||
onCategoryReorder={handleCategoryReorder}
|
||||
/>
|
||||
) : (
|
||||
<FlatChoiceList
|
||||
draft={draft}
|
||||
focusChoiceId={focusChoiceId}
|
||||
onFocused={() => setFocusChoiceId(null)}
|
||||
onRename={handleRename}
|
||||
onColorChange={handleColorChange}
|
||||
onRemove={handleRemove}
|
||||
onAdd={handleAdd}
|
||||
onReorder={handleReorder}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!hideButtons && (
|
||||
<>
|
||||
<Divider />
|
||||
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button variant="default" size="xs" onClick={handleCancel}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button size="xs" onClick={handleSave} disabled={!isDirty || hasEmptyNames}>
|
||||
{t("Save")}
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function FlatChoiceList({
|
||||
draft,
|
||||
focusChoiceId,
|
||||
onFocused,
|
||||
onRename,
|
||||
onColorChange,
|
||||
onRemove,
|
||||
onAdd,
|
||||
onReorder,
|
||||
}: {
|
||||
draft: Choice[];
|
||||
focusChoiceId: string | null;
|
||||
onFocused: () => void;
|
||||
onRename: (id: string, name: string) => void;
|
||||
onColorChange: (id: string, color: string) => void;
|
||||
onRemove: (id: string) => void;
|
||||
onAdd: () => void;
|
||||
onReorder: (activeId: string, targetId: string, edge: Edge) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Stack gap={4}>
|
||||
{draft.map((choice) => (
|
||||
<SortableChoiceRow
|
||||
key={choice.id}
|
||||
choice={choice}
|
||||
dragType="base-choice-flat"
|
||||
autoFocus={choice.id === focusChoiceId}
|
||||
onFocused={onFocused}
|
||||
onRename={onRename}
|
||||
onColorChange={onColorChange}
|
||||
onRemove={onRemove}
|
||||
onReorder={onReorder}
|
||||
/>
|
||||
))}
|
||||
|
||||
<UnstyledButton
|
||||
onClick={() => onAdd()}
|
||||
style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 0" }}
|
||||
>
|
||||
<IconPlus size={14} color="var(--mantine-color-dimmed)" />
|
||||
<Text size="xs" c="dimmed">{t("Add option")}</Text>
|
||||
</UnstyledButton>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusChoiceList({
|
||||
draft,
|
||||
focusChoiceId,
|
||||
onFocused,
|
||||
onRename,
|
||||
onColorChange,
|
||||
onRemove,
|
||||
onAdd,
|
||||
onCategoryReorder,
|
||||
}: {
|
||||
draft: Choice[];
|
||||
focusChoiceId: string | null;
|
||||
onFocused: () => void;
|
||||
onRename: (id: string, name: string) => void;
|
||||
onColorChange: (id: string, color: string) => void;
|
||||
onRemove: (id: string) => void;
|
||||
onAdd: (category: "todo" | "inProgress" | "complete") => void;
|
||||
onCategoryReorder: (category: string, activeId: string, targetId: string, edge: Edge) => void;
|
||||
}) {
|
||||
const grouped = useMemo(() => {
|
||||
const groups: Record<string, Choice[]> = { todo: [], inProgress: [], complete: [] };
|
||||
for (const choice of draft) {
|
||||
const cat = choice.category ?? "todo";
|
||||
(groups[cat] ?? groups.todo).push(choice);
|
||||
}
|
||||
return groups;
|
||||
}, [draft]);
|
||||
|
||||
return (
|
||||
<Stack gap="sm">
|
||||
{STATUS_CATEGORIES.map(({ value: category, label }) => (
|
||||
<CategorySection
|
||||
key={category}
|
||||
category={category as "todo" | "inProgress" | "complete"}
|
||||
label={label}
|
||||
choices={grouped[category] ?? []}
|
||||
focusChoiceId={focusChoiceId}
|
||||
onFocused={onFocused}
|
||||
onRename={onRename}
|
||||
onColorChange={onColorChange}
|
||||
onRemove={onRemove}
|
||||
onAdd={onAdd}
|
||||
onReorder={onCategoryReorder}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function CategorySection({
|
||||
category,
|
||||
label,
|
||||
choices,
|
||||
focusChoiceId,
|
||||
onFocused,
|
||||
onRename,
|
||||
onColorChange,
|
||||
onRemove,
|
||||
onAdd,
|
||||
onReorder,
|
||||
}: {
|
||||
category: "todo" | "inProgress" | "complete";
|
||||
label: string;
|
||||
choices: Choice[];
|
||||
focusChoiceId: string | null;
|
||||
onFocused: () => void;
|
||||
onRename: (id: string, name: string) => void;
|
||||
onColorChange: (id: string, color: string) => void;
|
||||
onRemove: (id: string) => void;
|
||||
onAdd: (category: "todo" | "inProgress" | "complete") => void;
|
||||
onReorder: (
|
||||
category: string,
|
||||
activeId: string,
|
||||
targetId: string,
|
||||
edge: Edge,
|
||||
) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleRowReorder = useCallback(
|
||||
(activeId: string, targetId: string, edge: Edge) => {
|
||||
onReorder(category, activeId, targetId, edge);
|
||||
},
|
||||
[category, onReorder],
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack gap={4}>
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t(label)}
|
||||
</Text>
|
||||
|
||||
{choices.map((choice) => (
|
||||
<SortableChoiceRow
|
||||
key={choice.id}
|
||||
choice={choice}
|
||||
// Per-category drag type isolates drops to within the same category.
|
||||
// A drag started in "Todo" reports type "base-choice-status:todo";
|
||||
// an "In Progress" row's canDrop matches against its own
|
||||
// "base-choice-status:inProgress" type and rejects.
|
||||
dragType={`base-choice-status:${category}`}
|
||||
autoFocus={choice.id === focusChoiceId}
|
||||
onFocused={onFocused}
|
||||
onRename={onRename}
|
||||
onColorChange={onColorChange}
|
||||
onRemove={onRemove}
|
||||
onReorder={handleRowReorder}
|
||||
/>
|
||||
))}
|
||||
|
||||
<UnstyledButton
|
||||
onClick={() => onAdd(category)}
|
||||
style={{ display: "flex", alignItems: "center", gap: 6, padding: "4px 0" }}
|
||||
>
|
||||
<IconPlus size={14} color="var(--mantine-color-dimmed)" />
|
||||
<Text size="xs" c="dimmed">{t("Add option")}</Text>
|
||||
</UnstyledButton>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function SortableChoiceRow({
|
||||
choice,
|
||||
dragType,
|
||||
autoFocus,
|
||||
onFocused,
|
||||
onRename,
|
||||
onColorChange,
|
||||
onRemove,
|
||||
onReorder,
|
||||
}: {
|
||||
choice: Choice;
|
||||
dragType: string;
|
||||
autoFocus?: boolean;
|
||||
onFocused?: () => void;
|
||||
onRename: (id: string, name: string) => void;
|
||||
onColorChange: (id: string, color: string) => void;
|
||||
onRemove: (id: string) => void;
|
||||
onReorder: (activeId: string, targetId: string, edge: Edge) => void;
|
||||
}) {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const rowRef = useRef<HTMLDivElement>(null);
|
||||
const handleRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
|
||||
|
||||
// Same rationale as grid-header-cell: keep `onReorder` out of the DnD
|
||||
// effect's deps so we don't tear down the adapter when the parent
|
||||
// re-renders with a new closure.
|
||||
const onReorderRef = useRef(onReorder);
|
||||
useLayoutEffect(() => {
|
||||
onReorderRef.current = onReorder;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (autoFocus) {
|
||||
inputRef.current?.focus();
|
||||
onFocused?.();
|
||||
}
|
||||
}, [autoFocus, onFocused]);
|
||||
|
||||
useEffect(() => {
|
||||
const row = rowRef.current;
|
||||
const handle = handleRef.current;
|
||||
if (!row || !handle) return;
|
||||
return combine(
|
||||
draggable({
|
||||
element: row,
|
||||
// Only the grip icon initiates the drag (preserves text-input clicks
|
||||
// and close-button clicks). The native preview is still derived from
|
||||
// `element` (the full row).
|
||||
dragHandle: handle,
|
||||
getInitialData: () => ({ type: dragType, choiceId: choice.id }),
|
||||
onDragStart: () => setIsDragging(true),
|
||||
onDrop: () => setIsDragging(false),
|
||||
}),
|
||||
dropTargetForElements({
|
||||
element: row,
|
||||
canDrop: ({ source }) =>
|
||||
source.data.type === dragType &&
|
||||
source.data.choiceId !== choice.id,
|
||||
getData: ({ input, element }) =>
|
||||
attachClosestEdge(
|
||||
{ choiceId: choice.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.choiceId as string,
|
||||
choice.id,
|
||||
edge,
|
||||
);
|
||||
triggerPostMoveFlash(row);
|
||||
liveRegion.announce("Moved option");
|
||||
},
|
||||
}),
|
||||
);
|
||||
}, [choice.id, dragType]);
|
||||
|
||||
const hasError = !choice.name.trim();
|
||||
|
||||
return (
|
||||
<Group
|
||||
ref={rowRef}
|
||||
gap={6}
|
||||
wrap="nowrap"
|
||||
align="center"
|
||||
style={{
|
||||
position: "relative",
|
||||
opacity: isDragging ? 0.4 : 1,
|
||||
}}
|
||||
data-dragging={isDragging || undefined}
|
||||
>
|
||||
<div
|
||||
ref={handleRef}
|
||||
style={{ flexShrink: 0, cursor: "grab", display: "flex", alignItems: "center" }}
|
||||
>
|
||||
<IconGripVertical size={14} style={{ opacity: 0.4 }} />
|
||||
</div>
|
||||
<ColorDot color={choice.color} onChange={(c) => onColorChange(choice.id, c)} />
|
||||
<TextInput
|
||||
ref={inputRef}
|
||||
size="xs"
|
||||
value={choice.name}
|
||||
onChange={(e) => onRename(choice.id, e.currentTarget.value)}
|
||||
style={{ flex: 1 }}
|
||||
error={hasError}
|
||||
styles={hasError ? { input: { borderColor: "var(--mantine-color-red-6)" } } : undefined}
|
||||
/>
|
||||
<CloseButton size="sm" onClick={() => onRemove(choice.id)} />
|
||||
{closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
function ColorDot({
|
||||
color,
|
||||
onChange,
|
||||
}: {
|
||||
color: string;
|
||||
onChange: (color: string) => void;
|
||||
}) {
|
||||
const [opened, setOpened] = useState(false);
|
||||
const colors = choiceColor(color);
|
||||
|
||||
return (
|
||||
<Popover opened={opened} onChange={setOpened} position="bottom" shadow="sm" withinPortal>
|
||||
<Popover.Target>
|
||||
<UnstyledButton
|
||||
onClick={() => setOpened((o) => !o)}
|
||||
style={{
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: colors.backgroundColor as string,
|
||||
border: `2px solid ${colors.color as string}`,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown p={8}>
|
||||
<SimpleGrid cols={5} spacing={6}>
|
||||
{CHOICE_COLORS.map((c) => {
|
||||
const dotColors = choiceColor(c);
|
||||
return (
|
||||
<UnstyledButton
|
||||
key={c}
|
||||
onClick={() => {
|
||||
onChange(c);
|
||||
setOpened(false);
|
||||
}}
|
||||
style={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: dotColors.backgroundColor as string,
|
||||
border: c === color
|
||||
? `2px solid ${dotColors.color as string}`
|
||||
: "2px solid transparent",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
import type { BasePropertyType } from "@/features/base/types/base.types";
|
||||
|
||||
export const NON_USER_TARGET_TYPES = new Set<BasePropertyType>([
|
||||
"createdAt",
|
||||
"lastEditedAt",
|
||||
"lastEditedBy",
|
||||
"formula",
|
||||
]);
|
||||
|
||||
/*
|
||||
* Returns the warning copy shown in the property-menu's
|
||||
* `confirmTypeChange` panel before the user applies a type change.
|
||||
* Strings are i18n source keys (translation files key them by their
|
||||
* exact text). Buckets are ordered most-specific first; the default
|
||||
* branch covers safe reinterpretations like text ↔ number, text → url,
|
||||
* text → email.
|
||||
*/
|
||||
export function conversionWarning(
|
||||
from: BasePropertyType,
|
||||
to: BasePropertyType,
|
||||
): string {
|
||||
if (to === "text") {
|
||||
if (from === "select" || from === "status") {
|
||||
return "Cells will be replaced with the option name.";
|
||||
}
|
||||
if (from === "multiSelect") {
|
||||
return "Cells will be replaced with a comma-separated list of option names.";
|
||||
}
|
||||
if (from === "person") {
|
||||
return "Cells will be replaced with the person's name.";
|
||||
}
|
||||
if (from === "file") {
|
||||
return "Cells will be replaced with a comma-separated list of file names.";
|
||||
}
|
||||
if (from === "page") {
|
||||
return "Cells will be replaced with the page title.";
|
||||
}
|
||||
}
|
||||
|
||||
if (to === "select" && from === "multiSelect") {
|
||||
return "Only the first selected item per row will be kept; the rest will be discarded.";
|
||||
}
|
||||
|
||||
if (to === "multiSelect" && from === "select") {
|
||||
return "Existing values become single-item lists. No data is lost.";
|
||||
}
|
||||
|
||||
if (to === "page") {
|
||||
return "Cells that aren't already a page reference will be cleared.";
|
||||
}
|
||||
|
||||
if (to === "number" && from !== "number") {
|
||||
return "Cells that can't be parsed as a number will be cleared.";
|
||||
}
|
||||
|
||||
if (to === "date" && from !== "date") {
|
||||
return "Cells that can't be parsed as a date will be cleared.";
|
||||
}
|
||||
|
||||
if (to === "checkbox" && from !== "checkbox") {
|
||||
return "Cells will be coerced (yes/true/1 become checked; everything else becomes unchecked or cleared).";
|
||||
}
|
||||
|
||||
if ((to === "url" || to === "email") && from !== to) {
|
||||
return to === "url"
|
||||
? "Cells that aren't a valid URL will be cleared."
|
||||
: "Cells that aren't a valid email address will be cleared.";
|
||||
}
|
||||
|
||||
return "Cells will be reinterpreted under the new type.";
|
||||
}
|
||||
@@ -1,397 +0,0 @@
|
||||
import { useState, useCallback, useRef, useEffect, useMemo } from "react";
|
||||
import {
|
||||
Popover,
|
||||
Portal,
|
||||
TextInput,
|
||||
Button,
|
||||
Group,
|
||||
Stack,
|
||||
Divider,
|
||||
UnstyledButton,
|
||||
Text,
|
||||
ScrollArea,
|
||||
} from "@mantine/core";
|
||||
import { IconPlus, IconChevronRight } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
BasePropertyType,
|
||||
IBaseProperty,
|
||||
TypeOptions,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { useCreatePropertyMutation } from "@/features/base/queries/base-property-query";
|
||||
import { PropertyTypePicker, propertyTypes } from "./property-type-picker";
|
||||
import { PropertyOptions } from "./property-options";
|
||||
import { FormulaEditor } from "../formula/formula-editor";
|
||||
import classes from "@/features/base/styles/grid.module.css";
|
||||
|
||||
type CreatePropertyPopoverProps = {
|
||||
pageId: string;
|
||||
properties?: IBaseProperty[];
|
||||
onPropertyCreated?: () => void;
|
||||
};
|
||||
|
||||
type Panel = "typePicker" | "configure" | "confirmDiscard";
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
// Keep in sync with the switch cases in PropertyOptions
|
||||
const typesWithOptions = new Set<BasePropertyType>([
|
||||
"select",
|
||||
"multiSelect",
|
||||
"status",
|
||||
"number",
|
||||
"date",
|
||||
"person",
|
||||
]);
|
||||
|
||||
export function CreatePropertyPopover({ pageId, properties, onPropertyCreated }: CreatePropertyPopoverProps) {
|
||||
const { t } = useTranslation();
|
||||
const [opened, setOpened] = useState(false);
|
||||
const [panel, setPanel] = useState<Panel>("typePicker");
|
||||
const [selectedType, setSelectedType] = useState<BasePropertyType | null>(null);
|
||||
const [name, setName] = useState("");
|
||||
const [typeOptions, setTypeOptions] = useState<Record<string, unknown>>({});
|
||||
const nameInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const createPropertyMutation = useCreatePropertyMutation();
|
||||
|
||||
const selectedTypeDef = useMemo(
|
||||
() => propertyTypes.find((pt) => pt.type === selectedType),
|
||||
[selectedType],
|
||||
);
|
||||
const selectedTypeLabel = selectedTypeDef ? t(selectedTypeDef.labelKey) : "";
|
||||
const selectedTypeIcon = selectedTypeDef?.icon;
|
||||
|
||||
const hasContent = useMemo(() => {
|
||||
return name.trim().length > 0 || Object.keys(typeOptions).length > 0;
|
||||
}, [name, typeOptions]);
|
||||
|
||||
const nameTaken = useMemo(() => {
|
||||
const trimmed = name.trim().toLowerCase();
|
||||
if (!trimmed) return false;
|
||||
return (properties ?? []).some(
|
||||
(p) => p.name.trim().toLowerCase() === trimmed,
|
||||
);
|
||||
}, [name, properties]);
|
||||
|
||||
// When the user leaves Name blank, fall back to the type label — and if
|
||||
// that's already taken, suffix `n` until we find one that's free
|
||||
// ("Text", "Text 1", "Text 2", …). Mirrors how other tools auto-number
|
||||
// default field names.
|
||||
const fallbackName = useMemo(() => {
|
||||
const base = selectedTypeLabel || "Field";
|
||||
const existing = new Set(
|
||||
(properties ?? []).map((p) => p.name.trim().toLowerCase()),
|
||||
);
|
||||
if (!existing.has(base.toLowerCase())) return base;
|
||||
for (let i = 1; i < 1000; i++) {
|
||||
const candidate = `${base} ${i}`;
|
||||
if (!existing.has(candidate.toLowerCase())) return candidate;
|
||||
}
|
||||
return `${base} ${Date.now()}`;
|
||||
}, [selectedTypeLabel, properties]);
|
||||
|
||||
const resetState = useCallback(() => {
|
||||
setPanel("typePicker");
|
||||
setSelectedType(null);
|
||||
setName("");
|
||||
setTypeOptions({});
|
||||
}, []);
|
||||
|
||||
const handleOpen = useCallback(() => {
|
||||
resetState();
|
||||
setOpened(true);
|
||||
}, [resetState]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
// Don't reset panel/selectedType/etc. here — the popover's close
|
||||
// transition is still rendering the dropdown for a frame, and
|
||||
// resetting `panel` to "typePicker" mid-close flashes the type
|
||||
// picker after the user clicks "Create field". `handleOpen`
|
||||
// resets state on the next open instead.
|
||||
setOpened(false);
|
||||
}, []);
|
||||
|
||||
const attemptClose = useCallback(() => {
|
||||
if (panel === "configure" && hasContent) {
|
||||
setPanel("confirmDiscard");
|
||||
} else {
|
||||
handleClose();
|
||||
}
|
||||
}, [panel, hasContent, handleClose]);
|
||||
|
||||
const handleConfirmDiscard = useCallback(() => {
|
||||
handleClose();
|
||||
}, [handleClose]);
|
||||
|
||||
const handleCancelDiscard = useCallback(() => {
|
||||
setPanel("configure");
|
||||
}, []);
|
||||
|
||||
const handleTypeSelect = useCallback((type: BasePropertyType) => {
|
||||
setSelectedType(type);
|
||||
setTypeOptions({});
|
||||
setPanel("configure");
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (panel === "configure") {
|
||||
setTimeout(() => nameInputRef.current?.focus(), 0);
|
||||
}
|
||||
}, [panel]);
|
||||
|
||||
const handleCreate = useCallback(() => {
|
||||
if (!selectedType || nameTaken) return;
|
||||
const finalName = name.trim() || fallbackName;
|
||||
createPropertyMutation.mutate(
|
||||
{
|
||||
pageId,
|
||||
name: finalName,
|
||||
type: selectedType,
|
||||
typeOptions: Object.keys(typeOptions).length > 0
|
||||
? typeOptions as TypeOptions
|
||||
: undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
onPropertyCreated?.();
|
||||
},
|
||||
},
|
||||
);
|
||||
handleClose();
|
||||
}, [selectedType, nameTaken, name, fallbackName, typeOptions, pageId, createPropertyMutation, handleClose, onPropertyCreated]);
|
||||
|
||||
const handleBackToTypePicker = useCallback(() => {
|
||||
setPanel("typePicker");
|
||||
setTypeOptions({});
|
||||
}, []);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (panel === "confirmDiscard") {
|
||||
handleCancelDiscard();
|
||||
} else if (panel === "configure") {
|
||||
handleBackToTypePicker();
|
||||
} else {
|
||||
handleClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
[panel, handleBackToTypePicker, handleClose, handleCancelDiscard],
|
||||
);
|
||||
|
||||
const handleNameKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleCreate();
|
||||
}
|
||||
},
|
||||
[handleCreate],
|
||||
);
|
||||
|
||||
const handleOptionsUpdate = useCallback(
|
||||
(newTypeOptions: Record<string, unknown>) => {
|
||||
setTypeOptions(newTypeOptions);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const syntheticProperty: IBaseProperty = useMemo(() => ({
|
||||
id: "",
|
||||
pageId,
|
||||
name: name || "",
|
||||
type: selectedType ?? "text",
|
||||
position: "",
|
||||
typeOptions: typeOptions as TypeOptions,
|
||||
isPrimary: false,
|
||||
workspaceId: "",
|
||||
createdAt: "",
|
||||
updatedAt: "",
|
||||
}), [pageId, name, selectedType, typeOptions]);
|
||||
|
||||
const TypeIcon = selectedTypeIcon;
|
||||
const showOptions = selectedType && typesWithOptions.has(selectedType);
|
||||
|
||||
return (
|
||||
<>
|
||||
{opened && (
|
||||
<Portal>
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
zIndex: 299,
|
||||
}}
|
||||
onClick={attemptClose}
|
||||
/>
|
||||
</Portal>
|
||||
)}
|
||||
<Popover
|
||||
opened={opened}
|
||||
onClose={noop}
|
||||
position="bottom-start"
|
||||
shadow="md"
|
||||
withinPortal
|
||||
>
|
||||
<Popover.Target>
|
||||
<div
|
||||
className={classes.addColumnButton}
|
||||
onClick={handleOpen}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<IconPlus size={16} />
|
||||
</div>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown
|
||||
p={0}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={handleKeyDown}
|
||||
style={{
|
||||
zIndex: 300,
|
||||
minWidth: selectedType === "formula" ? 460 : 320,
|
||||
maxWidth: "calc(100vw - 32px)",
|
||||
}}
|
||||
>
|
||||
{panel === "typePicker" && (
|
||||
<Stack gap={0} p={4}>
|
||||
<ScrollArea.Autosize
|
||||
mah="min(60vh, 400px)"
|
||||
scrollbarSize={6}
|
||||
offsetScrollbars
|
||||
>
|
||||
<PropertyTypePicker
|
||||
onSelect={handleTypeSelect}
|
||||
showSearch
|
||||
/>
|
||||
</ScrollArea.Autosize>
|
||||
</Stack>
|
||||
)}
|
||||
{panel === "configure" && selectedType === "formula" && (
|
||||
<Stack gap="xs" p="sm">
|
||||
<TextInput
|
||||
ref={nameInputRef}
|
||||
size="xs"
|
||||
label={t("Name")}
|
||||
placeholder={fallbackName}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.currentTarget.value)}
|
||||
error={nameTaken ? t("A property with this name already exists") : undefined}
|
||||
/>
|
||||
<FormulaEditor
|
||||
properties={properties ?? []}
|
||||
editingPropertyId={null}
|
||||
name={name.trim() || undefined}
|
||||
onCancel={handleBackToTypePicker}
|
||||
disabled={nameTaken}
|
||||
onSave={(source, ast, resultType, dependencies) => {
|
||||
if (nameTaken) return;
|
||||
createPropertyMutation.mutate(
|
||||
{
|
||||
pageId,
|
||||
name: name.trim() || fallbackName,
|
||||
type: "formula",
|
||||
typeOptions: {
|
||||
source,
|
||||
ast,
|
||||
resultType,
|
||||
dependencies,
|
||||
astVersion: 1,
|
||||
} as TypeOptions,
|
||||
},
|
||||
{ onSuccess: () => onPropertyCreated?.() },
|
||||
);
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
{(panel === "configure" || panel === "confirmDiscard") && selectedType !== "formula" && (
|
||||
<Stack gap={0} p="sm" style={panel === "confirmDiscard" ? { display: "none" } : undefined}>
|
||||
<TextInput
|
||||
ref={nameInputRef}
|
||||
size="xs"
|
||||
label={t("Name")}
|
||||
placeholder={fallbackName}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.currentTarget.value)}
|
||||
onKeyDown={handleNameKeyDown}
|
||||
error={nameTaken ? t("A property with this name already exists") : undefined}
|
||||
mb="xs"
|
||||
/>
|
||||
<UnstyledButton
|
||||
onClick={handleBackToTypePicker}
|
||||
py={6}
|
||||
px={0}
|
||||
mb={showOptions ? "xs" : 0}
|
||||
>
|
||||
<Group gap={8} wrap="nowrap">
|
||||
{TypeIcon && <TypeIcon size={14} />}
|
||||
<Text size="sm" style={{ flex: 1 }}>
|
||||
{selectedTypeLabel}
|
||||
</Text>
|
||||
<IconChevronRight size={14} />
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
|
||||
{showOptions && (
|
||||
<>
|
||||
<Divider mb="xs" />
|
||||
<ScrollArea.Autosize mah={300} scrollbarSize={6} offsetScrollbars>
|
||||
<PropertyOptions
|
||||
property={syntheticProperty}
|
||||
onUpdate={handleOptionsUpdate}
|
||||
onClose={noop}
|
||||
onDirtyChange={noop}
|
||||
hideButtons
|
||||
/>
|
||||
</ScrollArea.Autosize>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Divider my="xs" />
|
||||
<Group gap="xs" justify="flex-end">
|
||||
<Button variant="default" size="xs" onClick={attemptClose}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button size="xs" onClick={handleCreate} disabled={nameTaken}>
|
||||
{t("Create field")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
{panel === "confirmDiscard" && (
|
||||
<Stack gap="xs" p="sm">
|
||||
<Text size="sm" fw={600}>
|
||||
{t("Unsaved changes")}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("You have unsaved changes. Do you want to discard them?")}
|
||||
</Text>
|
||||
<Group gap="xs" justify="flex-end">
|
||||
<Button
|
||||
variant="default"
|
||||
size="xs"
|
||||
onClick={handleCancelDiscard}
|
||||
>
|
||||
{t("Keep editing")}
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
size="xs"
|
||||
onClick={handleConfirmDiscard}
|
||||
>
|
||||
{t("Discard")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,534 +0,0 @@
|
||||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import {
|
||||
UnstyledButton,
|
||||
TextInput,
|
||||
Button,
|
||||
Stack,
|
||||
Text,
|
||||
Group,
|
||||
ActionIcon,
|
||||
Divider,
|
||||
ScrollArea,
|
||||
Loader,
|
||||
} from "@mantine/core";
|
||||
import {
|
||||
IconTrash,
|
||||
IconPencil,
|
||||
IconChevronRight,
|
||||
IconSettings,
|
||||
} from "@tabler/icons-react";
|
||||
import {
|
||||
IBaseProperty,
|
||||
BasePropertyType,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { useAtom } from "jotai";
|
||||
import { propertyMenuCloseRequestAtomFamily } from "@/features/base/atoms/base-atoms";
|
||||
import {
|
||||
useUpdatePropertyMutation,
|
||||
useDeletePropertyMutation,
|
||||
} from "@/features/base/queries/base-property-query";
|
||||
import { PropertyTypePicker, propertyTypes } from "./property-type-picker";
|
||||
import { PropertyOptions } from "./property-options";
|
||||
import {
|
||||
conversionWarning,
|
||||
NON_USER_TARGET_TYPES,
|
||||
} from "./conversion-warning";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { isSystemPropertyType } from "@/features/base/hooks/use-base-table";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type PropertyMenuContentProps = {
|
||||
property: IBaseProperty;
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
onDirtyChange?: (dirty: boolean) => void;
|
||||
pageId: string;
|
||||
};
|
||||
|
||||
type MenuPanel =
|
||||
| "main"
|
||||
| "rename"
|
||||
| "options"
|
||||
| "changeType"
|
||||
| "confirmTypeChange"
|
||||
| "confirmDelete"
|
||||
| "confirmDiscard";
|
||||
|
||||
export function PropertyMenuContent({
|
||||
property,
|
||||
opened,
|
||||
onClose,
|
||||
onDirtyChange,
|
||||
pageId,
|
||||
}: PropertyMenuContentProps) {
|
||||
const { t } = useTranslation();
|
||||
const [panel, setPanel] = useState<MenuPanel>("main");
|
||||
const [renameValue, setRenameValue] = useState(property.name);
|
||||
const renameInputRef = useRef<HTMLInputElement>(null);
|
||||
const [optionsDirty, setOptionsDirty] = useState(false);
|
||||
const [pendingTargetType, setPendingTargetType] = useState<BasePropertyType | null>(null);
|
||||
const pendingActionRef = useRef<"back" | "close" | null>(null);
|
||||
const sourcePanelRef = useRef<"rename" | "options" | null>(null);
|
||||
const [closeRequest] = useAtom(propertyMenuCloseRequestAtomFamily(pageId)) as unknown as [number];
|
||||
const closeRequestRef = useRef(closeRequest);
|
||||
|
||||
const renameDirty = renameValue !== property.name;
|
||||
|
||||
const updatePropertyMutation = useUpdatePropertyMutation();
|
||||
const deletePropertyMutation = useDeletePropertyMutation();
|
||||
|
||||
useEffect(() => {
|
||||
if (opened) {
|
||||
setPanel("main");
|
||||
setRenameValue(property.name);
|
||||
setOptionsDirty(false);
|
||||
setPendingTargetType(null);
|
||||
}
|
||||
}, [opened, property.name]);
|
||||
|
||||
useEffect(() => {
|
||||
if (panel === "rename") {
|
||||
setTimeout(() => renameInputRef.current?.select(), 0);
|
||||
}
|
||||
}, [panel]);
|
||||
|
||||
const handleOptionsDirtyChange = useCallback((dirty: boolean) => {
|
||||
setOptionsDirty(dirty);
|
||||
}, []);
|
||||
|
||||
// Single dirty signal to the outside — reflects whichever panel is
|
||||
// currently accumulating unsaved work. Keeps rename and options in
|
||||
// lockstep with the `propertyMenuDirtyAtomFamily` so the grid-container's
|
||||
// outside-click handler and the header's ESC handler both prompt
|
||||
// "Unsaved changes" consistently.
|
||||
useEffect(() => {
|
||||
const dirty =
|
||||
(panel === "rename" && renameDirty) ||
|
||||
(panel === "options" && optionsDirty);
|
||||
onDirtyChange?.(dirty);
|
||||
}, [panel, renameDirty, optionsDirty, onDirtyChange]);
|
||||
|
||||
const commitRename = useCallback(() => {
|
||||
const trimmed = renameValue.trim();
|
||||
if (trimmed && trimmed !== property.name) {
|
||||
updatePropertyMutation.mutate({
|
||||
propertyId: property.id,
|
||||
pageId: property.pageId,
|
||||
name: trimmed,
|
||||
});
|
||||
}
|
||||
}, [renameValue, property, updatePropertyMutation]);
|
||||
|
||||
const handleRenameAndClose = useCallback(() => {
|
||||
commitRename();
|
||||
onClose();
|
||||
}, [commitRename, onClose]);
|
||||
|
||||
const requestClose = useCallback(() => {
|
||||
if (panel === "rename" && renameDirty) {
|
||||
sourcePanelRef.current = "rename";
|
||||
pendingActionRef.current = "close";
|
||||
setPanel("confirmDiscard");
|
||||
} else if (panel === "options" && optionsDirty) {
|
||||
sourcePanelRef.current = "options";
|
||||
pendingActionRef.current = "close";
|
||||
setPanel("confirmDiscard");
|
||||
} else {
|
||||
onClose();
|
||||
}
|
||||
}, [panel, renameDirty, optionsDirty, onClose]);
|
||||
|
||||
const handleRenameKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleRenameAndClose();
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
requestClose();
|
||||
}
|
||||
},
|
||||
[handleRenameAndClose, requestClose],
|
||||
);
|
||||
|
||||
const handleOptionsUpdate = useCallback(
|
||||
(typeOptions: Record<string, unknown>) => {
|
||||
updatePropertyMutation.mutate({
|
||||
propertyId: property.id,
|
||||
pageId: property.pageId,
|
||||
typeOptions,
|
||||
});
|
||||
setOptionsDirty(false);
|
||||
},
|
||||
[property, updatePropertyMutation],
|
||||
);
|
||||
|
||||
const handleTypeSelect = useCallback(
|
||||
(type: BasePropertyType) => {
|
||||
if (type === property.type) {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
setPendingTargetType(type);
|
||||
setPanel("confirmTypeChange");
|
||||
},
|
||||
[property.type, onClose],
|
||||
);
|
||||
|
||||
const handleApplyTypeChange = useCallback(() => {
|
||||
if (!pendingTargetType) return;
|
||||
updatePropertyMutation.mutate({
|
||||
propertyId: property.id,
|
||||
pageId: property.pageId,
|
||||
type: pendingTargetType,
|
||||
typeOptions: {},
|
||||
});
|
||||
onClose();
|
||||
}, [
|
||||
pendingTargetType,
|
||||
property.id,
|
||||
property.pageId,
|
||||
updatePropertyMutation,
|
||||
onClose,
|
||||
]);
|
||||
|
||||
const handleDelete = useCallback(() => {
|
||||
deletePropertyMutation.mutate({
|
||||
propertyId: property.id,
|
||||
pageId: property.pageId,
|
||||
});
|
||||
onClose();
|
||||
}, [property, deletePropertyMutation, onClose]);
|
||||
|
||||
const handleOptionsBack = useCallback(() => {
|
||||
if (optionsDirty) {
|
||||
sourcePanelRef.current = "options";
|
||||
pendingActionRef.current = "back";
|
||||
setPanel("confirmDiscard");
|
||||
} else {
|
||||
setPanel("main");
|
||||
}
|
||||
}, [optionsDirty]);
|
||||
|
||||
useEffect(() => {
|
||||
if (closeRequest !== closeRequestRef.current) {
|
||||
closeRequestRef.current = closeRequest;
|
||||
if (opened) {
|
||||
requestClose();
|
||||
}
|
||||
}
|
||||
}, [closeRequest, opened, requestClose]);
|
||||
|
||||
const handleConfirmDiscard = useCallback(() => {
|
||||
setOptionsDirty(false);
|
||||
setRenameValue(property.name);
|
||||
const action = pendingActionRef.current;
|
||||
pendingActionRef.current = null;
|
||||
sourcePanelRef.current = null;
|
||||
if (action === "back") {
|
||||
setPanel("main");
|
||||
} else {
|
||||
onClose();
|
||||
}
|
||||
}, [property.name, onClose]);
|
||||
|
||||
const handleCancelDiscard = useCallback(() => {
|
||||
const source = sourcePanelRef.current ?? "options";
|
||||
pendingActionRef.current = null;
|
||||
sourcePanelRef.current = null;
|
||||
setPanel(source);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{panel === "main" && (
|
||||
<MainPanel
|
||||
property={property}
|
||||
onRename={() => setPanel("rename")}
|
||||
onChangeType={() => setPanel("changeType")}
|
||||
onOptions={() => setPanel("options")}
|
||||
onDelete={() => setPanel("confirmDelete")}
|
||||
/>
|
||||
)}
|
||||
{panel === "rename" && (
|
||||
<Stack gap="xs" p="sm">
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("Rename property")}
|
||||
</Text>
|
||||
<TextInput
|
||||
ref={renameInputRef}
|
||||
size="xs"
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.currentTarget.value)}
|
||||
onKeyDown={handleRenameKeyDown}
|
||||
/>
|
||||
<Divider />
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button variant="default" size="xs" onClick={requestClose}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
onClick={handleRenameAndClose}
|
||||
disabled={!renameValue.trim() || renameValue.trim() === property.name}
|
||||
>
|
||||
{t("Save")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
{panel === "changeType" && (
|
||||
<Stack gap={0} p={4}>
|
||||
<Group gap="xs" px="sm" py={6}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="xs"
|
||||
onClick={() => setPanel("main")}
|
||||
>
|
||||
<IconChevronRight
|
||||
size={14}
|
||||
style={{ transform: "rotate(180deg)" }}
|
||||
/>
|
||||
</ActionIcon>
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("Change type")}
|
||||
</Text>
|
||||
</Group>
|
||||
<ScrollArea.Autosize mah={300} scrollbarSize={6} offsetScrollbars>
|
||||
<PropertyTypePicker
|
||||
onSelect={handleTypeSelect}
|
||||
currentType={property.type}
|
||||
excludeTypes={NON_USER_TARGET_TYPES}
|
||||
showSearch
|
||||
/>
|
||||
</ScrollArea.Autosize>
|
||||
</Stack>
|
||||
)}
|
||||
{panel === "confirmTypeChange" && pendingTargetType && (
|
||||
<Stack gap="xs" p="sm">
|
||||
<Text size="sm" fw={600}>
|
||||
{t("Change type to {{label}}?", {
|
||||
label: t(
|
||||
propertyTypes.find((pt) => pt.type === pendingTargetType)
|
||||
?.labelKey ?? pendingTargetType,
|
||||
),
|
||||
})}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t(conversionWarning(property.type, pendingTargetType))}
|
||||
</Text>
|
||||
<Group gap="xs" justify="flex-end">
|
||||
<Button
|
||||
variant="default"
|
||||
size="xs"
|
||||
onClick={() => setPanel("main")}
|
||||
>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button size="xs" onClick={handleApplyTypeChange}>
|
||||
{t("Apply")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
{(panel === "options" || panel === "confirmDiscard") && (
|
||||
<Stack gap="xs" p="sm" style={panel === "confirmDiscard" ? { display: "none" } : undefined}>
|
||||
<Group gap="xs">
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="xs"
|
||||
onClick={handleOptionsBack}
|
||||
>
|
||||
<IconChevronRight
|
||||
size={14}
|
||||
style={{ transform: "rotate(180deg)" }}
|
||||
/>
|
||||
</ActionIcon>
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("Property options")}
|
||||
</Text>
|
||||
</Group>
|
||||
<ScrollArea.Autosize mah={400} scrollbarSize={6} offsetScrollbars>
|
||||
<PropertyOptions
|
||||
property={property}
|
||||
onUpdate={handleOptionsUpdate}
|
||||
onClose={onClose}
|
||||
onDirtyChange={handleOptionsDirtyChange}
|
||||
/>
|
||||
</ScrollArea.Autosize>
|
||||
</Stack>
|
||||
)}
|
||||
{panel === "confirmDelete" && (
|
||||
<Stack gap="xs" p="sm">
|
||||
<Text size="sm" fw={600}>
|
||||
{t("Delete property")}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("Are you sure you want to delete")} <b>{property.name}</b>?{" "}
|
||||
{t("All data in this column will be lost.")}
|
||||
</Text>
|
||||
<Group gap="xs" justify="flex-end">
|
||||
<Button
|
||||
variant="default"
|
||||
size="xs"
|
||||
onClick={() => setPanel("main")}
|
||||
>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
size="xs"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
{t("Delete")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
{panel === "confirmDiscard" && (
|
||||
<Stack gap="xs" p="sm">
|
||||
<Text size="sm" fw={600}>
|
||||
{t("Unsaved changes")}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("You have unsaved changes. Do you want to discard them?")}
|
||||
</Text>
|
||||
<Group gap="xs" justify="flex-end">
|
||||
<Button
|
||||
variant="default"
|
||||
size="xs"
|
||||
onClick={handleCancelDiscard}
|
||||
>
|
||||
{t("Keep editing")}
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
size="xs"
|
||||
onClick={handleConfirmDiscard}
|
||||
>
|
||||
{t("Discard")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Expose requestClose for use by parent (grid-header-cell)
|
||||
PropertyMenuContent.displayName = "PropertyMenuContent";
|
||||
|
||||
function MenuItem({
|
||||
icon,
|
||||
label,
|
||||
rightIcon,
|
||||
color,
|
||||
onClick,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
rightIcon?: React.ReactNode;
|
||||
color?: string;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<UnstyledButton
|
||||
className={cellClasses.menuItem}
|
||||
onClick={onClick}
|
||||
style={{ color: color ? `var(--mantine-color-${color}-6)` : undefined }}
|
||||
>
|
||||
<Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
|
||||
{icon}
|
||||
<Text size="sm">{label}</Text>
|
||||
</Group>
|
||||
{rightIcon}
|
||||
</UnstyledButton>
|
||||
);
|
||||
}
|
||||
|
||||
function MainPanel({
|
||||
property,
|
||||
onRename,
|
||||
onChangeType,
|
||||
onOptions,
|
||||
onDelete,
|
||||
}: {
|
||||
property: IBaseProperty;
|
||||
onRename: () => void;
|
||||
onChangeType: () => void;
|
||||
onOptions: () => void;
|
||||
onDelete: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const isSystem = isSystemPropertyType(property.type);
|
||||
const isPending = property.pendingType != null;
|
||||
|
||||
const hasOptions =
|
||||
!isSystem &&
|
||||
!isPending &&
|
||||
(property.type === "select" ||
|
||||
property.type === "multiSelect" ||
|
||||
property.type === "status" ||
|
||||
property.type === "number" ||
|
||||
property.type === "date");
|
||||
|
||||
const typeDef = propertyTypes.find((pt) => pt.type === property.type);
|
||||
const TypeIcon = typeDef?.icon;
|
||||
|
||||
return (
|
||||
<Stack gap={0} p={4}>
|
||||
<MenuItem
|
||||
icon={<IconPencil size={14} />}
|
||||
label={t("Rename")}
|
||||
onClick={onRename}
|
||||
/>
|
||||
{isPending && (
|
||||
<Group gap={8} px="sm" py={8}>
|
||||
<Loader size={12} />
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("Converting…")}
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
{!isSystem && !isPending && !property.isPrimary && (
|
||||
<UnstyledButton
|
||||
className={cellClasses.menuItem}
|
||||
onClick={onChangeType}
|
||||
>
|
||||
<Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
|
||||
{TypeIcon ? <TypeIcon size={14} /> : null}
|
||||
<Text size="sm">
|
||||
{typeDef ? t(typeDef.labelKey) : property.type}
|
||||
</Text>
|
||||
</Group>
|
||||
<IconChevronRight size={14} />
|
||||
</UnstyledButton>
|
||||
)}
|
||||
{hasOptions && (
|
||||
<MenuItem
|
||||
icon={<IconSettings size={14} />}
|
||||
label={t("Options")}
|
||||
rightIcon={<IconChevronRight size={14} />}
|
||||
onClick={onOptions}
|
||||
/>
|
||||
)}
|
||||
{!property.isPrimary && !isPending && (
|
||||
<>
|
||||
<Divider my={4} />
|
||||
<MenuItem
|
||||
icon={<IconTrash size={14} />}
|
||||
label={t("Delete property")}
|
||||
color="red"
|
||||
onClick={onDelete}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,263 +0,0 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { Stack, NumberInput, Select, Switch, Text } from "@mantine/core";
|
||||
import {
|
||||
IBaseProperty,
|
||||
SelectTypeOptions,
|
||||
NumberTypeOptions,
|
||||
DateTypeOptions,
|
||||
PersonTypeOptions,
|
||||
Choice,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { ChoiceEditor } from "./choice-editor";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type PropertyOptionsProps = {
|
||||
property: IBaseProperty;
|
||||
onUpdate: (typeOptions: Record<string, unknown>) => void;
|
||||
onClose: () => void;
|
||||
onDirtyChange?: (dirty: boolean) => void;
|
||||
hideButtons?: boolean;
|
||||
};
|
||||
|
||||
export function PropertyOptions({ property, onUpdate, onClose, onDirtyChange, hideButtons }: PropertyOptionsProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
switch (property.type) {
|
||||
case "select":
|
||||
case "multiSelect":
|
||||
return (
|
||||
<SelectOptions
|
||||
property={property}
|
||||
onUpdate={onUpdate}
|
||||
onClose={onClose}
|
||||
onDirtyChange={onDirtyChange}
|
||||
hideButtons={hideButtons}
|
||||
/>
|
||||
);
|
||||
case "status":
|
||||
return (
|
||||
<StatusOptions
|
||||
property={property}
|
||||
onUpdate={onUpdate}
|
||||
onClose={onClose}
|
||||
onDirtyChange={onDirtyChange}
|
||||
hideButtons={hideButtons}
|
||||
/>
|
||||
);
|
||||
case "number":
|
||||
return (
|
||||
<NumberOptions
|
||||
property={property}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
);
|
||||
case "date":
|
||||
return (
|
||||
<DateOptions
|
||||
property={property}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
);
|
||||
case "person":
|
||||
return (
|
||||
<PersonOptions
|
||||
property={property}
|
||||
onUpdate={onUpdate}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("No options for this property type")}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function SelectOptions({
|
||||
property,
|
||||
onUpdate,
|
||||
onClose,
|
||||
onDirtyChange,
|
||||
hideButtons,
|
||||
}: {
|
||||
property: IBaseProperty;
|
||||
onUpdate: (typeOptions: Record<string, unknown>) => void;
|
||||
onClose: () => void;
|
||||
onDirtyChange?: (dirty: boolean) => void;
|
||||
hideButtons?: boolean;
|
||||
}) {
|
||||
const options = property.typeOptions as SelectTypeOptions | undefined;
|
||||
const choices = useMemo(() => options?.choices ?? [], [options?.choices]);
|
||||
|
||||
const handleSave = useCallback(
|
||||
(newChoices: Choice[]) => {
|
||||
onUpdate({
|
||||
...property.typeOptions,
|
||||
choices: newChoices,
|
||||
choiceOrder: newChoices.map((c) => c.id),
|
||||
});
|
||||
},
|
||||
[property.typeOptions, onUpdate],
|
||||
);
|
||||
|
||||
return (
|
||||
<ChoiceEditor
|
||||
initialChoices={choices}
|
||||
onSave={handleSave}
|
||||
onClose={onClose}
|
||||
onDirtyChange={onDirtyChange}
|
||||
showCategories={false}
|
||||
hideButtons={hideButtons}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusOptions({
|
||||
property,
|
||||
onUpdate,
|
||||
onClose,
|
||||
onDirtyChange,
|
||||
hideButtons,
|
||||
}: {
|
||||
property: IBaseProperty;
|
||||
onUpdate: (typeOptions: Record<string, unknown>) => void;
|
||||
onClose: () => void;
|
||||
onDirtyChange?: (dirty: boolean) => void;
|
||||
hideButtons?: boolean;
|
||||
}) {
|
||||
const options = property.typeOptions as SelectTypeOptions | undefined;
|
||||
const choices = useMemo(() => options?.choices ?? [], [options?.choices]);
|
||||
|
||||
const handleSave = useCallback(
|
||||
(newChoices: Choice[]) => {
|
||||
onUpdate({
|
||||
...property.typeOptions,
|
||||
choices: newChoices,
|
||||
choiceOrder: newChoices.map((c) => c.id),
|
||||
});
|
||||
},
|
||||
[property.typeOptions, onUpdate],
|
||||
);
|
||||
|
||||
return (
|
||||
<ChoiceEditor
|
||||
initialChoices={choices}
|
||||
onSave={handleSave}
|
||||
onClose={onClose}
|
||||
onDirtyChange={onDirtyChange}
|
||||
showCategories
|
||||
hideButtons={hideButtons}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function NumberOptions({
|
||||
property,
|
||||
onUpdate,
|
||||
}: {
|
||||
property: IBaseProperty;
|
||||
onUpdate: (typeOptions: Record<string, unknown>) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const options = property.typeOptions as NumberTypeOptions | undefined;
|
||||
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<Select
|
||||
size="xs"
|
||||
label={t("Format")}
|
||||
allowDeselect={false}
|
||||
data={[
|
||||
{ value: "plain", label: t("Number") },
|
||||
{ value: "currency", label: t("Currency") },
|
||||
{ value: "percent", label: t("Percent") },
|
||||
{ value: "progress", label: t("Progress") },
|
||||
]}
|
||||
value={options?.format ?? "plain"}
|
||||
onChange={(val) =>
|
||||
onUpdate({ ...property.typeOptions, format: val ?? "plain" })
|
||||
}
|
||||
/>
|
||||
<NumberInput
|
||||
size="xs"
|
||||
label={t("Decimal places")}
|
||||
min={0}
|
||||
max={8}
|
||||
value={options?.precision ?? 0}
|
||||
onChange={(val) =>
|
||||
onUpdate({ ...property.typeOptions, precision: val })
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function DateOptions({
|
||||
property,
|
||||
onUpdate,
|
||||
}: {
|
||||
property: IBaseProperty;
|
||||
onUpdate: (typeOptions: Record<string, unknown>) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const options = property.typeOptions as DateTypeOptions | undefined;
|
||||
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<Switch
|
||||
size="xs"
|
||||
label={t("Include time")}
|
||||
checked={options?.includeTime ?? false}
|
||||
onChange={(e) =>
|
||||
onUpdate({
|
||||
...property.typeOptions,
|
||||
includeTime: e.currentTarget.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
{options?.includeTime && (
|
||||
<Select
|
||||
size="xs"
|
||||
label={t("Time format")}
|
||||
allowDeselect={false}
|
||||
data={[
|
||||
{ value: "12h", label: "12-hour" },
|
||||
{ value: "24h", label: "24-hour" },
|
||||
]}
|
||||
value={options?.timeFormat ?? "12h"}
|
||||
onChange={(val) =>
|
||||
onUpdate({ ...property.typeOptions, timeFormat: val ?? "12h" })
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function PersonOptions({
|
||||
property,
|
||||
onUpdate,
|
||||
}: {
|
||||
property: IBaseProperty;
|
||||
onUpdate: (typeOptions: Record<string, unknown>) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const options = property.typeOptions as PersonTypeOptions | undefined;
|
||||
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<Switch
|
||||
size="xs"
|
||||
label={t("Allow multiple people")}
|
||||
checked={options?.allowMultiple !== false}
|
||||
onChange={(e) =>
|
||||
onUpdate({
|
||||
...property.typeOptions,
|
||||
allowMultiple: e.currentTarget.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
import { UnstyledButton, Group, Text, TextInput } from "@mantine/core";
|
||||
import {
|
||||
IconLetterT,
|
||||
IconHash,
|
||||
IconCircleDot,
|
||||
IconProgressCheck,
|
||||
IconTags,
|
||||
IconCalendar,
|
||||
IconUser,
|
||||
IconPaperclip,
|
||||
IconFileDescription,
|
||||
IconCheckbox,
|
||||
IconLink,
|
||||
IconMail,
|
||||
IconClockPlus,
|
||||
IconClockEdit,
|
||||
IconUserEdit,
|
||||
IconCheck,
|
||||
IconSearch,
|
||||
IconMathFunction,
|
||||
} from "@tabler/icons-react";
|
||||
import { BasePropertyType } from "@/features/base/types/base.types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import classes from "@/features/base/styles/cells.module.css";
|
||||
|
||||
const propertyTypes: {
|
||||
type: BasePropertyType;
|
||||
icon: typeof IconLetterT;
|
||||
labelKey: string;
|
||||
}[] = [
|
||||
{ type: "text", icon: IconLetterT, labelKey: "Text" },
|
||||
{ type: "number", icon: IconHash, labelKey: "Number" },
|
||||
{ type: "select", icon: IconCircleDot, labelKey: "Select" },
|
||||
{ type: "status", icon: IconProgressCheck, labelKey: "Status" },
|
||||
{ type: "multiSelect", icon: IconTags, labelKey: "Multi-select" },
|
||||
{ type: "date", icon: IconCalendar, labelKey: "Date" },
|
||||
{ type: "person", icon: IconUser, labelKey: "Person" },
|
||||
{ type: "file", icon: IconPaperclip, labelKey: "File" },
|
||||
{ type: "page", icon: IconFileDescription, labelKey: "Page" },
|
||||
{ type: "checkbox", icon: IconCheckbox, labelKey: "Checkbox" },
|
||||
{ type: "url", icon: IconLink, labelKey: "URL" },
|
||||
{ type: "email", icon: IconMail, labelKey: "Email" },
|
||||
{ type: "createdAt", icon: IconClockPlus, labelKey: "Created at" },
|
||||
{ type: "lastEditedAt", icon: IconClockEdit, labelKey: "Last edited at" },
|
||||
{ type: "lastEditedBy", icon: IconUserEdit, labelKey: "Last edited by" },
|
||||
{ type: "formula", icon: IconMathFunction, labelKey: "Formula" },
|
||||
];
|
||||
|
||||
type PropertyTypePickerProps = {
|
||||
onSelect: (type: BasePropertyType) => void;
|
||||
currentType?: BasePropertyType;
|
||||
excludeTypes?: Set<BasePropertyType>;
|
||||
showSearch?: boolean;
|
||||
};
|
||||
|
||||
export function PropertyTypePicker({
|
||||
onSelect,
|
||||
currentType,
|
||||
excludeTypes,
|
||||
showSearch,
|
||||
}: PropertyTypePickerProps) {
|
||||
const { t } = useTranslation();
|
||||
const [search, setSearch] = useState("");
|
||||
const searchRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (showSearch) {
|
||||
setTimeout(() => searchRef.current?.focus(), 0);
|
||||
}
|
||||
}, [showSearch]);
|
||||
|
||||
const types = propertyTypes
|
||||
.filter(({ type }) => !excludeTypes?.has(type))
|
||||
.filter(({ labelKey }) =>
|
||||
!search || t(labelKey).toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{showSearch && (
|
||||
<TextInput
|
||||
ref={searchRef}
|
||||
size="xs"
|
||||
placeholder={t("Find a field type")}
|
||||
leftSection={<IconSearch size={14} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
mx="sm"
|
||||
mt="sm"
|
||||
mb={4}
|
||||
/>
|
||||
)}
|
||||
{types.map(({ type, icon: Icon, labelKey }) => (
|
||||
<UnstyledButton
|
||||
key={type}
|
||||
className={classes.menuItem}
|
||||
onClick={() => onSelect(type)}
|
||||
style={{
|
||||
fontWeight: type === currentType ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
<Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
|
||||
<Icon size={14} />
|
||||
<Text size="sm">{t(labelKey)}</Text>
|
||||
</Group>
|
||||
{type === currentType && <IconCheck size={14} />}
|
||||
</UnstyledButton>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export { propertyTypes };
|
||||
@@ -1,93 +0,0 @@
|
||||
import { useState, useCallback, useMemo } from "react";
|
||||
import clsx from "clsx";
|
||||
import { IconLock } from "@tabler/icons-react";
|
||||
import { BasePropertyType, IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
|
||||
import { CellRenderer } from "@/features/base/components/cells/cell-renderer";
|
||||
import { propertyTypes } from "@/features/base/components/property/property-type-picker";
|
||||
import classes from "./row-detail-modal.module.css";
|
||||
|
||||
type PropertyRowProps = {
|
||||
property: IBaseProperty;
|
||||
row: IBaseRow;
|
||||
canEdit: boolean;
|
||||
onUpdate: (propertyId: string, value: unknown) => void;
|
||||
};
|
||||
|
||||
// Cell types that are derived/read-only — clicking shouldn't switch them
|
||||
// into edit mode and the row gets a tiny lock glyph in front of the value.
|
||||
const READONLY_TYPES = new Set<BasePropertyType>([
|
||||
"formula",
|
||||
"createdAt",
|
||||
"lastEditedAt",
|
||||
"lastEditedBy",
|
||||
]);
|
||||
|
||||
const ICON_BY_TYPE = new Map(propertyTypes.map((p) => [p.type, p.icon] as const));
|
||||
|
||||
export function PropertyRow({ property, row, canEdit, onUpdate }: PropertyRowProps) {
|
||||
const value = (row.cells ?? {})[property.id];
|
||||
const [editing, setEditing] = useState(false);
|
||||
|
||||
const isReadonlyType = READONLY_TYPES.has(property.type);
|
||||
const interactive = canEdit && !isReadonlyType;
|
||||
|
||||
const handleCommit = useCallback(
|
||||
(next: unknown) => {
|
||||
setEditing(false);
|
||||
onUpdate(property.id, next);
|
||||
},
|
||||
[onUpdate, property.id],
|
||||
);
|
||||
const handleCancel = useCallback(() => setEditing(false), []);
|
||||
|
||||
// Activate on `mousedown`, not `click`. Mantine's `useClickOutside`
|
||||
// (the one wired up by every child `Popover`) also fires on mousedown,
|
||||
// and React batches setState calls within the same DOM event. By
|
||||
// riding the same event we get:
|
||||
// 1. mousedown on a wrapper whose child Popover is open →
|
||||
// useClickOutside calls setEditing(false), our handler reads the
|
||||
// same render's `editing === true` so it bails on `!editing` and
|
||||
// doesn't queue setEditing(true). React flushes → popover closes.
|
||||
// 2. mousedown on a non-editing wrapper → `!editing` is true →
|
||||
// setEditing(true) → popover opens.
|
||||
// Using `onClick` would split steps 1a/1b across two DOM events; React
|
||||
// would re-render between them with the popover closed, my click
|
||||
// closure would then see `editing === false`, and the popover would
|
||||
// re-open on the same gesture that was meant to dismiss it.
|
||||
const handleActivate = useCallback(() => {
|
||||
if (interactive && !editing) setEditing(true);
|
||||
}, [interactive, editing]);
|
||||
|
||||
const Icon = useMemo(() => ICON_BY_TYPE.get(property.type), [property.type]);
|
||||
|
||||
return (
|
||||
<div className={classes.propertyRow}>
|
||||
<div className={classes.propertyLabel}>
|
||||
{Icon && <Icon size={15} className={classes.propertyLabelIcon} />}
|
||||
<span className={classes.propertyLabelText}>{property.name}</span>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(classes.propertyValueWrap, {
|
||||
[classes.editing]: editing,
|
||||
[classes.locked]: isReadonlyType,
|
||||
[classes.readOnlyCell]: !canEdit,
|
||||
})}
|
||||
onMouseDown={handleActivate}
|
||||
>
|
||||
{isReadonlyType && (
|
||||
<IconLock size={13} className={classes.lockIcon} />
|
||||
)}
|
||||
<div className={classes.valueInner}>
|
||||
<CellRenderer
|
||||
property={property}
|
||||
rowId={row.id}
|
||||
value={value}
|
||||
isEditing={editing}
|
||||
onCommit={handleCommit}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
-281
@@ -1,281 +0,0 @@
|
||||
/* ---------- Modal shell ---------- */
|
||||
|
||||
.modalContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: min(86vh, 820px);
|
||||
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
|
||||
}
|
||||
|
||||
.closeButtonWrap {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 18px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
cursor: pointer;
|
||||
transition: background-color 100ms ease, color 100ms ease;
|
||||
}
|
||||
|
||||
.iconButton:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
||||
color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
|
||||
}
|
||||
|
||||
/* ---------- Header ---------- */
|
||||
|
||||
.header {
|
||||
padding: 32px 36px 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.titleInput {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.012em;
|
||||
color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
|
||||
}
|
||||
|
||||
.titleInput::placeholder {
|
||||
color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.titleStatic {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.012em;
|
||||
color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.metaRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
font-size: 12.5px;
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.metaDot {
|
||||
width: 2.5px;
|
||||
height: 2.5px;
|
||||
border-radius: 50%;
|
||||
background-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ---------- Body / properties list ---------- */
|
||||
|
||||
.body {
|
||||
padding: 24px 36px 16px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.propertyList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.propertyRow {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 6px 0;
|
||||
border-radius: 8px;
|
||||
transition: background-color 80ms ease;
|
||||
}
|
||||
|
||||
.propertyLabel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 168px;
|
||||
flex: 0 0 168px;
|
||||
height: 34px;
|
||||
padding-left: 4px;
|
||||
font-size: 13.5px;
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
}
|
||||
|
||||
.propertyLabelIcon {
|
||||
flex-shrink: 0;
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2));
|
||||
}
|
||||
|
||||
.propertyLabelText {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.propertyValueWrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 7px;
|
||||
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
|
||||
transition: background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.propertyValueWrap:hover {
|
||||
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
|
||||
}
|
||||
|
||||
.propertyValueWrap.editing {
|
||||
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
|
||||
border-color: light-dark(var(--mantine-color-blue-5), var(--mantine-color-blue-5));
|
||||
box-shadow: 0 0 0 3px light-dark(
|
||||
rgba(34, 139, 230, 0.12),
|
||||
rgba(34, 139, 230, 0.22)
|
||||
);
|
||||
}
|
||||
|
||||
.propertyValueWrap.readOnlyCell {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.propertyValueWrap.readOnlyCell:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.propertyValueWrap.locked {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.lockIcon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
}
|
||||
|
||||
.valueInner {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Trim Mantine cell paddings inside the modal value pill — the wrapper
|
||||
already provides the horizontal padding. Without this, text/numbers
|
||||
would sit 8px to the right of where they should. */
|
||||
.valueInner :global(.mantine-Input-input),
|
||||
.valueInner input.cellInput,
|
||||
.valueInner input[type="text"],
|
||||
.valueInner input[type="number"] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Add property button */
|
||||
.addPropertyWrap {
|
||||
margin-top: 12px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* ---------- Footer ---------- */
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 36px 16px;
|
||||
border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
|
||||
font-size: 12px;
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
flex-shrink: 0;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.footerStatus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.savingDot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--mantine-color-yellow-5);
|
||||
box-shadow: 0 0 0 0 rgba(250, 176, 5, 0.5);
|
||||
animation: savingPulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes savingPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
box-shadow: 0 0 0 0 rgba(250, 176, 5, 0.45);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 4px rgba(250, 176, 5, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.lockedHint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
|
||||
}
|
||||
|
||||
.kbdHint {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 26px;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
|
||||
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
|
||||
box-shadow: 0 1px 0 light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
import { Modal, Text } from "@mantine/core";
|
||||
import { useWindowEvent } from "@mantine/hooks";
|
||||
import { IconDotsVertical, IconX, IconLock } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import {
|
||||
IBase,
|
||||
IBaseRow,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { useUpdateRowMutation } from "@/features/base/queries/base-row-query";
|
||||
import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
|
||||
import { RowDetailTitle } from "./row-detail-title";
|
||||
import { PropertyRow } from "./property-row";
|
||||
import classes from "./row-detail-modal.module.css";
|
||||
|
||||
type RowDetailModalProps = {
|
||||
base: IBase;
|
||||
rows: IBaseRow[];
|
||||
openRowId: string | null;
|
||||
canEdit: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export function RowDetailModal({
|
||||
base,
|
||||
rows,
|
||||
openRowId,
|
||||
canEdit,
|
||||
onClose,
|
||||
}: RowDetailModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const updateRowMutation = useUpdateRowMutation();
|
||||
|
||||
const row = useMemo(
|
||||
() => (openRowId ? rows.find((r) => r.id === openRowId) : undefined),
|
||||
[openRowId, rows],
|
||||
);
|
||||
const primaryProperty = useMemo(
|
||||
() => base.properties.find((p) => p.isPrimary),
|
||||
[base.properties],
|
||||
);
|
||||
|
||||
// If a row was open and disappeared (deleted, filtered out, or not yet
|
||||
// loaded into the rows page), close the modal.
|
||||
const wasOpen = !!openRowId && !row;
|
||||
useEffect(() => {
|
||||
if (wasOpen) onClose();
|
||||
}, [wasOpen, onClose]);
|
||||
|
||||
const isSaving = updateRowMutation.isPending;
|
||||
|
||||
// Esc handling: Mantine v8 Modal's built-in `closeOnEscape` runs a
|
||||
// *capture-phase* `window` keydown listener (see
|
||||
// `@mantine/core/.../use-modal.mjs`), which fires before any inner
|
||||
// popover or cell input gets the keypress. The result: pressing Esc
|
||||
// inside an open cell popover (or any editable cell) would close the
|
||||
// whole modal instead of dismissing the popover.
|
||||
//
|
||||
// We turn the Modal's listener off and run our own, which yields to
|
||||
// anything that's currently editing: an open Mantine Popover dropdown
|
||||
// (it carries the `data-position` attribute Mantine sets on every
|
||||
// popover) or a native editable element (input, textarea,
|
||||
// contenteditable). Only when nothing inner claims Esc do we close
|
||||
// the modal.
|
||||
const opened = !!row;
|
||||
const handleEscape = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
if (event.key !== "Escape" || event.isComposing || !opened) return;
|
||||
const target = event.target as HTMLElement | null;
|
||||
if (target) {
|
||||
if (
|
||||
target.closest("[data-position]") ||
|
||||
target.matches("input, textarea, select, [contenteditable='true']")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
onClose();
|
||||
},
|
||||
[opened, onClose],
|
||||
);
|
||||
useWindowEvent("keydown", handleEscape, { capture: true });
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
size="lg"
|
||||
centered
|
||||
withCloseButton={false}
|
||||
closeOnEscape={false}
|
||||
padding={0}
|
||||
radius="md"
|
||||
title={null}
|
||||
classNames={{ content: classes.modalContent }}
|
||||
>
|
||||
{row ? (
|
||||
<>
|
||||
<div className={classes.closeButtonWrap}>
|
||||
<button
|
||||
type="button"
|
||||
className={classes.iconButton}
|
||||
aria-label={t("More")}
|
||||
>
|
||||
<IconDotsVertical size={16} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={classes.iconButton}
|
||||
onClick={onClose}
|
||||
aria-label={t("Close")}
|
||||
>
|
||||
<IconX size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<RowDetailTitle
|
||||
row={row}
|
||||
primaryProperty={primaryProperty}
|
||||
canEdit={canEdit}
|
||||
onCommit={(value) => {
|
||||
if (!primaryProperty) return;
|
||||
updateRowMutation.mutate({
|
||||
rowId: row.id,
|
||||
pageId: base.id,
|
||||
cells: { [primaryProperty.id]: value },
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className={classes.body}>
|
||||
<div className={classes.propertyList}>
|
||||
{base.properties
|
||||
.filter((p) => !p.isPrimary)
|
||||
.map((property) => (
|
||||
<PropertyRow
|
||||
key={property.id}
|
||||
property={property}
|
||||
row={row}
|
||||
canEdit={canEdit}
|
||||
onUpdate={(propertyId, value) => {
|
||||
updateRowMutation.mutate({
|
||||
rowId: row.id,
|
||||
pageId: base.id,
|
||||
cells: { [propertyId]: value },
|
||||
});
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{canEdit && (
|
||||
<div className={classes.addPropertyWrap}>
|
||||
<CreatePropertyPopover
|
||||
pageId={base.id}
|
||||
properties={base.properties}
|
||||
onPropertyCreated={() => {
|
||||
// The base query invalidates on success — the new
|
||||
// property will appear as a new <PropertyRow /> on
|
||||
// next render. Nothing else to do.
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<footer className={classes.footer}>
|
||||
<div className={classes.footerStatus}>
|
||||
{!canEdit ? (
|
||||
<span className={classes.lockedHint}>
|
||||
<IconLock size={12} />
|
||||
{t("Read-only")}
|
||||
</span>
|
||||
) : isSaving ? (
|
||||
<>
|
||||
<span className={classes.savingDot} />
|
||||
<span>{t("Saving…")}</span>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={classes.kbdHint}>
|
||||
<span>{t("Press")}</span>
|
||||
<kbd className={classes.kbd}>Esc</kbd>
|
||||
<span>{t("to close")}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
) : (
|
||||
<Text c="dimmed" p="md">
|
||||
{t("Loading…")}
|
||||
</Text>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
|
||||
import { timeAgo } from "@/lib/time.ts";
|
||||
import classes from "./row-detail-modal.module.css";
|
||||
|
||||
type RowDetailTitleProps = {
|
||||
row: IBaseRow;
|
||||
primaryProperty: IBaseProperty | undefined;
|
||||
canEdit: boolean;
|
||||
onCommit: (value: string) => void;
|
||||
};
|
||||
|
||||
export function RowDetailTitle({
|
||||
row,
|
||||
primaryProperty,
|
||||
canEdit,
|
||||
onCommit,
|
||||
}: RowDetailTitleProps) {
|
||||
const { t } = useTranslation();
|
||||
const initial = primaryProperty
|
||||
? (((row.cells ?? {})[primaryProperty.id] as string) ?? "")
|
||||
: "";
|
||||
const [value, setValue] = useState(initial);
|
||||
|
||||
// Re-sync if the underlying row changes (e.g. another client updated it).
|
||||
useEffect(() => {
|
||||
setValue(initial);
|
||||
}, [initial]);
|
||||
|
||||
const updatedAgo = row.updatedAt ? timeAgo(new Date(row.updatedAt)) : "";
|
||||
// UUID7-derived display token: the last 4 hex chars are the random
|
||||
// tail of the UUID, so they distinguish rows that were created close
|
||||
// together better than the time prefix would.
|
||||
const idToken = row.id
|
||||
? `#${row.id.replace(/-/g, "").slice(-4).toUpperCase()}`
|
||||
: "";
|
||||
|
||||
return (
|
||||
<header className={classes.header}>
|
||||
{canEdit ? (
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
className={classes.titleInput}
|
||||
placeholder={t("Untitled")}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.currentTarget.value)}
|
||||
onBlur={() => {
|
||||
if (value !== initial) onCommit(value);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
(e.currentTarget as HTMLInputElement).blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<h1 className={classes.titleStatic}>
|
||||
{value || t("Untitled")}
|
||||
</h1>
|
||||
)}
|
||||
<div className={classes.metaRow}>
|
||||
{updatedAgo && (
|
||||
<span>{t("Updated {{when}}", { when: updatedAgo })}</span>
|
||||
)}
|
||||
{updatedAgo && idToken && <span className={classes.metaDot} />}
|
||||
{idToken && <span>{idToken}</span>}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,305 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useRef } from "react";
|
||||
import { Badge } from "@mantine/core";
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
IBase,
|
||||
IBaseRow,
|
||||
IBaseView,
|
||||
NO_VALUE_CHOICE_ID,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { useKanbanGroups } from "@/features/base/hooks/use-kanban-groups";
|
||||
import { useKanbanAutoScroll } from "@/features/base/hooks/use-kanban-auto-scroll";
|
||||
import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
|
||||
import {
|
||||
useCreateRowMutation,
|
||||
useReorderRowMutation,
|
||||
useUpdateRowMutation,
|
||||
} from "@/features/base/queries/base-row-query";
|
||||
import { resolveCardDrop } from "@/features/base/hooks/resolve-card-drop";
|
||||
import type { CardDropPayload } from "@/features/base/hooks/use-kanban-card-drag";
|
||||
import type { ColumnReorderPayload } from "@/features/base/hooks/use-kanban-column-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 { KanbanColumn } from "./kanban-column";
|
||||
import { KanbanEmptyState } from "./kanban-empty-state";
|
||||
import classes from "@/features/base/styles/kanban.module.css";
|
||||
|
||||
type BaseKanbanProps = {
|
||||
base: IBase;
|
||||
rows: IBaseRow[];
|
||||
effectiveView: IBaseView | undefined;
|
||||
onCardClick: (rowId: string) => void;
|
||||
hasNextPage: boolean;
|
||||
isFetchingNextPage: boolean;
|
||||
onFetchNextPage: () => void;
|
||||
};
|
||||
|
||||
export function BaseKanban({
|
||||
base,
|
||||
rows,
|
||||
effectiveView,
|
||||
onCardClick,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
onFetchNextPage,
|
||||
}: BaseKanbanProps) {
|
||||
const { t } = useTranslation();
|
||||
const groupByPropertyId = effectiveView?.config?.groupByPropertyId;
|
||||
const property = useMemo(
|
||||
() =>
|
||||
groupByPropertyId
|
||||
? base.properties.find((p) => p.id === groupByPropertyId)
|
||||
: undefined,
|
||||
[groupByPropertyId, base.properties],
|
||||
);
|
||||
const primaryProperty = useMemo(
|
||||
() => base.properties.find((p) => p.isPrimary),
|
||||
[base.properties],
|
||||
);
|
||||
const isGroupable = property?.type === "select" || property?.type === "status";
|
||||
const updateViewMutation = useUpdateViewMutation();
|
||||
const createRowMutation = useCreateRowMutation();
|
||||
const updateRowMutation = useUpdateRowMutation();
|
||||
const reorderRowMutation = useReorderRowMutation();
|
||||
const sortsActive = (effectiveView?.config?.sorts?.length ?? 0) > 0;
|
||||
const boardRef = useRef<HTMLDivElement>(null);
|
||||
const endRef = useRef<HTMLDivElement>(null);
|
||||
const canScrollBoard = useCallback(
|
||||
({ source }: { source: { data: Record<string, unknown> } }) =>
|
||||
source.data.type === "base-kanban-card" ||
|
||||
source.data.type === "base-kanban-column",
|
||||
[],
|
||||
);
|
||||
useKanbanAutoScroll(boardRef, "horizontal", canScrollBoard);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasNextPage || isFetchingNextPage) return;
|
||||
const target = endRef.current;
|
||||
const root = boardRef.current;
|
||||
if (!target || !root) return;
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries.some((e) => e.isIntersecting)) onFetchNextPage();
|
||||
},
|
||||
{ root, threshold: 0.1 },
|
||||
);
|
||||
observer.observe(target);
|
||||
return () => observer.disconnect();
|
||||
}, [hasNextPage, isFetchingNextPage, onFetchNextPage]);
|
||||
|
||||
// Rules of Hooks: call useKanbanGroups unconditionally with `undefined`
|
||||
// when not groupable; switch the render path on isGroupable below.
|
||||
const { columns } = useKanbanGroups(
|
||||
rows,
|
||||
isGroupable ? property : undefined,
|
||||
effectiveView?.config?.hiddenChoiceIds,
|
||||
effectiveView?.config?.choiceOrder,
|
||||
);
|
||||
|
||||
const handlePickProperty = (propertyId: string) => {
|
||||
if (!effectiveView) return;
|
||||
updateViewMutation.mutate({
|
||||
viewId: effectiveView.id,
|
||||
pageId: base.id,
|
||||
config: { ...effectiveView.config, groupByPropertyId: propertyId },
|
||||
});
|
||||
};
|
||||
|
||||
const handleCardDrop = useCallback(
|
||||
(payload: CardDropPayload) => {
|
||||
if (!groupByPropertyId) return;
|
||||
const targetColumn = columns.find((c) => c.key === payload.targetColumnKey);
|
||||
// The drop target restricts allowedEdges to ["top","bottom"], so the
|
||||
// runtime value is always assignable; narrow the broader Edge union.
|
||||
const edge =
|
||||
payload.edge === "top" || payload.edge === "bottom"
|
||||
? payload.edge
|
||||
: null;
|
||||
const result = resolveCardDrop({
|
||||
draggedCardId: payload.draggedCardId,
|
||||
targetCardId: payload.targetCardId,
|
||||
edge,
|
||||
sourceColumnKey: payload.sourceColumnKey,
|
||||
targetColumnKey: payload.targetColumnKey,
|
||||
groupByPropertyId,
|
||||
columnRows: targetColumn?.rows ?? [],
|
||||
sortsActive,
|
||||
});
|
||||
|
||||
if (result.cells !== undefined) {
|
||||
updateRowMutation.mutate({
|
||||
rowId: payload.draggedCardId,
|
||||
pageId: base.id,
|
||||
cells: result.cells,
|
||||
...(result.position !== undefined && { position: result.position }),
|
||||
});
|
||||
} else if (result.position !== undefined) {
|
||||
reorderRowMutation.mutate({
|
||||
rowId: payload.draggedCardId,
|
||||
pageId: base.id,
|
||||
position: result.position,
|
||||
});
|
||||
}
|
||||
|
||||
// a11y + post-move flash on the dropped card (if still in DOM).
|
||||
const el = document.querySelector(
|
||||
`[data-row-id="${payload.draggedCardId}"]`,
|
||||
);
|
||||
if (el instanceof HTMLElement) triggerPostMoveFlash(el);
|
||||
const colName = targetColumn?.name ?? "column";
|
||||
liveRegion.announce(`Moved card to ${colName}`);
|
||||
},
|
||||
[
|
||||
base.id,
|
||||
columns,
|
||||
groupByPropertyId,
|
||||
reorderRowMutation,
|
||||
sortsActive,
|
||||
updateRowMutation,
|
||||
],
|
||||
);
|
||||
|
||||
const handleAddCard = async (columnKey: string) => {
|
||||
if (!groupByPropertyId) return;
|
||||
const cells =
|
||||
columnKey === NO_VALUE_CHOICE_ID
|
||||
? {}
|
||||
: { [groupByPropertyId]: columnKey };
|
||||
const column = columns.find((c) => c.key === columnKey);
|
||||
const afterRowId = column?.rows[column.rows.length - 1]?.id;
|
||||
try {
|
||||
const newRow = await createRowMutation.mutateAsync({
|
||||
pageId: base.id,
|
||||
cells,
|
||||
afterRowId,
|
||||
});
|
||||
onCardClick(newRow.id);
|
||||
} catch {
|
||||
// mutation already shows an error toast.
|
||||
}
|
||||
};
|
||||
|
||||
const handleColumnReorder = useCallback(
|
||||
(payload: ColumnReorderPayload) => {
|
||||
if (!effectiveView) return;
|
||||
const current = columns.map((c) => c.key);
|
||||
const fromIdx = current.indexOf(payload.draggedColumnKey);
|
||||
const toIdx = current.indexOf(payload.targetColumnKey);
|
||||
if (fromIdx === -1 || toIdx === -1) return;
|
||||
const next = current.slice();
|
||||
next.splice(fromIdx, 1);
|
||||
const insertAt =
|
||||
payload.edge === "left"
|
||||
? toIdx > fromIdx
|
||||
? toIdx - 1
|
||||
: toIdx
|
||||
: toIdx > fromIdx
|
||||
? toIdx
|
||||
: toIdx + 1;
|
||||
next.splice(insertAt, 0, payload.draggedColumnKey);
|
||||
|
||||
updateViewMutation.mutate({
|
||||
viewId: effectiveView.id,
|
||||
pageId: base.id,
|
||||
config: { ...effectiveView.config, choiceOrder: next },
|
||||
});
|
||||
},
|
||||
[base.id, columns, effectiveView, updateViewMutation],
|
||||
);
|
||||
|
||||
const handleHideColumn = useCallback(
|
||||
(columnKey: string) => {
|
||||
if (!effectiveView) return;
|
||||
const current = effectiveView.config?.hiddenChoiceIds ?? [];
|
||||
if (current.includes(columnKey)) return;
|
||||
updateViewMutation.mutate({
|
||||
viewId: effectiveView.id,
|
||||
pageId: base.id,
|
||||
config: {
|
||||
...effectiveView.config,
|
||||
hiddenChoiceIds: [...current, columnKey],
|
||||
},
|
||||
});
|
||||
},
|
||||
[base.id, effectiveView, updateViewMutation],
|
||||
);
|
||||
|
||||
const handleShowColumn = useCallback(
|
||||
(columnKey: string) => {
|
||||
if (!effectiveView) return;
|
||||
const next = (effectiveView.config?.hiddenChoiceIds ?? []).filter(
|
||||
(id) => id !== columnKey,
|
||||
);
|
||||
updateViewMutation.mutate({
|
||||
viewId: effectiveView.id,
|
||||
pageId: base.id,
|
||||
config: { ...effectiveView.config, hiddenChoiceIds: next },
|
||||
});
|
||||
},
|
||||
[base.id, effectiveView, updateViewMutation],
|
||||
);
|
||||
|
||||
const hiddenIds = effectiveView?.config?.hiddenChoiceIds ?? [];
|
||||
const hiddenChoices = useMemo(() => {
|
||||
if (!isGroupable || hiddenIds.length === 0) return [];
|
||||
const opts = (property!.typeOptions as { choices?: Array<{ id: string; name: string; color: string }> } | undefined) ?? {};
|
||||
const choices = opts.choices ?? [];
|
||||
const byId = new Map(choices.map((c) => [c.id, c]));
|
||||
return hiddenIds
|
||||
.map((id) =>
|
||||
id === NO_VALUE_CHOICE_ID
|
||||
? { id, name: t("No value"), color: null as string | null }
|
||||
: byId.get(id)
|
||||
? { id, name: byId.get(id)!.name, color: byId.get(id)!.color as string | null }
|
||||
: null,
|
||||
)
|
||||
.filter((c): c is { id: string; name: string; color: string | null } => c !== null);
|
||||
}, [hiddenIds, isGroupable, property, t]);
|
||||
|
||||
if (!isGroupable) {
|
||||
return <KanbanEmptyState base={base} onPick={handlePickProperty} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{hiddenChoices.length > 0 && (
|
||||
<div className={classes.hiddenStrip}>
|
||||
{hiddenChoices.map((c) => (
|
||||
<Badge
|
||||
key={c.id}
|
||||
color={c.color ?? "gray"}
|
||||
variant="outline"
|
||||
className={classes.hiddenChip}
|
||||
onClick={() => handleShowColumn(c.id)}
|
||||
rightSection={<IconPlus size={12} />}
|
||||
>
|
||||
{c.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{sortsActive && (
|
||||
<div className={classes.sortHint}>
|
||||
{t("Sorted — cards within a column can't be reordered.")}
|
||||
</div>
|
||||
)}
|
||||
<div ref={boardRef} className={classes.board}>
|
||||
{columns.map((column) => (
|
||||
<KanbanColumn
|
||||
key={column.key}
|
||||
column={column}
|
||||
primaryProperty={primaryProperty}
|
||||
onCardClick={onCardClick}
|
||||
onAddCard={handleAddCard}
|
||||
onCardDrop={handleCardDrop}
|
||||
onColumnReorder={handleColumnReorder}
|
||||
onHide={handleHideColumn}
|
||||
sortsActive={sortsActive}
|
||||
/>
|
||||
))}
|
||||
<div ref={endRef} style={{ flex: "0 0 1px" }} aria-hidden />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Button } from "@mantine/core";
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import classes from "@/features/base/styles/kanban.module.css";
|
||||
|
||||
type KanbanAddCardButtonProps = {
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export function KanbanAddCardButton({
|
||||
onClick,
|
||||
disabled,
|
||||
}: KanbanAddCardButtonProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Button
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="xs"
|
||||
className={classes.addCardButton}
|
||||
leftSection={<IconPlus size={14} />}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
{t("New")}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import { IBaseProperty, IBaseRow } from "@/features/base/types/base.types";
|
||||
import classes from "@/features/base/styles/kanban.module.css";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
useKanbanCardDrag,
|
||||
type CardDropPayload,
|
||||
} from "@/features/base/hooks/use-kanban-card-drag";
|
||||
import { BaseDropEdgeIndicator } from "@/features/base/components/grid/base-drop-edge-indicator";
|
||||
|
||||
type KanbanCardProps = {
|
||||
row: IBaseRow;
|
||||
columnKey: string;
|
||||
primaryProperty: IBaseProperty | undefined;
|
||||
onClick: (rowId: string) => void;
|
||||
onDrop: (payload: CardDropPayload) => void;
|
||||
sortsActive: boolean;
|
||||
};
|
||||
|
||||
export function KanbanCard({
|
||||
row,
|
||||
columnKey,
|
||||
primaryProperty,
|
||||
onClick,
|
||||
onDrop,
|
||||
sortsActive,
|
||||
}: KanbanCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const { ref, isDragging, closestEdge } = useKanbanCardDrag({
|
||||
cardId: row.id,
|
||||
columnKey,
|
||||
onDrop,
|
||||
sortsActive,
|
||||
});
|
||||
|
||||
const titleValue = primaryProperty
|
||||
? ((row.cells ?? {})[primaryProperty.id] as string | undefined)
|
||||
: undefined;
|
||||
const titleText = titleValue?.trim().length ? titleValue : t("Untitled");
|
||||
const isEmpty = !titleValue?.trim().length;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={classes.card}
|
||||
data-row-id={row.id}
|
||||
data-dragging={isDragging || undefined}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => onClick(row.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onClick(row.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className={clsx(classes.cardTitle, isEmpty && classes.cardTitleEmpty)}>
|
||||
{titleText}
|
||||
</div>
|
||||
{closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import { ActionIcon, Badge, Menu, Text } from "@mantine/core";
|
||||
import { IconDots, IconEyeOff } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
useKanbanColumnReorder,
|
||||
type ColumnReorderPayload,
|
||||
} from "@/features/base/hooks/use-kanban-column-reorder";
|
||||
import { BaseDropEdgeIndicator } from "@/features/base/components/grid/base-drop-edge-indicator";
|
||||
import classes from "@/features/base/styles/kanban.module.css";
|
||||
|
||||
type KanbanColumnHeaderProps = {
|
||||
columnKey: string;
|
||||
name: string;
|
||||
color: string | null;
|
||||
count: number;
|
||||
onReorderDrop: (payload: ColumnReorderPayload) => void;
|
||||
onHide: (columnKey: string) => void;
|
||||
};
|
||||
|
||||
export function KanbanColumnHeader({
|
||||
columnKey,
|
||||
name,
|
||||
color,
|
||||
count,
|
||||
onReorderDrop,
|
||||
onHide,
|
||||
}: KanbanColumnHeaderProps) {
|
||||
const { t } = useTranslation();
|
||||
const { ref, isDragging, closestEdge } = useKanbanColumnReorder({
|
||||
columnKey,
|
||||
onDrop: onReorderDrop,
|
||||
});
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={classes.columnHeader}
|
||||
data-dragging={isDragging || undefined}
|
||||
>
|
||||
<div className={classes.columnHeaderLeft}>
|
||||
{color ? (
|
||||
<Badge color={color} variant="light" size="sm">
|
||||
{name}
|
||||
</Badge>
|
||||
) : (
|
||||
<Text size="sm" c="dimmed">
|
||||
{name}
|
||||
</Text>
|
||||
)}
|
||||
<span className={classes.columnCount}>{count}</span>
|
||||
</div>
|
||||
<Menu shadow="md" width={160} position="bottom-end">
|
||||
<Menu.Target>
|
||||
<ActionIcon variant="subtle" size="sm" color="gray" data-no-drag>
|
||||
<IconDots size={14} />
|
||||
</ActionIcon>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<IconEyeOff size={14} />}
|
||||
onClick={() => onHide(columnKey)}
|
||||
>
|
||||
{t("Hide group")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
{closestEdge && <BaseDropEdgeIndicator edge={closestEdge} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import { KanbanColumnData } from "@/features/base/hooks/use-kanban-groups";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
import { KanbanCard } from "./kanban-card";
|
||||
import { KanbanColumnHeader } from "./kanban-column-header";
|
||||
import { KanbanAddCardButton } from "./kanban-add-card-button";
|
||||
import type { CardDropPayload } from "@/features/base/hooks/use-kanban-card-drag";
|
||||
import type { ColumnReorderPayload } from "@/features/base/hooks/use-kanban-column-reorder";
|
||||
import { useKanbanColumnDrop } from "@/features/base/hooks/use-kanban-column-drop";
|
||||
import { useKanbanAutoScroll } from "@/features/base/hooks/use-kanban-auto-scroll";
|
||||
import classes from "@/features/base/styles/kanban.module.css";
|
||||
|
||||
type KanbanColumnProps = {
|
||||
column: KanbanColumnData;
|
||||
primaryProperty: IBaseProperty | undefined;
|
||||
onCardClick: (rowId: string) => void;
|
||||
onAddCard: (columnKey: string) => void;
|
||||
onCardDrop: (payload: CardDropPayload) => void;
|
||||
onColumnReorder: (payload: ColumnReorderPayload) => void;
|
||||
onHide: (columnKey: string) => void;
|
||||
sortsActive: boolean;
|
||||
};
|
||||
|
||||
export function KanbanColumn({
|
||||
column,
|
||||
primaryProperty,
|
||||
onCardClick,
|
||||
onAddCard,
|
||||
onCardDrop,
|
||||
onColumnReorder,
|
||||
onHide,
|
||||
sortsActive,
|
||||
}: KanbanColumnProps) {
|
||||
const { ref: bodyRef, isOver } = useKanbanColumnDrop({
|
||||
columnKey: column.key,
|
||||
onDrop: onCardDrop,
|
||||
});
|
||||
const canScrollColumn = useCallback(
|
||||
({ source }: { source: { data: Record<string, unknown> } }) =>
|
||||
source.data.type === "base-kanban-card",
|
||||
[],
|
||||
);
|
||||
useKanbanAutoScroll(bodyRef, "vertical", canScrollColumn);
|
||||
|
||||
return (
|
||||
<div className={classes.column} data-column-key={column.key}>
|
||||
<KanbanColumnHeader
|
||||
columnKey={column.key}
|
||||
name={column.name}
|
||||
color={column.color}
|
||||
count={column.rows.length}
|
||||
onReorderDrop={onColumnReorder}
|
||||
onHide={onHide}
|
||||
/>
|
||||
<div
|
||||
ref={bodyRef}
|
||||
className={classes.columnBody}
|
||||
data-column-body={column.key}
|
||||
data-over={isOver || undefined}
|
||||
>
|
||||
{column.rows.map((row) => (
|
||||
<KanbanCard
|
||||
key={row.id}
|
||||
row={row}
|
||||
columnKey={column.key}
|
||||
primaryProperty={primaryProperty}
|
||||
onClick={onCardClick}
|
||||
onDrop={onCardDrop}
|
||||
sortsActive={sortsActive}
|
||||
/>
|
||||
))}
|
||||
<KanbanAddCardButton onClick={() => onAddCard(column.key)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { Stack, Text } from "@mantine/core";
|
||||
import { IconColumns3 } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IBase } from "@/features/base/types/base.types";
|
||||
import { KanbanGroupByPicker } from "./kanban-group-by-picker";
|
||||
import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
|
||||
|
||||
type KanbanEmptyStateProps = {
|
||||
base: IBase;
|
||||
onPick: (propertyId: string) => void;
|
||||
};
|
||||
|
||||
export function KanbanEmptyState({ base, onPick }: KanbanEmptyStateProps) {
|
||||
const { t } = useTranslation();
|
||||
const hasGroupable = base.properties.some(
|
||||
(p) => p.type === "select" || p.type === "status",
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack align="center" gap="md" p="xl" mt={48}>
|
||||
<IconColumns3 size={48} color="var(--mantine-color-gray-5)" />
|
||||
<Text size="lg" fw={500}>
|
||||
{t("Choose a property to group by")}
|
||||
</Text>
|
||||
{hasGroupable ? (
|
||||
<KanbanGroupByPicker
|
||||
properties={base.properties}
|
||||
value={null}
|
||||
onChange={onPick}
|
||||
/>
|
||||
) : (
|
||||
<Stack align="center" gap="xs">
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("Create a select or status property to use the kanban view.")}
|
||||
</Text>
|
||||
<CreatePropertyPopover
|
||||
pageId={base.id}
|
||||
properties={base.properties}
|
||||
onPropertyCreated={() => {
|
||||
// The base query invalidates on property create — the empty
|
||||
// state will re-render with the picker variant. The user
|
||||
// then picks the new property explicitly. (Auto-picking the
|
||||
// new property requires receiving its id from the create
|
||||
// mutation, which the current popover doesn't expose. Keep
|
||||
// the explicit step for now.)
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import { Select } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IBaseProperty } from "@/features/base/types/base.types";
|
||||
|
||||
type KanbanGroupByPickerProps = {
|
||||
properties: IBaseProperty[];
|
||||
value: string | null;
|
||||
onChange: (propertyId: string) => void;
|
||||
// Allows the toolbar variant to render compact / narrow.
|
||||
size?: "xs" | "sm" | "md";
|
||||
};
|
||||
|
||||
export function KanbanGroupByPicker({
|
||||
properties,
|
||||
value,
|
||||
onChange,
|
||||
size = "sm",
|
||||
}: KanbanGroupByPickerProps) {
|
||||
const { t } = useTranslation();
|
||||
const data = useMemo(
|
||||
() =>
|
||||
properties
|
||||
.filter((p) => p.type === "select" || p.type === "status")
|
||||
.map((p) => ({ value: p.id, label: p.name || t("Untitled") })),
|
||||
[properties, t],
|
||||
);
|
||||
return (
|
||||
<Select
|
||||
placeholder={t("Group by…")}
|
||||
data={data}
|
||||
value={value}
|
||||
onChange={(v) => v && onChange(v)}
|
||||
size={size}
|
||||
allowDeselect={false}
|
||||
searchable
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
import { useMemo, useCallback } from "react";
|
||||
import { Popover, Switch, Stack, Text, Group, Divider, UnstyledButton } from "@mantine/core";
|
||||
import { IconEye, IconEyeOff } from "@tabler/icons-react";
|
||||
import { Table } from "@tanstack/react-table";
|
||||
import { IBaseRow, IBaseProperty } from "@/features/base/types/base.types";
|
||||
import { propertyTypes } from "@/features/base/components/property/property-type-picker";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type ViewFieldVisibilityProps = {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
table: Table<IBaseRow>;
|
||||
properties: IBaseProperty[];
|
||||
onPersist: () => void;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function ViewFieldVisibility({
|
||||
opened,
|
||||
onClose,
|
||||
table,
|
||||
properties,
|
||||
onPersist,
|
||||
children,
|
||||
}: ViewFieldVisibilityProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const columns = useMemo(() => {
|
||||
return table
|
||||
.getAllLeafColumns()
|
||||
.filter((col) => col.id !== "__row_number");
|
||||
}, [table, properties]);
|
||||
|
||||
const allVisible = columns.every((col) => col.getIsVisible());
|
||||
const noneVisible = columns.filter((col) => col.getCanHide()).every((col) => !col.getIsVisible());
|
||||
|
||||
const handleToggle = useCallback(
|
||||
(columnId: string, visible: boolean) => {
|
||||
const col = table.getColumn(columnId);
|
||||
if (!col) return;
|
||||
col.toggleVisibility(visible);
|
||||
onPersist();
|
||||
},
|
||||
[table, onPersist],
|
||||
);
|
||||
|
||||
const handleShowAll = useCallback(() => {
|
||||
columns.forEach((col) => {
|
||||
if (col.getCanHide()) {
|
||||
col.toggleVisibility(true);
|
||||
}
|
||||
});
|
||||
onPersist();
|
||||
}, [columns, onPersist]);
|
||||
|
||||
const handleHideAll = useCallback(() => {
|
||||
columns.forEach((col) => {
|
||||
if (col.getCanHide()) {
|
||||
col.toggleVisibility(false);
|
||||
}
|
||||
});
|
||||
onPersist();
|
||||
}, [columns, onPersist]);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={opened}
|
||||
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("Fields")}
|
||||
</Text>
|
||||
<Group gap={8}>
|
||||
<UnstyledButton
|
||||
onClick={handleShowAll}
|
||||
disabled={allVisible}
|
||||
style={{ opacity: allVisible ? 0.4 : 1 }}
|
||||
>
|
||||
<Text size="xs" c="blue">
|
||||
{t("Show all")}
|
||||
</Text>
|
||||
</UnstyledButton>
|
||||
<UnstyledButton
|
||||
onClick={handleHideAll}
|
||||
disabled={noneVisible}
|
||||
style={{ opacity: noneVisible ? 0.4 : 1 }}
|
||||
>
|
||||
<Text size="xs" c="blue">
|
||||
{t("Hide all")}
|
||||
</Text>
|
||||
</UnstyledButton>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Stack gap={0}>
|
||||
{columns.map((col) => {
|
||||
const property = col.columnDef.meta?.property as IBaseProperty | undefined;
|
||||
if (!property) return null;
|
||||
|
||||
const canHide = col.getCanHide();
|
||||
const isVisible = col.getIsVisible();
|
||||
const typeConfig = propertyTypes.find((pt) => pt.type === property.type);
|
||||
const TypeIcon = typeConfig?.icon;
|
||||
|
||||
return (
|
||||
<UnstyledButton
|
||||
key={col.id}
|
||||
className={cellClasses.menuItem}
|
||||
onClick={() => {
|
||||
if (canHide) {
|
||||
handleToggle(col.id, !isVisible);
|
||||
}
|
||||
}}
|
||||
style={{ opacity: canHide ? 1 : 0.5 }}
|
||||
>
|
||||
<Group gap={8} wrap="nowrap" style={{ flex: 1 }}>
|
||||
{TypeIcon && <TypeIcon size={14} style={{ flexShrink: 0 }} />}
|
||||
<Text size="sm" style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{property.name}
|
||||
</Text>
|
||||
</Group>
|
||||
<Switch
|
||||
size="xs"
|
||||
checked={isVisible}
|
||||
disabled={!canHide}
|
||||
onChange={() => {}}
|
||||
// Mantine's Switch spreads `onClick` onto its hidden
|
||||
// <input>. When the user clicks the visible track, the
|
||||
// label's default action synthesizes a second click on
|
||||
// that input — both clicks bubble to the parent
|
||||
// UnstyledButton and fire handleToggle twice (hide then
|
||||
// immediately unhide, net zero). stopPropagation here
|
||||
// blocks ONLY the synthesized input click from reaching
|
||||
// UnstyledButton; the original track click still bubbles
|
||||
// normally, so handleToggle fires exactly once.
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
styles={{ track: { cursor: canHide ? "pointer" : "not-allowed" } }}
|
||||
/>
|
||||
</UnstyledButton>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,447 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
Popover,
|
||||
Stack,
|
||||
Group,
|
||||
Select,
|
||||
TextInput,
|
||||
ActionIcon,
|
||||
Text,
|
||||
UnstyledButton,
|
||||
Button,
|
||||
} from "@mantine/core";
|
||||
import { IconPlus, IconTrash } from "@tabler/icons-react";
|
||||
import {
|
||||
IBaseProperty,
|
||||
SelectTypeOptions,
|
||||
FilterCondition,
|
||||
FilterOperator,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
/*
|
||||
* Operator metadata for the filter popover. Values use the server
|
||||
* engine's operator set (`core/base/engine/schema.zod.ts`); labels are
|
||||
* i18n-translated display strings.
|
||||
*/
|
||||
const OPERATORS: { value: FilterOperator; labelKey: string }[] = [
|
||||
{ value: "eq", labelKey: "Equals" },
|
||||
{ value: "neq", labelKey: "Not equals" },
|
||||
{ value: "contains", labelKey: "Contains" },
|
||||
{ value: "ncontains", labelKey: "Not contains" },
|
||||
{ value: "isEmpty", labelKey: "Is empty" },
|
||||
{ value: "isNotEmpty", labelKey: "Is not empty" },
|
||||
{ value: "gt", labelKey: "Greater than" },
|
||||
{ value: "lt", labelKey: "Less than" },
|
||||
{ value: "before", labelKey: "Before" },
|
||||
{ value: "after", labelKey: "After" },
|
||||
{ value: "any", labelKey: "Any of" },
|
||||
{ value: "none", labelKey: "None of" },
|
||||
];
|
||||
|
||||
const NO_VALUE_OPERATORS: FilterOperator[] = ["isEmpty", "isNotEmpty"];
|
||||
|
||||
function getOperatorsForType(type: string): FilterOperator[] {
|
||||
switch (type) {
|
||||
case "text":
|
||||
case "email":
|
||||
case "url":
|
||||
return ["eq", "neq", "contains", "ncontains", "isEmpty", "isNotEmpty"];
|
||||
case "number":
|
||||
return ["eq", "neq", "gt", "lt", "isEmpty", "isNotEmpty"];
|
||||
case "date":
|
||||
case "createdAt":
|
||||
case "lastEditedAt":
|
||||
return ["eq", "neq", "before", "after", "isEmpty", "isNotEmpty"];
|
||||
case "select":
|
||||
case "status":
|
||||
return ["eq", "neq", "any", "none", "isEmpty", "isNotEmpty"];
|
||||
case "multiSelect":
|
||||
return ["any", "none", "isEmpty", "isNotEmpty"];
|
||||
case "checkbox":
|
||||
return ["eq", "isEmpty", "isNotEmpty"];
|
||||
case "person":
|
||||
case "lastEditedBy":
|
||||
return ["eq", "neq", "any", "none", "isEmpty", "isNotEmpty"];
|
||||
case "file":
|
||||
return ["isEmpty", "isNotEmpty"];
|
||||
case "page":
|
||||
return ["isEmpty", "isNotEmpty"];
|
||||
default:
|
||||
return ["eq", "neq", "isEmpty", "isNotEmpty"];
|
||||
}
|
||||
}
|
||||
|
||||
function FilterValueInput({
|
||||
condition,
|
||||
property,
|
||||
onChange,
|
||||
t,
|
||||
}: {
|
||||
condition: FilterCondition;
|
||||
property: IBaseProperty | undefined;
|
||||
onChange: (value: string) => void;
|
||||
t: (key: string) => string;
|
||||
}) {
|
||||
if (!property) {
|
||||
return (
|
||||
<TextInput
|
||||
size="xs"
|
||||
placeholder={t("Value")}
|
||||
value={(condition.value as string) ?? ""}
|
||||
onChange={(e) => onChange(e.currentTarget.value)}
|
||||
w={100}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const type = property.type;
|
||||
|
||||
if (type === "select" || type === "status" || type === "multiSelect") {
|
||||
const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
|
||||
const choices = typeOptions?.choices ?? [];
|
||||
const choiceOptions = choices.map((c) => ({ value: c.id, label: c.name }));
|
||||
return (
|
||||
<Select
|
||||
size="xs"
|
||||
data={choiceOptions}
|
||||
value={(condition.value as string) ?? null}
|
||||
onChange={(val) => onChange(val ?? "")}
|
||||
w={120}
|
||||
placeholder={t("Select")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "number") {
|
||||
return (
|
||||
<TextInput
|
||||
size="xs"
|
||||
type="number"
|
||||
placeholder={t("Value")}
|
||||
value={(condition.value as string) ?? ""}
|
||||
onChange={(e) => onChange(e.currentTarget.value)}
|
||||
w={100}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "checkbox") {
|
||||
return (
|
||||
<Select
|
||||
size="xs"
|
||||
data={[
|
||||
{ value: "true", label: t("True") },
|
||||
{ value: "false", label: t("False") },
|
||||
]}
|
||||
value={(condition.value as string) ?? null}
|
||||
onChange={(val) => onChange(val ?? "")}
|
||||
w={100}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TextInput
|
||||
size="xs"
|
||||
placeholder={t("Value")}
|
||||
value={(condition.value as string) ?? ""}
|
||||
onChange={(e) => onChange(e.currentTarget.value)}
|
||||
w={100}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
type ViewFilterConfigProps = {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
conditions: FilterCondition[];
|
||||
properties: IBaseProperty[];
|
||||
onChange: (conditions: FilterCondition[]) => void;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function ViewFilterConfigPopover({
|
||||
opened,
|
||||
onClose,
|
||||
conditions,
|
||||
properties,
|
||||
onChange,
|
||||
children,
|
||||
}: ViewFilterConfigProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const propertyOptions = properties.map((p) => ({
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
}));
|
||||
|
||||
const [draft, setDraft] = useState<FilterCondition | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!opened) setDraft(null);
|
||||
}, [opened]);
|
||||
|
||||
const handleStartDraft = useCallback(() => {
|
||||
const firstProperty = properties[0];
|
||||
if (!firstProperty) return;
|
||||
const validOperators = getOperatorsForType(firstProperty.type);
|
||||
const defaultOperator = validOperators.includes("contains")
|
||||
? ("contains" as FilterOperator)
|
||||
: validOperators[0];
|
||||
setDraft({ propertyId: firstProperty.id, op: defaultOperator });
|
||||
}, [properties]);
|
||||
|
||||
const handleSaveDraft = useCallback(() => {
|
||||
if (!draft) return;
|
||||
onChange([...conditions, draft]);
|
||||
setDraft(null);
|
||||
}, [draft, conditions, onChange]);
|
||||
|
||||
const handleCancelDraft = useCallback(() => {
|
||||
setDraft(null);
|
||||
}, []);
|
||||
|
||||
const handleDraftPropertyChange = useCallback(
|
||||
(propertyId: string | null) => {
|
||||
if (!propertyId || !draft) return;
|
||||
const newProperty = properties.find((p) => p.id === propertyId);
|
||||
if (!newProperty) {
|
||||
setDraft({ ...draft, propertyId });
|
||||
return;
|
||||
}
|
||||
const validOperators = getOperatorsForType(newProperty.type);
|
||||
const currentOperatorValid = validOperators.includes(draft.op);
|
||||
setDraft({
|
||||
...draft,
|
||||
propertyId,
|
||||
op: currentOperatorValid ? draft.op : validOperators[0],
|
||||
value: currentOperatorValid ? draft.value : undefined,
|
||||
});
|
||||
},
|
||||
[draft, properties],
|
||||
);
|
||||
|
||||
const handleDraftOperatorChange = useCallback(
|
||||
(operator: string | null) => {
|
||||
if (!operator || !draft) return;
|
||||
const op = operator as FilterOperator;
|
||||
const needsValue = !NO_VALUE_OPERATORS.includes(op);
|
||||
setDraft({ ...draft, op, value: needsValue ? draft.value : undefined });
|
||||
},
|
||||
[draft],
|
||||
);
|
||||
|
||||
const handleDraftValueChange = useCallback(
|
||||
(value: string) => {
|
||||
if (!draft) return;
|
||||
setDraft({ ...draft, value: value || undefined });
|
||||
},
|
||||
[draft],
|
||||
);
|
||||
|
||||
const handleRemove = useCallback(
|
||||
(index: number) => {
|
||||
onChange(conditions.filter((_, i) => i !== index));
|
||||
},
|
||||
[conditions, onChange],
|
||||
);
|
||||
|
||||
const handlePropertyChange = useCallback(
|
||||
(index: number, propertyId: string | null) => {
|
||||
if (!propertyId) return;
|
||||
const newProperty = properties.find((p) => p.id === propertyId);
|
||||
onChange(
|
||||
conditions.map((f, i) => {
|
||||
if (i !== index) return f;
|
||||
if (newProperty) {
|
||||
const validOperators = getOperatorsForType(newProperty.type);
|
||||
const currentOperatorValid = validOperators.includes(f.op);
|
||||
return {
|
||||
...f,
|
||||
propertyId,
|
||||
op: currentOperatorValid ? f.op : validOperators[0],
|
||||
value: currentOperatorValid ? f.value : undefined,
|
||||
};
|
||||
}
|
||||
return { ...f, propertyId };
|
||||
}),
|
||||
);
|
||||
},
|
||||
[conditions, properties, onChange],
|
||||
);
|
||||
|
||||
const handleOperatorChange = useCallback(
|
||||
(index: number, operator: string | null) => {
|
||||
if (!operator) return;
|
||||
const op = operator as FilterOperator;
|
||||
const needsValue = !NO_VALUE_OPERATORS.includes(op);
|
||||
onChange(
|
||||
conditions.map((f, i) =>
|
||||
i === index
|
||||
? {
|
||||
...f,
|
||||
op,
|
||||
value: needsValue ? f.value : undefined,
|
||||
}
|
||||
: f,
|
||||
),
|
||||
);
|
||||
},
|
||||
[conditions, onChange],
|
||||
);
|
||||
|
||||
const handleValueChange = useCallback(
|
||||
(index: number, value: string) => {
|
||||
onChange(
|
||||
conditions.map((f, i) =>
|
||||
i === index ? { ...f, value: value || undefined } : f,
|
||||
),
|
||||
);
|
||||
},
|
||||
[conditions, onChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
position="bottom-end"
|
||||
shadow="md"
|
||||
width={440}
|
||||
trapFocus
|
||||
withinPortal
|
||||
>
|
||||
<Popover.Target>{children}</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Stack gap="xs">
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("Filter by")}
|
||||
</Text>
|
||||
|
||||
{conditions.length === 0 && !draft && (
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("No filters applied")}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{conditions.map((condition, index) => {
|
||||
const needsValue = !NO_VALUE_OPERATORS.includes(condition.op);
|
||||
const property = properties.find(
|
||||
(p) => p.id === condition.propertyId,
|
||||
);
|
||||
const validOperators = property
|
||||
? getOperatorsForType(property.type)
|
||||
: OPERATORS.map((op) => op.value);
|
||||
const operatorOptions = OPERATORS.filter((op) =>
|
||||
validOperators.includes(op.value),
|
||||
).map((op) => ({
|
||||
value: op.value,
|
||||
label: t(op.labelKey),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Group key={index} gap="xs" wrap="nowrap">
|
||||
<Select
|
||||
size="xs"
|
||||
data={propertyOptions}
|
||||
value={condition.propertyId}
|
||||
onChange={(val) => handlePropertyChange(index, val)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
size="xs"
|
||||
data={operatorOptions}
|
||||
value={condition.op}
|
||||
onChange={(val) => handleOperatorChange(index, val)}
|
||||
w={130}
|
||||
/>
|
||||
{needsValue && (
|
||||
<FilterValueInput
|
||||
condition={condition}
|
||||
property={property}
|
||||
onChange={(val) => handleValueChange(index, val)}
|
||||
t={t}
|
||||
/>
|
||||
)}
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="sm"
|
||||
onClick={() => handleRemove(index)}
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
|
||||
{draft && (() => {
|
||||
const needsValue = !NO_VALUE_OPERATORS.includes(draft.op);
|
||||
const property = properties.find((p) => p.id === draft.propertyId);
|
||||
const validOperators = property
|
||||
? getOperatorsForType(property.type)
|
||||
: OPERATORS.map((op) => op.value);
|
||||
const operatorOptions = OPERATORS.filter((op) =>
|
||||
validOperators.includes(op.value),
|
||||
).map((op) => ({ value: op.value, label: t(op.labelKey) }));
|
||||
|
||||
return (
|
||||
<Stack gap={6}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Select
|
||||
size="xs"
|
||||
data={propertyOptions}
|
||||
value={draft.propertyId}
|
||||
onChange={handleDraftPropertyChange}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
size="xs"
|
||||
data={operatorOptions}
|
||||
value={draft.op}
|
||||
onChange={handleDraftOperatorChange}
|
||||
w={130}
|
||||
/>
|
||||
{needsValue && (
|
||||
<FilterValueInput
|
||||
condition={draft}
|
||||
property={property}
|
||||
onChange={handleDraftValueChange}
|
||||
t={t}
|
||||
/>
|
||||
)}
|
||||
</Group>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button variant="default" size="xs" onClick={handleCancelDraft}>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button size="xs" onClick={handleSaveDraft}>
|
||||
{t("Save")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
})()}
|
||||
|
||||
{!draft && (
|
||||
<UnstyledButton
|
||||
onClick={handleStartDraft}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
padding: "4px 0",
|
||||
fontSize: "var(--mantine-font-size-xs)",
|
||||
color: "var(--mantine-color-blue-6)",
|
||||
}}
|
||||
>
|
||||
<IconPlus size={14} />
|
||||
{t("Add filter")}
|
||||
</UnstyledButton>
|
||||
)}
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { Table } from "@tanstack/react-table";
|
||||
import {
|
||||
IBase,
|
||||
IBaseRow,
|
||||
IBaseView,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { BaseTable } from "@/features/base/components/base-table";
|
||||
import { BaseKanban } from "@/features/base/components/views/kanban/base-kanban";
|
||||
|
||||
type ViewRendererProps = {
|
||||
base: IBase;
|
||||
rows: IBaseRow[];
|
||||
effectiveView: IBaseView | undefined;
|
||||
table: Table<IBaseRow>;
|
||||
pageId: string;
|
||||
embedded?: boolean;
|
||||
hasNextPage: boolean;
|
||||
isFetchingNextPage: boolean;
|
||||
onFetchNextPage: () => void;
|
||||
onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
|
||||
onAddRow: () => void;
|
||||
onColumnReorder: (columnId: string, finishIndex: number) => void;
|
||||
onResizeEnd: () => void;
|
||||
onRowReorder: (
|
||||
rowId: string,
|
||||
targetRowId: string,
|
||||
dropPosition: "above" | "below",
|
||||
) => void;
|
||||
onCardClick: (rowId: string) => void;
|
||||
persistViewConfig: () => void;
|
||||
scrollportEl: HTMLDivElement | null;
|
||||
stickyBandPrelude?: React.ReactNode;
|
||||
};
|
||||
|
||||
export function ViewRenderer(props: ViewRendererProps) {
|
||||
const viewType = props.effectiveView?.type ?? "table";
|
||||
|
||||
if (viewType === "kanban") {
|
||||
return (
|
||||
<BaseKanban
|
||||
base={props.base}
|
||||
rows={props.rows}
|
||||
effectiveView={props.effectiveView}
|
||||
onCardClick={props.onCardClick}
|
||||
hasNextPage={props.hasNextPage}
|
||||
isFetchingNextPage={props.isFetchingNextPage}
|
||||
onFetchNextPage={props.onFetchNextPage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <BaseTable {...props} />;
|
||||
}
|
||||
@@ -1,220 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
Popover,
|
||||
Stack,
|
||||
Group,
|
||||
Select,
|
||||
ActionIcon,
|
||||
Text,
|
||||
UnstyledButton,
|
||||
Button,
|
||||
} from "@mantine/core";
|
||||
import { IconPlus, IconTrash } from "@tabler/icons-react";
|
||||
import {
|
||||
IBaseProperty,
|
||||
ViewSortConfig,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type ViewSortConfigProps = {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
sorts: ViewSortConfig[];
|
||||
properties: IBaseProperty[];
|
||||
onChange: (sorts: ViewSortConfig[]) => void;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export function ViewSortConfigPopover({
|
||||
opened,
|
||||
onClose,
|
||||
sorts,
|
||||
properties,
|
||||
onChange,
|
||||
children,
|
||||
}: ViewSortConfigProps) {
|
||||
const { t } = useTranslation();
|
||||
const [draft, setDraft] = useState<ViewSortConfig | null>(null);
|
||||
|
||||
// Discard any half-configured draft when the popover closes.
|
||||
useEffect(() => {
|
||||
if (!opened) setDraft(null);
|
||||
}, [opened]);
|
||||
|
||||
// Page properties store a UUID; sorting by raw UUID is unhelpful and
|
||||
// title-based sort would require a join. Hide until we support it properly.
|
||||
const sortableProperties = properties.filter((p) => p.type !== "page");
|
||||
|
||||
const propertyOptions = sortableProperties.map((p) => ({
|
||||
value: p.id,
|
||||
label: p.name,
|
||||
}));
|
||||
|
||||
const directionOptions = [
|
||||
{ value: "asc", label: t("Ascending") },
|
||||
{ value: "desc", label: t("Descending") },
|
||||
];
|
||||
|
||||
const handleStartDraft = useCallback(() => {
|
||||
const usedIds = new Set(sorts.map((s) => s.propertyId));
|
||||
const available = sortableProperties.find((p) => !usedIds.has(p.id));
|
||||
if (!available) return;
|
||||
setDraft({ propertyId: available.id, direction: "asc" });
|
||||
}, [sorts, sortableProperties]);
|
||||
|
||||
const handleSaveDraft = useCallback(() => {
|
||||
if (!draft) return;
|
||||
onChange([...sorts, draft]);
|
||||
setDraft(null);
|
||||
}, [draft, sorts, onChange]);
|
||||
|
||||
const handleCancelDraft = useCallback(() => {
|
||||
setDraft(null);
|
||||
}, []);
|
||||
|
||||
const handleRemove = useCallback(
|
||||
(index: number) => {
|
||||
onChange(sorts.filter((_, i) => i !== index));
|
||||
},
|
||||
[sorts, onChange],
|
||||
);
|
||||
|
||||
const handlePropertyChange = useCallback(
|
||||
(index: number, propertyId: string | null) => {
|
||||
if (!propertyId) return;
|
||||
onChange(
|
||||
sorts.map((s, i) => (i === index ? { ...s, propertyId } : s)),
|
||||
);
|
||||
},
|
||||
[sorts, onChange],
|
||||
);
|
||||
|
||||
const handleDirectionChange = useCallback(
|
||||
(index: number, direction: string | null) => {
|
||||
if (!direction) return;
|
||||
onChange(
|
||||
sorts.map((s, i) =>
|
||||
i === index
|
||||
? { ...s, direction: direction as "asc" | "desc" }
|
||||
: s,
|
||||
),
|
||||
);
|
||||
},
|
||||
[sorts, onChange],
|
||||
);
|
||||
|
||||
const canAddMore =
|
||||
sortableProperties.length > sorts.length + (draft ? 1 : 0);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
position="bottom-end"
|
||||
shadow="md"
|
||||
width={340}
|
||||
trapFocus
|
||||
withinPortal
|
||||
>
|
||||
<Popover.Target>{children}</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Stack gap="xs">
|
||||
<Text size="xs" fw={600} c="dimmed">
|
||||
{t("Sort by")}
|
||||
</Text>
|
||||
|
||||
{sorts.length === 0 && !draft && (
|
||||
<Text size="xs" c="dimmed">
|
||||
{t("No sorts applied")}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{sorts.map((sort, index) => (
|
||||
<Group key={index} gap="xs" wrap="nowrap">
|
||||
<Select
|
||||
size="xs"
|
||||
data={propertyOptions}
|
||||
value={sort.propertyId}
|
||||
onChange={(val) => handlePropertyChange(index, val)}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
size="xs"
|
||||
data={directionOptions}
|
||||
value={sort.direction}
|
||||
onChange={(val) => handleDirectionChange(index, val)}
|
||||
w={110}
|
||||
/>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="sm"
|
||||
onClick={() => handleRemove(index)}
|
||||
>
|
||||
<IconTrash size={14} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
))}
|
||||
|
||||
{draft && (
|
||||
<Stack gap={6}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Select
|
||||
size="xs"
|
||||
data={propertyOptions}
|
||||
value={draft.propertyId}
|
||||
onChange={(val) =>
|
||||
val && setDraft({ ...draft, propertyId: val })
|
||||
}
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<Select
|
||||
size="xs"
|
||||
data={directionOptions}
|
||||
value={draft.direction}
|
||||
onChange={(val) =>
|
||||
val &&
|
||||
setDraft({
|
||||
...draft,
|
||||
direction: val as "asc" | "desc",
|
||||
})
|
||||
}
|
||||
w={110}
|
||||
/>
|
||||
</Group>
|
||||
<Group justify="flex-end" gap="xs">
|
||||
<Button
|
||||
variant="default"
|
||||
size="xs"
|
||||
onClick={handleCancelDraft}
|
||||
>
|
||||
{t("Cancel")}
|
||||
</Button>
|
||||
<Button size="xs" onClick={handleSaveDraft}>
|
||||
{t("Save")}
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{!draft && canAddMore && (
|
||||
<UnstyledButton
|
||||
onClick={handleStartDraft}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
padding: "4px 0",
|
||||
fontSize: "var(--mantine-font-size-xs)",
|
||||
color: "var(--mantine-color-blue-6)",
|
||||
}}
|
||||
>
|
||||
<IconPlus size={14} />
|
||||
{t("Add sort")}
|
||||
</UnstyledButton>
|
||||
)}
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,274 +0,0 @@
|
||||
import { useState, useCallback, useEffect, useRef } from "react";
|
||||
import {
|
||||
Group,
|
||||
UnstyledButton,
|
||||
Text,
|
||||
ActionIcon,
|
||||
Tooltip,
|
||||
TextInput,
|
||||
Popover,
|
||||
Stack,
|
||||
Divider,
|
||||
} from "@mantine/core";
|
||||
import { IconPlus, IconPencil, IconTrash, IconTable } from "@tabler/icons-react";
|
||||
import { IBaseView } from "@/features/base/types/base.types";
|
||||
import {
|
||||
useUpdateViewMutation,
|
||||
useDeleteViewMutation,
|
||||
} from "@/features/base/queries/base-view-query";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import cellClasses from "@/features/base/styles/cells.module.css";
|
||||
|
||||
type ViewTabsProps = {
|
||||
views: IBaseView[];
|
||||
activeViewId: string | undefined;
|
||||
pageId: string;
|
||||
onViewChange: (viewId: string) => void;
|
||||
onAddView?: () => void;
|
||||
};
|
||||
|
||||
export function ViewTabs({
|
||||
views,
|
||||
activeViewId,
|
||||
pageId,
|
||||
onViewChange,
|
||||
onAddView,
|
||||
}: ViewTabsProps) {
|
||||
const { t } = useTranslation();
|
||||
const [editingViewId, setEditingViewId] = useState<string | null>(null);
|
||||
const [editingName, setEditingName] = useState("");
|
||||
|
||||
const updateViewMutation = useUpdateViewMutation();
|
||||
const deleteViewMutation = useDeleteViewMutation();
|
||||
|
||||
const handleRenameStart = useCallback(
|
||||
(view: IBaseView) => {
|
||||
setEditingViewId(view.id);
|
||||
setEditingName(view.name);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleRenameCommit = useCallback(() => {
|
||||
if (!editingViewId) return;
|
||||
const trimmed = editingName.trim();
|
||||
const view = views.find((v) => v.id === editingViewId);
|
||||
if (trimmed && view && trimmed !== view.name) {
|
||||
updateViewMutation.mutate({
|
||||
viewId: editingViewId,
|
||||
pageId,
|
||||
name: trimmed,
|
||||
});
|
||||
}
|
||||
setEditingViewId(null);
|
||||
}, [editingViewId, editingName, views, pageId, updateViewMutation]);
|
||||
|
||||
const handleRenameKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
handleRenameCommit();
|
||||
}
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
setEditingViewId(null);
|
||||
}
|
||||
},
|
||||
[handleRenameCommit],
|
||||
);
|
||||
|
||||
const handleDelete = useCallback(
|
||||
(viewId: string) => {
|
||||
if (views.length <= 1) return;
|
||||
deleteViewMutation.mutate({ viewId, pageId });
|
||||
if (viewId === activeViewId && views.length > 1) {
|
||||
const remaining = views.filter((v) => v.id !== viewId);
|
||||
onViewChange(remaining[0].id);
|
||||
}
|
||||
},
|
||||
[views, pageId, activeViewId, deleteViewMutation, onViewChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<Group gap={4}>
|
||||
{views.map((view) => (
|
||||
<ViewTab
|
||||
key={view.id}
|
||||
view={view}
|
||||
isActive={view.id === activeViewId}
|
||||
isEditing={view.id === editingViewId}
|
||||
editingName={editingName}
|
||||
canDelete={views.length > 1}
|
||||
onClick={() => onViewChange(view.id)}
|
||||
onRenameStart={() => handleRenameStart(view)}
|
||||
onRenameChange={setEditingName}
|
||||
onRenameCommit={handleRenameCommit}
|
||||
onRenameKeyDown={handleRenameKeyDown}
|
||||
onDelete={() => handleDelete(view.id)}
|
||||
/>
|
||||
))}
|
||||
{onAddView && (
|
||||
<Tooltip label={t("Add view")}>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
color="gray"
|
||||
onClick={onAddView}
|
||||
>
|
||||
<IconPlus size={14} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
function ViewTab({
|
||||
view,
|
||||
isActive,
|
||||
isEditing,
|
||||
editingName,
|
||||
canDelete,
|
||||
onClick,
|
||||
onRenameStart,
|
||||
onRenameChange,
|
||||
onRenameCommit,
|
||||
onRenameKeyDown,
|
||||
onDelete,
|
||||
}: {
|
||||
view: IBaseView;
|
||||
isActive: boolean;
|
||||
isEditing: boolean;
|
||||
editingName: string;
|
||||
canDelete: boolean;
|
||||
onClick: () => void;
|
||||
onRenameStart: () => void;
|
||||
onRenameChange: (name: string) => void;
|
||||
onRenameCommit: () => void;
|
||||
onRenameKeyDown: (e: React.KeyboardEvent) => void;
|
||||
onDelete: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [menuOpened, setMenuOpened] = useState(false);
|
||||
const targetRef = useRef<HTMLButtonElement | null>(null);
|
||||
const dropdownRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// Mantine Popover's built-in closeOnClickOutside / closeOnEscape
|
||||
// only fire when focus is inside the dropdown — but the menu opens
|
||||
// via right-click (focus stays on body), so neither ever triggers.
|
||||
// Wire the close paths ourselves while the menu is open. Capture
|
||||
// phase mousedown so we run before grid-container's outside-click
|
||||
// logic (which would otherwise blur the focused element first and
|
||||
// cause weirdness).
|
||||
useEffect(() => {
|
||||
if (!menuOpened) return;
|
||||
const onMouseDown = (e: MouseEvent) => {
|
||||
const target = e.target as Node;
|
||||
if (dropdownRef.current?.contains(target)) return;
|
||||
if (targetRef.current?.contains(target)) return;
|
||||
setMenuOpened(false);
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setMenuOpened(false);
|
||||
};
|
||||
document.addEventListener("mousedown", onMouseDown, true);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onMouseDown, true);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [menuOpened]);
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<TextInput
|
||||
size="xs"
|
||||
w={120}
|
||||
value={editingName}
|
||||
onChange={(e) => onRenameChange(e.currentTarget.value)}
|
||||
onBlur={onRenameCommit}
|
||||
onKeyDown={onRenameKeyDown}
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const handleTabClick = useCallback(() => {
|
||||
// Left-click on the tab is "switch view"; if the menu happens to
|
||||
// be open from a prior right-click, dismiss it as part of the
|
||||
// same gesture so the user doesn't have to click twice.
|
||||
if (menuOpened) setMenuOpened(false);
|
||||
onClick();
|
||||
}, [menuOpened, onClick]);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={menuOpened}
|
||||
onClose={() => setMenuOpened(false)}
|
||||
position="bottom-start"
|
||||
shadow="md"
|
||||
width={180}
|
||||
withinPortal
|
||||
>
|
||||
<Popover.Target>
|
||||
<UnstyledButton
|
||||
ref={targetRef}
|
||||
onClick={handleTabClick}
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
setMenuOpened(true);
|
||||
}}
|
||||
style={{
|
||||
padding: "4px 10px",
|
||||
borderRadius: "var(--mantine-radius-sm)",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
<Group gap={6} wrap="nowrap">
|
||||
<IconTable size={14} opacity={0.5} />
|
||||
<Text
|
||||
size="sm"
|
||||
c={isActive ? undefined : "dimmed"}
|
||||
>
|
||||
{view.name}
|
||||
</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown ref={dropdownRef} p={4}>
|
||||
<Stack gap={0}>
|
||||
<UnstyledButton
|
||||
className={cellClasses.menuItem}
|
||||
onClick={() => {
|
||||
setMenuOpened(false);
|
||||
onRenameStart();
|
||||
}}
|
||||
>
|
||||
<Group gap={8} wrap="nowrap">
|
||||
<IconPencil size={14} />
|
||||
<Text size="sm">{t("Rename")}</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
{canDelete && (
|
||||
<>
|
||||
<Divider my={4} />
|
||||
<UnstyledButton
|
||||
className={cellClasses.menuItem}
|
||||
onClick={() => {
|
||||
setMenuOpened(false);
|
||||
onDelete();
|
||||
}}
|
||||
style={{ color: "var(--mantine-color-red-6)" }}
|
||||
>
|
||||
<Group gap={8} wrap="nowrap">
|
||||
<IconTrash size={14} />
|
||||
<Text size="sm">{t("Delete view")}</Text>
|
||||
</Group>
|
||||
</UnstyledButton>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
|
||||
let throwOnNextCall = false;
|
||||
vi.mock("fractional-indexing-jittered", () => ({
|
||||
generateJitteredKeyBetween: (a: string | null, b: string | null) => {
|
||||
if (throwOnNextCall) {
|
||||
throwOnNextCall = false;
|
||||
throw new Error("lower >= upper");
|
||||
}
|
||||
return `${a ?? "START"}|${b ?? "END"}`;
|
||||
},
|
||||
}));
|
||||
|
||||
import { resolveCardDrop } from "../resolve-card-drop";
|
||||
import { NO_VALUE_CHOICE_ID } from "@/features/base/types/base.types";
|
||||
|
||||
const mkRow = (id: string, position: string) =>
|
||||
({ id, position, cells: {} }) as any;
|
||||
|
||||
describe("resolveCardDrop", () => {
|
||||
it("returns cells-only when cross-column drop happens with sort active", () => {
|
||||
const result = resolveCardDrop({
|
||||
draggedCardId: "r1",
|
||||
targetCardId: "r2",
|
||||
edge: "top",
|
||||
sourceColumnKey: "c1",
|
||||
targetColumnKey: "c2",
|
||||
groupByPropertyId: "prop-status",
|
||||
columnRows: [mkRow("r2", "b")],
|
||||
sortsActive: true,
|
||||
});
|
||||
expect(result.cells).toEqual({ "prop-status": "c2" });
|
||||
expect(result.position).toBeUndefined();
|
||||
});
|
||||
|
||||
it("writes null cell value when target is the NO_VALUE column", () => {
|
||||
const result = resolveCardDrop({
|
||||
draggedCardId: "r1",
|
||||
targetCardId: "r2",
|
||||
edge: "top",
|
||||
sourceColumnKey: "c1",
|
||||
targetColumnKey: NO_VALUE_CHOICE_ID,
|
||||
groupByPropertyId: "prop-status",
|
||||
columnRows: [mkRow("r2", "b")],
|
||||
sortsActive: false,
|
||||
});
|
||||
expect(result.cells).toEqual({ "prop-status": null });
|
||||
});
|
||||
|
||||
it("returns position-only when intra-column drop with no sort", () => {
|
||||
const result = resolveCardDrop({
|
||||
draggedCardId: "r1",
|
||||
targetCardId: "r2",
|
||||
edge: "bottom",
|
||||
sourceColumnKey: "c1",
|
||||
targetColumnKey: "c1",
|
||||
groupByPropertyId: "prop-status",
|
||||
columnRows: [mkRow("r2", "a"), mkRow("r3", "c")],
|
||||
sortsActive: false,
|
||||
});
|
||||
expect(result.cells).toBeUndefined();
|
||||
expect(typeof result.position).toBe("string");
|
||||
// Between 'a' (r2) and 'c' (r3) → some key, exact value depends on jitter
|
||||
// but must satisfy 'a' < key < 'c' for typical jitter outputs.
|
||||
expect(result.position! > "a").toBe(true);
|
||||
expect(result.position! < "c").toBe(true);
|
||||
});
|
||||
|
||||
it("returns both cells and position for cross-column with slot", () => {
|
||||
const result = resolveCardDrop({
|
||||
draggedCardId: "r1",
|
||||
targetCardId: "r2",
|
||||
edge: "top",
|
||||
sourceColumnKey: "c1",
|
||||
targetColumnKey: "c2",
|
||||
groupByPropertyId: "prop-status",
|
||||
columnRows: [mkRow("r2", "b"), mkRow("r3", "d")],
|
||||
sortsActive: false,
|
||||
});
|
||||
expect(result.cells).toEqual({ "prop-status": "c2" });
|
||||
expect(typeof result.position).toBe("string");
|
||||
expect(result.position! < "b").toBe(true);
|
||||
});
|
||||
|
||||
it("appends to the end when targetCardId is not in columnRows (empty/below-last)", () => {
|
||||
const result = resolveCardDrop({
|
||||
draggedCardId: "r1",
|
||||
targetCardId: "__column-body__", // sentinel
|
||||
edge: "bottom",
|
||||
sourceColumnKey: "c1",
|
||||
targetColumnKey: "c2",
|
||||
groupByPropertyId: "prop-status",
|
||||
columnRows: [mkRow("r5", "z")],
|
||||
sortsActive: false,
|
||||
});
|
||||
expect(result.cells).toEqual({ "prop-status": "c2" });
|
||||
expect(result.position! > "z").toBe(true);
|
||||
});
|
||||
|
||||
it("returns undefined for both fields when same column and sort active", () => {
|
||||
const result = resolveCardDrop({
|
||||
draggedCardId: "r1",
|
||||
targetCardId: "r2",
|
||||
edge: "top",
|
||||
sourceColumnKey: "c1",
|
||||
targetColumnKey: "c1",
|
||||
groupByPropertyId: "prop-status",
|
||||
columnRows: [mkRow("r2", "a")],
|
||||
sortsActive: true,
|
||||
});
|
||||
expect(result.cells).toBeUndefined();
|
||||
expect(result.position).toBeUndefined();
|
||||
});
|
||||
|
||||
it("falls back to append-after-lower when generateJitteredKeyBetween throws", () => {
|
||||
throwOnNextCall = true;
|
||||
const result = resolveCardDrop({
|
||||
draggedCardId: "r1",
|
||||
targetCardId: "r2",
|
||||
edge: "top",
|
||||
sourceColumnKey: "c1",
|
||||
targetColumnKey: "c1",
|
||||
groupByPropertyId: "prop-status",
|
||||
columnRows: [mkRow("r2", "b"), mkRow("r3", "d")],
|
||||
sortsActive: false,
|
||||
});
|
||||
// First call (lower=null, upper="b") threw → second call (lower=null,
|
||||
// upper=null) succeeds. The mock returns "START|END" in that case.
|
||||
expect(result.cells).toBeUndefined();
|
||||
expect(result.position).toBe("START|END");
|
||||
});
|
||||
});
|
||||
@@ -1,120 +0,0 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { partitionRowsByGroup } from "../use-kanban-groups";
|
||||
import { NO_VALUE_CHOICE_ID } from "@/features/base/types/base.types";
|
||||
|
||||
describe("partitionRowsByGroup", () => {
|
||||
const property = {
|
||||
id: "p1",
|
||||
type: "status",
|
||||
typeOptions: {
|
||||
choices: [
|
||||
{ id: "c1", name: "Todo", color: "blue" },
|
||||
{ id: "c2", name: "Done", color: "green" },
|
||||
],
|
||||
choiceOrder: ["c1", "c2"],
|
||||
},
|
||||
} as any;
|
||||
|
||||
const rows = [
|
||||
{ id: "r1", cells: { p1: "c1" }, position: "a0" },
|
||||
{ id: "r2", cells: { p1: "c2" }, position: "a1" },
|
||||
{ id: "r3", cells: {}, position: "a2" },
|
||||
{ id: "r4", cells: { p1: "c1" }, position: "a3" },
|
||||
] as any;
|
||||
|
||||
it("groups rows under the choice id their cell points at", () => {
|
||||
const result = partitionRowsByGroup(rows, property, undefined, undefined);
|
||||
expect(result.columns.map((c) => c.key)).toEqual([
|
||||
NO_VALUE_CHOICE_ID,
|
||||
"c1",
|
||||
"c2",
|
||||
]);
|
||||
expect(result.columns[1].rows.map((r) => r.id)).toEqual(["r1", "r4"]);
|
||||
expect(result.columns[2].rows.map((r) => r.id)).toEqual(["r2"]);
|
||||
});
|
||||
|
||||
it("puts rows without the cell into the NO_VALUE column", () => {
|
||||
const result = partitionRowsByGroup(rows, property, undefined, undefined);
|
||||
expect(result.columns[0].key).toBe(NO_VALUE_CHOICE_ID);
|
||||
expect(result.columns[0].rows.map((r) => r.id)).toEqual(["r3"]);
|
||||
});
|
||||
|
||||
it("hides columns listed in hiddenChoiceIds", () => {
|
||||
const result = partitionRowsByGroup(rows, property, ["c2"], undefined);
|
||||
expect(result.columns.map((c) => c.key)).toEqual([NO_VALUE_CHOICE_ID, "c1"]);
|
||||
});
|
||||
|
||||
it("hides the NO_VALUE column when hiddenChoiceIds includes the sentinel", () => {
|
||||
const result = partitionRowsByGroup(
|
||||
rows,
|
||||
property,
|
||||
[NO_VALUE_CHOICE_ID],
|
||||
undefined,
|
||||
);
|
||||
expect(result.columns.map((c) => c.key)).toEqual(["c1", "c2"]);
|
||||
});
|
||||
|
||||
it("respects an override choiceOrder", () => {
|
||||
const result = partitionRowsByGroup(
|
||||
rows,
|
||||
property,
|
||||
undefined,
|
||||
["c2", "c1", NO_VALUE_CHOICE_ID],
|
||||
);
|
||||
expect(result.columns.map((c) => c.key)).toEqual([
|
||||
"c2",
|
||||
"c1",
|
||||
NO_VALUE_CHOICE_ID,
|
||||
]);
|
||||
});
|
||||
|
||||
it("appends newly-added choices (missing from override choiceOrder) at the end", () => {
|
||||
const result = partitionRowsByGroup(
|
||||
rows,
|
||||
property,
|
||||
undefined,
|
||||
["c1"], // missing c2 and NO_VALUE
|
||||
);
|
||||
expect(result.columns.map((c) => c.key)).toEqual([
|
||||
"c1",
|
||||
NO_VALUE_CHOICE_ID,
|
||||
"c2",
|
||||
]);
|
||||
});
|
||||
|
||||
it("drops entries in choiceOrder that no longer exist on the property", () => {
|
||||
const result = partitionRowsByGroup(
|
||||
rows,
|
||||
property,
|
||||
undefined,
|
||||
["c1", "deleted-choice", "c2"],
|
||||
);
|
||||
// 'deleted-choice' is filtered out as stale. NO_VALUE is auto-appended
|
||||
// (it's never in the property's choices but always rendered unless
|
||||
// explicitly hidden via hiddenChoiceIds).
|
||||
expect(result.columns.map((c) => c.key)).toEqual([
|
||||
"c1",
|
||||
"c2",
|
||||
NO_VALUE_CHOICE_ID,
|
||||
]);
|
||||
});
|
||||
|
||||
it("returns null columns when groupByPropertyId is unset", () => {
|
||||
const result = partitionRowsByGroup(rows, undefined, undefined, undefined);
|
||||
expect(result.columns).toEqual([]);
|
||||
});
|
||||
|
||||
it("preserves row order within a column (input order)", () => {
|
||||
const rowsOutOfOrder = [
|
||||
{ id: "r1", cells: { p1: "c1" }, position: "b" },
|
||||
{ id: "r2", cells: { p1: "c1" }, position: "a" },
|
||||
] as any;
|
||||
const result = partitionRowsByGroup(
|
||||
rowsOutOfOrder,
|
||||
property,
|
||||
undefined,
|
||||
undefined,
|
||||
);
|
||||
expect(result.columns[1].rows.map((r) => r.id)).toEqual(["r1", "r2"]);
|
||||
});
|
||||
});
|
||||
@@ -1,92 +0,0 @@
|
||||
import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
|
||||
import { IBaseRow, NO_VALUE_CHOICE_ID } from "@/features/base/types/base.types";
|
||||
|
||||
type Edge = "top" | "bottom";
|
||||
|
||||
export type ResolveCardDropInput = {
|
||||
draggedCardId: string;
|
||||
targetCardId: string;
|
||||
edge: Edge | null;
|
||||
sourceColumnKey: string;
|
||||
targetColumnKey: string;
|
||||
groupByPropertyId: string;
|
||||
columnRows: IBaseRow[]; // rows currently in the target column, in display order
|
||||
sortsActive: boolean;
|
||||
};
|
||||
|
||||
export type ResolveCardDropResult = {
|
||||
cells: Record<string, unknown> | undefined;
|
||||
position: string | undefined;
|
||||
};
|
||||
|
||||
export function resolveCardDrop(
|
||||
input: ResolveCardDropInput,
|
||||
): ResolveCardDropResult {
|
||||
const {
|
||||
draggedCardId,
|
||||
targetCardId,
|
||||
edge,
|
||||
sourceColumnKey,
|
||||
targetColumnKey,
|
||||
groupByPropertyId,
|
||||
columnRows,
|
||||
sortsActive,
|
||||
} = input;
|
||||
|
||||
const sameColumn = sourceColumnKey === targetColumnKey;
|
||||
|
||||
// Compute the cells patch first.
|
||||
const cells = sameColumn
|
||||
? undefined
|
||||
: {
|
||||
[groupByPropertyId]:
|
||||
targetColumnKey === NO_VALUE_CHOICE_ID ? null : targetColumnKey,
|
||||
};
|
||||
|
||||
// Same column + sort active → block (caller should have stopped the drag
|
||||
// via canDrop, but we return no-op for safety).
|
||||
if (sameColumn && sortsActive) {
|
||||
return { cells: undefined, position: undefined };
|
||||
}
|
||||
|
||||
// Sort active and cross-column → only cells, no position.
|
||||
if (sortsActive) {
|
||||
return { cells, position: undefined };
|
||||
}
|
||||
|
||||
// Sort inactive → compute the slot.
|
||||
// Filter the dragged card out of the column (it may already be there
|
||||
// when intra-column drag).
|
||||
const target = columnRows.filter((r) => r.id !== draggedCardId);
|
||||
const targetIndex = target.findIndex((r) => r.id === targetCardId);
|
||||
|
||||
let lower: string | null;
|
||||
let upper: string | null;
|
||||
|
||||
if (targetIndex === -1) {
|
||||
// Drop on column body / sentinel / below-last → append.
|
||||
const last = target[target.length - 1];
|
||||
lower = last?.position ?? null;
|
||||
upper = null;
|
||||
} else if (edge === "top") {
|
||||
lower = target[targetIndex - 1]?.position ?? null;
|
||||
upper = target[targetIndex].position;
|
||||
} else {
|
||||
lower = target[targetIndex].position;
|
||||
upper = target[targetIndex + 1]?.position ?? null;
|
||||
}
|
||||
|
||||
let position: string;
|
||||
try {
|
||||
position = generateJitteredKeyBetween(lower, upper);
|
||||
} catch {
|
||||
// Throws whenever `lower >= upper` (the row ordering in `columnRows`
|
||||
// briefly diverged from position ordering — typically during a
|
||||
// concurrent reorder). Fall back to insert-after-lower. The card lands
|
||||
// at the end of the column rather than at the dropped slot; surprising
|
||||
// but better than rejecting the drop. The reconciliation arrives via
|
||||
// the realtime patch.
|
||||
position = generateJitteredKeyBetween(lower, null);
|
||||
}
|
||||
return { cells, position };
|
||||
}
|
||||
@@ -1,362 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { useAtomValue, getDefaultStore } from "jotai";
|
||||
import { useQueryClient, InfiniteData } from "@tanstack/react-query";
|
||||
import { socketAtom } from "@/features/websocket/atoms/socket-atom";
|
||||
import {
|
||||
IBaseProperty,
|
||||
IBaseRow,
|
||||
IBaseView,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { selectedRowIdsAtomFamily } from "@/features/base/atoms/base-atoms";
|
||||
import { formulaRecomputeAtom } from "@/features/base/atoms/formula-recompute-atom";
|
||||
import { IPagination } from "@/lib/types";
|
||||
|
||||
type BaseRowCreated = {
|
||||
operation: "base:row:created";
|
||||
pageId: string;
|
||||
row: IBaseRow;
|
||||
requestId?: string | null;
|
||||
};
|
||||
|
||||
type BaseRowUpdated = {
|
||||
operation: "base:row:updated";
|
||||
pageId: string;
|
||||
rowId: string;
|
||||
updatedCells: Record<string, unknown>;
|
||||
requestId?: string | null;
|
||||
};
|
||||
|
||||
type BaseRowDeleted = {
|
||||
operation: "base:row:deleted";
|
||||
pageId: string;
|
||||
rowId: string;
|
||||
requestId?: string | null;
|
||||
};
|
||||
|
||||
type BaseRowsDeleted = {
|
||||
operation: "base:rows:deleted";
|
||||
pageId: string;
|
||||
rowIds: string[];
|
||||
requestId?: string | null;
|
||||
};
|
||||
|
||||
type BaseRowReordered = {
|
||||
operation: "base:row:reordered";
|
||||
pageId: string;
|
||||
rowId: string;
|
||||
position: string;
|
||||
requestId?: string | null;
|
||||
};
|
||||
|
||||
type BasePropertyEvent = {
|
||||
operation:
|
||||
| "base:property:created"
|
||||
| "base:property:updated"
|
||||
| "base:property:deleted"
|
||||
| "base:property:reordered";
|
||||
pageId: string;
|
||||
property?: IBaseProperty;
|
||||
propertyId?: string;
|
||||
requestId?: string | null;
|
||||
};
|
||||
|
||||
type BaseViewEvent = {
|
||||
operation:
|
||||
| "base:view:created"
|
||||
| "base:view:updated"
|
||||
| "base:view:deleted";
|
||||
pageId: string;
|
||||
view?: IBaseView;
|
||||
viewId?: string;
|
||||
};
|
||||
|
||||
type BaseRowsUpdated = {
|
||||
operation: "base:rows:updated";
|
||||
pageId: string;
|
||||
rowIds: string[];
|
||||
propertyIds: string[];
|
||||
requestId?: string | null;
|
||||
};
|
||||
|
||||
type BaseFormulaRecomputeStarted = {
|
||||
operation: "base:formula:recompute:started";
|
||||
pageId: string;
|
||||
propertyIds: string[];
|
||||
jobId: string;
|
||||
};
|
||||
|
||||
type BaseFormulaRecomputeCompleted = {
|
||||
operation: "base:formula:recompute:completed";
|
||||
pageId: string;
|
||||
propertyIds: string[];
|
||||
jobId: string;
|
||||
processed: number;
|
||||
errored: number;
|
||||
};
|
||||
|
||||
type BaseSchemaBumped = {
|
||||
operation: "base:schema:bumped";
|
||||
pageId: string;
|
||||
schemaVersion: number;
|
||||
};
|
||||
|
||||
type BaseInboundEvent =
|
||||
| BaseRowCreated
|
||||
| BaseRowUpdated
|
||||
| BaseRowDeleted
|
||||
| BaseRowsDeleted
|
||||
| BaseRowReordered
|
||||
| BaseRowsUpdated
|
||||
| BaseFormulaRecomputeStarted
|
||||
| BaseFormulaRecomputeCompleted
|
||||
| BaseSchemaBumped
|
||||
| BasePropertyEvent
|
||||
| BaseViewEvent
|
||||
| { operation: string; pageId: string };
|
||||
|
||||
/*
|
||||
* Module-level set of requestIds we've just sent to the server. When the
|
||||
* socket echoes back the mutation as a `base:row:*` / `base:property:*`
|
||||
* event with a matching `requestId`, the socket handler drops it because
|
||||
* the local mutation already updated the cache. Bounded so it can't grow
|
||||
* unbounded on a long-lived tab.
|
||||
*/
|
||||
const outboundRequestIds = new Set<string>();
|
||||
const OUTBOUND_MAX = 256;
|
||||
|
||||
export function markRequestIdOutbound(requestId: string): void {
|
||||
outboundRequestIds.add(requestId);
|
||||
if (outboundRequestIds.size > OUTBOUND_MAX) {
|
||||
const oldest = outboundRequestIds.values().next().value;
|
||||
if (oldest) outboundRequestIds.delete(oldest);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Realtime bridge for a single base. Joins the server's `base-{pageId}`
|
||||
* room on mount, leaves on unmount, and reconciles the React Query caches
|
||||
* (`["base-rows", pageId, ...]` and `["bases", pageId]`) when events
|
||||
* arrive from other clients.
|
||||
*/
|
||||
export function useBaseSocket(pageId: string | undefined): void {
|
||||
const socket = useAtomValue(socketAtom);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
if (!socket || !pageId) return;
|
||||
|
||||
socket.emit("message", { operation: "base:subscribe", pageId });
|
||||
|
||||
const handler = (raw: unknown) => {
|
||||
if (!raw || typeof raw !== "object") return;
|
||||
const event = raw as BaseInboundEvent;
|
||||
if (event.pageId !== pageId) return;
|
||||
|
||||
const requestId = (event as any).requestId as string | undefined;
|
||||
if (requestId && outboundRequestIds.has(requestId)) {
|
||||
outboundRequestIds.delete(requestId);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.operation) {
|
||||
case "base:row:created": {
|
||||
const e = event as BaseRowCreated;
|
||||
queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
|
||||
{ queryKey: ["base-rows", pageId] },
|
||||
(old) => {
|
||||
if (!old) return old;
|
||||
const lastPageIndex = old.pages.length - 1;
|
||||
return {
|
||||
...old,
|
||||
pages: old.pages.map((page, index) =>
|
||||
index === lastPageIndex
|
||||
? { ...page, items: [...page.items, e.row] }
|
||||
: page,
|
||||
),
|
||||
};
|
||||
},
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "base:row:updated": {
|
||||
const e = event as BaseRowUpdated;
|
||||
queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
|
||||
{ queryKey: ["base-rows", pageId] },
|
||||
(old) =>
|
||||
!old
|
||||
? old
|
||||
: {
|
||||
...old,
|
||||
pages: old.pages.map((page) => ({
|
||||
...page,
|
||||
items: page.items.map((row) =>
|
||||
row.id === e.rowId
|
||||
? {
|
||||
...row,
|
||||
cells: { ...row.cells, ...e.updatedCells },
|
||||
}
|
||||
: row,
|
||||
),
|
||||
})),
|
||||
},
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "base:row:deleted": {
|
||||
const e = event as BaseRowDeleted;
|
||||
queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
|
||||
{ queryKey: ["base-rows", pageId] },
|
||||
(old) =>
|
||||
!old
|
||||
? old
|
||||
: {
|
||||
...old,
|
||||
pages: old.pages.map((page) => ({
|
||||
...page,
|
||||
items: page.items.filter((row) => row.id !== e.rowId),
|
||||
})),
|
||||
},
|
||||
);
|
||||
const store = getDefaultStore();
|
||||
const selectedIdsAtom = selectedRowIdsAtomFamily(pageId);
|
||||
const current = store.get(selectedIdsAtom);
|
||||
if (current.has(e.rowId)) {
|
||||
const next = new Set(current);
|
||||
next.delete(e.rowId);
|
||||
store.set(selectedIdsAtom, next);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "base:rows:deleted": {
|
||||
const e = event as BaseRowsDeleted;
|
||||
const removeSet = new Set(e.rowIds);
|
||||
queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
|
||||
{ queryKey: ["base-rows", pageId] },
|
||||
(old) => {
|
||||
if (!old) return old;
|
||||
return {
|
||||
...old,
|
||||
pages: old.pages.map((page) => ({
|
||||
...page,
|
||||
items: page.items.filter((row) => !removeSet.has(row.id)),
|
||||
})),
|
||||
};
|
||||
},
|
||||
);
|
||||
const store = getDefaultStore();
|
||||
const selectedIdsAtom = selectedRowIdsAtomFamily(pageId);
|
||||
const current = store.get(selectedIdsAtom);
|
||||
if (current.size > 0) {
|
||||
let changed = false;
|
||||
const next = new Set(current);
|
||||
for (const id of e.rowIds) {
|
||||
if (next.delete(id)) changed = true;
|
||||
}
|
||||
if (changed) store.set(selectedIdsAtom, next);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "base:row:reordered": {
|
||||
const e = event as BaseRowReordered;
|
||||
queryClient.setQueriesData<InfiniteData<IPagination<IBaseRow>>>(
|
||||
{ queryKey: ["base-rows", pageId] },
|
||||
(old) =>
|
||||
!old
|
||||
? old
|
||||
: {
|
||||
...old,
|
||||
pages: old.pages.map((page) => ({
|
||||
...page,
|
||||
items: page.items.map((row) =>
|
||||
row.id === e.rowId
|
||||
? { ...row, position: e.position }
|
||||
: row,
|
||||
),
|
||||
})),
|
||||
},
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "base:rows:updated": {
|
||||
const e = event as BaseRowsUpdated;
|
||||
// Only refetch if the batch touches rows currently in cache.
|
||||
// Uncached pages will fetch fresh when the user scrolls to them,
|
||||
// so invalidating on batches the user can't see is wasted work —
|
||||
// formula backfills on a large base emit one batch event per 500
|
||||
// rows, so this also drops ~Nrows/500 redundant refetches.
|
||||
const updatedIds = new Set(e.rowIds);
|
||||
const caches = queryClient.getQueriesData<
|
||||
InfiniteData<IPagination<IBaseRow>>
|
||||
>({ queryKey: ["base-rows", pageId] });
|
||||
let touchesCache = false;
|
||||
outer: for (const [, data] of caches) {
|
||||
if (!data) continue;
|
||||
for (const page of data.pages) {
|
||||
for (const row of page.items) {
|
||||
if (updatedIds.has(row.id)) {
|
||||
touchesCache = true;
|
||||
break outer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (touchesCache) {
|
||||
queryClient.invalidateQueries({ queryKey: ["base-rows", pageId] });
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "base:schema:bumped": {
|
||||
// The worker just committed a property type conversion (Path 3) or
|
||||
// a property/cell GC. Invalidate the base + row caches so cells
|
||||
// re-fetch under the new schema.
|
||||
queryClient.invalidateQueries({ queryKey: ["base-rows", pageId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["bases", pageId] });
|
||||
break;
|
||||
}
|
||||
case "base:formula:recompute:started": {
|
||||
const e = event as BaseFormulaRecomputeStarted;
|
||||
const store = getDefaultStore();
|
||||
store.set(formulaRecomputeAtom, {
|
||||
...store.get(formulaRecomputeAtom),
|
||||
[e.jobId]: e.propertyIds,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "base:formula:recompute:completed": {
|
||||
const e = event as BaseFormulaRecomputeCompleted;
|
||||
const store = getDefaultStore();
|
||||
const current = store.get(formulaRecomputeAtom);
|
||||
if (e.jobId in current) {
|
||||
const next = { ...current };
|
||||
delete next[e.jobId];
|
||||
store.set(formulaRecomputeAtom, next);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case "base:property:created":
|
||||
case "base:property:updated":
|
||||
case "base:property:deleted":
|
||||
case "base:property:reordered":
|
||||
case "base:view:created":
|
||||
case "base:view:updated":
|
||||
case "base:view:deleted": {
|
||||
// Schema/metadata events only touch the base's `properties` /
|
||||
// `views`, not the cell data — so we invalidate just
|
||||
// `["bases", pageId]` here. Row reconciliation is handled
|
||||
// per-event by the row cases above.
|
||||
queryClient.invalidateQueries({ queryKey: ["bases", pageId] });
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
socket.on("message", handler);
|
||||
|
||||
return () => {
|
||||
socket.off("message", handler);
|
||||
socket.emit("message", { operation: "base:unsubscribe", pageId });
|
||||
};
|
||||
}, [socket, pageId, queryClient]);
|
||||
}
|
||||
@@ -1,426 +0,0 @@
|
||||
import { useMemo, useCallback, useRef, useState, useEffect } from "react";
|
||||
import {
|
||||
useReactTable,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
getFilteredRowModel,
|
||||
createColumnHelper,
|
||||
ColumnDef,
|
||||
SortingState,
|
||||
ColumnSizingState,
|
||||
VisibilityState,
|
||||
ColumnOrderState,
|
||||
ColumnPinningState,
|
||||
Table,
|
||||
} from "@tanstack/react-table";
|
||||
import {
|
||||
IBase,
|
||||
IBaseProperty,
|
||||
IBaseRow,
|
||||
IBaseView,
|
||||
ViewConfig,
|
||||
} from "@/features/base/types/base.types";
|
||||
import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
|
||||
|
||||
const DEFAULT_COLUMN_WIDTH = 180;
|
||||
const MIN_COLUMN_WIDTH = 80;
|
||||
const MAX_COLUMN_WIDTH = 600;
|
||||
const ROW_NUMBER_COLUMN_WIDTH = 64;
|
||||
|
||||
// Keep in sync with the server's SYSTEM_PROPERTY_TYPES in
|
||||
// apps/server/src/core/base/base.schemas.ts. Both sets must include
|
||||
// formula so the property menu treats formula columns as read-only.
|
||||
export const SYSTEM_PROPERTY_TYPES = new Set([
|
||||
"createdAt",
|
||||
"lastEditedAt",
|
||||
"lastEditedBy",
|
||||
"formula",
|
||||
]);
|
||||
|
||||
export function isSystemPropertyType(type: string): boolean {
|
||||
return SYSTEM_PROPERTY_TYPES.has(type);
|
||||
}
|
||||
|
||||
const columnHelper = createColumnHelper<IBaseRow>();
|
||||
|
||||
function getSystemAccessor(type: string): ((row: IBaseRow) => unknown) | null {
|
||||
switch (type) {
|
||||
case "createdAt":
|
||||
return (row) => row.createdAt;
|
||||
case "lastEditedAt":
|
||||
return (row) => row.updatedAt;
|
||||
case "lastEditedBy":
|
||||
return (row) => row.lastUpdatedById ?? row.creatorId;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function buildColumns(properties: IBaseProperty[]): ColumnDef<IBaseRow, unknown>[] {
|
||||
const rowNumberColumn = columnHelper.display({
|
||||
id: "__row_number",
|
||||
header: "#",
|
||||
size: ROW_NUMBER_COLUMN_WIDTH,
|
||||
minSize: ROW_NUMBER_COLUMN_WIDTH,
|
||||
maxSize: ROW_NUMBER_COLUMN_WIDTH,
|
||||
enableResizing: false,
|
||||
enableSorting: false,
|
||||
enableHiding: false,
|
||||
});
|
||||
|
||||
const propertyColumns = properties.map((property) => {
|
||||
const sysAccessor = getSystemAccessor(property.type);
|
||||
if (sysAccessor) {
|
||||
return columnHelper.accessor(sysAccessor, {
|
||||
id: property.id,
|
||||
header: property.name,
|
||||
size: DEFAULT_COLUMN_WIDTH,
|
||||
minSize: MIN_COLUMN_WIDTH,
|
||||
maxSize: MAX_COLUMN_WIDTH,
|
||||
enableResizing: true,
|
||||
enableSorting: false,
|
||||
enableHiding: !property.isPrimary,
|
||||
meta: { property },
|
||||
});
|
||||
}
|
||||
|
||||
return columnHelper.accessor((row) => row.cells[property.id], {
|
||||
id: property.id,
|
||||
header: property.name,
|
||||
size: DEFAULT_COLUMN_WIDTH,
|
||||
minSize: MIN_COLUMN_WIDTH,
|
||||
maxSize: MAX_COLUMN_WIDTH,
|
||||
enableResizing: true,
|
||||
enableSorting: true,
|
||||
enableHiding: !property.isPrimary,
|
||||
meta: { property },
|
||||
});
|
||||
});
|
||||
|
||||
return [rowNumberColumn, ...propertyColumns];
|
||||
}
|
||||
|
||||
function buildSortingState(config: ViewConfig | undefined): SortingState {
|
||||
if (!config?.sorts?.length) return [];
|
||||
return config.sorts.map((sort) => ({
|
||||
id: sort.propertyId,
|
||||
desc: sort.direction === "desc",
|
||||
}));
|
||||
}
|
||||
|
||||
function buildColumnSizing(
|
||||
config: ViewConfig | undefined,
|
||||
): ColumnSizingState {
|
||||
const sizing: ColumnSizingState = {
|
||||
__row_number: ROW_NUMBER_COLUMN_WIDTH,
|
||||
};
|
||||
if (config?.propertyWidths) {
|
||||
Object.entries(config.propertyWidths).forEach(([id, width]) => {
|
||||
sizing[id] = width;
|
||||
});
|
||||
}
|
||||
return sizing;
|
||||
}
|
||||
|
||||
function buildColumnVisibility(
|
||||
config: ViewConfig | undefined,
|
||||
properties: IBaseProperty[],
|
||||
): VisibilityState {
|
||||
const visibility: VisibilityState = { __row_number: true };
|
||||
|
||||
if (config?.hiddenPropertyIds) {
|
||||
const hiddenSet = new Set(config.hiddenPropertyIds);
|
||||
properties.forEach((p) => {
|
||||
visibility[p.id] = !hiddenSet.has(p.id);
|
||||
});
|
||||
return visibility;
|
||||
}
|
||||
|
||||
if (config?.visiblePropertyIds?.length) {
|
||||
const visibleSet = new Set(config.visiblePropertyIds);
|
||||
properties.forEach((p) => {
|
||||
visibility[p.id] = visibleSet.has(p.id);
|
||||
});
|
||||
return visibility;
|
||||
}
|
||||
|
||||
properties.forEach((p) => {
|
||||
visibility[p.id] = true;
|
||||
});
|
||||
return visibility;
|
||||
}
|
||||
|
||||
function buildColumnOrder(
|
||||
config: ViewConfig | undefined,
|
||||
properties: IBaseProperty[],
|
||||
): ColumnOrderState {
|
||||
if (config?.propertyOrder?.length) {
|
||||
const orderSet = new Set(config.propertyOrder);
|
||||
const missing = properties
|
||||
.filter((p) => !orderSet.has(p.id))
|
||||
.sort((a, b) => (a.position < b.position ? -1 : a.position > b.position ? 1 : 0))
|
||||
.map((p) => p.id);
|
||||
return ["__row_number", ...config.propertyOrder, ...missing];
|
||||
}
|
||||
const sorted = [...properties].sort((a, b) => {
|
||||
if (a.isPrimary) return -1;
|
||||
if (b.isPrimary) return 1;
|
||||
return a.position < b.position ? -1 : a.position > b.position ? 1 : 0;
|
||||
});
|
||||
return ["__row_number", ...sorted.map((p) => p.id)];
|
||||
}
|
||||
|
||||
function buildColumnPinning(
|
||||
properties: IBaseProperty[],
|
||||
): ColumnPinningState {
|
||||
const primary = properties.find((p) => p.isPrimary);
|
||||
return {
|
||||
left: primary ? ["__row_number", primary.id] : ["__row_number"],
|
||||
right: [],
|
||||
};
|
||||
}
|
||||
|
||||
// Serializes the live react-table state into a persisted ViewConfig.
|
||||
// Sort/filter toolbar mutations and the debounced `persistViewConfig`
|
||||
// both go through this so a direct mutation (e.g. adding a sort) can't
|
||||
// clobber a pending hide/reorder/resize by reading stale `activeView.config`.
|
||||
export function buildViewConfigFromTable(
|
||||
table: Table<IBaseRow>,
|
||||
base: ViewConfig | undefined,
|
||||
overrides: Partial<ViewConfig> = {},
|
||||
): ViewConfig {
|
||||
// Guard against corrupted persisted configs — if `base` ever comes
|
||||
// back as something other than a plain object (e.g. a jsonb-stored
|
||||
// string `"{}"` from a buggy seed), spreading it would iterate its
|
||||
// characters into keys `0`, `1`, … and poison the config forever.
|
||||
const safeBase =
|
||||
base && typeof base === "object" && !Array.isArray(base) ? base : {};
|
||||
const state = table.getState();
|
||||
|
||||
const sorts = state.sorting.map((s) => ({
|
||||
propertyId: s.id,
|
||||
direction: (s.desc ? "desc" : "asc") as "asc" | "desc",
|
||||
}));
|
||||
|
||||
const propertyWidths: Record<string, number> = {};
|
||||
Object.entries(state.columnSizing).forEach(([id, width]) => {
|
||||
if (id !== "__row_number") propertyWidths[id] = width;
|
||||
});
|
||||
|
||||
const propertyOrder = state.columnOrder.filter((id) => id !== "__row_number");
|
||||
|
||||
const hiddenPropertyIds = Object.entries(state.columnVisibility)
|
||||
.filter(([id, visible]) => id !== "__row_number" && !visible)
|
||||
.map(([id]) => id);
|
||||
|
||||
return {
|
||||
...safeBase,
|
||||
sorts,
|
||||
propertyWidths,
|
||||
propertyOrder,
|
||||
hiddenPropertyIds,
|
||||
visiblePropertyIds: undefined,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
export type UseBaseTableResult = {
|
||||
table: Table<IBaseRow>;
|
||||
persistViewConfig: () => void;
|
||||
};
|
||||
|
||||
export type UseBaseTableOptions = {
|
||||
// When provided, `persistViewConfig` uses this as the authoritative
|
||||
// filter/sorts for the server write. The table's live sorting state is
|
||||
// ignored for that axis so a locally-drafted sort/filter (kept in
|
||||
// `activeView.config` for rendering purposes) cannot leak into the
|
||||
// auto-persist column-layout path. Optional to preserve existing
|
||||
// callers that pass the real baseline as `activeView`.
|
||||
baselineConfig?: ViewConfig;
|
||||
};
|
||||
|
||||
export function useBaseTable(
|
||||
base: IBase | undefined,
|
||||
rows: IBaseRow[],
|
||||
activeView: IBaseView | undefined,
|
||||
opts: UseBaseTableOptions = {},
|
||||
): UseBaseTableResult {
|
||||
const updateViewMutation = useUpdateViewMutation();
|
||||
const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
// While a local edit is pending (debounce scheduled OR mutation in
|
||||
// flight), the reconcile effect preserves local state so we don't
|
||||
// stomp the user's in-flight toggle. When no local edit is pending,
|
||||
// the effect adopts server state — that's what makes remote updates
|
||||
// (another client hiding a column) actually show up on this client.
|
||||
const [hasPendingEdit, setHasPendingEdit] = useState(false);
|
||||
|
||||
// `base?.properties ?? []` minted a fresh `[]` every render while the
|
||||
// base query was loading, which invalidated every downstream memo and
|
||||
// tripped the setState-in-useEffect pairs below → "Maximum update
|
||||
// depth exceeded". Memoize so the identity is stable.
|
||||
const properties = useMemo(() => base?.properties ?? [], [base?.properties]);
|
||||
const viewConfig = activeView?.config;
|
||||
|
||||
const columns = useMemo(
|
||||
() => buildColumns(properties),
|
||||
[properties],
|
||||
);
|
||||
|
||||
const initialSorting = useMemo(
|
||||
() => buildSortingState(viewConfig),
|
||||
[viewConfig],
|
||||
);
|
||||
|
||||
const initialColumnSizing = useMemo(
|
||||
() => buildColumnSizing(viewConfig),
|
||||
[viewConfig],
|
||||
);
|
||||
|
||||
const derivedColumnOrder = useMemo(
|
||||
() => buildColumnOrder(viewConfig, properties),
|
||||
[viewConfig, properties],
|
||||
);
|
||||
|
||||
const derivedColumnVisibility = useMemo(
|
||||
() => buildColumnVisibility(viewConfig, properties),
|
||||
[viewConfig, properties],
|
||||
);
|
||||
|
||||
const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(derivedColumnOrder);
|
||||
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(derivedColumnVisibility);
|
||||
|
||||
// Re-seed from server only when the user switches views. Within the same
|
||||
// view, local state is the source of truth — the debounced persist flushes
|
||||
// it. Without this guard, any ws-driven `invalidateQueries(["bases", baseId])`
|
||||
// or concurrent view mutation lands a new `derivedColumnVisibility`
|
||||
// reference and the effect would overwrite a pending hide/reorder toggle
|
||||
// before `persistViewConfig` has a chance to flush it.
|
||||
const lastSyncedViewIdRef = useRef<string | undefined>(activeView?.id);
|
||||
useEffect(() => {
|
||||
const currentViewId = activeView?.id;
|
||||
|
||||
// View switch → full re-seed from the server's stored config.
|
||||
if (currentViewId !== lastSyncedViewIdRef.current) {
|
||||
lastSyncedViewIdRef.current = currentViewId;
|
||||
setColumnOrder(derivedColumnOrder);
|
||||
setColumnVisibility(derivedColumnVisibility);
|
||||
return;
|
||||
}
|
||||
|
||||
// Same view. If a local edit is pending (user just toggled and
|
||||
// the debounce hasn't flushed yet, or the mutation is in flight),
|
||||
// preserve local state — only reconcile the id set so that newly
|
||||
// created columns show up and deleted columns drop out without
|
||||
// stomping the user's toggle. If nothing local is pending, adopt
|
||||
// the server's state — this is what lets remote updates from
|
||||
// other clients show up here.
|
||||
const validIds = new Set<string>(["__row_number"]);
|
||||
for (const p of properties) validIds.add(p.id);
|
||||
|
||||
if (hasPendingEdit) {
|
||||
setColumnOrder((prev) => {
|
||||
const prevSet = new Set(prev);
|
||||
const kept = prev.filter((id) => validIds.has(id));
|
||||
const appended = derivedColumnOrder.filter(
|
||||
(id) => !prevSet.has(id) && validIds.has(id),
|
||||
);
|
||||
if (appended.length === 0 && kept.length === prev.length) return prev;
|
||||
return [...kept, ...appended];
|
||||
});
|
||||
|
||||
setColumnVisibility((prev) => {
|
||||
let changed = false;
|
||||
const next: VisibilityState = {};
|
||||
for (const [id, visible] of Object.entries(prev)) {
|
||||
if (validIds.has(id)) {
|
||||
next[id] = visible;
|
||||
} else {
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
for (const id of derivedColumnOrder) {
|
||||
if (!(id in next)) {
|
||||
next[id] = derivedColumnVisibility[id] ?? true;
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
return changed ? next : prev;
|
||||
});
|
||||
} else {
|
||||
setColumnOrder(derivedColumnOrder);
|
||||
setColumnVisibility(derivedColumnVisibility);
|
||||
}
|
||||
}, [
|
||||
activeView?.id,
|
||||
derivedColumnOrder,
|
||||
derivedColumnVisibility,
|
||||
properties,
|
||||
hasPendingEdit,
|
||||
]);
|
||||
|
||||
const columnPinning = useMemo(
|
||||
() => buildColumnPinning(properties),
|
||||
[properties],
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
data: rows,
|
||||
columns,
|
||||
state: {
|
||||
columnPinning,
|
||||
columnOrder,
|
||||
columnVisibility,
|
||||
},
|
||||
onColumnOrderChange: setColumnOrder,
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
initialState: {
|
||||
sorting: initialSorting,
|
||||
columnSizing: initialColumnSizing,
|
||||
},
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
columnResizeMode: "onChange",
|
||||
enableColumnResizing: true,
|
||||
enableSorting: true,
|
||||
enableHiding: true,
|
||||
getRowId: (row) => row.id,
|
||||
});
|
||||
|
||||
const persistViewConfig = useCallback(() => {
|
||||
if (!activeView || !base) return;
|
||||
|
||||
if (persistTimerRef.current) {
|
||||
clearTimeout(persistTimerRef.current);
|
||||
}
|
||||
|
||||
setHasPendingEdit(true);
|
||||
|
||||
persistTimerRef.current = setTimeout(() => {
|
||||
persistTimerRef.current = null;
|
||||
// `baseline` is the server-side-of-truth config. When the caller has
|
||||
// wrapped `activeView` with draft filter/sort values for render, they
|
||||
// pass the pre-wrap config here so we never round-trip drafts through
|
||||
// the column-layout auto-save path.
|
||||
const baseline = opts.baselineConfig ?? activeView.config;
|
||||
const config = buildViewConfigFromTable(table, baseline, {
|
||||
sorts: baseline?.sorts,
|
||||
filter: baseline?.filter,
|
||||
});
|
||||
updateViewMutation.mutate(
|
||||
{ viewId: activeView.id, pageId: base.id, config },
|
||||
{
|
||||
onSettled: () => {
|
||||
// Don't clear if the user has already scheduled another
|
||||
// debounce while this one was in flight.
|
||||
if (persistTimerRef.current === null) {
|
||||
setHasPendingEdit(false);
|
||||
}
|
||||
},
|
||||
},
|
||||
);
|
||||
}, 300);
|
||||
}, [activeView, base, table, updateViewMutation, opts.baselineConfig]);
|
||||
|
||||
return { table, persistViewConfig };
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { useEffect, useRef, useCallback } from "react";
|
||||
import { Table } from "@tanstack/react-table";
|
||||
import { IBaseRow } from "@/features/base/types/base.types";
|
||||
|
||||
export function useColumnResize(
|
||||
table: Table<IBaseRow>,
|
||||
onResizeEnd: () => void,
|
||||
) {
|
||||
const wasResizingRef = useRef(false);
|
||||
|
||||
const checkResizeEnd = useCallback(() => {
|
||||
const isResizing = table.getState().columnSizingInfo.isResizingColumn;
|
||||
if (wasResizingRef.current && !isResizing) {
|
||||
onResizeEnd();
|
||||
}
|
||||
wasResizingRef.current = !!isResizing;
|
||||
}, [table, onResizeEnd]);
|
||||
|
||||
useEffect(() => {
|
||||
checkResizeEnd();
|
||||
});
|
||||
|
||||
return {
|
||||
isResizing: !!table.getState().columnSizingInfo.isResizingColumn,
|
||||
};
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useRowSelection } from "@/features/base/hooks/use-row-selection";
|
||||
import { useDeleteRowsMutation } from "@/features/base/queries/base-row-query";
|
||||
|
||||
const BATCH_SIZE = 500;
|
||||
|
||||
export function useDeleteSelectedRows(pageId: string) {
|
||||
const { t } = useTranslation();
|
||||
const { selectedIds, clear } = useRowSelection(pageId);
|
||||
const mutation = useDeleteRowsMutation();
|
||||
|
||||
const runDelete = useCallback(
|
||||
async (ids: string[]) => {
|
||||
const chunks: string[][] = [];
|
||||
for (let i = 0; i < ids.length; i += BATCH_SIZE) {
|
||||
chunks.push(ids.slice(i, i + BATCH_SIZE));
|
||||
}
|
||||
try {
|
||||
for (const chunk of chunks) {
|
||||
await mutation.mutateAsync({ pageId, rowIds: chunk });
|
||||
}
|
||||
notifications.show({
|
||||
message: t("{{count}} rows deleted", { count: ids.length }),
|
||||
});
|
||||
clear();
|
||||
} catch {
|
||||
// mutation onError already shows notification
|
||||
}
|
||||
},
|
||||
[pageId, mutation, clear, t],
|
||||
);
|
||||
|
||||
const deleteSelected = useCallback(() => {
|
||||
const ids = Array.from(selectedIds);
|
||||
if (ids.length === 0) return;
|
||||
modals.openConfirmModal({
|
||||
title: t("Delete {{count}} rows?", { count: ids.length }),
|
||||
centered: true,
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t("This action cannot be undone.")}
|
||||
</Text>
|
||||
),
|
||||
labels: { confirm: t("Delete"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => void runDelete(ids),
|
||||
});
|
||||
}, [selectedIds, runDelete, t]);
|
||||
|
||||
return { deleteSelected, isPending: mutation.isPending };
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
parseRaw,
|
||||
resolve,
|
||||
typecheck,
|
||||
BaseFormulaGraph,
|
||||
type FormulaResultType,
|
||||
type FormulaFn,
|
||||
} from "@docmost/base-formula/client";
|
||||
import type { IBaseProperty } from "@/features/base/types/base.types";
|
||||
|
||||
type ParseState =
|
||||
| { state: "idle" }
|
||||
| {
|
||||
state: "ok";
|
||||
resultType: FormulaResultType;
|
||||
ast: unknown;
|
||||
dependencies: string[];
|
||||
}
|
||||
| {
|
||||
state: "error";
|
||||
code: string;
|
||||
message: string;
|
||||
span?: { start: number; end: number };
|
||||
};
|
||||
|
||||
export function useFormulaParser(
|
||||
source: string,
|
||||
properties: IBaseProperty[],
|
||||
editingPropertyId: string | null,
|
||||
registryForTypecheck: ReadonlyMap<string, FormulaFn>,
|
||||
): ParseState {
|
||||
const [state, setState] = useState<ParseState>({ state: "idle" });
|
||||
|
||||
const deps = useMemo(
|
||||
() => ({ source, properties, editingPropertyId, registryForTypecheck }),
|
||||
[source, properties, editingPropertyId, registryForTypecheck],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handle = setTimeout(() => {
|
||||
if (!source.trim()) {
|
||||
setState({ state: "idle" });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const nameToId = new Map(properties.map((p) => [p.name, p.id]));
|
||||
const raw = parseRaw(source);
|
||||
const resolved = resolve(raw, nameToId);
|
||||
const typeMap = new Map<string, FormulaResultType>(
|
||||
properties.map((p) => [p.id, clientResultTypeOf(p.type)]),
|
||||
);
|
||||
const tc = typecheck(resolved.ast, typeMap, registryForTypecheck);
|
||||
const candidate = {
|
||||
id: editingPropertyId ?? "pending",
|
||||
type: "formula" as const,
|
||||
typeOptions: { dependencies: resolved.dependencies },
|
||||
};
|
||||
const others = editingPropertyId
|
||||
? properties.filter((p) => p.id !== editingPropertyId)
|
||||
: properties;
|
||||
const graph = new BaseFormulaGraph([...others, candidate as any]);
|
||||
const cycle = graph.detectCycle(candidate as any);
|
||||
if (cycle) {
|
||||
setState({
|
||||
state: "error",
|
||||
code: "CYCLE",
|
||||
message: `Cycle: ${cycle.join(" \u2192 ")}`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setState({
|
||||
state: "ok",
|
||||
resultType: tc.resultType,
|
||||
ast: resolved.ast,
|
||||
dependencies: resolved.dependencies,
|
||||
});
|
||||
} catch (e: any) {
|
||||
const first = e?.errors?.[0];
|
||||
setState({
|
||||
state: "error",
|
||||
code: first?.code ?? "PARSE_ERROR",
|
||||
message: first?.message ?? e?.message ?? String(e),
|
||||
span: first?.span,
|
||||
});
|
||||
}
|
||||
}, 150);
|
||||
return () => clearTimeout(handle);
|
||||
}, [deps]);
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
function clientResultTypeOf(type: string): FormulaResultType {
|
||||
if (type === "number") return "number";
|
||||
if (type === "text" || type === "url" || type === "email") return "string";
|
||||
if (type === "checkbox") return "boolean";
|
||||
if (type === "date" || type === "createdAt" || type === "lastEditedAt")
|
||||
return "date";
|
||||
return "null";
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { Table } from "@tanstack/react-table";
|
||||
import { IBaseRow, EditingCell } from "@/features/base/types/base.types";
|
||||
|
||||
type UseGridKeyboardNavOptions = {
|
||||
table: Table<IBaseRow>;
|
||||
editingCell: EditingCell;
|
||||
setEditingCell: (cell: EditingCell) => void;
|
||||
containerRef: React.RefObject<HTMLDivElement | null>;
|
||||
};
|
||||
|
||||
export function useGridKeyboardNav({
|
||||
table,
|
||||
editingCell,
|
||||
setEditingCell,
|
||||
containerRef,
|
||||
}: UseGridKeyboardNavOptions) {
|
||||
const getNavigableColumns = useCallback(() => {
|
||||
return table
|
||||
.getVisibleLeafColumns()
|
||||
.filter((col) => col.id !== "__row_number")
|
||||
.map((col) => col.id);
|
||||
}, [table]);
|
||||
|
||||
const getRowIds = useCallback(() => {
|
||||
return table.getRowModel().rows.map((row) => row.id);
|
||||
}, [table]);
|
||||
|
||||
const navigate = useCallback(
|
||||
(rowDelta: number, colDelta: number) => {
|
||||
if (!editingCell) return;
|
||||
|
||||
const columns = getNavigableColumns();
|
||||
const rowIds = getRowIds();
|
||||
|
||||
const currentColIndex = columns.indexOf(editingCell.propertyId);
|
||||
const currentRowIndex = rowIds.indexOf(editingCell.rowId);
|
||||
|
||||
if (currentColIndex === -1 || currentRowIndex === -1) return;
|
||||
|
||||
let nextColIndex = currentColIndex + colDelta;
|
||||
let nextRowIndex = currentRowIndex + rowDelta;
|
||||
|
||||
if (nextColIndex < 0) {
|
||||
nextColIndex = columns.length - 1;
|
||||
nextRowIndex -= 1;
|
||||
} else if (nextColIndex >= columns.length) {
|
||||
nextColIndex = 0;
|
||||
nextRowIndex += 1;
|
||||
}
|
||||
|
||||
if (nextRowIndex < 0 || nextRowIndex >= rowIds.length) return;
|
||||
|
||||
setEditingCell({
|
||||
rowId: rowIds[nextRowIndex],
|
||||
propertyId: columns[nextColIndex],
|
||||
});
|
||||
},
|
||||
[editingCell, getNavigableColumns, getRowIds, setEditingCell],
|
||||
);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (!editingCell) return;
|
||||
|
||||
const target = e.target as HTMLElement;
|
||||
const isInputActive =
|
||||
target.tagName === "INPUT" ||
|
||||
target.tagName === "TEXTAREA" ||
|
||||
target.isContentEditable;
|
||||
|
||||
switch (e.key) {
|
||||
case "ArrowUp":
|
||||
if (!isInputActive) {
|
||||
e.preventDefault();
|
||||
navigate(-1, 0);
|
||||
}
|
||||
break;
|
||||
case "ArrowDown":
|
||||
if (!isInputActive) {
|
||||
e.preventDefault();
|
||||
navigate(1, 0);
|
||||
}
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
if (!isInputActive) {
|
||||
e.preventDefault();
|
||||
navigate(0, -1);
|
||||
}
|
||||
break;
|
||||
case "ArrowRight":
|
||||
if (!isInputActive) {
|
||||
e.preventDefault();
|
||||
navigate(0, 1);
|
||||
}
|
||||
break;
|
||||
case "Tab":
|
||||
e.preventDefault();
|
||||
navigate(0, e.shiftKey ? -1 : 1);
|
||||
break;
|
||||
case "Escape":
|
||||
e.preventDefault();
|
||||
setEditingCell(null);
|
||||
break;
|
||||
}
|
||||
},
|
||||
[editingCell, navigate, setEditingCell],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
container.addEventListener("keydown", handleKeyDown);
|
||||
return () => container.removeEventListener("keydown", handleKeyDown);
|
||||
}, [containerRef, handleKeyDown]);
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import { type RefObject, useEffect } from "react";
|
||||
|
||||
/**
|
||||
* Keep a header element's horizontal scroll position in lockstep with a
|
||||
* body element's. The body has the visible scrollbar (`overflow-x: auto`);
|
||||
* the header is `overflow-x: hidden` and scrolled programmatically.
|
||||
*
|
||||
* Also forwards vertical wheel events on the header into horizontal
|
||||
* scroll on the body, so users can pan the header with their wheel —
|
||||
* the body's scroll then mirrors back here through the same path.
|
||||
*
|
||||
* Generic over the concrete element type so callers can pass
|
||||
* `useRef<HTMLDivElement>(null)` without an as-cast.
|
||||
*/
|
||||
export function useHorizontalScrollSync<
|
||||
TBody extends HTMLElement,
|
||||
THeader extends HTMLElement,
|
||||
>(
|
||||
bodyRef: RefObject<TBody | null>,
|
||||
headerRef: RefObject<THeader | null>,
|
||||
): void {
|
||||
useEffect(() => {
|
||||
const body = bodyRef.current;
|
||||
const header = headerRef.current;
|
||||
if (!body || !header) return;
|
||||
|
||||
let rafId = 0;
|
||||
|
||||
const sync = () => {
|
||||
rafId = 0;
|
||||
header.scrollLeft = body.scrollLeft;
|
||||
};
|
||||
|
||||
const onBodyScroll = () => {
|
||||
if (rafId !== 0) return;
|
||||
rafId = requestAnimationFrame(sync);
|
||||
};
|
||||
|
||||
const onHeaderWheel = (e: WheelEvent) => {
|
||||
// Horizontal-dominant gestures (trackpad pan) already deliver
|
||||
// deltaX; let those flow naturally to the body via mirrored
|
||||
// scrollLeft. Convert vertical wheel ticks into horizontal pan.
|
||||
if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
|
||||
if (e.deltaY === 0) return;
|
||||
// Suppress the browser's default vertical scroll on the page
|
||||
// (or the standalone scrollport) — we're consuming this wheel
|
||||
// event as a horizontal pan, not a vertical scroll. Requires a
|
||||
// non-passive listener (configured below).
|
||||
e.preventDefault();
|
||||
body.scrollLeft += e.deltaY;
|
||||
};
|
||||
|
||||
body.addEventListener("scroll", onBodyScroll, { passive: true });
|
||||
header.addEventListener("wheel", onHeaderWheel, { passive: false });
|
||||
|
||||
// Initial sync — covers the case where body is already scrolled
|
||||
// when the hook mounts (e.g. after a route change).
|
||||
header.scrollLeft = body.scrollLeft;
|
||||
|
||||
return () => {
|
||||
body.removeEventListener("scroll", onBodyScroll);
|
||||
header.removeEventListener("wheel", onHeaderWheel);
|
||||
if (rafId !== 0) cancelAnimationFrame(rafId);
|
||||
};
|
||||
}, [bodyRef, headerRef]);
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { useEffect, RefObject } from "react";
|
||||
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
|
||||
import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
|
||||
import { unsafeOverflowAutoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element";
|
||||
|
||||
type CanScrollArgs = {
|
||||
source: { data: Record<string, unknown> };
|
||||
};
|
||||
|
||||
const OVERFLOW_PX = 6000;
|
||||
|
||||
type Axis = "horizontal" | "vertical";
|
||||
|
||||
export function useKanbanAutoScroll(
|
||||
ref: RefObject<HTMLElement | null>,
|
||||
axis: Axis,
|
||||
canScroll: (args: CanScrollArgs) => boolean = () => true,
|
||||
) {
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const overflow =
|
||||
axis === "vertical"
|
||||
? {
|
||||
forTopEdge: { top: OVERFLOW_PX, right: 0, left: 0 },
|
||||
forBottomEdge: { bottom: OVERFLOW_PX, right: 0, left: 0 },
|
||||
forLeftEdge: { left: 0, top: 0, bottom: 0 },
|
||||
forRightEdge: { right: 0, top: 0, bottom: 0 },
|
||||
}
|
||||
: {
|
||||
forTopEdge: { top: 0, right: 0, left: 0 },
|
||||
forBottomEdge: { bottom: 0, right: 0, left: 0 },
|
||||
forLeftEdge: { left: OVERFLOW_PX, top: 0, bottom: 0 },
|
||||
forRightEdge: { right: OVERFLOW_PX, top: 0, bottom: 0 },
|
||||
};
|
||||
return combine(
|
||||
autoScrollForElements({
|
||||
element: el,
|
||||
canScroll,
|
||||
getConfiguration: () => ({ maxScrollSpeed: "fast" }),
|
||||
}),
|
||||
unsafeOverflowAutoScrollForElements({
|
||||
element: el,
|
||||
canScroll,
|
||||
getConfiguration: () => ({ maxScrollSpeed: "fast" }),
|
||||
getOverflow: () => overflow,
|
||||
}),
|
||||
);
|
||||
}, [ref, axis, canScroll]);
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
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";
|
||||
|
||||
export type CardDragData = {
|
||||
type: "base-kanban-card";
|
||||
cardId: string;
|
||||
columnKey: string;
|
||||
};
|
||||
|
||||
export type CardDropPayload = {
|
||||
draggedCardId: string;
|
||||
targetCardId: string;
|
||||
edge: Edge;
|
||||
sourceColumnKey: string;
|
||||
targetColumnKey: string;
|
||||
};
|
||||
|
||||
export function useKanbanCardDrag({
|
||||
cardId,
|
||||
columnKey,
|
||||
onDrop,
|
||||
sortsActive,
|
||||
disabled,
|
||||
}: {
|
||||
cardId: string;
|
||||
columnKey: string;
|
||||
onDrop: (payload: CardDropPayload) => void;
|
||||
sortsActive: boolean;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
|
||||
// Keep onDrop fresh without re-registering the effect each render.
|
||||
const onDropRef = useRef(onDrop);
|
||||
onDropRef.current = onDrop;
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el || disabled) return;
|
||||
const data: CardDragData = {
|
||||
type: "base-kanban-card",
|
||||
cardId,
|
||||
columnKey,
|
||||
};
|
||||
return combine(
|
||||
draggable({
|
||||
element: el,
|
||||
getInitialData: () => data,
|
||||
onDragStart: () => setIsDragging(true),
|
||||
onDrop: () => setIsDragging(false),
|
||||
}),
|
||||
dropTargetForElements({
|
||||
element: el,
|
||||
canDrop: ({ source }) => {
|
||||
if (source.data.type !== "base-kanban-card") return false;
|
||||
if (source.data.cardId === cardId) return false;
|
||||
// Block intra-column drops when a sort is active (the slot would
|
||||
// visibly snap back to the sort's chosen position, confusing the
|
||||
// user). Cross-column drops still work and change the cell value.
|
||||
if (sortsActive && source.data.columnKey === columnKey) return false;
|
||||
return true;
|
||||
},
|
||||
getData: ({ input, element }) =>
|
||||
attachClosestEdge(
|
||||
{ type: "base-kanban-card-target", cardId, columnKey },
|
||||
{ input, element, allowedEdges: ["top", "bottom"] },
|
||||
),
|
||||
onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
|
||||
onDragLeave: () => setClosestEdge(null),
|
||||
onDrop: ({ source, self }) => {
|
||||
setClosestEdge(null);
|
||||
if (source.data.type !== "base-kanban-card") return;
|
||||
const edge = extractClosestEdge(self.data);
|
||||
if (!edge) return;
|
||||
onDropRef.current({
|
||||
draggedCardId: source.data.cardId as string,
|
||||
targetCardId: cardId,
|
||||
edge,
|
||||
sourceColumnKey: source.data.columnKey as string,
|
||||
targetColumnKey: columnKey,
|
||||
});
|
||||
},
|
||||
}),
|
||||
);
|
||||
}, [cardId, columnKey, disabled, sortsActive]);
|
||||
|
||||
return { ref, isDragging, closestEdge };
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
|
||||
import type { CardDropPayload } from "./use-kanban-card-drag";
|
||||
|
||||
export const COLUMN_BODY_TARGET_ID = "__column-body__";
|
||||
|
||||
export function useKanbanColumnDrop({
|
||||
columnKey,
|
||||
onDrop,
|
||||
}: {
|
||||
columnKey: string;
|
||||
onDrop: (payload: CardDropPayload) => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [isOver, setIsOver] = useState(false);
|
||||
// Keep onDrop fresh without re-registering the effect each render.
|
||||
const onDropRef = useRef(onDrop);
|
||||
onDropRef.current = onDrop;
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
return dropTargetForElements({
|
||||
element: el,
|
||||
canDrop: ({ source }) => source.data.type === "base-kanban-card",
|
||||
// Keeps the column highlighted while the cursor passes over inner
|
||||
// card drop targets, so the drop affordance doesn't flicker.
|
||||
getIsSticky: () => true,
|
||||
onDragEnter: () => setIsOver(true),
|
||||
onDragLeave: () => setIsOver(false),
|
||||
onDrop: ({ source, location }) => {
|
||||
setIsOver(false);
|
||||
if (source.data.type !== "base-kanban-card") return;
|
||||
// Pragmatic-dnd fires onDrop on EVERY matching target in the ancestor
|
||||
// chain, not just the innermost. If a card-level target also matched
|
||||
// (the user dropped on a specific card, not on empty space below
|
||||
// the last card), the card target already dispatched the precise
|
||||
// slot — bail so we don't double-fire and clobber its position.
|
||||
const hitCardTarget = location.current.dropTargets.some(
|
||||
(t) => (t.data as { type?: unknown }).type === "base-kanban-card-target",
|
||||
);
|
||||
if (hitCardTarget) return;
|
||||
onDropRef.current({
|
||||
draggedCardId: source.data.cardId as string,
|
||||
targetCardId: COLUMN_BODY_TARGET_ID,
|
||||
edge: "bottom",
|
||||
sourceColumnKey: source.data.columnKey as string,
|
||||
targetColumnKey: columnKey,
|
||||
});
|
||||
},
|
||||
});
|
||||
}, [columnKey]);
|
||||
|
||||
return { ref, isOver };
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
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";
|
||||
|
||||
export type ColumnReorderPayload = {
|
||||
draggedColumnKey: string;
|
||||
targetColumnKey: string;
|
||||
edge: Edge;
|
||||
};
|
||||
|
||||
export function useKanbanColumnReorder({
|
||||
columnKey,
|
||||
onDrop,
|
||||
}: {
|
||||
columnKey: string;
|
||||
onDrop: (payload: ColumnReorderPayload) => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
|
||||
// Keep onDrop fresh without re-registering the effect each render.
|
||||
const onDropRef = useRef(onDrop);
|
||||
onDropRef.current = onDrop;
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
return combine(
|
||||
draggable({
|
||||
element: el,
|
||||
canDrag: ({ input }) => {
|
||||
// Don't start a drag when the user is interacting with a marked
|
||||
// "no-drag" subtree (e.g. the column header's menu trigger).
|
||||
const target = document.elementFromPoint(
|
||||
input.clientX,
|
||||
input.clientY,
|
||||
) as HTMLElement | null;
|
||||
if (target?.closest("[data-no-drag]")) return false;
|
||||
return true;
|
||||
},
|
||||
getInitialData: () => ({ type: "base-kanban-column", columnKey }),
|
||||
onDragStart: () => setIsDragging(true),
|
||||
onDrop: () => setIsDragging(false),
|
||||
}),
|
||||
dropTargetForElements({
|
||||
element: el,
|
||||
canDrop: ({ source }) =>
|
||||
source.data.type === "base-kanban-column" &&
|
||||
source.data.columnKey !== columnKey,
|
||||
getData: ({ input, element }) =>
|
||||
attachClosestEdge(
|
||||
{ type: "base-kanban-column-target", columnKey },
|
||||
{ input, element, allowedEdges: ["left", "right"] },
|
||||
),
|
||||
onDrag: ({ self }) => setClosestEdge(extractClosestEdge(self.data)),
|
||||
onDragLeave: () => setClosestEdge(null),
|
||||
onDrop: ({ source, self }) => {
|
||||
setClosestEdge(null);
|
||||
const edge = extractClosestEdge(self.data);
|
||||
if (!edge || source.data.type !== "base-kanban-column") return;
|
||||
onDropRef.current({
|
||||
draggedColumnKey: source.data.columnKey as string,
|
||||
targetColumnKey: columnKey,
|
||||
edge,
|
||||
});
|
||||
},
|
||||
}),
|
||||
);
|
||||
}, [columnKey]);
|
||||
|
||||
return { ref, isDragging, closestEdge };
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
IBaseProperty,
|
||||
IBaseRow,
|
||||
NO_VALUE_CHOICE_ID,
|
||||
SelectTypeOptions,
|
||||
} from "@/features/base/types/base.types";
|
||||
|
||||
export type KanbanColumnData = {
|
||||
key: string; // choice id or NO_VALUE_CHOICE_ID
|
||||
choiceId: string | null; // null for NO_VALUE column
|
||||
name: string;
|
||||
color: string | null;
|
||||
rows: IBaseRow[];
|
||||
};
|
||||
|
||||
export type PartitionResult = {
|
||||
columns: KanbanColumnData[];
|
||||
groupByPropertyId: string | null;
|
||||
};
|
||||
|
||||
function readChoiceOptions(property: IBaseProperty | undefined): {
|
||||
ids: string[];
|
||||
byId: Map<string, { id: string; name: string; color: string }>;
|
||||
} {
|
||||
if (!property) return { ids: [], byId: new Map() };
|
||||
const opts = (property.typeOptions ?? {}) as Partial<SelectTypeOptions>;
|
||||
const choices = opts.choices ?? [];
|
||||
const order = (opts.choiceOrder ?? []).filter((id) =>
|
||||
choices.some((c) => c.id === id),
|
||||
);
|
||||
// Any choice not in order: append in choices-array order.
|
||||
const ordered = [
|
||||
...order,
|
||||
...choices.filter((c) => !order.includes(c.id)).map((c) => c.id),
|
||||
];
|
||||
const byId = new Map<string, { id: string; name: string; color: string }>(
|
||||
choices.map((c) => [c.id, c]),
|
||||
);
|
||||
return { ids: ordered, byId };
|
||||
}
|
||||
|
||||
export function partitionRowsByGroup(
|
||||
rows: IBaseRow[],
|
||||
property: IBaseProperty | undefined,
|
||||
hiddenChoiceIds: string[] | undefined,
|
||||
choiceOrderOverride: string[] | undefined,
|
||||
): PartitionResult {
|
||||
if (!property) return { columns: [], groupByPropertyId: null };
|
||||
const { ids: propertyChoiceIds, byId } = readChoiceOptions(property);
|
||||
|
||||
// Resolve column key order.
|
||||
let order: string[];
|
||||
if (choiceOrderOverride && choiceOrderOverride.length > 0) {
|
||||
const valid = new Set<string>([...propertyChoiceIds, NO_VALUE_CHOICE_ID]);
|
||||
const fromOverride = choiceOrderOverride.filter((id) => valid.has(id));
|
||||
const overrideSet = new Set(fromOverride);
|
||||
// Always include NO_VALUE somewhere (sentinel for rows with no
|
||||
// grouping value). If the user listed it in the override, respect
|
||||
// that position; otherwise append it after the override entries.
|
||||
const noValueTail = overrideSet.has(NO_VALUE_CHOICE_ID)
|
||||
? []
|
||||
: [NO_VALUE_CHOICE_ID];
|
||||
// Append any property choices the user hasn't placed yet (new
|
||||
// choices added to the property after this view was saved).
|
||||
const missingChoices = propertyChoiceIds.filter(
|
||||
(id) => !overrideSet.has(id),
|
||||
);
|
||||
order = [...fromOverride, ...noValueTail, ...missingChoices];
|
||||
} else {
|
||||
order = [NO_VALUE_CHOICE_ID, ...propertyChoiceIds];
|
||||
}
|
||||
const hidden = new Set(hiddenChoiceIds ?? []);
|
||||
order = order.filter((id) => !hidden.has(id));
|
||||
|
||||
// Build empty buckets first so empty columns still render.
|
||||
const buckets = new Map<string, IBaseRow[]>();
|
||||
for (const key of order) buckets.set(key, []);
|
||||
|
||||
for (const row of rows) {
|
||||
const value = (row.cells ?? {})[property.id];
|
||||
const key =
|
||||
typeof value === "string" && buckets.has(value)
|
||||
? value
|
||||
: NO_VALUE_CHOICE_ID;
|
||||
if (!buckets.has(key)) continue; // hidden
|
||||
buckets.get(key)!.push(row);
|
||||
}
|
||||
|
||||
const columns: KanbanColumnData[] = order.map((key) => {
|
||||
if (key === NO_VALUE_CHOICE_ID) {
|
||||
return {
|
||||
key,
|
||||
choiceId: null,
|
||||
name: "No value",
|
||||
color: null,
|
||||
rows: buckets.get(key) ?? [],
|
||||
};
|
||||
}
|
||||
const c = byId.get(key);
|
||||
return {
|
||||
key,
|
||||
choiceId: key,
|
||||
name: c?.name ?? "",
|
||||
color: c?.color ?? null,
|
||||
rows: buckets.get(key) ?? [],
|
||||
};
|
||||
});
|
||||
|
||||
return { columns, groupByPropertyId: property.id };
|
||||
}
|
||||
|
||||
export function useKanbanGroups(
|
||||
rows: IBaseRow[],
|
||||
property: IBaseProperty | undefined,
|
||||
hiddenChoiceIds: string[] | undefined,
|
||||
choiceOrderOverride: string[] | undefined,
|
||||
): PartitionResult {
|
||||
return useMemo(
|
||||
() =>
|
||||
partitionRowsByGroup(
|
||||
rows,
|
||||
property,
|
||||
hiddenChoiceIds,
|
||||
choiceOrderOverride,
|
||||
),
|
||||
[rows, property, hiddenChoiceIds, choiceOrderOverride],
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
type UseListKeyboardNavResult = {
|
||||
activeIndex: number;
|
||||
setActiveIndex: (idx: number) => void;
|
||||
handleNavKey: (e: React.KeyboardEvent) => boolean;
|
||||
setOptionRef: (idx: number) => (el: HTMLElement | null) => void;
|
||||
};
|
||||
|
||||
export function useListKeyboardNav(
|
||||
itemCount: number,
|
||||
resetDeps: ReadonlyArray<unknown>,
|
||||
): UseListKeyboardNavResult {
|
||||
const [activeIndex, setActiveIndex] = useState(-1);
|
||||
const optionRefs = useRef<Array<HTMLElement | null>>([]);
|
||||
|
||||
// Reset highlight when filter/open-state changes. resetDeps is intentional.
|
||||
useEffect(() => {
|
||||
setActiveIndex(-1);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, resetDeps);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeIndex < 0) return;
|
||||
const el = optionRefs.current[activeIndex];
|
||||
if (el) el.scrollIntoView({ block: "nearest" });
|
||||
}, [activeIndex]);
|
||||
|
||||
const setOptionRef = useCallback(
|
||||
(idx: number) => (el: HTMLElement | null) => {
|
||||
optionRefs.current[idx] = el;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleNavKey = useCallback(
|
||||
(e: React.KeyboardEvent): boolean => {
|
||||
if (itemCount === 0) return false;
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
setActiveIndex((idx) => (idx < itemCount - 1 ? idx + 1 : 0));
|
||||
return true;
|
||||
}
|
||||
if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setActiveIndex((idx) => (idx <= 0 ? itemCount - 1 : idx - 1));
|
||||
return true;
|
||||
}
|
||||
if (e.key === "Home") {
|
||||
e.preventDefault();
|
||||
setActiveIndex(0);
|
||||
return true;
|
||||
}
|
||||
if (e.key === "End") {
|
||||
e.preventDefault();
|
||||
setActiveIndex(itemCount - 1);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
[itemCount],
|
||||
);
|
||||
|
||||
return { activeIndex, setActiveIndex, handleNavKey, setOptionRef };
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import { useCallback } from "react";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
|
||||
const PARAM = "row";
|
||||
|
||||
export function useRowDetailModal() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const openRowId = searchParams.get(PARAM);
|
||||
|
||||
const openRow = useCallback(
|
||||
(rowId: string) => {
|
||||
const next = new URLSearchParams(searchParams);
|
||||
next.set(PARAM, rowId);
|
||||
setSearchParams(next, { replace: false });
|
||||
},
|
||||
[searchParams, setSearchParams],
|
||||
);
|
||||
|
||||
const closeRow = useCallback(() => {
|
||||
const next = new URLSearchParams(searchParams);
|
||||
next.delete(PARAM);
|
||||
setSearchParams(next, { replace: false });
|
||||
}, [searchParams, setSearchParams]);
|
||||
|
||||
return { openRowId, openRow, closeRow };
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user