Skip to content
Snippets Groups Projects
Commit ce8b402e authored by Neuber, Eugen Ramon's avatar Neuber, Eugen Ramon :speech_balloon: Committed by Reiter, Christoph
Browse files

Fix data reload, better demo

parent b44bd2b2
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
packages/data-table-view/src/data-table-view.js
+ 107
− 34
View file @ ce8b402e
......@@ -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>
`;
}
}
......
packages/data-table-view/src/demo.js
+ 32
− 9
View file @ ce8b402e
......@@ -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}">
......@@ -72,8 +77,26 @@ class DataTableViewDemo extends LitElement {
value="Person"
filter=""
whitelisted-columns="*"
blacklisted-columns="@id @type functions roles accountTypes"
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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment