Lke 1588 add truncated option (#3)

Data Table plugin: Add an option to show long text

Author: yigitakbulut

README.md

@@ -45,6 +45,7 @@ This plugin supports the following URL parameters in the query string:
 | `param_number_{{Encoded field name}}` | number (**optional**)   | *For query templates*, any numerical parameter of the template. | `param_number_age=30` |
 | `param_string_{{Encoded field name}}` | string (**optional**)   | *For query templates*, any string parameter of the template. | `param_string_city=Paris` |
 | `param_ids_{{Encoded field name}}`    | comma-separated list (**optional**)  | *For query templates*, any edgeset/nodeset parameter of the template. | `param_ids_target_ids=1,50,12` |
+| `showLongValues`                       | boolean (**optional**)  | Avoids truncation of long texts. | `showLongValues=false` |
 
 ### Usage with standard queries
 

public/css/main.css

@@ -297,11 +297,16 @@ svg.stroke {
     border-radius: 4px !important;
 }
 
-.tabulator-cell {
-    height: 44px;
-    padding: 12px !important;
-    border-bottom: 1px solid #aaa !important;
-    background-color: #fff !important;
+.tabulator-row .tabulator-cell {
+    padding: 12px;
+    border-bottom: 1px solid #aaa;
+    background-color: #fff;
+    white-space: pre-wrap;
+    max-width: 300px;
+}
+
+.tabulator .tabulator-header .tabulator-col {
+    max-width: 300px;
 }
 
 .tabulator-row {

public/js/main.js

@@ -4,6 +4,7 @@ let tableStructure;
 let schema;
 let table;
 let query;
+let isShowingLongValues;
 let pluginConfiguration;
 const headersToAlignRight = [];
 const loaderElement = document.getElementById('loader');
@@ -137,7 +138,8 @@ function getParameter(value, key) {
       'sourceKey',
       'limit',
       'queryId',
-      'queryName'
+      'queryName',
+      'showLongValues'
     ],
     startWith: [
       'param_number_',
@@ -252,7 +254,12 @@ async function validatePluginConfiguration() {
  * @param cell
  * @returns {string}
  */
-function truncateTableText(cell) {
+function formatTableCell(cell) {
+   cell.getElement().setAttribute("dir", "auto"); //Add support for right to left text
+
+    if (isShowingLongValues) {
+        return cell.getValue();
+    }
     return truncateText(cell.getValue(), 38);
 }
 
@@ -342,9 +349,9 @@ function getTableStructure(schemaStructure) {
             title: property.propertyKey,
             field: escapeDotCharacters(property.propertyKey),
             align: align,
-            titleFormatter: truncateTableText,
+            titleFormatter: formatTableCell,
             headerSort: false,
-            formatter: truncateTableText,
+            formatter: formatTableCell,
             tooltip: getFieldTooltip
         };
     });
@@ -709,6 +716,15 @@ async function getQuery() {
     }
 }
 
+function parseBool(val) {
+    if ((typeof val === 'string' && (val.toLowerCase() === 'true' || val.toLowerCase() === 'yes')) || val === 1)
+        return true;
+    else if ((typeof val === 'string' && (val.toLowerCase() === 'false' || val.toLowerCase() === 'no')) || val === 0)
+        return false;
+
+    return false;
+}
+
 /**
  * start the plugin table
  * @returns {Promise<void>}
@@ -717,6 +733,7 @@ async function main() {
     loaderElement.classList.add('active');
     parseQueryParams();
     try {
+        isShowingLongValues = parseBool(queryParams.global.showLongValues);
         validateGlobalQueryParams(queryParams.global);
         query = JSON.parse((await getQuery()).response).body;
         validateTemplateFieldsParams(query);
@@ -729,7 +746,6 @@ async function main() {
     } catch(e) {
         handleError(e);
     }
-
 }
 
 main();