netbox/netbox/project-static/src/tables/interfaceTable.ts

import { getElements, replaceAll, findFirstAdjacent } from '../util';

type ShowHide = 'show' | 'hide';

function isShowHide(value: unknown): value is ShowHide {
  return typeof value === 'string' && ['show', 'hide'].includes(value);
}

/**
 * When this error is thrown, it's an indication that we don't need to manage this table, because
 * it doesn't contain the required elements.
 */
class TableStateError extends Error {
  table: HTMLTableElement;
  constructor(message: string, table: HTMLTableElement) {
    super(message);
    this.table = table;
  }
}

/**
 * Manage the display text of a button element as well as the visibility of its corresponding rows.
 */
class ButtonState {
  /**
   * Underlying Button DOM Element
   */
  public button: HTMLButtonElement;

  /**
   * Table rows provided in constructor
   */
  private rows: NodeListOf<HTMLTableRowElement>;

  constructor(button: HTMLButtonElement, rows: NodeListOf<HTMLTableRowElement>) {
    this.button = button;
    this.rows = rows;
  }

  /**
   * Remove visibility of button state rows.
   */
  private hideRows(): void {
    for (const row of this.rows) {
      row.classList.add('d-none');
    }
  }

  /**
   * Update the DOM element's `data-state` attribute.
   */
  public set buttonState(state: Nullable<ShowHide>) {
    if (isShowHide(state)) {
      this.button.setAttribute('data-state', state);
    }
  }

  /**
   * Get the DOM element's `data-state` attribute.
   */
  public get buttonState(): Nullable<ShowHide> {
    const state = this.button.getAttribute('data-state');
    if (isShowHide(state)) {
      return state;
    }
    return null;
  }

  /**
   * Update the DOM element's display text to reflect the action opposite the current state. For
   * example, if the current state is to hide enabled interfaces, the DOM text should say
   * "Show Enabled Interfaces".
   */
  private toggleButton(): void {
    if (this.buttonState === 'show') {
      this.button.innerText = replaceAll(this.button.innerText, 'Show', 'Hide');
    } else if (this.buttonState === 'hide') {
      this.button.innerText = replaceAll(this.button.innerHTML, 'Hide', 'Show');
    }
  }

  /**
   * Toggle the DOM element's `data-state` attribute.
   */
  private toggleState(): void {
    if (this.buttonState === 'show') {
      this.buttonState = 'hide';
    } else if (this.buttonState === 'hide') {
      this.buttonState = 'show';
    }
  }

  /**
   * Toggle all controlled elements.
   */
  private toggle(): void {
    this.toggleState();
    this.toggleButton();
  }

  /**
   * When the button is clicked, toggle all controlled elements and hide rows based on
   * buttonstate.
   */
  public handleClick(event: Event): void {
    const button = event.currentTarget as HTMLButtonElement;
    if (button.isEqualNode(this.button)) {
      this.toggle();
    }
    if (this.buttonState === 'hide') {
      this.hideRows();
    }
  }
}

/**
 * Manage the state of a table and its elements.
 */
class TableState {
  /**
   * Underlying DOM Table Element.
   */

  private table: HTMLTableElement;
  /**
   * Instance of ButtonState for the 'show/hide enabled rows' button.
   */
  // @ts-expect-error null handling is performed in the constructor
  private enabledButton: ButtonState;

  /**
   * Instance of ButtonState for the 'show/hide disabled rows' button.
   */
  // @ts-expect-error null handling is performed in the constructor
  private disabledButton: ButtonState;

  /**
   * Instance of ButtonState for the 'show/hide virtual rows' button.
   */
  // @ts-expect-error null handling is performed in the constructor
  private virtualButton: ButtonState;

  /**
   * Instance of ButtonState for the 'show/hide virtual rows' button.
   */
  // @ts-expect-error null handling is performed in the constructor
  private disconnectedButton: ButtonState;

  /**
   * All table rows in table
   */
  private rows: NodeListOf<HTMLTableRowElement>;

  constructor(table: HTMLTableElement) {
    this.table = table;
    this.rows = this.table.querySelectorAll('tr');
    try {
      const toggleEnabledButton = findFirstAdjacent<HTMLButtonElement>(
        this.table,
        'button.toggle-enabled',
      );
      const toggleDisabledButton = findFirstAdjacent<HTMLButtonElement>(
        this.table,
        'button.toggle-disabled',
      );
      const toggleVirtualButton = findFirstAdjacent<HTMLButtonElement>(
        this.table,
        'button.toggle-virtual',
      );
      const toggleDisconnectedButton = findFirstAdjacent<HTMLButtonElement>(
        this.table,
        'button.toggle-disconnected',
      );

      if (toggleEnabledButton === null) {
        throw new TableStateError("Table is missing a 'toggle-enabled' button.", table);
      }

      if (toggleDisabledButton === null) {
        throw new TableStateError("Table is missing a 'toggle-disabled' button.", table);
      }

      if (toggleVirtualButton === null) {
        throw new TableStateError("Table is missing a 'toggle-virtual' button.", table);
      }

      if (toggleDisconnectedButton === null) {
        throw new TableStateError("Table is missing a 'toggle-disconnected' button.", table);
      }

      // Attach event listeners to the buttons elements.
      toggleEnabledButton.addEventListener('click', event => this.handleClick(event, this));
      toggleDisabledButton.addEventListener('click', event => this.handleClick(event, this));
      toggleVirtualButton.addEventListener('click', event => this.handleClick(event, this));
      toggleDisconnectedButton.addEventListener('click', event => this.handleClick(event, this));

      // Instantiate ButtonState for each button for state management.
      this.enabledButton = new ButtonState(
        toggleEnabledButton,
        table.querySelectorAll<HTMLTableRowElement>('tr[data-enabled="enabled"]'),
      );
      this.disabledButton = new ButtonState(
        toggleDisabledButton,
        table.querySelectorAll<HTMLTableRowElement>('tr[data-enabled="disabled"]'),
      );
      this.virtualButton = new ButtonState(
        toggleVirtualButton,
        table.querySelectorAll<HTMLTableRowElement>('tr[data-type="virtual"]'),
      );
      this.disconnectedButton = new ButtonState(
        toggleDisconnectedButton,
        table.querySelectorAll<HTMLTableRowElement>('tr[data-connected="disconnected"]'),
      );
    } catch (err) {
      if (err instanceof TableStateError) {
        // This class is useless for tables that don't have toggle buttons.
        console.debug('Table does not contain enable/disable toggle buttons');
        return;
      } else {
        throw err;
      }
    }
  }

  /**
   * When toggle buttons are clicked, reapply visability all rows and
   * pass the event to all button handlers
   *
   * @param event onClick event for toggle buttons.
   * @param instance Instance of TableState (`this` cannot be used since that's context-specific).
   */
  public handleClick(event: Event, instance: TableState): void {
    for (const row of this.rows) {
      row.classList.remove('d-none');
    }

    instance.enabledButton.handleClick(event);
    instance.disabledButton.handleClick(event);
    instance.virtualButton.handleClick(event);
    instance.disconnectedButton.handleClick(event);
  }
}

/**
 * Initialize table states.
 */
export function initInterfaceTable(): void {
  for (const element of getElements<HTMLTableElement>('table')) {
    new TableState(element);
  }
}