mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-08 18:43:46 +00:00
Compare commits
6 Commits
v0.26.1
...
v0.26.2-be
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1c0f873c9d | ||
|
|
8b68574820 | ||
|
|
bb01bb1aef | ||
|
|
8192a492d9 | ||
|
|
31e11b2563 | ||
|
|
5a36acea7b |
4
.github/helm/affine/charts/front/values.yaml
vendored
4
.github/helm/affine/charts/front/values.yaml
vendored
@@ -30,8 +30,8 @@ podSecurityContext:
|
||||
|
||||
resources:
|
||||
requests:
|
||||
cpu: '2'
|
||||
memory: 4Gi
|
||||
cpu: '1'
|
||||
memory: 2Gi
|
||||
|
||||
probe:
|
||||
initialDelaySeconds: 20
|
||||
|
||||
72
.github/workflows/sync-i18n.yml
vendored
72
.github/workflows/sync-i18n.yml
vendored
@@ -1,72 +0,0 @@
|
||||
name: Sync I18n with Crowdin
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- canary
|
||||
paths:
|
||||
- 'packages/frontend/i18n/**'
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
synchronize-with-crowdin:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Crowdin action
|
||||
id: crowdin
|
||||
uses: crowdin/github-action@v2
|
||||
with:
|
||||
upload_sources: true
|
||||
upload_translations: false
|
||||
download_translations: true
|
||||
auto_approve_imported: true
|
||||
import_eq_suggestions: true
|
||||
export_only_approved: true
|
||||
skip_untranslated_strings: true
|
||||
localization_branch_name: l10n_crowdin_translations
|
||||
create_pull_request: true
|
||||
pull_request_title: 'chore(i18n): sync translations'
|
||||
pull_request_body: 'New Crowdin translations by [Crowdin GH Action](https://github.com/crowdin/github-action)'
|
||||
pull_request_base_branch_name: 'canary'
|
||||
config: packages/frontend/i18n/crowdin.yml
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
|
||||
CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
|
||||
i18n-codegen:
|
||||
needs: synchronize-with-crowdin
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
pull-requests: write
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: l10n_crowdin_translations
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: ./.github/actions/setup-node
|
||||
with:
|
||||
electron-install: false
|
||||
full-cache: true
|
||||
|
||||
- name: Run i18n codegen
|
||||
run: yarn affine @affine/i18n build
|
||||
|
||||
- name: Commit changes
|
||||
run: |
|
||||
git config user.name "github-actions[bot]"
|
||||
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
|
||||
git add .
|
||||
git commit -m "chore(i18n): i18n codegen"
|
||||
git push origin l10n_crowdin_translations
|
||||
13
.vscode/settings.template.json
vendored
13
.vscode/settings.template.json
vendored
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"eslint.packageManager": "yarn",
|
||||
"prisma.pinToPrisma6": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnSaveMode": "file",
|
||||
@@ -14,11 +14,13 @@
|
||||
"testid",
|
||||
"schemars"
|
||||
],
|
||||
"explorer.fileNesting.enabled": true,
|
||||
"explorer.fileNesting.patterns": {
|
||||
"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts, ${capture}.d.ts.map",
|
||||
"package.json": ".browserslist*, .circleci*, .codecov, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lighthouserc.*, .lintstagedrc*, .markdownlint*, .mocha*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, api-extractor.json, apollo.config.*, appveyor*, ava.config.*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, cypress.*, dangerfile*, dlint.json, dprint.json, firebase.json, grunt*, gulp*, histoire.config.*, jasmine.*, jenkins*, jest.config.*, jsconfig.*, karma*, lerna*, lighthouserc.*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, package.nls*.json, phpcs.xml, playwright.config.*, pm2.*, pnpm*, prettier*, pullapprove*, puppeteer.config.*, pyrightconfig.json, release-tasks.sh, renovate*, rollup.config.*, stylelint*, tsconfig.*, tsdoc.*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, vitest.config.*, webpack*, workspace.json, xo.config.*, yarn*, babel.*, .babelrc, project.json",
|
||||
"Cargo.toml": "Cargo.lock",
|
||||
"README.md": "LICENSE, CHANGELOG.md, CODE_OF_CONDUCT.md, CONTRIBUTING.md"
|
||||
"package.json": ".browserslist*, .circleci*, .codecov, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json, .editorconfig, .eslint*, eslint.*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lighthouserc.*, .lintstagedrc*, .markdownlint*, .mocha*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, api-extractor.json, apollo.config.*, appveyor*, ava.config.*, azure-pipelines*, bower.json, build.config.*, commitlint*, dangerfile*, dlint.json, dprint.json, firebase.json, grunt*, gulp*, histoire.config.*, jasmine.*, jenkins*, jest.config.*, jsconfig.*, karma*, lerna*, lighthouserc.*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, package.nls*.json, phpcs.xml, playwright.config.*, pm2.*, pnpm*, prettier*, pullapprove*, puppeteer.config.*, pyrightconfig.json, release-tasks.sh, renovate*, rollup.config.*, stylelint*, tsconfig.*, tsdoc.*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, vitest.*, webpack*, workspace.json, xo.config.*, yarn*, babel.*, .babelrc, project.json, oxlint.json, nyc.config.*",
|
||||
"Cargo.toml": "Cargo.lock, rust-toolchain*, rustfmt.toml, .taplo.toml",
|
||||
"README.md": "LICENSE*, CHANGELOG.md, CODE_OF_CONDUCT.md, CONTRIBUTING.md, SECURITY.md, README.*",
|
||||
".gitignore": ".gitattributes, .dockerignore, .eslintignore, .prettierignore, .stylelintignore, .tslintignore, .yarnignore"
|
||||
},
|
||||
"[rust]": {
|
||||
"editor.defaultFormatter": "rust-lang.rust-analyzer"
|
||||
@@ -32,5 +34,6 @@
|
||||
"vitest.include": ["packages/**/*.spec.ts", "packages/**/*.spec.tsx"],
|
||||
"rust-analyzer.check.extraEnv": {
|
||||
"DATABASE_URL": "sqlite:affine.db"
|
||||
}
|
||||
},
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
|
||||
35
README.md
35
README.md
@@ -21,23 +21,6 @@
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div align="left" valign="middle">
|
||||
<a href="https://runblaze.dev">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://www.runblaze.dev/logo_dark.png">
|
||||
<img align="right" src="https://www.runblaze.dev/logo_light.png" height="102px"/>
|
||||
</picture>
|
||||
</a>
|
||||
|
||||
<br style="display: none;"/>
|
||||
|
||||
_Special thanks to [Blaze](https://runblaze.dev) for their support of this project. They provide high-performance Apple Silicon macOS and Linux (AMD64 & ARM64) runners for GitHub Actions, greatly reducing our automated build times._
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div align="center">
|
||||
<a href="https://affine.pro">Home Page</a> |
|
||||
<a href="https://affine.pro/redirect/discord">Discord</a> |
|
||||
@@ -107,10 +90,10 @@ Thanks for checking us out, we appreciate your interest and sincerely hope that
|
||||
|
||||
## Contributing
|
||||
|
||||
| Bug Reports | Feature Requests | Questions/Discussions | AFFiNE Community |
|
||||
| --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------- |
|
||||
| [Create a bug report](https://github.com/toeverything/AFFiNE/issues/new?assignees=&labels=bug%2Cproduct-review&template=BUG-REPORT.yml&title=TITLE) | [Submit a feature request](https://github.com/toeverything/AFFiNE/issues/new?assignees=&labels=feat%2Cproduct-review&template=FEATURE-REQUEST.yml&title=TITLE) | [Check GitHub Discussion](https://github.com/toeverything/AFFiNE/discussions) | [Vist the AFFiNE Community](https://community.affine.pro) |
|
||||
| Something isn't working as expected | An idea for a new feature, or improvements | Discuss and ask questions | A place to ask, learn and engage with others |
|
||||
| Bug Reports | Feature Requests | Questions/Discussions | AFFiNE Community |
|
||||
| --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| [Create a bug report](https://github.com/toeverything/AFFiNE/issues/new?assignees=&labels=bug%2Cproduct-review&template=BUG-REPORT.yml&title=TITLE) | [Submit a feature request](https://github.com/toeverything/AFFiNE/issues/new?assignees=&labels=feat%2Cproduct-review&template=FEATURE-REQUEST.yml&title=TITLE) | [Check GitHub Discussion](https://github.com/toeverything/AFFiNE/discussions) | [Visit the AFFiNE Community](https://community.affine.pro) |
|
||||
| Something isn't working as expected | An idea for a new feature, or improvements | Discuss and ask questions | A place to ask, learn and engage with others |
|
||||
|
||||
Calling all developers, testers, tech writers and more! Contributions of all types are more than welcome, you can read more in [docs/types-of-contributions.md](docs/types-of-contributions.md). If you are interested in contributing code, read our [docs/CONTRIBUTING.md](docs/CONTRIBUTING.md) and feel free to check out our GitHub issues to get stuck in to show us what you’re made of.
|
||||
|
||||
@@ -169,8 +152,10 @@ Welcome to the AFFiNE blog section! Here, you’ll find the latest insights, tip
|
||||
We would also like to give thanks to open-source projects that make AFFiNE possible:
|
||||
|
||||
- [Blocksuite](https://github.com/toeverything/BlockSuite) - 💠 BlockSuite is the open-source collaborative editor project behind AFFiNE.
|
||||
- [y-octo](https://github.com/y-crdt/y-octo) - 🐙 y-octo is a native, high-performance, thread-safe YJS CRDT implementation, serving as the core engine enabling the AFFiNE Client/Server to achieve "local-first" functionality.
|
||||
- [OctoBase](https://github.com/toeverything/OctoBase) - 🐙 OctoBase is the open-source database behind AFFiNE, local-first, yet collaborative. A light-weight, scalable, data engine written in Rust.
|
||||
- [yjs](https://github.com/yjs/yjs) - Fundamental support of CRDTs for our implementation on state management and data sync.
|
||||
|
||||
- [yjs](https://github.com/yjs/yjs) - Fundamental support of CRDTs for our implementation on state management and data sync on web.
|
||||
- [electron](https://github.com/electron/electron) - Build cross-platform desktop apps with JavaScript, HTML, and CSS.
|
||||
- [React](https://github.com/facebook/react) - The library for web and native user interfaces.
|
||||
- [napi-rs](https://github.com/napi-rs/napi-rs) - A framework for building compiled Node.js add-ons in Rust via Node-API.
|
||||
@@ -221,12 +206,6 @@ See [BUILDING.md] for instructions on how to build AFFiNE from source code.
|
||||
We welcome contributions from everyone.
|
||||
See [docs/contributing/tutorial.md](./docs/contributing/tutorial.md) for details.
|
||||
|
||||
## Thanks
|
||||
|
||||
<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
|
||||
|
||||
Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
|
||||
|
||||
## License
|
||||
|
||||
### Editions
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
|
||||
import { describe, expect, test } from 'vitest';
|
||||
|
||||
import { insertUrlTextSegments } from '../../../../blocks/database/src/properties/paste-url.js';
|
||||
|
||||
type InsertCall = {
|
||||
range: {
|
||||
index: number;
|
||||
length: number;
|
||||
};
|
||||
text: string;
|
||||
attributes?: AffineTextAttributes;
|
||||
};
|
||||
|
||||
describe('insertUrlTextSegments', () => {
|
||||
test('should replace selected text on first insert and append remaining segments', () => {
|
||||
const insertCalls: InsertCall[] = [];
|
||||
const selectionCalls: Array<{ index: number; length: number } | null> = [];
|
||||
const inlineEditor = {
|
||||
insertText: (
|
||||
range: { index: number; length: number },
|
||||
text: string,
|
||||
attributes?: AffineTextAttributes
|
||||
) => {
|
||||
insertCalls.push({ range, text, attributes });
|
||||
},
|
||||
setInlineRange: (range: { index: number; length: number } | null) => {
|
||||
selectionCalls.push(range);
|
||||
},
|
||||
};
|
||||
|
||||
const inlineRange = { index: 4, length: 6 };
|
||||
const segments = [
|
||||
{ text: 'hi - ' },
|
||||
{ text: 'https://google.com', link: 'https://google.com' },
|
||||
];
|
||||
|
||||
insertUrlTextSegments(inlineEditor, inlineRange, segments);
|
||||
|
||||
expect(insertCalls).toEqual([
|
||||
{
|
||||
range: { index: 4, length: 6 },
|
||||
text: 'hi - ',
|
||||
},
|
||||
{
|
||||
range: { index: 9, length: 0 },
|
||||
text: 'https://google.com',
|
||||
attributes: {
|
||||
link: 'https://google.com',
|
||||
},
|
||||
},
|
||||
]);
|
||||
expect(selectionCalls).toEqual([{ index: 27, length: 0 }]);
|
||||
});
|
||||
|
||||
test('should keep insertion range length zero when there is no selected text', () => {
|
||||
const insertCalls: InsertCall[] = [];
|
||||
const selectionCalls: Array<{ index: number; length: number } | null> = [];
|
||||
const inlineEditor = {
|
||||
insertText: (
|
||||
range: { index: number; length: number },
|
||||
text: string,
|
||||
attributes?: AffineTextAttributes
|
||||
) => {
|
||||
insertCalls.push({ range, text, attributes });
|
||||
},
|
||||
setInlineRange: (range: { index: number; length: number } | null) => {
|
||||
selectionCalls.push(range);
|
||||
},
|
||||
};
|
||||
|
||||
const inlineRange = { index: 2, length: 0 };
|
||||
const segments = [
|
||||
{ text: 'prefix ' },
|
||||
{ text: 'https://a.com', link: 'https://a.com' },
|
||||
];
|
||||
|
||||
insertUrlTextSegments(inlineEditor, inlineRange, segments);
|
||||
|
||||
expect(insertCalls).toEqual([
|
||||
{
|
||||
range: { index: 2, length: 0 },
|
||||
text: 'prefix ',
|
||||
},
|
||||
{
|
||||
range: { index: 9, length: 0 },
|
||||
text: 'https://a.com',
|
||||
attributes: {
|
||||
link: 'https://a.com',
|
||||
},
|
||||
},
|
||||
]);
|
||||
expect(selectionCalls).toEqual([{ index: 22, length: 0 }]);
|
||||
});
|
||||
});
|
||||
@@ -135,14 +135,10 @@ export class DatabaseBlockDataSource extends DataSourceBase {
|
||||
|
||||
override featureFlags$: ReadonlySignal<DatabaseFlags> = computed(() => {
|
||||
const featureFlagService = this.doc.get(FeatureFlagService);
|
||||
const enableNumberFormat = featureFlagService.getFlag(
|
||||
'enable_database_number_formatting'
|
||||
);
|
||||
const enableTableVirtualScroll = featureFlagService.getFlag(
|
||||
'enable_table_virtual_scroll'
|
||||
);
|
||||
return {
|
||||
enable_number_formatting: enableNumberFormat ?? false,
|
||||
enable_table_virtual_scroll: enableTableVirtualScroll ?? false,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import type {
|
||||
AffineInlineEditor,
|
||||
AffineTextAttributes,
|
||||
} from '@blocksuite/affine-shared/types';
|
||||
import {
|
||||
splitTextByUrl,
|
||||
type UrlTextSegment,
|
||||
} from '@blocksuite/affine-shared/utils';
|
||||
import type { InlineRange } from '@blocksuite/std/inline';
|
||||
|
||||
type UrlPasteInlineEditor = Pick<
|
||||
AffineInlineEditor,
|
||||
'insertText' | 'setInlineRange'
|
||||
>;
|
||||
|
||||
export function analyzeTextForUrlPaste(text: string) {
|
||||
const segments = splitTextByUrl(text);
|
||||
const firstSegment = segments[0];
|
||||
const singleUrl =
|
||||
segments.length === 1 && firstSegment?.link && firstSegment.text === text
|
||||
? firstSegment.link
|
||||
: undefined;
|
||||
return {
|
||||
segments,
|
||||
singleUrl,
|
||||
};
|
||||
}
|
||||
|
||||
export function insertUrlTextSegments(
|
||||
inlineEditor: UrlPasteInlineEditor,
|
||||
inlineRange: InlineRange,
|
||||
segments: UrlTextSegment[]
|
||||
) {
|
||||
let index = inlineRange.index;
|
||||
let replacedSelection = false;
|
||||
segments.forEach(segment => {
|
||||
if (!segment.text) return;
|
||||
const attributes: AffineTextAttributes | undefined = segment.link
|
||||
? { link: segment.link }
|
||||
: undefined;
|
||||
inlineEditor.insertText(
|
||||
{
|
||||
index,
|
||||
length: replacedSelection ? 0 : inlineRange.length,
|
||||
},
|
||||
segment.text,
|
||||
attributes
|
||||
);
|
||||
replacedSelection = true;
|
||||
index += segment.text.length;
|
||||
});
|
||||
inlineEditor.setInlineRange({
|
||||
index,
|
||||
length: 0,
|
||||
});
|
||||
}
|
||||
@@ -8,10 +8,7 @@ import type {
|
||||
AffineInlineEditor,
|
||||
AffineTextAttributes,
|
||||
} from '@blocksuite/affine-shared/types';
|
||||
import {
|
||||
getViewportElement,
|
||||
isValidUrl,
|
||||
} from '@blocksuite/affine-shared/utils';
|
||||
import { getViewportElement } from '@blocksuite/affine-shared/utils';
|
||||
import {
|
||||
BaseCellRenderer,
|
||||
createFromBaseCellRenderer,
|
||||
@@ -26,6 +23,7 @@ import { html } from 'lit/static-html.js';
|
||||
|
||||
import { EditorHostKey } from '../../context/host-context.js';
|
||||
import type { DatabaseBlockComponent } from '../../database-block.js';
|
||||
import { analyzeTextForUrlPaste, insertUrlTextSegments } from '../paste-url.js';
|
||||
import {
|
||||
richTextCellStyle,
|
||||
richTextContainerStyle,
|
||||
@@ -271,10 +269,13 @@ export class RichTextCell extends BaseCellRenderer<Text, string> {
|
||||
?.getData('text/plain')
|
||||
?.replace(/\r?\n|\r/g, '\n');
|
||||
if (!text) return;
|
||||
const { segments, singleUrl } = analyzeTextForUrlPaste(text);
|
||||
|
||||
if (isValidUrl(text)) {
|
||||
if (singleUrl) {
|
||||
const std = this.std;
|
||||
const result = std?.getOptional(ParseDocUrlProvider)?.parseDocUrl(text);
|
||||
const result = std
|
||||
?.getOptional(ParseDocUrlProvider)
|
||||
?.parseDocUrl(singleUrl);
|
||||
if (result) {
|
||||
const text = ' ';
|
||||
inlineEditor.insertText(inlineRange, text, {
|
||||
@@ -300,22 +301,10 @@ export class RichTextCell extends BaseCellRenderer<Text, string> {
|
||||
segment: 'database',
|
||||
parentFlavour: 'affine:database',
|
||||
});
|
||||
} else {
|
||||
inlineEditor.insertText(inlineRange, text, {
|
||||
link: text,
|
||||
});
|
||||
inlineEditor.setInlineRange({
|
||||
index: inlineRange.index + text.length,
|
||||
length: 0,
|
||||
});
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
inlineEditor.insertText(inlineRange, text);
|
||||
inlineEditor.setInlineRange({
|
||||
index: inlineRange.index + text.length,
|
||||
length: 0,
|
||||
});
|
||||
}
|
||||
insertUrlTextSegments(inlineEditor, inlineRange, segments);
|
||||
};
|
||||
|
||||
override connectedCallback() {
|
||||
|
||||
@@ -4,10 +4,7 @@ import {
|
||||
ParseDocUrlProvider,
|
||||
TelemetryProvider,
|
||||
} from '@blocksuite/affine-shared/services';
|
||||
import {
|
||||
getViewportElement,
|
||||
isValidUrl,
|
||||
} from '@blocksuite/affine-shared/utils';
|
||||
import { getViewportElement } from '@blocksuite/affine-shared/utils';
|
||||
import { BaseCellRenderer } from '@blocksuite/data-view';
|
||||
import { IS_MAC } from '@blocksuite/global/env';
|
||||
import { LinkedPageIcon } from '@blocksuite/icons/lit';
|
||||
@@ -20,6 +17,7 @@ import { html } from 'lit/static-html.js';
|
||||
import { EditorHostKey } from '../../context/host-context.js';
|
||||
import type { DatabaseBlockComponent } from '../../database-block.js';
|
||||
import { getSingleDocIdFromText } from '../../utils/title-doc.js';
|
||||
import { analyzeTextForUrlPaste, insertUrlTextSegments } from '../paste-url.js';
|
||||
import {
|
||||
headerAreaIconStyle,
|
||||
titleCellStyle,
|
||||
@@ -95,7 +93,9 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
|
||||
private readonly _onPaste = (e: ClipboardEvent) => {
|
||||
const inlineEditor = this.inlineEditor;
|
||||
const inlineRange = inlineEditor?.getInlineRange();
|
||||
if (!inlineRange) return;
|
||||
if (!inlineEditor || !inlineRange) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.clipboardData) {
|
||||
try {
|
||||
const getDeltas = (snapshot: BlockSnapshot): DeltaInsert[] => {
|
||||
@@ -121,14 +121,15 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
|
||||
?.getData('text/plain')
|
||||
?.replace(/\r?\n|\r/g, '\n');
|
||||
if (!text) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (isValidUrl(text)) {
|
||||
const { segments, singleUrl } = analyzeTextForUrlPaste(text);
|
||||
if (singleUrl) {
|
||||
const std = this.std;
|
||||
const result = std?.getOptional(ParseDocUrlProvider)?.parseDocUrl(text);
|
||||
const result = std
|
||||
?.getOptional(ParseDocUrlProvider)
|
||||
?.parseDocUrl(singleUrl);
|
||||
if (result) {
|
||||
const text = ' ';
|
||||
inlineEditor?.insertText(inlineRange, text, {
|
||||
inlineEditor.insertText(inlineRange, text, {
|
||||
reference: {
|
||||
type: 'LinkedPage',
|
||||
pageId: result.docId,
|
||||
@@ -139,7 +140,7 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
|
||||
},
|
||||
},
|
||||
});
|
||||
inlineEditor?.setInlineRange({
|
||||
inlineEditor.setInlineRange({
|
||||
index: inlineRange.index + text.length,
|
||||
length: 0,
|
||||
});
|
||||
@@ -151,22 +152,10 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
|
||||
segment: 'database',
|
||||
parentFlavour: 'affine:database',
|
||||
});
|
||||
} else {
|
||||
inlineEditor?.insertText(inlineRange, text, {
|
||||
link: text,
|
||||
});
|
||||
inlineEditor?.setInlineRange({
|
||||
index: inlineRange.index + text.length,
|
||||
length: 0,
|
||||
});
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
inlineEditor?.insertText(inlineRange, text);
|
||||
inlineEditor?.setInlineRange({
|
||||
index: inlineRange.index + text.length,
|
||||
length: 0,
|
||||
});
|
||||
}
|
||||
insertUrlTextSegments(inlineEditor, inlineRange, segments);
|
||||
};
|
||||
|
||||
insertDelta = (delta: DeltaInsert) => {
|
||||
@@ -240,7 +229,8 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
|
||||
this.disposables.addFromEvent(
|
||||
this.richText.value,
|
||||
'paste',
|
||||
this._onPaste
|
||||
this._onPaste,
|
||||
true
|
||||
);
|
||||
const inlineEditor = this.inlineEditor;
|
||||
if (inlineEditor) {
|
||||
|
||||
517
blocksuite/affine/data-view/src/__tests__/kanban.unit.spec.ts
Normal file
517
blocksuite/affine/data-view/src/__tests__/kanban.unit.spec.ts
Normal file
@@ -0,0 +1,517 @@
|
||||
import { signal } from '@preact/signals-core';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import type { GroupBy } from '../core/common/types.js';
|
||||
import type { DataSource } from '../core/data-source/base.js';
|
||||
import { DetailSelection } from '../core/detail/selection.js';
|
||||
import { groupByMatchers } from '../core/group-by/define.js';
|
||||
import { t } from '../core/logical/type-presets.js';
|
||||
import type { DataViewCellLifeCycle } from '../core/property/index.js';
|
||||
import { checkboxPropertyModelConfig } from '../property-presets/checkbox/define.js';
|
||||
import { multiSelectPropertyModelConfig } from '../property-presets/multi-select/define.js';
|
||||
import { selectPropertyModelConfig } from '../property-presets/select/define.js';
|
||||
import { textPropertyModelConfig } from '../property-presets/text/define.js';
|
||||
import {
|
||||
canGroupable,
|
||||
ensureKanbanGroupColumn,
|
||||
pickKanbanGroupColumn,
|
||||
resolveKanbanGroupBy,
|
||||
} from '../view-presets/kanban/group-by-utils.js';
|
||||
import { materializeKanbanColumns } from '../view-presets/kanban/kanban-view-manager.js';
|
||||
import type { KanbanCard } from '../view-presets/kanban/pc/card.js';
|
||||
import { KanbanDragController } from '../view-presets/kanban/pc/controller/drag.js';
|
||||
import type { KanbanGroup } from '../view-presets/kanban/pc/group.js';
|
||||
|
||||
type Column = {
|
||||
id: string;
|
||||
type: string;
|
||||
data?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
type TestPropertyMeta = {
|
||||
type: string;
|
||||
config: {
|
||||
kanbanGroup?: {
|
||||
enabled: boolean;
|
||||
mutable?: boolean;
|
||||
};
|
||||
propertyData: {
|
||||
default: () => Record<string, unknown>;
|
||||
};
|
||||
jsonValue: {
|
||||
type: (options: {
|
||||
data: Record<string, unknown>;
|
||||
dataSource: DataSource;
|
||||
}) => unknown;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
type MockDataSource = {
|
||||
properties$: ReturnType<typeof signal<string[]>>;
|
||||
provider: {
|
||||
getAll: () => Map<unknown, unknown>;
|
||||
};
|
||||
serviceGetOrCreate: (key: unknown, create: () => unknown) => unknown;
|
||||
propertyTypeGet: (propertyId: string) => string | undefined;
|
||||
propertyMetaGet: (type: string) => TestPropertyMeta | undefined;
|
||||
propertyDataGet: (propertyId: string) => Record<string, unknown>;
|
||||
propertyDataTypeGet: (propertyId: string) => unknown;
|
||||
propertyAdd: (
|
||||
_position: unknown,
|
||||
ops?: {
|
||||
type?: string;
|
||||
}
|
||||
) => string;
|
||||
propertyDataSet: (propertyId: string, data: Record<string, unknown>) => void;
|
||||
};
|
||||
|
||||
const asDataSource = (dataSource: object): DataSource =>
|
||||
dataSource as DataSource;
|
||||
|
||||
const toTestMeta = <TData extends Record<string, unknown>>(
|
||||
type: string,
|
||||
config: {
|
||||
kanbanGroup?: {
|
||||
enabled: boolean;
|
||||
mutable?: boolean;
|
||||
};
|
||||
propertyData: {
|
||||
default: () => TData;
|
||||
};
|
||||
jsonValue: {
|
||||
type: (options: { data: TData; dataSource: DataSource }) => unknown;
|
||||
};
|
||||
}
|
||||
): TestPropertyMeta => ({
|
||||
type,
|
||||
config: {
|
||||
kanbanGroup: config.kanbanGroup,
|
||||
propertyData: {
|
||||
default: () => config.propertyData.default(),
|
||||
},
|
||||
jsonValue: {
|
||||
type: ({ data, dataSource }) =>
|
||||
config.jsonValue.type({
|
||||
data: data as TData,
|
||||
dataSource,
|
||||
}),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const immutableBooleanMeta = toTestMeta('immutable-boolean', {
|
||||
...checkboxPropertyModelConfig.config,
|
||||
kanbanGroup: {
|
||||
enabled: true,
|
||||
mutable: false,
|
||||
},
|
||||
});
|
||||
|
||||
const createMockDataSource = (columns: Column[]): MockDataSource => {
|
||||
const properties$ = signal(columns.map(column => column.id));
|
||||
const typeById = new Map(columns.map(column => [column.id, column.type]));
|
||||
const dataById = new Map(
|
||||
columns.map(column => [column.id, column.data ?? {}])
|
||||
);
|
||||
const services = new Map<unknown, unknown>();
|
||||
|
||||
const metaEntries: Array<[string, TestPropertyMeta]> = [
|
||||
[
|
||||
checkboxPropertyModelConfig.type,
|
||||
toTestMeta(
|
||||
checkboxPropertyModelConfig.type,
|
||||
checkboxPropertyModelConfig.config
|
||||
),
|
||||
],
|
||||
[
|
||||
selectPropertyModelConfig.type,
|
||||
toTestMeta(
|
||||
selectPropertyModelConfig.type,
|
||||
selectPropertyModelConfig.config
|
||||
),
|
||||
],
|
||||
[
|
||||
multiSelectPropertyModelConfig.type,
|
||||
toTestMeta(
|
||||
multiSelectPropertyModelConfig.type,
|
||||
multiSelectPropertyModelConfig.config
|
||||
),
|
||||
],
|
||||
[
|
||||
textPropertyModelConfig.type,
|
||||
toTestMeta(textPropertyModelConfig.type, textPropertyModelConfig.config),
|
||||
],
|
||||
[immutableBooleanMeta.type, immutableBooleanMeta],
|
||||
];
|
||||
const metaByType = new Map(metaEntries);
|
||||
|
||||
const asRecord = (value: unknown): Record<string, unknown> =>
|
||||
typeof value === 'object' && value != null
|
||||
? (value as Record<string, unknown>)
|
||||
: {};
|
||||
|
||||
let autoColumnId = 0;
|
||||
|
||||
const dataSource = {
|
||||
properties$,
|
||||
provider: {
|
||||
getAll: () => new Map<unknown, unknown>(),
|
||||
},
|
||||
serviceGetOrCreate: (key: unknown, create: () => unknown) => {
|
||||
if (!services.has(key)) {
|
||||
services.set(key, create());
|
||||
}
|
||||
return services.get(key);
|
||||
},
|
||||
propertyTypeGet: (propertyId: string) => typeById.get(propertyId),
|
||||
propertyMetaGet: (type: string) => metaByType.get(type),
|
||||
propertyDataGet: (propertyId: string) => asRecord(dataById.get(propertyId)),
|
||||
propertyDataTypeGet: (propertyId: string) => {
|
||||
const type = typeById.get(propertyId);
|
||||
if (!type) {
|
||||
return;
|
||||
}
|
||||
const meta = metaByType.get(type);
|
||||
if (!meta) {
|
||||
return;
|
||||
}
|
||||
return meta.config.jsonValue.type({
|
||||
data: asRecord(dataById.get(propertyId)),
|
||||
dataSource: asDataSource(dataSource),
|
||||
});
|
||||
},
|
||||
propertyAdd: (
|
||||
_position: unknown,
|
||||
ops?: {
|
||||
type?: string;
|
||||
}
|
||||
) => {
|
||||
const type = ops?.type ?? selectPropertyModelConfig.type;
|
||||
const id = `auto-${++autoColumnId}`;
|
||||
const meta = metaByType.get(type);
|
||||
const data = meta?.config.propertyData.default() ?? {};
|
||||
|
||||
typeById.set(id, type);
|
||||
dataById.set(id, data);
|
||||
properties$.value = [...properties$.value, id];
|
||||
return id;
|
||||
},
|
||||
propertyDataSet: (propertyId: string, data: Record<string, unknown>) => {
|
||||
dataById.set(propertyId, data);
|
||||
},
|
||||
};
|
||||
|
||||
return dataSource;
|
||||
};
|
||||
|
||||
const createDragController = () => {
|
||||
type DragLogic = ConstructorParameters<typeof KanbanDragController>[0];
|
||||
return new KanbanDragController({} as DragLogic);
|
||||
};
|
||||
|
||||
describe('kanban', () => {
|
||||
describe('group-by define', () => {
|
||||
it('boolean group should not include ungroup bucket', () => {
|
||||
const booleanGroup = groupByMatchers.find(
|
||||
group => group.name === 'boolean'
|
||||
);
|
||||
expect(booleanGroup).toBeDefined();
|
||||
|
||||
const keys = booleanGroup!
|
||||
.defaultKeys(t.boolean.instance())
|
||||
.map(group => group.key);
|
||||
|
||||
expect(keys).toEqual(['true', 'false']);
|
||||
});
|
||||
|
||||
it('boolean group should fallback invalid values to false bucket', () => {
|
||||
const booleanGroup = groupByMatchers.find(
|
||||
group => group.name === 'boolean'
|
||||
);
|
||||
expect(booleanGroup).toBeDefined();
|
||||
|
||||
const groups = booleanGroup!.valuesGroup(undefined, t.boolean.instance());
|
||||
expect(groups).toEqual([{ key: 'false', value: false }]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('columns materialization', () => {
|
||||
it('appends missing properties while preserving existing order and state', () => {
|
||||
const columns = [{ id: 'status', hide: true }, { id: 'title' }];
|
||||
|
||||
const next = materializeKanbanColumns(columns, [
|
||||
'title',
|
||||
'status',
|
||||
'date',
|
||||
]);
|
||||
|
||||
expect(next).toEqual([
|
||||
{ id: 'status', hide: true },
|
||||
{ id: 'title' },
|
||||
{ id: 'date' },
|
||||
]);
|
||||
});
|
||||
|
||||
it('drops stale columns that no longer exist in data source', () => {
|
||||
const columns = [{ id: 'title' }, { id: 'removed', hide: true }];
|
||||
|
||||
const next = materializeKanbanColumns(columns, ['title']);
|
||||
|
||||
expect(next).toEqual([{ id: 'title' }]);
|
||||
});
|
||||
|
||||
it('returns original reference when columns are already materialized', () => {
|
||||
const columns = [{ id: 'title' }, { id: 'status', hide: true }];
|
||||
|
||||
const next = materializeKanbanColumns(columns, ['title', 'status']);
|
||||
|
||||
expect(next).toBe(columns);
|
||||
});
|
||||
});
|
||||
|
||||
describe('drag indicator', () => {
|
||||
it('shows drop preview when insert position exists', () => {
|
||||
const controller = createDragController();
|
||||
const position = {
|
||||
group: {} as KanbanGroup,
|
||||
position: 'end' as const,
|
||||
};
|
||||
controller.getInsertPosition = vi.fn().mockReturnValue(position);
|
||||
|
||||
const displaySpy = vi.spyOn(controller.dropPreview, 'display');
|
||||
const removeSpy = vi.spyOn(controller.dropPreview, 'remove');
|
||||
|
||||
const result = controller.showIndicator({} as MouseEvent, undefined);
|
||||
|
||||
expect(result).toBe(position);
|
||||
expect(displaySpy).toHaveBeenCalledWith(
|
||||
position.group,
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
expect(removeSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('removes drop preview when insert position does not exist', () => {
|
||||
const controller = createDragController();
|
||||
controller.getInsertPosition = vi.fn().mockReturnValue(undefined);
|
||||
|
||||
const displaySpy = vi.spyOn(controller.dropPreview, 'display');
|
||||
const removeSpy = vi.spyOn(controller.dropPreview, 'remove');
|
||||
|
||||
const result = controller.showIndicator({} as MouseEvent, undefined);
|
||||
|
||||
expect(result).toBeUndefined();
|
||||
expect(displaySpy).not.toHaveBeenCalled();
|
||||
expect(removeSpy).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('forwards hovered card to drop preview for precise insertion cursor', () => {
|
||||
const controller = createDragController();
|
||||
const hoveredCard = document.createElement(
|
||||
'affine-data-view-kanban-card'
|
||||
) as KanbanCard;
|
||||
const positionCard = document.createElement(
|
||||
'affine-data-view-kanban-card'
|
||||
) as KanbanCard;
|
||||
const position = {
|
||||
group: {} as KanbanGroup,
|
||||
card: positionCard,
|
||||
position: { before: true, id: 'card-id' } as const,
|
||||
};
|
||||
controller.getInsertPosition = vi.fn().mockReturnValue(position);
|
||||
|
||||
const displaySpy = vi.spyOn(controller.dropPreview, 'display');
|
||||
|
||||
controller.showIndicator({} as MouseEvent, hoveredCard);
|
||||
|
||||
expect(displaySpy).toHaveBeenCalledWith(
|
||||
position.group,
|
||||
hoveredCard,
|
||||
position.card
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('group-by utils', () => {
|
||||
it('allows only kanban-enabled property types to group', () => {
|
||||
const dataSource = createMockDataSource([
|
||||
{ id: 'text', type: textPropertyModelConfig.type },
|
||||
{ id: 'select', type: selectPropertyModelConfig.type },
|
||||
{ id: 'multi-select', type: multiSelectPropertyModelConfig.type },
|
||||
{ id: 'checkbox', type: checkboxPropertyModelConfig.type },
|
||||
]);
|
||||
|
||||
expect(canGroupable(asDataSource(dataSource), 'text')).toBe(false);
|
||||
expect(canGroupable(asDataSource(dataSource), 'select')).toBe(true);
|
||||
expect(canGroupable(asDataSource(dataSource), 'multi-select')).toBe(true);
|
||||
expect(canGroupable(asDataSource(dataSource), 'checkbox')).toBe(true);
|
||||
});
|
||||
|
||||
it('prefers mutable group column over immutable ones', () => {
|
||||
const dataSource = createMockDataSource([
|
||||
{
|
||||
id: 'immutable-bool',
|
||||
type: 'immutable-boolean',
|
||||
},
|
||||
{
|
||||
id: 'checkbox',
|
||||
type: checkboxPropertyModelConfig.type,
|
||||
},
|
||||
]);
|
||||
|
||||
expect(pickKanbanGroupColumn(asDataSource(dataSource))).toBe('checkbox');
|
||||
});
|
||||
|
||||
it('creates default status select column when no groupable column exists', () => {
|
||||
const dataSource = createMockDataSource([
|
||||
{
|
||||
id: 'text',
|
||||
type: textPropertyModelConfig.type,
|
||||
},
|
||||
]);
|
||||
|
||||
const statusColumnId = ensureKanbanGroupColumn(asDataSource(dataSource));
|
||||
|
||||
expect(statusColumnId).toBeTruthy();
|
||||
expect(dataSource.propertyTypeGet(statusColumnId!)).toBe(
|
||||
selectPropertyModelConfig.type
|
||||
);
|
||||
const options =
|
||||
(
|
||||
dataSource.propertyDataGet(statusColumnId!) as {
|
||||
options?: { value: string }[];
|
||||
}
|
||||
).options ?? [];
|
||||
expect(options.map(option => option.value)).toEqual([
|
||||
'Todo',
|
||||
'In Progress',
|
||||
'Done',
|
||||
]);
|
||||
});
|
||||
|
||||
it('defaults hideEmpty to true for non-option groups', () => {
|
||||
const dataSource = createMockDataSource([
|
||||
{
|
||||
id: 'checkbox',
|
||||
type: checkboxPropertyModelConfig.type,
|
||||
},
|
||||
]);
|
||||
|
||||
const next = resolveKanbanGroupBy(asDataSource(dataSource));
|
||||
expect(next?.columnId).toBe('checkbox');
|
||||
expect(next?.hideEmpty).toBe(true);
|
||||
expect(next?.name).toBe('boolean');
|
||||
});
|
||||
|
||||
it('defaults hideEmpty to false for select grouping', () => {
|
||||
const dataSource = createMockDataSource([
|
||||
{
|
||||
id: 'select',
|
||||
type: selectPropertyModelConfig.type,
|
||||
},
|
||||
]);
|
||||
|
||||
const next = resolveKanbanGroupBy(asDataSource(dataSource));
|
||||
expect(next?.columnId).toBe('select');
|
||||
expect(next?.hideEmpty).toBe(false);
|
||||
expect(next?.name).toBe('select');
|
||||
});
|
||||
|
||||
it('preserves sort and explicit hideEmpty when resolving groupBy', () => {
|
||||
const dataSource = createMockDataSource([
|
||||
{
|
||||
id: 'checkbox',
|
||||
type: checkboxPropertyModelConfig.type,
|
||||
},
|
||||
]);
|
||||
const current: GroupBy = {
|
||||
type: 'groupBy',
|
||||
columnId: 'checkbox',
|
||||
name: 'boolean',
|
||||
sort: { desc: true },
|
||||
hideEmpty: true,
|
||||
};
|
||||
|
||||
const next = resolveKanbanGroupBy(asDataSource(dataSource), current);
|
||||
|
||||
expect(next?.columnId).toBe('checkbox');
|
||||
expect(next?.sort).toEqual({ desc: true });
|
||||
expect(next?.hideEmpty).toBe(true);
|
||||
});
|
||||
|
||||
it('replaces current non-groupable column with a valid kanban column', () => {
|
||||
const dataSource = createMockDataSource([
|
||||
{ id: 'text', type: textPropertyModelConfig.type },
|
||||
{ id: 'checkbox', type: checkboxPropertyModelConfig.type },
|
||||
]);
|
||||
|
||||
const next = resolveKanbanGroupBy(asDataSource(dataSource), {
|
||||
type: 'groupBy',
|
||||
columnId: 'text',
|
||||
name: 'text',
|
||||
});
|
||||
|
||||
expect(next?.columnId).toBe('checkbox');
|
||||
expect(next?.name).toBe('boolean');
|
||||
expect(next?.hideEmpty).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('detail selection', () => {
|
||||
it('should avoid recursive selection update when exiting select edit mode', () => {
|
||||
vi.stubGlobal('requestAnimationFrame', ((cb: FrameRequestCallback) => {
|
||||
cb(0);
|
||||
return 0;
|
||||
}) as typeof requestAnimationFrame);
|
||||
try {
|
||||
let selection: DetailSelection;
|
||||
let beforeExitCalls = 0;
|
||||
|
||||
const cell = {
|
||||
beforeEnterEditMode: () => true,
|
||||
beforeExitEditingMode: () => {
|
||||
beforeExitCalls += 1;
|
||||
selection.selection = {
|
||||
propertyId: 'status',
|
||||
isEditing: false,
|
||||
};
|
||||
},
|
||||
afterEnterEditingMode: () => {},
|
||||
focusCell: () => true,
|
||||
blurCell: () => true,
|
||||
forceUpdate: () => {},
|
||||
} satisfies DataViewCellLifeCycle;
|
||||
|
||||
const field = {
|
||||
isFocus$: signal(false),
|
||||
isEditing$: signal(false),
|
||||
cell,
|
||||
focus: () => {},
|
||||
blur: () => {},
|
||||
};
|
||||
|
||||
const detail = {
|
||||
querySelector: () => field,
|
||||
};
|
||||
|
||||
selection = new DetailSelection(detail);
|
||||
selection.selection = {
|
||||
propertyId: 'status',
|
||||
isEditing: true,
|
||||
};
|
||||
|
||||
selection.selection = {
|
||||
propertyId: 'status',
|
||||
isEditing: false,
|
||||
};
|
||||
|
||||
expect(beforeExitCalls).toBe(1);
|
||||
expect(field.isEditing$.value).toBe(false);
|
||||
} finally {
|
||||
vi.unstubAllGlobals();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,36 +0,0 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
|
||||
import { mobileEffects } from '../view-presets/table/mobile/effect.js';
|
||||
import type { MobileTableGroup } from '../view-presets/table/mobile/group.js';
|
||||
import { pcEffects } from '../view-presets/table/pc/effect.js';
|
||||
import type { TableGroup } from '../view-presets/table/pc/group.js';
|
||||
|
||||
/** @vitest-environment happy-dom */
|
||||
|
||||
describe('TableGroup', () => {
|
||||
test('toggle collapse on pc', () => {
|
||||
pcEffects();
|
||||
const group = document.createElement(
|
||||
'affine-data-view-table-group'
|
||||
) as TableGroup;
|
||||
|
||||
expect(group.collapsed$.value).toBe(false);
|
||||
(group as any)._toggleCollapse();
|
||||
expect(group.collapsed$.value).toBe(true);
|
||||
(group as any)._toggleCollapse();
|
||||
expect(group.collapsed$.value).toBe(false);
|
||||
});
|
||||
|
||||
test('toggle collapse on mobile', () => {
|
||||
mobileEffects();
|
||||
const group = document.createElement(
|
||||
'mobile-table-group'
|
||||
) as MobileTableGroup;
|
||||
|
||||
expect(group.collapsed$.value).toBe(false);
|
||||
(group as any)._toggleCollapse();
|
||||
expect(group.collapsed$.value).toBe(true);
|
||||
(group as any)._toggleCollapse();
|
||||
expect(group.collapsed$.value).toBe(false);
|
||||
});
|
||||
});
|
||||
101
blocksuite/affine/data-view/src/__tests__/table.unit.spec.ts
Normal file
101
blocksuite/affine/data-view/src/__tests__/table.unit.spec.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
|
||||
import { numberFormats } from '../property-presets/number/utils/formats.js';
|
||||
import {
|
||||
formatNumber,
|
||||
NumberFormatSchema,
|
||||
parseNumber,
|
||||
} from '../property-presets/number/utils/formatter.js';
|
||||
import { mobileEffects } from '../view-presets/table/mobile/effect.js';
|
||||
import type { MobileTableGroup } from '../view-presets/table/mobile/group.js';
|
||||
import { pcEffects } from '../view-presets/table/pc/effect.js';
|
||||
import type { TableGroup } from '../view-presets/table/pc/group.js';
|
||||
|
||||
/** @vitest-environment happy-dom */
|
||||
|
||||
describe('TableGroup', () => {
|
||||
test('toggle collapse on pc', () => {
|
||||
pcEffects();
|
||||
const group = document.createElement(
|
||||
'affine-data-view-table-group'
|
||||
) as TableGroup;
|
||||
|
||||
expect(group.collapsed$.value).toBe(false);
|
||||
(group as any)._toggleCollapse();
|
||||
expect(group.collapsed$.value).toBe(true);
|
||||
(group as any)._toggleCollapse();
|
||||
expect(group.collapsed$.value).toBe(false);
|
||||
});
|
||||
|
||||
test('toggle collapse on mobile', () => {
|
||||
mobileEffects();
|
||||
const group = document.createElement(
|
||||
'mobile-table-group'
|
||||
) as MobileTableGroup;
|
||||
|
||||
expect(group.collapsed$.value).toBe(false);
|
||||
(group as any)._toggleCollapse();
|
||||
expect(group.collapsed$.value).toBe(true);
|
||||
(group as any)._toggleCollapse();
|
||||
expect(group.collapsed$.value).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('number formatter', () => {
|
||||
test('number format menu should expose all schema formats', () => {
|
||||
const menuFormats = numberFormats.map(format => format.type);
|
||||
const schemaFormats = NumberFormatSchema.options;
|
||||
|
||||
expect(new Set(menuFormats)).toEqual(new Set(schemaFormats));
|
||||
expect(menuFormats).toHaveLength(schemaFormats.length);
|
||||
});
|
||||
|
||||
test('formats grouped decimal numbers with Intl grouping rules', () => {
|
||||
const value = 11451.4;
|
||||
const decimals = 1;
|
||||
const expected = new Intl.NumberFormat(navigator.language, {
|
||||
style: 'decimal',
|
||||
useGrouping: true,
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
}).format(value);
|
||||
|
||||
expect(formatNumber(value, 'numberWithCommas', decimals)).toBe(expected);
|
||||
});
|
||||
|
||||
test('formats percent values with Intl percent rules', () => {
|
||||
const value = 0.1234;
|
||||
const decimals = 2;
|
||||
const expected = new Intl.NumberFormat(navigator.language, {
|
||||
style: 'percent',
|
||||
useGrouping: false,
|
||||
minimumFractionDigits: decimals,
|
||||
maximumFractionDigits: decimals,
|
||||
}).format(value);
|
||||
|
||||
expect(formatNumber(value, 'percent', decimals)).toBe(expected);
|
||||
});
|
||||
|
||||
test('formats currency values with Intl currency rules', () => {
|
||||
const value = 11451.4;
|
||||
const expected = new Intl.NumberFormat(navigator.language, {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
currencyDisplay: 'symbol',
|
||||
}).format(value);
|
||||
|
||||
expect(formatNumber(value, 'currencyUSD')).toBe(expected);
|
||||
});
|
||||
|
||||
test('parses grouped number string pasted from clipboard', () => {
|
||||
expect(parseNumber('11,451.4')).toBe(11451.4);
|
||||
});
|
||||
|
||||
test('keeps regular decimal parsing', () => {
|
||||
expect(parseNumber('123.45')).toBe(123.45);
|
||||
});
|
||||
|
||||
test('supports comma as decimal separator in locale-specific input', () => {
|
||||
expect(parseNumber('11451,4', ',')).toBe(11451.4);
|
||||
});
|
||||
});
|
||||
@@ -22,7 +22,6 @@ import { html } from 'lit/static-html.js';
|
||||
import { dataViewCommonStyle } from './common/css-variable.js';
|
||||
import type { DataSource } from './data-source/index.js';
|
||||
import type { DataViewSelection } from './types.js';
|
||||
import { cacheComputed } from './utils/cache.js';
|
||||
import { renderUniLit } from './utils/uni-component/index.js';
|
||||
import type { DataViewUILogicBase } from './view/data-view-base.js';
|
||||
import type { SingleView } from './view-manager/single-view.js';
|
||||
@@ -75,12 +74,38 @@ export class DataViewRootUILogic {
|
||||
|
||||
return new (logic(view))(this, view);
|
||||
}
|
||||
private readonly views$ = cacheComputed(this.viewManager.views$, viewId =>
|
||||
this.createDataViewUILogic(viewId)
|
||||
);
|
||||
private readonly _viewsCache = new Map<
|
||||
string,
|
||||
{ mode: string; logic: DataViewUILogicBase }
|
||||
>();
|
||||
|
||||
private readonly views$ = computed(() => {
|
||||
const viewDataList = this.dataSource.viewDataList$.value;
|
||||
const validIds = new Set(viewDataList.map(viewData => viewData.id));
|
||||
|
||||
for (const cachedId of this._viewsCache.keys()) {
|
||||
if (!validIds.has(cachedId)) {
|
||||
this._viewsCache.delete(cachedId);
|
||||
}
|
||||
}
|
||||
|
||||
return viewDataList.map(viewData => {
|
||||
const cached = this._viewsCache.get(viewData.id);
|
||||
if (cached && cached.mode === viewData.mode) {
|
||||
return cached.logic;
|
||||
}
|
||||
const logic = this.createDataViewUILogic(viewData.id);
|
||||
this._viewsCache.set(viewData.id, {
|
||||
mode: viewData.mode,
|
||||
logic,
|
||||
});
|
||||
return logic;
|
||||
});
|
||||
});
|
||||
|
||||
private readonly viewsMap$ = computed(() => {
|
||||
return Object.fromEntries(
|
||||
this.views$.list.value.map(logic => [logic.view.id, logic])
|
||||
this.views$.value.map(logic => [logic.view.id, logic])
|
||||
);
|
||||
});
|
||||
private readonly _uiRef = signal<DataViewRootUI>();
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import type { KanbanCardSelection } from '../../view-presets';
|
||||
import type { KanbanCard } from '../../view-presets/kanban/pc/card.js';
|
||||
import { KanbanCell } from '../../view-presets/kanban/pc/cell.js';
|
||||
import type { RecordDetail } from './detail.js';
|
||||
import { RecordField } from './field.js';
|
||||
|
||||
type DetailViewSelection = {
|
||||
@@ -9,16 +8,39 @@ type DetailViewSelection = {
|
||||
isEditing: boolean;
|
||||
};
|
||||
|
||||
type DetailSelectionHost = {
|
||||
querySelector: (selector: string) => unknown;
|
||||
};
|
||||
|
||||
const isSameDetailSelection = (
|
||||
current?: DetailViewSelection,
|
||||
next?: DetailViewSelection
|
||||
) => {
|
||||
if (!current && !next) {
|
||||
return true;
|
||||
}
|
||||
if (!current || !next) {
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
current.propertyId === next.propertyId &&
|
||||
current.isEditing === next.isEditing
|
||||
);
|
||||
};
|
||||
|
||||
export class DetailSelection {
|
||||
_selection?: DetailViewSelection;
|
||||
|
||||
onSelect = (selection?: DetailViewSelection) => {
|
||||
if (isSameDetailSelection(this._selection, selection)) {
|
||||
return;
|
||||
}
|
||||
const old = this._selection;
|
||||
this._selection = selection;
|
||||
if (old) {
|
||||
this.blur(old);
|
||||
}
|
||||
this._selection = selection;
|
||||
if (selection) {
|
||||
if (selection && isSameDetailSelection(this._selection, selection)) {
|
||||
this.focus(selection);
|
||||
}
|
||||
};
|
||||
@@ -49,7 +71,7 @@ export class DetailSelection {
|
||||
}
|
||||
}
|
||||
|
||||
constructor(private readonly viewEle: RecordDetail) {}
|
||||
constructor(private readonly viewEle: DetailSelectionHost) {}
|
||||
|
||||
blur(selection: DetailViewSelection) {
|
||||
const container = this.getFocusCellContainer(selection);
|
||||
@@ -111,8 +133,10 @@ export class DetailSelection {
|
||||
}
|
||||
|
||||
focusFirstCell() {
|
||||
const firstId = this.viewEle.querySelector('affine-data-view-record-field')
|
||||
?.column.id;
|
||||
const firstField = this.viewEle.querySelector(
|
||||
'affine-data-view-record-field'
|
||||
) as RecordField | undefined;
|
||||
const firstId = firstField?.column.id;
|
||||
if (firstId) {
|
||||
this.selection = {
|
||||
propertyId: firstId,
|
||||
@@ -144,11 +168,12 @@ export class DetailSelection {
|
||||
|
||||
getSelectCard(selection: KanbanCardSelection) {
|
||||
const { groupKey, cardId } = selection.cards[0];
|
||||
const group = this.viewEle.querySelector(
|
||||
`affine-data-view-kanban-group[data-key="${groupKey}"]`
|
||||
) as HTMLElement | undefined;
|
||||
|
||||
return this.viewEle
|
||||
.querySelector(`affine-data-view-kanban-group[data-key="${groupKey}"]`)
|
||||
?.querySelector(
|
||||
`affine-data-view-kanban-card[data-card-id="${cardId}"]`
|
||||
) as KanbanCard | undefined;
|
||||
return group?.querySelector(
|
||||
`affine-data-view-kanban-card[data-card-id="${cardId}"]`
|
||||
) as KanbanCard | undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -247,12 +247,13 @@ export const groupByMatchers: GroupByConfig[] = [
|
||||
matchType: t.boolean.instance(),
|
||||
groupName: (_t, v) => `${v?.toString() ?? ''}`,
|
||||
defaultKeys: _t => [
|
||||
ungroups,
|
||||
{ key: 'true', value: true },
|
||||
{ key: 'false', value: false },
|
||||
],
|
||||
valuesGroup: (v, _t) =>
|
||||
typeof v !== 'boolean' ? [ungroups] : [{ key: v.toString(), value: v }],
|
||||
typeof v !== 'boolean'
|
||||
? [{ key: 'false', value: false }]
|
||||
: [{ key: v.toString(), value: v }],
|
||||
addToGroup: (v: boolean | null, _old: boolean | null) => v,
|
||||
view: createUniComponentFromWebComponent(BooleanGroupView),
|
||||
}),
|
||||
|
||||
@@ -17,6 +17,7 @@ import { css, html, unsafeCSS } from 'lit';
|
||||
import { property, query } from 'lit/decorators.js';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
|
||||
import { canGroupable } from '../../view-presets/kanban/group-by-utils.js';
|
||||
import { KanbanSingleView } from '../../view-presets/kanban/kanban-view-manager.js';
|
||||
import { TableSingleView } from '../../view-presets/table/table-view-manager.js';
|
||||
import { dataViewCssVariable } from '../common/css-variable.js';
|
||||
@@ -278,6 +279,9 @@ export const selectGroupByProperty = (
|
||||
if (property.type$.value === 'title') {
|
||||
return false;
|
||||
}
|
||||
if (view instanceof KanbanSingleView) {
|
||||
return canGroupable(view.manager.dataSource, property.id);
|
||||
}
|
||||
const dataType = property.dataType$.value;
|
||||
if (!dataType) {
|
||||
return false;
|
||||
|
||||
@@ -16,6 +16,10 @@ export type GetJsonValueFromConfig<T> =
|
||||
export type PropertyConfig<Data, RawValue = unknown, JsonValue = unknown> = {
|
||||
name: string;
|
||||
hide?: boolean;
|
||||
kanbanGroup?: {
|
||||
enabled: boolean;
|
||||
mutable?: boolean;
|
||||
};
|
||||
propertyData: {
|
||||
schema: ZodType<Data>;
|
||||
default: () => Data;
|
||||
|
||||
@@ -12,6 +12,5 @@ export type PropertyDataUpdater<
|
||||
> = (data: Data) => Partial<Data>;
|
||||
|
||||
export interface DatabaseFlags {
|
||||
enable_number_formatting: boolean;
|
||||
enable_table_virtual_scroll: boolean;
|
||||
}
|
||||
|
||||
@@ -21,6 +21,10 @@ const FALSE_VALUES = new Set([
|
||||
|
||||
export const checkboxPropertyModelConfig = checkboxPropertyType.modelConfig({
|
||||
name: 'Checkbox',
|
||||
kanbanGroup: {
|
||||
enabled: true,
|
||||
mutable: true,
|
||||
},
|
||||
propertyData: {
|
||||
schema: zod.object({}),
|
||||
default: () => ({}),
|
||||
|
||||
@@ -10,6 +10,10 @@ export const multiSelectPropertyType = propertyType('multi-select');
|
||||
export const multiSelectPropertyModelConfig =
|
||||
multiSelectPropertyType.modelConfig({
|
||||
name: 'Multi-select',
|
||||
kanbanGroup: {
|
||||
enabled: true,
|
||||
mutable: true,
|
||||
},
|
||||
propertyData: {
|
||||
schema: SelectPropertySchema,
|
||||
default: () => ({
|
||||
|
||||
@@ -24,17 +24,11 @@ export class NumberCell extends BaseCellRenderer<
|
||||
private accessor _inputEle!: HTMLInputElement;
|
||||
|
||||
private _getFormattedString(value: number | undefined = this.value) {
|
||||
const enableNewFormatting =
|
||||
this.view.featureFlags$.value.enable_number_formatting;
|
||||
const decimals = this.property.data$.value.decimal ?? 0;
|
||||
const formatMode = (this.property.data$.value.format ??
|
||||
'number') as NumberFormat;
|
||||
|
||||
return value != undefined
|
||||
? enableNewFormatting
|
||||
? formatNumber(value, formatMode, decimals)
|
||||
: value.toString()
|
||||
: '';
|
||||
return value != undefined ? formatNumber(value, formatMode, decimals) : '';
|
||||
}
|
||||
|
||||
private readonly _keydown = (e: KeyboardEvent) => {
|
||||
@@ -58,9 +52,7 @@ export class NumberCell extends BaseCellRenderer<
|
||||
return;
|
||||
}
|
||||
|
||||
const enableNewFormatting =
|
||||
this.view.featureFlags$.value.enable_number_formatting;
|
||||
const value = enableNewFormatting ? parseNumber(str) : parseFloat(str);
|
||||
const value = parseNumber(str);
|
||||
if (isNaN(value)) {
|
||||
if (this._inputEle) {
|
||||
this._inputEle.value = this.value
|
||||
|
||||
@@ -3,6 +3,7 @@ import zod from 'zod';
|
||||
import { t } from '../../core/logical/type-presets.js';
|
||||
import { propertyType } from '../../core/property/property-config.js';
|
||||
import { NumberPropertySchema } from './types.js';
|
||||
import { parseNumber } from './utils/formatter.js';
|
||||
export const numberPropertyType = propertyType('number');
|
||||
|
||||
export const numberPropertyModelConfig = numberPropertyType.modelConfig({
|
||||
@@ -21,7 +22,7 @@ export const numberPropertyModelConfig = numberPropertyType.modelConfig({
|
||||
default: () => null,
|
||||
toString: ({ value }) => value?.toString() ?? '',
|
||||
fromString: ({ value }) => {
|
||||
const num = value ? Number(value) : NaN;
|
||||
const num = value ? parseNumber(value) : NaN;
|
||||
return { value: isNaN(num) ? null : num };
|
||||
},
|
||||
toJson: ({ value }) => value ?? null,
|
||||
|
||||
@@ -11,6 +11,10 @@ export const SelectPropertySchema = zod.object({
|
||||
export type SelectPropertyData = zod.infer<typeof SelectPropertySchema>;
|
||||
export const selectPropertyModelConfig = selectPropertyType.modelConfig({
|
||||
name: 'Select',
|
||||
kanbanGroup: {
|
||||
enabled: true,
|
||||
mutable: true,
|
||||
},
|
||||
propertyData: {
|
||||
schema: SelectPropertySchema,
|
||||
default: () => ({
|
||||
|
||||
@@ -3,17 +3,9 @@ import { kanbanViewModel } from './kanban/index.js';
|
||||
import { tableViewModel } from './table/index.js';
|
||||
|
||||
export const viewConverts = [
|
||||
createViewConvert(tableViewModel, kanbanViewModel, data => {
|
||||
if (data.groupBy) {
|
||||
return {
|
||||
filter: data.filter,
|
||||
groupBy: data.groupBy,
|
||||
};
|
||||
}
|
||||
return {
|
||||
filter: data.filter,
|
||||
};
|
||||
}),
|
||||
createViewConvert(tableViewModel, kanbanViewModel, data => ({
|
||||
filter: data.filter,
|
||||
})),
|
||||
createViewConvert(kanbanViewModel, tableViewModel, data => ({
|
||||
filter: data.filter,
|
||||
groupBy: data.groupBy,
|
||||
|
||||
@@ -2,9 +2,9 @@ import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
|
||||
|
||||
import type { GroupBy, GroupProperty } from '../../core/common/types.js';
|
||||
import type { FilterGroup } from '../../core/filter/types.js';
|
||||
import { defaultGroupBy, getGroupByService, t } from '../../core/index.js';
|
||||
import type { Sort } from '../../core/sort/types.js';
|
||||
import { type BasicViewDataType, viewType } from '../../core/view/data-view.js';
|
||||
import { resolveKanbanGroupBy } from './group-by-utils.js';
|
||||
import { KanbanSingleView } from './kanban-view-manager.js';
|
||||
|
||||
export const kanbanViewType = viewType('kanban');
|
||||
@@ -34,41 +34,16 @@ export const kanbanViewModel = kanbanViewType.createModel<KanbanViewData>({
|
||||
defaultName: 'Kanban View',
|
||||
dataViewManager: KanbanSingleView,
|
||||
defaultData: viewManager => {
|
||||
const groupByService = getGroupByService(viewManager.dataSource);
|
||||
const columns = viewManager.dataSource.properties$.value;
|
||||
const allowList = columns.filter(columnId => {
|
||||
const dataType = viewManager.dataSource.propertyDataTypeGet(columnId);
|
||||
return dataType && !!groupByService?.matcher.match(dataType);
|
||||
});
|
||||
const getWeight = (columnId: string) => {
|
||||
const dataType = viewManager.dataSource.propertyDataTypeGet(columnId);
|
||||
if (!dataType || t.string.is(dataType) || t.richText.is(dataType)) {
|
||||
return 0;
|
||||
}
|
||||
if (t.tag.is(dataType)) {
|
||||
return 3;
|
||||
}
|
||||
if (t.array.is(dataType)) {
|
||||
return 2;
|
||||
}
|
||||
return 1;
|
||||
};
|
||||
const columnId = allowList.sort((a, b) => getWeight(b) - getWeight(a))[0];
|
||||
if (!columnId) {
|
||||
const groupBy = resolveKanbanGroupBy(viewManager.dataSource);
|
||||
if (!groupBy) {
|
||||
throw new BlockSuiteError(
|
||||
ErrorCode.DatabaseBlockError,
|
||||
'no groupable column found'
|
||||
);
|
||||
}
|
||||
const type = viewManager.dataSource.propertyTypeGet(columnId);
|
||||
const meta = type && viewManager.dataSource.propertyMetaGet(type);
|
||||
const data = viewManager.dataSource.propertyDataGet(columnId);
|
||||
if (!columnId || !meta || !data) {
|
||||
throw new BlockSuiteError(
|
||||
ErrorCode.DatabaseBlockError,
|
||||
'not implement yet'
|
||||
);
|
||||
}
|
||||
|
||||
const columns = viewManager.dataSource.properties$.value;
|
||||
|
||||
return {
|
||||
columns: columns.map(id => ({
|
||||
id: id,
|
||||
@@ -78,7 +53,7 @@ export const kanbanViewModel = kanbanViewType.createModel<KanbanViewData>({
|
||||
op: 'and',
|
||||
conditions: [],
|
||||
},
|
||||
groupBy: defaultGroupBy(viewManager.dataSource, meta, columnId, data),
|
||||
groupBy,
|
||||
header: {
|
||||
titleColumn: viewManager.dataSource.properties$.value.find(
|
||||
id => viewManager.dataSource.propertyTypeGet(id) === 'title'
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import { nanoid } from '@blocksuite/store';
|
||||
|
||||
import type { GroupBy } from '../../core/common/types.js';
|
||||
import { getTagColor } from '../../core/component/tags/colors.js';
|
||||
import type { DataSource } from '../../core/data-source/base.js';
|
||||
import { defaultGroupBy } from '../../core/group-by/default.js';
|
||||
import { getGroupByService } from '../../core/group-by/matcher.js';
|
||||
|
||||
type KanbanGroupCapability = 'mutable' | 'immutable' | 'none';
|
||||
|
||||
const KANBAN_DEFAULT_STATUS_OPTIONS = ['Todo', 'In Progress', 'Done'];
|
||||
const SHOW_EMPTY_GROUPS_BY_DEFAULT = new Set(['select', 'multi-select']);
|
||||
|
||||
export const getKanbanDefaultHideEmpty = (groupName?: string): boolean => {
|
||||
return !groupName || !SHOW_EMPTY_GROUPS_BY_DEFAULT.has(groupName);
|
||||
};
|
||||
|
||||
const getKanbanGroupCapability = (
|
||||
dataSource: DataSource,
|
||||
propertyId: string
|
||||
): KanbanGroupCapability => {
|
||||
const type = dataSource.propertyTypeGet(propertyId);
|
||||
if (!type) {
|
||||
return 'none';
|
||||
}
|
||||
|
||||
const meta = dataSource.propertyMetaGet(type);
|
||||
const kanbanGroup = meta?.config.kanbanGroup;
|
||||
if (!kanbanGroup?.enabled) {
|
||||
return 'none';
|
||||
}
|
||||
return kanbanGroup.mutable ? 'mutable' : 'immutable';
|
||||
};
|
||||
|
||||
const hasMatchingGroupBy = (dataSource: DataSource, propertyId: string) => {
|
||||
const dataType = dataSource.propertyDataTypeGet(propertyId);
|
||||
if (!dataType) {
|
||||
return false;
|
||||
}
|
||||
const groupByService = getGroupByService(dataSource);
|
||||
return !!groupByService?.matcher.match(dataType);
|
||||
};
|
||||
|
||||
const createGroupByFromColumn = (
|
||||
dataSource: DataSource,
|
||||
columnId: string
|
||||
): GroupBy | undefined => {
|
||||
const type = dataSource.propertyTypeGet(columnId);
|
||||
if (!type) {
|
||||
return;
|
||||
}
|
||||
const meta = dataSource.propertyMetaGet(type);
|
||||
if (!meta) {
|
||||
return;
|
||||
}
|
||||
return defaultGroupBy(
|
||||
dataSource,
|
||||
meta,
|
||||
columnId,
|
||||
dataSource.propertyDataGet(columnId)
|
||||
);
|
||||
};
|
||||
|
||||
export const canGroupable = (dataSource: DataSource, propertyId: string) => {
|
||||
return (
|
||||
getKanbanGroupCapability(dataSource, propertyId) !== 'none' &&
|
||||
hasMatchingGroupBy(dataSource, propertyId)
|
||||
);
|
||||
};
|
||||
|
||||
export const pickKanbanGroupColumn = (
|
||||
dataSource: DataSource,
|
||||
propertyIds: string[] = dataSource.properties$.value
|
||||
): string | undefined => {
|
||||
let immutableFallback: string | undefined;
|
||||
|
||||
for (const propertyId of propertyIds) {
|
||||
const capability = getKanbanGroupCapability(dataSource, propertyId);
|
||||
if (capability === 'none' || !hasMatchingGroupBy(dataSource, propertyId)) {
|
||||
continue;
|
||||
}
|
||||
if (capability === 'mutable') {
|
||||
return propertyId;
|
||||
}
|
||||
immutableFallback ??= propertyId;
|
||||
}
|
||||
|
||||
return immutableFallback;
|
||||
};
|
||||
|
||||
export const ensureKanbanGroupColumn = (
|
||||
dataSource: DataSource
|
||||
): string | undefined => {
|
||||
const columnId = pickKanbanGroupColumn(dataSource);
|
||||
if (columnId) {
|
||||
return columnId;
|
||||
}
|
||||
|
||||
const statusId = dataSource.propertyAdd('end', {
|
||||
type: 'select',
|
||||
name: 'Status',
|
||||
});
|
||||
if (!statusId) {
|
||||
return;
|
||||
}
|
||||
|
||||
dataSource.propertyDataSet(statusId, {
|
||||
options: KANBAN_DEFAULT_STATUS_OPTIONS.map(value => ({
|
||||
id: nanoid(),
|
||||
value,
|
||||
color: getTagColor(),
|
||||
})),
|
||||
});
|
||||
|
||||
return statusId;
|
||||
};
|
||||
|
||||
export const resolveKanbanGroupBy = (
|
||||
dataSource: DataSource,
|
||||
current?: GroupBy
|
||||
): GroupBy | undefined => {
|
||||
const keepColumnId =
|
||||
current?.columnId && canGroupable(dataSource, current.columnId)
|
||||
? current.columnId
|
||||
: undefined;
|
||||
|
||||
const columnId = keepColumnId ?? ensureKanbanGroupColumn(dataSource);
|
||||
if (!columnId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const next = createGroupByFromColumn(dataSource, columnId);
|
||||
if (!next) {
|
||||
return;
|
||||
}
|
||||
|
||||
return {
|
||||
...next,
|
||||
sort: current?.sort,
|
||||
hideEmpty: current?.hideEmpty ?? getKanbanDefaultHideEmpty(next.name),
|
||||
};
|
||||
};
|
||||
@@ -17,7 +17,52 @@ import {
|
||||
import { fromJson } from '../../core/property/utils';
|
||||
import { PropertyBase } from '../../core/view-manager/property.js';
|
||||
import { SingleViewBase } from '../../core/view-manager/single-view.js';
|
||||
import type { KanbanViewData } from './define.js';
|
||||
import type { ViewManager } from '../../core/view-manager/view-manager.js';
|
||||
import type { KanbanViewColumn, KanbanViewData } from './define.js';
|
||||
import {
|
||||
getKanbanDefaultHideEmpty,
|
||||
resolveKanbanGroupBy,
|
||||
} from './group-by-utils.js';
|
||||
|
||||
const materializeColumnsByPropertyIds = (
|
||||
columns: KanbanViewColumn[],
|
||||
propertyIds: string[]
|
||||
) => {
|
||||
const needShow = new Set(propertyIds);
|
||||
const orderedColumns: KanbanViewColumn[] = [];
|
||||
|
||||
for (const column of columns) {
|
||||
if (needShow.has(column.id)) {
|
||||
orderedColumns.push(column);
|
||||
needShow.delete(column.id);
|
||||
}
|
||||
}
|
||||
|
||||
for (const id of needShow) {
|
||||
orderedColumns.push({ id });
|
||||
}
|
||||
|
||||
return orderedColumns;
|
||||
};
|
||||
|
||||
export const materializeKanbanColumns = (
|
||||
columns: KanbanViewColumn[],
|
||||
propertyIds: string[]
|
||||
) => {
|
||||
const nextColumns = materializeColumnsByPropertyIds(columns, propertyIds);
|
||||
const unchanged =
|
||||
columns.length === nextColumns.length &&
|
||||
columns.every((column, index) => {
|
||||
const nextColumn = nextColumns[index];
|
||||
return (
|
||||
nextColumn != null &&
|
||||
column.id === nextColumn.id &&
|
||||
column.hide === nextColumn.hide
|
||||
);
|
||||
});
|
||||
|
||||
return unchanged ? columns : nextColumns;
|
||||
};
|
||||
|
||||
export class KanbanSingleView extends SingleViewBase<KanbanViewData> {
|
||||
propertiesRaw$ = computed(() => {
|
||||
@@ -61,16 +106,27 @@ export class KanbanSingleView extends SingleViewBase<KanbanViewData> {
|
||||
);
|
||||
|
||||
groupBy$ = computed(() => {
|
||||
return this.data$.value?.groupBy;
|
||||
const groupBy = this.data$.value?.groupBy;
|
||||
if (!groupBy || groupBy.hideEmpty != null) {
|
||||
return groupBy;
|
||||
}
|
||||
return {
|
||||
...groupBy,
|
||||
hideEmpty: getKanbanDefaultHideEmpty(groupBy.name),
|
||||
};
|
||||
});
|
||||
|
||||
groupTrait = this.traitSet(
|
||||
groupTraitKey,
|
||||
new GroupTrait(this.groupBy$, this, {
|
||||
groupBySet: groupBy => {
|
||||
const nextGroupBy = resolveKanbanGroupBy(
|
||||
this.manager.dataSource,
|
||||
groupBy
|
||||
);
|
||||
this.dataUpdate(() => {
|
||||
return {
|
||||
groupBy: groupBy,
|
||||
groupBy: nextGroupBy,
|
||||
};
|
||||
});
|
||||
},
|
||||
@@ -200,6 +256,23 @@ export class KanbanSingleView extends SingleViewBase<KanbanViewData> {
|
||||
return this.view?.mode ?? 'kanban';
|
||||
}
|
||||
|
||||
private materializeColumns() {
|
||||
const view = this.view;
|
||||
if (!view) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextColumns = materializeKanbanColumns(
|
||||
view.columns,
|
||||
this.dataSource.properties$.value
|
||||
);
|
||||
if (nextColumns === view.columns) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.dataUpdate(() => ({ columns: nextColumns }));
|
||||
}
|
||||
|
||||
get view() {
|
||||
return this.data$.value;
|
||||
}
|
||||
@@ -289,6 +362,13 @@ export class KanbanSingleView extends SingleViewBase<KanbanViewData> {
|
||||
propertyGetOrCreate(columnId: string): KanbanColumn {
|
||||
return new KanbanColumn(this, columnId);
|
||||
}
|
||||
|
||||
constructor(viewManager: ViewManager, viewId: string) {
|
||||
super(viewManager, viewId);
|
||||
// Materialize view columns on view activation so newly added properties
|
||||
// can participate in hide/order operations in kanban.
|
||||
this.materializeColumns();
|
||||
}
|
||||
}
|
||||
|
||||
type KanbanColumnData = KanbanViewData['columns'][number];
|
||||
|
||||
@@ -190,7 +190,7 @@ const createDragPreview = (card: KanbanCard, x: number, y: number) => {
|
||||
div.className = 'with-data-view-css-variable';
|
||||
div.style.width = `${card.getBoundingClientRect().width}px`;
|
||||
div.style.position = 'fixed';
|
||||
// div.style.pointerEvents = 'none';
|
||||
div.style.pointerEvents = 'none';
|
||||
div.style.transform = 'rotate(-3deg)';
|
||||
div.style.left = `${x}px`;
|
||||
div.style.top = `${y}px`;
|
||||
@@ -209,8 +209,12 @@ const createDragPreview = (card: KanbanCard, x: number, y: number) => {
|
||||
};
|
||||
const createDropPreview = () => {
|
||||
const div = document.createElement('div');
|
||||
div.style.height = '2px';
|
||||
div.style.borderRadius = '1px';
|
||||
div.dataset.isDropPreview = 'true';
|
||||
div.style.pointerEvents = 'none';
|
||||
div.style.position = 'fixed';
|
||||
div.style.zIndex = '9999';
|
||||
div.style.height = '3px';
|
||||
div.style.borderRadius = '2px';
|
||||
div.style.backgroundColor = 'var(--affine-primary-color)';
|
||||
div.style.boxShadow = '0px 0px 8px 0px rgba(30, 150, 235, 0.35)';
|
||||
return {
|
||||
@@ -219,19 +223,50 @@ const createDropPreview = () => {
|
||||
self: KanbanCard | undefined,
|
||||
card?: KanbanCard
|
||||
) {
|
||||
const target = card ?? group.querySelector('.add-card');
|
||||
if (!target) {
|
||||
console.error('`target` is not found');
|
||||
return;
|
||||
}
|
||||
if (target.previousElementSibling === self || target === self) {
|
||||
if (card === self) {
|
||||
div.remove();
|
||||
return;
|
||||
}
|
||||
if (target.previousElementSibling === div) {
|
||||
|
||||
if (!card) {
|
||||
const cards = Array.from(
|
||||
group.querySelectorAll('affine-data-view-kanban-card')
|
||||
);
|
||||
const lastCard = cards[cards.length - 1];
|
||||
if (lastCard === self) {
|
||||
div.remove();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
let rect: DOMRect | undefined;
|
||||
let y = 0;
|
||||
if (card) {
|
||||
rect = card.getBoundingClientRect();
|
||||
y = rect.top;
|
||||
} else {
|
||||
const addCard = group.querySelector('.add-card');
|
||||
if (addCard instanceof HTMLElement) {
|
||||
rect = addCard.getBoundingClientRect();
|
||||
y = rect.top;
|
||||
}
|
||||
}
|
||||
if (!rect) {
|
||||
const body = group.querySelector('.group-body');
|
||||
if (body instanceof HTMLElement) {
|
||||
rect = body.getBoundingClientRect();
|
||||
y = rect.bottom;
|
||||
}
|
||||
}
|
||||
if (!rect) {
|
||||
div.remove();
|
||||
return;
|
||||
}
|
||||
target.insertAdjacentElement('beforebegin', div);
|
||||
|
||||
document.body.append(div);
|
||||
div.style.left = `${Math.round(rect.left)}px`;
|
||||
div.style.top = `${Math.round(y - 2)}px`;
|
||||
div.style.width = `${Math.round(rect.width)}px`;
|
||||
},
|
||||
remove() {
|
||||
div.remove();
|
||||
|
||||
@@ -11,6 +11,7 @@ import { html } from 'lit/static-html.js';
|
||||
|
||||
import { groupTraitKey } from '../../../core/group-by/trait.js';
|
||||
import type { SingleView } from '../../../core/index.js';
|
||||
import { canGroupable } from '../group-by-utils.js';
|
||||
|
||||
const styles = css`
|
||||
affine-data-view-kanban-header {
|
||||
@@ -43,7 +44,12 @@ export class KanbanHeader extends SignalWatcher(
|
||||
popMenu(popupTargetFromElement(e.target as HTMLElement), {
|
||||
options: {
|
||||
items: this.view.properties$.value
|
||||
.filter(column => column.id !== groupTrait.property$.value?.id)
|
||||
.filter(column => {
|
||||
if (column.id === groupTrait.property$.value?.id) {
|
||||
return false;
|
||||
}
|
||||
return canGroupable(this.view.manager.dataSource, column.id);
|
||||
})
|
||||
.map(column => {
|
||||
return menu.action({
|
||||
name: column.name$.value,
|
||||
|
||||
@@ -64,9 +64,6 @@ export class MobileTableColumnHeader extends SignalWatcher(
|
||||
};
|
||||
|
||||
private popMenu(ele?: HTMLElement) {
|
||||
const enableNumberFormatting =
|
||||
this.tableViewManager.featureFlags$.value.enable_number_formatting;
|
||||
|
||||
popMenu(popupTargetFromElement(ele ?? this), {
|
||||
options: {
|
||||
title: {
|
||||
@@ -76,41 +73,36 @@ export class MobileTableColumnHeader extends SignalWatcher(
|
||||
inputConfig(this.column),
|
||||
typeConfig(this.column),
|
||||
// Number format begin
|
||||
...(enableNumberFormatting
|
||||
? [
|
||||
menu.subMenu({
|
||||
name: 'Number Format',
|
||||
hide: () =>
|
||||
!this.column.dataUpdate ||
|
||||
this.column.type$.value !== 'number',
|
||||
options: {
|
||||
title: {
|
||||
text: 'Number Format',
|
||||
menu.subMenu({
|
||||
name: 'Number Format',
|
||||
hide: () =>
|
||||
!this.column.dataUpdate || this.column.type$.value !== 'number',
|
||||
options: {
|
||||
title: {
|
||||
text: 'Number Format',
|
||||
},
|
||||
items: [
|
||||
numberFormatConfig(this.column),
|
||||
...numberFormats.map(format => {
|
||||
const data = this.column.data$.value;
|
||||
return menu.action({
|
||||
isSelected: data.format === format.type,
|
||||
prefix: html`<span
|
||||
style="font-size: var(--affine-font-base); scale: 1.2;"
|
||||
>${format.symbol}</span
|
||||
>`,
|
||||
name: format.label,
|
||||
select: () => {
|
||||
if (data.format === format.type) return;
|
||||
this.column.dataUpdate(() => ({
|
||||
format: format.type,
|
||||
}));
|
||||
},
|
||||
items: [
|
||||
numberFormatConfig(this.column),
|
||||
...numberFormats.map(format => {
|
||||
const data = this.column.data$.value;
|
||||
return menu.action({
|
||||
isSelected: data.format === format.type,
|
||||
prefix: html`<span
|
||||
style="font-size: var(--affine-font-base); scale: 1.2;"
|
||||
>${format.symbol}</span
|
||||
>`,
|
||||
name: format.label,
|
||||
select: () => {
|
||||
if (data.format === format.type) return;
|
||||
this.column.dataUpdate(() => ({
|
||||
format: format.type,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}),
|
||||
],
|
||||
},
|
||||
});
|
||||
}),
|
||||
]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
}),
|
||||
// Number format end
|
||||
menu.group({
|
||||
items: [
|
||||
|
||||
@@ -205,47 +205,39 @@ export class DatabaseHeaderColumn extends SignalWatcher(
|
||||
}
|
||||
|
||||
private popMenu(ele?: HTMLElement) {
|
||||
const enableNumberFormatting =
|
||||
this.tableViewManager.featureFlags$.value.enable_number_formatting;
|
||||
|
||||
popMenu(popupTargetFromElement(ele ?? this), {
|
||||
options: {
|
||||
items: [
|
||||
inputConfig(this.column),
|
||||
typeConfig(this.column),
|
||||
// Number format begin
|
||||
...(enableNumberFormatting
|
||||
? [
|
||||
menu.subMenu({
|
||||
name: 'Number Format',
|
||||
hide: () =>
|
||||
!this.column.dataUpdate ||
|
||||
this.column.type$.value !== 'number',
|
||||
options: {
|
||||
items: [
|
||||
numberFormatConfig(this.column),
|
||||
...numberFormats.map(format => {
|
||||
const data = this.column.data$.value;
|
||||
return menu.action({
|
||||
isSelected: data.format === format.type,
|
||||
prefix: html`<span
|
||||
style="font-size: var(--affine-font-base); scale: 1.2;"
|
||||
>${format.symbol}</span
|
||||
>`,
|
||||
name: format.label,
|
||||
select: () => {
|
||||
if (data.format === format.type) return;
|
||||
this.column.dataUpdate(() => ({
|
||||
format: format.type,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}),
|
||||
],
|
||||
},
|
||||
menu.subMenu({
|
||||
name: 'Number Format',
|
||||
hide: () =>
|
||||
!this.column.dataUpdate || this.column.type$.value !== 'number',
|
||||
options: {
|
||||
items: [
|
||||
numberFormatConfig(this.column),
|
||||
...numberFormats.map(format => {
|
||||
const data = this.column.data$.value;
|
||||
return menu.action({
|
||||
isSelected: data.format === format.type,
|
||||
prefix: html`<span
|
||||
style="font-size: var(--affine-font-base); scale: 1.2;"
|
||||
>${format.symbol}</span
|
||||
>`,
|
||||
name: format.label,
|
||||
select: () => {
|
||||
if (data.format === format.type) return;
|
||||
this.column.dataUpdate(() => ({
|
||||
format: format.type,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}),
|
||||
]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
}),
|
||||
// Number format end
|
||||
menu.group({
|
||||
items: [
|
||||
|
||||
@@ -205,47 +205,39 @@ export class DatabaseHeaderColumn extends SignalWatcher(
|
||||
}
|
||||
|
||||
private popMenu(ele?: HTMLElement) {
|
||||
const enableNumberFormatting =
|
||||
this.tableViewManager.featureFlags$.value.enable_number_formatting;
|
||||
|
||||
popMenu(popupTargetFromElement(ele ?? this), {
|
||||
options: {
|
||||
items: [
|
||||
inputConfig(this.column),
|
||||
typeConfig(this.column),
|
||||
// Number format begin
|
||||
...(enableNumberFormatting
|
||||
? [
|
||||
menu.subMenu({
|
||||
name: 'Number Format',
|
||||
hide: () =>
|
||||
!this.column.dataUpdate ||
|
||||
this.column.type$.value !== 'number',
|
||||
options: {
|
||||
items: [
|
||||
numberFormatConfig(this.column),
|
||||
...numberFormats.map(format => {
|
||||
const data = this.column.data$.value;
|
||||
return menu.action({
|
||||
isSelected: data.format === format.type,
|
||||
prefix: html`<span
|
||||
style="font-size: var(--affine-font-base); scale: 1.2;"
|
||||
>${format.symbol}</span
|
||||
>`,
|
||||
name: format.label,
|
||||
select: () => {
|
||||
if (data.format === format.type) return;
|
||||
this.column.dataUpdate(() => ({
|
||||
format: format.type,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}),
|
||||
],
|
||||
},
|
||||
menu.subMenu({
|
||||
name: 'Number Format',
|
||||
hide: () =>
|
||||
!this.column.dataUpdate || this.column.type$.value !== 'number',
|
||||
options: {
|
||||
items: [
|
||||
numberFormatConfig(this.column),
|
||||
...numberFormats.map(format => {
|
||||
const data = this.column.data$.value;
|
||||
return menu.action({
|
||||
isSelected: data.format === format.type,
|
||||
prefix: html`<span
|
||||
style="font-size: var(--affine-font-base); scale: 1.2;"
|
||||
>${format.symbol}</span
|
||||
>`,
|
||||
name: format.label,
|
||||
select: () => {
|
||||
if (data.format === format.type) return;
|
||||
this.column.dataUpdate(() => ({
|
||||
format: format.type,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}),
|
||||
]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
}),
|
||||
// Number format end
|
||||
menu.group({
|
||||
items: [
|
||||
|
||||
@@ -337,6 +337,7 @@ export const popViewOptions = (
|
||||
const reopen = () => {
|
||||
popViewOptions(target, dataViewLogic);
|
||||
};
|
||||
let handler: ReturnType<typeof popMenu>;
|
||||
const items: MenuConfig[] = [];
|
||||
items.push(
|
||||
menu.input({
|
||||
@@ -350,16 +351,9 @@ export const popViewOptions = (
|
||||
items.push(
|
||||
menu.group({
|
||||
items: [
|
||||
menu.action({
|
||||
name: 'Layout',
|
||||
postfix: html` <div
|
||||
style="font-size: 14px;text-transform: capitalize;"
|
||||
>
|
||||
${view.type}
|
||||
</div>
|
||||
${ArrowRightSmallIcon()}`,
|
||||
select: () => {
|
||||
const viewTypes = view.manager.viewMetas.map<MenuConfig>(meta => {
|
||||
menu => {
|
||||
const viewTypeItems = menu.renderItems(
|
||||
view.manager.viewMetas.map<MenuConfig>(meta => {
|
||||
return menu => {
|
||||
if (!menu.search(meta.model.defaultName)) {
|
||||
return;
|
||||
@@ -379,10 +373,10 @@ export const popViewOptions = (
|
||||
? 'var(--affine-text-emphasis-color)'
|
||||
: 'var(--affine-text-secondary-color)',
|
||||
});
|
||||
const data: MenuButtonData = {
|
||||
const buttonData: MenuButtonData = {
|
||||
content: () => html`
|
||||
<div
|
||||
style="color:var(--affine-text-emphasis-color);width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 6px 16px;white-space: nowrap"
|
||||
style="width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 6px 16px;white-space: nowrap"
|
||||
>
|
||||
<div style="${iconStyle}">
|
||||
${renderUniLit(meta.renderer.icon)}
|
||||
@@ -392,7 +386,7 @@ export const popViewOptions = (
|
||||
`,
|
||||
select: () => {
|
||||
const id = view.manager.currentViewId$.value;
|
||||
if (!id) {
|
||||
if (!id || meta.type === view.type) {
|
||||
return;
|
||||
}
|
||||
view.manager.viewChangeType(id, meta.type);
|
||||
@@ -403,55 +397,35 @@ export const popViewOptions = (
|
||||
const containerStyle = styleMap({
|
||||
flex: '1',
|
||||
});
|
||||
return html` <affine-menu-button
|
||||
return html`<affine-menu-button
|
||||
style="${containerStyle}"
|
||||
.data="${data}"
|
||||
.data="${buttonData}"
|
||||
.menu="${menu}"
|
||||
></affine-menu-button>`;
|
||||
};
|
||||
});
|
||||
const subHandler = popMenu(target, {
|
||||
options: {
|
||||
title: {
|
||||
onBack: reopen,
|
||||
text: 'Layout',
|
||||
},
|
||||
items: [
|
||||
menu => {
|
||||
const result = menu.renderItems(viewTypes);
|
||||
if (result.length) {
|
||||
return html` <div style="display: flex">${result}</div>`;
|
||||
}
|
||||
return html``;
|
||||
},
|
||||
// menu.toggleSwitch({
|
||||
// name: 'Show block icon',
|
||||
// on: true,
|
||||
// onChange: value => {
|
||||
// console.log(value);
|
||||
// },
|
||||
// }),
|
||||
// menu.toggleSwitch({
|
||||
// name: 'Show Vertical lines',
|
||||
// on: true,
|
||||
// onChange: value => {
|
||||
// console.log(value);
|
||||
// },
|
||||
// }),
|
||||
],
|
||||
},
|
||||
middleware: [
|
||||
autoPlacement({
|
||||
allowedPlacements: ['bottom-start', 'top-start'],
|
||||
}),
|
||||
offset({ mainAxis: 15, crossAxis: -162 }),
|
||||
shift({ crossAxis: true }),
|
||||
],
|
||||
});
|
||||
subHandler.menu.menuElement.style.minHeight = '550px';
|
||||
},
|
||||
prefix: LayoutIcon(),
|
||||
}),
|
||||
})
|
||||
);
|
||||
if (!viewTypeItems.length) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:0 2px;">
|
||||
<div
|
||||
style="display:flex;align-items:center;color:var(--affine-icon-color);"
|
||||
>
|
||||
${LayoutIcon()}
|
||||
</div>
|
||||
<div
|
||||
style="font-size:14px;line-height:22px;color:var(--affine-text-secondary-color);"
|
||||
>
|
||||
Layout
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-top:8px;">
|
||||
${viewTypeItems}
|
||||
</div>
|
||||
`;
|
||||
},
|
||||
],
|
||||
})
|
||||
);
|
||||
@@ -486,7 +460,6 @@ export const popViewOptions = (
|
||||
],
|
||||
})
|
||||
);
|
||||
let handler: ReturnType<typeof popMenu>;
|
||||
handler = popMenu(target, {
|
||||
options: {
|
||||
title: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { describe, expect, test } from 'vitest';
|
||||
|
||||
import { isValidUrl } from '../../utils/url.js';
|
||||
import { isValidUrl, splitTextByUrl } from '../../utils/url.js';
|
||||
|
||||
describe('isValidUrl: determining whether a URL is valid is very complicated', () => {
|
||||
test('basic case', () => {
|
||||
@@ -85,3 +85,55 @@ describe('isValidUrl: determining whether a URL is valid is very complicated', (
|
||||
expect(isValidUrl('http://127.0.0.1', 'http://127.0.0.1')).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('splitTextByUrl', () => {
|
||||
test('should split text and keep url part as link segment', () => {
|
||||
expect(splitTextByUrl('hi - https://google.com')).toEqual([
|
||||
{ text: 'hi - ' },
|
||||
{
|
||||
text: 'https://google.com',
|
||||
link: 'https://google.com',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
test('should support prefixed url token without swallowing prefix text', () => {
|
||||
expect(splitTextByUrl('-https://google.com')).toEqual([
|
||||
{ text: '-' },
|
||||
{
|
||||
text: 'https://google.com',
|
||||
link: 'https://google.com',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
test('should trim tail punctuations from url token', () => {
|
||||
expect(splitTextByUrl('visit https://google.com, now')).toEqual([
|
||||
{ text: 'visit ' },
|
||||
{
|
||||
text: 'https://google.com',
|
||||
link: 'https://google.com',
|
||||
},
|
||||
{ text: ', now' },
|
||||
]);
|
||||
});
|
||||
|
||||
test('should convert domain token in plain text', () => {
|
||||
expect(splitTextByUrl('google.com and text')).toEqual([
|
||||
{
|
||||
text: 'google.com',
|
||||
link: 'https://google.com',
|
||||
},
|
||||
{ text: ' and text' },
|
||||
]);
|
||||
});
|
||||
|
||||
test('should normalize www domain token link while preserving display text', () => {
|
||||
expect(splitTextByUrl('www.google.com')).toEqual([
|
||||
{
|
||||
text: 'www.google.com',
|
||||
link: 'https://www.google.com',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,7 +2,6 @@ import { type Store, StoreExtension } from '@blocksuite/store';
|
||||
import { type Signal, signal } from '@preact/signals-core';
|
||||
|
||||
export interface BlockSuiteFlags {
|
||||
enable_database_number_formatting: boolean;
|
||||
enable_database_attachment_note: boolean;
|
||||
enable_database_full_width: boolean;
|
||||
enable_block_query: boolean;
|
||||
@@ -28,7 +27,6 @@ export class FeatureFlagService extends StoreExtension {
|
||||
static override key = 'feature-flag-server';
|
||||
|
||||
private readonly _flags: Signal<BlockSuiteFlags> = signal({
|
||||
enable_database_number_formatting: false,
|
||||
enable_database_attachment_note: false,
|
||||
enable_database_full_width: false,
|
||||
enable_block_query: false,
|
||||
|
||||
@@ -95,28 +95,107 @@ export function isValidUrl(str: string, baseUrl = location.origin) {
|
||||
return result?.allowed ?? false;
|
||||
}
|
||||
|
||||
const URL_SCHEME_IN_TOKEN_REGEXP =
|
||||
/(?:https?:\/\/|ftp:\/\/|sftp:\/\/|mailto:|tel:|www\.)/i;
|
||||
|
||||
const URL_LEADING_DELIMITER_REGEXP = /^[-([{<'"~]+/;
|
||||
|
||||
const URL_TRAILING_DELIMITER_REGEXP = /[)\]}>.,;:!?'"]+$/;
|
||||
|
||||
export type UrlTextSegment = {
|
||||
text: string;
|
||||
link?: string;
|
||||
};
|
||||
|
||||
function appendUrlTextSegment(
|
||||
segments: UrlTextSegment[],
|
||||
segment: UrlTextSegment
|
||||
) {
|
||||
if (!segment.text) return;
|
||||
const last = segments[segments.length - 1];
|
||||
if (last && !last.link && !segment.link) {
|
||||
last.text += segment.text;
|
||||
return;
|
||||
}
|
||||
segments.push(segment);
|
||||
}
|
||||
|
||||
function splitTokenByUrl(token: string, baseUrl: string): UrlTextSegment[] {
|
||||
const schemeMatch = token.match(URL_SCHEME_IN_TOKEN_REGEXP);
|
||||
const schemeIndex = schemeMatch?.index;
|
||||
if (typeof schemeIndex === 'number' && schemeIndex > 0) {
|
||||
return [
|
||||
{ text: token.slice(0, schemeIndex) },
|
||||
...splitTokenByUrl(token.slice(schemeIndex), baseUrl),
|
||||
];
|
||||
}
|
||||
|
||||
const leading = token.match(URL_LEADING_DELIMITER_REGEXP)?.[0] ?? '';
|
||||
const withoutLeading = token.slice(leading.length);
|
||||
const trailing =
|
||||
withoutLeading.match(URL_TRAILING_DELIMITER_REGEXP)?.[0] ?? '';
|
||||
const core = trailing
|
||||
? withoutLeading.slice(0, withoutLeading.length - trailing.length)
|
||||
: withoutLeading;
|
||||
|
||||
if (core && isValidUrl(core, baseUrl)) {
|
||||
const segments: UrlTextSegment[] = [];
|
||||
appendUrlTextSegment(segments, { text: leading });
|
||||
appendUrlTextSegment(segments, { text: core, link: normalizeUrl(core) });
|
||||
appendUrlTextSegment(segments, { text: trailing });
|
||||
return segments;
|
||||
}
|
||||
|
||||
return [{ text: token }];
|
||||
}
|
||||
|
||||
/**
|
||||
* Split plain text into mixed segments, where only URL segments carry link metadata.
|
||||
* This is used by paste handlers so text like `example:https://google.com` keeps
|
||||
* normal text while only URL parts are linkified.
|
||||
*/
|
||||
export function splitTextByUrl(text: string, baseUrl = location.origin) {
|
||||
const chunks = text.match(/\s+|\S+/g);
|
||||
if (!chunks) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const segments: UrlTextSegment[] = [];
|
||||
chunks.forEach(chunk => {
|
||||
if (/^\s+$/.test(chunk)) {
|
||||
appendUrlTextSegment(segments, { text: chunk });
|
||||
return;
|
||||
}
|
||||
splitTokenByUrl(chunk, baseUrl).forEach(segment => {
|
||||
appendUrlTextSegment(segments, segment);
|
||||
});
|
||||
});
|
||||
return segments;
|
||||
}
|
||||
|
||||
// https://en.wikipedia.org/wiki/Top-level_domain
|
||||
const COMMON_TLDS = new Set([
|
||||
'com',
|
||||
'org',
|
||||
'net',
|
||||
'edu',
|
||||
'gov',
|
||||
'co',
|
||||
'io',
|
||||
'me',
|
||||
'moe',
|
||||
'mil',
|
||||
'top',
|
||||
'dev',
|
||||
'xyz',
|
||||
'info',
|
||||
'cat',
|
||||
'ru',
|
||||
'co',
|
||||
'com',
|
||||
'de',
|
||||
'dev',
|
||||
'edu',
|
||||
'eu',
|
||||
'gov',
|
||||
'info',
|
||||
'io',
|
||||
'jp',
|
||||
'uk',
|
||||
'me',
|
||||
'mil',
|
||||
'moe',
|
||||
'net',
|
||||
'org',
|
||||
'pro',
|
||||
'ru',
|
||||
'top',
|
||||
'uk',
|
||||
'xyz',
|
||||
]);
|
||||
|
||||
function isCommonTLD(url: URL) {
|
||||
|
||||
@@ -15,6 +15,7 @@ import { WorkspaceSQLiteDB } from '../nbstore/v1/workspace-db-adapter';
|
||||
import type { WorkspaceMeta } from '../type';
|
||||
import {
|
||||
getDeletedWorkspacesBasePath,
|
||||
getSpaceBasePath,
|
||||
getSpaceDBPath,
|
||||
getWorkspaceBasePathV1,
|
||||
getWorkspaceMeta,
|
||||
@@ -96,6 +97,33 @@ export async function storeWorkspaceMeta(
|
||||
}
|
||||
}
|
||||
|
||||
export async function listLocalWorkspaceIds(): Promise<string[]> {
|
||||
const localWorkspaceBasePath = path.join(
|
||||
await getSpaceBasePath('workspace'),
|
||||
'local'
|
||||
);
|
||||
if (!(await fs.pathExists(localWorkspaceBasePath))) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const entries = await fs.readdir(localWorkspaceBasePath);
|
||||
const ids = await Promise.all(
|
||||
entries.map(async entry => {
|
||||
const workspacePath = path.join(localWorkspaceBasePath, entry);
|
||||
const stat = await fs.stat(workspacePath).catch(() => null);
|
||||
if (!stat?.isDirectory()) {
|
||||
return null;
|
||||
}
|
||||
if (!(await fs.pathExists(path.join(workspacePath, 'storage.db')))) {
|
||||
return null;
|
||||
}
|
||||
return entry;
|
||||
})
|
||||
);
|
||||
|
||||
return ids.filter((id): id is string => typeof id === 'string');
|
||||
}
|
||||
|
||||
type WorkspaceDocMeta = {
|
||||
id: string;
|
||||
name: string;
|
||||
|
||||
@@ -3,6 +3,7 @@ import {
|
||||
deleteBackupWorkspace,
|
||||
deleteWorkspace,
|
||||
getDeletedWorkspaces,
|
||||
listLocalWorkspaceIds,
|
||||
trashWorkspace,
|
||||
} from './handlers';
|
||||
|
||||
@@ -18,4 +19,5 @@ export const workspaceHandlers = {
|
||||
return getDeletedWorkspaces();
|
||||
},
|
||||
deleteBackupWorkspace: async (id: string) => deleteBackupWorkspace(id),
|
||||
listLocalWorkspaceIds: async () => listLocalWorkspaceIds(),
|
||||
};
|
||||
|
||||
@@ -33,6 +33,43 @@ afterAll(() => {
|
||||
});
|
||||
|
||||
describe('workspace db management', () => {
|
||||
test('list local workspace ids', async () => {
|
||||
const { listLocalWorkspaceIds } =
|
||||
await import('@affine/electron/helper/workspace/handlers');
|
||||
const validWorkspaceId = v4();
|
||||
const noDbWorkspaceId = v4();
|
||||
const fileEntry = 'README.txt';
|
||||
|
||||
const validWorkspacePath = path.join(
|
||||
appDataPath,
|
||||
'workspaces',
|
||||
'local',
|
||||
validWorkspaceId
|
||||
);
|
||||
const noDbWorkspacePath = path.join(
|
||||
appDataPath,
|
||||
'workspaces',
|
||||
'local',
|
||||
noDbWorkspaceId
|
||||
);
|
||||
const nonDirectoryPath = path.join(
|
||||
appDataPath,
|
||||
'workspaces',
|
||||
'local',
|
||||
fileEntry
|
||||
);
|
||||
|
||||
await fs.ensureDir(validWorkspacePath);
|
||||
await fs.ensureFile(path.join(validWorkspacePath, 'storage.db'));
|
||||
await fs.ensureDir(noDbWorkspacePath);
|
||||
await fs.outputFile(nonDirectoryPath, 'not-a-workspace');
|
||||
|
||||
const ids = await listLocalWorkspaceIds();
|
||||
expect(ids).toContain(validWorkspaceId);
|
||||
expect(ids).not.toContain(noDbWorkspaceId);
|
||||
expect(ids).not.toContain(fileEntry);
|
||||
});
|
||||
|
||||
test('trash workspace', async () => {
|
||||
const { trashWorkspace } =
|
||||
await import('@affine/electron/helper/workspace/handlers');
|
||||
|
||||
@@ -17,7 +17,7 @@ let package = Package(
|
||||
],
|
||||
dependencies: [
|
||||
.package(path: "../AffineResources"),
|
||||
.package(url: "https://github.com/RevenueCat/purchases-ios-spm.git", from: "5.56.1"),
|
||||
.package(url: "https://github.com/RevenueCat/purchases-ios-spm.git", from: "5.58.0"),
|
||||
],
|
||||
targets: [
|
||||
.target(
|
||||
|
||||
@@ -12,6 +12,10 @@ import zod from 'zod';
|
||||
export const createdByColumnType = propertyType('created-by');
|
||||
export const createdByPropertyModelConfig = createdByColumnType.modelConfig({
|
||||
name: 'Created By',
|
||||
kanbanGroup: {
|
||||
enabled: true,
|
||||
mutable: false,
|
||||
},
|
||||
propertyData: {
|
||||
schema: zod.object({}),
|
||||
default: () => ({}),
|
||||
|
||||
@@ -24,6 +24,10 @@ export type MemberCellJsonValueType = zod.TypeOf<
|
||||
>;
|
||||
export const memberPropertyModelConfig = memberColumnType.modelConfig({
|
||||
name: 'Member',
|
||||
kanbanGroup: {
|
||||
enabled: true,
|
||||
mutable: true,
|
||||
},
|
||||
propertyData: {
|
||||
schema: zod.object({}),
|
||||
default: () => ({}),
|
||||
|
||||
@@ -48,15 +48,44 @@ import { WorkspaceImpl } from '../../workspace/impls/workspace';
|
||||
import { getWorkspaceProfileWorker } from './out-worker';
|
||||
|
||||
export const LOCAL_WORKSPACE_LOCAL_STORAGE_KEY = 'affine-local-workspace';
|
||||
export const LOCAL_WORKSPACE_GLOBAL_STATE_KEY =
|
||||
'workspace-engine:local-workspace-ids:v1';
|
||||
const LOCAL_WORKSPACE_CHANGED_BROADCAST_CHANNEL_KEY =
|
||||
'affine-local-workspace-changed';
|
||||
|
||||
const logger = new DebugLogger('local-workspace');
|
||||
|
||||
export function getLocalWorkspaceIds(): string[] {
|
||||
type GlobalStateStorageLike = {
|
||||
ready: Promise<void>;
|
||||
get<T>(key: string): T | undefined;
|
||||
set<T>(key: string, value: T): void;
|
||||
};
|
||||
|
||||
function normalizeWorkspaceIds(ids: unknown): string[] {
|
||||
if (!Array.isArray(ids)) {
|
||||
return [];
|
||||
}
|
||||
return ids.filter((id): id is string => typeof id === 'string');
|
||||
}
|
||||
|
||||
function getElectronGlobalStateStorage(): GlobalStateStorageLike | null {
|
||||
if (!BUILD_CONFIG.isElectron) {
|
||||
return null;
|
||||
}
|
||||
const sharedStorage = (
|
||||
globalThis as {
|
||||
__sharedStorage?: { globalState?: GlobalStateStorageLike };
|
||||
}
|
||||
).__sharedStorage;
|
||||
return sharedStorage?.globalState ?? null;
|
||||
}
|
||||
|
||||
function getLegacyLocalWorkspaceIds(): string[] {
|
||||
try {
|
||||
return JSON.parse(
|
||||
localStorage.getItem(LOCAL_WORKSPACE_LOCAL_STORAGE_KEY) ?? '[]'
|
||||
return normalizeWorkspaceIds(
|
||||
JSON.parse(
|
||||
localStorage.getItem(LOCAL_WORKSPACE_LOCAL_STORAGE_KEY) ?? '[]'
|
||||
)
|
||||
);
|
||||
} catch (e) {
|
||||
logger.error('Failed to get local workspace ids', e);
|
||||
@@ -64,21 +93,98 @@ export function getLocalWorkspaceIds(): string[] {
|
||||
}
|
||||
}
|
||||
|
||||
export function getLocalWorkspaceIds(): string[] {
|
||||
const globalState = getElectronGlobalStateStorage();
|
||||
if (globalState) {
|
||||
const value = globalState.get(LOCAL_WORKSPACE_GLOBAL_STATE_KEY);
|
||||
if (value !== undefined) {
|
||||
return normalizeWorkspaceIds(value);
|
||||
}
|
||||
}
|
||||
|
||||
return getLegacyLocalWorkspaceIds();
|
||||
}
|
||||
|
||||
export function setLocalWorkspaceIds(
|
||||
idsOrUpdater: string[] | ((ids: string[]) => string[])
|
||||
) {
|
||||
localStorage.setItem(
|
||||
LOCAL_WORKSPACE_LOCAL_STORAGE_KEY,
|
||||
JSON.stringify(
|
||||
typeof idsOrUpdater === 'function'
|
||||
? idsOrUpdater(getLocalWorkspaceIds())
|
||||
: idsOrUpdater
|
||||
)
|
||||
const next = normalizeWorkspaceIds(
|
||||
typeof idsOrUpdater === 'function'
|
||||
? idsOrUpdater(getLocalWorkspaceIds())
|
||||
: idsOrUpdater
|
||||
);
|
||||
const deduplicated = [...new Set(next)];
|
||||
|
||||
const globalState = getElectronGlobalStateStorage();
|
||||
if (globalState) {
|
||||
globalState.set(LOCAL_WORKSPACE_GLOBAL_STATE_KEY, deduplicated);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
localStorage.setItem(
|
||||
LOCAL_WORKSPACE_LOCAL_STORAGE_KEY,
|
||||
JSON.stringify(deduplicated)
|
||||
);
|
||||
} catch (e) {
|
||||
logger.error('Failed to set local workspace ids', e);
|
||||
}
|
||||
}
|
||||
|
||||
class LocalWorkspaceFlavourProvider implements WorkspaceFlavourProvider {
|
||||
constructor(private readonly framework: FrameworkProvider) {}
|
||||
constructor(private readonly framework: FrameworkProvider) {
|
||||
if (BUILD_CONFIG.isElectron) {
|
||||
void this.ensureWorkspaceIdsMigrated();
|
||||
}
|
||||
}
|
||||
|
||||
private migration: Promise<void> | null = null;
|
||||
|
||||
private ensureWorkspaceIdsMigrated() {
|
||||
if (!BUILD_CONFIG.isElectron) {
|
||||
return;
|
||||
}
|
||||
if (this.migration) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.migration = (async () => {
|
||||
const electronApi = this.framework.get(DesktopApiService);
|
||||
await electronApi.sharedStorage.globalState.ready;
|
||||
|
||||
const persistedIds = normalizeWorkspaceIds(
|
||||
electronApi.sharedStorage.globalState.get(
|
||||
LOCAL_WORKSPACE_GLOBAL_STATE_KEY
|
||||
)
|
||||
);
|
||||
const legacyIds = getLegacyLocalWorkspaceIds();
|
||||
|
||||
let scannedIds: string[] = [];
|
||||
try {
|
||||
scannedIds =
|
||||
await electronApi.handler.workspace.listLocalWorkspaceIds();
|
||||
} catch (e) {
|
||||
logger.error('Failed to scan local workspace ids', e);
|
||||
}
|
||||
|
||||
setLocalWorkspaceIds(currentIds => {
|
||||
return [
|
||||
...new Set([
|
||||
...currentIds,
|
||||
...persistedIds,
|
||||
...legacyIds,
|
||||
...scannedIds,
|
||||
]),
|
||||
];
|
||||
});
|
||||
})()
|
||||
.catch(e => {
|
||||
logger.error('Failed to migrate local workspace ids', e);
|
||||
})
|
||||
.finally(() => {
|
||||
this.notifyChannel.postMessage(null);
|
||||
});
|
||||
}
|
||||
|
||||
readonly flavour = 'local';
|
||||
readonly notifyChannel = new BroadcastChannel(
|
||||
@@ -242,6 +348,9 @@ class LocalWorkspaceFlavourProvider implements WorkspaceFlavourProvider {
|
||||
);
|
||||
isRevalidating$ = new LiveData(false);
|
||||
revalidate(): void {
|
||||
if (BUILD_CONFIG.isElectron) {
|
||||
void this.ensureWorkspaceIdsMigrated();
|
||||
}
|
||||
// notify livedata to re-scan workspaces
|
||||
this.notifyChannel.postMessage(null);
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@ import { GlobalState } from '../storage';
|
||||
import { WorkspaceFlavoursProvider } from '../workspace';
|
||||
import { CloudWorkspaceFlavoursProvider } from './impls/cloud';
|
||||
import {
|
||||
LOCAL_WORKSPACE_LOCAL_STORAGE_KEY,
|
||||
LocalWorkspaceFlavoursProvider,
|
||||
setLocalWorkspaceIds,
|
||||
} from './impls/local';
|
||||
|
||||
export { base64ToUint8Array, uint8ArrayToBase64 } from './utils/base64';
|
||||
@@ -25,12 +25,5 @@ export function configureBrowserWorkspaceFlavours(framework: Framework) {
|
||||
* Used after copying sqlite database file to appdata folder
|
||||
*/
|
||||
export function _addLocalWorkspace(id: string) {
|
||||
const allWorkspaceIDs: string[] = JSON.parse(
|
||||
localStorage.getItem(LOCAL_WORKSPACE_LOCAL_STORAGE_KEY) ?? '[]'
|
||||
);
|
||||
allWorkspaceIDs.push(id);
|
||||
localStorage.setItem(
|
||||
LOCAL_WORKSPACE_LOCAL_STORAGE_KEY,
|
||||
JSON.stringify(allWorkspaceIDs)
|
||||
);
|
||||
setLocalWorkspaceIds(ids => (ids.includes(id) ? ids : [...ids, id]));
|
||||
}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
'base_path': '.'
|
||||
'base_url': 'https://api.crowdin.com'
|
||||
|
||||
'preserve_hierarchy': true
|
||||
|
||||
'files':
|
||||
[
|
||||
{
|
||||
'source': '/src/resources/en.json',
|
||||
'translation': '/src/resources/%locale%.json',
|
||||
},
|
||||
]
|
||||
@@ -338,8 +338,8 @@ test.describe('kanban view selection', () => {
|
||||
rows: ['row1'],
|
||||
columns: [
|
||||
{
|
||||
type: 'number',
|
||||
value: [1],
|
||||
type: 'checkbox',
|
||||
value: [true],
|
||||
},
|
||||
{
|
||||
type: 'rich-text',
|
||||
@@ -350,8 +350,6 @@ test.describe('kanban view selection', () => {
|
||||
|
||||
await focusKanbanCardHeader(page);
|
||||
await assertKanbanCellSelected(page, {
|
||||
// group by `number` column, `Ungroups` is hidden because it's empty (hideEmpty: true by default)
|
||||
// so the first visible group is the one with value "1" at groupIndex: 0
|
||||
groupIndex: 0,
|
||||
cardIndex: 0,
|
||||
cellIndex: 0,
|
||||
@@ -380,9 +378,9 @@ test.describe('kanban view selection', () => {
|
||||
rows: ['row1', 'row2'],
|
||||
columns: [
|
||||
{
|
||||
type: 'number',
|
||||
// Both rows have value 1 to put them in the same group
|
||||
value: [1, 1],
|
||||
type: 'checkbox',
|
||||
// Both rows are checked so they stay in the same group.
|
||||
value: [true, true],
|
||||
},
|
||||
{
|
||||
type: 'rich-text',
|
||||
@@ -394,8 +392,6 @@ test.describe('kanban view selection', () => {
|
||||
await focusKanbanCardHeader(page);
|
||||
await pressArrowUp(page);
|
||||
await assertKanbanCellSelected(page, {
|
||||
// `Ungroups` is hidden because it's empty (hideEmpty: true by default)
|
||||
// so the first visible group is "1" at groupIndex: 0
|
||||
groupIndex: 0,
|
||||
cardIndex: 1,
|
||||
cellIndex: 2,
|
||||
@@ -414,18 +410,18 @@ test.describe('kanban view selection', () => {
|
||||
}) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
await initKanbanViewState(page, {
|
||||
rows: ['row1', 'row2', 'row3'],
|
||||
rows: ['row1', 'row2'],
|
||||
columns: [
|
||||
{
|
||||
type: 'number',
|
||||
value: [undefined, 1, 10],
|
||||
type: 'checkbox',
|
||||
value: [true, false],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await focusKanbanCardHeader(page);
|
||||
|
||||
await pressArrowRight(page, 3);
|
||||
await pressArrowRight(page, 2);
|
||||
await assertKanbanCellSelected(page, {
|
||||
groupIndex: 0,
|
||||
cardIndex: 0,
|
||||
@@ -434,7 +430,7 @@ test.describe('kanban view selection', () => {
|
||||
|
||||
await pressArrowLeft(page);
|
||||
await assertKanbanCellSelected(page, {
|
||||
groupIndex: 2,
|
||||
groupIndex: 1,
|
||||
cardIndex: 0,
|
||||
cellIndex: 0,
|
||||
});
|
||||
@@ -480,11 +476,11 @@ test.describe('kanban view selection', () => {
|
||||
}) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
await initKanbanViewState(page, {
|
||||
rows: ['row1', 'row2', 'row3'],
|
||||
rows: ['row1', 'row2'],
|
||||
columns: [
|
||||
{
|
||||
type: 'number',
|
||||
value: [undefined, 1, 10],
|
||||
type: 'checkbox',
|
||||
value: [true, false],
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -493,7 +489,7 @@ test.describe('kanban view selection', () => {
|
||||
await pressEscape(page);
|
||||
await pressEscape(page);
|
||||
|
||||
await pressArrowRight(page, 3);
|
||||
await pressArrowRight(page, 2);
|
||||
await assertKanbanCardSelected(page, {
|
||||
groupIndex: 0,
|
||||
cardIndex: 0,
|
||||
@@ -501,7 +497,7 @@ test.describe('kanban view selection', () => {
|
||||
|
||||
await pressArrowLeft(page);
|
||||
await assertKanbanCardSelected(page, {
|
||||
groupIndex: 2,
|
||||
groupIndex: 1,
|
||||
cardIndex: 0,
|
||||
});
|
||||
});
|
||||
@@ -512,8 +508,8 @@ test.describe('kanban view selection', () => {
|
||||
rows: ['row1', 'row2'],
|
||||
columns: [
|
||||
{
|
||||
type: 'number',
|
||||
value: [undefined, 1],
|
||||
type: 'checkbox',
|
||||
value: [true, false],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user