@digital-realty/ix-grid 1.0.6

package/src/IxGrid.ts

@@ -0,0 +1,229 @@
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '@vaadin/grid';
+import { columnBodyRenderer, columnHeaderRenderer } from '@vaadin/grid/lit.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+import './components/IxPagination.js';
+import './components/IxGridColumnFilter.js';
+import './components/IxGridRowFilter.js';
+import type { Filter } from './components/IxGridRowFilter.js';
+import { IxGridViewStyles } from './grid-view-styles.js';
+import { copy } from './ix-grid-copy.js';
+
+export interface Row {
+  [key: string]: string;
+}
+
+export interface Column {
+  name: string;
+  header: string;
+  bodyRenderer: (row: Row) => any;
+  width?: string;
+  sortable?: boolean;
+  filterable?: boolean;
+  hidden?: boolean;
+  frozenToEnd?: boolean;
+}
+
+export class IxGrid extends LitElement {
+  static readonly styles = [IxGridViewStyles];
+
+  @property({ type: Array }) columns: Column[] = [];
+
+  @property({ type: Array }) rows: Row[] = [];
+
+  @property({ type: String }) defaultEmptyText = 'No data to display';
+
+  @property({ type: String }) sortedColumn = '';
+
+  @property({ type: String }) sortDirection = '';
+
+  @property({ type: Boolean }) hideHeader = false;
+
+  @property({ type: Number }) rowLimit: number = 0;
+
+  @property({ type: Number }) page = 1;
+
+  @property({ type: Number }) pageSize = 10;
+
+  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];
+
+  @property({ type: Number }) recordCount = 0;
+
+  @property({ type: String }) localStorageID: string | undefined = undefined;
+
+  @state() private filters: Filter[] = [];
+
+  @state() isLoading = false;
+
+  @state() isExpanded = false;
+
+  get columnNames() {
+    return this.columns.map((column: Column) => column.name);
+  }
+
+  private async updatePage() {
+    const filters = this.filters.reduce(
+      (columnFilters: { [key: string]: string }, { columnField, value }) => ({
+        ...columnFilters,
+        [columnField]: value,
+      }),
+      {}
+    );
+
+    const urlParams: { [key: string]: string } = {
+      sort: this.sortedColumn,
+      order: this.sortDirection,
+      page: this.page.toString(),
+      size: this.pageSize.toString(),
+      ...filters,
+    };
+
+    const url = new URL(window.location.href);
+    const searchParams = new URLSearchParams(urlParams);
+    url.search = searchParams.toString();
+    window.history.replaceState(null, '', url.toString());
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          columnName: this.sortedColumn,
+          sortOrder: this.sortDirection,
+          page: this.page,
+          pageSize: this.pageSize,
+          filters,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  handleSort(column: string = '') {
+    if (this.sortedColumn !== column) {
+      this.sortDirection = 'asc';
+    } else {
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    }
+    this.sortedColumn = column;
+
+    this.updatePage();
+  }
+
+  private renderColumnHeader = (column: Column) => html`
+    <div
+      @click=${() => column.sortable && this.handleSort(column.name)}
+      @keyDown=${() => column.sortable && this.handleSort(column.name)}
+      class="header"
+    >
+      ${column.header}
+      ${column.sortable
+        ? html`<ix-icon title="Sort" class="header-sort-icon"
+            >${this.sortDirection === 'desc' &&
+            this.sortedColumn === column.name
+              ? `arrow_upward`
+              : `arrow_downward`}</ix-icon
+          >`
+        : nothing}
+    </div>
+  `;
+
+  private renderHeader = () => html`
+    <div class="grid-header">
+      <h2>
+        ${html`${this.recordCount}
+        ${copy.user}${this.recordCount === 1 ? '' : 's'}`}
+      </h2>
+      <div class="grid-menu">
+        <ix-grid-column-filter
+          .columns=${this.columns}
+          localStorageID=${ifDefined(this.localStorageID)}
+          @columnFilter=${(e: CustomEvent) => {
+            e.detail.columns.forEach((column: Column, id: number) => {
+              this.columns[id].hidden = column.hidden;
+            });
+            this.updatePage();
+          }}
+        ></ix-grid-column-filter>
+        <ix-icon-button icon="download"></ix-icon-button>
+        <ix-grid-row-filter
+          .columns=${this.columns}
+          @rowFilter=${(e: CustomEvent) => {
+            this.filters = e.detail.filters;
+            this.updatePage();
+          }}
+        ></ix-grid-row-filter>
+      </div>
+    </div>
+  `;
+
+  private renderRowLimitControls = () => {
+    if (this.rows.length <= this.rowLimit) return nothing;
+
+    return html`
+      <div class="row-limit">
+        <ix-button
+          appearance="text"
+          @click=${() => {
+            this.isExpanded = !this.isExpanded;
+          }}
+          has-icon
+        >
+          ${this.isExpanded ? copy.viewLess : copy.viewMore}
+          <ix-icon slot="icon">${this.isExpanded ? 'remove' : 'add'}</ix-icon>
+        </ix-button>
+      </div>
+    `;
+  };
+
+  private renderPaginationControls = () => html`
+    <ix-pagination
+      .page=${this.page}
+      .pageSize=${this.pageSize}
+      .pageSizes=${this.pageSizes}
+      .recordCount=${this.recordCount}
+      @updatePagination=${(e: CustomEvent) => {
+        this.page = e.detail.page;
+        this.pageSize = e.detail.pageSize;
+        this.updatePage();
+      }}
+    ></ix-pagination>
+  `;
+
+  render() {
+    return html`
+      <div class=${`grid-container ${this.isLoading ? 'loading' : ''}`}>
+        ${this.hideHeader ? nothing : this.renderHeader()}
+        <vaadin-grid
+          .items=${this.rowLimit > 0 && !this.isExpanded
+            ? this.rows.slice(0, this.rowLimit)
+            : this.rows}
+          all-rows-visible
+          column-reordering-allowed
+          theme="no-border"
+        >
+          ${this.columns?.map((column: Column) =>
+            column.name
+              ? html`<vaadin-grid-column
+                  ${columnHeaderRenderer(
+                    () => this.renderColumnHeader(column),
+                    this.sortDirection
+                  )}
+                  ${columnBodyRenderer(column.bodyRenderer, [])}
+                  resizable
+                  width=${ifDefined(column.width)}
+                  ?hidden=${column.hidden}
+                  ?frozen-to-end=${column.frozenToEnd}
+                ></vaadin-grid-column>`
+              : nothing
+          )}
+        </vaadin-grid>
+        ${this.rowLimit > 0
+          ? this.renderRowLimitControls()
+          : this.renderPaginationControls()}
+      </div>
+    `;
+  }
+}

