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

Remove slot, add API func to vpu-data-table-view

parent c1a9ec03
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/data-table-view/src/data-table-view.js
+ 42
− 17
View file @ e24f2037
...@@ -2,10 +2,13 @@ import $ from 'jquery'; ...@@ -2,10 +2,13 @@ import $ from 'jquery';
import dt from 'datatables.net'; import dt from 'datatables.net';
import resp from 'datatables.net-responsive'; import resp from 'datatables.net-responsive';
import resp2 from 'datatables.net-responsive-dt'; import resp2 from 'datatables.net-responsive-dt';
//import {getAssetURL,} from './utils.js';
import {i18n} from './i18n'; import {i18n} from './i18n';
import {html, LitElement} from 'lit-element'; import {html, LitElement} from 'lit-element';
import de from '../assets/datatables/i18n/German';
import en from '../assets/datatables/i18n/English';
import * as commonUtils from 'vpu-common/utils'; import * as commonUtils from 'vpu-common/utils';
import {getAssetURL} from "./utils";
dt(window, $); dt(window, $);
resp(window, $); resp(window, $);
...@@ -20,7 +23,9 @@ class DataTableView extends LitElement { ...@@ -20,7 +23,9 @@ class DataTableView extends LitElement {
this.responsive = null; this.responsive = null;
this.paging = false; this.paging = false;
this.searching = false; this.searching = false;
this.columnDef = []; this.columns = [{title: 'uninitialized'}];
this.columnDefs = [];
this.data = [];
} }
static get properties() { static get properties() {
...@@ -29,29 +34,41 @@ class DataTableView extends LitElement { ...@@ -29,29 +34,41 @@ class DataTableView extends LitElement {
table: { type: Object, attribute: false }, table: { type: Object, attribute: false },
paging: { type: Boolean }, paging: { type: Boolean },
searching: { type: Boolean }, searching: { type: Boolean },
columnDef: { type: Array, attribute: false }, columns: { type: Array, attribute: false },
columnDefs: { type: Array, attribute: false },
data: { type: Array, attribute: false },
}; };
} }
set_columnDef(def) { set_columns(cols) {
this.columnDef = def; this.columns = cols;
return this;
}
set_columnDefs(defs) {
this.columnDefs = defs;
return this;
}
add_row(row) {
this.data.push(row);
this.table.row.add(row);
return this;
}
draw() {
this.table.draw();
return this;
} }
set_datatable() { set_datatable(data) {
const lang_de_url = 'local/vpu-data-table-view/i18n/German.json'; const lang_obj = this.lang === 'de' ? de : en;
const lang_en_url = 'local/vpu-data-table-view/i18n/English.json';
if (this.table) { this.table = $(this.shadowRoot.querySelector('table')).DataTable({
this.table.destroy(); destroy: true,
}
this.table = $(this.querySelector('table')).DataTable({
autoWidth: false, autoWidth: false,
language: { language: lang_obj,
url: this.lang === 'de' ? lang_de_url : lang_en_url,
},
paging: this.paging, paging: this.paging,
searching: this.searching, searching: this.searching,
columnDef: this.columnDef, columns: this.columns,
columnDefs: this.columnDefs,
}); });
try { try {
...@@ -61,6 +78,10 @@ class DataTableView extends LitElement { ...@@ -61,6 +78,10 @@ class DataTableView extends LitElement {
} catch (e) { } catch (e) {
// XXX: it throws, but it still works // XXX: it throws, but it still works
} }
if (data) {
this.data = data;
}
this.table.rows.add(this.data).draw();
} }
update(changedProperties) { update(changedProperties) {
...@@ -75,10 +96,14 @@ class DataTableView extends LitElement { ...@@ -75,10 +96,14 @@ class DataTableView extends LitElement {
} }
render() { render() {
let dt_css = getAssetURL('local/vpu-data-table-view/css/jquery.dataTables.min.css');
let rs_css = getAssetURL('local/vpu-data-table-view/css/responsive.dataTables.css');
return html` return html`
<link rel="stylesheet" href="${dt_css}">
<link rel="stylesheet" href="${rs_css}">
<style> <style>
</style> </style>
<slot name="table"></slot> <div><table></table></div>
`; `;
} }
} }
......
packages/data-table-view/src/demo.js
+ 88
− 165
View file @ e24f2037
import 'vpu-auth'; import 'vpu-auth';
import './data-table-view.js'; import './data-table-view.js';
import {setting, getAssetURL,} from './utils.js'; import {setting,} from './utils.js';
import {i18n} from './i18n'; import {i18n} from './i18n';
import {html, LitElement} from 'lit-element'; import {html, LitElement} from 'lit-element';
import * as commonUtils from 'vpu-common/utils'; import * as commonUtils from 'vpu-common/utils';
...@@ -17,6 +17,49 @@ class DataTableViewDemo extends LitElement { ...@@ -17,6 +17,49 @@ class DataTableViewDemo extends LitElement {
}; };
} }
connectedCallback() {
super.connectedCallback();
const that = this;
this.updateComplete.then(()=> {
/*
First Table: with data
*/
const vdtv1 = that.shadowRoot.querySelector('#vdtv1');
if (vdtv1 !== null) {
const vdtv1_columnDefs = [
{ targets: [3], visible: false },
{ targets: [2], orderData: [3] },
{ targets: [3, 4], searchable: false },
{ targets: [4], sortable: false }
];
const tbl = [];
for (let i = 0; i<25; ++i) {
tbl.push(this.vdtv_create_row());
}
vdtv1.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
.set_columnDefs(vdtv1_columnDefs)
.set_datatable(tbl);
}
/*
Second Table: no data definition only
*/
const vdtv2 = that.shadowRoot.querySelector('#vdtv2');
if (vdtv2 !== null) {
const vdtv2_columnDefs = [
{ targets: [3], visible: false },
{ targets: [2], orderData: [3] },
{ targets: [3, 4], searchable: false },
{ targets: [4], sortable: false }
];
vdtv2.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
.set_columnDefs(vdtv2_columnDefs)
.set_datatable([]);
}
});
}
update(changedProperties) { update(changedProperties) {
changedProperties.forEach((oldValue, propName) => { changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") { if (propName === "lang") {
...@@ -27,14 +70,33 @@ class DataTableViewDemo extends LitElement { ...@@ -27,14 +70,33 @@ class DataTableViewDemo extends LitElement {
super.update(changedProperties); super.update(changedProperties);
} }
vdtv_create_row() {
const str = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
const day = Math.floor(Math.random()*(31-1) + 1);
const month = Math.floor(Math.random()*(12-1) + 1);
const year = Math.floor(Math.random()*(2019-2016) + 2016);
return [
str,
Math.floor(1000 * Math.random()),
'' + day + '.' + month + '.' + year,
'' + year + '-' + month + '-' + day,
'<button onclick="alert(\'' + str + ' clicked\');">OK</button>'
];
}
vdtv2_add_rows() {
console.log('vdtv2_add_rows() clicked');
const vdtv2 = this.shadowRoot.querySelector('#vdtv2');
if (vdtv2 !== null) {
const row = this.vdtv_create_row();
vdtv2.add_row(row).draw();
}
}
render() { render() {
// datatable.net tyles must be applied here :-/ // datatable.net tyles must be applied here :-/
let dt_css = getAssetURL('datatables/css/jquery.dataTables.min.css');
let rs_css = getAssetURL('datatables/css/responsive.dataTables.css');
return html` return html`
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<link rel="stylesheet" href="${dt_css}">
<link rel="stylesheet" href="${rs_css}">
<style> <style>
.box { .box {
margin: 10px; margin: 10px;
...@@ -51,175 +113,36 @@ class DataTableViewDemo extends LitElement { ...@@ -51,175 +113,36 @@ class DataTableViewDemo extends LitElement {
<vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth> <vpu-auth lang="${this.lang}" client-id="${setting('keyCloakClientId')}" load-person force-login></vpu-auth>
</div> </div>
<div class="content"> <div class="content">
<h4>DataTable: paging and searching</h4> <h4>DataTable: with data, paging and searching</h4>
<div class="box"> <div class="box">
<vpu-data-table-view lang="${this.lang}" paging searching> <vpu-data-table-view lang="${this.lang}" paging searching id="vdtv1"></vpu-data-table-view>
<div slot="table"><!-- slot encapsulates table -->
<table class="display">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>123</td>
<td>a-2-4-g</td>
</tr>
<tr>
<td>def</td>
<td>456</td>
<td>b-3-5-h</td>
</tr>
<tr>
<td>ghi</td>
<td>789</td>
<td>c-4-6-i</td>
</tr>
<tr>
<td>jkl</td>
<td>012</td>
<td>x-8-0-a</td>
</tr>
<tr>
<td>abc</td>
<td>123</td>
<td>a-2-4-g</td>
</tr>
<tr>
<td>def</td>
<td>456</td>
<td>b-3-5-h</td>
</tr>
<tr>
<td>ghi</td>
<td>789</td>
<td>c-4-6-i</td>
</tr>
<tr>
<td>jkl</td>
<td>012</td>
<td>x-8-0-a</td>
</tr>
<tr>
<td>abc</td>
<td>123</td>
<td>a-2-4-g</td>
</tr>
<tr>
<td>def</td>
<td>456</td>
<td>b-3-5-h</td>
</tr>
<tr>
<td>ghi</td>
<td>789</td>
<td>c-4-6-i</td>
</tr>
<tr>
<td>jkl</td>
<td>012</td>
<td>x-8-0-a</td>
</tr>
</tbody>
</table>
</div>
</vpu-data-table-view>
</div> </div>
<h4>DataTable: no paging, no searching</h4> <h4>DataTable: no data, no paging, no searching</h4>
<div class="box"> <div class="box">
<vpu-data-table-view lang="${this.lang}"> <button @click="${this.vdtv2_add_rows}">noch etwas...</button>
<div slot="table"><!-- slot encapsulates table --> <vpu-data-table-view lang="${this.lang}" id="vdtv2"></vpu-data-table-view>
<table class="display">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>123</td>
<td>a-2-4-g</td>
</tr>
<tr>
<td>ghi</td>
<td>789</td>
<td>c-4-6-i</td>
</tr>
<tr>
<td>jkl</td>
<td>012</td>
<td>x-8-0-a</td>
</tr>
</tbody>
</table>
</div>
</vpu-data-table-view>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<h4>Common Table</h4> <h4>Common Table</h4>
<div class="box"> <div class="box">
<!-- <vpu-data-table-view lang="${this.lang}" paging searching> --> <!-- <vpu-data-table-view lang="${this.lang}" paging searching> -->
<div slot="table"> <table class="display">
<table class="display"> <thead>
<thead> <tr>
<tr> <th>A</th>
<th>A</th> <th>B</th>
<th>B</th> <th>C</th>
<th>C</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td>abc</td>
<td>abc</td> <td>123</td>
<td>123</td> <td>a-2-4-g</td>
<td>a-2-4-g</td> </tr>
</tr> </tbody>
<tr> </table>
<td>def</td>
<td>456</td>
<td>b-3-5-h</td>
</tr>
<tr>
<td>ghi</td>
<td>789</td>
<td>c-4-6-i</td>
</tr>
<tr>
<td>jkl</td>
<td>012</td>
<td>x-8-0-a</td>
</tr>
<tr>
<td>abc</td>
<td>123</td>
<td>a-2-4-g</td>
</tr>
<tr>
<td>def</td>
<td>456</td>
<td>b-3-5-h</td>
</tr>
<tr>
<td>ghi</td>
<td>789</td>
<td>c-4-6-i</td>
</tr>
<tr>
<td>jkl</td>
<td>012</td>
<td>x-8-0-a</td>
</tr>
</tbody>
</table>
</div>
<!-- </vpu-data-table-view> --> <!-- </vpu-data-table-view> -->
</div> </div>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment