Make columns configurable

TODO: changing columns at runtime

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

@@ -17,6 +17,7 @@ class DataTableView extends LitElement {
         this.value = null;
         this.filter = null;
         this.apiUrl = null;
+        this.whitelist_cols = '*';
         this.blacklist_cols = '';
     }
 
@@ -27,6 +28,7 @@ class DataTableView extends LitElement {
             entryPointUrl: { type: String, attribute: 'entry-point-url' },
             filter: { type: String },
             apiUrl: { type: String, attribute: false },
+            whitelist_cols: { type: String, attribute: 'whitelisted-columns' },
             blacklist_cols: { type: String, attribute: 'blacklisted-columns' },
         };
     }
@@ -65,15 +67,18 @@ class DataTableView extends LitElement {
         })
             .then(res => res.json())
             .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))));
+                if (that.whitelist_cols === '*') {
+                    const blacklist_cols = that.blacklist_cols.split(' ');
+                    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))));
+                    }
+                } else {
+                    cols = that.whitelist_cols.split(' ');
                 }
                 console.log('cols = ' + cols);
                 let rows = [];
@@ -107,11 +112,14 @@ class DataTableView extends LitElement {
 
     update(changedProperties) {
         changedProperties.forEach((oldValue, propName) => {
+            // noinspection FallThroughInSwitchStatementJS
             switch (propName) {
                 case "lang":
                     i18n.changeLanguage(this.lang);
                     break;
                 case "filter":
+                case "whitelist_cols":
+                case "blacklist_cols":
                     this.loadWebPageElement();
                     break;
                 case "value":

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

@@ -29,7 +29,14 @@ class DataTableViewDemo extends LitElement {
 
     filterChange(e) {
         let datatable = this.shadowRoot.querySelector('#dt1');
-        datatable.filter = e.target.value;
+        datatable.setAttribute('filter', e.target.value);
+    }
+
+    colsChange(e) {
+        alert('colsChange: ' + e.target.value);
+        let datatable = this.shadowRoot.querySelector('#dt1');
+        if (datatable === undefined) { alter('datatable not found'); return; }
+        datatable.setAttribute('whitelisted-columns', e.target.value);
     }
 
     render() {
@@ -51,13 +58,20 @@ class DataTableViewDemo extends LitElement {
                     <vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
                 </div>
                 <div class="content">
-                    <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}">
+                    <p>
+                        <label for="filter">Filter für die Suche:</label>
+                        <input type="text" name="filter" id="filter" value="" placeholder="Geben Sie mindestens 3 Zeichen ein" @change="${this.filterChange}">
+                    </p>
+                    <p>
+                        <label for="columns">Spalten im Ergbnis:</label>
+                        <input type="text" name="columns" id="columns" value="*" placeholder="Geben Sie einen Stern * für alle ein" @change="${this.colsChange}">
+                    </p>
                     <div class="box">
                     <vpu-data-table-view
                         lang="${this.lang}"
                         value="Person"
                         filter=""
+                        whitelisted-columns="*"
                         blacklisted-columns="@id @type functions roles accountTypes"
                         id="dt1"
                     ></vpu-data-table-view>