package/src/components/IxGridColumnFilter.ts

@@ -0,0 +1,144 @@
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import '@digital-realty/ix-switch/ix-switch.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { IxGridColumnFilterStyles } from './grid-column-filter-styles.js';
+import type { Column } from '../IxGrid.js';
+
+const triggerKeys = [' ', 'Enter'];
+
+@customElement('ix-grid-column-filter')
+export class IxGridColumnFilter extends LitElement {
+  static readonly styles = [IxGridViewStyles, IxGridColumnFilterStyles];
+
+  @property({ type: Array }) columns: Column[] = [];
+
+  @property({ type: String }) localStorageID: string | undefined = undefined;
+
+  @state() private isDropdownVisible: boolean = false;
+
+  @state() disabledColumns: string[] = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.outerInteraction);
+    this.initializeLocalStorage();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this.outerInteraction);
+  }
+
+  outerInteraction = (e: Event) => {
+    if (!e.composedPath().includes(this)) {
+      this.isDropdownVisible = false;
+    }
+  };
+
+  initializeLocalStorage() {
+    if (this.localStorageID) {
+      const storedDisabledColumns = localStorage.getItem(this.localStorageID);
+
+      if (storedDisabledColumns) {
+        const disabledColumns = JSON.parse(storedDisabledColumns);
+        this.columns.forEach((column, id) => {
+          if (disabledColumns.includes(column.name)) {
+            this.columns[id].hidden = true;
+          }
+        });
+      }
+      this.dispatchUpdate();
+    }
+  }
+
+  toggleColumn(id: number) {
+    this.columns[id].hidden = !this.columns[id].hidden;
+
+    this.disabledColumns = this.columns
+      .filter((column: Column) => column.hidden)
+      .map((column: Column) => column.name);
+
+    if (this.localStorageID !== undefined) {
+      localStorage.setItem(
+        this.localStorageID,
+        JSON.stringify(this.disabledColumns)
+      );
+    }
+
+    this.dispatchUpdate();
+  }
+
+  updateColumn(e: Event, id: number) {
+    const input = e.target as HTMLElement;
+    const el = input.shadowRoot?.querySelector('input');
+
+    this.columns[id].hidden = !el?.checked;
+
+    this.disabledColumns = this.columns
+      .filter((column: Column) => column.hidden)
+      .map((column: Column) => column.name);
+
+    if (this.localStorageID !== undefined) {
+      localStorage.setItem(
+        this.localStorageID,
+        JSON.stringify(this.disabledColumns)
+      );
+    }
+
+    this.dispatchUpdate();
+  }
+
+  dispatchUpdate(columns = this.columns) {
+    this.dispatchEvent(
+      new CustomEvent('columnFilter', {
+        detail: {
+          columns,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    return html` <div class="grid-menu">
+      <span
+        @click=${() => {
+          this.isDropdownVisible = true;
+        }}
+        @keyDown=${(e: KeyboardEvent) => {
+          if (triggerKeys.includes(e.key)) {
+            this.isDropdownVisible = true;
+          }
+        }}
+        class="list list-dropdown"
+      >
+        <ix-icon-button icon="list"></ix-icon-button>
+        ${this.disabledColumns.length > 0
+          ? html`<div class="active"></div>`
+          : nothing}
+        ${this.isDropdownVisible
+          ? html` <div class="dropdown-content">
+              ${this.columns?.map(
+                (col: Column, id: number) => html`<div
+                  class=${col.hidden ? 'disabled' : ''}
+                >
+                  <label class="ix-switch-label">
+                    <ix-switch
+                      .selected=${!col.hidden}
+                      @change=${(e: Event) => this.updateColumn(e, id)}
+                    >
+                    </ix-switch>
+                    <p>${col.header}</p>
+                  </label>
+                </div>`
+              )}
+            </div>`
+          : nothing}
+      </span>
+    </div>`;
+  }
+}