From 478c1ba0149b9ef48524f2c20c8815e11903c2b6 Mon Sep 17 00:00:00 2001 From: xwatson Date: Wed, 27 Nov 2024 19:19:05 +0800 Subject: [PATCH 1/2] fix(grid): fixed blank rendering of column headers for the last column in read-only mode #WIK-16864 --- .../components/add-field-column.component.ts | 19 ++++++++++++++----- .../grid/src/renderer/renderer.component.html | 4 +--- .../grid/src/renderer/renderer.component.ts | 5 +++-- packages/grid/src/types/component-config.ts | 1 + 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/grid/src/renderer/components/add-field-column.component.ts b/packages/grid/src/renderer/components/add-field-column.component.ts index cc329827..b1209248 100644 --- a/packages/grid/src/renderer/components/add-field-column.component.ts +++ b/packages/grid/src/renderer/components/add-field-column.component.ts @@ -6,6 +6,7 @@ import { AI_TABLE_CELL_PADDING, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, + AI_TABLE_FIELD_HEAD, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_OFFSET, Colors @@ -13,6 +14,7 @@ import { import { AITableAddFieldConfig, AITableIconConfig } from '../../types'; import { generateTargetName } from '../../utils'; import { AITableIcon } from './icon.component'; +import { isNil } from 'lodash'; @Component({ selector: 'ai-table-add-field', @@ -22,7 +24,9 @@ import { AITableIcon } from './icon.component'; - + @if (addIconConfig().visible) { + + } `, @@ -42,13 +46,16 @@ export class AITableAddField { }); rectConfig = computed>(() => { - const { targetName } = this.config().pointPosition; + const { + pointPosition: { targetName }, + readonly + } = this.config(); const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white; return { name: generateTargetName({ - targetName: AI_TABLE_FIELD_ADD_BUTTON, + targetName: readonly ? AI_TABLE_FIELD_HEAD : AI_TABLE_FIELD_ADD_BUTTON, fieldId: this.config().fields[this.config().columnStopIndex]._id, - mouseStyle: 'pointer' + mouseStyle: readonly ? 'default' : 'pointer' }), x: AI_TABLE_OFFSET, y: AI_TABLE_OFFSET, @@ -65,13 +72,15 @@ export class AITableAddField { }); addIconConfig = computed(() => { + const { readonly } = this.config(); const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2; return { x: AI_TABLE_CELL_PADDING, y: offsetY, data: AddOutlinedPath, fill: Colors.gray600, - listening: false + listening: false, + visible: isNil(readonly) ? true : !readonly }; }); } diff --git a/packages/grid/src/renderer/renderer.component.html b/packages/grid/src/renderer/renderer.component.html index 59890032..da9f4024 100644 --- a/packages/grid/src/renderer/renderer.component.html +++ b/packages/grid/src/renderer/renderer.component.html @@ -25,9 +25,7 @@ - @if (!readonly()) { - - } + diff --git a/packages/grid/src/renderer/renderer.component.ts b/packages/grid/src/renderer/renderer.component.ts index 24ef6665..7d28d1c6 100644 --- a/packages/grid/src/renderer/renderer.component.ts +++ b/packages/grid/src/renderer/renderer.component.ts @@ -169,7 +169,7 @@ export class AITableRenderer { columnHeadOrAddFieldConfig = computed(() => { const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo(); - const { aiTable, coordinate } = this.config(); + const { aiTable, coordinate, readonly } = this.config(); const { pointPosition } = aiTable.context!; const fields = this.fields(); return { @@ -178,7 +178,8 @@ export class AITableRenderer { fields, columnStartIndex, columnStopIndex, - pointPosition: pointPosition() + pointPosition: pointPosition(), + readonly }; }); diff --git a/packages/grid/src/types/component-config.ts b/packages/grid/src/types/component-config.ts index 783579ef..5aedc9dc 100644 --- a/packages/grid/src/types/component-config.ts +++ b/packages/grid/src/types/component-config.ts @@ -41,6 +41,7 @@ export interface AITableAddFieldConfig { fields: AITableField[]; columnStopIndex: number; pointPosition: AITablePointPosition; + readonly?: boolean; } export interface AITableTargetNameOptions { From f4f1c095508505ccbb4b65ffd8bc666d2487dfe8 Mon Sep 17 00:00:00 2001 From: xwatson Date: Thu, 28 Nov 2024 13:45:44 +0800 Subject: [PATCH 2/2] fix(grid): read-only mode table click event disabled --- packages/grid/src/grid.component.ts | 2 +- .../grid/src/renderer/components/add-field-column.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts index 057b3080..b2f37d4b 100644 --- a/packages/grid/src/grid.component.ts +++ b/packages/grid/src/grid.component.ts @@ -221,7 +221,7 @@ export class AITableGrid extends AITableGridBase implements OnInit, OnDestroy { mouseEvent.preventDefault(); const { context } = this.aiTable; const { targetName, rowIndex: pointRowIndex } = context!.pointPosition(); - if (mouseEvent.button !== AITableMouseDownType.Left) return; + if (mouseEvent.button !== AITableMouseDownType.Left || (targetName !== AI_TABLE_FIELD_HEAD_MORE && this.aiReadonly())) return; switch (targetName) { case AI_TABLE_ROW_ADD_BUTTON: { this.aiTableGridSelectionService.clearSelection(); diff --git a/packages/grid/src/renderer/components/add-field-column.component.ts b/packages/grid/src/renderer/components/add-field-column.component.ts index b1209248..65245e92 100644 --- a/packages/grid/src/renderer/components/add-field-column.component.ts +++ b/packages/grid/src/renderer/components/add-field-column.component.ts @@ -53,7 +53,7 @@ export class AITableAddField { const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white; return { name: generateTargetName({ - targetName: readonly ? AI_TABLE_FIELD_HEAD : AI_TABLE_FIELD_ADD_BUTTON, + targetName: AI_TABLE_FIELD_ADD_BUTTON, fieldId: this.config().fields[this.config().columnStopIndex]._id, mouseStyle: readonly ? 'default' : 'pointer' }),