Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@dbp-toolkit/data-table-view

Package Overview
Dependencies
Maintainers
3
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dbp-toolkit/data-table-view - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

.prettierignore
.prettierrc.json
dist/local/@dbp-toolkit/common/icons/contrast.svg
dist/local/@dbp-toolkit/common/icons/information-circle.svg
dist/local/@dbp-toolkit/common/icons/menu-dots.svg
dist/local/@dbp-toolkit/common/icons/source_icons_align-justify.svg
dist/local/@dbp-toolkit/common/icons/source_icons_eye-empty.svg
dist/local/@dbp-toolkit/common/icons/source_icons_eye-off.svg
dist/local/@dbp-toolkit/common/icons/warning-high.svg
dist/shared/data-table-view.3ad2aeb1.es.js
dist/shared/data-table-view.3ad2aeb1.es.js.map
i18next-scanner.config.js

2

.eslintrc.json
{
"root": true,
"extends": "./../../eslint.common.json"
}
}

46

assets/datatables/i18n/English.json

@@ -1,25 +0,23 @@

{
"sEmptyTable": "No data available in table",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
"sInfoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"sInfoPostFix": "",
"sInfoThousands": ",",
"sLengthMenu": "Show _MENU_ entries",
"sLoadingRecords": "Loading...",
"sProcessing": "Processing...",
"sSearch": "Search",
"sZeroRecords": "No matching records found",
"oPaginate": {
"sFirst": "First",
"sLast": "Last",
"sNext": "Next",
"sPrevious": "Previous"
},
"oAria": {
"sSortAscending": ": activate to sort column ascending",
"sSortDescending": ": activate to sort column descending"
}
}
"sEmptyTable": "No data available in table",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
"sInfoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"sInfoPostFix": "",
"sInfoThousands": ",",
"sLengthMenu": "Show _MENU_ entries",
"sLoadingRecords": "Loading...",
"sProcessing": "Processing...",
"sSearch": "Search",
"sZeroRecords": "No matching records found",
"oPaginate": {
"sFirst": "First",
"sLast": "Last",
"sNext": "Next",
"sPrevious": "Previous"
},
"oAria": {
"sSortAscending": ": activate to sort column ascending",
"sSortDescending": ": activate to sort column descending"
}
}

80

assets/datatables/i18n/German.json

@@ -1,43 +0,41 @@

{
"sEmptyTable": "Keine Daten in der Tabelle vorhanden",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "Keine Daten vorhanden",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sLoadingRecords": "Wird geladen ..",
"sProcessing": "Bitte warten ..",
"sSearch": "Suchen",
"sZeroRecords": "Keine Einträge vorhanden",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
},
"oAria": {
"sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
},
"select": {
"rows": {
"_": "%d Zeilen ausgewählt",
"0": "",
"1": "1 Zeile ausgewählt"
}
},
"buttons": {
"print": "Drucken",
"colvis": "Spalten",
"copy": "Kopieren",
"copyTitle": "In Zwischenablage kopieren",
"copyKeys": "Taste <i>ctrl</i> oder <i>\u2318</i> + <i>C</i> um Tabelle<br>in Zwischenspeicher zu kopieren.<br><br>Um abzubrechen die Nachricht anklicken oder Escape drücken.",
"copySuccess": {
"_": "%d Spalten kopiert",
"1": "1 Spalte kopiert"
}
}
"sEmptyTable": "Keine Daten in der Tabelle vorhanden",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "Keine Daten vorhanden",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sLoadingRecords": "Wird geladen ..",
"sProcessing": "Bitte warten ..",
"sSearch": "Suchen",
"sZeroRecords": "Keine Einträge vorhanden",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
},
"oAria": {
"sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
},
"select": {
"rows": {
"_": "%d Zeilen ausgewählt",
"0": "",
"1": "1 Zeile ausgewählt"
}
},
"buttons": {
"print": "Drucken",
"colvis": "Spalten",
"copy": "Kopieren",
"copyTitle": "In Zwischenablage kopieren",
"copyKeys": "Taste <i>ctrl</i> oder <i>\u2318</i> + <i>C</i> um Tabelle<br>in Zwischenspeicher zu kopieren.<br><br>Um abzubrechen die Nachricht anklicken oder Escape drücken.",
"copySuccess": {
"_": "%d Spalten kopiert",
"1": "1 Spalte kopiert"
}
}
}

