scripts/src/common/DialogTable.ts

import { createTranslationFunc } from '../utils';

const t = createTranslationFunc({
  pl_PL: {
    Loading: 'Wczytywanie',
    'Previous page': 'Poprzednia strona',
    'Next page': 'Następna strona',
    'Something went wrong while loading the data':
      'Coś poszło nie tak podczas wczytywania danych',
  },
});

export type DialogTableColumn<T> = {
  header: string;
  accessor: (row: T, index: number, rows: T[]) => string;
};

export type LoadDataResult<T> = {
  data: T[];
  total: number;
};

export class DialogTable<T> {
  prevPageId: string;
  selectId: string;
  nextPageId: string;
  constructor(
    private readonly id: string,
    private readonly columns: DialogTableColumn<T>[],
    private readonly limit: number,
    private readonly loadData: (
      page: number,
      limit: number
    ) => Promise<LoadDataResult<T>>
  ) {
    this.prevPageId = `${this.id}_page_prev`;
    this.selectId = `${this.id}_page_select`;
    this.nextPageId = `${this.id}_page_next`;
  }

  public async render() {
    await this.renderPage(1);
  }

  private async renderPage(page: number) {
    window.Dialog.show(`${this.id}_loading`, `<p>${t('Loading')}...</p>`);

    try {
      const { data, total } = await this.loadData(page, this.limit);

      window.Dialog.show(
        this.id,
        `
      ${this.buildPagination(page, total)}
      ${this.buildTable(data)}
    `
      );

      this.addEventListeners(page);
    } catch (err) {
      console.error(err);
      window.Dialog.close();
      window.UI.ErrorMessage(t('Something went wrong while loading the data'));
    }
  }

  private buildPagination(page: number, total: number): string {
    const maxPage = Math.ceil(total / this.limit);

    const pageOpts = [];
    for (let i = 1; i <= (page > maxPage ? page : maxPage); i++) {
      pageOpts.push(
        `<option${
          i === page ? ' disabled selected' : ''
        } value="${i}">${i}</option>`
      );
    }

    return `
      <div style="display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 10px">
          <button title="${t(
            'Previous page'
          )}" style="margin-right: 5px" class="btn" id="${this.prevPageId}"${
      page <= 1 ? ' disabled' : ''
    }>&lt;</button>
          <select style="margin-right: 5px" id="${this.selectId}">
              ${pageOpts.join('')}
          </select>
          <button title="${t('Next page')}" class="btn" id="${
      this.nextPageId
    }"${page >= maxPage ? ' disabled' : ''}>&gt;</button>
      </div>    
    `;
  }

  private buildTable(data: T[]) {
    return `
      <table style="width: 100%" class="vis">
        <tbody>
          <tr>
            ${this.columns.map((col) => `<th>${col.header}</th>`).join('')}
          </tr>
          ${data
            .map(
              (r, index) => `
            <tr>
                ${this.columns
                  .map((col) => `<td>${col.accessor(r, index, data)}</td>`)
                  .join('')}
            </tr>
          `
            )
            .join('')}
        </tbody>
      </table>      
      `;
  }

  private addEventListeners(page: number) {
    document
      .querySelector('#' + this.prevPageId)
      ?.addEventListener('click', () => {
        this.renderPage(page - 1);
      });

    document
      .querySelector('#' + this.selectId)
      ?.addEventListener('change', (e: Event) => {
        if (!(e.currentTarget instanceof HTMLSelectElement)) {
          return;
        }

        this.renderPage(parseInt(e.currentTarget.value));
      });

    document
      .querySelector('#' + this.nextPageId)
      ?.addEventListener('click', () => {
        this.renderPage(page + 1);
      });
  }
}