@teipublisher/pb-components 1.26.0 → 1.28.1

package/pb-elements.json

@@ -6661,6 +6661,11 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "mode",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "model",
           "type": "object",
@@ -6771,6 +6776,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "mode",
+          "attribute": "mode",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "model",
           "attribute": "model",
@@ -6882,6 +6893,11 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "set",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "behaviour",
           "type": "string",
@@ -6918,6 +6934,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "setParam",
+          "attribute": "set",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "behaviour",
           "attribute": "behaviour",
@@ -8923,6 +8945,215 @@
         }
       ]
     },
+    {
+      "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": "per-page",
+          "type": "number",
+          "default": "10"
+        },
+        {
+          "name": "height",
+          "type": "string"
+        },
+        {
+          "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": "perPage",
+          "attribute": "per-page",
+          "type": "number",
+          "default": "10"
+        },
+        {
+          "name": "height",
+          "attribute": "height",
+          "type": "string"
+        },
+        {
+          "name": "fixedHeader",
+          "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/authority/connectors.js

@@ -4,6 +4,7 @@ import { Airtable } from './airtable.js';
 import { GND } from './gnd.js';
 import { KBGA } from './kbga.js';
 import { GF } from './gf.js';
+import { ReconciliationService } from './reconciliation.js';
 import { Custom } from './custom.js';
 
 export function createConnectors(endpoint, root) {
@@ -27,6 +28,9 @@ export function createConnectors(endpoint, root) {
       case 'GF':
         instance = new GF(configElem);
         break;
+      case 'ReconciliationService':
+        instance = new ReconciliationService(configElem);
+        break;
       case 'Custom':
         instance = new Custom(endpoint, configElem);
         break;

package/src/authority/reconciliation.js

@@ -0,0 +1,124 @@
+/* eslint-disable class-methods-use-this */
+import { Registry } from './registry.js'
+
+// Todo:
+// - strings <- types
+// - use scheme#types in @type output?
+// - test with other providers, inside custom connector
+// - documentation
+
+async function getServiceManifest (endpoint) {
+	const response = await fetch(endpoint);
+	const data = await response.json();
+  return data;
+}
+
+export class ReconciliationService extends Registry {
+  constructor(configElem) {
+    super(configElem)
+    this.endpoint = configElem.getAttribute('endpoint');
+    this.debug = configElem.getAttribute('debug');
+    getServiceManifest(this.endpoint).then((result) => {
+      this.ORConfig = result;
+      if (this.debug) {
+        console.log(
+          'OpenReconcile connector for register \'%s\' at endpoint <%s>. Using config: %o',
+          this._register, this.endpoint, this.ORConfig
+        );
+      }
+    })
+  }
+
+  /**
+   * Query the authority and return a RegistryResult.
+   *
+   * @param {String} key the search string
+   */
+  async query(key) {
+    const results = [];
+    const paramsObj = {
+                        q1: {
+                          query: key
+                        }
+                      };
+
+    return new Promise((resolve) => {
+        fetch(this.endpoint, {
+            method: 'POST',
+            headers: {
+              'Accept': 'application/json',
+              'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body: "queries=".concat(JSON.stringify(paramsObj))
+        })
+        .then((response) => response.json())
+        .then((json) => {
+            json.q1.result.forEach((item) => {
+              if (this.ORConfig.view) {
+                this.view = this.ORConfig.view.url.replace('{{id}}', item.id);
+              } else {
+                this.view = item.id;
+              }
+              if (item.description) {
+                this.description = item.description;
+              } else if (item.type) {
+                this.description = item.type.map(t => t.name.toString() ).join(', ')
+              } else {
+                this.description = ""
+              }
+              const result = {
+                  register: this._register,
+                  id: (this._prefix ? `${this._prefix}-${item.id}` : item.id),
+                  label: item.name,
+                  link: this.view,
+                  details: this.description,
+                  provider: 'OpenReconcile'
+              };
+              results.push(result);
+            });
+            if (this.debug) {
+              console.log(
+                  'OpenReconcile results: %o',
+                  results
+              );
+            }
+            resolve({
+                totalItems: json.q1.result.length,
+                items: results,
+            });
+        })
+    })
+  }
+
+  /**
+   * Retrieve information about a registry entry and display it
+   * using the given container.
+   *
+   * @param {String} id the id to look up
+   * @param {HTMLElement} container reference to an element which should be used as container for displaying the information
+   * @returns {Promise} a promise
+   */
+  info(id, container) {
+    if (!id) {
+      return Promise.resolve({});
+    }
+    if (!this.ORConfig.preview) {
+      container.innerHTML = 'no \'preview\' information in endpoint\'s manifest';
+      return Promise.resolve();
+    }
+
+    return new Promise((resolve, reject) => {
+      const rawid = this._prefix ? id.substring(this._prefix.length + 1) : id;
+      const url = this.ORConfig.preview.url.replace('{{id}}', encodeURIComponent(rawid));
+      fetch(url)
+      .then(response => response.text())
+      .then((output) => {
+        container.innerHTML = output;
+        resolve({
+          id: this._prefix ? `${this._prefix}-${rawid}` : rawid
+        });
+      })
+      .catch(() => reject());
+    });
+  }
+}

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-odd-editor.js

@@ -832,8 +832,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
             this.serializeAttribute('predicate', model.predicate),
             model.type === 'model' ? this.serializeAttribute('behaviour', model.behaviour) : '',
             this.serializeAttribute('cssClass', model.css),
-            this.serializeAttribute('useSourceRendition', model.sourcerend)
-        ].join('')
+            this.serializeAttribute('useSourceRendition', model.sourcerend),
+            this.serializeAttribute('pb:mode', model.mode)
+        ].join('');
 
         const desc = model.desc ? nestedIndent + '<desc>' + model.desc + '</desc>\n' : '';
 
@@ -854,6 +855,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
         }
         const name = this.serializeAttribute('name', parameter.name);
         const value = this.serializeAttribute('value', parameter.value);
+        if (parameter.set) {
+            return `${indent}<pb:set-param xmlns=""${name}${value}/>\n`
+        }
         return `${indent}<param${name}${value}/>\n`
     }
 

