feat: calendar view (#1103)

* feat: calendar view

* chore: update lock file

* feat: adapt to missing start or end dates

* chore: update e2e testing

* feat: permissions for calendar events

* feat: calendar adapted to mobile

* fix: the add button for calendar date cells is not displayed

* feat: add a date field dialog when there is no date field in calendar

* fix: clear calendar daily cache when switching views

* fix: incorrect calendar style when refreshing

* fix: calendar title rendering

* fix: calendar daily collection e2e testing in sqlite

* fix: menu rendering in edge cases

Author: Sky-FE

apps/nestjs-backend/src/db-provider/db.provider.interface.ts

@@ -3,6 +3,7 @@ import type { Prisma } from '@teable/db-main-prisma';
 import type { IAggregationField } from '@teable/openapi';
 import type { Knex } from 'knex';
 import type { IFieldInstance } from '../features/field/model/factory';
+import type { DateFieldDto } from '../features/field/model/field-dto/date-field.dto';
 import type { SchemaType } from '../features/field/util';
 import type { IAggregationQueryInterface } from './aggregation-query/aggregation-query.interface';
 import type { BaseQueryAbstract } from './base-query/abstract';
@@ -22,6 +23,13 @@ export type ISortQueryExtra = {
 
 export type IAggregationQueryExtra = { filter?: IFilter; groupBy?: string[] } & IFilterQueryExtra;
 
+export type ICalendarDailyCollectionQueryProps = {
+  startDate: string;
+  endDate: string;
+  startField: DateFieldDto;
+  endField: DateFieldDto;
+};
+
 export interface IDbProvider {
   driver: DriverClient;
 
@@ -146,4 +154,9 @@ export interface IDbProvider {
   ): void;
 
   baseQuery(): BaseQueryAbstract;
+
+  calendarDailyCollectionQuery(
+    qb: Knex.QueryBuilder,
+    props: ICalendarDailyCollectionQueryProps
+  ): Knex.QueryBuilder;
 }

apps/nestjs-backend/src/db-provider/postgres.provider.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { Logger } from '@nestjs/common';
 import type { IFilter, ISortItem } from '@teable/core';
 import { DriverClient } from '@teable/core';
@@ -12,6 +13,7 @@ import type { BaseQueryAbstract } from './base-query/abstract';
 import { BaseQueryPostgres } from './base-query/base-query.postgres';
 import type {
   IAggregationQueryExtra,
+  ICalendarDailyCollectionQueryProps,
   IDbProvider,
   IFilterQueryExtra,
   ISortQueryExtra,
@@ -361,4 +363,54 @@ export class PostgresProvider implements IDbProvider {
   baseQuery(): BaseQueryAbstract {
     return new BaseQueryPostgres(this.knex);
   }
+
+  calendarDailyCollectionQuery(
+    qb: Knex.QueryBuilder,
+    props: ICalendarDailyCollectionQueryProps
+  ): Knex.QueryBuilder {
+    const { startDate, endDate, startField, endField } = props;
+    const timezone = startField.options.formatting.timeZone;
+
+    return qb
+      .select([
+        this.knex.raw('dates.date'),
+        this.knex.raw('COUNT(*) as count'),
+        this.knex.raw(`(array_agg(?? ORDER BY ??))[1:10] as ids`, ['__id', startField.dbFieldName]),
+      ])
+      .crossJoin(
+        this.knex.raw(
+          `(SELECT date::date as date
+      FROM generate_series(
+        (?::timestamptz AT TIME ZONE ?)::date,
+        (?::timestamptz AT TIME ZONE ?)::date,
+        '1 day'::interval
+      ) AS date) as dates`,
+          [startDate, timezone, endDate, timezone]
+        )
+      )
+      .where((builder) => {
+        builder
+          .where(startField.dbFieldName, '<', endDate)
+          .andWhere(
+            this.knex.raw(`COALESCE(??::timestamptz, ??)::timestamptz >= ?::timestamptz`, [
+              endField.dbFieldName,
+              startField.dbFieldName,
+              startDate,
+            ])
+          )
+          .andWhere((subBuilder) => {
+            subBuilder
+              .whereRaw(`(??::timestamptz AT TIME ZONE ?)::date <= dates.date`, [
+                startField.dbFieldName,
+                timezone,
+              ])
+              .andWhereRaw(
+                `(COALESCE(??::timestamptz, ??)::timestamptz AT TIME ZONE ?)::date >= dates.date`,
+                [endField.dbFieldName, startField.dbFieldName, timezone]
+              );
+          });
+      })
+      .groupBy('dates.date')
+      .orderBy('dates.date', 'asc');
+  }
 }

apps/nestjs-backend/src/db-provider/sqlite.provider.ts

@@ -13,6 +13,7 @@ import type { BaseQueryAbstract } from './base-query/abstract';
 import { BaseQuerySqlite } from './base-query/base-query.sqlite';
 import type {
   IAggregationQueryExtra,
+  ICalendarDailyCollectionQueryProps,
   IDbProvider,
   IFilterQueryExtra,
   ISortQueryExtra,
@@ -22,6 +23,7 @@ import { FilterQuerySqlite } from './filter-query/sqlite/filter-query.sqlite';
 import type { IGroupQueryExtra, IGroupQueryInterface } from './group-query/group-query.interface';
 import { GroupQuerySqlite } from './group-query/group-query.sqlite';
 import { SearchQueryAbstract } from './search-query/abstract';
+import { getOffset } from './search-query/get-offset';
 import { SearchQuerySqlite } from './search-query/search-query.sqlite';
 import type { ISortQueryInterface } from './sort-query/sort-query.interface';
 import { SortQuerySqlite } from './sort-query/sqlite/sort-query.sqlite';
@@ -313,4 +315,60 @@ export class SqliteProvider implements IDbProvider {
   baseQuery(): BaseQueryAbstract {
     return new BaseQuerySqlite(this.knex);
   }
+
+  calendarDailyCollectionQuery(
+    qb: Knex.QueryBuilder,
+    props: ICalendarDailyCollectionQueryProps
+  ): Knex.QueryBuilder {
+    const { startDate, endDate, startField, endField } = props;
+    const timezone = startField.options.formatting.timeZone;
+    const offsetStr = `${getOffset(timezone)} hour`;
+
+    const datesSubquery = this.knex.raw(
+      `WITH RECURSIVE dates(date) AS (
+        SELECT date(datetime(?, ?)) as date
+        UNION ALL
+        SELECT date(datetime(date, ?))
+        FROM dates
+        WHERE date < date(datetime(?, ?))
+      )
+      SELECT date FROM dates`,
+      [startDate, offsetStr, '+1 day', endDate, offsetStr]
+    );
+
+    return qb
+      .select([
+        this.knex.raw('d.date'),
+        this.knex.raw('COUNT(*) as count'),
+        this.knex.raw('GROUP_CONCAT(??) as ids', ['__id']),
+      ])
+      .crossJoin(datesSubquery.wrap('(', ') as d'))
+      .where((builder) => {
+        builder
+          .where(this.knex.raw(`datetime(??, ?)`, [endField.dbFieldName, offsetStr]), '<', endDate)
+          .andWhere(
+            this.knex.raw(`datetime(COALESCE(??, ??), ?)`, [
+              endField.dbFieldName,
+              startField.dbFieldName,
+              offsetStr,
+            ]),
+            '>=',
+            startDate
+          );
+      })
+      .andWhere((builder) => {
+        builder.whereRaw(
+          `date(datetime(??, ?)) <= d.date AND date(datetime(COALESCE(??, ??), ?)) >= d.date`,
+          [
+            startField.dbFieldName,
+            offsetStr,
+            endField.dbFieldName,
+            startField.dbFieldName,
+            offsetStr,
+          ]
+        );
+      })
+      .groupBy('d.date')
+      .orderBy('d.date', 'asc');
+  }
 }

apps/nestjs-backend/src/features/aggregation/aggregation.service.ts

@@ -1,7 +1,16 @@
-import { Injectable, Logger, BadRequestException, BadGatewayException } from '@nestjs/common';
+/* eslint-disable sonarjs/no-duplicate-string */
+import {
+  BadGatewayException,
+  BadRequestException,
+  Injectable,
+  InternalServerErrorException,
+  Logger,
+} from '@nestjs/common';
 import type { IGridColumnMeta, IFilter, IGroup } from '@teable/core';
 import {
-  FieldType,
+  CellValueType,
+  identify,
+  IdPrefix,
   mergeWithDefaultFilter,
   nullsToUndefined,
   StatisticsFunc,
@@ -17,12 +26,14 @@ import type {
   IRawAggregationValue,
   IRawRowCountValue,
   IGroupPointsRo,
+  ICalendarDailyCollectionRo,
+  ICalendarDailyCollectionVo,
   ISearchIndexByQueryRo,
   ISearchCountRo,
 } from '@teable/openapi';
 import dayjs from 'dayjs';
 import { Knex } from 'knex';
-import { get, groupBy, isDate, isEmpty, keyBy, orderBy } from 'lodash';
+import { get, groupBy, isDate, isEmpty, isString, keyBy } from 'lodash';
 import { InjectModel } from 'nest-knexjs';
 import { ClsService } from 'nestjs-cls';
 import { IThresholdConfig, ThresholdConfig } from '../../configs/threshold.config';
@@ -32,6 +43,7 @@ import type { IClsStore } from '../../types/cls';
 import { convertValueToStringify, string2Hash } from '../../utils';
 import type { IFieldInstance } from '../field/model/factory';
 import { createFieldInstanceByRaw } from '../field/model/factory';
+import type { DateFieldDto } from '../field/model/field-dto/date-field.dto';
 import { RecordService } from '../record/record.service';
 
 export type IWithView = {
@@ -288,11 +300,26 @@ export class AggregationService {
 
     return nullsToUndefined(
       await this.prisma.view.findFirst({
-        select: { id: true, columnMeta: true, filter: true, group: true },
+        select: {
+          id: true,
+          type: true,
+          filter: true,
+          group: true,
+          options: true,
+          columnMeta: true,
+        },
         where: {
           tableId,
           ...(withView?.viewId ? { id: withView.viewId } : {}),
-          type: { in: [ViewType.Grid, ViewType.Gantt, ViewType.Kanban, ViewType.Gallery] },
+          type: {
+            in: [
+              ViewType.Grid,
+              ViewType.Gantt,
+              ViewType.Kanban,
+              ViewType.Gallery,
+              ViewType.Calendar,
+            ],
+          },
           deletedTime: null,
         },
       })
@@ -735,4 +762,104 @@ export class AggregationService {
       };
     });
   }
+
+  public async getCalendarDailyCollection(
+    tableId: string,
+    query: ICalendarDailyCollectionRo
+  ): Promise<ICalendarDailyCollectionVo> {
+    const { startDate, endDate, startDateFieldId, endDateFieldId, viewId, filter, search } = query;
+
+    if (identify(tableId) !== IdPrefix.Table) {
+      throw new InternalServerErrorException('query collection must be table id');
+    }
+
+    const dbTableName = await this.getDbTableName(this.prisma, tableId);
+    const fields = await this.recordService.getFieldsByProjection(tableId);
+    const fieldMap = fields.reduce(
+      (map, field) => {
+        map[field.id] = field;
+        return map;
+      },
+      {} as Record<string, IFieldInstance>
+    );
+
+    const startField = fieldMap[startDateFieldId];
+
+    if (
+      !startField ||
+      startField.cellValueType !== CellValueType.DateTime ||
+      startField.isMultipleCellValue
+    ) {
+      throw new BadRequestException('Invalid start date field id');
+    }
+
+    const endField = endDateFieldId ? fieldMap[endDateFieldId] : startField;
+
+    if (
+      !endField ||
+      endField.cellValueType !== CellValueType.DateTime ||
+      endField.isMultipleCellValue
+    ) {
+      throw new BadRequestException('Invalid end date field id');
+    }
+
+    const queryBuilder = this.knex(dbTableName);
+    const viewRaw = await this.findView(tableId, { viewId });
+    const filterStr = viewRaw?.filter;
+    const mergedFilter = mergeWithDefaultFilter(filterStr, filter);
+    const currentUserId = this.cls.get('user.id');
+
+    if (mergedFilter) {
+      this.dbProvider
+        .filterQuery(queryBuilder, fieldMap, mergedFilter, { withUserId: currentUserId })
+        .appendQueryBuilder();
+    }
+
+    if (search) {
+      const handledSearch = search ? this.recordService.parseSearch(search, fieldMap) : undefined;
+      queryBuilder.where((builder) => {
+        this.dbProvider.searchQuery(builder, fieldMap, handledSearch);
+      });
+    }
+
+    this.dbProvider.calendarDailyCollectionQuery(queryBuilder, {
+      startDate,
+      endDate,
+      startField: startField as DateFieldDto,
+      endField: endField as DateFieldDto,
+    });
+
+    const result = await this.prisma
+      .txClient()
+      .$queryRawUnsafe<
+        { date: Date | string; count: number; ids: string[] | string }[]
+      >(queryBuilder.toQuery());
+
+    const countMap = result.reduce(
+      (map, item) => {
+        const key = isString(item.date) ? item.date : item.date.toISOString().split('T')[0];
+        map[key] = Number(item.count);
+        return map;
+      },
+      {} as Record<string, number>
+    );
+    let recordIds = result
+      .map((item) => (isString(item.ids) ? item.ids.split(',') : item.ids))
+      .flat();
+    recordIds = Array.from(new Set(recordIds));
+
+    if (!recordIds.length) {
+      return {
+        countMap,
+        records: [],
+      };
+    }
+
+    const { records } = await this.recordService.getRecordsById(tableId, recordIds);
+
+    return {
+      countMap,
+      records,
+    };
+  }
 }

apps/nestjs-backend/src/features/aggregation/open-api/aggregation-open-api.controller.ts

@@ -2,20 +2,23 @@
 import { Controller, Get, Param, Query } from '@nestjs/common';
 import type {
   IAggregationVo,
+  ICalendarDailyCollectionVo,
   IGroupPointsVo,
   IRowCountVo,
   ISearchCountVo,
   ISearchIndexVo,
 } from '@teable/openapi';
 import {
   aggregationRoSchema,
+  calendarDailyCollectionRoSchema,
   groupPointsRoSchema,
   IAggregationRo,
   IGroupPointsRo,
   IQueryBaseRo,
   searchCountRoSchema,
   ISearchCountRo,
   queryBaseSchema,
+  ICalendarDailyCollectionRo,
   ISearchIndexByQueryRo,
   searchIndexByQueryRoSchema,
 } from '@teable/openapi';
@@ -72,4 +75,14 @@ export class AggregationOpenApiController {
   ): Promise<IGroupPointsVo> {
     return await this.aggregationOpenApiService.getGroupPoints(tableId, query);
   }
+
+  @Get('/calendar-daily-collection')
+  @Permissions('table|read')
+  async getCalendarDailyCollection(
+    @Param('tableId') tableId: string,
+    @Query(new ZodValidationPipe(calendarDailyCollectionRoSchema), TqlPipe)
+    query: ICalendarDailyCollectionRo
+  ): Promise<ICalendarDailyCollectionVo> {
+    return await this.aggregationOpenApiService.getCalendarDailyCollection(tableId, query);
+  }
 }