feat: new color field

Author: martinfojtik

apps/nestjs-backend/src/db-provider/create-database-column-query/create-database-column-field-visitor.postgres.ts

@@ -1,11 +1,17 @@
 import type {
   AttachmentFieldCore,
   AutoNumberFieldCore,
+  ButtonFieldCore,
   CheckboxFieldCore,
+  ColorFieldCore,
+  ConditionalRollupFieldCore,
   CreatedByFieldCore,
   CreatedTimeFieldCore,
   DateFieldCore,
+  FieldCore,
   FormulaFieldCore,
+  IFieldVisitor,
+  ILinkFieldOptions,
   LastModifiedByFieldCore,
   LastModifiedTimeFieldCore,
   LinkFieldCore,
@@ -14,14 +20,9 @@ import type {
   NumberFieldCore,
   RatingFieldCore,
   RollupFieldCore,
-  ConditionalRollupFieldCore,
   SingleLineTextFieldCore,
   SingleSelectFieldCore,
   UserFieldCore,
-  IFieldVisitor,
-  FieldCore,
-  ILinkFieldOptions,
-  ButtonFieldCore,
 } from '@teable/core';
 import { DbFieldType, Relationship } from '@teable/core';
 import type { Knex } from 'knex';
@@ -377,6 +378,10 @@ export class CreatePostgresDatabaseColumnFieldVisitor implements IFieldVisitor<v
     this.createStandardColumn(field);
   }
 
+  visitColorField(field: ColorFieldCore): void {
+    this.createStandardColumn(field);
+  }
+
   // Formula field types
   visitFormulaField(field: FormulaFieldCore): void {
     this.createFormulaColumns(field);

apps/nestjs-backend/src/db-provider/drop-database-column-query/drop-database-column-field-visitor.postgres.ts

@@ -24,6 +24,7 @@ import type {
   FieldCore,
   ILinkFieldOptions,
   ButtonFieldCore,
+  ColorFieldCore,
 } from '@teable/core';
 import { DropColumnOperationType } from './drop-database-column-field-visitor.interface';
 import type { IDropDatabaseColumnContext } from './drop-database-column-field-visitor.interface';
@@ -215,6 +216,10 @@ export class DropPostgresDatabaseColumnFieldVisitor implements IFieldVisitor<str
     return this.dropStandardColumn(field);
   }
 
