@digital-realty/ix-grid 1.0.6

package/src/components/IxGridRowFilter.ts

@@ -0,0 +1,352 @@
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import { IxGridViewStyles } from '../grid-view-styles.js';
+import { IxGridRowFilterStyles } from './grid-row-filter-styles.js';
+import type { Column } from '../IxGrid.js';
+import { copy } from '../ix-grid-copy.js';
+
+export interface Filter {
+  columnField: string;
+  operatorValue: string;
+  value: string;
+}
+
+@customElement('ix-grid-row-filter')
+export class IxGridRowFilter extends LitElement {
+  static readonly styles = [IxGridViewStyles, IxGridRowFilterStyles];
+
+  @property({ type: Array }) columns: Column[] = [];
+
+  @state() private isDropdownVisible: boolean = false;
+
+  @state() private filters: Filter[] = [];
+
+  @state() private filterableColumns: Column[] = [];
+
+  @state() private filterColumns: string[] = [];
+
+  @state() private activeFilters: Filter[] = [];
+
+  @state() private mapSelect: boolean = false;
+
+  updateActiveFilters() {
+    this.activeFilters = this.filters.filter(filter => filter.value.length > 0);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.closeOnOuterClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('click', this.closeOnOuterClick);
+  }
+
+  firstUpdated() {
+    this.filterableColumns = this.columns.filter(column => column.filterable);
+    this.filterColumns = this.filterableColumns.map(column => column.name);
+    this.filters = this.parseFilterQueryString();
+    if (!this.filters.length) {
+      this.addFilter();
+    }
+    this.updateActiveFilters();
+  }
+
+  get filterNames() {
+    return this.filters.map(filter => filter.columnField);
+  }
+
+  get unselectedFilters() {
+    return this.filterColumns.filter(f => !this.filterNames.includes(f));
+  }
+
+  closeOnOuterClick = (e: Event) => {
+    if (!e.composedPath().includes(this)) {
+      this.isDropdownVisible = false;
+    }
+  };
+
+  parseFilterQueryString(): Filter[] {
+    const params = new URLSearchParams(window.location.search);
+    const filters: Filter[] = [];
+
+    for (const [key, value] of params) {
+      if (this.filterColumns.includes(key)) {
+        filters.push({
+          columnField: key,
+          operatorValue: 'contains',
+          value,
+        });
+      }
+    }
+
+    return filters;
+  }
+
+  dispatchUpdate() {
+    this.dispatchEvent(
+      new CustomEvent('rowFilter', {
+        detail: {
+          filters: this.filters.filter(filter => filter.value.length >= 3),
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  addFilter() {
+    const nextFilter =
+      this.filterColumns.find(filter => !this.filterNames.includes(filter)) ||
+      '';
+    this.filters = [
+      ...this.filters,
+      {
+        columnField: nextFilter,
+        operatorValue: 'contains',
+        value: '',
+      },
+    ];
+    this.updateActiveFilters();
+  }
+
+  clearFilters() {
+    this.filters = [];
+    this.addFilter();
+    this.dispatchUpdate();
+  }
+
+  removeFilter(index: number) {
+    this.filters = this.filters.filter((_, i) => i !== index);
+    this.dispatchUpdate();
+    if (this.filters.length === 0) {
+      this.isDropdownVisible = false;
+      this.addFilter();
+    }
+  }
+
+  private onfilterColumnChange(index: number, e: Event) {
+    const selectedValue = (e.target as HTMLSelectElement).value;
+    this.filters[index].columnField = selectedValue;
+
+    this.filters = [...this.filters];
+
+    if (this.filters[index].value.length >= 3) {
+      this.dispatchUpdate();
+    }
+  }
+
+  private onfilterValueChange(index: number, e: Event) {
+    const oldValueLength = this.filters[index].value.length;
+    const { value } = e.target as HTMLInputElement;
+    this.filters[index].value = value;
+
+    const newValueLength = this.filters[index].value.length;
+    if (
+      this.filters[index].columnField.length > 0 &&
+      (newValueLength >= 3 || newValueLength < oldValueLength)
+    ) {
+      this.dispatchUpdate();
+    }
+    this.updateActiveFilters();
+  }
+
+  renderToolTip() {
+    if (this.isDropdownVisible) {
+      return copy.hideFilters;
+    }
+    if (!this.activeFilters.length) {
+      return copy.showFilters;
+    }
+    return html` <p>${this.activeFilters.length} ${copy.activeFilter}</p>
+      <ul>
+        ${this.activeFilters.map(
+          filter => html`<li>
+            ${filter.columnField} ${filter.operatorValue} ${filter.value}
+          </li>`
+        )}
+      </ul>`;
+  }
+
+  renderFilterInput(value: Filter, index: number) {
+    const options = [value.columnField, ...this.unselectedFilters];
+    const filterOptions = this.filterableColumns.filter(column =>
+      options.includes(column.name)
+    );
+    return html`
+      <div class="filter-form">
+        <div class="filter-remove filter-form-column">
+          <div class="form-group">
+            <span
+              class="close material-icons"
+              @click=${() => this.removeFilter(index)}
+              @keyDown=${(e: KeyboardEvent) => {
+                if (e.key === ' ' || e.key === 'Enter') {
+                  this.removeFilter(index);
+                }
+              }}
+              >close</span
+            >
+          </div>
+        </div>
+        ${this.mapSelect
+          ? html`<div
+              class="filter-form-column filter-form-column-border filterColumnField"
+            >
+              <div class="form-group">
+                <label
+                  class="form-group-column-label"
+                  title="select: ${value.columnField}, options: ${filterOptions.map(
+                    column => `value=${column.name}, selected=${
+                      column.name === value.columnField
+                    }, ${column.header}
+                `
+                  )}"
+                  >Columns</label
+                >
+
+                <select
+                  @change=${(e: Event) => this.onfilterColumnChange(index, e)}
+                  .value=${value.columnField}
+                  data-v=${value.columnField}
+                >
+                  ${filterOptions.map(
+                    column => html`
+                      <option
+                        value=${column.name}
+                        ?selected=${column.name === value.columnField}
+                      >
+                        ${column.header}
+                      </option>
+                    `
+                  )}
+                </select>
+              </div>
+            </div>`
+          : nothing}
+
+        <div
+          class="filter-form-column filter-form-column-border filterColumnField"
+        >
+          <div class="filter-form-group">
+            <label
+              class="form-group-column-label"
+              title="select: ${value.columnField}, options: ${filterOptions.map(
+                column => `value=${column.name}, selected=${
+                  column.name === value.columnField
+                }, ${column.header}
+                `
+              )}"
+              ><span>Columns</span>
+              <select
+                @change=${(e: Event) => this.onfilterColumnChange(index, e)}
+                .value=${value.columnField}
+                data-v=${value.columnField}
+              >
+                ${repeat(
+                  filterOptions,
+                  (column: Column) => column.name,
+                  (column: Column) => html`
+                    <option
+                      value=${column.name}
+                      ?selected=${column.name === value.columnField}
+                    >
+                      ${column.header}
+                    </option>
+                  `
+                )}
+              </select>
+            </label>
+          </div>
+        </div>
+
+        <div
+          class="filter-form-column filter-form-column-border filterOperatorField"
+        >
+          <div class="filter-form-group">
+            <label class="form-group-operator-label"
+              ><span>Operator</span>
+              <select>
+                <option select="select">contains</option>
+              </select>
+            </label>
+          </div>
+        </div>
+        <div
+          class="filter-form-column filter-form-column-border filterValueField"
+        >
+          <div class="filter-form-group">
+            <label class="form-group-value-label"
+              ><span>Value</span>
+              <input
+                placeholder="Filter value"
+                @input=${(e: Event) => this.onfilterValueChange(index, e)}
+                .value=${value.value}
+              />
+            </label>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  renderDropdown() {
+    const disableAddButton =
+      this.filters.length >= this.filterColumns.length ||
+      this.activeFilters.length < this.filters.length;
+    return html` <div class="filter-dropdown-content">
+      <div class="filter-body">
+        ${this.filters.map((filter, index) =>
+          this.renderFilterInput(filter, index)
+        )}
+      </div>
+      <div class="filter-footer">
+        <button
+          class="add-filter-button"
+          @click="${() => this.addFilter()}"
+          ?disabled=${disableAddButton}
+        >
+          <span class="add material-icons">add </span>
+          <span class="add">ADD FILTER</span>
+        </button>
+        <button
+          class="clear"
+          @click="${() => this.clearFilters()}"
+          ?disabled=${this.activeFilters.length === 0}
+        >
+          <span class="add">CLEAR ALL</span>
+        </button>
+      </div>
+    </div>`;
+  }
+
+  render() {
+    return html` <div class="grid-menu">
+      <div class="filter-container tooltip-container">
+        <button
+          class="filter_list filter-button"
+          @click=${() => {
+            this.isDropdownVisible = !this.isDropdownVisible;
+          }}
+          @keyDown=${() => {
+            this.isDropdownVisible = !this.isDropdownVisible;
+          }}
+        >
+          ${this.activeFilters.length > 0
+            ? html`<span class="filter-superscript"
+                >${this.activeFilters.length}</span
+              >`
+            : nothing}
+          <ix-icon-button icon="filter_list"></ix-icon-button>
+          <span class="filter">${copy.filters}</span>
+        </button>
+        <div class="tool-tip">${this.renderToolTip()}</div>
+        ${this.isDropdownVisible ? this.renderDropdown() : nothing}
+      </div>
+    </div>`;
+  }
+}

package/src/components/IxPagination.ts

@@ -0,0 +1,85 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon-button/ix-icon-button.js';
+import '@digital-realty/ix-select/ix-select.js';
+import { PaginationStyles } from './pagination-styles.js';
+import { copy } from '../ix-grid-copy.js';
+
+@customElement('ix-pagination')
+export class IxPagination extends LitElement {
+  static readonly styles = [PaginationStyles];
+
+  @property({ type: Number }) recordCount = 0;
+
+  @property({ type: Number }) page = 1;
+
+  @property({ type: Number }) pageSize = 10;
+
+  @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];
+
+  private changePage(offset: number) {
+    this.page += offset;
+    this.updatePagination();
+  }
+
+  updatePagination(page = this.page, pageSize = this.pageSize) {
+    this.dispatchEvent(
+      new CustomEvent('updatePagination', {
+        detail: {
+          page,
+          pageSize,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    const back = this.page > 1;
+    const next = this.recordCount > this.page * this.pageSize;
+    return html` <div class="pagination">
+      <p>${copy.rowsPerPage}:</p>
+      <ix-select
+        wide-menu
+        class="pagination__select-input"
+        @request-selection=${(e: Event) => {
+          const el = e.target as HTMLInputElement;
+          this.pageSize = Number(el.value);
+          this.updatePagination();
+        }}
+        selected-index=${this.pageSizes.indexOf(this.pageSize)}
+        filled
+      >
+        ${this.pageSizes.map(
+          option => html`
+            <ix-select-option class="select-option" value=${option}>
+              <div slot="headline">${option}</div>
+            </ix-select-option>
+          `
+        )}
+      </ix-select>
+      <p>
+        ${(this.page - 1) * this.pageSize + 1} -
+        ${this.page * this.pageSize > this.recordCount
+          ? html`${this.recordCount}`
+          : html`${this.page * this.pageSize}`}
+        of ${this.recordCount}
+      </p>
+      <div class="pagination-nav">
+        <ix-icon-button
+          ?disabled=${!back}
+          @click=${() => back && this.changePage(-1)}
+          icon="chevron_left"
+        >
+        </ix-icon-button>
+        <ix-icon-button
+          ?disabled=${!next}
+          @click=${() => next && this.changePage(+1)}
+          icon="chevron_right"
+        >
+        </ix-icon-button>
+      </div>
+    </div>`;
+  }
+}

package/src/components/grid-column-filter-styles.ts

@@ -0,0 +1,71 @@
+import { css } from 'lit';
+
+export const IxGridColumnFilterStyles = css`
+  .dropdown-content {
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+    padding: 10px;
+  }
+  .dropdown-content > div {
+    margin: 0px;
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+    letter-spacing: 0.25px;
+    color: #092241;
+    display: block;
+    cursor: pointer;
+  }
+  .dropdown-content span:hover {
+    background-color: #f1f1f1;
+  }
+  .dropdown-content label {
+    display: flex;
+    align-items: center;
+  }
+  .active {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 8px;
+    width: 8px;
+    background-color: #db0028;
+    border-radius: 50%;
+  }
+  ix-switch {
+    padding: 2px 4px;
+    --md-switch-track-height: 12px;
+    --md-switch-track-width: 35px;
+    --md-sys-color-primary: rgba(20, 86, 224, 0.68);
+    --md-sys-color-on-primary: #1456e0;
+    --md-sys-color-primary-container: #1456e0;
+    --md-switch-handle-height: 19px;
+    --md-switch-handle-width: 18px;
+    --md-sys-color-surface-container-highest: #9e9e9e;
+    --md-sys-color-outline: #9e9e9e;
+    --md-switch-pressed-handle-height: 19px;
+    --md-switch-pressed-handle-width: 18px;
+    --md-switch-handle-color: #fff;
+    --md-sys-color-on-surface-variant: white;
+    --selected-handle-height: 19px;
+    --selected-handle-width: 18px;
+    --_pressed-handle-height: 19px;
+    --_pressed-handle-width: 18px;
+    --md-switch-selected-handle-height: 19px;
+    --md-switch-selected-handle-width: 18px;
+    margin: 11px 8px 1px 0px;
+  }
+  .list {
+    position: relative;
+  }
+`;