Merge pull request #2097 from teableio/fix/link-date-formattin

nichenqin · web-flow · commit f9a467de9109 · 2025-11-06T21:49:29.000+08:00
fix: fix link date formatting
diff --git a/apps/nestjs-backend/src/features/record/query-builder/field-formatting-visitor.ts b/apps/nestjs-backend/src/features/record/query-builder/field-formatting-visitor.ts
@@ -22,6 +22,7 @@ import {
   type LastModifiedByFieldCore,
   type ButtonFieldCore,
   type INumberFormatting,
+  type IDatetimeFormatting,
 } from '@teable/core';
 import { match, P } from 'ts-pattern';
 import type { IRecordQueryDialectProvider } from './record-query-dialect.interface';
@@ -64,6 +65,20 @@ export class FieldFormattingVisitor implements IFieldVisitor<string> {
     return this.dialect.formatNumberArray(this.fieldExpression, formatting);
   }
 
+  /**
+   * Apply date/time formatting to field expression
+   */
+  private applyDateFormatting(formatting: IDatetimeFormatting): string {
+    return this.dialect.formatDate(this.fieldExpression, formatting);
+  }
+
+  /**
+   * Format multiple datetime values contained in a JSON array
+   */
+  private formatMultipleDateValues(formatting: IDatetimeFormatting): string {
+    return this.dialect.formatDateArray(this.fieldExpression, formatting);
+  }
+
   /**
    * Format multiple string values (like multiple select) to comma-separated string
    * Also handles link field arrays with objects containing id and title
@@ -96,7 +111,12 @@ export class FieldFormattingVisitor implements IFieldVisitor<string> {
   }
 
   visitDateField(_field: DateFieldCore): string {
-    // Date fields are stored as ISO strings, return as-is
+    if (_field.options?.formatting) {
+      if (_field.isMultipleCellValue) {
+        return this.formatMultipleDateValues(_field.options.formatting);
+      }
+      return this.applyDateFormatting(_field.options.formatting);
+    }
     return this.fieldExpression;
   }
 
@@ -159,11 +179,16 @@ export class FieldFormattingVisitor implements IFieldVisitor<string> {
         { cellValueType: CellValueType.Number, formatting: P.not(P.nullish) },
         ({ formatting }) => this.applyNumberFormatting(formatting as INumberFormatting)
       )
-      .with({ cellValueType: CellValueType.DateTime, formatting: P.not(P.nullish) }, () => {
-        // For datetime formatting, we would need to implement date formatting logic
-        // For now, return as-is since datetime fields are typically stored as ISO strings
-        return this.fieldExpression;
-      })
+      .with(
+        { cellValueType: CellValueType.DateTime, formatting: P.not(P.nullish) },
+        ({ formatting, isMultipleCellValue }) => {
+          const datetimeFormatting = formatting as IDatetimeFormatting;
+          if (isMultipleCellValue) {
+            return this.formatMultipleDateValues(datetimeFormatting);
+          }
+          return this.applyDateFormatting(datetimeFormatting);
+        }
+      )
       .with({ cellValueType: CellValueType.String, isMultipleCellValue: true }, () => {
         // For multiple-value string fields (like multiple select), convert array to comma-separated string
         return this.formatMultipleStringValues();
diff --git a/apps/nestjs-backend/src/features/record/query-builder/providers/pg-record-query-dialect.ts b/apps/nestjs-backend/src/features/record/query-builder/providers/pg-record-query-dialect.ts
@@ -1,5 +1,18 @@
-import { DriverClient, FieldType, CellValueType, DbFieldType } from '@teable/core';
-import type { INumberFormatting, ICurrencyFormatting, Relationship, FieldCore } from '@teable/core';
+import {
+  DriverClient,
+  FieldType,
+  CellValueType,
+  DbFieldType,
+  DateFormattingPreset,
+  TimeFormatting,
+} from '@teable/core';
+import type {
+  INumberFormatting,
+  ICurrencyFormatting,
+  Relationship,
+  FieldCore,
+  IDatetimeFormatting,
+} from '@teable/core';
 import type { Knex } from 'knex';
 import type { IRecordQueryDialectProvider } from '../record-query-dialect.interface';
 
@@ -92,6 +105,78 @@ export class PgRecordQueryDialect implements IRecordQueryDialectProvider {
     return `CASE WHEN (${expr} = ROUND(${expr})) THEN ROUND(${expr})::TEXT ELSE (${expr})::TEXT END`;
   }
 
+  private escapeLiteral(value: string): string {
+    return value.replace(/'/g, "''");
+  }
+
+  private getDatePattern(date: string): string {
+    switch (date as DateFormattingPreset) {
+      case DateFormattingPreset.US:
+        return 'FMMM/FMDD/YYYY';
+      case DateFormattingPreset.European:
+        return 'FMDD/FMMM/YYYY';
+      case DateFormattingPreset.Asian:
+        return 'YYYY/MM/DD';
+      case DateFormattingPreset.ISO:
+        return 'YYYY-MM-DD';
+      case DateFormattingPreset.YM:
+        return 'YYYY-MM';
+      case DateFormattingPreset.MD:
+        return 'MM-DD';
+      case DateFormattingPreset.Y:
+        return 'YYYY';
+      case DateFormattingPreset.M:
+        return 'MM';
+      case DateFormattingPreset.D:
+        return 'DD';
+      default:
+        return 'YYYY-MM-DD';
+    }
+  }
+
+  private getTimePattern(time: TimeFormatting | undefined): string | null {
+    switch (time) {
+      case TimeFormatting.Hour24:
+        return 'HH24:MI';
+      case TimeFormatting.Hour12:
+        return 'HH12:MI AM';
+      default:
+        return null;
+    }
+  }
+
+  private buildDateFormattingExpression(
+    valueExpression: string,
+    formatting: IDatetimeFormatting
+  ): string {
+    const { date, time, timeZone } = formatting;
+    const timePattern = this.getTimePattern(time ?? TimeFormatting.None);
+    const datePattern = this.getDatePattern(date);
+    const pattern = timePattern ? `${datePattern} ${timePattern}` : datePattern;
+    const tz = this.escapeLiteral(timeZone ?? 'UTC');
+    const patternLiteral = this.escapeLiteral(pattern);
+    return `TO_CHAR(TIMEZONE('${tz}', (${valueExpression})::timestamptz), '${patternLiteral}')`;
+  }
+
+  formatDate(expr: string, formatting: IDatetimeFormatting): string {
+    return this.buildDateFormattingExpression(expr, formatting);
+  }
+
+  formatDateArray(expr: string, formatting: IDatetimeFormatting): string {
+    const elementExpr = this.buildDateFormattingExpression("(elem #>> '{}')", formatting);
+    return `(
+        SELECT string_agg(
+          CASE
+            WHEN (elem #>> '{}') IS NULL THEN NULL
+            ELSE ${elementExpr}
+          END,
+          ', '
+          ORDER BY ord
+        )
+        FROM jsonb_array_elements(COALESCE((${expr})::jsonb, '[]'::jsonb)) WITH ORDINALITY AS t(elem, ord)
+      )`;
+  }
+
   private hasWrappingParentheses(expr: string): boolean {
     if (!expr.startsWith('(') || !expr.endsWith(')')) {
       return false;
diff --git a/apps/nestjs-backend/src/features/record/query-builder/providers/sqlite-record-query-dialect.ts b/apps/nestjs-backend/src/features/record/query-builder/providers/sqlite-record-query-dialect.ts
@@ -1,4 +1,9 @@
-import type { INumberFormatting, ICurrencyFormatting, FieldCore } from '@teable/core';
+import type {
+  INumberFormatting,
+  ICurrencyFormatting,
+  FieldCore,
+  IDatetimeFormatting,
+} from '@teable/core';
 import { DriverClient, FieldType, Relationship, DbFieldType } from '@teable/core';
 import type { Knex } from 'knex';
 import type { IRecordQueryDialectProvider } from '../record-query-dialect.interface';
@@ -65,6 +70,14 @@ export class SqliteRecordQueryDialect implements IRecordQueryDialectProvider {
     return `CASE WHEN (${expr} = CAST(${expr} AS INTEGER)) THEN CAST(CAST(${expr} AS INTEGER) AS TEXT) ELSE CAST(${expr} AS TEXT) END`;
   }
 
+  formatDate(expr: string, _formatting: IDatetimeFormatting): string {
+    return `CAST(${expr} AS TEXT)`;
+  }
+
+  formatDateArray(expr: string, _formatting: IDatetimeFormatting): string {
+    return this.formatStringArray(expr);
+  }
+
   coerceToNumericForCompare(expr: string): string {
     return `CAST(${expr} AS NUMERIC)`;
   }
diff --git a/apps/nestjs-backend/src/features/record/query-builder/record-query-dialect.interface.ts b/apps/nestjs-backend/src/features/record/query-builder/record-query-dialect.interface.ts
@@ -4,6 +4,7 @@ import type {
   INumberFormatting,
   Relationship,
   DbFieldType,
+  IDatetimeFormatting,
 } from '@teable/core';
 import type { Knex } from 'knex';
 
@@ -91,6 +92,17 @@ export interface IRecordQueryDialectProvider {
    */
   formatRating(expr: string): string;
 
