@teipublisher/pb-components 3.0.9 → 3.2.0

package/dist/pb-elements.json

@@ -10909,6 +10909,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pagination-top",
+          "description": "If specified, render the pagination controls above the table instead of below.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "per-page",
           "type": "number",
@@ -10918,6 +10924,11 @@
           "name": "height",
           "type": "string"
         },
+        {
+          "name": "visible-columns",
+          "description": "Optional list of column ids/properties to show. If empty or undefined, all columns are visible.",
+          "type": "array"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -10983,6 +10994,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paginationTop",
+          "attribute": "pagination-top",
+          "description": "If specified, render the pagination controls above the table instead of below.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "perPage",
           "attribute": "per-page",
@@ -10999,6 +11017,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "visibleColumns",
+          "attribute": "visible-columns",
+          "description": "Optional list of column ids/properties to show. If empty or undefined, all columns are visible.",
+          "type": "array"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "3.0.9",
+  "version": "3.2.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/pb-elements.json

@@ -10909,6 +10909,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "pagination-top",
+          "description": "If specified, render the pagination controls above the table instead of below.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "per-page",
           "type": "number",
@@ -10918,6 +10924,11 @@
           "name": "height",
           "type": "string"
         },
+        {
+          "name": "visible-columns",
+          "description": "Optional list of column ids/properties to show. If empty or undefined, all columns are visible.",
+          "type": "array"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -10983,6 +10994,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paginationTop",
+          "attribute": "pagination-top",
+          "description": "If specified, render the pagination controls above the table instead of below.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "perPage",
           "attribute": "per-page",
@@ -10999,6 +11017,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "visibleColumns",
+          "attribute": "visible-columns",
+          "description": "Optional list of column ids/properties to show. If empty or undefined, all columns are visible.",
+          "type": "array"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/pb-page.js

@@ -394,6 +394,10 @@ export class PbPage extends pbMixin(LitElement) {
     this._i18nInstance = i18next.createInstance();
     this._i18nInstance.use(LanguageDetector).use(Backend);
     this._i18nInstance.init(options).then(t => {
+      if (!this._i18nInstance) {
+        // We got deconstructed already
+        return;
+      }
       initTranslation(t);
       // initialized and ready to go!
       this._updateI18n(t);

package/src/pb-table-column.js

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit-element';
 import { html } from 'gridjs';
-import './pb-popover.js';
 
 /**
  * Defines a column within `pb-table-grid`.

package/src/pb-table-grid.js

@@ -1,14 +1,15 @@
 import { LitElement, html, css } from 'lit-element';
-import { Grid } from 'gridjs';
+import { Grid, PluginPosition } from 'gridjs';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
-import { loadStylesheets, importStyles } from './theming.js';
+import { importStyles, loadStylesheets, themableMixin } from './theming.js';
 import '@polymer/paper-input/paper-input';
 import '@polymer/iron-icons';
 import '@polymer/iron-form';
 import '@polymer/paper-icon-button';
 import './pb-table-column.js';
 import { registry } from './urls.js';
+import { translate } from './pb-i18n.js';
 
 /**
  * A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint
@@ -39,7 +40,7 @@ import { registry } from './urls.js';
  * <pb-table-column label="Died" property="death"></pb-table-column>
  * ```
  */
-export class PbTableGrid extends pbMixin(LitElement) {
+export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
   static get properties() {
     return {
       /**
@@ -78,6 +79,20 @@ export class PbTableGrid extends pbMixin(LitElement) {
       search: {
         type: Boolean,
       },
+      /**
+       * If specified, render the pagination controls above the table instead of below.
+       */
+      paginationTop: {
+        type: Boolean,
+        attribute: 'pagination-top',
+      },
+      /**
+       * Optional list of column ids/properties to show. If empty or undefined, all columns are visible.
+       */
+      visibleColumns: {
+        type: Array,
+        attribute: 'visible-columns',
+      },
       _params: {
         type: Object,
       },
@@ -91,13 +106,21 @@ export class PbTableGrid extends pbMixin(LitElement) {
     this._params = {};
     this.resizable = false;
     this.search = false;
+    this.paginationTop = false;
     this.perPage = 10;
     this.height = null;
     this.fixedHeader = false;
+    this.visibleColumns = null;
+    this._pbColumns = [];
+    this._columns = [];
+    this._selectedRow = null;
+    this._onTableClick = this._onTableClick.bind(this);
+    this._onDocumentClick = this._onDocumentClick.bind(this);
   }
 
   async connectedCallback() {
     super.connectedCallback();
+    document.addEventListener('click', this._onDocumentClick);
 
     this.subscribeTo('pb-search-resubmit', ev => {
       this._submit();
@@ -130,20 +153,29 @@ export class PbTableGrid extends pbMixin(LitElement) {
     }
 
     const gridjsTheme = await loadStylesheets([`${resolveURL(this.cssPath)}/mermaid.min.css`]);
-    const theme = importStyles(this);
     const sheets = [...this.shadowRoot.adoptedStyleSheets, gridjsTheme];
+    // Manually import styles for backwards compatibility with pb-components < 3 importStyles
+    // extracts any relevant styling rules to this element and wraps them in `:host`. Which you can
+    // (and should) do manually anyway
+    const theme = importStyles(this);
     if (theme) {
       sheets.push(theme);
     }
+
     this.shadowRoot.adoptedStyleSheets = sheets;
   }
 
+  disconnectedCallback() {
+    document.removeEventListener('click', this._onDocumentClick);
+    super.disconnectedCallback();
+  }
+
   firstUpdated() {
     const table = this.shadowRoot.getElementById('table');
+    table.addEventListener('click', this._onTableClick);
 
-    const pbColumns = this.querySelectorAll('pb-table-column');
-    const columns = [];
-    pbColumns.forEach(column => columns.push(column.data()));
+    this._pbColumns = Array.from(this.querySelectorAll('pb-table-column'));
+    this._columns = this._getColumnsConfig();
     waitOnce('pb-page-ready', data => {
       if (data && data.language) {
         this.language = data.language;
@@ -153,7 +185,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
       const config = {
         height: this.height,
         fixedHeader: true,
-        columns,
+        columns: this._columns,
         resizable: this.resizable,
         server: {
           url,
@@ -168,7 +200,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
               if (!cols.length) return prev;
               const col = cols[0];
               return `${prev}${prev.indexOf('?') > -1 ? '&' : '?'}order=${
-                columns[col.index].id
+                this._columns[col.index].id
               }&dir=${col.direction === 1 ? 'asc' : 'desc'}`;
             },
           },
@@ -206,16 +238,93 @@ export class PbTableGrid extends pbMixin(LitElement) {
       };
 
       this.grid = new Grid(config);
+      if (this.paginationTop) {
+        this.grid.plugin.get('pagination').position = PluginPosition.Header;
+      }
       this.grid.on('load', () => {
+        this._clearRowSelection();
         this.emitTo('pb-results-received', {
           params: this._params,
         });
+        this._applyColumnVisibilityToDom();
       });
 
       this.grid.render(table);
     });
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has('visibleColumns') && this.grid) {
+      this._columns = this._getColumnsConfig();
+      this._applyColumnVisibilityToDom();
+    }
+  }
+
+  _visibleColumnsAsSet() {
+    return Array.isArray(this.visibleColumns) ? new Set(this.visibleColumns) : null;
+  }
+
+  _columnId(pbColumn, config) {
+    return config.id || pbColumn.property || pbColumn.label;
+  }
+
+  _getColumnsConfig() {
+    const visibleSet = this._visibleColumnsAsSet();
+    return this._pbColumns.map(pbColumn => {
+      const config = pbColumn.data();
+      const id = this._columnId(pbColumn, config);
+      return visibleSet ? { ...config, hidden: !visibleSet.has(id) } : config;
+    });
+  }
+
+  _applyColumnVisibilityToDom() {
+    const visibleSet = this._visibleColumnsAsSet();
+    const table = this.shadowRoot.querySelector('.gridjs-table');
+    if (!table) {
+      return;
+    }
+    this._columns.forEach((column, index) => {
+      const id = column.id || this._pbColumns[index]?.property || this._pbColumns[index]?.label;
+      const hidden = visibleSet ? !visibleSet.has(id) : false;
+      const cells = table.querySelectorAll(`th:nth-child(${index + 1}), td:nth-child(${index + 1})`);
+      cells.forEach(cell => {
+        cell.style.display = hidden ? 'none' : '';
+      });
+    });
+  }
+
+  _onTableClick(event) {
+    const row = event.target.closest('tbody tr');
+    if (!row) {
+      return;
+    }
+    this._toggleRowSelection(row);
+  }
+
+  _onDocumentClick(event) {
+    const path = event.composedPath();
+    if (!path.includes(this)) {
+      this._clearRowSelection();
+    }
+  }
+
+  _toggleRowSelection(row) {
+    if (this._selectedRow === row) {
+      this._clearRowSelection();
+      return;
+    }
+    this._clearRowSelection();
+    this._selectedRow = row;
+    this._selectedRow.classList.add('grid-row-selected');
+  }
+
+  _clearRowSelection() {
+    if (this._selectedRow) {
+      this._selectedRow.classList.remove('grid-row-selected');
+      this._selectedRow = null;
+    }
+  }
+
   _submit() {
     this.grid.forceRender();
   }
@@ -240,9 +349,9 @@ export class PbTableGrid extends pbMixin(LitElement) {
                 <paper-input
                   id="search"
                   name="search"
-                  label="Search"
+                  label="${translate('search.search')}"
                   value="${this._params.search || ''}"
-                  @keyup="${e => (e.keyCode == 13 ? this._submit() : null)}"
+                  @keyup="${e => (e.keyCode === 13 ? this._submit() : null)}"
                 >
                   <paper-icon-button
                     icon="search"
@@ -263,6 +372,9 @@ export class PbTableGrid extends pbMixin(LitElement) {
       :host {
         display: block;
       }
+      .grid-row-selected td.gridjs-td {
+        background-color: var(--pb-table-grid-selected-row-background-color, #e8f0fe);
+      }
       button {
         border: 0;
       }