@teipublisher/pb-components 1.26.0 → 1.27.0

package/dist/pb-elements.json

@@ -8923,6 +8923,190 @@
         }
       ]
     },
+    {
+      "name": "pb-table-column",
+      "path": "./src/pb-table-column.js",
+      "description": "Defines a column within `pb-table-grid`.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Column heading to display",
+          "type": "string",
+          "default": "\"no-label\""
+        },
+        {
+          "name": "property",
+          "description": "Name of the JSON property containing the data",
+          "type": "string"
+        },
+        {
+          "name": "sort",
+          "description": "Should the column support sorting?",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "width",
+          "description": "Optional fixed width of the column (e.g. '200px' or '30%')",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Column heading to display",
+          "type": "string",
+          "default": "\"no-label\""
+        },
+        {
+          "name": "property",
+          "attribute": "property",
+          "description": "Name of the JSON property containing the data",
+          "type": "string"
+        },
+        {
+          "name": "sort",
+          "attribute": "sort",
+          "description": "Should the column support sorting?",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "width",
+          "attribute": "width",
+          "description": "Optional fixed width of the column (e.g. '200px' or '30%')",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "pb-table-grid",
+      "path": "./src/pb-table-grid.js",
+      "description": "A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint\nspecified in `source`. If `source` is a relative URI, it will be resolved relative to the\nTEI Publisher endpoint.\n\nThe JSON data returned by the endpoint should be an object with two properties:\n\n* `count`: the overall number of rows available on the server\n* `results`: an array containing each record as an object\n\nThe parameters send to the server are as follows:\n\n\nParameter | Description\n---------|----------\nlimit | number of records to return for each page\nstart | start offset from which to return records\norder | the id of the column to sort by\ndir | sort direction: either 'asc' or 'desc'\nsearch | an optional search string entered by the user\n\nTable columns are configured via nested `<pb-table-column>` elements:\n\n```html\n<pb-table-column label=\"Name\" property=\"name\" sort width=\"33%\"></pb-table-column>\n<pb-table-column label=\"Born\" property=\"birth\"></pb-table-column>\n<pb-table-column label=\"Died\" property=\"death\"></pb-table-column>\n```",
+      "attributes": [
+        {
+          "name": "source",
+          "description": "URI of the server-side endpoint to retrieve data from.\nRelative URIs are resolved relative to the configured TEI Publisher endpoint.",
+          "type": "string"
+        },
+        {
+          "name": "css-path",
+          "description": "Path to the gridjs theme CSS files.",
+          "type": "string",
+          "default": "\"../css/gridjs\""
+        },
+        {
+          "name": "resizable",
+          "description": "If specified, columns (without a fixed width) will be resizable.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "search",
+          "description": "If specified, enable server-side search.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "source",
+          "attribute": "source",
+          "description": "URI of the server-side endpoint to retrieve data from.\nRelative URIs are resolved relative to the configured TEI Publisher endpoint.",
+          "type": "string"
+        },
+        {
+          "name": "cssPath",
+          "attribute": "css-path",
+          "description": "Path to the gridjs theme CSS files.",
+          "type": "string",
+          "default": "\"../css/gridjs\""
+        },
+        {
+          "name": "resizable",
+          "attribute": "resizable",
+          "description": "If specified, columns (without a fixed width) will be resizable.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "search",
+          "attribute": "search",
+          "description": "If specified, enable server-side search.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
     {
       "name": "pb-tabs",
       "path": "./src/pb-tabs.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -68,6 +68,7 @@
     "@webcomponents/webcomponentsjs": "latest",
     "animejs": "^3.2.0",
     "codemirror": "^5.58.1",
+    "gridjs": "^5.0.2",
     "hotkeys-js": "^3.8.1",
     "i18next": "19.8.1",
     "i18next-browser-languagedetector": "^6.0.1",

package/pb-elements.json

@@ -8923,6 +8923,190 @@
         }
       ]
     },
+    {
+      "name": "pb-table-column",
+      "path": "./src/pb-table-column.js",
+      "description": "Defines a column within `pb-table-grid`.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Column heading to display",
+          "type": "string",
+          "default": "\"no-label\""
+        },
+        {
+          "name": "property",
+          "description": "Name of the JSON property containing the data",
+          "type": "string"
+        },
+        {
+          "name": "sort",
+          "description": "Should the column support sorting?",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "width",
+          "description": "Optional fixed width of the column (e.g. '200px' or '30%')",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Column heading to display",
+          "type": "string",
+          "default": "\"no-label\""
+        },
+        {
+          "name": "property",
+          "attribute": "property",
+          "description": "Name of the JSON property containing the data",
+          "type": "string"
+        },
+        {
+          "name": "sort",
+          "attribute": "sort",
+          "description": "Should the column support sorting?",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "width",
+          "attribute": "width",
+          "description": "Optional fixed width of the column (e.g. '200px' or '30%')",
+          "type": "string"
+        }
+      ]
+    },
+    {
+      "name": "pb-table-grid",
+      "path": "./src/pb-table-grid.js",
+      "description": "A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint\nspecified in `source`. If `source` is a relative URI, it will be resolved relative to the\nTEI Publisher endpoint.\n\nThe JSON data returned by the endpoint should be an object with two properties:\n\n* `count`: the overall number of rows available on the server\n* `results`: an array containing each record as an object\n\nThe parameters send to the server are as follows:\n\n\nParameter | Description\n---------|----------\nlimit | number of records to return for each page\nstart | start offset from which to return records\norder | the id of the column to sort by\ndir | sort direction: either 'asc' or 'desc'\nsearch | an optional search string entered by the user\n\nTable columns are configured via nested `<pb-table-column>` elements:\n\n```html\n<pb-table-column label=\"Name\" property=\"name\" sort width=\"33%\"></pb-table-column>\n<pb-table-column label=\"Born\" property=\"birth\"></pb-table-column>\n<pb-table-column label=\"Died\" property=\"death\"></pb-table-column>\n```",
+      "attributes": [
+        {
+          "name": "source",
+          "description": "URI of the server-side endpoint to retrieve data from.\nRelative URIs are resolved relative to the configured TEI Publisher endpoint.",
+          "type": "string"
+        },
+        {
+          "name": "css-path",
+          "description": "Path to the gridjs theme CSS files.",
+          "type": "string",
+          "default": "\"../css/gridjs\""
+        },
+        {
+          "name": "resizable",
+          "description": "If specified, columns (without a fixed width) will be resizable.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "search",
+          "description": "If specified, enable server-side search.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "source",
+          "attribute": "source",
+          "description": "URI of the server-side endpoint to retrieve data from.\nRelative URIs are resolved relative to the configured TEI Publisher endpoint.",
+          "type": "string"
+        },
+        {
+          "name": "cssPath",
+          "attribute": "css-path",
+          "description": "Path to the gridjs theme CSS files.",
+          "type": "string",
+          "default": "\"../css/gridjs\""
+        },
+        {
+          "name": "resizable",
+          "attribute": "resizable",
+          "description": "If specified, columns (without a fixed width) will be resizable.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "search",
+          "attribute": "search",
+          "description": "If specified, enable server-side search.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
     {
       "name": "pb-tabs",
       "path": "./src/pb-tabs.js",

package/src/pb-components.js

@@ -56,6 +56,7 @@ import './pb-authority-lookup.js';
 import './pb-message.js';
 import './pb-blacklab-results.js';
 import './pb-blacklab-highlight.js';
+import './pb-table-grid.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';

package/src/pb-table-column.js

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit-element';
+import { html } from "gridjs";
+import './pb-popover.js';
+
+/**
+ * Defines a column within `pb-table-grid`.
+ */
+export class PbTableColumn extends LitElement {
+    static get properties() {
+        return {
+            /**
+             * Column heading to display
+             */
+            label: {
+                type: String
+            },
+            /**
+             * Name of the JSON property containing the data
+             */
+            property: {
+                type: String
+            },
+            /**
+             * Should the column support sorting?
+             */
+            sort: {
+                type: Boolean
+            },
+            /**
+             * Optional fixed width of the column (e.g. '200px' or '30%')
+             */
+            width: {
+                type: String
+            },
+            ...super.properties
+        };
+    }
+
+    constructor() {
+        super();
+        this.label = 'no-label';
+        this.property = null;
+        this.sort = false;
+        this.width = null;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    data() {
+        const config = { 
+            name: this.label,
+            sort: { enabled: this.sort },
+            formatter: (cell) => html(cell)
+        };
+        if (this.property) {
+            config.id = this.property;
+        }
+        if (this.width) {
+            config.width = this.width;
+        }
+        return config;
+    }
+}
+customElements.define('pb-table-column', PbTableColumn);

package/src/pb-table-grid.js

@@ -0,0 +1,190 @@
+import { LitElement, html, css } from 'lit-element';
+import { Grid } from "gridjs";
+import { pbMixin } from './pb-mixin.js';
+import { resolveURL } from './utils.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';
+
+/**
+ * A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint
+ * specified in `source`. If `source` is a relative URI, it will be resolved relative to the
+ * TEI Publisher endpoint.
+ * 
+ * The JSON data returned by the endpoint should be an object with two properties:
+ * 
+ * * `count`: the overall number of rows available on the server
+ * * `results`: an array containing each record as an object
+ * 
+ * The parameters send to the server are as follows:
+ * 
+ * 
+ * Parameter | Description
+ * ---------|----------
+ * limit | number of records to return for each page
+ * start | start offset from which to return records
+ * order | the id of the column to sort by
+ * dir | sort direction: either 'asc' or 'desc'
+ * search | an optional search string entered by the user
+ * 
+ * Table columns are configured via nested `<pb-table-column>` elements:
+ * 
+ * ```html
+ * <pb-table-column label="Name" property="name" sort width="33%"></pb-table-column>
+ * <pb-table-column label="Born" property="birth"></pb-table-column>
+ * <pb-table-column label="Died" property="death"></pb-table-column>
+ * ```
+ */
+export class PbTableGrid extends pbMixin(LitElement) {
+    static get properties() {
+        return {
+            /**
+             * URI of the server-side endpoint to retrieve data from.
+             * Relative URIs are resolved relative to the configured TEI Publisher endpoint.
+             */
+            source: {
+                type: String
+            },
+            /**
+             * Path to the gridjs theme CSS files.
+             */
+            cssPath: {
+                type: String,
+                attribute: 'css-path'
+            },
+            /**
+             * If specified, columns (without a fixed width) will be resizable.
+             */
+            resizable: {
+                type: Boolean
+            },
+            /**
+             * If specified, enable server-side search.
+             */
+            search: {
+                type: Boolean
+            },
+            _params: {
+                type: Object
+            },
+            ...super.properties
+        };
+    }
+
+    constructor() {
+        super();
+        this.cssPath = '../css/gridjs';
+        this._params = {};
+        this.resizable = false;
+        this.search = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.subscribeTo('pb-search-resubmit', (ev) => {
+            this._params = Object.assign({}, ev.detail.params);
+            this._submit();
+        });
+
+        window.addEventListener('popstate', (ev) => {
+            this._params = ev.state;
+            this._submit();
+        });
+    }
+
+    firstUpdated() {
+        const table = this.shadowRoot.getElementById('table');
+
+        const pbColumns = this.querySelectorAll('pb-table-column');
+        const columns = [];
+        pbColumns.forEach((column) => columns.push(column.data()));
+
+        PbTableGrid.waitOnce('pb-page-ready', () => {
+            this._params = this.getParameters();
+            const url = this.toAbsoluteURL(this.source);
+            const config = {
+                columns,
+                resizable: this.resizable,
+                server: {
+                    url,
+                    then: data => data.results,
+                    total: data => data.count
+                },
+                sort: {
+                    multiColumn: false,
+                    server: {
+                        url: (prev, cols) => {
+                            if (!cols.length) return prev;
+                            const col = cols[0];
+                            return `${prev}${prev.indexOf('?') > -1 ? '&' : '?'}order=${columns[col.index].id}&dir=${col.direction === 1 ? 'asc' : 'desc'}`;
+                        }
+                    }
+                },
+                pagination: {
+                    enabled: true,
+                    limit: 10,
+                    server: {
+                        url: (prev, page, limit) => {
+                            const form = this.shadowRoot.getElementById('form');
+                            if (form) {
+                                Object.assign(this._params, form.serializeForm());
+                            }
+                            this._params.limit = limit;
+                            this._params.start = page * limit;
+                            this.setParameters(this._params);
+                            this.pushHistory('grid', this._params);
+
+                            return `${prev}${prev.indexOf('?') > -1 ? '&' : '?'}${new URLSearchParams(this._params).toString()}`;
+                        }
+                    }
+                }
+            };
+            this.grid = new Grid(config);
+            this.grid.on('load', () => {
+                this.emitTo('pb-results-received', {
+                    "params": this._params
+                });
+            });
+
+            this.grid.render(table);
+        });
+    }
+
+    _submit() {
+        this.grid.forceRender();
+    }
+
+    render() {
+        const themes = resolveURL(this.cssPath);
+        return html`
+            <link href="${themes}/mermaid.min.css" rel="stylesheet">
+            ${ 
+                this.search ? html`
+                    <iron-form id="form">
+                        <form action="">
+                            <paper-input id="search" name="search" label="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>
+                ` : null 
+            }
+            <div id="table"></div>
+        `;
+    }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+            }
+            button {
+                border: 0;
+            }
+        `;
+    }
+}
+customElements.define('pb-table-grid', PbTableGrid);