@teipublisher/pb-components 3.1.0 → 3.2.1

package/dist/pb-elements.json

@@ -10924,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.",
@@ -11012,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/i18n/common/de.json

@@ -126,6 +126,23 @@
     "content": "Inhalte durchsuchen",
     "scope": "Suchbereich"
   },
+  "tableGrid": {
+    "search": "Suche",
+    "searchPlaceholder": "Schlüsselwort eingeben...",
+    "sortAsc": "Spalte aufsteigend sortieren",
+    "sortDesc": "Spalte absteigend sortieren",
+    "previous": "Vorherige",
+    "next": "Nächste",
+    "navigate": "Seite {{page}} von {{pages}}",
+    "page": "Seite {{page}}",
+    "showing": "Anzeigen",
+    "to": "zu",
+    "of": "von",
+    "results": "Ergebnisse",
+    "loading": "Laden...",
+    "noRecordsFound": "Keine passenden Einträge gefunden",
+    "error": "Ein Fehler ist aufgetreten, während die Daten abgerufen wurden"
+  },
   "dts": {
     "endpoint": "Server wählen",
     "note": "Experimentell: Zugriff auf externe Editionen über DTS API",

package/i18n/common/en.json

@@ -126,6 +126,23 @@
     "content": "Search content",
     "scope": "Query scope"
   },
+  "tableGrid": {
+    "search": "Search",
+    "searchPlaceholder": "Type a keyword...",
+    "sortAsc": "Sort column ascending",
+    "sortDesc": "Sort column descending",
+    "previous": "Previous",
+    "next": "Next",
+    "navigate": "Page {{page}} of {{pages}}",
+    "page": "Page {{page}}",
+    "showing": "Showing",
+    "to": "to",
+    "of": "of",
+    "results": "results",
+    "loading": "Loading...",
+    "noRecordsFound": "No matching records found",
+    "error": "An error occurred while fetching data"
+  },
   "dts": {
     "endpoint": "Select Endpoint",
     "note": "Experimental: access other editions which expose the DTS API",

package/i18n/common/pl.json

@@ -126,6 +126,23 @@
     "content": "Przeszukaj zawartość",
     "scope": "Obszar kwerendy"
   },