2

dist/dbp-data-table-view.js

@@ -1,4 +0,4 @@

import { d as defineCustomElement, D as DataTableView } from './shared/data-table-view.2035b8a1.es.js';
import { d as defineCustomElement, D as DataTableView } from './shared/data-table-view.3ad2aeb1.es.js';
defineCustomElement('dbp-data-table-view', DataTableView);
//# sourceMappingURL=dbp-data-table-view.js.map

133

package.json
{
"name": "@dbp-toolkit/data-table-view",
"homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/data-table-view",
"version": "0.2.3",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/data-table-view"
},
"publishConfig": {
"registry": "https://registry.npmjs.org",
"access": "public"
},
"devDependencies": {
"@esm-bundle/chai": "^4.2.0",
"@rollup/plugin-commonjs": "^19.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.0.0",
"@rollup/plugin-url": "^6.0.0",
"eslint": "^7.3.1",
"eslint-plugin-jsdoc": "^35.0.0",
"glob": "^7.1.6",
"i18next-scanner": "^3.0.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^2.0.1",
"mocha": "^9.0.0",
"rollup": "^2.33.3",
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.2.2",
"@dbp-toolkit/common": "^0.2.2",
"@open-wc/scoped-elements": "^1.3.3",
"datatables.net-buttons": "^1.6.1",
"datatables.net-buttons-dt": "^1.6.1",
"datatables.net-dt": "^1.10.20",
"datatables.net-responsive": "^2.2.3",
"datatables.net-responsive-dt": "^2.2.3",
"i18next": "^20.0.0",
"jquery": "^3.4.1",
"jszip": "^3.2.2",
"lit-element": "^2.4.0",
"lit-html": "^1.3.0"
},
"scripts": {
"clean": "rm -r dist/*",
"build": "npm run build-local",
"build-local": "rollup -c",
"build-dev": "rollup -c --environment BUILD:development",
"build-prod": "rollup -c --environment BUILD:production",
"build-demo": "rollup -c --environment BUILD:demo",
"build-test": "rollup -c --environment BUILD:test",
"i18next": "i18next-scanner",
"watch": "npm run watch-local",
"watch-local": "rollup -c --watch",
"watch-dev": "rollup -c --watch --environment BUILD:development",
"test": "npm run build-test && karma start --singleRun",
"lint": "eslint ."
},
"gitHead": "95d4b5c2a9fde19d975c082d7b3320a44dfd8d96"
"name": "@dbp-toolkit/data-table-view",
"homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/data-table-view",
"version": "0.3.0",
"main": "src/index.js",
"license": "LGPL-2.1-or-later",
"repository": {
"type": "git",
"url": "https://gitlab.tugraz.at/dbp/web-components/toolkit.git",
"directory": "packages/data-table-view"
},
"publishConfig": {
"registry": "https://registry.npmjs.org",
"access": "public"
},
"devDependencies": {
"@esm-bundle/chai": "^4.2.0",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.0.0",
"@rollup/plugin-url": "^6.0.0",
"eslint": "^8.0.0",
"eslint-plugin-jsdoc": "^38.0.0",
"glob": "^7.1.6",
"i18next-scanner": "^3.0.0",
"karma": "^6.0.0",
"karma-chrome-launcher": "^3.0.0",
"karma-mocha": "^2.0.1",
"mocha": "^9.0.0",
"prettier": "^2.5.1",
"rollup": "^2.33.3",
"rollup-plugin-copy": "^3.1.0",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^7.0.2"
},
"dependencies": {
"@dbp-toolkit/auth": "^0.3.0",
"@dbp-toolkit/common": "^0.3.0",
"@open-wc/scoped-elements": "^2.0.0",
"datatables.net-buttons": "^2.0.0",
"datatables.net-buttons-dt": "^2.0.0",
"datatables.net-dt": "^1.10.20",
"datatables.net-responsive": "^2.2.3",
"datatables.net-responsive-dt": "^2.2.3",
"i18next": "^21.4.2",
"jquery": "^3.4.1",
"jszip": "^3.2.2",
"lit": "^2.0.0"
},
"scripts": {
"clean": "rm -r dist/*",
"format": "yarn run format:eslint && yarn run format:prettier",
"format:eslint": "eslint \"**/*.{js,ts}\" --fix",
"format:prettier": "prettier \"**/*.{js,json,ts}\" --write",
"build": "npm run build-local",
"build-local": "rollup -c",
"build-dev": "rollup -c --environment BUILD:development",
"build-prod": "rollup -c --environment BUILD:production",
"build-demo": "rollup -c --environment BUILD:demo",
"build-test": "rollup -c --environment BUILD:test",
"i18next": "i18next-scanner",
"watch": "npm run watch-local",
"watch-local": "rollup -c --watch",
"watch-dev": "rollup -c --watch --environment BUILD:development",
"test": "npm run build-test && karma start --singleRun",
"lint": "eslint ."
},
"gitHead": "43708a152992e631aaf08684c9d45d8032c4b1b0"
}

60

rollup.config.js

@@ -5,6 +5,6 @@ import glob from 'glob';

import copy from 'rollup-plugin-copy';
import {terser} from "rollup-plugin-terser";
import {terser} from 'rollup-plugin-terser';
import json from '@rollup/plugin-json';
import serve from 'rollup-plugin-serve';
import urlPlugin from "@rollup/plugin-url";
import urlPlugin from '@rollup/plugin-url';
import del from 'rollup-plugin-delete';

@@ -14,8 +14,11 @@ import {getPackagePath, getDistPath} from '../../rollup.utils.js';

const pkg = require('./package.json');
const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
console.log("build: " + build);
const build = typeof process.env.BUILD !== 'undefined' ? process.env.BUILD : 'local';
console.log('build: ' + build);
export default (async () => {
return {
input: (build != 'test') ? ['src/dbp-data-table-view.js', 'src/dbp-data-table-view-demo.js'] : glob.sync('test/**/*.js'),
input:
build != 'test'
? ['src/dbp-data-table-view.js', 'src/dbp-data-table-view-demo.js']
: glob.sync('test/**/*.js'),
output: {

@@ -26,3 +29,3 @@ dir: 'dist',

format: 'esm',
sourcemap: true
sourcemap: true,
},

@@ -34,3 +37,3 @@ watch: {

del({
targets: 'dist/*'
targets: 'dist/*',
}),

@@ -43,22 +46,39 @@ resolve(),

emitFiles: true,
fileName: 'shared/[name].[hash][extname]'
fileName: 'shared/[name].[hash][extname]',
}),
(build !== 'local' && build !== 'test') ? terser() : false,
build !== 'local' && build !== 'test' ? terser() : false,
copy({
targets: [
{src: 'assets/index.html', dest: 'dist'},
{src: 'assets/*.css', dest: 'dist/' + await getDistPath(pkg.name)},
{src: 'assets/*.ico', dest: 'dist/' + await getDistPath(pkg.name)},
{src: 'assets/nomodule.js', dest: 'dist/' + await getDistPath(pkg.name)},
{src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'), dest: 'dist/' + await getDistPath('@dbp-toolkit/common', 'icons')},
{src: await getPackagePath('datatables.net-dt', 'css'), dest: 'dist/' + await getDistPath(pkg.name)},
{src: await getPackagePath('datatables.net-dt', 'images'), dest: 'dist/' + await getDistPath(pkg.name)},
{src: await getPackagePath('datatables.net-responsive-dt', 'css'), dest: 'dist/' + await getDistPath(pkg.name)},
{src: await getPackagePath('datatables.net-buttons-dt', 'css'), dest: 'dist/' + await getDistPath(pkg.name)},
{src: 'assets/*.css', dest: 'dist/' + (await getDistPath(pkg.name))},
{src: 'assets/*.ico', dest: 'dist/' + (await getDistPath(pkg.name))},
{src: 'assets/nomodule.js', dest: 'dist/' + (await getDistPath(pkg.name))},
{
src: await getPackagePath('@dbp-toolkit/common', 'assets/icons/*.svg'),
dest: 'dist/' + (await getDistPath('@dbp-toolkit/common', 'icons')),
},
{
src: await getPackagePath('datatables.net-dt', 'css'),
dest: 'dist/' + (await getDistPath(pkg.name)),
},
{
src: await getPackagePath('datatables.net-dt', 'images'),
dest: 'dist/' + (await getDistPath(pkg.name)),
},
{
src: await getPackagePath('datatables.net-responsive-dt', 'css'),
dest: 'dist/' + (await getDistPath(pkg.name)),
},
{
src: await getPackagePath('datatables.net-buttons-dt', 'css'),
dest: 'dist/' + (await getDistPath(pkg.name)),
},
],
}),
(process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8003}) : false
]
process.env.ROLLUP_WATCH === 'true'
? serve({contentBase: 'dist', host: '127.0.0.1', port: 8003})
: false,
],
};
})();
})();

138

src/data-table-view.js

@@ -10,4 +10,4 @@ import $ from 'jquery';

import bttnPrint from 'datatables.net-buttons/js/buttons.print.js';
import {i18n} from './i18n';
import {css, html, unsafeCSS} from 'lit-element';
import {createInstance} from './i18n';
import {css, html, unsafeCSS} from 'lit';
import de from '../assets/datatables/i18n/German';

@@ -19,3 +19,3 @@ import en from '../assets/datatables/i18n/English';

import {name as pkgName} from './../package.json';
import {AdapterLitElement} from "@dbp-toolkit/provider/src/adapter-lit-element";
import {AdapterLitElement} from '@dbp-toolkit/provider/src/adapter-lit-element';

@@ -33,3 +33,4 @@ dt(window, $);

super();
this.lang = 'de';
this._i18n = createInstance();
this.lang = this._i18n.language;
// datatable properties

@@ -57,14 +58,14 @@ this.table = null;

...super.properties,
lang: { type: String },
table: { type: Object, attribute: false },
paging: { type: Boolean },
searching: { type: Boolean },
columns: { type: Array, attribute: false },
columnDefs: { type: Array, attribute: false },
data: { type: Array, attribute: false },
cssStyle: { type: String, attribute: false },
exportable: { type: Boolean },
exportName: { type: String, attribute: 'export-name' },
columnSearching: { type: Boolean, attribute: 'column-searching'},
defaultOrder: { type: Array, attribute: 'default-order'}
lang: {type: String},
table: {type: Object, attribute: false},
paging: {type: Boolean},
searching: {type: Boolean},
columns: {type: Array, attribute: false},
columnDefs: {type: Array, attribute: false},
data: {type: Array, attribute: false},
cssStyle: {type: String, attribute: false},
exportable: {type: Boolean},
exportName: {type: String, attribute: 'export-name'},
columnSearching: {type: Boolean, attribute: 'column-searching'},
defaultOrder: {type: Array, attribute: 'default-order'},
};

@@ -97,4 +98,4 @@ }

}
columnReduce(col, func, init=0) {
return this.table.column(col, { search: 'applied' }).data().reduce( func, init);
columnReduce(col, func, init = 0) {
return this.table.column(col, {search: 'applied'}).data().reduce(func, init);
}

@@ -108,6 +109,6 @@ on(eventName, func) {

const lang_obj = this.lang === 'de' ? de : en;
const i18n = this._i18n;
if (typeof this.columns === 'undefined' || !this.columns.length) {
if (data.length)
throw new Error('columns not set-up');
if (data.length) throw new Error('columns not set-up');
return this;

@@ -128,5 +129,7 @@ }

const th = document.createElement('td');
if (element !== null
&& (typeof element.visible === 'undefined' || element.visible !== false)
&& (typeof element.searchable === 'undefined' || element.searchable !== false)) {
if (
element !== null &&
(typeof element.visible === 'undefined' || element.visible !== false) &&
(typeof element.searchable === 'undefined' || element.searchable !== false)
) {
const input = document.createElement('input');

@@ -136,3 +139,5 @@ input.type = 'text';

input.id = 'input-col-' + index;
input.placeholder = i18n.t('column-search-placeholder', {fieldName: element.title});
input.placeholder = i18n.t('column-search-placeholder', {
fieldName: element.title,
});
th.appendChild(input);

@@ -173,3 +178,3 @@ }

bom: true,
fieldSeparator: this.lang === 'en' ? ',' : ';'
fieldSeparator: this.lang === 'en' ? ',' : ';',
},

@@ -182,3 +187,3 @@ {

},
]
],
});

@@ -194,3 +199,3 @@

//Save page length in session storage
this.table.on('length.dt', function ( e, settings, len ) {
this.table.on('length.dt', function (e, settings, len) {
sessionStorage.setItem('dbp-data-table-length', len);

@@ -207,25 +212,27 @@ });

new $.fn.dataTable.Responsive(this.table, {
details: true
details: true,
});
if (this.columnSearching) {
const thisTable = this.table;
const that = this;
this.columns.forEach(function (element, index) {
if (element !== null
&& (typeof element.visible === 'undefined' || element.visible !== false)
&& (typeof element.searchable === 'undefined' || element.searchable !== false)) {
const input = that.shadowRoot.querySelector('#input-col-' + index);
if (input) {
['keyup', 'change', 'clear'].forEach(function (event) {
input.addEventListener(event, function () {
const column = thisTable.column(index);
if (column.search() !== input.value) {
column.search(input.value).draw();
}
});
const thisTable = this.table;
const that = this;
this.columns.forEach(function (element, index) {
if (
element !== null &&
(typeof element.visible === 'undefined' || element.visible !== false) &&
(typeof element.searchable === 'undefined' || element.searchable !== false)
) {
const input = that.shadowRoot.querySelector('#input-col-' + index);
if (input) {
['keyup', 'change', 'clear'].forEach(function (event) {
input.addEventListener(event, function () {
const column = thisTable.column(index);
if (column.search() !== input.value) {
column.search(input.value).draw();
}
});
}
});
}
});
}
});
}

@@ -243,4 +250,6 @@

changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang).catch(e => { console.log(e);});
if (propName === 'lang') {
this._i18n.changeLanguage(this.lang).catch((e) => {
console.log(e);
});
languageChange = true;

@@ -250,3 +259,5 @@ }

this.updateComplete.then(this.set_datatable(this.data, languageChange)).catch(e => { console.log(e);});
this.updateComplete.then(this.set_datatable(this.data, languageChange)).catch((e) => {
console.log(e);
});
super.update(changedProperties);

@@ -258,3 +269,4 @@ }

const orderExpandIconOverrides = css`
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
table.dataTable.dtr-inline.collapsed > tbody > tr[role='row'] > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role='row'] > th:first-child::before {
all: initial;

@@ -272,8 +284,9 @@ top: 0.7em;

line-height: 0.9em;
color: var(--dbp-primary-text-color);
background-color: var(--dbp-primary-bg-color);
color: var(--dbp-on-primary-surface);
background-color: var(--dbp-primary-surface);
content: '+';
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before {
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before {
content: '-';

@@ -283,3 +296,4 @@ }

table.dataTable thead .sorting {
background-image: url('${unsafeCSS(getIconSVGURL('chevron-up'))}'), url('${unsafeCSS(getIconSVGURL('chevron-down'))}');
background-image: url('${unsafeCSS(getIconSVGURL('chevron-up'))}'),
url('${unsafeCSS(getIconSVGURL('chevron-down'))}');
background-position: 100% 40%, 100% 60%;

@@ -310,3 +324,3 @@ background-size: 0.5em, 0.5em;

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: var(--dbp-muted-text);
color: var(--dbp-muted-text-dark);
border-radius: var(--dbp-border-radius);

@@ -317,7 +331,7 @@ background: transparent;

.export-btn {
margin-bottom: .6rem;
margin-bottom: 0.6rem;
}
select {
border-radius: calc(var(--dbp-border-radius)/2);
border-radius: calc(var(--dbp-border-radius) / 2);
height: 28px;

@@ -333,5 +347,3 @@ margin-left: 3px;

border-radius: 0;
border-style: solid;
border-color: var(--dbp-dark);
border-width: 1px;
border: ;
padding: 0.1em;

@@ -352,5 +364,5 @@ }

return html`
<link rel="stylesheet" href="${dt_css}">
<link rel="stylesheet" href="${rs_css}">
<link rel="stylesheet" href="${bt_css}">
<link rel="stylesheet" href="${dt_css}" />
<link rel="stylesheet" href="${rs_css}" />
<link rel="stylesheet" href="${bt_css}" />
<style>

@@ -362,2 +374,2 @@ ${this.cssStyle}

}
}
}

