feat: table add/remove columns (#333)

* feat: table add/remove columns

* fix: some clean up

* fix: pr comments and tests

* fix: linting and tests

* fix: pr comments

* fix: sort

* fix: json columns are always editable

Author: jake-bassett

projects/components/src/checkbox/checkbox.component.scss

@@ -2,10 +2,22 @@
 
 :host {
   ::ng-deep .mat-checkbox-checked .mat-checkbox-background,
-  .mat-checkbox-indeterminate .mat-checkbox-background {
+  .mat-checkbox-indeterminate {
     background-color: $blue-5;
   }
 
+  ::ng-deep .mat-checkbox-disabled {
+    .mat-checkbox-frame {
+      opacity: 0.4;
+    }
+
+    &.mat-checkbox-checked .mat-checkbox-background,
+    .mat-checkbox-indeterminate {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
   ::ng-deep .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
     background-color: $blue-5;
   }

projects/components/src/filtering/filter/filter-attribute.ts

@@ -5,4 +5,6 @@ export interface FilterAttribute {
   displayName: string;
   units?: string;
   type: FilterAttributeType;
+  onlySupportsAggregation?: boolean;
+  onlySupportsGrouping?: boolean;
 }

projects/components/src/modal/modal-container.component.scss

@@ -17,6 +17,11 @@
   }
 
   &.modal-size-medium {
+    height: 456px;
+    width: 530px;
+  }
+
+  &.modal-size-large {
     height: 720px;
     width: 640px;
   }

projects/components/src/modal/modal.ts

@@ -11,7 +11,8 @@ export interface ModalConfig<TData = unknown> {
 
 export const enum ModalSize {
   Small = 'small',
-  Medium = 'medium'
+  Medium = 'medium',
+  Large = 'large'
 }
 
 export const MODAL_DATA = new InjectionToken<unknown>('MODAL_DATA');

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

@@ -0,0 +1,40 @@
+@import 'mixins';
+
+.edit-modal {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  padding-left: 22px;
+  padding-right: 22px;
+  padding-bottom: 6px;
+
+  .column-items {
+    height: 100%;
+    overflow: auto;
+
+    .column-item {
+      height: 36px;
+      padding: 2px 8px;
+      cursor: pointer;
+
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background: $gray-1;
+      }
+    }
+  }
+
+  .controls {
+    display: flex;
+    border-top: 1px solid $gray-2;
+    padding-top: 24px;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ButtonRole } from '../../button/button';
+import { ModalRef, MODAL_DATA } from '../../modal/modal';
+import { TableColumnConfigExtended } from '../table.service';
+
+@Component({
+  selector: 'ht-edit-columns-modal',
+  styleUrls: ['./table-edit-columns-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="edit-modal">
+      <div class="column-items">
+        <ng-container *ngFor="let column of this.editColumns">
+          <div class="column-item">
+            <ht-checkbox
+              [label]="column.title"
+              [htTooltip]="column.titleTooltip"
+              [checked]="column.visible"
+              [disabled]="!column.editable"
+              (checkedChange)="column.visible = $event"
+            ></ht-checkbox>
+          </div>
+        </ng-container>
+      </div>
+
+      <div class="controls">
+        <ht-button
+          label="Cancel"
+          class="cancel-button"
+          role="${ButtonRole.Tertiary}"
+          (click)="this.onCancel()"
+        ></ht-button>
+        <ht-button
+          label="Apply"
+          class="action-button"
+          role="${ButtonRole.Additive}"
+          (click)="this.onApply()"
+        ></ht-button>
+      </div>
+    </div>
+  `
+})
+export class TableEditColumnsModalComponent {
+  public readonly editColumns: TableColumnConfigExtended[];
+
+  public constructor(
+    private readonly modalRef: ModalRef<TableColumnConfigExtended[]>,
+    @Inject(MODAL_DATA) public readonly modalData: TableColumnConfigExtended[]
+  ) {
+    this.editColumns = this.modalData
+      .filter(column => (column.attribute?.type as string) !== '$$state')
+      .sort((a, b) => (a.visible === b.visible ? 0 : a.visible ? -1 : 1));
+  }
+
+  public onApply(): void {
+    this.modalRef.close(this.editColumns); // $$state columns filtered out, but they are recreated by table
+  }
+
+  public onCancel(): void {
+    this.modalRef.close();
+  }
+}

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

@@ -9,6 +9,7 @@ import { IconSize } from '../../icon/icon-size';
 import { ModalSize } from '../../modal/modal';
 import { ModalService } from '../../modal/modal.service';
 import { TableCellAlignmentType } from '../cells/types/table-cell-alignment-type';
+import { TableEditColumnsModalComponent } from '../columns/table-edit-columns-modal.component';
 import { TableCdkColumnUtil } from '../data/table-cdk-column-util';
 import { TableSortDirection } from '../table-api';
 import { TableColumnConfigExtended } from '../table.service';
@@ -24,11 +25,11 @@ import { TableColumnConfigExtended } from '../table.service';
       [htTooltip]="this.columnConfig.titleTooltip || this.columnConfig.title"
       class="table-header-cell-renderer"
     >
-      <ng-container *ngIf="this.columnConfig?.filterable && this.leftAlignFilterButton">
+      <ng-container *ngIf="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.columnConfig?.filterable && !this.leftAlignFilterButton">
+      <ng-container *ngIf="!this.leftAlignFilterButton">
         <ng-container *ngTemplateOutlet="optionsButton"></ng-container>
       </ng-container>
 
@@ -51,6 +52,8 @@ 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>
+              <div class="popover-item" (click)="this.onEditColumns()" *ngIf="this.editable">Edit Columns</div>
             </div>
           </ht-popover-content>
         </ht-popover>
@@ -62,9 +65,15 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
   public readonly SORT_ASC: TableSortDirection = TableSortDirection.Ascending;
   public readonly SORT_DESC: TableSortDirection = TableSortDirection.Descending;
 
+  @Input()
+  public editable?: boolean = false;
+
   @Input()
   public metadata?: FilterAttribute[];
 
+  @Input()
+  public availableColumns?: TableColumnConfigExtended[] = [];
+
   @Input()
   public columnConfig?: TableColumnConfigExtended;
 
@@ -77,6 +86,9 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
   @Output()
   public readonly sortChange: EventEmitter<TableSortDirection | undefined> = new EventEmitter();
 
+  @Output()
+  public readonly columnsChange: EventEmitter<TableColumnConfigExtended[]> = new EventEmitter();
+
   public alignment?: TableCellAlignmentType;
   public leftAlignFilterButton: boolean = false;
   public classes: string[] = [];
@@ -139,17 +151,31 @@ export class TableHeaderCellRendererComponent implements OnInit, OnChanges {
     this.isFilterable &&
       this.modalService.createModal<InFilterModalData>({
         content: InFilterModalComponent,
-        size: ModalSize.Small,
+        size: ModalSize.Medium,
         showControls: true,
         title: 'Filter Column',
         data: {
-          metadata: this.metadata!,
+          metadata: this.metadata || [],
           attribute: this.columnConfig?.attribute!,
           values: this.columnConfig?.filterValues ?? []
         }
       });
   }
 
+  public onEditColumns(): void {
+    this.modalService
+      .createModal<TableColumnConfigExtended[], TableColumnConfigExtended[]>({
+        content: TableEditColumnsModalComponent,
+        size: ModalSize.Medium,
+        showControls: true,
+        title: 'Edit Columns',
+        data: this.availableColumns ?? []
+      })
+      .closed$.subscribe(columnConfigs => {
+        this.columnsChange.emit(columnConfigs);
+      });
+  }
+
   private getNextSortDirection(sortDirection?: TableSortDirection): TableSortDirection | undefined {
     // Order: undefined -> Ascending -> Descending -> undefined
     switch (sortDirection) {

projects/components/src/table/table-api.ts

@@ -11,9 +11,10 @@ export interface TableColumnConfig {
   title?: string;
   titleTooltip?: string;
   sort?: TableSortDirection;
-  visible?: boolean;
-  sortable?: boolean;
-  filterable?: boolean;
+  visible?: boolean; // Is the column shown
+  editable?: boolean; // Can the column be added/removed
+  sortable?: boolean; // Can the column be sorted
+  filterable?: boolean; // Can the column be filtered
   alignment?: TableCellAlignmentType;
   width?: number | string;
   onClick?(row: TableRow, column: TableColumnConfig): void;

projects/components/src/table/table.component.test.ts

@@ -573,7 +573,17 @@ describe('Table component', () => {
     spectator.dispatchMouseEvent('cdk-table', 'mousemove', 1, 0);
     spectator.dispatchMouseEvent('cdk-table', 'mouseup');
 
-    expect(spectator.component.columnConfigsSubject.value[0].width).toBe('101px');
-    expect(spectator.component.columnConfigsSubject.value[1].width).toBe('199px');
+    runFakeRxjs(({ expectObservable }) => {
+      expectObservable(spectator.component.columnConfigs$).toBe('x', {
+        x: [
+          expect.objectContaining({
+            width: '101px'
+          }),
+          expect.objectContaining({
+            width: '199px'
+          })
+        ]
+      });
+    });
   }));
 });