machine/modules/machine-table-columns-dialog-sk/machine-table-columns-dialog-sk.ts

/**
 * @module modules/machine-table-columns-dialog-sk
 * @description <h2><code>machine-table-columns-dialog-sk</code></h2>
 *
 * Displays a dialog with all possible column names and allows the user to
 * choose which ones to hide.
 *
 */

import { html } from 'lit-html';
import { $ } from '../../../infra-sk/modules/dom';
import { define } from '../../../elements-sk/modules/define';
import { CheckOrRadio } from '../../../elements-sk/modules/checkbox-sk/checkbox-sk';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import '../../../elements-sk/modules/checkbox-sk';

export type ColumnTitles =
  | 'Machine'
  | 'Attached'
  | 'Device'
  | 'Mode'
  | 'Recovering'
  | 'Power'
  | 'Details'
  | 'Quarantined'
  | 'Task'
  | 'Battery'
  | 'Temperature'
  | 'Last Seen'
  | 'Uptime'
  | 'Dimensions'
  | 'Launched Swarming'
  | 'Note'
  | 'Annotation'
  | 'Version'
  | 'Delete'
  | 'Clear Quarantine';

export const ColumnOrder: ColumnTitles[] = [
  'Machine',
  'Attached',
  'Device',
  'Mode',
  'Recovering',
  'Power',
  'Details',
  'Quarantined',
  'Clear Quarantine',
  'Task',
  'Battery',
  'Temperature',
  'Last Seen',
  'Uptime',
  'Dimensions',
  'Launched Swarming',
  'Note',
  'Annotation',
  'Version',
  'Delete',
];

export class MachineTableColumnsDialogSk extends ElementSk {
  private dialog: HTMLDialogElement | null = null;

  private hiddenColumns: ColumnTitles[] = [];

  private resolve: ((value: ColumnTitles[] | undefined) => void) | null = null;

  constructor() {
    super(MachineTableColumnsDialogSk.template);
  }

  private static template = (ele: MachineTableColumnsDialogSk) => html` <dialog>
    <h2>Select columns to display.</h2>
    <div>
      ${ColumnOrder.map(
        (name: ColumnTitles) =>
          html`<checkbox-sk
            label=${name}
            ?checked=${!ele.hiddenColumns.includes(name)}
          ></checkbox-sk>`
      )}
    </div>

    <div class="controls">
      <button @click=${ele.okClick} id="ok">OK</button>
      <button @click=${ele.cancelClick} id="cancel">Cancel</button>
    </div>
  </dialog>`;

  connectedCallback(): void {
    super.connectedCallback();
    this._render();
    this.dialog = this.querySelector<HTMLDialogElement>('dialog');
  }

  edit(hidden: ColumnTitles[]): Promise<ColumnTitles[] | undefined> {
    return new Promise((resolve) => {
      this.resolve = resolve;
      this.hiddenColumns = [...hidden];
      this._render();
      this.dialog!.showModal();
    });
  }

  private cancelClick() {
    if (!this.resolve) {
      return;
    }
    this.resolve(undefined);
    this.dialog!.close();
    this.resolve = null;
  }

  private okClick() {
    if (!this.resolve) {
      return;
    }
    this.hiddenColumns = $<CheckOrRadio>('checkbox-sk', this)
      .filter((ch: CheckOrRadio) => !ch.checked)
      .map((ch: CheckOrRadio) => ch.label as ColumnTitles);
    this.resolve(this.hiddenColumns);
    this.dialog!.close();
    this.resolve = null;
  }
}

define('machine-table-columns-dialog-sk', MachineTableColumnsDialogSk);