+  visitColorField(field: ColorFieldCore): string[] {
+    return this.dropStandardColumn(field);
+  }
+
   // Formula field types
   visitFormulaField(field: FormulaFieldCore): string[] {
     return this.dropFormulaColumns(field);

apps/nestjs-backend/src/features/field/field-calculate/field-supplement.service.ts

@@ -5,6 +5,7 @@ import {
   AutoNumberFieldCore,
   ButtonFieldCore,
   CellValueType,
+  ColorFieldCore,
   CheckboxFieldCore,
   ColorUtils,
   ConditionalRollupFieldCore,
@@ -1507,6 +1508,18 @@ export class FieldSupplementService {
     };
   }
 
+  private prepareColorField(field: IFieldRo) {
+    const { name, options } = field;
+
+    return {
+      ...field,
+      name: name ?? 'Color',
+      options: options ?? ColorFieldCore.defaultOptions(),
+      cellValueType: CellValueType.String,
+      dbFieldType: DbFieldType.Text,
+    };
+  }
+
   private async prepareCreateFieldInner(
     tableId: string,
     fieldRo: IFieldRo,
@@ -1557,6 +1570,8 @@ export class FieldSupplementService {
         return this.prepareCheckboxField(fieldRo);
       case FieldType.Button:
         return this.prepareButtonField(fieldRo);
+      case FieldType.Color:
+        return this.prepareColorField(fieldRo);
       default:
         throw new CustomHttpException(
           `Unsupported field type ${fieldRo.type}`,
@@ -1666,6 +1681,8 @@ export class FieldSupplementService {
         return this.prepareCheckboxField(fieldRo);
       case FieldType.Button:
         return this.prepareButtonField(fieldRo);
+      case FieldType.Color:
+        return this.prepareColorField(fieldRo);
       case FieldType.LastModifiedBy:
         return this.prepareLastModifiedByField(fieldRo);
       case FieldType.CreatedBy:

apps/nestjs-backend/src/features/field/model/factory.ts

@@ -11,6 +11,7 @@ import { instanceToPlain, plainToInstance } from 'class-transformer';
 import { AttachmentFieldDto } from './field-dto/attachment-field.dto';
 import { AutoNumberFieldDto } from './field-dto/auto-number-field.dto';
 import { ButtonFieldDto } from './field-dto/button-field.dto';
+import { ColorFieldDto } from './field-dto/color-field.dto';
 import { CheckboxFieldDto } from './field-dto/checkbox-field.dto';
 import { ConditionalRollupFieldDto } from './field-dto/conditional-rollup-field.dto';
 import { CreatedByFieldDto } from './field-dto/created-by-field.dto';
@@ -173,6 +174,8 @@ export function createFieldInstanceByVo(field: IFieldVo) {
       return plainToInstance(LastModifiedByFieldDto, normalizedField);
     case FieldType.Button:
       return plainToInstance(ButtonFieldDto, normalizedField);
+    case FieldType.Color:
+      return plainToInstance(ColorFieldDto, normalizedField);
     default:
       assertNever(normalizedField.type);
   }

apps/nestjs-backend/src/features/field/model/field-dto/color-field.dto.ts

@@ -0,0 +1,22 @@
+import { ColorFieldCore } from '@teable/core';
+import type { FieldBase } from '../field-base';
+
+export class ColorFieldDto extends ColorFieldCore implements FieldBase {
+  get isStructuredCellValue() {
+    return false;
+  }
+
+  convertCellValue2DBValue(value: unknown): unknown {
+    if (this.isMultipleCellValue) {
+      return value == null ? value : JSON.stringify(value);
+    }
+    return value;
+  }
+
+  convertDBValue2CellValue(value: unknown): unknown {
+    if (this.isMultipleCellValue) {
+      return value == null || typeof value === 'object' ? value : JSON.parse(value as string);
+    }
+    return value;
+  }
+}

apps/nestjs-backend/src/features/record/query-builder/field-cte-visitor.ts

@@ -34,6 +34,7 @@ import {
   type SingleSelectFieldCore,
   type UserFieldCore,
   type ButtonFieldCore,
+  type ColorFieldCore,
   type Tables,
   type TableDomain,
   type ILinkFieldOptions,
@@ -709,6 +710,9 @@ class FieldCteSelectionVisitor implements IFieldVisitor<IFieldSelectName> {
   visitButtonField(field: ButtonFieldCore): IFieldSelectName {
     return this.visitLookupField(field);
   }
+  visitColorField(field: ColorFieldCore): IFieldSelectName {
+    return this.visitLookupField(field);
+  }
 }
 
 export class FieldCteVisitor implements IFieldVisitor<ICteResult> {
@@ -2821,6 +2825,7 @@ export class FieldCteVisitor implements IFieldVisitor<ICteResult> {
   visitCreatedByField(_field: CreatedByFieldCore): void {}
   visitLastModifiedByField(_field: LastModifiedByFieldCore): void {}
   visitButtonField(_field: ButtonFieldCore): void {}
+  visitColorField(_field: ColorFieldCore): void {}
 
   private ensureLinkCteJoined(cteName: string): void {
     if (this.state.isCteJoined(cteName)) {

apps/nestjs-backend/src/features/record/query-builder/field-formatting-visitor.ts

@@ -21,6 +21,7 @@ import {
   type CreatedByFieldCore,
   type LastModifiedByFieldCore,
   type ButtonFieldCore,
+  type ColorFieldCore,
   type INumberFormatting,
   type IDatetimeFormatting,
 } from '@teable/core';
@@ -243,4 +244,8 @@ export class FieldFormattingVisitor implements IFieldVisitor<string> {
     // Button fields don't have values, return as-is
     return this.fieldExpression;
   }
+
+  visitColorField(_field: ColorFieldCore): string {
+    return this.fieldExpression;
+  }
 }

apps/nestjs-backend/src/features/record/query-builder/field-select-visitor.ts

@@ -22,6 +22,7 @@ import type {
   UserFieldCore,
   IFieldVisitor,
   ButtonFieldCore,
+  ColorFieldCore,
   TableDomain,
 } from '@teable/core';
 import { DbFieldType, FieldType, isLinkLookupOptions, DriverClient } from '@teable/core';
@@ -578,6 +579,10 @@ export class FieldSelectVisitor implements IFieldVisitor<IFieldSelectName> {
     return this.checkAndSelectLookupField(field);
   }
 
+  visitColorField(field: ColorFieldCore): IFieldSelectName {
+    return this.checkAndSelectLookupField(field);
+  }
+
   // Formula field types - these may use generated columns
   visitFormulaField(field: FormulaFieldCore): IFieldSelectName {
     // If the formula field has an error (e.g., referenced field deleted), return NULL

apps/nestjs-backend/src/types/i18n.generated.ts

@@ -2071,6 +2071,9 @@ export type I18nTranslations = {
                 "refineOptionsError": string;
                 "optionsRequired": string;
             };
+            "color": {
+                "button": string;
+            };
         };
         "filter": {
             "label": string;
@@ -2259,6 +2262,7 @@ export type I18nTranslations = {
                 "button": string;
                 "createdBy": string;
                 "lastModifiedBy": string;
+                "color": string;
             };
             "description": {
                 "singleLineText": string;
@@ -2283,6 +2287,7 @@ export type I18nTranslations = {
                 "button": string;
                 "createdBy": string;
                 "lastModifiedBy": string;
+                "color": string;
             };
             "link": {
                 "oneWay": string;
@@ -3876,6 +3881,9 @@ export type I18nTranslations = {
                     "title": string;
                     "description": string;
                 };
+                "color": {
+                    "title": string;
+                };
             };
             "editor": {
                 "addField": string;
@@ -4019,6 +4027,7 @@ export type I18nTranslations = {
                 "button": string;
                 "lookup": string;
                 "conditionalRollup": string;
+                "color": string;
             };
             "fieldName": string;
             "fieldNameOptional": string;

apps/nextjs-app/src/features/app/components/field-setting/FieldOptions.tsx

@@ -29,6 +29,7 @@ import { useFields } from '@teable/sdk/hooks';
 import { useMemo } from 'react';
 import { ButtonOptions } from './options/ButtonOptions';
 import { CheckboxOptions } from './options/CheckboxOptions';
+import { ColorOptions } from './options/ColorOptions';
 import { ConditionalRollupOptions } from './options/ConditionalRollupOptions';
 import { CreatedTimeOptions } from './options/CreatedTimeOptions';
 import { DateOptions } from './options/DateOptions';
@@ -202,6 +203,8 @@ export const FieldOptions: React.FC<IFieldOptionsProps> = ({ field, onChange, on
           onSave={onSave}
         />
       );
+    case FieldType.Color:
+      return <ColorOptions />;
     default:
       return <></>;
   }