@digital-realty/ix-grid 1.4.1-alpha.2 → 1.4.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-grid following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.4.1-alpha.2",
+  "version": "1.4.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -11,6 +11,7 @@
     ".": "./dist/index.js",
     "./ix-grid.js": "./dist/ix-grid.js",
     "./ix-grid-nav.js": "./dist/ix-grid-nav.js",
+    "./ix-grid.min.js": "./dist/ix-grid.min.js",
     "./ix-grid-no-rows.js": "./dist/ix-grid-no-rows.js",
     "./IxGridNav": "./dist/IxGridNav.js"
   },
@@ -22,21 +23,22 @@
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc && npm run analyze -- --exclude dist && rollup -c",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
-    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "eslint --ext .ts,.html . && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "test": "tsc && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/grid": "^1.1.1",
-    "@digital-realty/ix-button": "^3.4.1",
-    "@digital-realty/ix-date": "^1.2.2-alpha.1",
-    "@digital-realty/ix-icon": "^1.2.1",
-    "@digital-realty/ix-icon-button": "^1.2.1",
-    "@digital-realty/ix-menu": "^1.2.1",
-    "@digital-realty/ix-progress": "^1.3.1",
-    "@digital-realty/ix-select": "^1.2.1",
-    "@digital-realty/ix-switch": "^2.3.1",
+    "@digital-realty/grid": "^1.2.1",
+    "@digital-realty/ix-button": "^3.5.1",
+    "@digital-realty/ix-date": "^1.3.1",
+    "@digital-realty/ix-date-next": "^1.2.1",
+    "@digital-realty/ix-icon": "^1.3.1",
+    "@digital-realty/ix-icon-button": "^1.3.1",
+    "@digital-realty/ix-menu": "^1.3.1",
+    "@digital-realty/ix-progress": "^1.4.1",
+    "@digital-realty/ix-select": "^1.3.1",
+    "@digital-realty/ix-switch": "^2.4.1",
     "@lit/react": "^1.0.5",
     "date-fns": "^4.1.0",
     "lit": "^3.2.1",
@@ -45,39 +47,31 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
-    "@digital-realty/ix-app-logic": "^1.2.2-alpha.25",
-    "@open-wc/eslint-config": "^9.2.1",
     "@open-wc/testing": "^3.1.6",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-replace": "^6.0.2",
-    "@rollup/plugin-typescript": "^12.1.4",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-import-maps": "^0.2.1",
     "@web/dev-server-rollup": "^0.6.4",
     "@web/test-runner": "^0.20.2",
-    "concurrently": "^9.1.0",
-    "eslint": "^8.31.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
     "rollup": "^4.29.1",
-    "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-summary": "^2.0.0",
-    "rollup-plugin-uglify": "^6.0.4",
-    "sinon": "^19.0.2",
+    "sinon": "^21.1.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.5.2"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
-    "extends": [
-      "@open-wc",
-      "prettier"
-    ],
     "plugins": [
       "@typescript-eslint"
     ],
@@ -112,5 +106,6 @@
       "eslint --fix",
       "prettier --write"
     ]
-  }
+  },
+  "gitHead": "da06737d6707fd3d4ef898ba0fa632e7b3ed8019"
 }

package/rollup.config.mjs

@@ -1,56 +1,18 @@
 // Import rollup plugins
-import pkgMinifyHTML from 'rollup-plugin-minify-html-literals';
-const minifyHTML = pkgMinifyHTML.default;
 import summary from 'rollup-plugin-summary';
-import { uglify } from "rollup-plugin-uglify";
-import nodeResolve from '@rollup/plugin-node-resolve';
-import { rollUpExternals } from "@digital-realty/ix-app-logic/build_scripts/shared-deps.js";
-import typescript from '@rollup/plugin-typescript';
-
-// const sourceDir = './src';
-// const outDir = './dist';
-//
-// export default {
-//   input: './src/index.ts',
-//   // input: {
-//   //   'ix-grid': `${sourceDir}/IxGrid.ts`,
-//   //   'ix-grid-nav': `${sourceDir}/components/IxGridNav.ts`,
-//   //   'ix-grid-no-rows': `${sourceDir}/components/IxGridNoRows.ts`,
-//   // },
-//   external: id => rollUpExternals(id),
-//   plugins: [
-//     typescript(),
-//     nodeResolve({
-//       exportConditions: ['browser', 'development'],
-//       browser: true,
-//     }),
-//     // Minify HTML template literals
-//     minifyHTML(),
-//     // Minify JS
-//     uglify(),
-//     // Print bundle summary
-//     summary(),
-//   ],
-//   output: {
-//     dir: outDir,
-//     entryFileNames: '[name].min.js',
-//     format: 'esm'
-//   },
-// };
+import terser from '@rollup/plugin-terser';
 
 const target = './dist/ix-grid';
 
 export default {
   input: `${target}.js`,
   plugins: [
-    // Minify HTML template literals
-    minifyHTML(),
     // Minify JS
-    uglify(),
+    terser(),
     // Print bundle summary
-    summary(),
+    summary(),    
   ],
   output: {
     file: `${target}.min.js`,
   },
-};
+};