174

src/dbp-data-table-view-demo.js
import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
import {DataTableView} from './data-table-view.js';
import {i18n} from './i18n';
import {css, html} from 'lit-element';
import {createInstance} from './i18n';
import {css, html} from 'lit';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from '@dbp-toolkit/common/utils';
import * as commonStyles from '@dbp-toolkit/common/styles';
import DBPLitElement from "@dbp-toolkit/common/dbp-lit-element";
import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';

@@ -13,3 +13,4 @@ export class DataTableViewDemo extends ScopedElementsMixin(DBPLitElement) {

super();
this.lang = 'de';
this._i18n = createInstance();
this.lang = this._i18n.language;
this.entryPointUrl = '';

@@ -21,5 +22,5 @@ this.noAuth = false;

return {
'dbp-data-table-view': DataTableView,
'dbp-auth-keycloak': AuthKeycloak,
'dbp-login-button': LoginButton,
'dbp-data-table-view': DataTableView,
'dbp-auth-keycloak': AuthKeycloak,
'dbp-login-button': LoginButton,
};

@@ -31,5 +32,5 @@ }

...super.properties,
lang: { type: String },
entryPointUrl: { type: String, attribute: 'entry-point-url' },
noAuth: { type: Boolean, attribute: 'no-auth' },
lang: {type: String},
entryPointUrl: {type: String, attribute: 'entry-point-url'},
noAuth: {type: Boolean, attribute: 'no-auth'},
};

@@ -42,3 +43,3 @@ }

