From 477fef3d429048c26c2fa0c91b8a88f6c60ec85b Mon Sep 17 00:00:00 2001
From: Xwatson <xwatson@foxmail.com>
Date: Thu, 28 Nov 2024 13:55:38 +0800
Subject: [PATCH] fix(grid): fixed blank rendering of column headers for the
 last column in read-only mode #WIK-16864 (#171)

---
 packages/grid/src/grid.component.ts             |  2 +-
 .../components/add-field-column.component.ts    | 17 +++++++++++++----
 .../grid/src/renderer/renderer.component.html   |  4 +---
 .../grid/src/renderer/renderer.component.ts     |  5 +++--
 packages/grid/src/types/component-config.ts     |  1 +
 5 files changed, 19 insertions(+), 10 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 cc329827..65245e92 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';
                 <ko-rect [config]="rectConfig()"></ko-rect>
             </ko-group>
             <ko-group>
-                <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+                @if (addIconConfig().visible) {
+                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+                }
             </ko-group>
         </ko-group>
     `,
@@ -42,13 +46,16 @@ export class AITableAddField {
     });
 
     rectConfig = computed<Partial<StageConfig>>(() => {
-        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,
                 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<AITableIconConfig>(() => {
+        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 @@
 
                 <ko-group [config]="offsetXConfig()">
                     <ai-table-column-heads [config]="columnHeadOrAddFieldConfig()"></ai-table-column-heads>
-                    @if (!readonly()) {
-                        <ai-table-add-field [config]="columnHeadOrAddFieldConfig()"></ai-table-add-field>
-                    }
+                    <ai-table-add-field [config]="columnHeadOrAddFieldConfig()"></ai-table-add-field>
                 </ko-group>
             </ko-group>
 
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 {