diff --git a/README.md b/README.md index 22263211..bd535b97 100644 --- a/README.md +++ b/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 + + + +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 diff --git a/doc/table-search.png b/doc/table-search.png new file mode 100644 index 00000000..fb9d39b8 Binary files /dev/null and b/doc/table-search.png differ diff --git a/helpers/minibars.js b/helpers/minibars.js index 151bf028..e2bbc72d 100644 --- a/helpers/minibars.js +++ b/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; diff --git a/helpers/renderingInfoScript.js b/helpers/renderingInfoScript.js index 08c0ea95..e174ca1d 100644 --- a/helpers/renderingInfoScript.js +++ b/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 }; diff --git a/package-lock.json b/package-lock.json index 7b25f109..f38914f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "q-table", - "version": "3.3.0", + "version": "3.4.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -164,18 +164,11 @@ } }, "@hapi/boom": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/@hapi/boom/-/boom-9.1.0.tgz", - "integrity": "sha512-4nZmpp4tXbm162LaZT45P7F7sgiem8dwAh2vHWT6XX24dozNjGMg6BvKCRvtCUcmcXqeMIUqWN8Rc5X8yKuROQ==", + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/@hapi/boom/-/boom-9.1.1.tgz", + "integrity": "sha512-VNR8eDbBrOxBgbkddRYIe7+8DZ+vSbV6qlmaN2x7eWjsUjy2VmQgChkOKcVZIeupEZYj+I0dqNg430OhwzagjA==", "requires": { "@hapi/hoek": "9.x.x" - }, - "dependencies": { - "@hapi/hoek": { - "version": "9.0.4", - "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.0.4.tgz", - "integrity": "sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw==" - } } }, "@hapi/bossy": { @@ -327,16 +320,16 @@ "integrity": "sha512-EwaJS7RjoXUZ2cXXKZZxZqieGtc7RbvQhUy8FwDoMQtxWVi14tFjeFCYPZAM1mBCpOpiBpyaZbb9NeHc7eGKgw==" }, "@hapi/inert": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/@hapi/inert/-/inert-6.0.2.tgz", - "integrity": "sha512-cq0a8jstkLW1+oJaw4jp52PZBEkVbX9d0YDy5aOs3rOKYSjpzs2nQBahnCHEMchOrOSUffLpE+IDoivYHcx8uA==", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@hapi/inert/-/inert-6.0.3.tgz", + "integrity": "sha512-Z6Pi0Wsn2pJex5CmBaq+Dky9q40LGzXLUIUFrYpDtReuMkmfy9UuUeYc4064jQ1Xe9uuw7kbwE6Fq6rqKAdjAg==", "requires": { "@hapi/ammo": "5.x.x", "@hapi/boom": "9.x.x", "@hapi/bounce": "2.x.x", "@hapi/hoek": "9.x.x", "@hapi/validate": "1.x.x", - "lru-cache": "5.x.x" + "lru-cache": "^6.0.0" } }, "@hapi/iron": { @@ -692,9 +685,9 @@ "dev": true }, "ajv": { - "version": "6.12.4", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz", - "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==", + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "requires": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -1371,9 +1364,9 @@ } }, "d3-format": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.4.tgz", - "integrity": "sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw==" + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz", + "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==" }, "dashdash": { "version": "1.14.1", @@ -2535,11 +2528,11 @@ "dev": true }, "lru-cache": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", - "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "requires": { - "yallist": "^3.0.2" + "yallist": "^4.0.0" } }, "mdn-data": { @@ -2886,9 +2879,9 @@ "dev": true }, "postcss": { - "version": "7.0.32", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", - "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==", + "version": "7.0.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", + "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -3486,9 +3479,9 @@ "dev": true }, "sass": { - "version": "1.26.10", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.10.tgz", - "integrity": "sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==", + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz", + "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==", "dev": true, "requires": { "chokidar": ">=2.0.0 <4.0.0" @@ -3901,9 +3894,9 @@ "dev": true }, "uglify-js": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.10.1.tgz", - "integrity": "sha512-RjxApKkrPJB6kjJxQS3iZlf///REXWYxYJxO/MpmlQzVkDWVI3PSnCBWezMecmTU/TRkNxrl8bmsfFQCp+LO+Q==" + "version": "3.12.2", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.2.tgz", + "integrity": "sha512-rWYleAvfJPjduYCt+ELvzybNah/zIkRteGXIBO8X0lteRZPGladF61hFi8tU7qKTsF7u6DUQCtT9k00VlFOgkg==" }, "uniq": { "version": "1.0.1", @@ -3930,9 +3923,9 @@ "dev": true }, "uri-js": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", - "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz", + "integrity": "sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==", "requires": { "punycode": "^2.1.0" } @@ -4097,9 +4090,9 @@ "dev": true }, "yallist": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", - "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" } } } diff --git a/package.json b/package.json index 0fabaf9e..8d42ba64 100644 --- a/package.json +++ b/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 ", "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" } } diff --git a/resources/fixtures/data/table-search-hidden.json b/resources/fixtures/data/table-search-hidden.json new file mode 100644 index 00000000..8a5a1523 --- /dev/null +++ b/resources/fixtures/data/table-search-hidden.json @@ -0,0 +1,122 @@ +{ + "title": "FIXTURE: table search hide", + "data": { + "table": [ + [ + "Country", + "Number" + ], + [ + "Somalia", + "-0.1459" + ], + [ + "Honduras", + "0.2758" + ], + [ + "Malawi", + "-0.0534" + ], + [ + "Comoros", + "0.0111" + ], + [ + "Greece", + "-0.1775" + ], + [ + "Turkmenistan", + "0.0803" + ], + [ + "Panama", + "0.0164" + ], + [ + "Austria", + "-0.0462" + ], + [ + "Saint Barthélemy", + "-0.0247" + ], + [ + "Kazakhstan", + "-0.0067" + ], + [ + "Azerbaijan", + "0.044" + ], + [ + "Netherlands", + "0.2486" + ], + [ + "Yemen", + "-0.106" + ], + [ + "Sint Maarten", + "0.4218" + ], + [ + "Svalbard and Jan Mayen Islands", + "-0.1107" + ], + [ + "Belarus", + "-0.4466" + ], + [ + "China", + "-0.4345" + ], + [ + "Congo (Brazzaville)", + "-0.1386" + ], + [ + "Belgium", + "-0.0206" + ], + [ + "Poland", + "0.2016" + ] + ], + "metaData": { + "cells": [] + } + }, + "sources": [ + { + "link": {}, + "text": "The Very Important Center For Very Important Data" + } + ], + "options": { + "hideTableHeader": false, + "showTableSearch": false, + "cardLayout": false, + "cardLayoutIfSmall": true, + "minibar": { + "invertColors": false, + "barColor": { + "positive": { + "className": "", + "colorCode": "" + }, + "negative": { + "className": "", + "colorCode": "" + } + }, + "selectedColumn": null + } + }, + "tool": "table", + "subtitle": "Very important data country by country" +} \ No newline at end of file diff --git a/resources/fixtures/data/table-search-show.json b/resources/fixtures/data/table-search-show.json new file mode 100644 index 00000000..b89930c9 --- /dev/null +++ b/resources/fixtures/data/table-search-show.json @@ -0,0 +1,122 @@ +{ + "title": "FIXTURE: table search show", + "data": { + "table": [ + [ + "Country", + "Number" + ], + [ + "Somalia", + "-0.1459" + ], + [ + "Honduras", + "0.2758" + ], + [ + "Malawi", + "-0.0534" + ], + [ + "Comoros", + "0.0111" + ], + [ + "Greece", + "-0.1775" + ], + [ + "Turkmenistan", + "0.0803" + ], + [ + "Panama", + "0.0164" + ], + [ + "Austria", + "-0.0462" + ], + [ + "Saint Barthélemy", + "-0.0247" + ], + [ + "Kazakhstan", + "-0.0067" + ], + [ + "Azerbaijan", + "0.044" + ], + [ + "Netherlands", + "0.2486" + ], + [ + "Yemen", + "-0.106" + ], + [ + "Sint Maarten", + "0.4218" + ], + [ + "Svalbard and Jan Mayen Islands", + "-0.1107" + ], + [ + "Belarus", + "-0.4466" + ], + [ + "China", + "-0.4345" + ], + [ + "Congo (Brazzaville)", + "-0.1386" + ], + [ + "Belgium", + "-0.0206" + ], + [ + "Poland", + "0.2016" + ] + ], + "metaData": { + "cells": [] + } + }, + "sources": [ + { + "link": {}, + "text": "The Very Important Center For Very Important Data" + } + ], + "options": { + "hideTableHeader": false, + "showTableSearch": true, + "cardLayout": false, + "cardLayoutIfSmall": true, + "minibar": { + "invertColors": false, + "barColor": { + "positive": { + "className": "", + "colorCode": "" + }, + "negative": { + "className": "", + "colorCode": "" + } + }, + "selectedColumn": null + } + }, + "tool": "table", + "subtitle": "Very important data country by country" +} \ No newline at end of file diff --git a/resources/fixtures/data/table-search-with-multiple-columns.json b/resources/fixtures/data/table-search-with-multiple-columns.json new file mode 100644 index 00000000..0d5a192a --- /dev/null +++ b/resources/fixtures/data/table-search-with-multiple-columns.json @@ -0,0 +1,164 @@ +{ + "title": "FIXTURE: table search with multiple columns", + "data": { + "table": [ + [ + "Country 1", + "Value 1", + "Country 2", + "Value 2" + ], + [ + "Netherlands", + "orange", + "Netherlands", + "green" + ], + [ + "Austria", + "red", + "Netherlands", + "yellow" + ], + [ + "Italy", + "red", + "France", + "red" + ], + [ + "Netherlands", + "yellow", + "Spain", + "orange" + ], + [ + "Italy", + "yellow", + "Germany", + "orange" + ], + [ + "Italy", + "orange", + "Belgium", + "yellow" + ], + [ + "Poland", + "green", + "Poland", + "orange" + ], + [ + "Italy", + "orange", + "Germany", + "red" + ], + [ + "Belgium", + "yellow", + "Spain", + "green" + ], + [ + "Spain", + "green", + "Germany", + "orange" + ], + [ + "Poland", + "red", + "Poland", + "green" + ], + [ + "Italy", + "yellow", + "Poland", + "orange" + ], + [ + "Netherlands", + "yellow", + "Italy", + "green" + ], + [ + "Belgium", + "green", + "Belgium", + "orange" + ], + [ + "Germany", + "yellow", + "Spain", + "orange" + ], + [ + "France", + "green", + "Italy", + "orange" + ], + [ + "Poland", + "green", + "Poland", + "orange" + ], + [ + "Germany", + "yellow", + "Austria", + "orange" + ], + [ + "Italy", + "orange", + "Austria", + "orange" + ], + [ + "France", + "orange", + "Netherlands", + "yellow" + ] + ], + "metaData": { + "cells": [] + } + }, + "sources": [ + { + "link": {}, + "text": "The Very Important Center For Very Important Data" + } + ], + "options": { + "hideTableHeader": false, + "showTableSearch": true, + "cardLayout": false, + "cardLayoutIfSmall": true, + "minibar": { + "invertColors": false, + "barColor": { + "positive": { + "className": "", + "colorCode": "" + }, + "negative": { + "className": "", + "colorCode": "" + } + }, + "selectedColumn": null + } + }, + "tool": "table", + "subtitle": "Very important data country by country" +} \ No newline at end of file diff --git a/resources/schema.json b/resources/schema.json index 0a10ea4c..f1a648ae 100644 --- a/resources/schema.json +++ b/resources/schema.json @@ -131,6 +131,22 @@ "type": "boolean", "default": false }, + "showTableSearch": { + "title": "Tabellensuche anzeigen", + "type": "boolean", + "default": false, + "Q:options": { + "availabilityChecks": [ + { + "type": "ToolEndpoint", + "config": { + "endpoint": "option-availability/showTableSearch", + "fields": ["options", "data"] + } + } + ] + } + }, "cardLayout": { "title": "Card-Layout", "type": "boolean", diff --git a/routes/fixtures/data.js b/routes/fixtures/data.js index 18ef90a2..c07bd80e 100644 --- a/routes/fixtures/data.js +++ b/routes/fixtures/data.js @@ -35,6 +35,9 @@ const fixtureData = [ require(`${fixtureDataDirectory}/formatted-numbers.json`), require(`${fixtureDataDirectory}/formatted-numbers-mixed.json`), require(`${fixtureDataDirectory}/formatted-numbers-negative.json`), + require(`${fixtureDataDirectory}/table-search-hidden.json`), + require(`${fixtureDataDirectory}/table-search-show.json`), + require(`${fixtureDataDirectory}/table-search-with-multiple-columns.json`), ]; module.exports = { diff --git a/routes/option-availability.js b/routes/option-availability.js index 9a52f9fc..822fc6cd 100644 --- a/routes/option-availability.js +++ b/routes/option-availability.js @@ -21,6 +21,12 @@ module.exports = { }; } + if (request.params.optionName === "showTableSearch") { + return { + available: (item.data.table.length > 16) + }; + } + if ( request.params.optionName === "minibars" || request.params.optionName === "selectedColumn" diff --git a/routes/rendering-info/web.js b/routes/rendering-info/web.js index 0b3b782a..629a6a78 100644 --- a/routes/rendering-info/web.js +++ b/routes/rendering-info/web.js @@ -102,6 +102,7 @@ module.exports = { footnotes: footnotes, numberOfRows: item.data.table.length - 1, // do not count the header displayOptions: request.payload.toolRuntimeConfig.displayOptions || {}, + noInteraction: request.payload.toolRuntimeConfig.noInteraction, id: `q_table_${request.query._id}_${Math.floor( Math.random() * 100000 )}`.replace(/-/g, ""), @@ -201,6 +202,15 @@ module.exports = { }); } + if ( + context.noInteraction !== true && + item.options.showTableSearch === true + ) { + renderingInfo.scripts.push({ + content: renderingInfoScripts.getSearchFormInputScript(context), + }); + } + if (Object.keys(context.minibar).length !== 0) { renderingInfo.scripts.push({ content: renderingInfoScripts.getMinibarsScript(context), diff --git a/styles_src/q-table.scss b/styles_src/q-table.scss index 1247c468..8d1f6242 100644 --- a/styles_src/q-table.scss +++ b/styles_src/q-table.scss @@ -2,6 +2,10 @@ opacity: 1 !important; } +.q-table__search { + padding: 0 1px; +} + .q-table__cell { text-align: left !important; } diff --git a/tasks/updateFixtureData.js b/tasks/updateFixtureData.js index 1a7eda90..fac92805 100644 --- a/tasks/updateFixtureData.js +++ b/tasks/updateFixtureData.js @@ -131,6 +131,18 @@ const fixtureData = [ `${fixtureDataDirectory}/formatted-number-negative.json`, require(`${fixtureDataDirectory}/formatted-number-negative.json`), ], + [ + `${fixtureDataDirectory}/table-search-hidden.json`, + require(`${fixtureDataDirectory}/table-search-hidden.json`), + ], + [ + `${fixtureDataDirectory}/table-search-show.json`, + require(`${fixtureDataDirectory}/table-search-show.json`), + ], + [ + `${fixtureDataDirectory}/table-search-with-multiple-columns.json`, + require(`${fixtureDataDirectory}/table-search-with-multiple-columns.json`), + ], ]; // register migration scripts here in order of version, diff --git a/test/dom-tests.js b/test/dom-tests.js index 83d58298..907bd202 100644 --- a/test/dom-tests.js +++ b/test/dom-tests.js @@ -265,7 +265,7 @@ lab.experiment("cardlayout on mobile", () => { lab.experiment("minibars", () => { it("shows the same markup for positive minibars", async () => { - const workingMinibarsMarkup = `

FIXTURE: minibars with negative values

State by state breakdown
20162017+/- %
Auftragseingang10 37510 989
–6
Umsatz9 68310 178
–5
Ebit-Mage (%)11,711,7
-
Cashflow aus Geschäftstätigkeite929810
–13
Quelle: The Centers for Disease Control and Prevention
`; + const workingMinibarsMarkup = `

FIXTURE: minibars with negative values

State by state breakdown
20162017+/- %
Auftragseingang10 37510 989
–6
Umsatz9 68310 178
–5
Ebit-Mage (%)11,711,7
-
Cashflow aus Geschäftstätigkeite929810
–13
Quelle: The Centers for Disease Control and Prevention
`; const response = await server.inject({ url: "/rendering-info/web?_id=someid", @@ -292,7 +292,7 @@ lab.experiment("minibars", () => { }); it("shows the same markup for negative minibars", async () => { - const workingMinibarsMarkup = `

FIXTURE: minibars with negative values

State by state breakdown
20162017+/- %
Auftragseingang10 37510 989
–6
Umsatz9 68310 178
–5
Ebit-Mage (%)11,711,7
-
Cashflow aus Geschäftstätigkeite929810
–13
Quelle: The Centers for Disease Control and Prevention
`; + const workingMinibarsMarkup = `

FIXTURE: minibars with negative values

State by state breakdown
20162017+/- %
Auftragseingang10 37510 989
–6
Umsatz9 68310 178
–5
Ebit-Mage (%)11,711,7
-
Cashflow aus Geschäftstätigkeite929810
–13
Quelle: The Centers for Disease Control and Prevention
`; const response = await server.inject({ url: "/rendering-info/web?_id=someid", @@ -319,7 +319,7 @@ lab.experiment("minibars", () => { }); it("shows the same markup for mixed minibars", async () => { - const workingMinibarsMarkup = `

FIXTURE: minibars with positive and negative values

State by state breakdown
20162017+/- %
Auftragseingang10 37510 989
6
Umsatz9 68310 178
5
Ebit-Mage (%)11,711,7
-
Cashflow aus Geschäftstätigkeite929810
–13
Quelle: The Centers for Disease Control and Prevention
`; + const workingMinibarsMarkup = `

FIXTURE: minibars with positive and negative values

State by state breakdown
20162017+/- %
Auftragseingang10 37510 989
6
Umsatz9 68310 178
5
Ebit-Mage (%)11,711,7
-
Cashflow aus Geschäftstätigkeite929810
–13
Quelle: The Centers for Disease Control and Prevention
`; const response = await server.inject({ url: "/rendering-info/web?_id=someid", method: "POST", @@ -711,3 +711,39 @@ lab.experiment("footnotes", () => { expect(response.statusCode).to.be.equal(200); }); }); + +lab.experiment("table search", () => { + it("shows table search", async () => { + const response = await server.inject({ + url: "/rendering-info/web?_id=someid", + method: "POST", + payload: { + item: require("../resources/fixtures/data/table-search-show.json"), + toolRuntimeConfig: {}, + }, + }); + + return elementCount(response.result.markup, ".q-table__search__input").then( + (value) => { + expect(value).to.be.equal(1); + } + ); + }); + + it("doesn't show table search", async () => { + const response = await server.inject({ + url: "/rendering-info/web?_id=someid", + method: "POST", + payload: { + item: require("../resources/fixtures/data/table-search-hidden.json"), + toolRuntimeConfig: {}, + }, + }); + + return elementCount(response.result.markup, ".q-table__search__input").then( + (value) => { + expect(value).to.be.equal(0); + } + ); + }); +}); \ No newline at end of file diff --git a/test/e2e-tests.js b/test/e2e-tests.js index acc6727f..f09225d3 100644 --- a/test/e2e-tests.js +++ b/test/e2e-tests.js @@ -166,9 +166,9 @@ lab.experiment("dynamic schema endpoint", () => { }); lab.experiment("fixture data endpoint", () => { - it("returns 33 fixture data items for /fixtures/data", async () => { + it("returns 36 fixture data items for /fixtures/data", async () => { const response = await server.inject("/fixtures/data"); expect(response.statusCode).to.be.equal(200); - expect(response.result.length).to.be.equal(33); + expect(response.result.length).to.be.equal(36); }); }); diff --git a/views/table.html b/views/table.html index 291d748e..e6f507c6 100644 --- a/views/table.html +++ b/views/table.html @@ -3,7 +3,12 @@

{{ item.title }}

{% endif %} {%- if item.subtitle and item.subtitle !== '' %}
{{ item.subtitle }}
{%- endif %} -
+
+ {%- if noInteraction !== true and item.options.showTableSearch === true %} +
+ +
+ {%- endif %} {%- if item.options.hideTableHeader !== true %}