this.updateComplete.then(()=> {
this.updateComplete.then(() => {
/*

@@ -50,12 +51,19 @@ First Table: with data

const vdtv1_columnDefs = [
{ targets: [3], visible: false },
{ targets: [2], orderData: [3] },
{ targets: [3, 4], searchable: false },
{ targets: [4], sortable: false }
{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) {
for (let i = 0; i < 25; ++i) {
tbl.push(this.vdtv_create_row());
}
vdtv1.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
vdtv1
.set_columns([
{title: 'Bezeichnung'},
{title: 'Nummer'},
{title: 'Datum'},
null,
null,
])
.set_columnDefs(vdtv1_columnDefs)

@@ -72,8 +80,15 @@ .set_datatable(tbl)

const vdtv2_columnDefs = [
{ targets: [3], visible: false },
{ targets: [2], orderData: [3] },
{ targets: [3, 4], searchable: false },
{ targets: [4], sortable: false }
{targets: [3], visible: false},
{targets: [2], orderData: [3]},
{targets: [3, 4], searchable: false},
{targets: [4], sortable: false},
];
vdtv2.set_columns([{title:'Bezeichnung-2'}, {title:'Nummer-2'}, {title:'Datum-2'}, null, null])
vdtv2
.set_columns([
{title: 'Bezeichnung-2'},
{title: 'Nummer-2'},
{title: 'Datum-2'},
null,
null,
])
.set_columnDefs(vdtv2_columnDefs)

@@ -87,16 +102,15 @@ .set_datatable([]);

if (vdtv3 !== null) {
const vdtv3_columnDefs = [
{ targets: [0,1,2], visible: true},
];
vdtv3.set_columns([{title:'City'}, {title:'Zip'}, {title:'Museum'}])
const vdtv3_columnDefs = [{targets: [0, 1, 2], visible: true}];
vdtv3
.set_columns([{title: 'City'}, {title: 'Zip'}, {title: 'Museum'}])
.set_columnDefs(vdtv3_columnDefs)
// .set_defaultOrder([[1,"desc"],[2,"asc"]])
.set_datatable([
{ '0': 'Graz', '1': '8020', '2': 'Alte Galerie'},
{ '0': 'Graz', '1': '8020', '2': 'Kunsthaus'},
{ '0': 'Graz', '1': '8010', '2': 'Haus der Wissenschaft'},
{ '0': 'Graz', '1': '8010', '2': 'Landeszeughaus'},
{ '0': 'Linz', '1': '4020', '2': 'Lentos Kunstmuseum'},
{ '0': 'Linz', '1': '4020', '2': 'Ars Electronica Center'},
{ '0': 'Wien', '1': '1010', '2': 'Museum für Plansprachen'},
{0: 'Graz', 1: '8020', 2: 'Alte Galerie'},
{0: 'Graz', 1: '8020', 2: 'Kunsthaus'},
{0: 'Graz', 1: '8010', 2: 'Haus der Wissenschaft'},
{0: 'Graz', 1: '8010', 2: 'Landeszeughaus'},
{0: 'Linz', 1: '4020', 2: 'Lentos Kunstmuseum'},
{0: 'Linz', 1: '4020', 2: 'Ars Electronica Center'},
{0: 'Wien', 1: '1010', 2: 'Museum für Plansprachen'},
]);

@@ -109,4 +123,4 @@ }

changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang);
if (propName === 'lang') {
this._i18n.changeLanguage(this.lang);
}

@@ -119,6 +133,9 @@ });

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);
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 [

@@ -129,3 +146,3 @@ str,

'' + year + '-' + month + '-' + day,
'<button class=\'button is-small\' onclick="alert(\'' + str + ' clicked\');">OK</button>'
"<button class='button is-small' onclick=\"alert('" + str + ' clicked\');">OK</button>',
];

@@ -152,10 +169,20 @@ }

getAuthComponentHtml() {
return this.noAuth ? html`<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>` : html`
<div class="container">
<dbp-auth-keycloak subscribe="requested-login-status" lang="${this.lang}" entry-point-url="${this.entryPointUrl}" silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
url="https://auth-dev.tugraz.at/auth" realm="tugraz"
client-id="auth-dev-mw-frontend-local" load-person try-login></dbp-auth-keycloak>
<dbp-login-button subscribe="auth" lang="${this.lang}" show-image></dbp-login-button>
</div>
`;
return this.noAuth
? html`
<dbp-login-button subscribe="auth" lang="${this.lang}"></dbp-login-button>
`
: html`
<div class="container">
<dbp-auth-keycloak
subscribe="requested-login-status"
lang="${this.lang}"
entry-point-url="${this.entryPointUrl}"
silent-check-sso-redirect-uri="/dist/silent-check-sso.html"
url="https://auth-dev.tugraz.at/auth"
realm="tugraz-vpu"
client-id="auth-dev-mw-frontend-local"
try-login></dbp-auth-keycloak>
<dbp-login-button subscribe="auth" lang="${this.lang}"></dbp-login-button>
</div>
`;
}

@@ -183,6 +210,11 @@

font-size: 2em;
margin-bottom: .5em;
margin-bottom: 0.5em;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
color: #363636;
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
color: var(--dbp-content);
font-weight: 600;

@@ -201,11 +233,11 @@ line-height: 1.125;

border-width: 0 0 2px;
color: #363636;
color: var(--dbp-content);
}
.content table th {
border: 1px solid #dbdbdb;
padding: .5em .75em;
padding: 0.5em 0.75em;
vertical-align: top;
}
.content table td {
padding: .5em .75em;
padding: 0.5em 0.75em;
vertical-align: top;

@@ -222,13 +254,24 @@ }

<h4>DataTable: with data, paging and searching AND exportable</h4>
<div class="box">
<label for="id-sum">Sum of column <b>Number</b> is</label>
<input type="text" readonly value="" name="sum" id="id-sum">
<dbp-data-table-view paging searching column-searching
default-order='[1,"asc"]'
exportable export-name="Demo Export"
lang="${this.lang}" id="vdtv1"></dbp-data-table-view>
<div class="box">
<label for="id-sum">
Sum of column
<b>Number</b>
is
</label>
<input type="text" readonly value="" name="sum" id="id-sum" />
<dbp-data-table-view
paging
searching
column-searching
default-order='[1,"asc"]'
exportable
export-name="Demo Export"
lang="${this.lang}"
id="vdtv1"></dbp-data-table-view>
</div>
<h4>DataTable: no data, no paging, no searching</h4>
<div class="box">
<button class="button is-small" @click="${this.vdtv2_add_rows}">add something...</button>
<button class="button is-small" @click="${this.vdtv2_add_rows}">
add something...
</button>
<dbp-data-table-view lang="${this.lang}" id="vdtv2"></dbp-data-table-view>

@@ -238,7 +281,8 @@ </div>

<div class="box">
<dbp-data-table-view default-order='[[1,"desc"],[2,"asc"]]'
lang="${this.lang}" id="vdtv3"></dbp-data-table-view>
<dbp-data-table-view
default-order='[[1,"desc"],[2,"asc"]]'
lang="${this.lang}"
id="vdtv3"></dbp-data-table-view>
</div>
</div>
</section>

@@ -245,0 +289,0 @@ `;

2

src/demo.js

@@ -1,1 +0,1 @@

import './dbp-data-table-view-demo.js';
import './dbp-data-table-view-demo.js';

27

src/i18n.js

@@ -1,2 +0,2 @@

import i18next from 'i18next';
import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';

@@ -6,25 +6,4 @@ import de from './i18n/de/translation.json';

const i18n = i18next.createInstance();
i18n.init({
lng: 'de',
fallbackLng: ['de'],
debug: false,
initImmediate: false, // Don't init async
resources: {
en: {translation: en},
de: {translation: de}
},
});
console.assert(i18n.isInitialized);
function dateTimeFormat(date, options) {
return new Intl.DateTimeFormat(i18n.languages, options).format(date);
export function createInstance() {
return _createInstance({en: en, de: de}, 'de', 'en');
}
function numberFormat(number, options) {
return new Intl.NumberFormat(i18n.languages, options).format(number);
}
export {i18n, dateTimeFormat, numberFormat};

10

src/i18n/de/translation.json
{
"print": "Drucken",
"export-excel": "Excel Export",
"export-csv": "CSV Export",
"column-search-placeholder": "Nach {{fieldName}} suchen"
}
"print": "Drucken",
"export-excel": "Excel Export",
"export-csv": "CSV Export",
"column-search-placeholder": "Nach {{fieldName}} suchen"
}

10

src/i18n/en/translation.json
{
"print": "Print",
"export-excel": "Excel Export",
"export-csv": "CSV Export",
"column-search-placeholder": "Search for {{fieldName}}"
}
"print": "Print",
"export-excel": "Excel Export",
"export-csv": "CSV Export",
"column-search-placeholder": "Search for {{fieldName}}"
}

2

src/index.js
import {DataTableView} from './data-table-view.js';
export {DataTableView};
export {DataTableView};

48

test/unit.js

@@ -7,35 +7,35 @@ import {assert} from '@esm-bundle/chai';

suite('dbp-data-table-view basics', () => {
let node;
let node;
setup(async () => {
node = document.createElement('dbp-data-table-view');
document.body.appendChild(node);
await node.updateComplete;
});
setup(async () => {
node = document.createElement('dbp-data-table-view');
document.body.appendChild(node);
await node.updateComplete;
});
teardown(() => {
node.remove();
});
teardown(() => {
node.remove();
});
test('should render', () => {
assert(node.shadowRoot !== undefined);
});
test('should render', () => {
assert(node.shadowRoot !== undefined);
});
});
suite('dbp-data-table-view-demo basics', () => {
let node;
let node;
setup(async () => {
node = document.createElement('dbp-data-table-view-demo');
document.body.appendChild(node);
await node.updateComplete;
});
setup(async () => {
node = document.createElement('dbp-data-table-view-demo');
document.body.appendChild(node);
await node.updateComplete;
});
teardown(() => {
node.remove();
});
teardown(() => {
node.remove();
});
test('should render', () => {
assert(node.shadowRoot !== undefined);
});
test('should render', () => {
assert(node.shadowRoot !== undefined);
});
});
dist/shared/data-table-view.2035b8a1.es.js
dist/shared/data-table-view.2035b8a1.es.js.map
dist/dbp-data-table-view-demo.js

Sorry, the diff of this file is too big to display

dist/dbp-data-table-view-demo.js.map

Sorry, the diff of this file is not supported yet

dist/local/@dbp-toolkit/data-table-view/css/buttons.dataTables.css

Sorry, the diff of this file is not supported yet

dist/local/@dbp-toolkit/data-table-view/css/buttons.dataTables.min.css

Sorry, the diff of this file is not supported yet

dist/local/@dbp-toolkit/data-table-view/css/jquery.dataTables.css

Sorry, the diff of this file is not supported yet

dist/local/@dbp-toolkit/data-table-view/css/jquery.dataTables.min.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc