Load from API, blacklist columns, lang support

TODO: column titles are schema attribute names (no translation)
TODO: ordering of columns

packages/data-table-view/src/data-table-view.js

@@ -3,6 +3,7 @@ import dt from 'datatables.net';
 import {setting, getAPiUrl, getAssetURL, } from './utils.js';
 import {i18n} from './i18n';
 import {html, LitElement} from 'lit-element';
+import JSONLD from 'vpu-common/jsonld';
 import commonUtils from 'vpu-common/utils';
 
 dt(window, $);
@@ -11,6 +12,12 @@ class DataTableView extends LitElement {
     constructor() {
         super();
         this.lang = 'de';
+        this.entryPointUrl = getAPiUrl();
+        this.jsonld = null;
+        this.value = null;
+        this.filter = null;
+        this.apiUrl = null;
+        this.blacklist_cols = '';
     }
 
     static get properties() {
@@ -18,32 +25,104 @@ class DataTableView extends LitElement {
             lang: { type: String },
             value: { type: String },
             entryPointUrl: { type: String, attribute: 'entry-point-url' },
+            filter: { type: String },
+            apiUrl: { type: String, attribute: false },
+            blacklist_cols: { type: String, attribute: 'blacklisted-columns' },
         };
     }
 
+    connectedCallback() {
+        super.connectedCallback();
+        const that = this;
+
+        JSONLD.initialize(this.entryPointUrl, function (jsonld) {
+            that.jsonld = jsonld;
+            that.apiUrl = that.jsonld.getApiUrlForIdentifier("http://schema.org/" + that.value);
+        });
+
+        // disabled, load first on toggle to visible
+        window.addEventListener("vpu-auth-init", () => that.loadWebPageElement());
+    }
+
     loadWebPageElement() {
         if (window.VPUAuthToken === undefined || window.VPUAuthToken === "") {
             return;
         }
+        if (this.apiUrl === null || this.jsonld === null) {
+            return;
+        }
+
+        const apiUrlWithFilter = this.apiUrl + '?search=' + this.filter;
+        console.log('apiUrlWithFilter = ' + apiUrlWithFilter);
 
-        const apiUrl = this.entryPointUrl + this.value; // TODO
         var that = this;
 
-        fetch(apiUrl, {
+        fetch(apiUrlWithFilter, {
             headers: {
                 'Content-Type': 'application/ld+json',
                 'Authorization': 'Bearer ' + window.VPUAuthToken,
             },
         })
             .then(res => res.json())
-            .then() // TODO
+            .then(function (data) {
+                console.log(data);
+                // TODO
+                console.log(data['hydra:member']);
+                const persons = data['hydra:member'];
+                const blacklist_cols = that.blacklist_cols.split(' ');
+                let cols = [];
+                for(let i=0; i < persons.length; ++i) {
+                    let new_cols = Object.keys(persons[i]);
+                    cols = cols.concat(new_cols.filter(item => (!~cols.indexOf(item) && !~blacklist_cols.indexOf(item))));
+                }
+                console.log('cols = ' + cols);
+                let rows = [];
+                let columns = [];
+                for(let i=0; i < cols.length; ++i) {
+                    columns[i] = { title: cols[i] };
+                    for(let j=0; j < persons.length; ++j) {
+                        if (rows[j] === undefined) {
+                            rows[j] = [];
+                        }
+                        rows[j][i] = persons[j][cols[i]] || '';
+                    }
+                }
+
+                const lang_de_url = 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json';
+                const lang_en_url = 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/English.json';
+
+                const table = $(that.shadowRoot.querySelector('#dt')).DataTable({
+                    destroy: true,
+                    language: {
+                        url: that.lang === 'de' ? lang_de_url : lang_en_url,
+                    },
+                    columns: columns,
+                    data: rows,
+                    }
+                );
+
+            })
             .catch();
     }
 
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
-            if (propName === "lang") {
-                i18n.changeLanguage(this.lang);
+            switch (propName) {
+                case "lang":
+                    i18n.changeLanguage(this.lang);
+                    break;
+                case "filter":
+                    this.loadWebPageElement();
+                    break;
+                case "value":
+                case "entryPointUrl":
+                    const that = this;
+                    JSONLD.initialize(this.entryPointUrl, function (jsonld) {
+                        that.jsonld = jsonld;
+                        that.apiUrl = that.jsonld.getApiUrlForIdentifier("http://schema.org/" + that.value);
+                    });
+                    this.loadWebPageElement();
+                    break;
             }
         });
 

packages/data-table-view/src/demo.js

@@ -27,9 +27,19 @@ class DataTableViewDemo extends LitElement {
         super.update(changedProperties);
     }
 
+    filterChange(e) {
+        let datatable = this.shadowRoot.querySelector('#dt1');
+        datatable.filter = e.target.value;
+    }
+
     render() {
         return html`
             <style>
+                .box {
+                    margin: 10px;
+                    padding: 10px;
+                    border: 1px solid orange;
+                }
             </style>
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
 
@@ -41,7 +51,17 @@ class DataTableViewDemo extends LitElement {
                     <vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
                 </div>
                 <div class="content">
-                    <data-table-view lang="${this.lang}" value=""></data-table-view>
+                    <label for="filter">Filter für die Suche:</label>
+                    <input type="text" id="filter" value="" placeholder="Geben Sie mindestens 3 Zeichen ein" @change="${this.filterChange}">
+                    <div class="box">
+                    <vpu-data-table-view
+                        lang="${this.lang}"
+                        value="Person"
+                        filter=""
+                        blacklisted-columns="@id @type functions roles accountTypes"
+                        id="dt1"
+                    ></vpu-data-table-view>
+                    </div>
                 </div>
             </section>
         `;