Merge pull request #6 from eyra/consent-table-search-improvement

Improved search in consent table
eyra · Nov 2, 2022 · 05e72be · 05e72be
2 parents 719a2a8 + 08b2ff8
commit 05e72be
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 16 deletions.
diff --git a/dist/framework/visualisation/react/ui/elements/search_bar.js b/dist/framework/visualisation/react/ui/elements/search_bar.js
@@ -10,11 +10,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import _ from 'lodash';
 export var SearchBar = function (_a) {
     var placeholder = _a.placeholder, _b = _a.debounce, debounce = _b === void 0 ? 1000 : _b, onSearch = _a.onSearch;
     function handleChange(event) {
         var words = event.target.value.split(/\s+/);
         onSearch(words);
     }
-    return (_jsx("form", { children: _jsx("div", __assign({ className: 'flex flex-row' }, { children: _jsx("input", { className: 'text-grey1 text-bodymedium font-body pl-3 pr-3 w-full border-2 border-solid border-grey3 focus:outline-none focus:border-primary rounded h-48px', placeholder: placeholder, name: 'query', type: 'search', "phx-debounce": 1000, onChange: handleChange }) })) }));
+    var handleChangeDebounced = useMemo(function () { return _.debounce(handleChange, 300); }, []);
+    return (_jsx("form", { children: _jsx("div", __assign({ className: 'flex flex-row' }, { children: _jsx("input", { className: 'text-grey1 text-bodymedium font-body pl-3 pr-3 w-full border-2 border-solid border-grey3 focus:outline-none focus:border-primary rounded h-48px', placeholder: placeholder, name: 'query', type: 'search', onChange: handleChangeDebounced }) })) }));
 };
diff --git a/dist/framework/visualisation/react/ui/elements/table.js b/dist/framework/visualisation/react/ui/elements/table.js
@@ -128,10 +128,8 @@ export var Table = function (_a) {
         return rows.filter(function (row) { return matchRow(row, query); });
     }
     function matchRow(row, query) {
-        return row.cells.find(function (cell) { return matchCell(cell, query); }) !== undefined;
-    }
-    function matchCell(cell, query) {
-        return query.find(function (word) { return cell.text.includes(word); }) !== undefined;
+        var rowText = row.cells.map(function (cell) { return cell.text; }).join(' ');
+        return query.find(function (word) { return !rowText.includes(word); }) === undefined;
     }
     function handleUndo() {
         updateAlteredRows(body.rows, query);

diff --git a/dist/framework/visualisation/react/ui/prompts/consent_form.js b/dist/framework/visualisation/react/ui/prompts/consent_form.js
@@ -19,10 +19,10 @@ import { Translator } from '../../../../translator';
 import React from 'react';
 import _ from 'lodash';
 export var ConsentForm = function (props) {
-    var tablesIn = parseTables(props.tables);
+    var tablesIn = React.useState(parseTables(props.tables))[0];
     var _a = React.useState(tablesIn), tablesOut = _a[0], setTablesOut = _a[1];
     var _b = React.useState(false), metaTablesVisible = _b[0], setMetaTablesVisible = _b[1];
-    var metaTables = parseTables(props.metaTables);
+    var metaTables = React.useState(parseTables(props.metaTables))[0];
     var resolve = props.resolve;
     var _c = prepareCopy(props), title = _c.title, description = _c.description, donateButton = _c.donateButton;
     function rowCell(dataFrame, column, row) {

diff --git a/src/framework/visualisation/react/ui/elements/search_bar.tsx b/src/framework/visualisation/react/ui/elements/search_bar.tsx
@@ -1,12 +1,16 @@
+import { useMemo } from 'react'
 import { Weak } from '../../../../helpers'
 import { PropsUISearchBar } from '../../../../types/elements'
+import _ from 'lodash'
 
 export const SearchBar = ({ placeholder, debounce = 1000, onSearch }: Weak<PropsUISearchBar>): JSX.Element => {
   function handleChange (event: React.ChangeEvent<HTMLInputElement>): void {
     const words = event.target.value.split(/\s+/)
     onSearch(words)
   }
 
+  const handleChangeDebounced = useMemo(() => _.debounce(handleChange, 300), [])
+
   return (
     <form>
       <div className='flex flex-row'>
@@ -15,8 +19,7 @@ export const SearchBar = ({ placeholder, debounce = 1000, onSearch }: Weak<Props
           placeholder={placeholder}
           name='query'
           type='search'
-          phx-debounce={1000}
-          onChange={handleChange}
+          onChange={handleChangeDebounced}
         />
       </div>
     </form>

diff --git a/src/framework/visualisation/react/ui/elements/table.tsx b/src/framework/visualisation/react/ui/elements/table.tsx
@@ -171,11 +171,8 @@ export const Table = ({ id, head, body, readOnly = false, pageSize = 7, onChange
   }
 
   function matchRow (row: PropsUITableRow, query: string[]): boolean {
-    return row.cells.find((cell) => matchCell(cell, query)) !== undefined
-  }
-
-  function matchCell (cell: PropsUITableCell, query: string[]): boolean {
-    return query.find((word) => cell.text.includes(word)) !== undefined
+    const rowText = row.cells.map((cell) => cell.text).join(' ')
+    return query.find((word) => !rowText.includes(word)) === undefined
   }
 
   function handleUndo (): void {

diff --git a/src/framework/visualisation/react/ui/prompts/consent_form.tsx b/src/framework/visualisation/react/ui/prompts/consent_form.tsx
@@ -18,10 +18,10 @@ interface TableContext {
 }
 
 export const ConsentForm = (props: Props): JSX.Element => {
-  const tablesIn = parseTables(props.tables)
+  const [tablesIn] = React.useState<Array<PropsUITable & TableContext>>(parseTables(props.tables))
   const [tablesOut, setTablesOut] = React.useState<Array<PropsUITable & TableContext>>(tablesIn)
   const [metaTablesVisible, setMetaTablesVisible] = React.useState<boolean>(false)
-  const metaTables = parseTables(props.metaTables)
+  const [metaTables] = React.useState<Array<PropsUITable & TableContext>>(parseTables(props.metaTables))
 
   const { resolve } = props
   const { title, description, donateButton } = prepareCopy(props)