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

Load from API, blacklist columns, lang support

TODO: column titles are schema attribute names (no translation)
TODO: ordering of columns
parent f45b3418
No related branches found
No related tags found
No related merge requests found
......@@ -3,6 +3,7 @@ import dt from 'datatables.net';
import {setting, getAPiUrl, getAssetURL, } from './utils.js';
import {i18n} from './i18n';
import {html, LitElement} from 'lit-element';
import JSONLD from 'vpu-common/jsonld';
import commonUtils from 'vpu-common/utils';
dt(window, $);
......@@ -11,6 +12,12 @@ class DataTableView extends LitElement {
constructor() {
super();
this.lang = 'de';
this.entryPointUrl = getAPiUrl();
this.jsonld = null;
this.value = null;
this.filter = null;
this.apiUrl = null;
this.blacklist_cols = '';
}
static get properties() {
......@@ -18,32 +25,104 @@ class DataTableView extends LitElement {
lang: { type: String },
value: { type: String },
entryPointUrl: { type: String, attribute: 'entry-point-url' },
filter: { type: String },
apiUrl: { type: String, attribute: false },
blacklist_cols: { type: String, attribute: 'blacklisted-columns' },
};
}
connectedCallback() {
super.connectedCallback();
const that = this;
JSONLD.initialize(this.entryPointUrl, function (jsonld) {
that.jsonld = jsonld;
that.apiUrl = that.jsonld.getApiUrlForIdentifier("http://schema.org/" + that.value);
});
// disabled, load first on toggle to visible
window.addEventListener("vpu-auth-init", () => that.loadWebPageElement());
}
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);
const apiUrl = this.entryPointUrl + this.value; // TODO
var that = this;
fetch(apiUrl, {
fetch(apiUrlWithFilter, {
headers: {
'Content-Type': 'application/ld+json',
'Authorization': 'Bearer ' + window.VPUAuthToken,
},
})
.then(res => res.json())
.then() // TODO
.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))));
}
console.log('cols = ' + cols);
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) {
if (rows[j] === undefined) {
rows[j] = [];
}
rows[j][i] = persons[j][cols[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,
}
);
})
.catch();
}
update(changedProperties) {
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
switch (propName) {
case "lang":
i18n.changeLanguage(this.lang);
break;
case "filter":
this.loadWebPageElement();
break;
case "value":
case "entryPointUrl":
const that = this;
JSONLD.initialize(this.entryPointUrl, function (jsonld) {
that.jsonld = jsonld;
that.apiUrl = that.jsonld.getApiUrlForIdentifier("http://schema.org/" + that.value);
});
this.loadWebPageElement();
break;
}
});
......
......@@ -27,9 +27,19 @@ class DataTableViewDemo extends LitElement {
super.update(changedProperties);
}
filterChange(e) {
let datatable = this.shadowRoot.querySelector('#dt1');
datatable.filter = e.target.value;
}
render() {
return html`
<style>
.box {
margin: 10px;
padding: 10px;
border: 1px solid orange;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
......@@ -41,7 +51,17 @@ class DataTableViewDemo extends LitElement {
<vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
</div>
<div class="content">
<data-table-view lang="${this.lang}" value=""></data-table-view>
<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}">
<div class="box">
<vpu-data-table-view
lang="${this.lang}"
value="Person"
filter=""
blacklisted-columns="@id @type functions roles accountTypes"
id="dt1"
></vpu-data-table-view>
</div>
</div>
</section>
`;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment