From b44bd2b266d768aa0d8bac9a2a30deded79dca2e Mon Sep 17 00:00:00 2001 From: Eugen Neuber <eugen.neuber@tugraz.at> Date: Fri, 9 Aug 2019 16:18:57 +0200 Subject: [PATCH] Make columns configurable TODO: changing columns at runtime --- .../data-table-view/src/data-table-view.js | 18 ++++++++++++----- packages/data-table-view/src/demo.js | 20 ++++++++++++++++--- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js index 45cb17d6..74d954af 100644 --- a/packages/data-table-view/src/data-table-view.js +++ b/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": diff --git a/packages/data-table-view/src/demo.js b/packages/data-table-view/src/demo.js index 80c80779..beb6725b 100644 --- a/packages/data-table-view/src/demo.js +++ b/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> -- GitLab