Fix table editable columns option (#804)

* fix: logic around showing table column editable button

* style: prettier

* fix: tests

Author: jake-bassett

projects/components/src/table/columns/table-edit-columns-modal.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { ButtonRole } from '../../button/button';
-import { FilterAttribute } from '../../filtering/filter/filter-attribute';
 import { ModalRef, MODAL_DATA } from '../../modal/modal';
 import { TableColumnConfigExtended } from '../table.service';
 
@@ -50,12 +49,12 @@ export class TableEditColumnsModalComponent {
     @Inject(MODAL_DATA) public readonly modalData: TableColumnConfigExtended[]
   ) {
     this.editColumns = this.modalData
-      .filter(column => !this.isMetaTypeColumn(column.attribute))
+      .filter(column => !this.isMetaTypeColumn(column))
       .sort((a, b) => (a.visible === b.visible ? 0 : a.visible ? -1 : 1));
   }
 
-  private isMetaTypeColumn(attribute: FilterAttribute | undefined): boolean {
-    return attribute === undefined || attribute.type.startsWith('$$');
+  private isMetaTypeColumn(column: TableColumnConfigExtended): boolean {
+    return column.id.startsWith('$$') || (column.attribute !== undefined && column.attribute.type.startsWith('$$'));
   }
 
   public isLastRemainingColumn(column: TableColumnConfigExtended): boolean {

projects/components/src/table/header/table-header-cell-renderer.component.test.ts

@@ -113,9 +113,7 @@ describe('Table Header Cell Renderer', () => {
       }
     });
 
-    spectator.click('.options-button');
-    expect(spectator.query('.sort-ascending', { root: true })).not.toExist();
-    expect(spectator.query('.sort-descending', { root: true })).not.toExist();
+    expect(spectator.query('.options-button', { root: true })).not.toExist();
   });
 
   test('should create tooltip correctly', () => {

projects/components/src/table/header/table-header-cell-renderer.component.ts

@@ -35,14 +35,18 @@ import { TableColumnConfigExtended } from '../table.service';
       [htTooltip]="this.getTooltip(this.columnConfig.titleTooltip, this.columnConfig.title)"
       class="table-header-cell-renderer"
     >
-      <ng-container *ngIf="this.leftAlignFilterButton">
+      <ng-container *ngIf="this.isShowOptionButton && this.leftAlignFilterButton">
         <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
       </ng-container>
       <div class="title" [ngClass]="this.classes" (click)="this.onSortChange()">{{ this.columnConfig.title }}</div>
-      <ng-container *ngIf="!this.leftAlignFilterButton">
+      <ng-container *ngIf="this.isShowOptionButton && !this.leftAlignFilterButton">
         <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
       </ng-container>
 
+      <ng-template #htmlTooltip>
+        <div [innerHTML]="this.columnConfig?.titleTooltip"></div>
+      </ng-template>
+
       <ng-template #optionsButton>
         <ht-popover class="options-button" [closeOnClick]="true">
           <ht-popover-trigger>
@@ -54,9 +58,9 @@ import { TableColumnConfigExtended } from '../table.service';
             <div [style.min-width.px]="trigger.offsetWidth" class="popover-content">
               <ng-container *ngIf="this.isFilterable">
                 <div class="popover-item" (click)="this.onFilterValues()" *ngIf="this.isFilterable">Filter Values</div>
-                <div class="popover-item-divider" *ngIf="this.columnConfig.sortable !== false || this.editable"></div>
               </ng-container>
               <ng-container *ngIf="this.columnConfig.sortable !== false">
+                <div class="popover-item-divider"></div>
                 <div class="popover-item sort-ascending" (click)="this.onSortChange(SORT_ASC)">
                   Sort Ascending
                   <ht-icon class="popover-item-icon" icon="${IconType.ArrowUp}" size="${IconSize.Small}"></ht-icon>
@@ -65,19 +69,15 @@ import { TableColumnConfigExtended } from '../table.service';
                   Sort Descending
                   <ht-icon class="popover-item-icon" icon="${IconType.ArrowDown}" size="${IconSize.Small}"></ht-icon>
                 </div>
-                <div class="popover-item-divider" *ngIf="this.editable"></div>
               </ng-container>
 
-              <ng-container *ngIf="this.editable">
+              <ng-container *ngIf="this.editable && this.isEditableAvailableColumns">
+                <div class="popover-item-divider"></div>
                 <div class="popover-item" (click)="this.onEditColumns()">Edit Columns</div>
               </ng-container>
             </div>
           </ht-popover-content>
         </ht-popover>
-
-        <ng-template #htmlTooltip>
-          <div [innerHTML]="this.columnConfig?.titleTooltip"></div>
-        </ng-template>
       </ng-template>
     </div>
   `
@@ -115,6 +115,8 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
   public classes: string[] = [];
 
   public isFilterable: boolean = false;
+  public isEditableAvailableColumns: boolean = false;
+  public isShowOptionButton: boolean = false;
 
   @ViewChild('htmlTooltip')
   public htmlTooltipTemplate?: TemplateRef<unknown>;
@@ -132,6 +134,9 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
 
     if (changes.columnConfig || changes.metadata) {
       this.isFilterable = this.isAttributeFilterable();
+      this.isEditableAvailableColumns = this.areAnyAvailableColumnsEditable();
+      this.isShowOptionButton =
+        this.isFilterable || this.isEditableAvailableColumns || this.columnConfig?.sortable === true;
     }
   }
 
@@ -183,6 +188,18 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
     );
   }
 
+  private areAnyAvailableColumnsEditable(): boolean {
+    if (this.availableColumns === undefined) {
+      return false;
+    }
+
+    return this.availableColumns.some(column => this.isColumnEditable(column));
+  }
+
+  private isColumnEditable(columnConfig: TableColumnConfigExtended): boolean {
+    return columnConfig.editable === true;
+  }
+
   public onFilterValues(): void {
     this.isFilterable &&
       this.modalService.createModal<InFilterModalData>({