fix(grid): fixed blank rendering of column headers for the last colum…

…n in read-only mode #WIK-16864 (#171)
worktile · Nov 28, 2024 · 477fef3 · 477fef3
1 parent 1082c19
commit 477fef3
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -6,13 +6,15 @@ 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
 } from '../../constants';
 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
@@ -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
@@ -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
@@ -41,6 +41,7 @@ export interface AITableAddFieldConfig {
     fields: AITableField[];
     columnStopIndex: number;
     pointPosition: AITablePointPosition;
+    readonly?: boolean;
 }
 
 export interface AITableTargetNameOptions {