Merge pull request #1514 from undb-xyz/feature/set-field-display

feat: set field display handler

apps/backend/src/core/table/commands/index.ts

@@ -26,6 +26,7 @@ import { ReorderOptionsCommandHandler } from './reorder-options.command.handler.
 import { ResetFieldSortCommandHandler } from './reset-field-sort.command.handler.js'
 import { RestoreRecordCommandHandler } from './restore-record.command.handler.js'
 import { SetCalendarFieldCommandHandler } from './set-calendar-field.command.handler.js'
+import { SetFieldDisplayCommandHandler } from './set-field-display.command.handler.js'
 import { SetFieldSortCommandHandler } from './set-field-sort.command.handler.js'
 import { SetFieldVisibilityCommandHandler } from './set-field-visibility.command.handler.js'
 import { SetFieldWidthCommandHandler } from './set-field-width.command.handler.js'
@@ -106,4 +107,5 @@ export const commandHandlers = [
   UpdateFormCommandHandler,
   RestoreRecordCommandHandler,
   SetFormFieldFilterCommandHandler,
+  SetFieldDisplayCommandHandler,
 ]

apps/backend/src/core/table/commands/set-field-display.command.handler.ts

@@ -0,0 +1,15 @@
+import type { ICommandHandler } from '@nestjs/cqrs'
+import { CommandHandler } from '@nestjs/cqrs'
+import { type ITableRepository } from '@undb/core'
+import { SetFieldDisplayCommandHandler as DomainHandler, SetFieldDisplayCommand } from '@undb/cqrs'
+import { InjectTableRepository } from '../adapters/sqlite/table-sqlite.repository.js'
+
+@CommandHandler(SetFieldDisplayCommand)
+export class SetFieldDisplayCommandHandler extends DomainHandler implements ICommandHandler<SetFieldDisplayCommand> {
+  constructor(
+    @InjectTableRepository()
+    protected readonly repo: ITableRepository,
+  ) {
+    super(repo)
+  }
+}

apps/frontend/src/lib/cell/CellInput/Attachment.svelte

@@ -34,8 +34,6 @@
 	$: if (files) {
 		handFiles(files)
 	}
-
-	$: console.log(value)
 </script>
 
 <FileInput type="file" multiple bind:files class={$$restProps.class} disabled={readonly} />

apps/frontend/src/lib/field/FieldMenu.svelte

@@ -4,7 +4,7 @@
 	import { currentFieldId, getField, getTable, getView, listRecordFn } from '$lib/store/table'
 	import { confirmDeleteField, duplicateFieldModal, flsModal, updateFieldModal } from '$lib/store/modal'
 	import { trpc } from '$lib/trpc/client'
-	import { canDuplicate, type ISortDirection } from '@undb/core'
+	import { canDisplay, canDuplicate, type ISortDirection } from '@undb/core'
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
 	import { noop } from 'lodash-es'
 	import { t } from '$lib/i18n'
@@ -45,6 +45,13 @@
 		},
 	})
 
