From 12d1701bb0fbd196bd4c55246cd3e5124ef0c9ca Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Wed, 14 Aug 2019 16:41:01 +0200
Subject: [PATCH] Merge branch 'ajax-pipeline'
---
packages/data-table-view/README.md | 6 ++
.../data-table-view/src/data-table-view.js | 100 +++++++++++-------
packages/data-table-view/src/demo.js | 6 +-
3 files changed, 71 insertions(+), 41 deletions(-)
diff --git a/packages/data-table-view/README.md b/packages/data-table-view/README.md
index fabd86b1..a7447942 100644
--- a/packages/data-table-view/README.md
+++ b/packages/data-table-view/README.md
@@ -19,6 +19,12 @@
- example `<vpu-data-table-view lang="de"></vpu-data-table-view>`
- `entry-point-url` (optional, default is the TU Graz entry point url): entry point url to access the api
- example `<vpu-data-table-view entry-point-url="http://127.0.0.1:8000"></vpu-data-table-view>`
+- `paging` (optional, required to let datatable do the paging of loaded rows)
+ - example `<vpu-data-table-view paging></vpu-data-table-view>`
+- `searching` (optional, required if a search box is desired)
+ - example `<vpu-data-table-view searching></vpu-data-table-view>`
+- `wait-until-all-loaded` (optional, required if all rows must load before use)
+ - example `<vpu-data-table-view wait-until-all-loaded></vpu-data-table-view>`
# Local development
```bash
diff --git a/packages/data-table-view/src/data-table-view.js b/packages/data-table-view/src/data-table-view.js
index e803693e..d1e4a0bd 100644
--- a/packages/data-table-view/src/data-table-view.js
+++ b/packages/data-table-view/src/data-table-view.js
@@ -5,12 +5,14 @@ import resp2 from 'datatables.net-responsive-dt';
import {setting, getAPiUrl, getAssetURL, } from './utils.js';
import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
import JSONLD from 'vpu-common/jsonld';
import commonUtils from 'vpu-common/utils';
import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
dt(window, $);
resp(window, $);
+resp2(window, $);
class DataTableView extends LitElement {
constructor() {
@@ -28,10 +30,12 @@ class DataTableView extends LitElement {
this.display_columns = []; // all possible columns, in desired order for the table
// datatable properties
this.table = null;
- this.paging = 1;
- this.searching = 1;
+ this.responsive = null;
+ this.paging = false;
+ this.searching = false;
//
this.is_loading = false;
+ this.wait_until_all_loaded = false;
}
static get properties() {
@@ -47,9 +51,10 @@ class DataTableView extends LitElement {
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 },
+ paging: { type: Boolean },
+ searching: { type: Boolean },
+ is_loading: { type: Boolean, attribute: false },
+ wait_until_all_loaded: { type: Boolean, attribute: 'wait-until-all-loaded'}
};
}
@@ -82,8 +87,6 @@ class DataTableView extends LitElement {
}
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);
@@ -92,10 +95,10 @@ class DataTableView extends LitElement {
}
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)
+ if (this.display_columns.indexOf(this.table_columns[i]) === -1) {
this.display_columns.push(this.table_columns[i]);
+ }
}
-
}
set_datatable(columns) {
@@ -110,8 +113,8 @@ class DataTableView extends LitElement {
},
columns: columns,
data: [],
- paging: this.paging > 0,
- searching: this.searching > 0,
+ paging: this.paging,
+ searching: this.searching,
});
try {
@@ -127,29 +130,23 @@ class DataTableView extends LitElement {
//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); });
+ columns.forEach(function (item, index) {
+ let i = that.display_columns.indexOf(item.title);
+ // console.log('item = {' + item.title + ', ' + item.visible + '} i = ' + i);
+ that.table.columns([i]).visible(item.visible == true);
+ // TODO that.table.columns([index]).title = item.title;
+ });
rows.forEach(row => this.table.row.add(row));
// now ready to draw
this.table.draw();
}
}
- 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);
-
+ async loader(page) {
+ const apiUrlWithFilter = this.apiUrl + '?search=' + this.filter + '&page=' + page;
const that = this;
- this.is_loading = true;
- fetch(apiUrlWithFilter, {
+ return await fetch(apiUrlWithFilter, {
headers: {
'Content-Type': 'application/ld+json',
'Authorization': 'Bearer ' + window.VPUAuthToken,
@@ -163,23 +160,45 @@ class DataTableView extends LitElement {
const items = data['hydra:member'];
let rows = [];
let columns = [];
- for(let i=0; i < that.display_columns.length; ++i) {
+ 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] = [];
+ if (items) {
+ for (let j = 0; j < items.length; ++j) {
+ if (rows[j] === undefined) {
+ rows[j] = [];
+ }
+ rows[j][i] = items[j][that.display_columns[i]] || '';
}
- rows[j][i] = items[j][that.display_columns[i]] || '';
}
}
that.update_datatable(columns, rows);
- that.is_loading = false;
- })
- .catch();
+
+ if (!that.wait_until_all_loaded)
+ that.is_loading = false;
+
+ return items.length;
+ });
+ }
+ async call_loader(page) {
+ return await this.loader(page);
+ }
+
+ async loadWebPageElement() {
+ if (window.VPUAuthToken === undefined || window.VPUAuthToken === "") {
+ return;
+ }
+ if (this.apiUrl === null || this.jsonld === null) {
+ return;
+ }
+
+ this.is_loading = true;
+ let page = 1;
+ while (await this.call_loader(page++) === 50) {}
+ this.is_loading = false;
}
update(changedProperties) {
@@ -187,14 +206,17 @@ class DataTableView extends LitElement {
// noinspection FallThroughInSwitchStatementJS
switch (propName) {
case "lang":
- i18n.changeLanguage(this.lang);
+ i18n.changeLanguage(this.lang).catch(e => { console.log(e)});
break;
- case "filter":
case "whitelist_cols":
case "blacklist_cols":
+ this.setup_columns();
+ case "filter":
case "paging":
case "searching":
- this.loadWebPageElement();
+ if (this.table)
+ this.table.clear();
+ this.loadWebPageElement().catch(e => { console.log(e)});
break;
case "value":
case "entryPointUrl":
@@ -203,8 +225,10 @@ class DataTableView extends LitElement {
that.jsonld = jsonld;
that.apiUrl = that.jsonld.getApiUrlForIdentifier("http://schema.org/" + that.value);
});
- this.loadWebPageElement();
+ this.loadWebPageElement().catch(e => { console.log(e)});
break;
+ default:
+ // nothing to do for this properties
}
});
diff --git a/packages/data-table-view/src/demo.js b/packages/data-table-view/src/demo.js
index 8dc1c336..b2b50195 100644
--- a/packages/data-table-view/src/demo.js
+++ b/packages/data-table-view/src/demo.js
@@ -79,7 +79,8 @@ class DataTableViewDemo extends LitElement {
whitelisted-columns="*"
blacklisted-columns="phoneExtension name"
id="dt1"
- paging="1"
+ paging
+ searching
></vpu-data-table-view>
</div>
</div>
@@ -95,8 +96,7 @@ class DataTableViewDemo extends LitElement {
whitelisted-columns="name telephone email"
blacklisted-columns=""
id="dt2"
- paging="0"
- searching="0"
+ wait-until-all-loaded
></vpu-data-table-view>
</div>
</div>
--
GitLab