package/src/IxGrid.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import '@digital-realty/grid';
 import type { GridItemModel } from '@digital-realty/grid';
 import { columnHeaderRenderer } from '@digital-realty/grid/lit.js';
@@ -10,7 +9,7 @@ import { html, LitElement, nothing, render } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { formatDate } from 'date-fns';
+import { formatDate } from 'date-fns/format.js';
 import './components/IxGridColumnFilter.js';
 import './components/IxGridDownloadMenu.js';
 import './components/IxGridRowFilter.js';
@@ -57,6 +56,10 @@ export interface FieldOperator {
   operator: FilterOperator;
 }
 
+export interface SessionStorageData {
+  pageSize?: number;
+}
+
 export class IxGrid extends LitElement {
   static readonly styles = [IxGridViewStyles];
 
@@ -73,6 +76,11 @@ export class IxGrid extends LitElement {
 
   @property({ type: String }) variantClass = '';
 
+  @property({ type: Boolean, attribute: 'simple-pagination' })
+  hasSimplePagination = false;
+
+  @property({ type: String }) theme = 'no-border';
+
   @property({ type: Array }) readonly columns: Column[] = [];
 
   @property({ type: Array }) rows: Row[] = [];
@@ -135,6 +143,9 @@ export class IxGrid extends LitElement {
 
   @property({ type: Boolean }) disableAddButton = false;
 
+  @property({ type: Boolean, attribute: 'show-view-more' }) showViewMore =
+    false;
+
   @property({ type: String }) addButtonLabel: string = copy.add;
 
   @property({ type: Function }) onAddButtonClick?: any;
@@ -147,6 +158,11 @@ export class IxGrid extends LitElement {
 
   @property({ type: Function }) onRemoveAllButtonClick?: any;
 
+  @property({ type: String, attribute: 'session-storage-key' })
+  sessionStorageKey: string | undefined = undefined;
+
+  @property({ type: Boolean }) useNewDatePicker = false;
+
   @state() private filters: Filter[] = [];
 
   @state() isColumnsReordering = false;
@@ -155,6 +171,8 @@ export class IxGrid extends LitElement {
 
   @state() displayColumns: Column[] = [];
 
+  @state() sessionStorageData: SessionStorageData | undefined = undefined;
+
   private defaultFilterKeys = ['sort', 'order', 'page', 'size'];
 
   private initialised = false;
@@ -208,10 +226,12 @@ export class IxGrid extends LitElement {
   connectedCallback() {
     super.connectedCallback?.();
     window.addEventListener('popstate', this.handlePopState);
+    window.addEventListener('beforeunload', this.handleUnload);
   }
 
   disconnectedCallback() {
     window.removeEventListener('popstate', this.handlePopState);
+    window.removeEventListener('beforeunload', this.handleUnload);
     super.disconnectedCallback?.();
   }
 
@@ -220,9 +240,15 @@ export class IxGrid extends LitElement {
     this.dispatchChangeEvent();
   };
 
+  private handleUnload = () => {
+    sessionStorage.removeItem(`urlPageSizeRead`);
+  };
+
   private updateSearchParamsFromUri(
     rebuildFiltersFromUri: boolean = false
   ): void {
+    // If the grid is not visible, do not update from search params
+    if (this.grid.getBoundingClientRect().width === 0) return;
     if (this.readParamsFromURL) {
       const url = new URL(window.location.href);
       const searchParams = new URLSearchParams(url.search);
@@ -242,7 +268,17 @@ export class IxGrid extends LitElement {
       }
 
       if (size) {
-        this.pageSize = parseInt(size, 10) || this.defaultPageSize;
+        // update pageSize with url param only on load or refresh
+        // otherwise use session storage value
+        if (
+          !this.getSessionStorageData() ||
+          (!sessionStorage.getItem(`urlPageSizeRead`) &&
+            this.grid.getBoundingClientRect().width > 0)
+        ) {
+          sessionStorage.setItem(`urlPageSizeRead`, true.toString());
+          this.pageSize = parseInt(size, 10) || this.defaultPageSize;
+          this.updateSessionStorage({ pageSize: this.pageSize });
+        }
       }
 
       if (rebuildFiltersFromUri) {
@@ -271,7 +307,8 @@ export class IxGrid extends LitElement {
   }
 
   private dispatchChangeEvent = () => {
-    const filters = this.filters.reduce(
+    const activeFilters = this.filters ?? [];
+    const filters = activeFilters.reduce(
       (columnFilters: { [key: string]: string }, { columnField, value }) => ({
         ...columnFilters,
         [columnField]: value,
@@ -287,7 +324,7 @@ export class IxGrid extends LitElement {
           page: this.page,
           pageSize: this.pageSize,
           filters,
-          filtersOperators: this.filters.map(
+          filtersOperators: activeFilters.map(
             (f: Filter): FieldOperator => ({
               columnField: f.columnField,
               operator: <FilterOperator>f.operatorValue,
@@ -306,12 +343,57 @@ export class IxGrid extends LitElement {
       this.checkLocalStorageUpdate();
       this.initialised = true;
     }
+
+    if (
+      changedProperties.has('sessionStorageData') &&
+      this.sessionStorageData
+    ) {
+      const newPageSize =
+        this.sessionStorageData.pageSize || this.defaultPageSize;
+
+      if (this.pageSize !== newPageSize) {
+        this.pageSize = newPageSize;
+      }
+    }
+
     super.update(changedProperties);
   }
 
   firstUpdated() {
     this.updateSearchParamsFromUri();
     this.removeOldLocalStorageValues();
+    this.sessionStorageData = this.getSessionStorageData();
+  }
+
+  private getSessionStorageData() {
+    if (this.sessionStorageKey) {
+      const sessionData = sessionStorage.getItem(
+        `grid-${this.sessionStorageKey}`
+      );
+
+      if (sessionData) {
+        return JSON.parse(sessionData);
+      }
+    }
+
+    return undefined;
+  }
+
+  private updateSessionStorage(data: SessionStorageData) {
+    const sessionData = this.getSessionStorageData() || {};
+
+    if (this.sessionStorageKey && data) {
+      const updatedData = {
+        ...sessionData,
+        ...data,
+      };
+
+      sessionStorage.setItem(
+        `grid-${this.sessionStorageKey}`,
+        JSON.stringify(updatedData)
+      );
+      this.sessionStorageData = updatedData;
+    }
   }
 
   private checkLocalStorageUpdate(): void {
@@ -728,8 +810,9 @@ export class IxGrid extends LitElement {
                 .filterValueChangeDebounceTime}
               .readParamsFromURL=${this.readParamsFromURL}
               .maxDate=${this.filterMaxDate}
+              .useNewDatePicker=${this.useNewDatePicker}
               @rowFilter=${(e: CustomEvent) => {
-                this.filters = e.detail.filters;
+                this.filters = e.detail.filters ?? [];
                 if (e.detail.resetPage) {
                   this.page = this.defaultPage;
                 }
@@ -758,8 +841,20 @@ export class IxGrid extends LitElement {
     </ix-button>`;
   }
 
+  renderViewMore() {
+    if (!this.showViewMore) return nothing;
+
+    return html` <div class="view-more">
+      <slot name="viewMore"></slot>
+    </div>`;
+  }
+
   get showViewMoreLessButton() {
-    return this.rowLimit > 0 && this.rows.length > this.rowLimit;
+    return (
+      !this.showViewMore &&
+      this.rowLimit > 0 &&
+      this.rows.length > this.rowLimit
+    );
   }
 
   renderViewMoreLessButton() {
@@ -812,9 +907,15 @@ export class IxGrid extends LitElement {
     </div>`;
   };
 
-  private renderPaginationControls = () => html`
-    <div class="row-controls pagination">
+  private renderPaginationControls = () => {
+    if (this.rowLimit > 0) {
+      return nothing;
+    }
+
+    return html`
       <ix-pagination
+        ?simple=${this.hasSimplePagination}
+        class="pagination"
         .page=${this.page}
         .pageSize=${this.pageSize}
         .pageSizes=${this.pageSizes}
@@ -822,11 +923,14 @@ export class IxGrid extends LitElement {
         @updatePagination=${(e: CustomEvent) => {
           this.page = e.detail.page;
           this.pageSize = e.detail.pageSize;
+          this.updateSessionStorage({
+            pageSize: this.pageSize,
+          });
           this.updatePage();
         }}
       ></ix-pagination>
-    </div>
-  `;
+    `;
+  };
 
   renderColumns() {
     const arrangedColumnsInstance = [...this.arrangedColumns];
@@ -895,8 +999,7 @@ export class IxGrid extends LitElement {
       class=${this.hideColumnHeaders ? 'hide-column-headers' : ''}
       .items=${columnDisplayed ? displayRows : []}
       all-rows-visible
-      ?column-reordering-allowed=${this.columnReorderingAllowed}
-      theme="no-border"
+      theme=${this.theme}
       .cellPartNameGenerator=${this.cellPartNameGenerator}
       @mouseup=${this.reorderColumnsFromTable}
     >
@@ -914,8 +1017,9 @@ export class IxGrid extends LitElement {
       >
         ${this.hideHeader ? nothing : this.renderHeader()}
         ${this.renderLoading()} ${this.renderGrid()} ${this.renderRowControls()}
-        ${this.rowLimit > 0 ? nothing : this.renderPaginationControls()}
-
+        <div class="row-controls more-pagination">
+          ${this.renderViewMore()} ${this.renderPaginationControls()}
+        </div>
         <slot name="footer"></slot>
       </div>
     `;

package/src/components/IxGridNav.ts

@@ -85,7 +85,6 @@ export class IxGridNavigation extends LitElement {
     }
   `;
 
-  // eslint-disable-next-line class-methods-use-this
   renderButton = ({
     path,
     text,

package/src/components/IxGridNoRows.ts

@@ -57,7 +57,9 @@ export class IxGridNoRows extends LitElement {
     return html`
       <div class="container" style="--ix-icon-font-size: ${this.iconFontSize};">
         <ix-icon class="icon ${this.type}">${this.icon}</ix-icon>
-        <h2 class="dlr-text-heading">${this.message}</h2>
+        <h2 class="dlr-text-heading" data-testid="ix-grid-no-rows-heading">
+          ${this.message}
+        </h2>
       </div>
     `;
   }

package/src/components/IxGridRowFilter.ts

@@ -1,9 +1,10 @@
 import '@digital-realty/ix-button/ix-button.js';
 import '@digital-realty/ix-date/ix-date.js';
+import '@digital-realty/ix-date-next/ix-date-next.js';
 import '@digital-realty/ix-icon-button/ix-icon-button.js';
 import '@digital-realty/ix-icon/ix-icon.js';
 import '@digital-realty/ix-select/ix-select.js';
-import { formatDate } from 'date-fns';
+import { format, formatDate } from 'date-fns/format.js';
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -29,6 +30,8 @@ export class IxGridRowFilter extends LitElement {
 
   @property({ type: Boolean }) readParamsFromURL = false;
 
+  @property({ type: Boolean }) useNewDatePicker = false;
+
   @property({ type: String }) maxDate: string = formatDate(
     new Date(),
     'yyyy-MM-dd'
@@ -255,12 +258,24 @@ export class IxGridRowFilter extends LitElement {
     }
     return html` <p>${this.activeFilters.length} ${copy.activeFilter}</p>
       <ul>
-        ${this.activeFilters.map(
-          filter => html`<li>
-            ${this.formatCamelCaseToEnglish(filter.columnField)}
-            ${filter.operatorValue} ${filter.value}
-          </li>`
-        )}
+        ${this.activeFilters.map(filter => {
+          let displayValue = filter.value;
+
+          if (filter.dataType === 'dateTime' && this.useNewDatePicker) {
+            const date = this.shadowRoot?.querySelector(`ix-date-next`) as any;
+            displayValue = format(displayValue, date.format);
+          }
+
+          const column = this.filterableColumns.find(
+            c => c.name === filter.columnField
+          );
+          const columnHeader =
+            column?.header ?? this.formatCamelCaseToEnglish(filter.columnField);
+
+          return html`<li>
+            ${columnHeader} ${filter.operatorValue} ${displayValue}
+          </li>`;
+        })}
       </ul>`;
   }
 
@@ -278,15 +293,26 @@ export class IxGridRowFilter extends LitElement {
   }
 
   private renderDateInput(value: any, index: number) {
-    return html` <ix-date
-      data-testid=${`filterValueInput-${index}`}
-      .value=${value.value}
-      max=${this.maxDate}
-      name="${value.columnField}-valueDate"
-      .errorText=${this.fromDateErrorText}
-      .onChanged=${e => this.onDatefilterValueChange(index, e)}
-    >
-    </ix-date>`;
+    return this.useNewDatePicker
+      ? html`<ix-date-next
+          data-testid=${`filterValueInput-${index}`}
+          .value=${value.value}
+          max=${this.maxDate}
+          name="${value.columnField}-valueDate"
+          showCalendarOnMouseDown="true"
+          .errorText=${this.fromDateErrorText}
+          .onChanged=${e => this.onDatefilterValueChange(index, e)}
+        >
+        </ix-date-next>`
+      : html`<ix-date
+          data-testid=${`filterValueInput-${index}`}
+          .value=${value.value}
+          max=${this.maxDate}
+          name="${value.columnField}-valueDate"
+          .errorText=${this.fromDateErrorText}
+          .onChanged=${e => this.onDatefilterValueChange(index, e)}
+        >
+        </ix-date>`;
   }
 
   private renderFilterInputControl(value: any, index: number) {
@@ -362,14 +388,7 @@ export class IxGridRowFilter extends LitElement {
           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}
-                `
-              )}"
+            <label class="form-group-column-label"
               ><span>Columns</span>
               <select
                 data-testid=${`filterColumnInput-${index}`}

package/src/components/IxPagination.ts

@@ -18,6 +18,8 @@ export class IxPagination extends LitElement {
 
   @property({ type: Array }) pageSizes: number[] = [5, 10, 25, 100];
 
+  @property({ type: Boolean, attribute: 'simple' }) isSimple = false;
+
   private changePage(offset: number) {
     this.page += offset;
     this.updatePagination();
@@ -49,9 +51,11 @@ export class IxPagination extends LitElement {
   render() {
     const back = this.page > 1;
     const next = this.recordCount > this.page * this.pageSize;
-    return html` <div class="pagination">
-      <div>
-        <p class="rows-per-page">${copy.rowsPerPage}:</p>
+    return html` <div class="pagination ${this.isSimple ? 'simple' : ''}">
+      <div ?hidden=${this.isSimple}>
+        <p class="rows-per-page" data-testid="ix-pagination-rows-per-page">
+          ${copy.rowsPerPage}:
+        </p>
         <ix-select
           wide-menu
           menu-positioning="fixed"
@@ -74,7 +78,7 @@ export class IxPagination extends LitElement {
         </ix-select>
       </div>
       <div>
-        <p>
+        <p data-testid="ix-pagination-page-of-page">
           ${this.recordCount > 0 ? (this.page - 1) * this.pageSize + 1 : 0} -
           ${this.page * this.pageSize > this.recordCount
             ? html`${this.recordCount}`

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

@@ -160,8 +160,14 @@ export const IxGridRowFilterStyles = css`
     flex-direction: column;
     align-items: baseline;
     height: 54px;
-    justify-content: flex-end;
+    justify-content: space-between;
     font-family: var(--text-default-font, sans-serif);
+    white-space: wrap;
+
+    ix-date-next,
+    ix-date {
+      margin-top: 10px;
+    }
   }
 
   option {
@@ -215,7 +221,7 @@ export const IxGridRowFilterStyles = css`
   }
 
   .filterColumnField {
-    width: 150px;
+    width: var(--ix-grid-filter-column-width, 150px);
   }
 
   .filterValueField {

package/src/components/pagination-styles.ts

@@ -8,6 +8,10 @@ export const PaginationStyles = css`
     );
   }
 
+  [hidden] {
+    display: none !important;
+  }
+
   .pagination {
     display: flex;
     align-items: center;
@@ -23,6 +27,10 @@ export const PaginationStyles = css`
     margin: 1.25rem 0.5rem 1.25rem 1rem;
   }
 
+  .pagination.simple {
+    margin: 0;
+  }
+
   .pagination > div {
     display: flex;
     align-items: center;