package/src/pb-odd-elementspec-editor.js

@@ -171,6 +171,7 @@ export class PbOddElementspecEditor extends LitElement {
                 type="${model.type}"
                 output="${model.output}"
                 css="${model.css}"
+                mode="${model.mode}"
                 .model="${model}"
                 .parameters="${model.parameters}"
                 desc="${model.desc}"
@@ -203,6 +204,7 @@ export class PbOddElementspecEditor extends LitElement {
         const newModel = {
             behaviour: 'inline',
             css: '',
+            mode: '',
             predicate: '',
             desc: '',
             type: addModel.selected,

package/src/pb-odd-model-editor.js

@@ -271,6 +271,9 @@ export class PbOddModelEditor extends LitElement {
                     return value;
                 }
             },
+            mode: {
+                type: String
+            },
             model: {
                 type: Object
             },
@@ -331,6 +334,7 @@ export class PbOddModelEditor extends LitElement {
         this.template = '';
         this.output = '';
         this.css = '';
+        this.mode = '';
         this.model = {};
         this.model.models = [];
         this.parameters = [];
@@ -479,6 +483,11 @@ export class PbOddModelEditor extends LitElement {
                                 placeholder="${translate('odd.editor.model.css-class-placeholder')}"
                                 label="CSS Class"
                                 @change="${this._inputCss}"></paper-input>
+                            
+                            <paper-input id="mode" .value="${this.mode}"
+                                placeholder="${translate('odd.editor.model.mode-placeholder')}"
+                                label="Mode"
+                                @change="${this._inputMode}"></paper-input>
                                 
                             <pb-code-editor id="template"
                                              code="${this.template}"
@@ -501,6 +510,7 @@ export class PbOddModelEditor extends LitElement {
                                        behaviour="${this.behaviour}"
                                        name="${parameter.name}"
                                        value="${parameter.value}"
+                                       ?set="${parameter.set}"
                                        endpoint="${this.endpoint}"
                                        apiVersion="${this.apiVersion}"
                                        @parameter-remove="${(e) => this._removeParam(e, index)}"
@@ -543,6 +553,7 @@ export class PbOddModelEditor extends LitElement {
                     type="${model.type}"
                     output="${model.output}"
                     css="${model.css}"
+                    mode="${model.mode}"
                     .model="${model}"
                     .parameters="${model.parameters}"
                     desc="${model.desc}"
@@ -836,6 +847,11 @@ export class PbOddModelEditor extends LitElement {
         this._fireModelChanged('css', this.css);
     }
 
+    _inputMode(ev) {
+        this.mode = ev.composedPath()[0].value;
+        this._fireModelChanged('mode', this.mode);
+    }
+
     _updateTemplate(ev) {
         this.template = this.shadowRoot.getElementById('template').getSource();
         this._fireModelChanged('template', this.template);
@@ -854,6 +870,7 @@ export class PbOddModelEditor extends LitElement {
     _updateParam(e, index) {
         this.parameters[index].name = e.detail.name;
         this.parameters[index].value = e.detail.value;
+        this.parameters[index].set = e.detail.set;
         this._fireModelChanged('parameters', this.parameters);
     }
 

package/src/pb-odd-parameter-editor.js

@@ -29,7 +29,7 @@ export class PbOddParameterEditor extends LitElement {
             }
             .wrapper{
                 display:grid;
-                grid-template-columns:150px auto 50px;
+                grid-template-columns:150px auto 50px 50px;
                 grid-column-gap:20px;
                 grid-row-gap:20px;
                 margin-bottom:10px;
@@ -37,8 +37,9 @@ export class PbOddParameterEditor extends LitElement {
             paper-dropdown-menu{
                 align-self:start;
             }
-            paper-icon-button{
-                align-self:center;
+            paper-icon-button, paper-checkbox {
+                align-self: center;
+                margin-top: 16px;
             }
         `;
     }
@@ -56,7 +57,7 @@ export class PbOddParameterEditor extends LitElement {
                         code="${this.value}"
                         linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') ? 'modules/editor.xql' : 'api/lint'}"
                         apiVersion="${this.apiVersion}"></pb-code-editor>
-
+            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">set</paper-checkbox>
             <paper-icon-button @click="${this._delete}" icon="delete" title="delete this parameter"></paper-icon-button>
         </div>
 
@@ -87,6 +88,10 @@ export class PbOddParameterEditor extends LitElement {
             parameters: {
                 type: Object
             },
+            setParam: {
+                type: Boolean,
+                attribute: 'set'
+            },
             _currentParameters: {
                 type: Array
             },
@@ -104,6 +109,7 @@ export class PbOddParameterEditor extends LitElement {
         super();
         this.name = '';
         this.value = '';
+        this.setParam = false;
         this.behaviour = '';
         this.currentParameters = [];
         this.parameters = {
@@ -189,7 +195,8 @@ export class PbOddParameterEditor extends LitElement {
         console.log('_handleCodeChange ', e);
         this.value = this.shadowRoot.getElementById('editor').getSource();
         this.name = this.shadowRoot.getElementById('combo').text;
-        this.dispatchEvent(new CustomEvent('parameter-changed', { composed: true, bubbles: true, detail: { name: this.name, value: this.value } }));
+        this.setParam = this.shadowRoot.getElementById('set').checked;
+        this.dispatchEvent(new CustomEvent('parameter-changed', { composed: true, bubbles: true, detail: { name: this.name, value: this.value, set: this.setParam } }));
     }
 
 

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);