From ce8b402ebb22e43275cb836f747c8d1ae3a09e1e Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Mon, 12 Aug 2019 17:06:12 +0200
Subject: [PATCH] Fix data reload, better demo
---
.../data-table-view/src/data-table-view.js | 141 +++++++++++++-----
packages/data-table-view/src/demo.js | 41 +++--
2 files changed, 139 insertions(+), 43 deletions(-)
diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js
index 74d954af..0cf806e2 100644
--- a/packages/data-table-view/src/data-table-view.js
+++ b/packages/data-table-view/src/data-table-view.js
@@ -19,6 +19,15 @@ class DataTableView extends LitElement {
this.apiUrl = null;
this.whitelist_cols = '*';
this.blacklist_cols = '';
+ this.table_columns = []; // all possible columns, defined by API entity
+ this.show_columns = []; // all columns visible in table, defined by property whhitelist/blacklist
+ this.display_columns = []; // all possible columns, in desired order for the table
+ // datatable properties
+ this.table = null;
+ this.paging = 1;
+ this.searching = 1;
+ //
+ this.is_loading = false;
}
static get properties() {
@@ -30,6 +39,13 @@ class DataTableView extends LitElement {
apiUrl: { type: String, attribute: false },
whitelist_cols: { type: String, attribute: 'whitelisted-columns' },
blacklist_cols: { type: String, attribute: 'blacklisted-columns' },
+ table_columns: { type: Array, attribute: false },
+ show_columns: { type: Array, attribute: false },
+ display_columns: { type: Array, attribute: false },
+ table: { type: Object, attribute: false },
+ paging: { type: String },
+ searching: { type: String },
+ is_loading: { type: Boolean },
};
}
@@ -40,12 +56,71 @@ class DataTableView extends LitElement {
JSONLD.initialize(this.entryPointUrl, function (jsonld) {
that.jsonld = jsonld;
that.apiUrl = that.jsonld.getApiUrlForIdentifier("http://schema.org/" + that.value);
+ that.table_columns = that.jsonld.entities[that.value]['hydra:supportedProperty'].map(obj => obj['hydra:title']);
+
+ // display empty table
+ that.setup_columns();
+ let columns = [];
+ for (let i = 0; i < that.display_columns.length; ++i) {
+ columns[i] = {
+ title: that.display_columns[i],
+ visible: that.show_columns.indexOf(that.display_columns[i]) > -1
+ };
+ }
+ that.set_datatable(columns);
+ if (that.filter) {
+ that.loadWebPageElement();
+ }
});
// disabled, load first on toggle to visible
window.addEventListener("vpu-auth-init", () => that.loadWebPageElement());
}
+ setup_columns() {
+ //let cols = this.table_columns.slice();
+
+ if (this.whitelist_cols === '*') {
+ const blacklist_cols = this.blacklist_cols.split(' ');
+ this.show_columns = this.table_columns.filter(col => blacklist_cols.indexOf(col) === -1);
+ } else {
+ this.show_columns = this.whitelist_cols.split(' ');
+ }
+ this.display_columns = this.show_columns.slice();
+ for(let i=0; i < this.table_columns.length; ++i) {
+ if (this.display_columns.indexOf(this.table_columns[i]) === -1)
+ this.display_columns.push(this.table_columns[i]);
+ }
+
+ }
+
+ set_datatable(columns) {
+ 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';
+
+ this.table = $(this.shadowRoot.querySelector('#dt')).DataTable({
+ destroy: true,
+ language: {
+ url: this.lang === 'de' ? lang_de_url : lang_en_url,
+ },
+ columns: columns,
+ data: [],
+ paging: this.paging > 0,
+ searching: this.searching > 0,
+ });
+ }
+
+ update_datatable(columns, rows) {
+ //console.log('rows = ' + rows);
+ const that = this;
+ if (this.table) {
+ this.table.clear();
+ columns.forEach(function (item, index) { that.table.columns([index]).visible(item.visible === true); });
+ rows.forEach(row => this.table.row.add(row));
+ this.table.draw();
+ }
+ }
+
loadWebPageElement() {
if (window.VPUAuthToken === undefined || window.VPUAuthToken === "") {
return;
@@ -57,7 +132,8 @@ class DataTableView extends LitElement {
const apiUrlWithFilter = this.apiUrl + '?search=' + this.filter;
console.log('apiUrlWithFilter = ' + apiUrlWithFilter);
- var that = this;
+ const that = this;
+ this.is_loading = true;
fetch(apiUrlWithFilter, {
headers: {
@@ -68,44 +144,26 @@ class DataTableView extends LitElement {
.then(res => res.json())
.then(function (data) {
// TODO
- console.log(data['hydra:member']);
- const persons = data['hydra:member'];
- let cols = [];
- 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);
+ that.setup_columns();
+
+ const items = data['hydra:member'];
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) {
+ for(let i=0; i < that.display_columns.length; ++i) {
+ columns[i] = {
+ title: that.display_columns[i],
+ visible: that.show_columns.indexOf(that.display_columns[i]) > -1
+ };
+ for(let j=0; j < items.length; ++j) {
if (rows[j] === undefined) {
rows[j] = [];
}
- rows[j][i] = persons[j][cols[i]] || '';
+ rows[j][i] = items[j][that.display_columns[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,
- }
- );
-
+ that.update_datatable(columns, rows);
+ that.is_loading = false;
})
.catch();
}
@@ -120,6 +178,8 @@ class DataTableView extends LitElement {
case "filter":
case "whitelist_cols":
case "blacklist_cols":
+ case "paging":
+ case "searching":
this.loadWebPageElement();
break;
case "value":
@@ -138,13 +198,26 @@ class DataTableView extends LitElement {
}
render() {
- var dt_css = getAssetURL('datatables/css/jquery.dataTables.min.css')
+ let dt_css = getAssetURL('datatables/css/jquery.dataTables.min.css');
return html`
<link rel="stylesheet" href="${dt_css}">
<style>
+ #cover {
+ min-width: 100px;
+ display: ${this.is_loading ? 'block' : 'none'};
+ position: relative; height: 100%; width: 100%; top: 0; left: 0; background: #fff; z-index:9999;
+ }
+ #cover img {
+ display: block;
+ margin 0 auto;
+ }
</style>
- <table id="dt" class="display" style="width:100%">
- </table>
+ <div id="dt-parent">
+ <div id="cover">
+ <img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///wAAAPj4+Dg4OISEhAYGBiYmJtbW1qioqBYWFnZ2dmZmZuTk5JiYmMbGxkhISFZWVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAAKAAEALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkEAAoAAgAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkEAAoAAwAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAAKAAQALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAAKAAUALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==">
+ </div>
+ <table id="dt" class="display" style="width:100%"></table>
+ </div>
`;
}
}
diff --git a/packages/data-table-view/src/demo.js b/packages/data-table-view/src/demo.js
index beb6725b..8dc1c336 100644
--- a/packages/data-table-view/src/demo.js
+++ b/packages/data-table-view/src/demo.js
@@ -33,7 +33,6 @@ class DataTableViewDemo extends LitElement {
}
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);
@@ -47,6 +46,11 @@ class DataTableViewDemo extends LitElement {
padding: 10px;
border: 1px solid orange;
}
+ .box2 {
+ margin: 10px;
+ padding: 10px;
+ border: 1px solid green;
+ }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
@@ -58,6 +62,7 @@ class DataTableViewDemo extends LitElement {
<vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
</div>
<div class="content">
+ <h4>DataTable: paging and searching</h4>
<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}">
@@ -67,14 +72,32 @@ class DataTableViewDemo extends LitElement {
<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>
+ <vpu-data-table-view
+ lang="${this.lang}"
+ value="Person"
+ filter=""
+ whitelisted-columns="*"
+ blacklisted-columns="phoneExtension name"
+ id="dt1"
+ paging="1"
+ ></vpu-data-table-view>
+ </div>
+ </div>
+ </section>
+ <section class="section">
+ <div class="content">
+ <h4>DataTable: no paging, no searching</h4>
+ <div class="box2">
+ <vpu-data-table-view
+ lang="${this.lang}"
+ value="Person"
+ filter="Ab"
+ whitelisted-columns="name telephone email"
+ blacklisted-columns=""
+ id="dt2"
+ paging="0"
+ searching="0"
+ ></vpu-data-table-view>
</div>
</div>
</section>
--
GitLab