+  /**
+   * Format a datetime SQL expression according to field formatting (date preset, time preset, timezone).
+   * Implementations should mirror {@link formatDateToString} semantics.
+   */
+  formatDate(expr: string, formatting: IDatetimeFormatting): string;
+
+  /**
+   * Format each element of a JSON array of datetimes according to field formatting and join with comma + space.
+   */
+  formatDateArray(expr: string, formatting: IDatetimeFormatting): string;
+
   // Safe coercions used in comparisons
 
   /**
diff --git a/apps/nestjs-backend/test/formula.e2e-spec.ts b/apps/nestjs-backend/test/formula.e2e-spec.ts
@@ -3897,6 +3897,175 @@ describe('OpenAPI formula (e2e)', () => {
     expect(record1.fields[formulaField.name]).toEqual('text');
   });
 
+  it('should format link titles using foreign field formatting', async () => {
+    const foreignDate = await createTable(baseId, {
+      name: 'link-format-date-foreign',
+      fields: [
+        {
+          name: 'Due Date',
+          type: FieldType.Date,
+          options: {
+            formatting: {
+              date: DateFormattingPreset.Asian,
+              time: TimeFormatting.None,
+              timeZone: 'UTC',
+            },
+          },
+        } as IFieldRo,
+      ],
+      records: [
+        {
+          fields: {
+            'Due Date': '2024-05-06T01:23:45.000Z',
+          },
+        },
+        {
+          fields: {
+            'Due Date': '2024-05-07T09:00:00.000Z',
+          },
+        },
+      ],
+    });
+
+    const foreignNumber = await createTable(baseId, {
+      name: 'link-format-number-foreign',
+      fields: [
+        {
+          name: 'Completion',
+          type: FieldType.Number,
+          options: {
+            formatting: {
+              type: NumberFormattingType.Percent,
+              precision: 1,
+            },
+          },
+        } as IFieldRo,
+      ],
+      records: [
+        {
+          fields: {
+            Completion: 0.321,
+          },
+        },
+        {
+          fields: {
+            Completion: 0.875,
+          },
+        },
+      ],
+    });
+
+    let host: ITableFullVo | undefined;
+    try {
+      host = await createTable(baseId, {
+        name: 'link-format-host',
+        fields: [{ name: 'Label', type: FieldType.SingleLineText } as IFieldRo],
+        records: [{ fields: { Label: 'host row' } }],
+      });
+
+      const dateLinkField = await createField(host.id, {
+        name: 'Date Link',
+        type: FieldType.Link,
+        options: {
+          foreignTableId: foreignDate.id,
+          relationship: Relationship.ManyOne,
+        } as ILinkFieldOptionsRo,
+      } as IFieldRo);
+
+      const dateMultiLinkField = await createField(host.id, {
+        name: 'Date Links',
+        type: FieldType.Link,
+        options: {
+          foreignTableId: foreignDate.id,
+          relationship: Relationship.ManyMany,
+        } as ILinkFieldOptionsRo,
+      } as IFieldRo);
+
+      const numberLinkField = await createField(host.id, {
+        name: 'Number Link',
+        type: FieldType.Link,
+        options: {
+          foreignTableId: foreignNumber.id,
+          relationship: Relationship.ManyOne,
+        } as ILinkFieldOptionsRo,
+      } as IFieldRo);
+
+      const numberMultiLinkField = await createField(host.id, {
+        name: 'Number Links',
+        type: FieldType.Link,
+        options: {
+          foreignTableId: foreignNumber.id,
+          relationship: Relationship.ManyMany,
+        } as ILinkFieldOptionsRo,
+      } as IFieldRo);
+
+      const hostRecordId = host.records[0].id;
+
+      await updateRecordByApi(host.id, hostRecordId, dateLinkField.id, {
+        id: foreignDate.records[0].id,
+      });
+
+      await updateRecordByApi(
+        host.id,
+        hostRecordId,
+        dateMultiLinkField.id,
+        foreignDate.records.map((record) => ({ id: record.id }))
+      );
+
+      await updateRecordByApi(host.id, hostRecordId, numberLinkField.id, {
+        id: foreignNumber.records[0].id,
+      });
+
+      await updateRecordByApi(
+        host.id,
+        hostRecordId,
+        numberMultiLinkField.id,
+        foreignNumber.records.map((record) => ({ id: record.id }))
+      );
+
+      const record = await getRecord(host.id, hostRecordId);
+      const dateLink = record.data.fields[dateLinkField.name] as {
+        id: string;
+        title: string;
+      } | null;
+      expect(dateLink).toBeDefined();
+      expect(dateLink?.id).toBe(foreignDate.records[0].id);
+      expect(dateLink?.title).toBe('2024/05/06');
+
+      const numberLink = record.data.fields[numberLinkField.name] as {
+        id: string;
+        title: string;
+      } | null;
+      expect(numberLink).toBeDefined();
+      expect(numberLink?.id).toBe(foreignNumber.records[0].id);
+      expect(numberLink?.title).toBe('32.1%');
+
+      const dateMultiLink = record.data.fields[dateMultiLinkField.name] as Array<{
+        id: string;
+        title: string;
+      }> | null;
+      expect(Array.isArray(dateMultiLink)).toBe(true);
+      expect(dateMultiLink?.length).toBe(2);
+      const dateMultiTitles = dateMultiLink?.map((item) => item.title);
+      expect(dateMultiTitles).toEqual(['2024/05/06', '2024/05/07']);
+
+      const numberMultiLink = record.data.fields[numberMultiLinkField.name] as Array<{
+        id: string;
+        title: string;
+      }> | null;
+      expect(Array.isArray(numberMultiLink)).toBe(true);
+      expect(numberMultiLink?.length).toBe(2);
+      const numberMultiTitles = numberMultiLink?.map((item) => item.title);
+      expect(numberMultiTitles).toEqual(['32.1%', '87.5%']);
+    } finally {
+      if (host) {
+        await permanentDeleteTable(baseId, host.id);
+      }
+      await permanentDeleteTable(baseId, foreignDate.id);
+      await permanentDeleteTable(baseId, foreignNumber.id);
+    }
+  });
+
   describe('safe calculate', () => {
     let table: ITableFullVo;
     beforeEach(async () => {
