Merge pull request #148 from nzzdev/release-3.4.0

Release 3.4.0

README.md

@@ -182,6 +182,21 @@ Footnotes are a feature to display annotations in the table and the sources in t
 
 [to the top](#table-of-contents)
 
+#### Table search
+
+<img src="/doc/table-search.png" align="right" width=300 height=400>
+
+This feature makes large tables searchable.
+
+###### Implementation details
+- By default the table is collapsed and the `q-table_show-more-button` is visible at the bottom of the table ([see Collapsable table](#collapsable-table)).
+- When the user starts typing, all rows will be made visible and the `q-table_show-more-button` disappears.
+- The actual search function triggers, as soon as the user types the second character.
+- The filter searches through text-based columns only.
+- When the user deletes his input, the table collapses and the `q-table_show-more-button` will be visible again.
+
+[to the top](#table-of-contents)
+
 ### Options
 
 #### hideTableHeader
@@ -194,6 +209,16 @@ This options allows to hide the header of each column. By default it's `false`
 
 [to the top](#table-of-contents)
 
+#### showTableSearch
+
+This option allows to show or hide the table search feature. The option is only available, when there are more than 16 rows in the table. Default value is `false`.
+
+###### Implementation details
+
+- If the option is used, the input element for the table search won't be rendered.
+
+[to the top](#table-of-contents)
+
 #### cardLayout
 
 <img src="/doc/card-layout.png" align="right" width=300 height=355>

helpers/minibars.js

@@ -13,10 +13,6 @@ function getMinibarNumbersWithType(data, selectedColumnIndex) {
     items: [],
     numbers: []
   };
-  let typeAmount = {
-    positives: 0,
-    negatives: 0
-  };
 
   let dataCopy = clone(data);
   dataCopy[0] = dataCopy[0].map(cell => (cell = "")); // first row is always header so ignore it
@@ -26,10 +22,8 @@ function getMinibarNumbersWithType(data, selectedColumnIndex) {
 
     if (cell < 0) {
       type = miniBarTypes.negative;
-      typeAmount.negatives++;
     } else if (cell > 0) {
       type = miniBarTypes.positive;
-      typeAmount.positives++;
     } else {
       type = miniBarTypes.empty;
     }
@@ -42,7 +36,7 @@ function getMinibarNumbersWithType(data, selectedColumnIndex) {
     }
   });
 
-  minibarsWithType.type = getMinibarType(typeAmount);
+  minibarsWithType.type = getMinibarType(minibarsWithType.numbers);
   return minibarsWithType;
 }
 
@@ -94,10 +88,10 @@ function getMinibarValue(type, value, min, max) {
   }
 }
 
-function getMinibarType(types) {
-  if (types.positives > 0 && types.negatives === 0) {
+function getMinibarType(numbers) {
+  if (numbers.every(number => {return number > 0;})) {
     return miniBarTypes.positive;
-  } else if (types.negatives > 0 && types.positives === 0) {
+  } else if (numbers.every(number => {return number < 0;})) {
     return miniBarTypes.negative;
   } else {
     return miniBarTypes.mixed;

helpers/renderingInfoScript.js

@@ -217,9 +217,98 @@ function getMinibarsScript(context) {
   `;
 }
 
+function getSearchFormInputScript(context) {
+  const dataObject = `window.${context.id}Data`;
+  const searchFormInputAddEventListeners = `searchFormInputAddEventListeners${context.id}`;
+  const searchFormInputHideRows = `searchFormInputHideRows${context.id}`;
+  const searchFormInputShowRows = `searchFormInputShowRows${context.id}`;
+  const filterRows = `filterRows${context.id}`;
+
+  return `
+    function ${searchFormInputHideRows}() {
+      ${dataObject}.showMoreButtonElement.style.display = '';
+
+      ${dataObject}.tableElement.querySelectorAll('tbody tr').forEach(function(rowElement, index) {
+        if (index >= (${dataObject}.numberOfRows - ${dataObject}.numberOfRowsToHide)) {
+          rowElement.classList.remove('q-table-state-visible');
+          rowElement.classList.add('q-table-state-hidden');
+        }
+      });
+      ${dataObject}.showMoreButtonElement.textContent = 'Alle ' + ${dataObject}.numberOfRows + ' anzeigen';
+      ${dataObject}.rowVisibilityState = 'hidden';
+    }
+
+    function ${searchFormInputShowRows}() {
+      ${dataObject}.showMoreButtonElement.style.display = 'none';
+
+      ${dataObject}.tableElement.querySelectorAll('tbody tr').forEach(function(rowElement, index) {
+        rowElement.classList.remove('q-table-state-hidden');
+        rowElement.classList.add('q-table-state-visible');
+      });
+      ${dataObject}.showMoreButtonElement.textContent = "Tabelle zuklappen";
+      ${dataObject}.rowVisibilityState = 'visible';
+    }
+
+    function ${filterRows}(filter) {
+      var foundString = false;
+      filter = filter.toUpperCase();
+
+      if (filter.length < 2) return;
+
+      // Loop through all table rows
+      ${dataObject}.tableElement.querySelectorAll('tbody tr').forEach(
+        function(rowElement) {
+          foundString = false;
+          
+          // Loop through all text cells
+          rowElement.querySelectorAll('.q-table__cell--text').forEach(
+            function(textCellElement) {
+              textCellValue = textCellElement.innerText.toUpperCase();
+
+              if (textCellValue.indexOf(filter) > -1) {
+                foundString = true;
+                return;
+              }
+            }
+          )
+
+          if (foundString) {
+            rowElement.classList.remove('q-table-state-hidden');
+            rowElement.classList.add('q-table-state-visible');
+          } else {
+            rowElement.classList.remove('q-table-state-visible');
+            rowElement.classList.add('q-table-state-hidden');
+          }
+        }
+      );
+    }
+
+    function ${searchFormInputAddEventListeners}() {
+      ${dataObject}.element.querySelector('.q-table__search__input').addEventListener('input', function(event) {
+        var filter = event.target.value;
+
+        if (filter.length < 2) {
+          // Always make all rows visible again
+          ${searchFormInputShowRows}();
+
+          // No filter = show default view with show more button (15 rows)
+          if (filter.length == 0) ${searchFormInputHideRows}();
+        } else {
+          ${filterRows}(filter);
+        }
+      });
+    }
+
+    window.q_domready.then(function() {
+      ${searchFormInputAddEventListeners}();
+    });
+  `;
+}
+
 module.exports = {
   getDefaultScript: getDefaultScript,
   getCardLayoutScript: getCardLayoutScript,
   getShowMoreButtonScript: getShowMoreButtonScript,
-  getMinibarsScript: getMinibarsScript
+  getMinibarsScript: getMinibarsScript,
+  getSearchFormInputScript: getSearchFormInputScript
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "q-table",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,16 +11,16 @@
   "author": "Beni Buess <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@hapi/boom": "^9.1.0",
+    "@hapi/boom": "^9.1.1",
     "@hapi/hapi": "^19.2.0",
-    "@hapi/inert": "^6.0.2",
+    "@hapi/inert": "^6.0.3",
     "@hapi/joi": "^17.1.1",
-    "ajv": "^6.12.4",
+    "ajv": "^6.12.6",
     "array2d": "0.0.5",
     "clone": "^2.1.2",
-    "d3-format": "^1.4.4",
+    "d3-format": "^1.4.5",
     "nunjucks": "^3.2.2",
-    "uglify-js": "^3.10.1"
+    "uglify-js": "^3.12.2"
   },
   "devDependencies": {
     "@hapi/code": "^8.0.2",
@@ -29,8 +29,8 @@
     "cssnano": "^4.1.10",
     "html-minifier": "^4.0.0",
     "jsdom": "^16.4.0",
-    "postcss": "^7.0.32",
+    "postcss": "^7.0.35",
     "postcss-import": "^12.0.1",
-    "sass": "^1.26.10"
+    "sass": "^1.30.0"
   }
 }