From b0db6bae389ac51259bab63e51e8731b20a37493 Mon Sep 17 00:00:00 2001
From: Carlos Vega <carlos.vega@.uni.lu>
Date: Fri, 28 Sep 2018 17:29:05 +0200
Subject: [PATCH] matched part it's now highlighted to facilitate reading.
---
smash/web/static/js/smash.js | 25 ++++++++++++++++++++++++-
smash/web/templates/subjects/index.html | 4 ++++
2 files changed, 28 insertions(+), 1 deletion(-)
diff --git a/smash/web/static/js/smash.js b/smash/web/static/js/smash.js
index c41cb5cd..55c7d8e4 100644
--- a/smash/web/static/js/smash.js
+++ b/smash/web/static/js/smash.js
@@ -101,6 +101,29 @@ function createColumn(dataType, name, filter, visible, sortable, renderFunction)
};
}
+/*
+We use an auxiliary function to create the function due to the lack of block scope in JS.
+https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
+*/
+function createRenderFunction(columnRow){
+ return function(data, type, row, meta){
+ /*
+ Fancy highlighting for the column matches.
+ */
+ if(columnRow.filter == 'string_filter'){
+ //obtain the input element by its placeholdername which matches the column name: e.g.: <input type="text" style="width:80px" placeholder="First name">
+ filter_value = $(`input[placeholder="${columnRow.name}"]`).val();
+ //if there is any filter, we highlight the matching part
+ if(filter_value != undefined && filter_value.length > 0){
+ //global and case insensitive replacement
+ return data.replace(RegExp(filter_value, 'gi'), `<span class="highlight_match">${filter_value}</span>`);
+ }
+ }
+
+ return data;
+ };
+}
+
function getColumns(columns, getSubjectEditUrl) {
var result = [];
for (var i = 0; i < columns.length; i++) {
@@ -122,7 +145,7 @@ function getColumns(columns, getSubjectEditUrl) {
result.push(createColumn(columnRow.type, columnRow.name, columnRow.filter, columnRow.visible, columnRow.sortable, renderFunction));
} else {
- result.push(createColumn(columnRow.type, columnRow.name, columnRow.filter, columnRow.visible, columnRow.sortable));
+ result.push(createColumn(columnRow.type, columnRow.name, columnRow.filter, columnRow.visible, columnRow.sortable, createRenderFunction(columnRow)));
}
}
return result;
diff --git a/smash/web/templates/subjects/index.html b/smash/web/templates/subjects/index.html
index ade99030..70423770 100644
--- a/smash/web/templates/subjects/index.html
+++ b/smash/web/templates/subjects/index.html
@@ -8,6 +8,10 @@
.box-body {
overflow-x: scroll;
}
+ .highlight_match {
+ font-weight: bolder;
+ border-bottom: black 1px solid;
+ }
</style>
{% endblock styles %}
--
GitLab