+	const setFieldDisplay = trpc().table.field.setDisplay.mutation({
+		async onSuccess(data, variables, context) {
+			await invalidate(`table:${$table.id.value}`)
+			currentFieldId.set(undefined)
+		},
+	})
+
 	async function sort(direction: ISortDirection) {
 		if (!$field) return
 		if (direction === fieldDirection) {
@@ -159,6 +166,24 @@
 		{$t('fls', { ns: 'authz' })}
 	</span>
 </DropdownMenu.Item>
+{#if $field && !$field.display && canDisplay($field.type)}
+	<DropdownMenu.Item
+		class={cn('items-center gap-2 text-xs text-gray-500 dark:text-gray-100 font-medium')}
+		on:click={() => {
+			if (!$field) return
+			$setFieldDisplay.mutate({
+				tableId: $table.id.value,
+				fieldId: $field.id.value,
+				display: true,
+			})
+		}}
+	>
+		<i class="ti ti-eye-check text-sm" />
+		<span>
+			{$t('set as display field')}
+		</span>
+	</DropdownMenu.Item>
+{/if}
 <DropdownMenu.Separator />
 <DropdownMenu.Item class={'items-center gap-2 text-xs text-red-400'} on:click={() => ($confirmDeleteField = true)}>
 	<i class="ti ti-trash text-sm" />

packages/core/src/table/field/field.errors.ts

@@ -29,3 +29,11 @@ export class FieldTypeNotSearchable extends ExceptionBase {
     )
   }
 }
+
+export class CannotSetFieldDisplayException extends ExceptionBase {
+  code = 'FIELD.CANNOT_SET_FIELD_DISPLAY'
+
+  constructor(type: IFieldType) {
+    super(`cannot set field of type ${type} display`)
+  }
+}

packages/core/src/table/table.ts

@@ -11,7 +11,14 @@ import type {
   IReorderOptionsSchema,
   IUpdateFieldSchema,
 } from './field/index.js'
-import { FieldId, SelectField, WithDuplicatedField } from './field/index.js'
+import {
+  CannotSetFieldDisplayException,
+  FieldId,
+  SelectField,
+  WithDuplicatedField,
+  WithFieldDisplay,
+  canDisplay,
+} from './field/index.js'
 import { UpdateFieldHelper } from './field/update-field.helper.js'
 import type { IRootFilter } from './filter/index.js'
 import type {
@@ -197,6 +204,20 @@ export class Table {
     return Ok(spec)
   }
 
+  public setFieldDisplay(fieldId: string, display: boolean): Option<TableCompositeSpecification> {
+    const field = this.schema.getFieldById(fieldId).unwrap()
+
+    if (!canDisplay(field.type)) {
+      throw new CannotSetFieldDisplayException(field.type)
+    }
+
+    if (display === field.display) {
+      return None
+    }
+
+    return Some(new WithFieldDisplay(field.type, field.id.value, display))
+  }
+
   public resetFieldSort(fieldId: string, viewId?: string): Result<TableCompositeSpecification, string> {
     const view = this.mustGetView(viewId)
     const sorts = view.sorts?.resetFieldSort(fieldId) ?? new Sorts([])

packages/cqrs/src/commands/index.ts

@@ -43,6 +43,7 @@ export * from './reset-field-sort/index.js'
 export * from './restore-record/index.js'
 export * from './send-invitation-mail/index.js'
 export * from './set-calendar-field/index.js'
+export * from './set-field-display/index.js'
 export * from './set-field-sort/index.js'
 export * from './set-field-visibility/index.js'
 export * from './set-field-width/index.js'

packages/cqrs/src/commands/set-field-display/index.ts

@@ -0,0 +1,4 @@
+export * from './set-field-display.command.handler.js'
+export * from './set-field-display.command.input.js'
+export * from './set-field-display.command.interface.js'
+export * from './set-field-display.command.js'

packages/cqrs/src/commands/set-field-display/set-field-display.command.handler.ts

@@ -0,0 +1,19 @@
+import type { ITableRepository } from '@undb/core'
+import type { ICommandHandler } from '@undb/domain'
+import type { SetFieldDisplayCommand } from './set-field-display.command.js'
+
+type ISetFieldDisplayCommandHandler = ICommandHandler<SetFieldDisplayCommand, void>
+
+export class SetFieldDisplayCommandHandler implements ISetFieldDisplayCommandHandler {
+  constructor(protected readonly repo: ITableRepository) {}
+
+  async execute(command: SetFieldDisplayCommand): Promise<void> {
+    const table = (await this.repo.findOneById(command.tableId)).unwrap()
+
+    const spec = table.setFieldDisplay(command.fieldId, command.display)
+
+    if (spec.isSome()) {
+      await this.repo.updateOneById(command.tableId, spec.unwrap())
+    }
+  }
+}

packages/cqrs/src/commands/set-field-display/set-field-display.command.input.ts

@@ -0,0 +1,8 @@
+import { fieldIdSchema, tableIdSchema } from '@undb/core'
+import { z } from 'zod'
+
+export const setFieldDisplaysCommandInput = z.object({
+  tableId: tableIdSchema,
+  fieldId: fieldIdSchema,
+  display: z.boolean(),
+})

packages/cqrs/src/commands/set-field-display/set-field-display.command.interface.ts

@@ -0,0 +1,4 @@
+import type { z } from 'zod'
+import type { setFieldDisplaysCommandInput } from './set-field-display.command.input.js'
+
+export type ISetFieldDisplayCommandInput = z.infer<typeof setFieldDisplaysCommandInput>

packages/cqrs/src/commands/set-field-display/set-field-display.command.ts

@@ -0,0 +1,16 @@
+import type { CommandProps } from '@undb/domain'
+import { Command } from '@undb/domain'
+import type { ISetFieldDisplayCommandInput } from './set-field-display.command.interface.js'
+
+export class SetFieldDisplayCommand extends Command implements ISetFieldDisplayCommandInput {
+  readonly tableId: string
+  readonly fieldId: string
+  readonly display: boolean
+
+  constructor(props: CommandProps<ISetFieldDisplayCommandInput>) {
+    super(props)
+    this.tableId = props.tableId
+    this.fieldId = props.fieldId
+    this.display = props.display
+  }
+}

packages/i18n/src/index.ts

@@ -396,6 +396,7 @@ export const config: InitOptions = {
         'Search Foreign Records': 'search foreign table records',
         'insert refenrence looking field': 'insert looking field',
         'create record by form': 'create record by{{form}}',
+        'set as display field': 'set as display field',
       },
       webhook: {
         Webhook: 'Webhook',
@@ -821,6 +822,7 @@ export const config: InitOptions = {
         'Search Foreign Records': '搜索关联表记录',
         'insert refenrence looking field': '插入关联查看列',
         'create record by form': '通过表单{{form}}创建',
+        'set as display field': '设置为显示列',
       },
       webhook: {
         Webhook: 'Webhook',

packages/trpc/src/router/field.router.ts

@@ -2,10 +2,12 @@ import {
   CreateFieldCommand,
   DeleteFieldCommand,
   DuplicateFieldCommand,
+  SetFieldDisplayCommand,
   UpdateFieldCommand,
   createFieldCommandInput,
   deleteFieldCommandInput,
   duplicateFieldCommandInput,
+  setFieldDisplaysCommandInput,
   updateFieldCommandInput,
 } from '@undb/cqrs'
 import type { ICommandBus } from '@undb/domain'
@@ -49,5 +51,13 @@ export const createFieldRouter = (procedure: typeof publicProcedure) => (command
         const cmd = new DeleteFieldCommand(input)
         return commandBus.execute(cmd)
       }),
+    setDisplay: procedure
+      .use(authz('table:update_field'))
+      .input(setFieldDisplaysCommandInput)
+      .output(z.void())
+      .mutation(({ input }) => {
+        const cmd = new SetFieldDisplayCommand(input)
+        return commandBus.execute(cmd)
+      }),
     select: createSelectFieldRouter(procedure)(commandBus),
   })