+  "tableGrid": {
+    "search": "Szukaj",
+    "searchPlaceholder": "Wpisz słowo kluczowe...",
+    "sortAsc": "Sortuj kolumnę rosnąco",
+    "sortDesc": "Sortuj kolumnę malejąco",
+    "previous": "Poprzednia",
+    "next": "Następna",
+    "navigate": "Strona {{page}} z {{pages}}",
+    "page": "Strona {{page}}",
+    "showing": "Wyświetlanie",
+    "to": "do",
+    "of": "z",
+    "results": "wyników",
+    "loading": "Ładowanie...",
+    "noRecordsFound": "Brak pasujących rekordów",
+    "error": "Wystąpił błąd podczas pobierania danych"
+  },
   "dts": {
     "endpoint": "Wybierz Endpoint",
     "note": "Wersja eksperymentalna: uzyskaj dostęp do edycji, które udostępniają API DTS",

package/package.json

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

package/pb-elements.json

@@ -10924,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.",
@@ -11012,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-table-grid.js

@@ -3,13 +3,9 @@ import { Grid, PluginPosition } from 'gridjs';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.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';
+import { get as i18n, translate } from './pb-i18n.js';
 
 /**
  * A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint
@@ -86,6 +82,13 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
         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,
       },
@@ -103,10 +106,31 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
     this.perPage = 10;
     this.height = null;
     this.fixedHeader = false;
+    this.visibleColumns = null;
+    this._pbColumns = [];
+    this._columns = [];
+    this._selectedRow = null;
+    this._gridI18nInitialized = false;
+    this._onTableClick = this._onTableClick.bind(this);
+    this._onDocumentClick = this._onDocumentClick.bind(this);
+  }
+
+  _applyPaginationPosition() {
+    if (!this.grid || !this.grid.plugin) {
+      return;
+    }
+    const paginationPlugin = this.grid.plugin.get('pagination');
+    if (!paginationPlugin) {
+      return;
+    }
+    paginationPlugin.position = this.paginationTop
+      ? PluginPosition.Header
+      : PluginPosition.Footer;
   }
 
   async connectedCallback() {
     super.connectedCallback();
+    document.addEventListener('click', this._onDocumentClick);
 
     this.subscribeTo('pb-search-resubmit', ev => {
       this._submit();
@@ -120,10 +144,15 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
     this.subscribeTo(
       'pb-i18n-update',
       ev => {
-        const needsRefresh = this.language && this.language !== ev.detail.language;
+        const needsRefresh = this.language !== ev.detail.language;
         this.language = ev.detail.language;
-        if (needsRefresh) {
-          this._submit();
+        const needsInitialI18nRefresh = !this._gridI18nInitialized;
+        if ((needsRefresh || needsInitialI18nRefresh) && this.grid) {
+          this._gridI18nInitialized = true;
+          if (needsRefresh) {
+            this._applyPaginationPosition();
+            this._submit();
+          }
         }
       },
       [],
@@ -151,12 +180,17 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
     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;
@@ -166,7 +200,8 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
       const config = {
         height: this.height,
         fixedHeader: true,
-        columns,
+        columns: this._columns,
+        language: this._gridLanguageConfig(),
         resizable: this.resizable,
         server: {
           url,
@@ -181,7 +216,7 @@ export class PbTableGrid extends themableMixin(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'}`;
             },
           },
@@ -191,9 +226,9 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
           limit: this.perPage,
           server: {
             url: (prev, page, limit) => {
-              const form = this.shadowRoot.getElementById('form');
+              const form = this.shadowRoot.getElementById('search-form');
               if (form) {
-                Object.assign(this._params, form.serializeForm());
+                Object.assign(this._params, this._serializeForm(form));
               }
               this._params = this._paramsFromSubforms(this._params);
               this._params.limit = limit;
@@ -219,23 +254,131 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
       };
 
       this.grid = new Grid(config);
-      if (this.paginationTop) {
-        this.grid.plugin.get('pagination').position = PluginPosition.Header;
-      }
+      this._applyPaginationPosition();
       this.grid.on('load', () => {
+        this._clearRowSelection();
+        if (this.paginationTop) {
+          // `forceRender()` can reset GridJS plugin state; re-apply after each load.
+          this.grid.plugin.get('pagination').position = PluginPosition.Header;
+        }
         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();
   }
 
+  _gridLanguageConfig() {
+    return {
+      search: {
+        placeholder: () => i18n('tableGrid.searchPlaceholder'),
+      },
+      sort: {
+        sortAsc: () => i18n('tableGrid.sortAsc'),
+        sortDesc: () => i18n('tableGrid.sortDesc'),
+      },
+      pagination: {
+        previous: () => i18n('tableGrid.previous'),
+        next: () => i18n('tableGrid.next'),
+        navigate: (page, pages) =>
+          i18n('tableGrid.navigate', {
+            page,
+            pages,
+          }),
+        page: page =>
+          i18n('tableGrid.page', {
+            page,
+          }),
+        showing: () => i18n('tableGrid.showing'),
+        to: () => i18n('tableGrid.to'),
+        of: () => i18n('tableGrid.of'),
+        results: () => i18n('tableGrid.results'),
+      },
+      loading: () => i18n('tableGrid.loading'),
+      noRecordsFound: () => i18n('tableGrid.noRecordsFound'),
+      error: () => i18n('tableGrid.error'),
+    };
+  }
+
   _paramsFromSubforms(params) {
     if (this.subforms) {
       document.querySelectorAll(this.subforms).forEach(form => {
@@ -247,27 +390,33 @@ export class PbTableGrid extends themableMixin(pbMixin(LitElement)) {
     return params;
   }
 
+  _serializeForm(form) {
+    const data = {};
+    const formData = new FormData(form);
+    formData.forEach((value, key) => {
+      data[key] = value;
+    });
+    return data;
+  }
+
   render() {
     return html`
       ${this.search
         ? html`
-            <iron-form id="form">
-              <form action="">
-                <paper-input
-                  id="search"
-                  name="search"
-                  label="${translate('search.search')}"
-                  value="${this._params.search || ''}"
-                  @keyup="${e => (e.keyCode === 13 ? this._submit() : null)}"
-                >
-                  <paper-icon-button
-                    icon="search"
-                    @click="${this._submit}"
-                    slot="suffix"
-                  ></paper-icon-button>
-                </paper-input>
-              </form>
-            </iron-form>
+            <form id="search-form" action="">
+              <input
+                id="search"
+                name="search"
+                type="search"
+                .value="${this._params.search || ''}"
+                aria-label="${translate('tableGrid.search')}"
+                placeholder="${translate('tableGrid.searchPlaceholder')}"
+                @keyup="${e => (e.key === 'Enter' ? this._submit() : null)}"
+              />
+              <button type="button" @click="${this._submit}">
+                ${translate('tableGrid.search')}
+              </button>
+            </form>
           `
         : null}
       <div id="table"></div>
@@ -279,6 +428,9 @@ export class PbTableGrid extends themableMixin(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;
       }

package/.github/workflows/release.js.yml

@@ -1,42 +0,0 @@
-name: Release npm package
-
-on:
-  push:
-    branches:
-      - master
-      - next-3
-
-permissions:
-  contents: read # for checkout
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write # to be able to publish a GitHub release
-      issues: write # to be able to comment on released issues
-      pull-requests: write # to be able to comment on released pull requests
-      id-token: write # to enable use of OIDC for trusted publishing and npm provenance
-    steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: npm install and build
-        run:
-          npm ci
-          npm run build:production
-      - name: Build docker image
-        run: docker build -t exist-db -f Dockerfile .
-      - name: Start docker image
-        run: docker run --publish 8080:8080 --detach exist-db
-      - name: Wait for eXist
-        uses: iFaxity/wait-on-action@v1
-        with:
-          resource: http-get://localhost:8080/exist/apps/tei-publisher/api/version
-      - run: npm test
-      - run: npx semantic-release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}