(null);
+ const open = Boolean(anchorEl);
+
+ if (!filter) return null;
+
+ return (
+ <>
+ {
+ setAnchorEl(e.currentTarget);
+ }}
+ className={
+ 'flex cursor-pointer flex-nowrap items-center gap-1 rounded-full border border-line-divider py-1 px-2 hover:border-fill-default hover:text-fill-default hover:shadow-sm'
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default CheckboxFilterMenu;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/ChecklistFilterMenu.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/ChecklistFilterMenu.tsx
new file mode 100644
index 0000000000..5d6398b242
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/ChecklistFilterMenu.tsx
@@ -0,0 +1,33 @@
+import { ChecklistFilter, ChecklistFilterCondition } from '@/application/database-yjs';
+import FieldMenuTitle from '@/components/database/components/filters/filter-menu/FieldMenuTitle';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function ChecklistFilterMenu({ filter }: { filter: ChecklistFilter }) {
+ const { t } = useTranslation();
+
+ const conditions = useMemo(
+ () => [
+ {
+ value: ChecklistFilterCondition.IsComplete,
+ text: t('grid.checklistFilter.isComplete'),
+ },
+ {
+ value: ChecklistFilterCondition.IsIncomplete,
+ text: t('grid.checklistFilter.isIncomplted'),
+ },
+ ],
+ [t]
+ );
+ const selectedCondition = useMemo(() => {
+ return conditions.find((c) => c.value === filter.condition);
+ }, [filter.condition, conditions]);
+
+ return (
+
+
+
+ );
+}
+
+export default ChecklistFilterMenu;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/FieldMenuTitle.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/FieldMenuTitle.tsx
new file mode 100644
index 0000000000..e5784b44f5
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/FieldMenuTitle.tsx
@@ -0,0 +1,23 @@
+import { ReactComponent as ArrowDownSvg } from '$icons/16x/arrow_down.svg';
+import { FieldDisplay } from '@/components/database/components/field';
+import React from 'react';
+
+function FieldMenuTitle({ fieldId, selectedConditionText }: { fieldId: string; selectedConditionText: string }) {
+ return (
+
+
+
+
+
+
+
+ {selectedConditionText}
+
+
+
+
+
+
+ {displaySelectOptionList && }
+
+ );
+}
+
+export default MultiSelectOptionFilterMenu;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/NumberFilterMenu.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/NumberFilterMenu.tsx
new file mode 100644
index 0000000000..fdd8963ef2
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/NumberFilterMenu.tsx
@@ -0,0 +1,74 @@
+import { NumberFilter, NumberFilterCondition, useReadOnly } from '@/application/database-yjs';
+import FieldMenuTitle from '@/components/database/components/filters/filter-menu/FieldMenuTitle';
+import { TextField } from '@mui/material';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function NumberFilterMenu({ filter }: { filter: NumberFilter }) {
+ const { t } = useTranslation();
+ const readOnly = useReadOnly();
+ const conditions = useMemo(() => {
+ return [
+ {
+ value: NumberFilterCondition.Equal,
+ text: t('grid.numberFilter.equal'),
+ },
+ {
+ value: NumberFilterCondition.NotEqual,
+ text: t('grid.numberFilter.notEqual'),
+ },
+ {
+ value: NumberFilterCondition.GreaterThan,
+ text: t('grid.numberFilter.greaterThan'),
+ },
+ {
+ value: NumberFilterCondition.LessThan,
+ text: t('grid.numberFilter.lessThan'),
+ },
+ {
+ value: NumberFilterCondition.GreaterThanOrEqualTo,
+ text: t('grid.numberFilter.greaterThanOrEqualTo'),
+ },
+ {
+ value: NumberFilterCondition.LessThanOrEqualTo,
+ text: t('grid.numberFilter.lessThanOrEqualTo'),
+ },
+ {
+ value: NumberFilterCondition.NumberIsEmpty,
+ text: t('grid.textFilter.isEmpty'),
+ },
+ {
+ value: NumberFilterCondition.NumberIsNotEmpty,
+ text: t('grid.textFilter.isNotEmpty'),
+ },
+ ];
+ }, [t]);
+
+ const selectedCondition = useMemo(() => {
+ return conditions.find((c) => c.value === filter.condition);
+ }, [filter.condition, conditions]);
+
+ const displayTextField = useMemo(() => {
+ return ![NumberFilterCondition.NumberIsEmpty, NumberFilterCondition.NumberIsNotEmpty].includes(filter.condition);
+ }, [filter.condition]);
+
+ return (
+
+
+ {displayTextField && (
+
+ )}
+
+ );
+}
+
+export default NumberFilterMenu;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/SingleSelectOptionFilterMenu.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/SingleSelectOptionFilterMenu.tsx
new file mode 100644
index 0000000000..217ad8d1ae
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/SingleSelectOptionFilterMenu.tsx
@@ -0,0 +1,48 @@
+import { SelectOptionFilter, SelectOptionFilterCondition } from '@/application/database-yjs';
+import { SelectOptionList } from '@/components/database/components/field/select-option';
+import FieldMenuTitle from '@/components/database/components/filters/filter-menu/FieldMenuTitle';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function SingleSelectOptionFilterMenu({ filter }: { filter: SelectOptionFilter }) {
+ const { t } = useTranslation();
+ const conditions = useMemo(() => {
+ return [
+ {
+ value: SelectOptionFilterCondition.OptionIs,
+ text: t('grid.selectOptionFilter.is'),
+ },
+ {
+ value: SelectOptionFilterCondition.OptionIsNot,
+ text: t('grid.selectOptionFilter.isNot'),
+ },
+ {
+ value: SelectOptionFilterCondition.OptionIsEmpty,
+ text: t('grid.selectOptionFilter.isEmpty'),
+ },
+ {
+ value: SelectOptionFilterCondition.OptionIsNotEmpty,
+ text: t('grid.selectOptionFilter.isNotEmpty'),
+ },
+ ];
+ }, [t]);
+
+ const selectedCondition = useMemo(() => {
+ return conditions.find((c) => c.value === filter.condition);
+ }, [filter.condition, conditions]);
+
+ const displaySelectOptionList = useMemo(() => {
+ return ![SelectOptionFilterCondition.OptionIsEmpty, SelectOptionFilterCondition.OptionIsNotEmpty].includes(
+ filter.condition
+ );
+ }, [filter.condition]);
+
+ return (
+
+
+ {displaySelectOptionList && }
+
+ );
+}
+
+export default SingleSelectOptionFilterMenu;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/TextFilterMenu.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/TextFilterMenu.tsx
new file mode 100644
index 0000000000..f3ca7690af
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/TextFilterMenu.tsx
@@ -0,0 +1,74 @@
+import { TextFilter, TextFilterCondition, useReadOnly } from '@/application/database-yjs';
+import FieldMenuTitle from '@/components/database/components/filters/filter-menu/FieldMenuTitle';
+import { TextField } from '@mui/material';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function TextFilterMenu({ filter }: { filter: TextFilter }) {
+ const { t } = useTranslation();
+ const readOnly = useReadOnly();
+ const conditions = useMemo(() => {
+ return [
+ {
+ value: TextFilterCondition.TextContains,
+ text: t('grid.textFilter.contains'),
+ },
+ {
+ value: TextFilterCondition.TextDoesNotContain,
+ text: t('grid.textFilter.doesNotContain'),
+ },
+ {
+ value: TextFilterCondition.TextStartsWith,
+ text: t('grid.textFilter.startWith'),
+ },
+ {
+ value: TextFilterCondition.TextEndsWith,
+ text: t('grid.textFilter.endsWith'),
+ },
+ {
+ value: TextFilterCondition.TextIs,
+ text: t('grid.textFilter.is'),
+ },
+ {
+ value: TextFilterCondition.TextIsNot,
+ text: t('grid.textFilter.isNot'),
+ },
+ {
+ value: TextFilterCondition.TextIsEmpty,
+ text: t('grid.textFilter.isEmpty'),
+ },
+ {
+ value: TextFilterCondition.TextIsNotEmpty,
+ text: t('grid.textFilter.isNotEmpty'),
+ },
+ ];
+ }, [t]);
+
+ const selectedCondition = useMemo(() => {
+ return conditions.find((c) => c.value === filter.condition);
+ }, [filter.condition, conditions]);
+
+ const displayTextField = useMemo(() => {
+ return ![TextFilterCondition.TextIsEmpty, TextFilterCondition.TextIsNotEmpty].includes(filter.condition);
+ }, [filter.condition]);
+
+ return (
+
+
+ {displayTextField && (
+
+ )}
+
+ );
+}
+
+export default TextFilterMenu;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/index.ts b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/index.ts
new file mode 100644
index 0000000000..fc54ea0f3a
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/filter-menu/index.ts
@@ -0,0 +1 @@
+export * from './FilterMenu';
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/index.ts b/frontend/appflowy_web_app/src/components/database/components/filters/index.ts
new file mode 100644
index 0000000000..c7b59bcd2f
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/index.ts
@@ -0,0 +1 @@
+export * from './Filters';
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/overview/DateFilterContentOverview.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/overview/DateFilterContentOverview.tsx
new file mode 100644
index 0000000000..d3a30e1844
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/overview/DateFilterContentOverview.tsx
@@ -0,0 +1,51 @@
+import { DateFilter, DateFilterCondition } from '@/application/database-yjs';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+
+function DateFilterContentOverview({ filter }: { filter: DateFilter }) {
+ const { t } = useTranslation();
+
+ const value = useMemo(() => {
+ if (!filter.timestamp) return '';
+
+ let startStr = '';
+ let endStr = '';
+
+ if (filter.start) {
+ const end = filter.end ?? filter.start;
+ const moreThanOneYear = dayjs.unix(end).diff(dayjs.unix(filter.start), 'year') > 1;
+ const format = moreThanOneYear ? 'MMM D, YYYY' : 'MMM D';
+
+ startStr = dayjs.unix(filter.start).format(format);
+ endStr = dayjs.unix(end).format(format);
+ }
+
+ const timestamp = dayjs.unix(filter.timestamp).format('MMM D');
+
+ switch (filter.condition) {
+ case DateFilterCondition.DateIs:
+ return `: ${timestamp}`;
+ case DateFilterCondition.DateBefore:
+ return `: ${t('grid.dateFilter.choicechipPrefix.before')} ${timestamp}`;
+ case DateFilterCondition.DateAfter:
+ return `: ${t('grid.dateFilter.choicechipPrefix.after')} ${timestamp}`;
+ case DateFilterCondition.DateOnOrBefore:
+ return `: ${t('grid.dateFilter.choicechipPrefix.onOrBefore')} ${timestamp}`;
+ case DateFilterCondition.DateOnOrAfter:
+ return `: ${t('grid.dateFilter.choicechipPrefix.onOrAfter')} ${timestamp}`;
+ case DateFilterCondition.DateWithIn:
+ return `: ${startStr} - ${endStr}`;
+ case DateFilterCondition.DateIsEmpty:
+ return `: ${t('grid.dateFilter.choicechipPrefix.isEmpty')}`;
+ case DateFilterCondition.DateIsNotEmpty:
+ return `: ${t('grid.dateFilter.choicechipPrefix.isNotEmpty')}`;
+ default:
+ return '';
+ }
+ }, [filter, t]);
+
+ return <>{value};
+}
+
+export default DateFilterContentOverview;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/overview/FilterContentOverview.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/overview/FilterContentOverview.tsx
new file mode 100644
index 0000000000..9f6d1ea188
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/overview/FilterContentOverview.tsx
@@ -0,0 +1,59 @@
+import { YjsDatabaseKey } from '@/application/collab.type';
+import {
+ CheckboxFilterCondition,
+ ChecklistFilterCondition,
+ FieldType,
+ Filter,
+ SelectOptionFilter,
+ useFieldSelector,
+} from '@/application/database-yjs';
+import DateFilterContentOverview from '@/components/database/components/filters/overview/DateFilterContentOverview';
+import NumberFilterContentOverview from '@/components/database/components/filters/overview/NumberFilterContentOverview';
+import SelectFilterContentOverview from '@/components/database/components/filters/overview/SelectFilterContentOverview';
+import TextFilterContentOverview from '@/components/database/components/filters/overview/TextFilterContentOverview';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function FilterContentOverview({ filter }: { filter: Filter }) {
+ const { field } = useFieldSelector(filter?.fieldId);
+ const fieldType = Number(field?.get(YjsDatabaseKey.type)) as FieldType;
+ const { t } = useTranslation();
+
+ return useMemo(() => {
+ if (!field) return null;
+ switch (fieldType) {
+ case FieldType.RichText:
+ case FieldType.URL:
+ return ;
+ case FieldType.Number:
+ return ;
+ case FieldType.DateTime:
+ case FieldType.LastEditedTime:
+ case FieldType.CreatedTime:
+ return ;
+ case FieldType.SingleSelect:
+ case FieldType.MultiSelect:
+ return ;
+ case FieldType.Checkbox:
+ return (
+ <>
+ : {t('grid.checkboxFilter.choicechipPrefix.is')}{' '}
+ {filter.condition === CheckboxFilterCondition.IsChecked
+ ? t('grid.checkboxFilter.isChecked')
+ : t('grid.checkboxFilter.isUnchecked')}
+
+ );
+ case FieldType.Checklist:
+ return (
+ <>
+ :{' '}
+ {filter.condition === ChecklistFilterCondition.IsComplete
+ ? t('grid.checklistFilter.isComplete')
+ : t('grid.checklistFilter.isIncomplted')}
+
+ );
+ default:
+ return null;
+ }
+ }, [field, fieldType, filter, t]);
+}
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/overview/NumberFilterContentOverview.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/overview/NumberFilterContentOverview.tsx
new file mode 100644
index 0000000000..64864541e7
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/overview/NumberFilterContentOverview.tsx
@@ -0,0 +1,38 @@
+import { NumberFilter, NumberFilterCondition } from '@/application/database-yjs';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function NumberFilterContentOverview({ filter }: { filter: NumberFilter }) {
+ const { t } = useTranslation();
+
+ const value = useMemo(() => {
+ if (!filter.content) {
+ return '';
+ }
+
+ const content = parseInt(filter.content);
+
+ switch (filter.condition) {
+ case NumberFilterCondition.Equal:
+ return `= ${content}`;
+ case NumberFilterCondition.NotEqual:
+ return `!= ${content}`;
+ case NumberFilterCondition.GreaterThan:
+ return `> ${content}`;
+ case NumberFilterCondition.GreaterThanOrEqualTo:
+ return `>= ${content}`;
+ case NumberFilterCondition.LessThan:
+ return `< ${content}`;
+ case NumberFilterCondition.LessThanOrEqualTo:
+ return `<= ${content}`;
+ case NumberFilterCondition.NumberIsEmpty:
+ return t('grid.textFilter.isEmpty');
+ case NumberFilterCondition.NumberIsNotEmpty:
+ return t('grid.textFilter.isNotEmpty');
+ }
+ }, [filter.condition, filter.content, t]);
+
+ return <>{value};
+}
+
+export default NumberFilterContentOverview;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/overview/SelectFilterContentOverview.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/overview/SelectFilterContentOverview.tsx
new file mode 100644
index 0000000000..64e8ddc00c
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/overview/SelectFilterContentOverview.tsx
@@ -0,0 +1,42 @@
+import { YDatabaseField } from '@/application/collab.type';
+import {
+ parseSelectOptionTypeOptions,
+ SelectOptionFilter,
+ SelectOptionFilterCondition,
+} from '@/application/database-yjs';
+import React, { useMemo } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+function SelectFilterContentOverview({ filter, field }: { filter: SelectOptionFilter; field: YDatabaseField }) {
+ const typeOption = parseSelectOptionTypeOptions(field);
+ const { t } = useTranslation();
+ const value = useMemo(() => {
+ if (!filter.optionIds?.length) return '';
+
+ const options = filter.optionIds
+ .map((optionId) => {
+ const option = typeOption?.options?.find((option) => option.id === optionId);
+
+ return option?.name;
+ })
+ .join(', ');
+
+ switch (filter.condition) {
+ case SelectOptionFilterCondition.OptionIs:
+ return `: ${options}`;
+ case SelectOptionFilterCondition.OptionIsNot:
+ return `: ${t('grid.textFilter.choicechipPrefix.isNot')} ${options}`;
+ case SelectOptionFilterCondition.OptionIsEmpty:
+ return `: ${t('grid.textFilter.choicechipPrefix.isEmpty')}`;
+ case SelectOptionFilterCondition.OptionIsNotEmpty:
+ return `: ${t('grid.textFilter.choicechipPrefix.isNotEmpty')}`;
+ default:
+ return '';
+ }
+ }, [filter.condition, filter.optionIds, t, typeOption?.options]);
+
+ return <>{value};
+}
+
+export default SelectFilterContentOverview;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/overview/TextFilterContentOverview.tsx b/frontend/appflowy_web_app/src/components/database/components/filters/overview/TextFilterContentOverview.tsx
new file mode 100644
index 0000000000..fc03b39c96
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/overview/TextFilterContentOverview.tsx
@@ -0,0 +1,33 @@
+import { TextFilter, TextFilterCondition } from '@/application/database-yjs';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function TextFilterContentOverview({ filter }: { filter: TextFilter }) {
+ const { t } = useTranslation();
+
+ const value = useMemo(() => {
+ if (!filter.content) return '';
+ switch (filter.condition) {
+ case TextFilterCondition.TextContains:
+ case TextFilterCondition.TextIs:
+ return `: ${filter.content}`;
+ case TextFilterCondition.TextDoesNotContain:
+ case TextFilterCondition.TextIsNot:
+ return `: ${t('grid.textFilter.choicechipPrefix.isNot')} ${filter.content}`;
+ case TextFilterCondition.TextStartsWith:
+ return `: ${t('grid.textFilter.choicechipPrefix.startWith')} ${filter.content}`;
+ case TextFilterCondition.TextEndsWith:
+ return `: ${t('grid.textFilter.choicechipPrefix.endWith')} ${filter.content}`;
+ case TextFilterCondition.TextIsEmpty:
+ return `: ${t('grid.textFilter.choicechipPrefix.isEmpty')}`;
+ case TextFilterCondition.TextIsNotEmpty:
+ return `: ${t('grid.textFilter.choicechipPrefix.isNotEmpty')}`;
+ default:
+ return '';
+ }
+ }, [t, filter]);
+
+ return <>{value};
+}
+
+export default TextFilterContentOverview;
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/overview/index.ts b/frontend/appflowy_web_app/src/components/database/components/filters/overview/index.ts
new file mode 100644
index 0000000000..47e041409e
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/overview/index.ts
@@ -0,0 +1 @@
+export * from './FilterContentOverview';
diff --git a/frontend/appflowy_web_app/src/components/database/components/filters/package.json b/frontend/appflowy_web_app/src/components/database/components/filters/package.json
new file mode 100644
index 0000000000..e56f3198c9
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/filters/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "filters",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/qinluhe/AppFlowy.git"
+ },
+ "private": true
+}
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid-cell/GridCell.tsx b/frontend/appflowy_web_app/src/components/database/components/grid-cell/GridCell.tsx
new file mode 100644
index 0000000000..b9a5017b38
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/grid-cell/GridCell.tsx
@@ -0,0 +1,64 @@
+import { FieldId, YjsDatabaseKey } from '@/application/collab.type';
+import { useRowMeta } from '@/application/database-yjs';
+import { useFieldSelector } from '@/application/database-yjs/selector';
+import { Cell } from '@/components/database/components/cell';
+import { parseYDatabaseCellToCell } from '@/components/database/components/cell/cell.parse';
+import React, { useEffect, useState } from 'react';
+
+export interface GridCellProps {
+ rowId: string;
+ fieldId: FieldId;
+ columnIndex: number;
+ rowIndex: number;
+ onResize?: (rowIndex: number, columnIndex: number, size: { width: number; height: number }) => void;
+}
+
+export function GridCell({ onResize, rowId, fieldId, columnIndex, rowIndex }: GridCellProps) {
+ const ref = React.useRef(null);
+ const field = useFieldSelector(fieldId);
+ const row = useRowMeta(rowId);
+ const cell = row?.get(YjsDatabaseKey.cells)?.get(fieldId);
+ const [cellValue, setCellValue] = useState(() => (cell ? parseYDatabaseCellToCell(cell) : undefined));
+
+ useEffect(() => {
+ if (!cell) return;
+ setCellValue(parseYDatabaseCellToCell(cell));
+ const observerEvent = () => setCellValue(parseYDatabaseCellToCell(cell));
+
+ cell.observe(observerEvent);
+
+ return () => {
+ cell.unobserve(observerEvent);
+ };
+ }, [cell]);
+
+ useEffect(() => {
+ const el = ref.current;
+
+ if (!el) return;
+
+ const observer = new ResizeObserver(() => {
+ if (onResize) {
+ onResize(rowIndex, columnIndex, {
+ width: el.offsetWidth,
+ height: el.offsetHeight,
+ });
+ }
+ });
+
+ observer.observe(el);
+
+ return () => {
+ observer.disconnect();
+ };
+ }, [columnIndex, onResize, rowIndex]);
+
+ if (!field) return null;
+ return (
+
+ |
+
+ );
+}
+
+export default GridCell;
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid-cell/index.ts b/frontend/appflowy_web_app/src/components/database/components/grid-cell/index.ts
new file mode 100644
index 0000000000..2b6d663ef5
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/grid-cell/index.ts
@@ -0,0 +1 @@
+export * from './GridCell';
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid-column/GridColumn.tsx b/frontend/appflowy_web_app/src/components/database/components/grid-column/GridColumn.tsx
new file mode 100644
index 0000000000..88c6fae84e
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/grid-column/GridColumn.tsx
@@ -0,0 +1,35 @@
+import { YjsDatabaseKey } from '@/application/collab.type';
+import { FieldType } from '@/application/database-yjs/database.type';
+import { Column, useFieldSelector } from '@/application/database-yjs/selector';
+import { FieldTypeIcon } from '@/components/database/components/field';
+import React, { useMemo } from 'react';
+
+export function GridColumn({ column, index }: { column: Column; index: number }) {
+ const { field } = useFieldSelector(column.fieldId);
+ const name = field?.get(YjsDatabaseKey.name);
+ const type = useMemo(() => {
+ const type = field?.get(YjsDatabaseKey.type);
+
+ if (!type) return FieldType.RichText;
+
+ return parseInt(type) as FieldType;
+ }, [field]);
+
+ return (
+
+ );
+}
+
+export default GridColumn;
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid-column/index.ts b/frontend/appflowy_web_app/src/components/database/components/grid-column/index.ts
new file mode 100644
index 0000000000..6de83c7026
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/grid-column/index.ts
@@ -0,0 +1,2 @@
+export * from './GridColumn';
+export * from './useRenderColumns';
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid-column/useRenderColumns.tsx b/frontend/appflowy_web_app/src/components/database/components/grid-column/useRenderColumns.tsx
new file mode 100644
index 0000000000..c0041b5c5e
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/grid-column/useRenderColumns.tsx
@@ -0,0 +1,73 @@
+import { FieldId } from '@/application/collab.type';
+import { FieldVisibility } from '@/application/database-yjs/database.type';
+import { useGridColumnsSelector } from '@/application/database-yjs/selector';
+import { useCallback, useMemo } from 'react';
+
+export enum GridColumnType {
+ Action,
+ Field,
+ NewProperty,
+}
+
+const defaultVisibilitys = [FieldVisibility.AlwaysShown, FieldVisibility.HideWhenEmpty];
+
+export type RenderColumn = {
+ type: GridColumnType;
+ visibility?: FieldVisibility;
+ fieldId?: FieldId;
+ width: number;
+ wrap?: boolean;
+};
+
+export function useRenderColumns(viewId: string) {
+ const columns = useGridColumnsSelector(viewId, defaultVisibilitys);
+
+ console.log('columns', columns);
+ const renderColumns = useMemo(() => {
+ const fields = columns.map((column) => ({
+ ...column,
+ type: GridColumnType.Field,
+ }));
+
+ return [
+ {
+ type: GridColumnType.Action,
+ width: 96,
+ },
+ ...fields,
+ {
+ type: GridColumnType.NewProperty,
+ width: 150,
+ },
+ {
+ type: GridColumnType.Action,
+ width: 96,
+ },
+ ].filter(Boolean) as RenderColumn[];
+ }, [columns]);
+
+ const columnWidth = useCallback(
+ (index: number, containerWidth: number) => {
+ const { type, width } = renderColumns[index];
+
+ if (type === GridColumnType.NewProperty) {
+ const totalWidth = renderColumns.reduce((acc, column) => acc + column.width, 0);
+ const remainingWidth = containerWidth - totalWidth;
+
+ return remainingWidth > 0 ? remainingWidth + width : width;
+ }
+
+ if (type === GridColumnType.Action && containerWidth < 800) {
+ return 16;
+ }
+
+ return width;
+ },
+ [renderColumns]
+ );
+
+ return {
+ columns: renderColumns,
+ columnWidth,
+ };
+}
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid-header/GridHeader.tsx b/frontend/appflowy_web_app/src/components/database/components/grid-header/GridHeader.tsx
new file mode 100644
index 0000000000..64d0c39117
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/grid-header/GridHeader.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { GridChildComponentProps, VariableSizeGrid } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { GridColumnType, RenderColumn, GridColumn } from '../grid-column';
+
+export interface GridHeaderProps {
+ onScrollLeft: (left: number) => void;
+ columnWidth: (index: number, totalWidth: number) => number;
+ columns: RenderColumn[];
+ scrollLeft?: number;
+}
+
+export const GridHeader = ({ scrollLeft, onScrollLeft, columnWidth, columns }: GridHeaderProps) => {
+ const ref = useRef(null);
+ const Cell = useCallback(({ columnIndex, style, data }: GridChildComponentProps) => {
+ const column = data[columnIndex];
+
+ // Placeholder for Action toolbar
+ if (!column || column.type === GridColumnType.Action) return ;
+
+ if (column.type === GridColumnType.Field) {
+ return (
+
+
+
+ );
+ }
+
+ return ;
+ }, []);
+
+ useEffect(() => {
+ if (ref.current) {
+ ref.current.scrollTo({ scrollLeft });
+ }
+ }, [scrollLeft]);
+
+ useEffect(() => {
+ if (ref.current) {
+ ref.current?.resetAfterIndices({ columnIndex: 0, rowIndex: 0 });
+ }
+ }, [columns]);
+
+ return (
+
+
+ {({ height, width }: { height: number; width: number }) => {
+ return (
+ 36}
+ rowCount={1}
+ columnCount={columns.length}
+ columnWidth={(index) => columnWidth(index, width)}
+ ref={ref}
+ onScroll={(props) => {
+ onScrollLeft(props.scrollLeft);
+ }}
+ itemData={columns}
+ style={{ overscrollBehavior: 'none' }}
+ >
+ {Cell}
+
+ );
+ }}
+
+
+
+
+ );
+ }
+
+ if (row.type === RenderRowType.CalculateRow && column.fieldId) {
+ return (
+
+
+
+ );
+ }
+
+ return ;
+ },
+ [onResize]
+ );
+
+ return (
+
+ {({ height, width }: { height: number; width: number }) => (
+ onScrollLeft(scrollLeft)}
+ rowCount={rows.length}
+ columnCount={columns.length}
+ columnWidth={(index) => columnWidth(index, width)}
+ rowHeight={rowHeight}
+ overscanRowCount={5}
+ overscanColumnCount={5}
+ style={{
+ overscrollBehavior: 'none',
+ }}
+ itemKey={getItemKey}
+ itemData={{ columns, rows }}
+ outerElementType={AFScroller}
+ >
+ {Cell}
+
+ )}
+
+ );
+};
+
+export default GridTable;
diff --git a/frontend/appflowy_web_app/src/components/database/components/grid-table/index.ts b/frontend/appflowy_web_app/src/components/database/components/grid-table/index.ts
new file mode 100644
index 0000000000..49518fa391
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/grid-table/index.ts
@@ -0,0 +1 @@
+export * from './GridTable';
diff --git a/frontend/appflowy_web_app/src/components/database/components/sorts/Sort.tsx b/frontend/appflowy_web_app/src/components/database/components/sorts/Sort.tsx
new file mode 100644
index 0000000000..37575224ac
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/sorts/Sort.tsx
@@ -0,0 +1,20 @@
+import { useSortSelector } from '@/application/database-yjs';
+import SortCondition from '@/components/database/components/sorts/SortCondition';
+import React from 'react';
+import { FieldDisplay } from 'src/components/database/components/field';
+
+function Sort({ sortId }: { sortId: string }) {
+ const sort = useSortSelector(sortId);
+
+ if (!sort) return null;
+ return (
+
+ );
+}
+
+export default Sort;
diff --git a/frontend/appflowy_web_app/src/components/database/components/sorts/SortCondition.tsx b/frontend/appflowy_web_app/src/components/database/components/sorts/SortCondition.tsx
new file mode 100644
index 0000000000..78457da1ca
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/sorts/SortCondition.tsx
@@ -0,0 +1,30 @@
+import { Sort } from '@/application/database-yjs';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ReactComponent as ArrowDownSvg } from '$icons/16x/arrow_down.svg';
+
+function SortCondition({ sort }: { sort: Sort }) {
+ const condition = sort.condition;
+ const { t } = useTranslation();
+ const conditionText = useMemo(() => {
+ switch (condition) {
+ case 0:
+ return t('grid.sort.ascending');
+ case 1:
+ return t('grid.sort.descending');
+ }
+ }, [condition, t]);
+
+ return (
+
+ );
+}
+
+export default SortCondition;
diff --git a/frontend/appflowy_web_app/src/components/database/components/sorts/SortList.tsx b/frontend/appflowy_web_app/src/components/database/components/sorts/SortList.tsx
new file mode 100644
index 0000000000..a657b4a0b9
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/sorts/SortList.tsx
@@ -0,0 +1,17 @@
+import { useSortsSelector } from '@/application/database-yjs';
+import Sort from '@/components/database/components/sorts/Sort';
+import React from 'react';
+
+function SortList() {
+ const sorts = useSortsSelector();
+
+ return (
+
+ {sorts.map((sortId) => (
+
+ ))}
+
+ );
+}
+
+export default SortList;
diff --git a/frontend/appflowy_web_app/src/components/database/components/sorts/Sorts.tsx b/frontend/appflowy_web_app/src/components/database/components/sorts/Sorts.tsx
new file mode 100644
index 0000000000..a00aeea20c
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/sorts/Sorts.tsx
@@ -0,0 +1,43 @@
+import { useSortsSelector } from '@/application/database-yjs';
+import { Popover } from '@/components/_shared/popover';
+import SortList from '@/components/database/components/sorts/SortList';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ReactComponent as SortSvg } from '$icons/16x/sort_ascending.svg';
+import { ReactComponent as ArrowDownSvg } from '$icons/16x/arrow_down.svg';
+
+export function Sorts() {
+ const { t } = useTranslation();
+ const [anchorEl, setAnchorEl] = useState(null);
+ const open = Boolean(anchorEl);
+ const sorts = useSortsSelector();
+
+ if (sorts.length === 0) return null;
+ return (
+ <>
+ {
+ setAnchorEl(e.currentTarget);
+ }}
+ className='flex cursor-pointer items-center gap-1 rounded-full border border-line-divider px-2 py-1 text-xs hover:border-fill-default hover:text-fill-default hover:shadow-sm'
+ >
+
+ {t('grid.settings.sort')}
+
+
+
+
+ {viewIds.map((viewId, index) => {
+ const view = getFolderView(viewId);
+
+ if (!view) return null;
+ const layout = Number(view.get(YjsFolderKey.layout)) as ViewLayout;
+ const Icon = DatabaseIcons[layout];
+ const name = view.get(YjsFolderKey.name);
+
+ return (
+ }
+ iconPosition='start'
+ color='inherit'
+ label={name || t('grid.title.placeholder')}
+ value={viewId}
+ />
+ );
+ })}
+
+
+
+
+ {isActivated ? children : null}
+
+ );
+}
diff --git a/frontend/appflowy_web_app/src/components/database/components/tabs/index.ts b/frontend/appflowy_web_app/src/components/database/components/tabs/index.ts
new file mode 100644
index 0000000000..8d2722a633
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/components/tabs/index.ts
@@ -0,0 +1,2 @@
+export * from './DatabaseTabs';
+export * from './ViewTabs';
diff --git a/frontend/appflowy_web_app/src/components/database/grid/Grid.tsx b/frontend/appflowy_web_app/src/components/database/grid/Grid.tsx
new file mode 100644
index 0000000000..eacb2b725a
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/grid/Grid.tsx
@@ -0,0 +1,45 @@
+import { GridRowsContext, useDatabase, useGridRowOrders, useViewId } from '@/application/database-yjs';
+import { useRenderColumns } from '@/components/database/components/grid-column';
+import { CircularProgress } from '@mui/material';
+import React, { useState } from 'react';
+import { GridHeader } from 'src/components/database/components/grid-header';
+import { GridTable } from 'src/components/database/components/grid-table';
+
+export function Grid() {
+ const database = useDatabase();
+ const [scrollLeft, setScrollLeft] = useState(0);
+ const viewId = useViewId() || '';
+ const { columns, columnWidth } = useRenderColumns(viewId);
+ const rowOrders = useGridRowOrders();
+
+ if (!database || !rowOrders) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+export default Grid;
diff --git a/frontend/appflowy_web_app/src/components/database/grid/index.ts b/frontend/appflowy_web_app/src/components/database/grid/index.ts
new file mode 100644
index 0000000000..762542e7cb
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/grid/index.ts
@@ -0,0 +1 @@
+export * from './Grid';
diff --git a/frontend/appflowy_web_app/src/components/database/index.ts b/frontend/appflowy_web_app/src/components/database/index.ts
new file mode 100644
index 0000000000..8ef9c34dc1
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/database/index.ts
@@ -0,0 +1,3 @@
+import { lazy } from 'react';
+
+export const Database = lazy(() => import('./Database'));
diff --git a/frontend/appflowy_web_app/src/components/editor/CollaborativeEditor.tsx b/frontend/appflowy_web_app/src/components/editor/CollaborativeEditor.tsx
index 83e36b88f8..f55dde01a4 100644
--- a/frontend/appflowy_web_app/src/components/editor/CollaborativeEditor.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/CollaborativeEditor.tsx
@@ -1,9 +1,10 @@
-import { YjsFolderKey } from '@/application/collab.type';
+import { CollabOrigin, YjsFolderKey } from '@/application/collab.type';
import { useViewSelector } from '@/application/folder-yjs';
import { withYjs, YjsEditor } from '@/application/slate-yjs/plugins/withYjs';
import { useId } from '@/components/_shared/context-provider/IdProvider';
import { CustomEditor } from '@/components/editor/command';
import EditorEditable from '@/components/editor/Editable';
+import { useEditorContext } from '@/components/editor/EditorContext';
import { withPlugins } from '@/components/editor/plugins';
import React, { useEffect, useMemo, useState } from 'react';
import { createEditor, Descendant } from 'slate';
@@ -13,7 +14,13 @@ import * as Y from 'yjs';
const defaultInitialValue: Descendant[] = [];
function CollaborativeEditor({ doc }: { doc: Y.Doc }) {
- const editor = useMemo(() => doc && (withPlugins(withReact(withYjs(createEditor(), doc))) as YjsEditor), [doc]);
+ const context = useEditorContext();
+ // if readOnly, collabOrigin is Local, otherwise RemoteSync
+ const collabOrigin = context.readOnly ? CollabOrigin.Local : CollabOrigin.LocalSync;
+ const editor = useMemo(
+ () => doc && (withPlugins(withReact(withYjs(createEditor(), doc, collabOrigin))) as YjsEditor),
+ [doc, collabOrigin]
+ );
const [connected, setIsConnected] = useState(false);
const viewId = useId()?.objectId || '';
const { view } = useViewSelector(viewId);
diff --git a/frontend/appflowy_web_app/src/components/editor/command/index.ts b/frontend/appflowy_web_app/src/components/editor/command/index.ts
index dc4668760c..d4ee1a6e28 100644
--- a/frontend/appflowy_web_app/src/components/editor/command/index.ts
+++ b/frontend/appflowy_web_app/src/components/editor/command/index.ts
@@ -24,7 +24,10 @@ export const CustomEditor = {
}
if (node.type === InlineBlockType.Mention && (node.data as Mention)?.type === MentionType.Date) {
- return renderDate((node.data as Mention).date || '');
+ const date = (node.data as Mention).date || '';
+ const isUnix = date?.length === 10;
+
+ return renderDate(date, 'MMM DD, YYYY', isUnix);
}
}
diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageEmpty.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageEmpty.tsx
index ab95cbe37d..32ea2881f9 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageEmpty.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageEmpty.tsx
@@ -1,6 +1,6 @@
import { ImageBlockNode } from '@/components/editor/editor.type';
import React from 'react';
-import { ReactComponent as ImageIcon } from '@/assets/image.svg';
+import { ReactComponent as ImageIcon } from '$icons/16x/image.svg';
import { useTranslation } from 'react-i18next';
function ImageEmpty(_: { containerRef: React.RefObject; onEscape: () => void; node: ImageBlockNode }) {
diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/todo_list/CheckboxIcon.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/todo_list/CheckboxIcon.tsx
index aad5969e86..007903b89a 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/todo_list/CheckboxIcon.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/todo_list/CheckboxIcon.tsx
@@ -1,7 +1,7 @@
import { TodoListNode } from '@/components/editor/editor.type';
import React from 'react';
-import { ReactComponent as CheckboxCheckSvg } from '@/assets/database/checkbox-check.svg';
-import { ReactComponent as CheckboxUncheckSvg } from '@/assets/database/checkbox-uncheck.svg';
+import { ReactComponent as CheckboxCheckSvg } from '$icons/16x/check_filled.svg';
+import { ReactComponent as CheckboxUncheckSvg } from '$icons/16x/uncheck.svg';
function CheckboxIcon({ block, className }: { block: TodoListNode; className: string }) {
const { checked } = block.data;
diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/toggle_list/ToggleIcon.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/toggle_list/ToggleIcon.tsx
index 4e2735d128..e7a2d288f2 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/toggle_list/ToggleIcon.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/toggle_list/ToggleIcon.tsx
@@ -1,6 +1,6 @@
import { ToggleListNode } from '@/components/editor/editor.type';
import React from 'react';
-import { ReactComponent as RightSvg } from '@/assets/more.svg';
+import { ReactComponent as RightSvg } from '$icons/16x/more.svg';
function ToggleIcon({ block, className }: { block: ToggleListNode; className: string }) {
const { collapsed } = block.data;
diff --git a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx
index fe1e844a4a..c430968b52 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/leaf/mention/MentionDate.tsx
@@ -1,11 +1,11 @@
import { renderDate } from '@/utils/time';
import React, { useMemo } from 'react';
-import { ReactComponent as DateSvg } from '@/assets/date.svg';
-import { ReactComponent as ReminderSvg } from '@/assets/clock_alarm.svg';
+import { ReactComponent as DateSvg } from '$icons/16x/date.svg';
+import { ReactComponent as ReminderSvg } from '$icons/16x/clock_alarm.svg';
function MentionDate({ date, reminder }: { date: string; reminder?: { id: string; option: string } }) {
const dateFormat = useMemo(() => {
- return renderDate(date);
+ return renderDate(date, 'MMM D, YYYY');
}, [date]);
return (
diff --git a/frontend/appflowy_web_app/src/components/error/ErrorModal.tsx b/frontend/appflowy_web_app/src/components/error/ErrorModal.tsx
index c4382c8182..dc8d664a01 100644
--- a/frontend/appflowy_web_app/src/components/error/ErrorModal.tsx
+++ b/frontend/appflowy_web_app/src/components/error/ErrorModal.tsx
@@ -1,6 +1,6 @@
import { ReactComponent as InformationSvg } from '@/assets/information.svg';
-import { ReactComponent as CloseSvg } from '@/assets/close.svg';
-import { Button } from "@mui/material";
+import { ReactComponent as CloseSvg } from '$icons/16x/close.svg';
+import { Button } from '@mui/material';
export const ErrorModal = ({ message, onClose }: { message: string; onClose: () => void }) => {
return (
@@ -22,9 +22,11 @@ export const ErrorModal = ({ message, onClose }: { message: string; onClose: ()
Oops.. something went wrong
{message}
-