feat: support preview the calendar view on web (#5394)

frontend/appflowy_web_app/src/application/collab.type.ts

@@ -244,6 +244,10 @@ export enum YjsDatabaseKey {
  visible = 'visible',
  hide_ungrouped_column = 'hide_ungrouped_column',
  collapse_hidden_groups = 'collapse_hidden_groups',
+ first_day_of_week = 'first_day_of_week',
+ show_week_numbers = 'show_week_numbers',
+ show_weekends = 'show_weekends',
+ layout_ty = 'layout_ty',
 }
 
 export interface YDoc extends Y.Doc {
@@ -434,23 +438,30 @@ export type YDatabaseFilters = Y.Array<YDatabaseFilter>;
 
 export type YDatabaseSorts = Y.Array<YDatabaseSort>;
 
-export type YDatabaseLayoutSettings = Y.Map<YDatabaseLayoutSetting>;
-
 export type YDatabaseCalculations = Y.Array<YDatabaseCalculation>;
 
 export type SortId = string;
 
 export type GroupId = string;
 
-export interface YDatabaseLayoutSetting extends Y.Map<unknown> {
+export interface YDatabaseLayoutSettings extends Y.Map<unknown> {
  // DatabaseViewLayout.Board
- get(key: '2'): YDatabaseBoardLayoutSetting;
+ get(key: '1'): YDatabaseBoardLayoutSetting;
+
+ // DatabaseViewLayout.Calendar
+ get(key: '2'): YDatabaseCalendarLayoutSetting;
 }
 
 export interface YDatabaseBoardLayoutSetting extends Y.Map<unknown> {
  get(key: YjsDatabaseKey.hide_ungrouped_column | YjsDatabaseKey.collapse_hidden_groups): boolean;
 }
 
+export interface YDatabaseCalendarLayoutSetting extends Y.Map<unknown> {
+ get(key: YjsDatabaseKey.first_day_of_week | YjsDatabaseKey.field_id | YjsDatabaseKey.layout_ty): string;
+
+ get(key: YjsDatabaseKey.show_week_numbers | YjsDatabaseKey.show_weekends): boolean;
+}
+
 export interface YDatabaseGroup extends Y.Map<unknown> {
  get(key: YjsDatabaseKey.id): GroupId;
 

frontend/appflowy_web_app/src/application/database-yjs/const.ts

@@ -1,2 +1,16 @@
+import { YDatabaseRow, YDoc, YjsDatabaseKey, YjsEditorKey } from '@/application/collab.type';
+import * as Y from 'yjs';
+
 export const DEFAULT_ROW_HEIGHT = 37;
 export const MIN_COLUMN_WIDTH = 100;
+
+export const getCell = (rowId: string, fieldId: string, rowMetas: Y.Map<YDoc>) => {
+ const rowMeta = rowMetas.get(rowId);
+ const meta = rowMeta?.getMap(YjsEditorKey.data_section).get(YjsEditorKey.database_row) as YDatabaseRow;
+
+ return meta?.get(YjsDatabaseKey.cells)?.get(fieldId);
+};
+
+export const getCellData = (rowId: string, fieldId: string, rowMetas: Y.Map<YDoc>) => {
+ return getCell(rowId, fieldId, rowMetas)?.get(YjsDatabaseKey.data);
+};

frontend/appflowy_web_app/src/application/database-yjs/database.type.ts

@@ -49,3 +49,17 @@ export interface Filter {
  id: string;
  content: string;
 }
+
+export enum CalendarLayout {
+ MonthLayout = 0,
+ WeekLayout = 1,
+ DayLayout = 2,
+}
+
+export interface CalendarLayoutSetting {
+ fieldId: string;
+ firstDayOfWeek: number;
+ showWeekNumbers: boolean;
+ showWeekends: boolean;
+ layout: CalendarLayout;
+}

frontend/appflowy_web_app/src/application/database-yjs/fields/checklist/parse.ts

@@ -9,7 +9,7 @@ export interface ChecklistCellData {
 export function parseChecklistData(data: string): ChecklistCellData | null {
  try {
  const { options, selected_option_ids } = JSON.parse(data);
- const percentage = (selected_option_ids.length / options.length) * 100;
+ const percentage = selected_option_ids.length / options.length;
 
  return {
  percentage,

frontend/appflowy_web_app/src/application/database-yjs/filter.ts

@@ -181,10 +181,10 @@ export function checklistFilterCheck(data: string, content: string, condition: n
  const percentage = parseChecklistData(data)?.percentage ?? 0;
 
  if (condition === ChecklistFilterCondition.IsComplete) {
- return percentage === 100;
+ return percentage === 1;
  }
 
- return percentage !== 100;
+ return percentage !== 1;
 }
 
 export function selectOptionFilterCheck(data: string, content: string, condition: number) {

frontend/appflowy_web_app/src/application/database-yjs/group.ts

@@ -1,4 +1,5 @@
-import { YDatabaseField, YDatabaseRow, YDoc, YjsDatabaseKey, YjsEditorKey } from '@/application/collab.type';
+import { YDatabaseField, YDoc, YjsDatabaseKey } from '@/application/collab.type';
+import { getCellData } from '@/application/database-yjs/const';
 import { FieldType } from '@/application/database-yjs/database.type';
 import { parseSelectOptionTypeOptions } from '@/application/database-yjs/fields';
 import { Row } from '@/application/database-yjs/selector';
@@ -12,13 +13,6 @@ export function groupByField(rows: Row[], rowMetas: Y.Map<YDoc>, field: YDatabas
  return groupBySelectOption(rows, rowMetas, field);
 }
 
-function getCellData(rowId: string, fieldId: string, rowMetas: Y.Map<YDoc>) {
- const rowMeta = rowMetas.get(rowId);
- const meta = rowMeta?.getMap(YjsEditorKey.data_section).get(YjsEditorKey.database_row) as YDatabaseRow;
-
- return meta?.get(YjsDatabaseKey.cells)?.get(fieldId)?.get(YjsDatabaseKey.data);
-}
-
 export function groupBySelectOption(rows: Row[], rowMetas: Y.Map<YDoc>, field: YDatabaseField) {
  const fieldId = field.get(YjsDatabaseKey.id);
  const result = new Map<string, Row[]>();

frontend/appflowy_web_app/src/application/database-yjs/selector.ts

@@ -1,5 +1,5 @@
-import { FieldId, SortId, YDatabaseField, YjsDatabaseKey } from '@/application/collab.type';
-import { MIN_COLUMN_WIDTH } from '@/application/database-yjs/const';
+import { FieldId, SortId, YDatabaseField, YjsDatabaseKey, YjsFolderKey } from '@/application/collab.type';
+import { getCell, MIN_COLUMN_WIDTH } from '@/application/database-yjs/const';
 import {
  DatabaseContext,
  useDatabase,
@@ -13,10 +13,13 @@ import { filterBy, parseFilter } from '@/application/database-yjs/filter';
 import { groupByField } from '@/application/database-yjs/group';
 import { sortBy } from '@/application/database-yjs/sort';
 import { useViewsIdSelector } from '@/application/folder-yjs';
+import { useId } from '@/components/_shared/context-provider/IdProvider';
 import { parseYDatabaseCellToCell } from '@/components/database/components/cell/cell.parse';
+import { DateTimeCell } from '@/components/database/components/cell/cell.type';
+import dayjs from 'dayjs';
 import debounce from 'lodash-es/debounce';
 import { useContext, useEffect, useMemo, useState } from 'react';
-import { FieldType, FieldVisibility, Filter, SortCondition } from './database.type';
+import { CalendarLayoutSetting, FieldType, FieldVisibility, Filter, SortCondition } from './database.type';
 
 export interface Column {
  fieldId: string;
@@ -34,7 +37,8 @@ const defaultVisible = [FieldVisibility.AlwaysShown, FieldVisibility.HideWhenEmp
 
 export function useDatabaseViewsSelector() {
  const database = useDatabase();
- const { viewsId: visibleViewsId } = useViewsIdSelector();
+ const { objectId: currentViewId } = useId();
+ const { viewsId: visibleViewsId, views: folderViews } = useViewsIdSelector();
  const views = database?.get(YjsDatabaseKey.views);
  const [viewIds, setViewIds] = useState<string[]>([]);
  const childViews = useMemo(() => {
@@ -45,7 +49,16 @@ export function useDatabaseViewsSelector() {
  if (!views) return;
 
  const observerEvent = () => {
- setViewIds(Array.from(views.keys()).filter((id) => visibleViewsId.includes(id)));
+ setViewIds(
+ Array.from(views.keys()).filter((id) => {
+ const view = folderViews?.get(id);
+
+ return (
+ visibleViewsId.includes(id) &&
+ (view?.get(YjsFolderKey.bid) === currentViewId || view?.get(YjsFolderKey.id) === currentViewId)
+ );
+ })
+ );
  };
 
  observerEvent();
@@ -54,7 +67,7 @@ export function useDatabaseViewsSelector() {
  return () => {
  views.unobserve(observerEvent);
  };
- }, [visibleViewsId, views]);
+ }, [visibleViewsId, views, folderViews, currentViewId]);
 
  return {
  childViews,
@@ -478,3 +491,97 @@ export function useCellSelector({ rowId, fieldId }: { rowId: string; fieldId: st
 
  return cellValue;
 }
+
+export interface CalendarEvent {
+ start?: Date;
+ end?: Date;
+ id: string;
+}
+
+export function useCalendarEventsSelector() {
+ const setting = useCalendarLayoutSetting();
+ const filedId = setting.fieldId;
+ const { field } = useFieldSelector(filedId);
+ const rowOrders = useRowOrdersSelector();
+ const rows = useContext(DatabaseContext)?.rowDocMap;
+ const [events, setEvents] = useState<CalendarEvent[]>([]);
+ const [emptyEvents, setEmptyEvents] = useState<CalendarEvent[]>([]);
+
+ useEffect(() => {
+ if (!field || !rowOrders || !rows) return;
+ const fieldType = Number(field?.get(YjsDatabaseKey.type)) as FieldType;
+
+ if (fieldType !== FieldType.DateTime) return;
+ const newEvents: CalendarEvent[] = [];
+ const emptyEvents: CalendarEvent[] = [];
+
+ rowOrders?.forEach((row) => {
+ const cell = getCell(row.id, filedId, rows);
+
+ if (!cell) {
+ emptyEvents.push({
+ id: `${row.id}:${filedId}`,
+ });
+ return;
+ }
+
+ const value = parseYDatabaseCellToCell(cell) as DateTimeCell;
+
+ if (!value || !value.data) {
+ emptyEvents.push({
+ id: `${row.id}:${filedId}`,
+ });
+ return;
+ }
+
+ const getDate = (timestamp: string) => {
+ const dayjsResult = timestamp.length === 10 ? dayjs.unix(Number(timestamp)) : dayjs(timestamp);
+
+ return dayjsResult.toDate();
+ };
+
+ newEvents.push({
+ id: `${row.id}:${filedId}`,
+ start: getDate(value.data),
+ end: value.endTimestamp && value.isRange ? getDate(value.endTimestamp) : getDate(value.data),
+ });
+ });
+
+ setEvents(newEvents);
+ setEmptyEvents(emptyEvents);
+ }, [field, rowOrders, rows, filedId]);
+
+ return { events, emptyEvents };
+}
+
+export function useCalendarLayoutSetting() {
+ const view = useDatabaseView();
+ const layoutSetting = view?.get(YjsDatabaseKey.layout_settings)?.get('2');
+ const [setting, setSetting] = useState<CalendarLayoutSetting>({
+ fieldId: '',
+ firstDayOfWeek: 0,
+ showWeekNumbers: true,
+ showWeekends: true,
+ layout: 0,
+ });
+
+ useEffect(() => {
+ const observerHandler = () => {
+ setSetting({
+ fieldId: layoutSetting?.get(YjsDatabaseKey.field_id) as string,
+ firstDayOfWeek: Number(layoutSetting?.get(YjsDatabaseKey.first_day_of_week)),
+ showWeekNumbers: Boolean(layoutSetting?.get(YjsDatabaseKey.show_week_numbers)),
+ showWeekends: Boolean(layoutSetting?.get(YjsDatabaseKey.show_weekends)),
+ layout: Number(layoutSetting?.get(YjsDatabaseKey.layout_ty)),
+ });
+ };
+
+ observerHandler();
+ layoutSetting?.observe(observerHandler);
+ return () => {
+ layoutSetting?.unobserve(observerHandler);
+ };
+ }, [layoutSetting]);
+
+ return setting;
+}

frontend/appflowy_web_app/src/application/folder-yjs/selector.ts

@@ -5,38 +5,39 @@ import { useEffect, useState } from 'react';
 export function useViewsIdSelector() {
  const folder = useFolderContext();
  const [viewsId, setViewsId] = useState<string[]>([]);
+ const views = folder?.get(YjsFolderKey.views);
+ const trash = folder?.get(YjsFolderKey.section)?.get(YjsFolderKey.trash);
+ const meta = folder?.get(YjsFolderKey.meta);
 
  useEffect(() => {
- if (!folder) return;
+ if (!views) return;
 
- const views = folder.get(YjsFolderKey.views);
- const trash = folder.get(YjsFolderKey.section)?.get(YjsFolderKey.trash);
- const meta = folder.get(YjsFolderKey.meta);
- const trashUid = Array.from(trash?.keys())[0];
- const userTrash = trash?.get(trashUid);
+ const trashUid = trash ? Array.from(trash.keys())[0] : null;
+ const userTrash = trashUid ? trash?.get(trashUid) : null;
 
  const collectIds = () => {
  const trashIds = userTrash?.toJSON()?.map((item) => item.id) || [];
 
- return Array.from(views.keys()).filter(
- (id) => !trashIds.includes(id) && id !== meta?.get(YjsFolderKey.current_workspace)
- );
+ return Array.from(views.keys()).filter((id) => {
+ return !trashIds.includes(id) && id !== meta?.get(YjsFolderKey.current_workspace);
+ });
  };
 
  setViewsId(collectIds());
  const observerEvent = () => setViewsId(collectIds());
 
- folder.observe(observerEvent);
- userTrash.observe(observerEvent);
+ views.observe(observerEvent);
+ userTrash?.observe(observerEvent);
 
  return () => {
- folder.unobserve(observerEvent);
- userTrash.unobserve(observerEvent);
+ views.unobserve(observerEvent);
+ userTrash?.unobserve(observerEvent);
  };
- }, [folder]);
+ }, [views, trash, meta]);
 
  return {
  viewsId,
+ views,
  };
 }