From deb2eb6494067a8fc99acc74983b7432ca728ca0 Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Fri, 24 Jan 2020 13:34:34 +0100
Subject: [PATCH] Start column search placeholder multi-language implementation
(#4)
---
.../data-table-view/src/i18n/de/translation.json | 7 ++++---
.../data-table-view/src/i18n/en/translation.json | 7 ++++---
.../data-table-view/src/vpu-data-table-view.js | 15 +++++++++++----
3 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/packages/data-table-view/src/i18n/de/translation.json b/packages/data-table-view/src/i18n/de/translation.json
index ecf2fb3f..d1776ebc 100644
--- a/packages/data-table-view/src/i18n/de/translation.json
+++ b/packages/data-table-view/src/i18n/de/translation.json
@@ -1,5 +1,6 @@
{
- "print": "Drucken",
- "export-excel": "Excel Export",
- "export-csv": "CSV Export"
+ "print": "Drucken",
+ "export-excel": "Excel Export",
+ "export-csv": "CSV Export",
+ "column-search-placeholder": "Nach {{fieldName}} suchen"
}
\ No newline at end of file
diff --git a/packages/data-table-view/src/i18n/en/translation.json b/packages/data-table-view/src/i18n/en/translation.json
index 54c3c973..33ea4a20 100644
--- a/packages/data-table-view/src/i18n/en/translation.json
+++ b/packages/data-table-view/src/i18n/en/translation.json
@@ -1,5 +1,6 @@
{
- "print": "Print",
- "export-excel": "Excel Export",
- "export-csv": "CSV Export"
+ "print": "Print",
+ "export-excel": "Excel Export",
+ "export-csv": "CSV Export",
+ "column-search-placeholder": "Search for {{fieldName}}"
}
\ No newline at end of file
diff --git a/packages/data-table-view/src/vpu-data-table-view.js b/packages/data-table-view/src/vpu-data-table-view.js
index abef4ea7..3873186b 100644
--- a/packages/data-table-view/src/vpu-data-table-view.js
+++ b/packages/data-table-view/src/vpu-data-table-view.js
@@ -89,7 +89,7 @@ class DataTableView extends LitElement {
return this;
}
- set_datatable(data) {
+ set_datatable(data, languageChange = false) {
const lang_obj = this.lang === 'de' ? de : en;
if (typeof this.columns === 'undefined' || !this.columns.length) {
@@ -100,7 +100,11 @@ class DataTableView extends LitElement {
if (this.columnSearching) {
const existing_tfoot = this.shadowRoot.querySelector('table tfoot');
- if (existing_tfoot === null || !existing_tfoot.hasChildNodes()) {
+ if (existing_tfoot === null || !existing_tfoot.hasChildNodes() || languageChange) {
+ if (existing_tfoot !== null) {
+ existing_tfoot.remove();
+ }
+
const fragment = document.createDocumentFragment();
const tfoot = document.createElement('tfoot');
const tr = document.createElement('tr');
@@ -113,7 +117,7 @@ class DataTableView extends LitElement {
input.type = 'text';
input.className = 'column-search-line';
input.id = 'input-col-' + index;
- input.placeholder = 'Search in ' + element.title;
+ input.placeholder = i18n.t('column-search-placeholder', {fieldName: element.title});
th.appendChild(input);
}
tr.appendChild(th);
@@ -207,15 +211,18 @@ class DataTableView extends LitElement {
}
update(changedProperties) {
+ let languageChange = false;
+
changedProperties.forEach((oldValue, propName) => {
if (propName === "lang") {
i18n.changeLanguage(this.lang).catch(e => { console.log(e)});
+ languageChange = true;
}
});
super.update(changedProperties);
- this.updateComplete.then(this.set_datatable(this.data)).catch(e => { console.log(e)});
+ this.updateComplete.then(this.set_datatable(this.data, languageChange)).catch(e => { console.log(e)});
}
static get styles() {
--
GitLab