feat(database): basic table view grouping support (#4727)

packages/blocks/src/__internal__/utils/types.ts

@@ -50,6 +50,7 @@ export type MultiSelection = {
 export type TableViewSelection = {
  viewId: string;
  type: 'table';
+ groupKey?: string;
  rowsSelection?: MultiSelection;
  columnsSelection?: MultiSelection;
  focus: CellFocus;

packages/blocks/src/components/menu/menu.ts

@@ -30,6 +30,8 @@ type GroupMenu = MenuCommon & {
  name: string;
  children: () => NormalMenu[];
 };
+// eslint-disable-next-line @typescript-eslint/ban-types
+type MenuClass = (string & {}) | 'delete-item';
 type NormalMenu = MenuCommon &
  (
  | {
@@ -41,7 +43,7 @@ type NormalMenu = MenuCommon &
  postfix?: TemplateResult;
  select: () => void;
  onHover?: (hover: boolean) => void;
- class?: string;
+ class?: MenuClass;
  }
  | {
  type: 'checkbox';
@@ -60,7 +62,7 @@ type NormalMenu = MenuCommon &
  options: MenuOptions;
  }
  );
-type Menu = GroupMenu | NormalMenu;
+export type Menu = GroupMenu | NormalMenu;
 type GetMenuByType<T extends Menu['type'], M extends Menu = Menu> = M extends {
  type: T;
 }

packages/blocks/src/components/tags/multi-tag-select.ts

@@ -1,6 +1,7 @@
 import { ShadowlessElement, WithDisposable } from '@blocksuite/lit';
 import { nanoid } from '@blocksuite/store';
-import { autoPlacement, offset } from '@floating-ui/dom';
+import type { Middleware } from '@floating-ui/dom';
+import { autoPlacement, detectOverflow } from '@floating-ui/dom';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -485,15 +486,28 @@ export const popTagSelect = (
  };
  const remove = createPopup(target, component, {
  onClose: ops.onComplete,
- middleware: [
- offset(state => {
- return {
- mainAxis: -state.rects.reference.height,
- crossAxis:
- state.rects.floating.width / 2 - state.rects.reference.width / 2,
- };
- }),
- ],
+ middleware: [middleware],
  });
  return remove;
 };
+const middleware: Middleware = {
+ name: 'middleware',
+ fn: async state => {
+ const overflow = await detectOverflow(state);
+ const referenceRect = state.elements.reference.getBoundingClientRect();
+ const top = referenceRect.top;
+ const left = referenceRect.left;
+ let y = top - 12;
+ let x = left - 12;
+ if (overflow.bottom > 0) {
+ y = top - state.elements.floating.getBoundingClientRect().height;
+ }
+ if (overflow.right > 0) {
+ x = left - overflow.right;
+ }
+ return {
+ y,
+ x,
+ };
+ },
+};

packages/blocks/src/components/tags/multi-tag-view.ts

@@ -15,6 +15,7 @@ export class MultiTagView extends WithDisposable(ShadowlessElement) {
  align-items: center;
  width: 100%;
  height: 100%;
+ min-height: 22px;
  }
 
  .affine-select-cell-container * {

packages/blocks/src/database-block/common/columns/multi-select/cell-renderer.ts

@@ -63,14 +63,17 @@ export class MultiSelectCellEditing extends BaseCellRenderer<
 
  private popTagSelect = () => {
  this._disposables.add({
- dispose: popTagSelect(this, {
- options: this._options,
- onOptionsChange: this._onOptionsChange,
- value: this._value,
- onChange: this._onChange,
- onComplete: this._editComplete,
- minWidth: 400,
- }),
+ dispose: popTagSelect(
+ this.querySelector('affine-multi-tag-view') ?? this,
+ {
+ options: this._options,
+ onOptionsChange: this._onOptionsChange,
+ value: this._value,
+ onChange: this._onChange,
+ onComplete: this._editComplete,
+ minWidth: 400,
+ }
+ ),
  });
  };
 

packages/blocks/src/database-block/common/columns/select/cell-renderer.ts

@@ -61,15 +61,18 @@ export class SelectCellEditing extends BaseCellRenderer<
 
  private popTagSelect = () => {
  this._disposables.add({
- dispose: popTagSelect(this, {
- mode: 'single',
- options: this._options,
- onOptionsChange: this._onOptionsChange,
- value: this._value,
- onChange: this._onChange,
- onComplete: this._editComplete,
- minWidth: 400,
- }),
+ dispose: popTagSelect(
+ this.querySelector('affine-multi-tag-view') ?? this,
+ {
+ mode: 'single',
+ options: this._options,
+ onOptionsChange: this._onOptionsChange,
+ value: this._value,
+ onChange: this._onChange,
+ onComplete: this._editComplete,
+ minWidth: 400,
+ }
+ ),
  });
  };
 

packages/blocks/src/database-block/common/group-by/helper.ts

@@ -0,0 +1,208 @@
+import type { TType } from '../../logical/typesystem.js';
+import type { InsertPosition } from '../../types.js';
+import { insertPositionToIndex } from '../../utils/insert.js';
+import type { DataViewManager } from '../data-view-manager.js';
+import type { GroupBy, GroupProperty } from '../types.js';
+import type { GroupByConfig } from './matcher.js';
+import { groupByMatcher } from './matcher.js';
+
+export type GroupData = {
+ key: string;
+ name: string;
+ helper: GroupHelper;
+ type: TType;
+ value: unknown;
+ rows: string[];
+};
+
+export class GroupHelper {
+ constructor(
+ private groupBy: GroupBy,
+ config: GroupByConfig,
+ type: TType,
+ private viewManager: DataViewManager,
+ private ops: {
+ sortGroup: (keys: string[]) => string[];
+ sortRow: (groupKey: string, rowIds: string[]) => string[];
+ changeGroupSort: (keys: string[]) => void;
+ changeRowSort: (
+ groupKeys: string[],
+ groupKey: string,
+ keys: string[]
+ ) => void;
+ }
+ ) {
+ this.groupMap = Object.fromEntries(
+ config.defaultKeys(type).map(({ key, value }) => [
+ key,
+ {
+ key,
+ name: config.groupName(type, value),
+ helper: this,
+ type,
+ value,
+ rows: [],
+ },
+ ])
+ );
+ this.viewManager.rows.forEach(id => {
+ const value = this.viewManager.cellGetJsonValue(id, groupBy.columnId);
+ const keys = config.valuesGroup(value, type);
+ keys.forEach(({ key, value }) => {
+ if (!this.groupMap[key]) {
+ this.groupMap[key] = {
+ key,
+ name: config.groupName(type, value),
+ helper: this,
+ value,
+ rows: [],
+ type,
+ };
+ }
+ this.groupMap[key].rows.push(id);
+ });
+ });
+ const sortedGroup = ops.sortGroup(Object.keys(this.groupMap));
+ sortedGroup.forEach(key => {
+ this.groupMap[key].rows = ops.sortRow(key, this.groupMap[key].rows);
+ });
+ this.groups = sortedGroup.map(key => this.groupMap[key]);
+ }
+
+ get dataType() {
+ return this.viewManager.columnGetDataType(this.groupBy.columnId);
+ }
+
+ get column() {
+ return this.viewManager.columnGet(this.groupBy.columnId);
+ }
+
+ get columnId() {
+ return this.groupBy.columnId;
+ }
+
+ get type() {
+ return this.viewManager.columnGetType(this.columnId);
+ }
+
+ get data() {
+ return this.viewManager.columnGetData(this.columnId);
+ }
+
+ updateData = (data: NonNullable<unknown>) => {
+ this.viewManager.columnUpdateData(this.columnId, data);
+ };
+
+ updateValue(rows: string[], value: unknown) {
+ rows.forEach(id => {
+ this.viewManager.cellUpdateValue(id, this.columnId, value);
+ });
+ }
+
+ public readonly groups: GroupData[];
+ public readonly groupMap: Record<string, GroupData>;
+
+ groupConfig() {
+ return groupByMatcher.findData(v => v.name === this.groupBy.name);
+ }
+
+ defaultGroupProperty(key: string): GroupProperty {
+ return {
+ key,
+ hide: false,
+ manuallyCardSort: [],
+ };
+ }
+
+ addToGroup(rowId: string, key: string) {
+ const columnId = this.columnId;
+ const addTo = this.groupConfig()?.addToGroup ?? (value => value);
+ const newValue = addTo(
+ this.groupMap[key].value,
+ this.viewManager.cellGetJsonValue(rowId, columnId)
+ );
+ this.viewManager.cellUpdateValue(rowId, columnId, newValue);
+ }
+
+ removeFromGroup(rowId: string, key: string) {
+ const columnId = this.columnId;
+ const remove = this.groupConfig()?.removeFromGroup ?? (() => undefined);
+ const newValue = remove(
+ this.groupMap[key].value,
+ this.viewManager.cellGetJsonValue(rowId, columnId)
+ );
+ this.viewManager.cellUpdateValue(rowId, columnId, newValue);
+ }
+
+ changeCardSort(groupKey: string, cardIds: string[]) {
+ this.ops.changeRowSort(
+ this.groups.map(v => v.key),
+ groupKey,
+ cardIds
+ );
+ }
+
+ changeGroupSort(keys: string[]) {
+ this.ops.changeGroupSort(keys);
+ }
+
+ public moveGroupTo(groupKey: string, position: InsertPosition) {
+ const keys = this.groups.map(v => v.key);
+ keys.splice(
+ keys.findIndex(key => key === groupKey),
+ 1
+ );
+ const index = insertPositionToIndex(position, keys, key => key);
+ keys.splice(index, 0, groupKey);
+ this.changeGroupSort(keys);
+ }
+
+ moveCardTo(
+ rowId: string,
+ fromGroupKey: string | undefined,
+ toGroupKey: string,
+ position: InsertPosition
+ ) {
+ if (fromGroupKey !== toGroupKey) {
+ const columnId = this.columnId;
+ const remove = this.groupConfig()?.removeFromGroup ?? (() => undefined);
+ const group =
+ fromGroupKey != null ? this.groupMap[fromGroupKey] : undefined;
+ let newValue: unknown = undefined;
+ if (group) {
+ newValue = remove(
+ group.value,
+ this.viewManager.cellGetJsonValue(rowId, columnId)
+ );
+ }
+ const addTo = this.groupConfig()?.addToGroup ?? (value => value);
+ newValue = addTo(this.groupMap[toGroupKey].value, newValue);
+ this.viewManager.cellUpdateValue(rowId, columnId, newValue);
+ }
+ const rows = this.groupMap[toGroupKey].rows.filter(id => id !== rowId);
+ const index = insertPositionToIndex(position, rows, id => id);
+ rows.splice(index, 0, rowId);
+ this.changeCardSort(toGroupKey, rows);
+ }
+ get addGroup() {
+ return this.viewManager.columnConfigManager.getColumn(this.column.type).ops
+ .addGroup;
+ }
+}
+export const sortByManually = <T>(
+ arr: T[],
+ getId: (v: T) => string,
+ ids: string[]
+) => {
+ const map = new Map(arr.map(v => [getId(v), v]));
+ const result: T[] = [];
+ for (const id of ids) {
+ const value = map.get(id);
+ if (value) {
+ map.delete(id);
+ result.push(value);
+ }
+ }
+ result.push(...map.values());
+ return result;
+};